/*
 * "Ask Resilio" chat widget — shared by the help center (/help) and the main
 * app (frontend/index.html loads this as help/chat.css). Tokens come from
 * css/styles.css, so the widget follows the app's theme and brand.
 */

/* The avatar is the wordmark's blue pinwheel, inlined as SVG by help-chat.js so
   its wedge colours can follow the theme: the dark wordmark's palette in light
   mode, the light wordmark's in dark mode — no backdrop chip needed. */
.hc-ava {
  width: 24px; height: 24px; display: block; flex: none;
  --hw-d: #091A32; --hw-m: #1E3A5C; --hw-l: #3D6E94;
}
.hc-ava .hw-d { fill: var(--hw-d); }
.hc-ava .hw-m { fill: var(--hw-m); }
.hc-ava .hw-l { fill: var(--hw-l); }
@media (prefers-color-scheme: dark) {
  .hc-ava { --hw-d: #4D7CAB; --hw-m: #6E9BC4; --hw-l: #96BEDC; }
}
:root[data-theme="light"] .hc-ava { --hw-d: #091A32; --hw-m: #1E3A5C; --hw-l: #3D6E94; }
:root[data-theme="dark"] .hc-ava { --hw-d: #4D7CAB; --hw-m: #6E9BC4; --hw-l: #96BEDC; }

/* The avatar breathes while the assistant is composing an answer. */
.hc-ava-pulse { animation: hc-pulse 1.1s ease-in-out infinite; }
@keyframes hc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) { .hc-ava-pulse { animation: none; } }

/* Launcher. Surface-coloured (not brand red) so the bare pinwheel reads on it. */
.hc-chat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 25;
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-2);
  border-radius: 999px; padding: 9px 18px 9px 12px; font: inherit; font-weight: 700;
  box-shadow: var(--shadow-lg); cursor: pointer;
}
.hc-chat-fab:hover { background: var(--surface-2); }

/* Panel */
.hc-chat {
  position: fixed; right: 20px; bottom: 20px; z-index: 41;
  display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 32px)); height: min(540px, calc(100vh - 60px));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden;
  font-family: var(--font); color: var(--ink);
}
.hc-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.hc-chat-id { display: flex; align-items: center; gap: 9px; }
.hc-chat-head h3 { margin: 0; font-size: 15px; color: var(--ink); }
.hc-chat-close { background: transparent; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; }
.hc-chat-close:hover { color: var(--ink); }
.hc-chat-msgs { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.hc-msg-row { display: flex; align-items: flex-end; gap: 7px; }
.hc-msg-row-user { justify-content: flex-end; }
.hc-msg-ava { width: 22px; height: 22px; margin-bottom: 2px; }
.hc-msg { max-width: 88%; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: break-word; }
.hc-msg-user { align-self: flex-end; background: var(--brand-tint); }
.hc-msg-bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }
.hc-msg-thinking { color: var(--muted); font-style: italic; }
.hc-msg a { color: var(--brand); }
.hc-msg-sources { align-self: flex-start; font-size: 12.5px; color: var(--muted); padding: 0 4px 0 33px; }
.hc-msg-sources a { color: var(--brand); }
.hc-chat-form { display: flex; gap: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--border); }
.hc-chat-form input {
  flex: 1; min-width: 0; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 8px 10px;
}
.hc-chat-form .btn-primary { padding: 8px 14px; }
.hc-chat-note { margin: 4px 12px 10px; font-size: 11px; color: var(--muted); }

/* The context-aware "?" launcher help-chat.js injects into the app header —
   a bare circular tap target (btn-outline supplies border-color/background,
   the global a{} rule supplies the brand-2 red text; neither is visible here
   since there's no border-width, which is intentional — see screenshot). */
.hc-qbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  font-weight: 800; text-decoration: none;
}