body {
    font-family: sans-serif;
    padding: 2rem;
    background: #f0f0f0;
  }
  .halo-container {
    max-width: 800px;
    margin: auto;
    background: #fff;
    border: 4px solid #186670;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 0 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  .chat-window, #chatWindow {
    flex: 1;
    overflow-y: auto;
    margin: 1rem 0;
    padding: 1rem;
    background: #fdfdfd;
    border: 1px solid #ccc;
  }
  .message {
    max-width: 80%;
    padding: 1rem;
    border-radius: 12px;
    margin: 0.5rem 0;
    word-wrap: break-word;
  }
  .message.user {
    background-color: #e3f2fd;
    text-align: right;
    margin-left: auto;
  }
  .message.system {
    background-color: #fffde7;
    font-style: italic;
    text-align: center;
    max-width: 100%;
  }
  /* Agents */
  .message.agent-form      { background-color: #dceeff; }
  .message.agent-coach     { background-color: #eae0ff; }
  .message.agent-seo       { background-color: #fff9d6; }
  .message.agent-finance   { background-color: #f9f4ef; }
  .message.agent-kate      { background-color: #e4f9e2; }
  .message.agent-commerce  { background-color: #ffe8d2; }
  .message.agent-secretaire{ background-color: #f0f0f0; }
  /* ChatGPT */
  .message.agent-chatgpt   { background-color: #d0f0c0; }
  
  select, input[type="text"], textarea, button {
    padding: 0.7rem;
    font-size: 1rem;
    margin-top: 0.5rem;
    border-radius: 8px;
  }
  textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
  }
  button {
    background-color: #186670;
    color: white;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  button:hover   { background-color: #155c5c; }
  button:disabled{ background-color: #cccccc; cursor: not-allowed; }
  
  #sendBtn, #sendBtnReunion {
    padding: 0.7rem;
  }
  .tooltip { position: relative; cursor: help; }
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
  
  .status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #cccccc;
    margin-right: 5px;
    vertical-align: middle;
  }
  .status-indicator.active {
    background-color: #ff4444;
    animation: pulse 1.5s infinite;
  }
  @keyframes pulse { 0%{opacity:1}50%{opacity:0.5}100%{opacity:1} }
  
  .buttons-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
  }
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  .topbar a {
    text-decoration: none;
    font-size: 0.9rem;
    color: #186670;
  }