:root {
  --bubble-bg: #ffffff;
  --bubble-text: #111418;
  --bubble-font-size: 18px;
  --accent: #4ba82e;
  --talk-size: 96px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1020; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#avatar-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }

/* Bublina titulků — roztáhne se až do krajů, text se zalomí a VEJDE celý (žádný ořez) */
#speech-bubble {
  position: absolute; left: 50%; top: 5%; transform: translateX(-50%);
  max-width: min(960px, 96vw); background: var(--bubble-bg); color: var(--bubble-text);
  font-size: var(--bubble-font-size); line-height: 1.3; padding: 9px 18px;
  border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,.25); text-align: center;
}
#speech-bubble p { margin: 0; }
/* bublina UŽIVATELE (jeho přepis) — barvy uživatele */
#speech-bubble.user { background: var(--bubble-bg-user, #2f7bff); color: var(--bubble-text-user, #fff); }

/* Obrázek/obsah — VYSTŘEDĚNÝ, tenký rámeček, velikost+výška z nastavení */
#content-panel {
  position: absolute; left: 50%; top: var(--img-vert, 50%);
  transform: translate(-50%, -50%) scale(var(--img-scale, 1));
  width: min(540px, 88vw); max-height: 86vh; overflow: visible;
  /* rámeček přebírá barvu bubliny avatara */
  background: var(--bubble-bg, #fff); color: var(--bubble-text, #111);
  border-radius: 18px; padding: 10px; box-shadow: 0 12px 44px rgba(0,0,0,.45);
}
#content-panel img, #content-panel video, #content-panel iframe { display: block; max-width: 100%; border-radius: 12px; }
/* webové okno (iframe) — vlastní velikost (--web-scale) a výška (--web-vert), širší než obrázek */
/* webové okno = NA VÝŠKU 9:16 (jako web na telefonu); velikost/výška přes --web-scale/--web-vert */
#content-panel.panel-web { top: var(--web-vert, 50%); transform: translate(-50%, -50%) scale(var(--web-scale, 1)); width: min(360px, 86vw); }
#content-panel.panel-web img { width: 100%; height: auto; max-height: 78vh; }
#content-panel.panel-web iframe { width: 100%; aspect-ratio: 9 / 16; max-height: 80vh; }
/* tlačítko „Otevřít stránku" — JEN na telefonu (kiosk/tablet/PC ho NEmají) */
.web-open { display:none; text-align:center; margin-top:10px; padding:13px 18px; border-radius:12px;
  background: var(--accent, #2f7bff); color:#fff; font-weight:700; text-decoration:none; font-size:18px; }
.web-open:active { transform: scale(.97); }
/* červený kulatý zavírací křížek (vpravo nahoře) */
.panel-close {
  position: absolute; top: -16px; right: -16px; width: 46px; height: 46px; border-radius: 50%;
  background: #e23b3b; color: #fff; border: 3px solid #fff; font-size: 20px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.5); z-index: 3; line-height: 1;
}
.panel-close:active { transform: scale(.94); }
/* e-mail okno */
.email-box { display: flex; flex-direction: column; gap: 12px; padding: 6px; }
.email-title { font-size: 20px; font-weight: 700; text-align: center; color: var(--disclaimer-text, #fff); }
#email-input {
  font-size: 22px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--accent, #2f7bff);
  outline: none; text-align: center; background: #fff; color: #111;
}
#email-input.bad { border-color: #e23b3b; background: #fff2f2; }
.email-send {
  font-size: 20px; font-weight: 700; padding: 14px; border-radius: 12px; border: none; cursor: pointer;
  background: var(--accent, #2f7bff); color: var(--bubble-text-user, #fff);
}
/* dotyková klávesnice (PC/kiosk) — barvy z bublin (přepsatelné v nastavení) */
/* širší okno když je klávesnice (ať je standardní/obdélníková, ne vysoká) */
.panel-wide { width: min(780px, 96vw) !important; }
#osk { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.osk-row { display: flex; gap: 6px; justify-content: center; }
.osk-key {
  flex: 1 1 0; min-width: 0; padding: 11px 2px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--kbd-key, var(--accent, #2f7bff)); color: var(--kbd-text, #fff); font-size: 18px; font-weight: 600;
}
.osk-key:active { filter: brightness(.85); }
.osk-space { flex: 5 1 0; }
.osk-back { flex: 1.6 1 0; background: #e2683b; }

#choices {
  position: absolute; left: 50%; bottom: var(--choice-vert, 18%); transform: translateX(-50%) scale(var(--choice-scale, 1));
  display: flex; gap: 14px; flex-wrap: nowrap; justify-content: center; width: 94vw; max-width: 1180px;
}
#choices button {
  flex: 1 1 0; min-width: 0;       /* všechna tlačítka STEJNĚ široká, vždy 1 řádek (nezávisle na délce textu) */
  /* barva tlačítek voleb = barva bubliny avatara z nastavení (čitelný text = barva textu avatara);
     fallback ať nikdy nejsou průhledná (B2). */
  border: none; background: var(--bubble-bg, #2f7bff); color: var(--bubble-text, #fff); font-size: 21px; font-weight: 600;
  padding: 18px 16px; border-radius: 16px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;
}
#choices button:active { transform: scale(.97); }
.hidden { display: none !important; }

/* ---- Talk tlačítko (1:1 dle kiosku: modrá=idle/mic, zelená=poslouchám+tečky, červená=STOP) ---- */
#talk-wrap {
  position: absolute;
  /* default = telefon na výšku → dole uprostřed (nad disclaimerem) */
  left: 50%; bottom: 12%; transform: translateX(-50%);
  z-index: 30;   /* VŽDY nad disclaimerem (ať jde kliknout i když ho disclaimer překrývá) */
}
@media (orientation: portrait) and (min-width: 600px) {  /* tablet na výšku → vpravo uprostřed */
  #talk-wrap { left: auto; right: 4%; bottom: auto; top: 50%; transform: translateY(-50%); }
}
@media (orientation: landscape) {  /* PC / tablet na šířku → vpravo uprostřed (jako kiosek) */
  #talk-wrap { left: auto; right: 4%; bottom: auto; top: 50%; transform: translateY(-50%); }
}

#talk-btn {
  position: relative; width: var(--talk-size); height: var(--talk-size);
  background: none; border: none; padding: 0; cursor: pointer; display: block;
  transition: transform .1s ease; -webkit-tap-highlight-color: transparent;
}
#talk-btn:active { transform: scale(.95); }
#talk-face { width: 100%; height: 100%; display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; }

/* 3 animované čárky reagující na hlas — jen ve stavu „poslouchám", přes zelený kruh.
   Střed zeleného kruhu v listening_1 = (0.531, 0.463) dle kiosk kódu. */
.talk-dots {
  position: absolute; left: 53.1%; top: 46.3%; transform: translate(-50%, -50%);
  display: none; align-items: center; justify-content: center; gap: 13%;
  width: 30%; height: 30%; pointer-events: none;
}
#talk-wrap[data-state="listening"] .talk-dots { display: flex; }
.talk-dots i {
  flex: 0 0 16%; background: #fff; border-radius: 999px;
  height: calc(var(--lvl, 0.18) * 60% + 22%);
  transition: height .05s linear;
}
.talk-dots i:nth-child(2) { height: calc(var(--lvl-mid, 0.18) * 92% + 22%); }

/* ruka touch-hint (reálná ikonka btn_hand) — pod-vlevo od kruhu, pulz „tap me" */
#talk-hand {
  position: absolute; width: 46%; left: -22%; bottom: -10%; opacity: 0;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  transform-origin: 70% 30%;
}
#talk-wrap.hint #talk-hand { animation: handpulse 1.5s ease-in-out infinite; }
@keyframes handpulse {
  0%, 100% { opacity: .95; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* ---- Disclaimer (barevný pruh roztažený přes celou spodní část, jako v kiosku) ---- */
#disclaimer {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 5; pointer-events: none;   /* pod talk tlačítkem; neblokuje klik (je to jen text) */
  padding: 40px 18px calc(11px + env(safe-area-inset-bottom));   /* horní prostor = zóna pro zřetelnou vinětu NAD textem */
  /* PLNÁ barva pod textem (ostrý čitelný pruh) + vinětace teprve nahoře vytrácí do scény */
  background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 100%);
  color: #ffffff; font-size: 13px; line-height: 1.3; text-align: center;
  /* max 2 řádky (ořez), ať nezabírá moc místa */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- TELEFON (úzká obrazovka): vše ~50 % menší / kompaktnější ---- */
@media (max-width: 600px) {
  #disclaimer { font-size: 10px; padding: 26px 12px calc(7px + env(safe-area-inset-bottom)); line-height: 1.25; }
  #debug { font-size: 10px; max-width: 62vw; line-height: 1.35; }
  #dbg-disconnect { font-size: 10px; padding: 5px 9px; }
  /* bublina = široký pruh přes celou šířku (delší řádky, ne 3 slova na řádek) */
  #speech-bubble { font-size: 15px; padding: 9px 16px; top: 4%; width: 94vw; max-width: 94vw; border-radius: 16px; }
  /* tlačítka voleb POD SEBOU (na úzkém telefonu se text vejde) */
  #choices { flex-direction: column; flex-wrap: nowrap; width: 88vw; gap: 10px; align-items: stretch; }
  #choices button { flex: 0 0 auto; width: 100%; font-size: 16px; padding: 13px 18px; border-radius: 14px;
    white-space: normal; text-overflow: clip; }
  #talk-hand { display: none !important; }   /* ruka „tap me" jen v kiosku, ne na telefonu */
}

/* ---- Debug overlay (vlevo nahoře) ---- */
#debug{
  position:fixed;left:14px;top:12px;z-index:50;pointer-events:none;
  font-family:ui-monospace,"Cascadia Code",monospace;font-size:13px;line-height:1.5;
  text-shadow:0 1px 3px rgba(0,0,0,.9);max-width:46vw;
  /* poloprůhledné rozmazané pozadí → text čitelný i na barevném/foto pozadí */
  background:rgba(8,12,20,.42);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  padding:10px 14px;border-radius:12px;
}
#dbg-conn{font-weight:700;letter-spacing:.5px;}
#dbg-conn.on{color:#39d353;}   /* připojeno */
#dbg-conn.off{color:#ff4d4d;}  /* odpojeno */
#dbg-action{color:#ffd166;margin-top:2px;}
#dbg-log{color:#9fb0c0;margin-top:4px;}
#dbg-log div{opacity:.5;}
#dbg-log div:last-child{opacity:1;color:#cfe0f0;}

/* Debug — tlačítko odpojit (jen když je debug viditelný) */
#dbg-disconnect{
  pointer-events:auto;margin:6px 0;padding:7px 12px;border-radius:9px;cursor:pointer;
  background:#c43d3d;color:#fff;border:none;font-family:inherit;font-size:12px;font-weight:700;
}
#dbg-disconnect:active{transform:scale(.97);}