/* ===========================================================================
   F1 concierge chat widget — editorial styling (Slice 2).
   Scoped under .hv-cc. Colours map onto the editorial --ed-* tokens, which
   already flip for [data-theme="dark"] — so there is no separate dark block
   here any more; the widget themes itself by reading the host's tokens.
   Behaviour is unchanged from F1; this file is paint only.
   =========================================================================== */

.hv-cc {
  /* Map the widget's local vars onto editorial tokens (single source of truth). */
  --cc-surface:        var(--ed-color-surface-raised);
  --cc-paper:          var(--ed-color-bg-paper);
  --cc-text:           var(--ed-color-text-primary);
  --cc-muted:          var(--ed-color-text-muted);
  --cc-border:         var(--ed-color-border-subtle);
  --cc-border-strong:  var(--ed-color-border-default);
  --cc-accent:         var(--ed-color-accent);          /* decorative (launcher, avatar) */
  --cc-accent-strong:  var(--ed-color-accent-strong);   /* interactive (buttons) */
  --cc-accent-hover:   var(--ed-color-accent-strong-hover);
  --cc-on-accent:      var(--ed-color-accent-on-accent);
  --cc-accent-surface: var(--ed-color-accent-surface);  /* assistant bubble tint */
  --cc-success:        var(--ed-color-success);
  --cc-success-glow:   var(--ed-color-success-glow);
  --cc-danger:         var(--ed-color-danger);
  --cc-shadow:         var(--ed-shadow-lg);

  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147483000;
  font-family: var(--ed-font-sans);
  font-size: var(--ed-font-size-body-sm);
  line-height: var(--ed-line-body);
  color: var(--cc-text);
}

/* Launcher bubble — flat decorative amber, Fraunces brand "H". */
.hv-cc__launcher {
  width: 58px;
  height: 58px;
  border-radius: var(--ed-radius-full);
  border: none;
  cursor: pointer;
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  box-shadow: var(--cc-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ed-font-serif);
  font-weight: var(--ed-weight-medium);
  font-size: 26px;
  line-height: 1;
  transition: transform 0.12s ease;
}
.hv-cc__launcher:hover { transform: scale(1.06); }
.hv-cc__launcher[hidden] { display: none; }

/* Panel */
.hv-cc__panel {
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 100px);
  background: var(--cc-surface);
  border: var(--ed-border-width) solid var(--cc-border);
  border-radius: var(--ed-radius-lg);
  box-shadow: var(--cc-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}
.hv-cc__panel--open { opacity: 1; transform: none; pointer-events: auto; }
.hv-cc__panel[hidden] { display: none; }

/* Header — flat, with a small-caps mono title and a live dot before the subtitle. */
.hv-cc__header {
  display: flex;
  align-items: center;
  gap: var(--ed-space-10);
  padding: var(--ed-space-14) var(--ed-space-16);
  background: var(--cc-surface);
  border-bottom: var(--ed-border-width) solid var(--cc-border);
  color: var(--cc-text);
}
.hv-cc__avatar {
  width: 30px; height: 30px; border-radius: var(--ed-radius-sm);
  background: var(--cc-accent);
  color: var(--cc-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ed-font-serif); font-weight: var(--ed-weight-medium); font-size: 16px; line-height: 1;
}
.hv-cc__title {
  flex: 1;
  font-family: var(--ed-font-mono);
  font-variant: small-caps;
  letter-spacing: var(--ed-tracking-label);
  font-size: var(--ed-font-size-breadcrumb);
  color: var(--cc-text);
}
.hv-cc__subtitle {
  display: flex; align-items: center; gap: var(--ed-space-6);
  font-size: var(--ed-font-size-caption);
  color: var(--cc-muted);
}
.hv-cc__subtitle::before {
  content: '';
  width: var(--ed-space-8); height: var(--ed-space-8);
  border-radius: var(--ed-radius-full);
  background: var(--cc-success);
  box-shadow: 0 0 0 0 var(--cc-success-glow);
  animation: hv-cc-pulse 1.8s ease-in-out infinite;
}
@keyframes hv-cc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--cc-success-glow); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-cc__subtitle::before { animation: none; }
}
.hv-cc__close {
  background: transparent; border: none; color: var(--cc-muted);
  cursor: pointer; font-size: 22px; line-height: 1; padding: 2px 6px;
}
.hv-cc__close:hover { color: var(--cc-text); }

.hv-cc__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ed-space-16);
  display: flex;
  flex-direction: column;
  gap: var(--ed-space-10);
  background: var(--cc-surface);
}

/* Message bubbles — assistant = amber tint, user = paper-cream. */
.hv-cc__msg {
  max-width: 84%;
  padding: var(--ed-space-10) var(--ed-space-12);
  border-radius: var(--ed-radius-sm);
  font-size: var(--ed-font-size-body-sm);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.hv-cc__msg--assistant {
  align-self: flex-start;
  background: var(--cc-accent-surface);
  color: var(--cc-text);
  border-bottom-left-radius: var(--ed-space-2);
}
.hv-cc__msg--user {
  align-self: flex-end;
  background: var(--cc-paper);
  color: var(--cc-text);
  border: var(--ed-border-width) solid var(--cc-border);
  border-bottom-right-radius: var(--ed-space-2);
}
.hv-cc__typing { align-self: flex-start; color: var(--cc-muted); font-size: var(--ed-font-size-caption); font-style: italic; }

/* Teaser card — paper card with a serif headline (the "shaped" message). */
.hv-cc__teaser {
  align-self: stretch;
  background: var(--cc-paper);
  border: var(--ed-border-width) solid var(--cc-border);
  border-radius: var(--ed-radius-md);
  padding: var(--ed-space-14);
}
.hv-cc__teaser-head {
  font-family: var(--ed-font-serif);
  font-size: var(--ed-font-size-h3);
  line-height: var(--ed-line-h3);
  color: var(--cc-text);
  margin-bottom: var(--ed-space-6);
}
.hv-cc__teaser-stat { font-size: var(--ed-font-size-caption); color: var(--cc-muted); margin-bottom: var(--ed-space-10); }
.hv-cc__badge {
  display: inline-block;
  font-family: var(--ed-font-mono);
  font-variant: small-caps;
  letter-spacing: var(--ed-tracking-label);
  font-size: var(--ed-font-size-breadcrumb);
  color: var(--ed-color-accent-on-surface);
  background: var(--cc-accent-surface);
  padding: var(--ed-space-2) var(--ed-space-8);
  border-radius: var(--ed-radius-sm);
  margin-bottom: var(--ed-space-10);
}
/* Inferred-competitor seam — empty in v1, kept so a later build can fill it
   without touching the teaser layout (plan §8 open-A). */
.hv-cc__competitor-seam:empty { display: none; }

/* Signup form — underline inputs. */
.hv-cc__form { display: flex; flex-direction: column; gap: var(--ed-space-10); margin-top: var(--ed-space-4); }
.hv-cc__input {
  width: 100%;
  padding: var(--ed-space-8) var(--ed-space-2);
  border: none;
  border-bottom: 1px solid var(--cc-border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--cc-text);
  font-family: inherit;
  font-size: var(--ed-font-size-body-sm);
}
.hv-cc__input::placeholder { color: var(--cc-muted); }
.hv-cc__input:focus { outline: none; border-bottom-color: var(--cc-accent); }
.hv-cc__error { color: var(--cc-danger); font-size: var(--ed-font-size-caption); min-height: 0; }

.hv-cc__btn {
  width: 100%;
  padding: var(--ed-space-12) var(--ed-space-14);
  border-radius: var(--ed-radius-sm);
  border: none;
  cursor: pointer;
  background: var(--cc-accent-strong);
  color: var(--cc-on-accent);
  font-family: inherit;
  font-weight: var(--ed-weight-medium);
  font-size: var(--ed-font-size-body-sm);
  transition: background 0.12s ease;
}
.hv-cc__btn:hover { background: var(--cc-accent-hover); }
.hv-cc__btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Turnstile holder — only visible while a challenge is mounted */
.hv-cc__turnstile { margin: var(--ed-space-6) 0; min-height: 0; display: flex; justify-content: center; }

/* Composer */
.hv-cc__composer {
  display: flex; gap: var(--ed-space-8); align-items: center;
  padding: var(--ed-space-12);
  border-top: var(--ed-border-width) solid var(--cc-border);
  background: var(--cc-surface);
}
.hv-cc__composer .hv-cc__input { flex: 1; }
.hv-cc__send {
  flex: 0 0 auto; width: 40px; height: 36px;
  border-radius: var(--ed-radius-sm); border: none; cursor: pointer;
  background: var(--cc-accent-strong); color: var(--cc-on-accent); font-size: 18px;
  transition: background 0.12s ease;
}
.hv-cc__send:hover { background: var(--cc-accent-hover); }
.hv-cc__send:disabled { opacity: 0.5; cursor: not-allowed; }

.hv-cc__footnote { text-align: center; font-size: var(--ed-font-size-caption); color: var(--cc-muted); padding: 0 var(--ed-space-12) var(--ed-space-10); background: var(--cc-surface); }

@media (max-width: 480px) {
  .hv-cc { right: 12px; bottom: 12px; }
  .hv-cc__panel { width: calc(100vw - 24px); height: calc(100vh - 84px); }
}