/*
  BKV Energy Plan Concierge, unofficial Whtnxt demo
  Brand tokens sourced live from bkvenergy.com. See ../docs/BRAND.md for
  provenance of every value below (exact CSS file + selector each was read from).
*/

:root {
  /* Colors, read from bkvenergy.com :root --wp--preset--color-* custom properties */
  --bkv-blue: #094e89;        /* primary-blue */
  --bkv-teal: #00b49d;        /* teal (brand accent, links, icons, non-text fills) */
  --bkv-teal-safe: #00806f;   /* darkened teal, WCAG AA fix for white text on teal buttons (raw #00b49d + white = 2.62:1, fails) */
  --bkv-gold: #ffd27d;        /* soft-yellow */
  --bkv-light-blue: #bbddfb;
  --bkv-mint: #bdfff7;
  --bkv-pink: #ffdad9;        /* light-pink, reserved for true errors only */
  --bkv-cream: #fff8e4;
  --bkv-pale-yellow: #fff1c9;
  --bkv-light-gray: #ededed;
  --bkv-off-white: #f5f5f5;
  --bkv-white: #ffffff;
  --bkv-ink: #2f2f2f;         /* body copy color */
  --bkv-gray-safe: #666666;   /* darkened from brand gray #797979 (4.35:1, fails) to 5.74:1 */
  --bkv-error: #b3261e;       /* not a brand token, used only for genuine network/fetch errors */

  /* Typography, futura-pt (Adobe/Typekit, domain-locked) and LarkenMedium (self-hosted,
     no cross-origin font access) are BKV's real fonts, named here for provenance, but not
     network-loaded (no-CDN, no-build constraint). System stacks approximate their shape. */
  --font-heading: "LarkenMedium", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: futura-pt, -apple-system, "Century Gothic", "Avenir Next", Avenir, "Segoe UI", sans-serif;

  /* Radius, read from bkvenergy.com .button / .card rules */
  --radius-pill: 27px;
  --radius-card: 20px;
  --radius-sm: 10px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --operator-width: 380px;
  --shadow-card: 0 6px 20px rgba(9, 78, 137, 0.08);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--bkv-ink);
  background: var(--bkv-off-white);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0 0 var(--space-2);
  font-weight: 600;
  color: var(--bkv-blue);
}

button, input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* BKV's own site sets *:focus{outline:none}, we deliberately do not inherit that.
   Every interactive element gets a visible, high-contrast focus ring. */
a, button, input, textarea, [tabindex] {
  outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--bkv-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img {
  max-width: 100%;
  display: block;
}

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

/* ---------- App shell ---------- */

/* height:100vh (not min-height) caps the shell so each pane scrolls its own
   content internally. A min-height here let long conversations grow the
   whole document and drag the operator score panel off-screen with it,
   confirmed via CDP: window.scrollY moved while operatorPane.scrollTop
   stayed 0. The score must never scroll away mid-demo. */
.app-shell {
  display: flex;
  height: 100vh;
  align-items: stretch;
}

.visitor-pane {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bkv-white);
}

.visitor-inner {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 0 var(--space-4);
}

/* ---------- Visitor header ---------- */

.visitor-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-3);
  border-bottom: 1px solid var(--bkv-light-gray);
}

.visitor-header .logo {
  height: 32px;
  width: auto;
}

.visitor-header .title {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.visitor-header .title strong {
  font-family: var(--font-heading);
  color: var(--bkv-blue);
  font-size: 17px;
}

.visitor-header .title span {
  font-size: 13px;
  color: var(--bkv-gray-safe);
}

.operator-toggle {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: var(--space-2);
  background: var(--bkv-blue);
  color: var(--bkv-white);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.operator-toggle .score-pill {
  background: var(--bkv-white);
  color: var(--bkv-blue);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
}

/* ---------- Honesty markers ---------- */

.honesty-strip {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--bkv-light-gray);
}

.honesty-strip p {
  margin: 2px 0;
  font-size: 12px;
  color: var(--bkv-gray-safe);
  line-height: 1.4;
}

.honesty-strip strong {
  color: var(--bkv-ink);
}

/* ---------- Chat log ---------- */

.chat-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.msg {
  max-width: 86%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  font-size: 15px;
  line-height: 1.55;
}

.msg p {
  margin: 0 0 var(--space-2);
}
.msg p:last-child {
  margin-bottom: 0;
}

.msg--user {
  align-self: flex-end;
  background: var(--bkv-blue);
  color: var(--bkv-white);
  border-bottom-right-radius: var(--space-1);
}

.msg--assistant {
  align-self: flex-start;
  background: var(--bkv-off-white);
  color: var(--bkv-ink);
  border-bottom-left-radius: var(--space-1);
}

/* Rate-refusal: a compliance feature, not a failure. Calm blue/cream, a shield icon,
   a named label, deliberately NOT styled like the error state. */
.msg--refusal {
  align-self: flex-start;
  background: var(--bkv-cream);
  border: 1px solid var(--bkv-gold);
  color: var(--bkv-ink);
  border-bottom-left-radius: var(--space-1);
}

.msg--refusal .msg-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bkv-blue);
  margin-bottom: var(--space-2);
}

.msg--refusal .msg-label svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Genuine error: the only place the error palette appears. */
.msg--error {
  align-self: flex-start;
  background: var(--bkv-pink);
  color: var(--bkv-error);
  border-bottom-left-radius: var(--space-1);
}

.msg--error .msg-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-2);
}

.msg--error .msg-label svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.retry-btn {
  margin-top: var(--space-2);
  background: var(--bkv-white);
  border: 2px solid var(--bkv-error);
  color: var(--bkv-error);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.retry-btn:hover {
  background: var(--bkv-error);
  color: var(--bkv-white);
}

/* CTA-armed handoff card, inline in the visitor's chat */
.cta-card {
  align-self: flex-start;
  max-width: 86%;
  background: var(--bkv-white);
  border: 2px solid var(--bkv-gold);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.cta-card .cta-eyebrow {
  color: var(--bkv-teal-safe);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-2);
}

.cta-card p {
  margin: 0 0 var(--space-3);
  font-size: 15px;
}

.cta-btn {
  display: inline-block;
  background: var(--bkv-teal-safe);
  color: var(--bkv-white);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
}
.cta-btn:hover {
  background: var(--bkv-blue);
}

/* ---------- Typing indicator ---------- */

.msg--typing {
  align-self: flex-start;
  background: var(--bkv-off-white);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  border-bottom-left-radius: var(--space-1);
}

.typing-dots {
  display: flex;
  gap: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bkv-teal-safe);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-dots span {
    animation: none;
    opacity: 1;
  }
}

/* ---------- Empty state / starter questions ---------- */

.empty-state {
  padding: var(--space-6) 0;
}

.empty-state h1 {
  font-size: 24px;
  margin-bottom: var(--space-2);
}

.empty-state p.lede {
  color: var(--bkv-gray-safe);
  font-size: 15px;
  margin: 0 0 var(--space-5);
}

.starter-questions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.starter-chip {
  background: var(--bkv-white);
  border: 1px solid var(--bkv-light-gray);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
  color: var(--bkv-blue);
  cursor: pointer;
  text-align: left;
}
.starter-chip:hover {
  border-color: var(--bkv-teal-safe);
  background: var(--bkv-off-white);
}

/* ---------- Composer ---------- */

.composer {
  border-top: 1px solid var(--bkv-light-gray);
  padding: var(--space-4) 0 var(--space-5);
  display: flex;
  gap: var(--space-2);
}

.composer input[type="text"] {
  flex: 1 1 auto;
  border: 1px solid var(--bkv-light-gray);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-4);
  font-size: 15px;
  background: var(--bkv-off-white);
}

.composer input[type="text"]:disabled {
  opacity: 0.6;
}

.composer button {
  background: var(--bkv-teal-safe);
  color: var(--bkv-white);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0 var(--space-5);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.composer button:disabled {
  background: var(--bkv-light-gray);
  color: var(--bkv-gray-safe);
  cursor: not-allowed;
}

.composer button:not(:disabled):hover {
  background: var(--bkv-blue);
}

/* ---------- Operator pane ---------- */

.operator-pane {
  flex: 0 0 var(--operator-width);
  width: var(--operator-width);
  background: var(--bkv-blue);
  color: var(--bkv-white);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.operator-pane h2 {
  color: var(--bkv-white);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  opacity: 0.85;
}

/* Never scrolls: header + score meter stay visible for the whole call. */
.operator-pinned {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-4) var(--space-4);
}

/* Scrolls on its own so a long turn history can't push the score out of view. */
.operator-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-4) var(--space-5);
}

.operator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.operator-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.demo-tag {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.operator-close {
  display: none;
  background: transparent;
  border: none;
  color: var(--bkv-white);
  cursor: pointer;
  padding: var(--space-1);
}
.operator-close svg {
  width: 22px;
  height: 22px;
}

/* Score meter */

.score-block .score-number {
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  color: var(--bkv-white);
}

.score-block .score-number span {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.7;
  font-family: var(--font-body);
}

.score-block .intent-label {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bkv-teal);
  color: var(--bkv-blue);
}

.meter-track {
  position: relative;
  margin-top: var(--space-4);
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: visible;
}

.meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--bkv-teal);
  width: 0%;
  transition: width 0.5s ease, background-color 0.3s ease;
}

.meter-fill.is-armed {
  background: var(--bkv-gold);
}

@media (prefers-reduced-motion: reduce) {
  .meter-fill {
    transition: none;
  }
}

/* The fill's own scale (app.js: pct = score / CTA_THRESHOLD * 100) already
   maps a score of 60 to 100% width, so the threshold IS the track's right
   edge, not a point partway along it. A previous fixed `left: 60%` here
   was decoupled from that scale (confirmed via measured geometry: the tick
   stayed at 60% of track width regardless of score), which both misrepresented
   the threshold and crowded a centered label into the pane's edge. Anchoring
   both to the right edge keeps them consistent with the scale and gives the
   label room to grow only leftward, into the track, never past the pane. */
.meter-threshold {
  position: absolute;
  top: -4px;
  bottom: -4px;
  right: 0;
  width: 2px;
  background: var(--bkv-white);
  opacity: 0.6;
}

.meter-threshold::after {
  content: "CTA at 60";
  position: absolute;
  top: -20px;
  right: 0;
  font-size: 10px;
  white-space: nowrap;
  opacity: 0.75;
}

.meter-caption {
  margin-top: var(--space-3);
  font-size: 13px;
  opacity: 0.8;
}

.cta-armed-banner {
  display: none;
  align-items: center;
  gap: var(--space-2);
  background: var(--bkv-gold);
  color: var(--bkv-blue);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  font-weight: 700;
  font-size: 13px;
}

.cta-armed-banner.is-visible {
  display: flex;
}

.cta-armed-banner svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Turn timeline */

.turn-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.turn-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.turn-item .turn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.turn-item .turn-index {
  font-size: 11px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.turn-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.intent-chip {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bkv-white);
  color: var(--bkv-blue);
}

.delta-chip {
  font-size: 12px;
  font-weight: 700;
  color: var(--bkv-gold);
}

.turn-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.turn-sources li {
  font-size: 12px;
}

.turn-sources a {
  color: var(--bkv-mint);
  text-decoration: underline;
  word-break: break-word;
}

.turn-sources a:hover,
.turn-sources a:focus-visible {
  color: var(--bkv-white);
}

.turn-sources .no-sources {
  font-size: 12px;
  opacity: 0.65;
  font-style: italic;
}

.operator-empty {
  font-size: 13px;
  opacity: 0.75;
  line-height: 1.6;
}

/* ---------- Scrim (mobile operator drawer) ---------- */

.scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9, 78, 137, 0.45);
  z-index: 40;
}

.scrim.is-visible {
  display: block;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .operator-toggle {
    display: inline-flex;
  }

  .operator-pane {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 50;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
  }

  .operator-pane.is-open {
    transform: translateX(0);
  }

  .operator-close {
    display: inline-flex;
  }

  @media (prefers-reduced-motion: reduce) {
    .operator-pane {
      transition: none;
    }
  }
}

@media (min-width: 901px) {
  .scrim {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .visitor-inner {
    padding: 0 var(--space-3);
  }

  .msg, .cta-card {
    max-width: 92%;
  }

  .score-block .score-number {
    font-size: 40px;
  }
}