/* Tytyri avatar: the photo's own studio backdrop fills the screen; the character stands at the bottom centre.
   One look on purpose (the photo's world), in light and dark rooms alike. */
:root {
  --backdrop: #d5c2bc; --backdrop-2: #c9b3ac; --ink: #2c1c16; --muted: #6d564c;
  --card: rgb(250 245 242 / .94); --fur: #6e3a22; --accent: #d9574d; --accent-ink: #fff; --line: #e2d4cd;
  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: linear-gradient(180deg, #d5c1bb 0%, #cfbbb4 55%, #c6b0aa 100%); color: var(--ink);
  font: 16px/1.45 var(--body); overflow: hidden; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.stage { position: fixed; inset: 0; }
/* the photo stands at the bottom; its side edges melt into the backdrop. Tall phones: larger, sides cropped. */
#cv, .still { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: min(100%, max(calc(100vw * 860 / 951), 60vh)); aspect-ratio: 951 / 860; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%);
  mask-composite: intersect; }
.top { position: absolute; z-index: 3; top: env(safe-area-inset-top, 0px); left: 0; right: 0; display: flex;
  justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); }
.status { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  background: var(--card); padding: 5px 12px; border-radius: 999px; min-height: 28px; }
.status:empty { visibility: hidden; }
.status[data-state="hear"] { color: var(--accent); }
.status[data-state="think"] { color: var(--fur); }
.tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.langs { display: inline-flex; background: var(--card); border-radius: 999px; padding: 3px; gap: 2px; }
.langs button { border: 0; background: transparent; font: 600 13px var(--body); letter-spacing: .05em; color: var(--muted);
  padding: 6px 10px; border-radius: 999px; cursor: pointer; min-width: 40px; min-height: 34px; }
.langs button[aria-pressed="true"] { background: var(--fur); color: #fff; }
.round { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--card); color: var(--fur);
  display: grid; place-items: center; cursor: pointer; padding: 0; }
.round svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#mic { box-shadow: 0 0 0 calc(var(--lvl, 0) * 7px) rgb(217 87 77 / .35); transition: box-shadow .08s; }
#mic[aria-pressed="false"] { color: #fff; background: var(--muted); }
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.hint { position: absolute; z-index: 2; left: 50%; top: 14%; transform: translateX(-50%); font: 800 clamp(22px, 4.5vw, 40px)/1 var(--display);
  color: var(--fur); background: var(--card); padding: 10px 22px 8px; border-radius: 999px; box-shadow: 0 6px 24px rgb(60 30 20 / .15);
  animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, -6px); } }

.cap { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom, 0px));
  width: min(820px, calc(100% - 28px)); display: grid; gap: 6px; pointer-events: none; }
.cap p { margin: 0; background: var(--card); border-radius: 18px; padding: 8px 16px; box-shadow: 0 6px 22px rgb(60 30 20 / .16); }
.cap .you { justify-self: end; font-size: 15px; color: var(--muted); max-width: 85%; }
.cap .ai { font: 600 clamp(18px, 2.6vw, 25px)/1.3 var(--display); color: var(--ink); max-height: 30vh; overflow: hidden; }

.ask { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); top: 64px; width: min(560px, calc(100% - 28px));
  display: flex; gap: 8px; background: var(--card); padding: 8px; border-radius: 16px; box-shadow: 0 6px 22px rgb(60 30 20 / .18); }
.ask input { flex: 1; min-width: 0; }
input { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; }
.go { font: 700 17px var(--display); background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 12px; padding: 8px 18px; cursor: pointer; }
.go.big { font-size: 26px; padding: 10px 44px; border-radius: 999px; }
.plain { font: 600 14px var(--body); background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 7px 12px; cursor: pointer; }

.card { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100% - 32px));
  background: var(--card); border-radius: 22px; padding: 22px; display: grid; gap: 12px; box-shadow: 0 12px 40px rgb(60 30 20 / .25); }
#start { top: auto; bottom: 8%; transform: translateX(-50%); text-align: center; justify-items: center; }
.card h1 { font: 800 30px/1 var(--display); color: var(--fur); margin: 0; }
.card p { margin: 0; color: var(--muted); }
.card form { display: grid; gap: 10px; }
.card label { font-size: 13px; font-weight: 600; color: var(--muted); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.note { font-size: 14px; color: var(--muted); margin: 0; }

.panel { position: absolute; z-index: 6; right: max(14px, env(safe-area-inset-right, 0px)); top: 64px; width: min(380px, calc(100% - 28px));
  background: var(--card); border-radius: 18px; padding: 16px; display: grid; gap: 10px; box-shadow: 0 10px 30px rgb(60 30 20 / .22); }
.panel h2 { font: 700 20px var(--display); color: var(--fur); margin: 0; }
.prow { display: grid; grid-template-columns: 84px 1fr 40px auto; gap: 8px; align-items: center; font-size: 14px; }
.prow output { font-variant-numeric: tabular-nums; color: var(--muted); }
.prow button { font: 600 13px var(--body); border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 5px 9px; cursor: pointer; }

.toast { position: absolute; z-index: 9; left: 50%; transform: translateX(-50%); top: 70px; background: var(--ink); color: #fff;
  padding: 8px 14px; border-radius: 12px; font-size: 14px; max-width: calc(100% - 28px); }
body:not(.live) .langs, body:not(.live) #mic, body:not(.live) #kbd { display: none; }
@media (max-width: 520px) { .top { gap: 6px; } .status { order: 2; } .hint { top: 22%; } }
@media (prefers-reduced-motion: reduce) { .hint { animation: none; } }