/* Chat widget. Colours come from the host page's custom properties when it
  defines them, with neutral dark fallbacks so the module stands alone. */
  .chat {
    --chat-fg: var(--fg, #ececec);
    --chat-muted: var(--muted, #8b9096);
    --chat-line: var(--line, #26292c);
    --chat-panel: var(--panel, #161819);
    --chat-accent: var(--accent, #4fd1c5);
   
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    color: var(--chat-fg);
    font-size: 13px;
   }
   
   .chat-log {
    height: 180px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--chat-panel);
    border: 1px solid var(--chat-line);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
   }
   .chat-row { display: flex; align-items: baseline; gap: 7px; line-height: 1.35; }
   .chat-who { color: var(--chat-accent); font-weight: 700; flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .chat-body { flex: 1; overflow-wrap: anywhere; }
   .chat-when { color: var(--chat-muted); font-size: 10px; flex: none; font-variant-numeric: tabular-nums; }
   .chat-empty { color: var(--chat-muted); font-size: 12px; margin: auto; }
   
   .chat-form { display: flex; gap: 6px; }
   .chat-form input {
    background: #0a0c0d;
    color: var(--chat-fg);
    border: 1px solid var(--chat-line);
    border-radius: 8px;
    padding: 9px 10px;
    font: inherit;
    font-size: 16px; /* 16px stops iOS zooming the page on focus */
    min-width: 0;
   }
   .chat-form input:focus { outline: none; border-color: var(--chat-accent); }
   .chat-name { flex: 0 0 30%; }
   .chat-text { flex: 1; }
   .chat-form button {
    background: var(--chat-accent);
    color: #04201d;
    border: 0;
    font-weight: 700;
    border-radius: 8px;
    padding: 9px 14px;
    cursor: pointer;
    flex: none;
   }
   .chat-form button:hover { filter: brightness(1.08); }
   .chat-form button:disabled { opacity: .6; cursor: default; }
   
   .chat-msg { color: var(--chat-muted); font-size: 12px; min-height: 15px; }
   
   @media (max-width: 520px) {
    .chat-form { flex-wrap: wrap; }
    .chat-name { flex: 1 1 100%; }
   }