/* ============================================================
   AI CALLER — THE LIVE CASE
   A call becoming a booking becoming a work order, played out
   at reading speed. Uses the current token names only.
   ============================================================ */

.livecase{
  border:1px solid var(--ink-12);
  border-radius:var(--r-l);
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--sh-m);
}
.dark .livecase{background:var(--night-2);border-color:var(--on-night-12);box-shadow:var(--sh-glow)}

.lc-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-s);
  padding:.9em 1.15em;border-bottom:1px solid var(--ink-12);background:var(--paper-dim);
  flex-wrap:wrap;
}
.dark .lc-head{background:var(--night-3);border-bottom-color:var(--on-night-12)}
.lc-title{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--ink-55);display:flex;align-items:center;gap:.55em;
}
.lc-live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0;
  animation:lc-breathe 2s ease-in-out infinite;
}
.livecase[data-state="paused"] .lc-live-dot{animation:none;opacity:.4}
@keyframes lc-breathe{0%,100%{opacity:1}50%{opacity:.3}}

.lc-scenarios{display:flex;gap:.4em;flex-wrap:wrap;margin-left:auto}
.lc-scenario{
  background:none;border:1.5px solid var(--ink-20);color:var(--ink-55);
  border-radius:var(--r-pill);padding:.38em .85em;
  font-size:var(--t-micro);font-family:var(--font-mono);font-weight:500;
  transition:all var(--d-fast) var(--ease);
}
.lc-scenario:hover{color:var(--ink);border-color:var(--ink-40)}
.lc-scenario[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#12100D}

/* progress rail */
.lc-progress{height:2px;background:var(--ink-12);position:relative;overflow:hidden}
.lc-progress-bar{position:absolute;inset-block:0;left:0;width:0%;background:var(--amber);
  transition:width var(--d-base) linear}

/* body */
.lc-body{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:820px){.lc-body{grid-template-columns:1fr}}
.lc-talk{padding:1.15em;border-right:1px solid var(--ink-12);min-height:330px;
  max-height:430px;overflow-y:auto}
@media (max-width:820px){.lc-talk{border-right:none;border-bottom:1px solid var(--ink-12);min-height:0;max-height:none}}
.dark .lc-talk{border-color:var(--on-night-12)}

.lc-line{
  display:flex;flex-direction:column;gap:.15em;margin-bottom:.95em;
  opacity:0;transform:translateY(6px);
  animation:lc-in 380ms var(--ease) forwards;
}
@keyframes lc-in{to{opacity:1;transform:none}}
.lc-who{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--ink-40)}
.lc-line--ai .lc-who{color:var(--amber-deep)}
.dark .lc-line--ai .lc-who{color:var(--amber-hot)}
.lc-said{font-size:var(--t-sm);color:var(--ink);line-height:1.5}
.lc-line--caller .lc-said{color:var(--ink-70)}

.lc-typing{display:inline-flex;gap:3px;align-items:center;height:1.2em}
.lc-typing span{width:4px;height:4px;border-radius:50%;background:var(--ink-40);
  animation:lc-dot 1.1s ease-in-out infinite}
.lc-typing span:nth-child(2){animation-delay:.15s}
.lc-typing span:nth-child(3){animation-delay:.3s}
@keyframes lc-dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* actions column */
.lc-actions{padding:1.15em}
.lc-actions-label{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--ink-40);margin-bottom:.9em;display:block}
.lc-act{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-s);
  padding:.62em 0;border-bottom:1px solid var(--ink-12);
  opacity:0;transform:translateY(5px);
  animation:lc-in 380ms var(--ease) forwards;
}
.dark .lc-act{border-bottom-color:var(--on-night-12)}
.lc-act:last-child{border-bottom:none}
.lc-act-name{font-size:var(--t-sm);color:var(--ink);min-width:0}
.lc-act .pill{flex-shrink:0}
.pill.just-changed{animation:pill-flip 460ms var(--ease)}
@keyframes pill-flip{0%{transform:scale(.86);opacity:.4}55%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}

/* outcome */
.lc-outcome{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink-12);background:var(--paper-dim)}
.dark .lc-outcome{border-top-color:var(--on-night-12);background:var(--night-3)}
@media (max-width:560px){.lc-outcome{grid-template-columns:1fr}}
.lc-out-item{padding:.85em 1.15em;border-right:1px solid var(--ink-12)}
.dark .lc-out-item{border-right-color:var(--on-night-12)}
.lc-out-item:last-child{border-right:none}
@media (max-width:560px){
  .lc-out-item{border-right:none;border-bottom:1px solid var(--ink-12)}
  .lc-out-item:last-child{border-bottom:none}
}
.lc-out-item strong{display:block;font-family:var(--font-mono);font-size:var(--t-body);color:var(--ink)}
.lc-out-item span{font-size:var(--t-micro);color:var(--ink-40);text-transform:uppercase;letter-spacing:var(--ls-wide)}

/* controls — hidden site-wide (product decision): the buttons stay in
   the DOM so livecase.js bindings never null-deref, but render nothing */
.lc-controls{display:none !important}
.dark .lc-controls{border-top-color:var(--on-night-12)}
.lc-btn{
  display:inline-flex;align-items:center;gap:.45em;
  background:none;border:1.5px solid var(--ink-20);color:var(--ink-70);
  border-radius:var(--r-s);padding:.45em .8em;
  font-size:var(--t-micro);font-family:var(--font-mono);letter-spacing:.04em;
  transition:all var(--d-fast) var(--ease);
}
.lc-btn:hover{border-color:var(--amber);color:var(--ink)}
.lc-btn svg{width:11px;height:11px}

/* always-present accessible transcript */
.lc-full{border-top:1px solid var(--ink-12)}
.dark .lc-full{border-top-color:var(--on-night-12)}
.lc-full summary{
  padding:.8em 1.15em;cursor:pointer;list-style:none;
  font-family:var(--font-mono);font-size:var(--t-micro);
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--ink-55);
}
.lc-full summary::-webkit-details-marker{display:none}
.lc-full summary:hover{color:var(--amber-deep)}
.dark .lc-full summary:hover{color:var(--amber-hot)}
.lc-full-body{padding:0 1.15em 1.15em;font-size:var(--t-sm);color:var(--ink-70)}
.lc-full-body p{margin-bottom:.55em}
.lc-full-body strong{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .lc-line,.lc-act{animation:none!important;opacity:1!important;transform:none!important}
  .lc-live-dot,.lc-typing span,.pill.just-changed{animation:none!important}
}