/* Zimritech chat widget — launcher + panel.
   Loaded by all 11 pages alongside chat-widget.js.

   All colour comes from the brand tokens in styles.css. The two values the
   palette has no equivalent for (a readable cyan for chips, and an error red)
   are declared once here as tokens rather than sprinkled as literals. */

.zc-launcher,
.zc-panel {
  --zc-surface: var(--bg-2);
  --zc-chip-ink: #bfe4ec;              /* cyan tint of --aviia, 7:1 on --bg-2 */
  --zc-danger: #ffb4ab;                /* error text, 6.4:1 on --bg-2 */
  --zc-danger-bg: rgba(255, 138, 128, 0.13);
  --zc-danger-line: rgba(255, 138, 128, 0.28);
  --zc-cool-line: rgba(74, 166, 184, 0.34);
  --zc-cool-fill: rgba(74, 166, 184, 0.12);
  --zc-shadow: rgba(4, 16, 30, 0.55);
}

.zc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── launcher ─────────────────────────────────────────────────────────────
   Collapsed to the bot icon by default. The label reveals on hover/focus and
   on a timed "peek" loop driven by chat-widget.js (the .is-expanded class),
   then tucks away again — width, opacity and the icon→label gap all animate. */
.zc-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: flex; align-items: center;
  min-height: 56px; padding: 9px 11px;
  background: var(--core-blue);
  border: 1px solid var(--zc-cool-line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 10px 34px var(--zc-shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease,
              border-color 0.22s ease, padding-right 0.42s ease;
}
.zc-launcher:hover { transform: translateY(-2px); border-color: var(--accent-glow); }
.zc-launcher:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.zc-launcher img { display: block; flex-shrink: 0; }

.zc-launcher-label {
  display: block; overflow: hidden; white-space: nowrap;
  max-width: 0; margin-left: 0; opacity: 0;
  transition: max-width 0.42s ease, margin-left 0.42s ease, opacity 0.28s ease;
}
/* Reveal on the peek loop, and whenever a pointer/keyboard user targets the
   launcher — but never while the panel is open (icon-only in that state). */
.zc-launcher.is-expanded,
.zc-launcher:not(.is-open):hover,
.zc-launcher:not(.is-open):focus-visible { padding-right: 20px; }
.zc-launcher.is-expanded .zc-launcher-label,
.zc-launcher:not(.is-open):hover .zc-launcher-label,
.zc-launcher:not(.is-open):focus-visible .zc-launcher-label {
  max-width: 180px; margin-left: 10px; opacity: 1;
}

/* ── panel ────────────────────────────────────────────────────────────── */
.zc-panel {
  position: fixed; right: 22px; bottom: 90px; z-index: 901;
  display: flex; flex-direction: column;
  width: min(384px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 130px));
  background: var(--zc-surface);
  border: 1px solid var(--zc-cool-line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 26px 70px var(--zc-shadow);
  font-family: var(--font-ui);
}
/* `display: flex` above outranks the UA's [hidden] rule, so the panel would
   render open on load. Restore the attribute's meaning explicitly. */
.zc-panel[hidden] { display: none; }

.zc-panel.is-open { animation: zc-in 0.2s ease both; }
@keyframes zc-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }

.zc-head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 14px 14px 16px;
  background: linear-gradient(135deg, var(--core-blue) 0%, var(--horizon) 100%);
  border-bottom: 1px solid var(--line);
}
.zc-head img { display: block; flex-shrink: 0; }
.zc-head-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.zc-head-title { color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 500; }
.zc-head-sub { color: var(--ink-3); font-size: 11.5px; margin-top: 1px; }
.zc-close {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex-shrink: 0;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--ink-3); cursor: pointer;
}
.zc-close:hover { background: var(--line); color: var(--ink); }
.zc-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── transcript ───────────────────────────────────────────────────────── */
.zc-log { flex: 1; overflow-y: auto; padding: 16px 16px 4px; display: flex; flex-direction: column; gap: 10px; }
.zc-msg { display: flex; }
.zc-msg--user { justify-content: flex-end; }
.zc-bubble {
  max-width: 84%; padding: 10px 13px; border-radius: 13px;
  font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word;
}
.zc-msg--assistant .zc-bubble { background: var(--line); color: var(--ink-2); border-bottom-left-radius: 5px; }
.zc-msg--user .zc-bubble { background: var(--accent); color: var(--core-blue); font-weight: 500; border-bottom-right-radius: 5px; }
.zc-msg--error .zc-bubble {
  background: var(--zc-danger-bg); color: var(--zc-danger);
  border: 1px solid var(--zc-danger-line); font-size: 13.5px;
}

.zc-typing { display: flex; gap: 4px; align-items: center; padding: 13px; }
.zc-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: zc-blink 1.3s infinite ease-in-out; }
.zc-typing span:nth-child(2) { animation-delay: 0.18s; }
.zc-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes zc-blink { 0%, 60%, 100% { opacity: 0.28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── suggestion chips ─────────────────────────────────────────────────── */
.zc-suggests { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 16px 2px; }
.zc-suggest {
  min-height: 34px; padding: 7px 12px;
  background: var(--zc-cool-fill);
  border: 1px solid var(--zc-cool-line);
  border-radius: 999px;
  color: var(--zc-chip-ink); font-family: inherit; font-size: 12.5px; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.zc-suggest:hover { background: var(--cool-glow); color: var(--ink); }
.zc-suggest:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── composer ─────────────────────────────────────────────────────────── */
.zc-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 14px 6px; border-top: 1px solid var(--line); }
.zc-input {
  flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: 11px 12px;
  background: var(--line);
  border: 1px solid var(--line-field); border-radius: var(--radius);
  color: var(--ink); font-family: inherit; font-size: 14px; line-height: 1.45;
}
.zc-input::placeholder { color: var(--ink-4); }
.zc-input:focus { outline: none; border-color: var(--accent-cool); }
.zc-send {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--accent); border: 0; border-radius: var(--radius);
  color: var(--core-blue); cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.zc-send:hover:not(:disabled) { transform: translateY(-1px); }
.zc-send:disabled { opacity: 0.42; cursor: default; }
.zc-send:focus-visible { outline: 2px solid var(--stark); outline-offset: 2px; }

.zc-foot { margin: 0; padding: 2px 16px 12px; color: var(--ink-4); font-size: 10.5px; line-height: 1.5; }
.zc-foot a { color: var(--ink-3); }

/* Empty and zero-height in the normal case. It must NOT be force-hidden: with
   appearance:interaction-only, Cloudflare renders a real challenge here for
   visitors it cannot silently clear, and hiding it would strand them. */
.zc-turnstile:not(:empty) { padding: 0 16px 10px; }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Icon-only on phones — no room for the peeking label, so keep it collapsed
     and neutralise the expand padding even under :hover / .is-expanded. */
  .zc-launcher,
  .zc-launcher.is-expanded,
  .zc-launcher:hover { right: 14px; bottom: 14px; padding: 9px 11px; }
  .zc-launcher-label { display: none; }
  .zc-panel {
    right: 10px; left: 10px; bottom: 80px;
    width: auto; height: min(70vh, calc(100vh - 110px));
  }
}

/* Keep the launcher clear of the mobile nav's centred CTA. */
@media (max-width: 900px) {
  .zc-launcher { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .zc-launcher, .zc-send, .zc-suggest, .zc-panel { transition: none; animation: none; }
  .zc-launcher-label { transition: none; }
  .zc-typing span { animation: none; opacity: 0.6; }
  /* No timed peek for these users (JS skips it); keep the label shown so the
     "Ask us anything" affordance is still there — just without the motion. */
  .zc-launcher:not(.is-open) { padding-right: 20px; }
  .zc-launcher:not(.is-open) .zc-launcher-label { max-width: 180px; margin-left: 10px; opacity: 1; }
}