/* The conversation dialog (js/rozhovor.js); colours and type come from the page's :root tokens. */
.talk{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:radial-gradient(ellipse at 50% 30%,#2b0c13 0%,var(--night) 70%);color:var(--parchment);font-family:var(--f-body);overflow:auto}
.talk::backdrop{background:rgba(0,0,0,.7)}
.talk[open]{display:flex;align-items:center;justify-content:center}
.talk-close{position:absolute;top:14px;right:16px;z-index:2;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
  background:rgba(10,8,6,.6);color:var(--gold-hi);font-size:26px;line-height:1;cursor:pointer}
.talk-close:hover{border-color:var(--gold)}
.talk-login{width:min(440px,100%);padding:48px 16px;text-align:center}
.talk-login h2{font-family:var(--f-display);font-weight:500;font-size:var(--t-m);line-height:1.1;margin:10px 0 14px}
.talk-lede{color:var(--parchment-dim);margin:0 0 26px;line-height:1.55}
.talk-field{display:block;text-align:left;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.talk-field input{display:block;width:100%;margin-top:8px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.04);color:var(--parchment);font:16px var(--f-body);letter-spacing:normal;text-transform:none}
.talk-field input:focus,.talk-ask input:focus{outline:none;border-color:var(--gold)}
.talk-error{min-height:1.4em;margin:12px 0 4px;color:#f19a8a;font-size:14px}
.talk-note{margin-top:26px;font-size:14px;color:var(--parchment-dim)}
.talk-note a{color:var(--gold-hi)}
/* Two halves: the painting as large as the screen allows on the left, everything to do on the right.
   A narrow screen stacks them, painting first. */
.talk-room{display:grid;grid-template-columns:1fr 1fr;width:100%;min-height:100%;align-items:center}
.talk-room[hidden],.talk-login[hidden]{display:none}
.talk-stage{display:grid;place-items:center;height:100vh;height:100dvh;padding:24px 16px}
.talk-frame{position:relative;width:min(calc(50vw - 32px),calc((100dvh - 48px) * 764 / 967));aspect-ratio:764/967}
.talk-panel{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:560px;padding:72px 40px 32px 16px}
.talk-canvas{position:absolute;left:11.69%;top:8.75%;width:77.23%;height:81.59%;overflow:hidden;background:#140d08}
.talk-canvas video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.talk-canvas canvas{position:absolute;height:auto}
.talk-ram{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.talk-name{margin:0 0 4px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.talk-line{min-height:3em;margin:4px 0 0;font-family:var(--f-display);font-size:clamp(20px,2vw,28px);line-height:1.35}
.talk-line.is-visitor{font-style:italic;color:var(--parchment-dim)}
.talk-status{min-height:1.4em;margin:6px 0;font-size:14px;color:var(--gold-hi)}
.talk-status.is-error{color:#f19a8a}
.talk-ask{display:flex;gap:8px;width:100%;align-items:center}
.talk-ask input{flex:1;min-width:0;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.05);color:var(--parchment);font:16px var(--f-body)}
.talk-ask .replay{margin:0;flex:none}
.talk-mic{flex:none;width:72px;height:72px;touch-action:none;border:1px solid var(--gold);border-radius:50%;background:rgba(10,8,6,.62);color:var(--gold-hi);cursor:pointer;display:grid;place-items:center}
.talk-mic svg{width:30px;height:30px}
.talk.is-recording .talk-mic{background:#b3261e;border-color:#f19a8a;color:#fff;animation:talk-pulse 1.2s ease-in-out infinite}
@keyframes talk-pulse{50%{box-shadow:0 0 0 8px rgba(241,154,138,.25)}}
.talk.is-busy .talk-ask .go{opacity:.5}
.talk-ai{margin:12px 0 0;font-size:12px;color:var(--parchment-dim)}
.btn-talk{white-space:nowrap}
.talk-voice{display:flex;align-items:center;gap:16px;margin:14px 0 6px}
.talk-hint{margin:0;color:var(--parchment-dim);font-size:15px;line-height:1.45;max-width:24em}
.talk-mode{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;margin:4px 0 14px}
.talk-mode button{border:0;border-radius:999px;background:none;color:var(--parchment-dim);font:600 12px var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;cursor:pointer;min-height:36px}
.talk-mode button[aria-pressed="true"]{background:var(--gold);color:#1a1006}
.talk-help{margin-top:18px}
.talk-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.talk-example{border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);color:var(--parchment);font:14px var(--f-body);padding:8px 14px;cursor:pointer}
.talk-example:hover{border-color:var(--gold)}
.talk-example:disabled{opacity:.5;cursor:default}
@media (max-width:860px){
  /* stacked, the room is taller than the screen: centred, its top (the painting) would be cut off out of reach */
  .talk[open]{align-items:flex-start}
  .talk-room{grid-template-columns:1fr}
  .talk-stage{height:auto;padding:56px 16px 0}
  .talk-frame{width:min(420px,78vw,calc((70dvh - 56px) * 764 / 967))}
  .talk-panel{align-items:center;text-align:center;padding:16px 16px 28px;margin:0 auto}
}
@media (max-width:520px){.talk-ask .replay{padding:10px 14px;letter-spacing:.08em}}
@media (prefers-reduced-motion:reduce){.talk.is-recording .talk-mic{animation:none}}
/* The way in: a small password prompt next to the button that asked for it, so a wrong password never
   starts the animation. Positioned by js/rozhovor.js from the button's rect. */
.talk-key{position:fixed;z-index:1000;width:min(340px,calc(100vw - 32px));padding:16px 16px 12px;border:1px solid var(--line);
  border-radius:16px;background:rgba(12,9,7,.94);box-shadow:0 18px 50px rgba(0,0,0,.55);color:var(--parchment);font-family:var(--f-body);
  animation:talk-key-in .25s ease-out}
.talk-key[hidden]{display:none}
@keyframes talk-key-in{from{opacity:0;transform:translateY(6px)}}
.talk-key .talk-field{padding-right:36px}
.talk-key-row{display:flex;gap:8px;margin-top:8px}
.talk-key-row input{flex:1;min-width:0;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.05);color:var(--parchment);font:16px var(--f-body)}
.talk-key-row input:focus{outline:none;border-color:var(--gold)}
.talk-key-row .replay{margin:0;flex:none}
.talk-key .talk-error{margin:8px 0 2px;font-size:13px}
.talk-key .talk-error:empty{min-height:0;margin:4px 0 0}
.talk-key .talk-note{margin:6px 0 0;font-size:13px}
.talk-key-close{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--gold-hi);font-size:22px;line-height:1;cursor:pointer}
/* The entrance. The dialog starts see-through: the gallery's own painting is still there, and the
   room's frame lies exactly over it. The veil (the room's background) fades in under the frame, so
   everything around the painting goes away while the painting stays; then the frame flies. The
   handover canvas repeats the gallery's live clip over the room's canvas until the room's own
   painting is running, so the loop never stops and there is no black frame. */
.talk{overscroll-behavior:contain}
.talk-veil{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 30%,#2b0c13 0%,var(--night) 70%)}
.talk.is-entering{background:transparent}
.talk.is-entering::backdrop{background:transparent}
.talk-room{position:relative;z-index:1}
.talk-login{position:relative;z-index:1}
.talk-close{transition:opacity .6s}
.talk.is-entering .talk-close{opacity:0;pointer-events:none}
.talk-frame{will-change:transform}
.talk-handover{position:absolute;left:11.69%;top:8.75%;width:77.23%;height:81.59%;pointer-events:none}
.talk-handover[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.talk-key{animation:none}}
.talk-lit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.talk-lit[hidden]{display:none}

/* Phone: the lady fills the whole display, and only the microphone (hold to talk) and the way
   back stay on her. The desktop layout above is untouched. The painting covers the screen like
   object-fit: cover, so a tall phone crops her sides, never her face. A short status (thinking,
   a refused microphone) and the AI notice stay, small, above the microphone. */
@media (max-width:760px){
  .talk[open]{display:block}
  .talk-room{display:block;position:fixed;inset:0;min-height:0}
  .talk-stage{position:fixed;inset:0;height:100%;padding:0;display:block}
  .talk .talk-frame{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .talk-ram{display:none}
  .talk .talk-canvas,.talk .talk-handover{left:0;top:0;width:100%;height:100%}
  .talk .talk-canvas .malba-canvas,.talk .talk-canvas .malba-clip{inset:auto;left:50%;top:50%;
    width:max(100vw,calc(100vh * 1244 / 1664));width:max(100vw,calc(100dvh * 1244 / 1664));height:auto;aspect-ratio:1244/1664;transform:translate(-50%,-50%)}
  .talk-panel{position:fixed;left:0;right:0;bottom:0;max-width:none;align-items:center;gap:6px;
    padding:48px 16px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(6,8,14,.8))}
  .talk-name,.talk-line,.talk-hint,.talk-mode,.talk-ask,.talk-help{display:none}
  .talk-status{margin:0;padding:6px 12px;border-radius:999px;background:rgba(10,8,6,.6);font-size:13px;text-align:center}
  .talk-status:empty{display:none}
  .talk-voice{margin:0}
  .talk-mic{width:88px;height:88px;background:rgba(10,8,6,.55);box-shadow:0 8px 30px rgba(0,0,0,.5)}
  .talk-mic svg{width:36px;height:36px}
  .talk-ai{margin:4px 0 0;font-size:11px;opacity:.8}
  .talk-close{left:16px;right:auto;top:calc(14px + env(safe-area-inset-top));width:auto;height:44px;padding:0 18px;
    border-radius:999px;font-size:0;background:rgba(10,8,6,.55)}
  .talk-close::before{content:"← Zpět";font:600 14px var(--f-body);letter-spacing:.06em}
}