:root {
  --bg: #0a0a0b;
  --surface: #111113;
  --surface-2: #18181b;
  --border: #27272a;
  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --success: #22c55e;
  --radius: 8px;
  --font-text: 'Century Gothic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-numbers: 'DM Sans', 'Century Gothic', 'Inter', sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   State 1: Connect Screen  ("Z-Insights AI")
   Geometry is expressed as percentages of the 1920x1080 Figma frame so the
   composition holds at any size; type scales with clamp().
   ========================================================================== */
#config-screen {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #000D28;
  font-family: '42dot Sans', var(--font-text);
}

/* --- decorative right-edge artwork --- */
.connect-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.connect-art span {
  position: absolute;
  display: block;
}

/* Artwork exported from Figma. Each PNG is already clipped to the 1920x1080
   frame, so the box is just its true position/size as a percentage of that
   frame and the image fills it exactly.

     circle.png  275x941   at (1048, 0)     <- mask-group circles
     lines.png   597x1080  at (1323, 0)     <- "Union": striped blue gradient
     block.png   597x118   at (1323, 962)   <- "Rectangle 39339" mint block
*/
.art-circle,
.art-circle2,
.art-panel,
.art-block {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.art-circle {
  left: 54.583%;   /* 1048/1920 */
  top: 0;
  width: 14.323%;  /*  275/1920 */
  height: 87.130%; /*  941/1080 */
  background-image: url("/assets/brand/circle.png");
}

/* second mask group, stacked directly below the first (starts where it ends) */
.art-circle2 {
  left: 54.583%;   /* 1048/1920 */
  top: 87.130%;    /*  941/1080 */
  width: 14.323%;  /*  275/1920 */
  height: 12.870%; /*  139/1080 */
  background-image: url("/assets/brand/circle2.png");
}

.art-panel {
  left: 68.906%;   /* 1323/1920 */
  top: 0;
  width: 31.094%;  /*  597/1920 */
  height: 100%;    /* 1080/1080 */
  background-image: url("/assets/brand/lines.png");
}

.art-block {
  left: 68.906%;   /* 1323/1920 */
  top: 89.074%;    /*  962/1080 */
  width: 31.094%;  /*  597/1920 */
  height: 10.926%; /*  118/1080 */
  background-image: url("/assets/brand/block.png");
}

/* --- content column --- */
.connect-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  width: 60%;
  padding-left: 2.86%;      /* 55/1920 */
  padding-right: 2%;
}

.connect-lockup {
  display: block;
  width: clamp(180px, 17.4vw, 335px);   /* 335/1920 */
  height: auto;
  margin-bottom: clamp(24px, 4.1vh, 44px);
}

.connect-title {
  margin: 0 0 clamp(16px, 2.6vh, 28px) 0;
  font-family: '42dot Sans', var(--font-text);
  font-weight: 500;
  font-size: clamp(56px, 8.33vw, 160px);   /* 160/1920 */
  line-height: 0.92;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.connect-body {
  max-width: 815px;                         /* Figma text box width */
  margin: 0 0 clamp(28px, 5vh, 54px) 0;
  font-family: '42dot Sans', var(--font-text);
  font-weight: 400;
  font-size: clamp(15px, 1.82vw, 35px);     /* 35/1920 */
  line-height: 1.43;                        /* 50/35 */
  color: #FFFFFF;
}

.accent {
  color: #6BFFB3;
}

/* --- Engage Avatar button (Figma "Button 6") --- */
.engage-btn {
  min-width: clamp(150px, 11.7vw, 224px);   /* 224/1920 */
  padding: clamp(12px, 1.6vh, 18px) clamp(22px, 2.3vw, 44px);
  background: linear-gradient(213.04deg, #0064FA 23.89%, #5FBCFF 135.2%);
  box-shadow: inset -5px 5px 4px rgba(255, 255, 255, 0.32);
  border: none;
  border-radius: 12px;
  color: #FFFFFF;
  font-family: 'Inter', var(--font-text);
  font-weight: 500;
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.engage-btn:hover {
  filter: brightness(1.08);
  box-shadow: inset -5px 5px 4px rgba(255, 255, 255, 0.32),
              0 8px 24px rgba(0, 100, 250, 0.45);
}

.engage-btn:active {
  transform: translateY(1px);
}

.engage-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: none;
}

/* Narrow screens: artwork recedes so the copy stays readable */
@media (max-width: 900px) {
  .connect-content {
    width: 100%;
    padding-right: 6%;
  }
  .art-circle,
  .art-circle2,
  .art-panel {
    opacity: 0.45;
  }
}

/* ==========================================================================
   Booth call screen: full-bleed video + floating glass transcript
   Panel geometry measured from ideal2.png. All dimensions are percentages of
   the frame: the booth browser runs at devicePixelRatio 1.44, so fixed px
   render ~44%% larger than intended and break the proportions.
   ========================================================================== */
.transcript-glass {
  position: absolute;
  /* measured from ideal2.png; percentages so it holds at any devicePixelRatio */
  top: 4%;
  right: 2.3%;
  width: 19.5%;
  height: 91%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  transform: rotate(-0.42deg);
  /* fallback for engines without backdrop-filter: needs enough fill to stay
     legible over bright video */
  background: rgba(20, 30, 55, 0.55);
  box-shadow: inset -5px -5px 250px rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .transcript-glass {
    background: radial-gradient(100% 100% at 0% 0%,
                rgba(255, 255, 255, 0.4) 0%,
                rgba(255, 255, 255, 0) 100%);
    -webkit-backdrop-filter: blur(21px);
    backdrop-filter: blur(21px);
  }
}

/* TESTING AID: conversation ID surfaced for client testing. Remove with the
   markup in index.html before the event - Formatting Rule 3 forbids it on screen. */
.transcript-glass .conversation-id {
  flex: none;
  padding: 10px 20px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: #FFFFFF;   /* same as .chat-bubble text */
}

.chat-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4vh 1vw;
  overflow-y: auto;
  scrollbar-width: none;
}

.chat-scroll::-webkit-scrollbar {
  display: none;
}

/* --- message groups --- */
.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 88%;
}

.chat-msg.pal {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-msg.you {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-label {
  font-family: 'Inter', var(--font-text);
  font-weight: 500;
  font-size: clamp(6.8px, 0.573vw, 11px);
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.chat-msg.pal .chat-label { color: #6BFFB3; }
.chat-msg.you .chat-label { color: #9A9BB1; }

.chat-bubble {
  padding: 12px 16px;
  color: #FFFFFF;
  font-family: 'Inter', var(--font-text);
  font-weight: 400;
  font-size: clamp(9.3px, 0.781vw, 15px);      /* matches ideal2.png; see plan note on Formatting Rule 5 */
  line-height: 1.4;
  word-break: break-word;
}

.chat-msg.pal .chat-bubble {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 0 16px 16px 16px;
}

.chat-msg.you .chat-bubble {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px 16px 0 16px;
}

/* rule 9: spoken option lists render as a real numbered list */
.chat-bubble ol {
  margin: 8px 0;
  padding-left: 1.4em;
}

.chat-bubble li {
  margin: 6px 0;
}

.chat-bubble .list-lead,
.chat-bubble .list-tail {
  display: block;
}

.chat-bubble .list-tail {
  margin-top: 10px;
}

/* --- minimal booth controls --- */
.booth-controls {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.booth-controls button {
  width: 100%;
  font-size: 13px;
}

/* .stage-background turns opaque navy (z-index 1) in dashboard mode, which
   would hide the artwork at z-index 0. Lift it above that, below the avatar. */
#stage .connect-art {
  z-index: 2;
}

/* The mint corner block belongs to the connect screen only. */
#stage .art-block {
  display: none;
}

/* ==========================================================================
   State 3: End screen  (Figma "ending.png")
   Connect-screen artwork, blurred, behind a centred navy card.
   All geometry as percentages of the 1920x1080 frame.
   ========================================================================== */
#end-screen {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #000D28;
  font-family: '42dot Sans', var(--font-text);
}

#end-screen .connect-art {
  z-index: 0;
  filter: blur(1.15vw);   /* ~22px at 1920, scales with the viewport */
}

/* Figma "Rectangle 39358": 1224x510 at (353, 270) */
.end-card {
  position: absolute;
  left: 18.385%;     /*  353/1920 */
  top: 25%;          /*  270/1080 */
  width: 63.75%;     /* 1224/1920 */
  height: 47.222%;   /*  510/1080 */
  z-index: 1;
  background: #000D28;
  box-shadow: 0px 4px 4px #1B1E7B;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vh, 22px);
  padding: 2vh 4%;
  text-align: center;
}

.end-lockup {
  display: block;
  width: 17.7%;      /* ~28% of the card, matching ending.png */
  min-width: 120px;
  height: auto;
}

.end-title {
  margin: 0;
  font-family: '42dot Sans', var(--font-text);
  font-weight: 500;
  font-size: clamp(46px, 6.77vw, 130px);   /* 130px at 1920 */
  line-height: 1;
  color: #FFFFFF;
}

.end-body {
  margin: 0;
  max-width: 90%;
  font-family: '42dot Sans', var(--font-text);
  font-weight: 400;
  font-size: clamp(15px, 1.823vw, 35px);   /* 35px at 1920 */
  line-height: 1.43;                        /* 50/35 */
  color: #FFFFFF;
}

/* Soften the striped artwork while a dashboard is up - the lines read as busy
   behind a dense card. Intro is untouched; the video covers the artwork there. */
#call-screen[data-stage='customer-story'] .connect-art,
#call-screen[data-stage='threatlabz'] .connect-art,
#call-screen[data-stage='dashboard'] .connect-art {
  filter: blur(0.7vw);
}

/* End Conversation: same translucent fill as the avatar's chat bubbles,
   rather than a solid red alarm. */
.booth-controls .danger-btn {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
}

.booth-controls .danger-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
}

.booth-controls .danger-btn:disabled {
  opacity: 0.45;
}

/* Brand lockup, top-left of the booth screen */
.booth-lockup {
  position: absolute;
  top: 28px;
  left: 32px;
  width: 200px;
  height: auto;
  z-index: 22;
  pointer-events: none;
}

/* Dashboard mode: inset the story card and reserve the transcript column so it
   can never be covered by the panel (the failure seen in current2.png). */
#call-screen[data-stage='dashboard'] .booth-dashboard-layer,
#call-screen[data-stage='customer-story'] .booth-dashboard-layer,
#call-screen[data-stage='threatlabz'] .booth-dashboard-layer {
  /* card occupies 4.7%..77.4% of the frame, leaving a 1.9% navy gap
     before the transcript panel at 79.3% (measured from ideal2.png) */
  /* Vertical values MUST be vh. Percentage padding - including top/bottom -
     resolves against the containing block's WIDTH, so 8.8% was rendering as
     19.3% of the height and squashing the card. */
  padding: 11.2vh 24.2% 9.3vh 6.2%;
}

/* State 2: Live Booth Experience (Stage Left/Center, Sidebar Right) */
#call-screen {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* Full Video Stage with Zscaler Booth Visual Mesh Gradient */
#stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000D28;
  overflow: hidden;
}

/* The dot pattern tinted the field to (0,35,65); the connect screen is
   (0,13,40). Suppressed so both screens share the same navy. */
#stage::before {
  content: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(0, 145, 213, 0.15) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* Dynamic Stage Background Layer (Zscaler Blue / Navy Zenith Live Palette in Dashboard Mode) */
.stage-background {
  position: absolute;
  inset: 0;
  background: #000D28;
  opacity: 0;
  transition: opacity 0.9s ease, background 0.9s ease;
  z-index: 1;
}

#call-screen[data-stage='dashboard'] .stage-background,
#call-screen[data-stage='customer-story'] .stage-background {
  opacity: 1;
}

/* ThreatLabz Stage Background (Figma node 42-4730 & 42-3886 Dark Red/Maroon Mesh) */
#call-screen[data-stage='threatlabz'] .stage-background {
  opacity: 1;
  background: linear-gradient(135deg, rgba(30, 6, 15, 0.95), rgba(12, 3, 7, 0.98)),
              radial-gradient(circle at 80% 50%, #3b0712 0%, #1a040b 55%, #080104 100%);
}

#call-screen[data-stage='threatlabz'] #stage::before {
  background-image: radial-gradient(rgba(244, 63, 94, 0.22) 1px, transparent 1px);
}

/* Avatar Container Layer: Full Stage in Intro, PIP Tile in Dashboard (Bottom-Right Media Anchor), Left-Split in ThreatLabz */
.avatar-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid transparent;
  transition: inset 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.9s ease,
              border-color 0.9s ease;
}

/* ThreatLabz Mode: Avatar stays full height on Left side with rounded right edge (Figma 42-3886 & 6-4292) */
#call-screen[data-stage='threatlabz'] .avatar-layer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40.7%;    /* left column, per ideal.png's three-column spacing */
  max-width: none; /* 58vw was what actually set the width */
  height: 100vh;
  overflow: hidden;
  border-radius: 0 24px 24px 0;
  z-index: 5;
  pointer-events: none;
}

#call-screen[data-stage='threatlabz'] .avatar-video,
#call-screen[data-stage='threatlabz'] .avatar-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 0 24px 24px 0;
}

.avatar-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  border-radius: inherit;
}

.avatar-canvas {
  max-width: 100%;
  max-height: 100%;
  /* Same box as .avatar-video above. The canvas only started rendering when the
     chroma compositor was switched back on, and it carried a scale(1.15) with
     transform-origin: center bottom from the original implementation - 15% of
     growth, all of it upward, straight into .avatar-layer's overflow:hidden.
     That clipped 161px off the top at 1080p: the avatar's head. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s ease;
}

/* Customer Story Mode: Avatar docks precisely inside the designated media slot in the BOTTOM-RIGHT quadrant */
#call-screen[data-stage='dashboard'] .avatar-layer,
#call-screen[data-stage='customer-story'] .avatar-layer {
  position: absolute;
  right: 24.3%;       /* right edge 75.7%, inside the card's 75.8% */
  top: auto;
  bottom: 10.5%;
  transform: none;
  left: auto;
  width: 15.5%;
  height: 19%;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.4);
  z-index: 25;
  overflow: hidden;
  pointer-events: auto;
}

#call-screen[data-stage='dashboard'] .avatar-video,
#call-screen[data-stage='dashboard'] .avatar-canvas,
#call-screen[data-stage='customer-story'] .avatar-video,
#call-screen[data-stage='customer-story'] .avatar-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.video-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
  transition: opacity 0.5s ease;
}

.video-container.keyed {
  opacity: 0;
  pointer-events: none;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Cold-Start Loading Curtain Overlay */
/* Logo animation shown while Tavus warms up. 1920x1080 asset, so cover fills
   exactly at 16:9 and crops slightly rather than letterboxing elsewhere. */
.curtain-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loading-curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 11, 0.94);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: opacity 0.5s ease;
}

.loading-curtain.fading {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Introduction video (State 1.5)
   Sits above both top-level screens rather than inside #stage, so it never
   competes with .loading-curtain (z-index 100) or the dashboard layers.
   ========================================================================== */
/* Sits above every other screen: while the booth is idle the attract loop is
   the only thing on the display. Black behind it, like the intro, so the gap
   before the first frame decodes never flashes white. */
.attract-screen {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  cursor: none;
}

.attract-video {
  width: 100%;
  height: 100%;
  /* contain, like the intro: a branded reel should letterbox, never crop. */
  object-fit: contain;
  display: block;
}

.intro-screen {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.intro-video {
  width: 100%;
  height: 100%;
  /* contain, not cover: the clip is branded, so letterboxing beats cropping. */
  object-fit: contain;
  display: block;
}

.skip-intro-btn {
  position: absolute;
  right: clamp(16px, 2.3vw, 44px);
  bottom: clamp(16px, 2.3vh, 44px);
  padding: clamp(8px, 1.1vh, 14px) clamp(16px, 1.6vw, 28px);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  color: #fff;
  font-family: 'Inter', var(--font-text);
  font-weight: 500;
  font-size: clamp(13px, 0.83vw, 16px);
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  /* Fades in rather than popping when the 10s timer reveals it. */
  opacity: 0;
  transition: opacity 0.45s ease, background 0.2s ease;
}

.skip-intro-btn.visible {
  opacity: 1;
}

.skip-intro-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.curtain-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Case Study Dashboard Layer (BEHIND Avatar Layer: z-index 10) */
.booth-dashboard-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  z-index: 10;
}

#call-screen[data-stage='dashboard'] .booth-dashboard-layer,
#call-screen[data-stage='customer-story'] .booth-dashboard-layer {
  opacity: 1;
  pointer-events: auto;
}

#call-screen[data-stage='threatlabz'] .booth-dashboard-layer {
  position: absolute;
  left: 42.4%;     /* middle column: 42.4%..74.5%, clear of the transcript at 78.2% */
  right: auto;
  top: 0;
  bottom: 0;
  width: 32.1%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  z-index: 10;
  opacity: 1;
  pointer-events: auto;
}

/* Enterprise Placeholder Dashboard Card (High-Contrast White Layout) */
.dashboard-card {
  position: relative;
  width: 100%;
  max-width: 880px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 18px;
  padding: 28px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  color: #0c1f2e;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all 0.7s ease;
  animation: slideUp 0.7s ease-out;
}

/* ThreatLabz Specialized Research Card Theme (Figma node 42-4730 / 42-3886 / 6-4292) */
.dashboard-card.threatlabz-card {
  background: #0a0205;
  border: 1px solid rgba(244, 63, 94, 0.4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(244, 63, 94, 0.2);
  color: #f8fafc;
  border-radius: 12px;
  padding: 26px 28px;
  gap: 14px;
}

#call-screen[data-stage='threatlabz'] .dashboard-card.threatlabz-card {
  margin: 0;
  width: 100%;
  max-width: 100%;
}

.tl-figma-brand-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.tl-brand-sub {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* ThreatLabz only: show just the ZenithLive'26 half of the lockup.
   The asset is 670x74; ZenithLive ends at x=336, the divider sits at 351-353
   and zscaler runs 369-670. Cropping to 336/670 (50.1%) drops both.
   The connect / call / end screens keep the full lockup. */
.tl-brand-logo {
  display: block;
  width: clamp(80px, 9.02vw, 173px);   /* 50.1% of the old width, so the
                                          rendered height is unchanged */
  aspect-ratio: 336 / 74;
  object-fit: cover;
  object-position: left center;
  margin: 0 0 2px 0;
}

.tl-brand-title {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
}

.tl-brand-year {
  color: #f43f5e;
  font-size: 16px;
  vertical-align: super;
  font-weight: 800;
  margin-left: 2px;
}

.tl-pill-badge {
  display: inline-block;
  margin-top: 8px;
  border: 1px solid #f43f5e;
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.08);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tl-dashboard-title {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 6px;
  margin-bottom: 2px;
  line-height: 1.3;
  letter-spacing: -0.1px;
  text-shadow: 0 0 10px rgba(244, 63, 94, 0.25);
  transition: opacity 0.2s ease-in-out;
}

.dashboard-card.card-updating {
  opacity: 0.3;
  transition: opacity 0.12s ease-out;
}

/* Figma 42-3886 / 6-4292 ThreatLabz Typography & Inset Stat Box */
.tl-huge-stat-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.tl-huge-stat-value {
  font-family: var(--font-numbers);
  font-size: 64px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -1.5px;
  text-shadow: 0 0 16px rgba(244, 63, 94, 0.3);
}

.tl-huge-stat-label {
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 500;
  color: #f1f5f9;
  line-height: 1.35;
}

.tl-secondary-stat-box {
  background: rgba(22, 6, 12, 0.95);
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  margin-bottom: 6px;
  box-shadow: inset 0 0 12px rgba(244, 63, 94, 0.1);
}

.tl-sec-stat-value {
  font-family: var(--font-numbers);
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Source text standing in for a figure the card does not have. */
.tl-sec-stat-value.is-text {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
}

.tl-sec-stat-label {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.3;
}

.tl-red-accent-line {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ef4444 0%, #f43f5e 65%, transparent 100%);
  margin: 6px 0;
}

.tl-citation-footer {
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  text-align: left;
}

#call-screen[data-stage='dashboard'] .dashboard-card,
#call-screen[data-stage='customer-story'] .dashboard-card {
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* ============================================================
   FIGMA NODE 65-5855: 4-QUADRANT CUSTOMER STORY DASHBOARD
   ============================================================ */

.dashboard-card.cs-dashboard-card {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: none !important;
  border: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
}

.cs-dashboard-card .close-card-btn {
  color: #94a3b8;
  z-index: 30;
  top: 14px;
  right: 18px;
}

.cs-dashboard-card .close-card-btn:hover {
  color: #ffffff;
}

.cs-4quad-container {
  border-radius: 12px;   /* matches .transcript-glass; needed so the quadrant
                            fills clip to the card's rounded corners */
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 72% 28%;   /* measured from ideal2.png */
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* --- QUADRANT 1: TOP-LEFT (White #FFFFFF) --- */
.cs-quad-top-left {
  background: #ffffff;
  padding: clamp(27px, 3vh, 42px) clamp(22px, 2vw, 34px);
  color: #0a1b39;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  height: 100%;
  overflow: hidden;
}

.cs-brand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(14px, 2vh, 24px);
}

.cs-logo-container {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.cs-logo-img {
  max-height: 34px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.cs-logo-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-logo-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.cs-brand-name {
  font-family: var(--font-text);
  font-size: clamp(11.2px, 0.938vw, 18px);
  font-weight: 800;
  color: #0a1b39;
  letter-spacing: -0.3px;
}

.cs-headline {
  font-family: var(--font-text);
  font-size: clamp(17.5px, 1.467vw, 28.2px);
  font-weight: 800;
  color: #0a1b39;
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin: 8px 0 6px 0;
}

.cs-hl-blue {
  color: #0d6efd;
  font-weight: 800;
}

.cs-subtitle {
  font-family: var(--font-text);
  font-size: clamp(9.3px, 0.783vw, 15px);
  font-weight: 400;
  color: #334155;
  line-height: 1.38;
  margin: 0 0 10px 0;
}

.cs-snapshot-box {
  background: #f8fafc;
  border-radius: 7px;
  padding: 28px 6px;
  border: 1px solid #e2e8f0;
  margin-top: auto;
}

.cs-snapshot-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.cs-blue-bullet {
  color: #0070f3;
  font-size: clamp(6.8px, 0.573vw, 11px);
  line-height: 1;
}

.cs-snapshot-title {
  font-size: clamp(9.5px, 0.547vw, 10.5px);
  font-weight: 800;
  color: #0070f3;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cs-snapshot-desc {
  font-size: clamp(9.1px, 0.599vw, 11.5px);
  color: #475569;
  line-height: 1.35;
  margin: 0 0 6px 0;
}

.cs-metadata-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.cs-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(6.8px, 0.573vw, 11px);
  font-weight: 600;
  color: #0d6efd;
}

.cs-meta-icon {
  width: 14px;
  height: 14px;
  stroke: #0d6efd;
  flex-shrink: 0;
}

/* --- QUADRANT 2: TOP-RIGHT (Deep Navy #001B44 + Side Hero Image) --- */
.cs-quad-top-right {
  background: #001b44;
  color: #f8fafc;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr clamp(130px, 12vw, 190px);
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 100%;
  overflow: hidden;
}

.cs-top-right-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(6px, 0.8vh, 12px);
  height: 100%;
  overflow: hidden;
  padding: clamp(18px, 2vh, 26px) clamp(18px, 1.8vw, 28px);
}

.cs-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-block-title {
  font-size: clamp(12.5px, 1.053vw, 20.2px);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1px 0;
  letter-spacing: -0.2px;
}

.cs-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-bullet-list li {
  font-size: clamp(11.2px, 0.94vw, 18.1px);
  line-height: 1.35;
  color: #cbd5e1;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.cs-sq-cyan {
  color: #00d2ff;
  font-size: clamp(5.3px, 0.443vw, 8.5px);
  line-height: 1.4;
  flex-shrink: 0;
}

.cs-bullet-list li strong {
  color: #ffffff;
  font-weight: 700;
}

.cs-what-they-did-label {
  font-size: clamp(12.5px, 1.053vw, 20.2px);
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #64748b;
  margin: 1px 0 3px 0;
}

.cs-pill-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-prod-pill {
  background: #0a2558;
  border: 1px solid #1d4ed8;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: clamp(6.8px, 0.573vw, 11px);
  font-weight: 600;
  color: #ffffff;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: fit-content;
}

.cs-hero-img-col {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.cs-hero-img-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #001738;
  margin: 0;
  padding: 0;
}

.cs-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* --- QUADRANT 3: BOTTOM-LEFT (Dark Navy #001738) --- */
.cs-quad-bottom-left {
  background: #001738;
  padding: clamp(18px, 2vh, 28px) clamp(28px, 2.8vw, 48px);
  display: flex;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  height: 100%;
  overflow: hidden;
}

.cs-metrics-grid {
  display: grid;
  /* Always three columns. Every cell is always filled - with a real figure
     where the story has one, otherwise with factual text - so the quadrant
     never collapses and the card keeps its fixed four-quadrant geometry. */
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
  width: 100%;
  min-width: 0;
}

.cs-metric-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Grid items default to min-width:auto, which refuses to shrink below their
     content and would push a long product name past the quadrant edge. */
  min-width: 0;
  overflow: hidden;
}

.cs-metric-val {
  font-family: var(--font-numbers);
  font-size: clamp(29.8px, 2.5vw, 48px);
  font-weight: 800;
  color: #00ff9d;
  line-height: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 0 16px rgba(0, 255, 157, 0.25);
  /* Real figures are short (median 4 chars, longest "Up to 43%"), but a value
     is never allowed to widen the cell. */
  overflow: hidden;
  overflow-wrap: anywhere;
}

.cs-metric-lbl {
  font-family: var(--font-text);
  font-size: clamp(11.5px, 0.963vw, 18.5px);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.25;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* A cell filled with factual text instead of a figure. Same palette, same
   position, same cell box - only the type scale changes, because a product
   name runs to 32 characters where a metric runs to 9, and the 48px numeral
   face would burst the quadrant. Both lines are clamped so no story, however
   long its product names, can make this quadrant taller or wider. */
.cs-metric-cell.is-text .cs-metric-val {
  font-family: var(--font-text);
  font-size: clamp(13px, 1.15vw, 22px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.2px;
  text-shadow: 0 0 12px rgba(0, 255, 157, 0.18);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.cs-metric-cell.is-text .cs-metric-lbl {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* --- QUADRANT 4: BOTTOM-RIGHT (Royal Blue #0B57D0) --- */
/* The floating avatar sits over the speaker thumb, so hide the thumb and
   reserve its footprint instead - this is what was squeezing the quote. */
#call-screen[data-stage='customer-story'] .cs-speaker-thumb-col {
  display: none;
}

#call-screen[data-stage='customer-story'] .cs-quad-bottom-right {
  padding-right: 16.6vw;   /* vw, not %: % resolves against the quadrant */
}

.cs-quad-bottom-right {
  background: #0b57d0;
  color: #ffffff;
  padding: clamp(14px, 1.5vh, 22px) clamp(18px, 1.8vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 1.5vw, 22px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  height: 100%;
  overflow: hidden;
}

.cs-quote-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
}

.cs-quote-text {
  font-family: var(--font-text);
  font-size: clamp(7.9px, 0.667vw, 12.8px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
  /* no clamp/ellipsis: the quote must never be truncated */
  overflow: visible;
}

.cs-speaker-info {
  margin-top: 2px;
}

.cs-speaker-name {
  font-size: clamp(8.4px, 0.703vw, 13.5px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.cs-speaker-title {
  font-size: clamp(7.1px, 0.599vw, 11.5px);
  font-weight: 500;
  color: #bfdbfe;
  line-height: 1.2;
}

.cs-speaker-thumb-col {
  width: clamp(220px, 20vw, 300px);
  height: clamp(140px, 12.5vw, 190px);
  flex-shrink: 0;
}

.cs-speaker-thumb-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
}

#call-screen[data-stage='customer-story'] .cs-speaker-thumb-wrapper,
#call-screen[data-stage='dashboard'] .cs-speaker-thumb-wrapper {
  visibility: hidden;
}

.cs-speaker-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.close-card-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  background: transparent;
  border: none;
  color: #5b6b78;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

.close-card-btn:hover {
  color: #0c1f2e;
}

.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid #0091d5;
  padding-bottom: 12px;
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #0091d5;
}

.vertical-tag {
  background: #e7f0f8;
  border: 1px solid #0091d5;
  color: #003a63;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.verified-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #0a8a4f;
  background: #e6f6ee;
  border: 1px solid #bfe6d1;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.dashboard-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: #0c1f2e;
}

.metric-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.stat-tile {
  background: linear-gradient(160deg, #f2f7fb, #e7f0f8);
  border: 1px solid #dbe7f1;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}

.stat-tile.highlighted {
  outline: 3px solid #e6007e;
  box-shadow: 0 0 0 4px rgba(230, 0, 126, 0.18);
  transform: translateY(-2px);
}

.stat-tile__value {
  font-family: var(--font-numbers);
  font-size: 26px;
  font-weight: 800;
  color: #0091d5;
  font-variant-numeric: tabular-nums;
}

.stat-tile__label {
  font-size: 12.5px;
  color: #5b6b78;
  margin-top: 4px;
  line-height: 1.3;
}

.summary-box {
  background: #f6f9fc;
  border-left: 4px solid #0091d5;
  border-radius: 8px;
  padding: 16px;
}

.summary-box h3 {
  margin: 0 0 6px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #5b6b78;
}

.summary-box p {
  margin: 0;
  font-size: 14px;
  color: #0c1f2e;
  line-height: 1.5;
}

/* Dashboard tap-to-speak tappable elements */
.dashboard-card .tappable {
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  border-radius: 6px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.dashboard-card .tappable:hover {
  background-color: rgba(0, 58, 99, 0.06);
  box-shadow: 0 0 0 2px rgba(0, 145, 213, 0.15);
}

.dashboard-card .tappable.tapped {
  background-color: rgba(0, 145, 213, 0.18);
  transform: scale(0.99);
  box-shadow: 0 0 0 3px rgba(0, 145, 213, 0.25);
}

.stat-tile.tappable {
  cursor: pointer;
}

/* Right Sidebar (Matching zscaler-avatar-2026-feat-experience-eval) */
#sidebar {
  display: flex;
  flex-direction: column;
  width: 350px;
  min-width: 320px;
  max-width: 380px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 20;
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.conversation-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
  margin-bottom: 8px;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52525b;
}

.status-dot.connected {
  background: var(--success);
}

/* Latency Panel & Toggle Switch */
.latency-panel {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.latency-metrics {
  display: flex;
  gap: 20px;
}

.latency-item {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #3f3f46;
  transition: 0.3s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--accent);
}

input:checked + .slider:before {
  transform: translateX(16px);
}

/* Interactive Story Chips */
.chips-panel {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chip-btn:hover {
  border-color: var(--accent);
  background: rgba(37, 99, 235, 0.15);
  color: #fff;
}

/* Live Transcript */
.transcript-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 14px 20px;
}

.transcript-panel h2 {
  margin: 0 0 8px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

#transcript {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.transcript-entry {
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.transcript-entry .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.transcript-entry .role {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.transcript-entry .role.you { color: #60a5fa; }
.transcript-entry .role.pal { color: #34d399; }

.sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

.modal-card h2 { margin: 0 0 4px 0; font-size: 18px; }
.modal-subtitle { margin: 0 0 16px 0; font-size: 12px; color: var(--text-muted); }
.modal-card label { display: block; margin-bottom: 12px; font-size: 11px; color: var(--text-muted); }
.modal-card input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

.form-error { color: var(--danger); font-size: 13px; margin: 12px 0 0; }

.primary-btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 8px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.danger-btn { background: var(--danger); color: #fff; border: none; border-radius: var(--radius); padding: 8px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.secondary-btn { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.icon-btn { padding: 4px 8px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); font-size: 11px; border-radius: 4px; cursor: pointer; }

/* Booth kiosk: hide the pointer while idle (see app/kiosk.js). */
.kiosk-cursor-hidden, .kiosk-cursor-hidden * { cursor: none !important; }