/* FOH Coach tokens: guest-check pad palette (sage paper, check-pad green, carbon red).
   Exposed as RGB channels so Tailwind / shadcn classes like bg-primary/90 work. */
:root{
  --background:238 242 235;      /* #eef2eb sage pad paper */
  --foreground:22 37 30;         /* #16251e bottle-green ink */
  --card:255 255 255;
  --muted:227 234 224;           /* #e3eae0 */
  --muted-foreground:90 107 98;  /* #5a6b62 */
  --border:205 219 207;          /* #cddbcf ruled line */
  --input:196 211 199;
  --ring:36 87 63;
  --primary:36 87 63;            /* #24573f check-pad green */
  --primary-foreground:238 242 235;
  --secondary:220 235 225;
  --secondary-foreground:36 87 63;
  --accent:220 235 225;          /* #dcebe1 */
  --accent-foreground:36 87 63;
  --destructive:185 53 42;       /* #b9352a carbon red */
  --destructive-foreground:255 255 255;
  --destructive-soft:248 227 223;
  --warn:160 98 22;              /* #a06216 */
  --warn-soft:246 234 214;
  --radius:0.75rem;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --background:17 25 21;
    --foreground:228 237 231;
    --card:24 35 29;
    --muted:33 46 39;
    --muted-foreground:146 165 155;
    --border:46 63 54;
    --input:58 78 67;
    --ring:124 195 160;
    --primary:124 195 160;
    --primary-foreground:15 26 20;
    --secondary:33 54 43;
    --secondary-foreground:160 216 188;
    --accent:31 58 45;
    --accent-foreground:160 216 188;
    --destructive:240 122 108;
    --destructive-foreground:20 10 9;
    --destructive-soft:58 31 28;
    --warn:229 176 97;
    --warn-soft:58 46 27;
    color-scheme:dark;
  }
}

/* Before Tailwind's runtime CSS arrives, keep the page readable */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:rgb(var(--background));color:rgb(var(--foreground));font-family:"Schibsted Grotesk",system-ui,sans-serif;overflow-x:hidden}
[hidden]{display:none !important}
svg{flex:none}
.skip:not(:focus){top:-4rem}

/* ---------- Segmented control thumb (port of ddoemonn/segmented-control; spring approximated in CSS) ---------- */
.seg-thumb,.seg-mask{transition:transform .42s cubic-bezier(.34,1.42,.5,1)}

/* ---------- Message bubble rise-in (port of framecn/message-bubble state animation) ---------- */
.mb{opacity:0;transform:translateY(12px) scale(.94);transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.mb.in{opacity:1;transform:none}
.mb.out{transform-origin:bottom right}
.mb.inc{transform-origin:bottom left}

/* ---------- Typing (port of loading-ui/typing) ---------- */
@keyframes loading-ui-typing{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-50%);opacity:1}}
.typing-dot{animation:loading-ui-typing var(--duration,1s) infinite}

/* ---------- Voice visualizer bars (port of kokonutd/ai-voice-input) ---------- */
.vbar{transition:height .3s ease,background-color .3s ease}

/* Speaking indicator on the guest avatar */
.ring-pulse{position:absolute;inset:-4px;border-radius:9999px;border:2px solid rgb(var(--primary));opacity:0;pointer-events:none}
.avatar.speaking .ring-pulse{animation:ring-pulse 1.4s ease-out infinite}
@keyframes ring-pulse{0%{opacity:.85;transform:scale(.92)}100%{opacity:0;transform:scale(1.28)}}
.speak-bars{opacity:0;transition:opacity .2s}
.speaking .speak-bars{opacity:1}
.speaking .speak-bars i{animation:speak-bar .9s ease-in-out infinite}
@keyframes speak-bar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* Mic: listening state swaps icon for the spinning square, like the source component */
.mic{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.mic[data-on="true"] .mic-icon{display:none}
.mic[data-on="true"] .mic-spin{display:block}
.mic[data-on="true"]{box-shadow:0 0 0 0 rgb(var(--destructive)/.45);animation:mic-ripple 1.2s ease-out infinite}
@keyframes mic-ripple{to{box-shadow:0 0 0 16px rgb(var(--destructive)/0)}}

/* Session layout height: fill the viewport under the header */
.sess{height:calc(100dvh - 57px - 40px);min-height:520px}
@media (max-width:639px){.sess{height:calc(100dvh - 53px - 20px)}}

/* Chat paper: faint guest-check ruling */
.chat{scroll-behavior:smooth;background-image:repeating-linear-gradient(to bottom,transparent 0 35px,rgb(var(--border)/.45) 35px 36px);background-attachment:local}

/* Scorecard: guest-check perforated top edge */
.perf{height:14px;background:radial-gradient(circle at 9px -2px,rgb(var(--background)) 7px,transparent 7.5px) 0 0/18px 14px repeat-x}
.ring-val{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.bar-val{transition:width 1s cubic-bezier(.2,.7,.2,1)}

/* Skeleton shimmer for generated scenarios */
.skel{background:linear-gradient(90deg,rgb(var(--muted)/.5) 0,rgb(var(--muted)) 40%,rgb(var(--muted)/.5) 80%);background-size:200% 100%;animation:skel 1.3s linear infinite}
@keyframes skel{to{background-position:-200% 0}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}