/* "Talk to Amy live" (in-browser demo call) + Amy's demo-line strip. Shared by / (client, Eastex) and /internal/ (Aldine chart).
   Everything is namespaced talk-; colours copy the client page and the "Ask about Amy" panel so both pages look the same. */
.talk-root, .talk-line {
  --talk-bg: #FBF8F2; --talk-bg2: #F3EEE4; --talk-card: #FFFFFF; --talk-ink: #1D2622; --talk-ink2: #3C4842; --talk-muted: #5E6A64;
  --talk-line: #E4DDCF; --talk-line2: #CFC6B4; --talk-green: #1F5E4B; --talk-green-soft: #E3EFE9; --talk-red: #B3322F; --talk-red-soft: #FBE9E7;
  --talk-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --talk-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --talk-shadow: 0 1px 2px rgba(30,30,20,.06), 0 12px 32px rgba(30,30,20,.16);
}
.talk-root *, .talk-root *::before, .talk-root *::after, .talk-line *, .talk-line *::before, .talk-line *::after { box-sizing: border-box; }

/* ---------- buttons used by the entry points and the panel ---------- */
.talk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--talk-green); font: 600 15px/1 var(--talk-font); text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background .15s, box-shadow .15s, transform .15s;
}
.talk-btn svg { width: 18px; height: 18px; flex: none; }
.talk-btn-call { background: var(--talk-green); color: #fff; box-shadow: 0 6px 18px rgba(31,94,75,.25); }
.talk-btn-call:hover { background: #184D3D; }
.talk-btn-live { background: var(--talk-card); color: var(--talk-green); }
.talk-btn-live:hover { background: var(--talk-green-soft); }
.talk-btn:focus-visible { outline: 3px solid #8CC1AE; outline-offset: 2px; }
.talk-btn:disabled { opacity: .55; cursor: default; }

/* ---------- client view: demo-line card in the hero (and again near the end) ---------- */
.talk-line.talk-hero {
  margin-top: 22px; max-width: 640px; padding: 18px 20px; background: var(--talk-card); border: 1px solid var(--talk-line);
  border-left: 5px solid var(--talk-green); border-radius: 16px; box-shadow: 0 1px 2px rgba(30,30,20,.05), 0 6px 18px rgba(30,30,20,.06);
  font: 15px/1.5 var(--talk-font); color: var(--talk-ink);
}
.talk-k { font: 600 12px/1.3 var(--talk-font); letter-spacing: .08em; text-transform: uppercase; color: var(--talk-green); }
.talk-num { display: block; margin: 6px 0 2px; font: 600 clamp(28px, 6vw, 36px)/1.1 var(--talk-serif); letter-spacing: -.01em; color: var(--talk-ink); }
.talk-num a { color: inherit; text-decoration: none; }
.talk-num a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.talk-sm { margin: 4px 0 0; font-size: 14px; color: var(--talk-muted); }
.talk-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 420px) {
  .talk-line.talk-hero { padding: 16px; }
  .talk-hero .talk-acts .talk-btn { flex: 1 1 100%; }
}

/* ---------- internal chart: compact strip under the banner (follows the page's light/dark theme) ---------- */
.talk-line.talk-strip {
  flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px;
  padding: 6px 12px; border-bottom: 1px solid var(--line, var(--talk-line)); background: var(--bg, var(--talk-bg));
  font: 500 13px/1.3 var(--talk-font); color: var(--ink2, var(--talk-ink2));
}
.talk-strip .talk-strip-l { min-width: 0; }
.talk-strip .talk-strip-l strong { color: var(--ink, var(--talk-ink)); font-weight: 700; white-space: nowrap; }
.talk-strip .talk-strip-l a { color: inherit; }
.talk-strip .talk-btn { min-height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.talk-strip .talk-btn svg { width: 15px; height: 15px; }
html[data-theme=dark] .talk-strip .talk-btn-call { background: #3DD68C; border-color: #3DD68C; color: #0A0C10; box-shadow: none; }
html[data-theme=dark] .talk-strip .talk-btn-live { background: transparent; border-color: #3DD68C; color: #3DD68C; }
html[data-theme=dark] .talk-strip .talk-btn-live:hover { background: rgba(61,214,140,.12); }
@media (max-width: 560px) {
  .talk-line.talk-strip { font-size: 12px; padding: 5px 10px; gap: 5px 8px; }
  .talk-strip .talk-strip-sub { display: none; }
  .talk-strip .talk-btn { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
}

/* ---------- call panel (modal dialog) ---------- */
.talk-root { font: 15px/1.5 var(--talk-font); color: var(--talk-ink); -webkit-font-smoothing: antialiased; }
.talk-root[hidden] { display: none !important; }
.talk-scrim { position: fixed; inset: 0; z-index: 1100; background: rgba(20,24,22,.42); }
.talk-panel {
  position: fixed; z-index: 1101; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 400px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--talk-bg); border: 1px solid var(--talk-line); border-radius: 18px; box-shadow: var(--talk-shadow);
}
.talk-head { padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--talk-line); background: var(--talk-bg2); }
.talk-head-row { display: flex; align-items: center; gap: 10px; }
.talk-title { flex: 1; margin: 0; font: 600 19px/1.2 var(--talk-serif); letter-spacing: -.01em; color: var(--talk-ink); }
.talk-note { margin: 4px 0 0; font-size: 12.5px; color: var(--talk-muted); }
.talk-x { flex: none; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--talk-ink2); cursor: pointer; display: grid; place-items: center; }
.talk-x:hover { background: rgba(0,0,0,.06); }
.talk-x:focus-visible { outline: 3px solid #8CC1AE; outline-offset: 2px; }
.talk-x svg { width: 18px; height: 18px; }

.talk-body { padding: 16px 18px 18px; }
.talk-intro p { margin: 0 0 8px; font-size: 14.5px; color: var(--talk-ink2); }
.talk-intro ul { margin: 0 0 14px; padding-left: 20px; font-size: 14px; color: var(--talk-ink2); }
.talk-intro li + li { margin-top: 3px; }
.talk-start { width: 100%; min-height: 50px; font-size: 16px; }
.talk-alt { margin: 10px 0 0; font-size: 13px; color: var(--talk-muted); text-align: center; }
.talk-alt a { color: var(--talk-green); font-weight: 600; white-space: nowrap; }

/* status */
.talk-status { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 14px; background: var(--talk-card);
  border: 1px solid var(--talk-line); border-radius: 14px; }
.talk-status[hidden] { display: none; }
.talk-avatar { flex: none; position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--talk-green); color: #fff; font: 600 20px/1 var(--talk-serif); }
.talk-st-live .talk-avatar::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--talk-green);
  opacity: .5; animation: talk-pulse 1.6s infinite ease-out; }
@keyframes talk-pulse { 0% { transform: scale(.92); opacity: .6; } 100% { transform: scale(1.25); opacity: 0; } }
.talk-st-text { flex: 1; min-width: 0; }
.talk-st-main { font: 600 16px/1.3 var(--talk-font); color: var(--talk-ink); }
.talk-st-sub { margin-top: 2px; font-size: 13px; color: var(--talk-muted); }
.talk-timer { flex: none; font: 600 18px/1 var(--talk-font); font-variant-numeric: tabular-nums; color: var(--talk-green); }
.talk-timer[hidden] { display: none; }
.talk-st-err { background: var(--talk-red-soft); border-color: #F0C9C5; }
.talk-st-err .talk-avatar { background: var(--talk-red); }
.talk-st-err .talk-st-main { color: var(--talk-red); }
.talk-st-err .talk-st-sub { color: var(--talk-ink2); }

/* controls */
.talk-ctrls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.talk-ctrls[hidden] { display: none; }
.talk-ctl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--talk-line2); border-radius: 12px; background: var(--talk-card); color: var(--talk-ink);
  font: 600 14.5px/1 var(--talk-font); cursor: pointer; }
.talk-ctl svg { width: 18px; height: 18px; flex: none; }
.talk-ctl:hover { border-color: var(--talk-green); }
.talk-ctl[aria-pressed=true] { background: var(--talk-green-soft); border-color: var(--talk-green); color: var(--talk-green); }
.talk-ctl:focus-visible, .talk-hang:focus-visible, .talk-key:focus-visible { outline: 3px solid #8CC1AE; outline-offset: 2px; }
.talk-ctl:disabled { opacity: .5; cursor: default; }
.talk-hang { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px;
  border: 0; border-radius: 999px; background: var(--talk-red); color: #fff; font: 700 16.5px/1 var(--talk-font); cursor: pointer;
  box-shadow: 0 8px 22px rgba(179,50,47,.3); }
.talk-hang:hover { background: #9A2926; }
.talk-hang svg { width: 22px; height: 22px; }

.talk-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.talk-pad[hidden] { display: none; }
.talk-key { min-height: 46px; border: 1px solid var(--talk-line); border-radius: 12px; background: var(--talk-card); color: var(--talk-ink);
  font: 600 19px/1 var(--talk-font); cursor: pointer; }
.talk-key:hover { background: var(--talk-green-soft); border-color: var(--talk-green); }
.talk-key:active { transform: scale(.97); }
.talk-pad-sent { grid-column: 1 / -1; min-height: 18px; font-size: 12.5px; color: var(--talk-muted); text-align: center; letter-spacing: .12em; }

.talk-again { width: 100%; margin-top: 4px; }
.talk-again[hidden] { display: none; }

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

/* phones: bottom sheet */
@media (max-width: 560px) {
  .talk-panel { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-width: none; max-height: 92dvh;
    border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .talk-body { padding: 14px 14px 16px; }
  html.talk-lock, html.talk-lock body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .talk-st-live .talk-avatar::after { animation: none; } .talk-btn { transition: none; } }
@media print { .talk-root, .talk-line { display: none !important; } }
/* "Call now!" pill with Amy's number right next to it (Sai, Nov 2) */
.talk-acts .talk-num { align-self: center; margin: 0 6px 0 2px; font-size: clamp(22px, 5vw, 26px); white-space: nowrap; }
@media (max-width: 560px) {
  .talk-hero .talk-acts .talk-btn-call { flex: 0 0 auto; }
  .talk-hero .talk-acts .talk-num { flex: 1 1 auto; }
}