/* People: speech bubbles, the "say hello" hint and the conversation dialog.
   Layout from the living-venue build, dressed in the draft's notebook look:
   deep purple panels with the lime inset rule, hand-drawn button shapes,
   dashed ghost buttons. Kannada and Hindi fall back to Noto Sans. */
#personHint,#conversation,.conversation-bubble{
  --npc-panel:rgba(20,12,50,.94);
  --npc-rule:rgba(200,245,58,.45);
  --npc-font:var(--pen),'Noto Sans Kannada','Noto Sans Devanagari',system-ui,sans-serif;
}

#conversationBubbles{position:fixed;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.conversation-bubble{position:absolute;transform:translate(-50%,-100%);max-width:250px;padding:8px 12px;
  background:var(--npc-panel);box-shadow:inset 0 0 0 1.5px var(--npc-rule);color:var(--ivory);
  border-radius:14px 14px 14px 3px;font:500 13px/1.4 var(--npc-font)}

/* The person bubble. A chat bubble anchored over the head of whoever you're looking at,
   placed each frame from their 3D position (Material 3 rich-tooltip proportions: 12px
   corners, 8px padding, elevation-2 shadow, emphasized easing). Far off it is just an
   avatar (two dots on the person's top colour), their name and a typing indicator; step
   into their personal space and the typing dots give way to the Say hello action. */
#personHint{position:fixed;z-index:13;left:0;top:0;--x:0px;--y:0px;--s:1;
  transform:translate(calc(var(--x) - 50%),calc(var(--y) - 100% - 9px)) scale(var(--s));transform-origin:50% 100%;
  display:none;align-items:center;gap:10px;padding:7px 10px 7px 7px;border:0;border-radius:14px;cursor:pointer;text-align:left;white-space:nowrap;
  background:var(--npc-panel);box-shadow:inset 0 0 0 1.5px var(--npc-rule),0 2px 6px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.28);color:var(--ivory);
  will-change:transform;opacity:0;transition:opacity .18s cubic-bezier(.2,0,0,1)}
#personHint.on{display:inline-flex;opacity:1}
.ph-avatar{width:26px;height:26px;flex:none;border-radius:50%;background:var(--ph-col,#7B2CFF);display:inline-flex;align-items:center;justify-content:center;gap:4px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.ph-avatar i{width:5px;height:5px;border-radius:50%;background:#FAF6E8}
.ph-body{display:flex;flex-direction:column;justify-content:center}
#personName{display:block;font:400 17px/1.05 var(--hand);color:var(--ivory)}
#personRole{display:none;font:500 12px/1.25 var(--npc-font);color:rgba(250,246,232,.72);margin-top:2px}
#personHint.near #personRole,#personHint.stall #personRole{display:block}
.ph-typing{display:inline-flex;gap:3px;padding:0 3px 0 1px}
.ph-typing i{width:5px;height:5px;border-radius:50%;background:rgba(250,246,232,.75);animation:ph-dot 1.2s infinite cubic-bezier(.2,0,0,1)}
.ph-typing i:nth-child(2){animation-delay:.15s}.ph-typing i:nth-child(3){animation-delay:.3s}
@keyframes ph-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
#personHint.near .ph-typing,#personHint.stall .ph-typing{display:none}
#personHint .meet-key{display:none;align-items:center;gap:6px;font:700 13px/1 var(--npc-font);color:#14111C;background:var(--lime);padding:6px 11px 5px 6px;border-radius:999px;white-space:nowrap}
#personHint.near .meet-key,#personHint.stall .meet-key{display:inline-flex}
#personHint .meet-key kbd{font-size:11px;min-width:18px;padding:2px 4px 1px;margin:0;color:var(--lime);background:#14111C;border-color:#14111C}
.ph-tail{position:absolute;left:50%;bottom:-7px;width:14px;height:8px;transform:translateX(-50%);background:var(--npc-panel);clip-path:polygon(0 0,100% 0,50% 100%)}
@media (prefers-reduced-motion:reduce){.ph-typing i{animation:none}}

/* the sheet's Help and Language pickers: assist-chip proportions (34px, 8px corners), lime on select */
.chat-places{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.chat-places[hidden]{display:none}
.chat-places button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 9px;border-radius:8px!important;border:0!important;cursor:pointer;
  font:600 13px var(--npc-font);color:var(--ivory);background:rgba(250,246,232,.06);box-shadow:inset 0 0 0 1px rgba(250,246,232,.28)}
.chat-places button:hover{background:rgba(200,245,58,.14);box-shadow:inset 0 0 0 1px var(--lime)}
.chat-places button[aria-pressed="true"]{background:var(--lime);color:#14111C;box-shadow:none}
.chat-places .msym{font-size:18px;color:var(--lime)}
.chat-places button[aria-pressed="true"] .msym{color:#14111C}
#chatLanguage{display:none}

/* The conversation, as a Material 3 XR basic dialog: centred in the field of view, the most
   prominent surface on screen (surface-container-highest, elevation 3), a scrim that only
   fades, the dialog scaling uniformly and fading in with standard easing over a long
   duration (the XR "rise to the highest resting level"); 28px corners, 24px padding, max 560px. */
:root{--m3-ease:cubic-bezier(.2,0,0,1);--m3-long:500ms;--m3-scrim:rgba(20,17,28,.32)}
#conversation{display:none;position:fixed;inset:0;z-index:28;align-items:center;justify-content:center;padding:24px;pointer-events:none;background:var(--m3-scrim)}
#conversation.on{display:flex;pointer-events:auto;animation:m3-scrim var(--m3-long) var(--m3-ease) both}
.chat-box{width:min(560px,100%);max-height:85vh;overflow-y:auto;pointer-events:auto;padding:24px;border-radius:28px;color:var(--ivory);
  background:rgba(30,18,66,.98);box-shadow:inset 0 0 0 1.5px var(--npc-rule),0 6px 10px rgba(0,0,0,.28),0 1px 18px rgba(0,0,0,.22),0 24px 60px rgba(0,0,0,.35);font-family:var(--npc-font);
  animation:m3-dialog var(--m3-long) var(--m3-ease) both;transform-origin:50% 50%}
@keyframes m3-scrim{from{background:rgba(20,17,28,0)}to{background:var(--m3-scrim)}}
@keyframes m3-dialog{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#conversation.on,.chat-box{animation-duration:1ms}}
.chat-top{display:flex;align-items:center;gap:12px}
.chat-avatar{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--lime);color:#1B0A4A;font:400 24px/1 var(--hand);border:2px solid #14111C}
#chatName{font:400 24px/1.2 var(--hand)}  /* headline-small */
#chatRole{font:500 14px/1.4 var(--npc-font);color:rgba(250,246,232,.72);margin-top:2px}  /* body-medium */
#chatText{font:500 17px/1.55 var(--npc-font);min-height:64px;margin:16px 0}  /* body-large */

/* buttons: the draft's hand-drawn shapes */
#conversation button,#conversation select{font:600 14px/1.2 var(--npc-font);color:var(--ivory);cursor:pointer;min-height:40px;
  background:transparent;border:1.5px solid rgba(250,246,232,.4);border-radius:20px;padding:8px 16px;transition:background .2s var(--m3-ease),border-color .2s var(--m3-ease)}
#conversation button:hover,#conversation select:hover{border-color:var(--lime);color:var(--lime);background:rgba(200,245,58,.08)}
#conversation select{background:#1B0A4A}
#chatClose{margin-left:auto;align-self:flex-start;border-color:transparent;padding:8px 12px}  /* a text button */
.chat-options{display:flex;flex-wrap:wrap;gap:8px}
/* the three prompts: the primary one filled (lime), the others tonal */
.chat-options button{font-size:15px!important;padding:9px 16px!important;border-radius:20px!important;background:rgba(250,246,232,.08)!important;border-color:transparent!important}
.chat-options button:first-child,#chatSend{background:var(--lime)!important;color:#14111C!important;border:0!important;box-shadow:none}
.chat-options button:first-child:hover,#chatSend:hover{filter:brightness(1.06)}
.chat-options button:hover{background:rgba(200,245,58,.16)!important}
.chat-audio{display:flex;gap:8px;align-items:center;margin:12px 0;flex-wrap:wrap}
#speechStatus{font:500 12px var(--npc-font);color:rgba(250,246,232,.62);margin-left:auto}
#chatForm{display:flex;gap:8px;margin-top:14px}
#chatInput{flex:1;min-width:0;padding:11px 16px;border-radius:20px;border:1.5px solid rgba(250,246,232,.35);background:rgba(20,10,50,.9);color:var(--ivory);font:500 16px var(--npc-font)}
#chatInput:focus{outline:2px solid var(--lime);outline-offset:1px}
#chatMic[aria-pressed=true]{border-color:var(--pink);color:var(--pink)}
#chatMic:disabled{opacity:.45;cursor:not-allowed}
.chat-note{font:500 12px var(--npc-font);color:rgba(250,246,232,.55);margin:13px 0 0}
#conversation button:focus-visible,#conversation select:focus-visible,#personHint:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

@media (max-width:700px){
  #conversation{padding:12px}
  .chat-box{padding:16px}
  #chatText{font-size:17px;margin:12px 0;min-height:45px}
  #chatRole{font-size:12px}
  .chat-options button{font-size:13px!important;padding:9px!important}
  .chat-audio{gap:6px}
  #conversation .chat-audio button,#conversation select,#chatSend,#chatMic{font-size:12px;padding:8px}
  #speechStatus{width:100%;margin:2px 0}
  .conversation-bubble{max-width:180px;font-size:12px}
}

/* the same bubble, over an entrance stall: opens that page */
#personHint.stall{box-shadow:inset 0 0 0 1.5px var(--lime),0 2px 6px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.28)}
#personHint.stall .ph-avatar{background:var(--lime)}#personHint.stall .ph-avatar i{background:#14111C}

/* Wimpy Kid Cured for the walk's conversation and legends only (the site pages keep
   their own type), served from cdnfonts. Limited to plain ASCII: the file maps · … ’ and
   other punctuation to the wrong glyphs, so those fall back to Figtree. Kannada and
   Hindi fall back to Noto Sans. */
@font-face{font-family:'Wimpy Map';src:url('https://fonts.cdnfonts.com/s/95593/WimpyKidCured%201.woff') format('woff');font-weight:100 900;font-display:swap;unicode-range:U+0020-007E}
#personHint,#conversation,.conversation-bubble,#keys,#escHint,#mapview .legend{
  --npc-font:'Wimpy Map',var(--pen),'Noto Sans Kannada','Noto Sans Devanagari',system-ui,sans-serif;
}
#keys,#keys kbd,#escHint,#mapview .legend span{font-family:var(--npc-font)!important}
#keys{font-size:16px!important}
#escHint{font-size:16px;font-weight:500}
#personName,#chatName{font-family:var(--npc-font)!important}
@media (min-width:701px){#chatText{font-size:22px}.conversation-bubble{font-size:15px}}