:root {
  --navy:        #012f60;
  --navy-2:      #0a3d73;
  --navy-3:      #0e4d96;
  --blue:        #2198d2;
  --blue-bright: #009ae1;
  --blue-glow:   rgba(0,154,225,.22);
  --green:       #aeca20;
  --green-dark:  #55690d;
  --green-glow:  rgba(174,202,32,.28);

  --bg:    #eef2f8;
  --panel: #ffffff;
  --text:  #0d1f35;
  --text2: #3a5272;
  --muted: #6b7c93;
  --line:  rgba(1,47,96,.09);

  --shadow-xs: 0 1px 3px rgba(1,47,96,.08);
  --shadow-sm: 0 2px 8px rgba(1,47,96,.08), 0 1px 3px rgba(1,47,96,.05);
  --shadow-md: 0 6px 20px rgba(1,47,96,.1), 0 2px 6px rgba(1,47,96,.06);
  --shadow-lg: 0 20px 60px rgba(1,47,96,.16), 0 8px 24px rgba(1,47,96,.1);
  --shadow-blue: 0 4px 18px rgba(0,154,225,.38), 0 2px 6px rgba(0,154,225,.2);
}

*, *::before, *::after { box-sizing: border-box; }

/* ═══════════════════════════
   SPLASH
═══════════════════════════ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background:
    radial-gradient(ellipse 90% 70% at 60% 20%, #0e4d8a 0%, transparent 65%),
    radial-gradient(ellipse 70% 90% at 20% 90%, rgba(174,202,32,.12) 0%, transparent 55%),
    #012f60;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease, visibility 1s;
  overflow: hidden;
}
.splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.splash.hide { opacity: 0; visibility: hidden; }
.splash-inner { display: inline-flex; flex-direction: column; gap: 4px; position: relative; }

.kai-word {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: clamp(42px, 13vw, 70px);
  line-height: 1.06;
  color: #fff;
  display: flex;
  align-items: baseline;
  letter-spacing: -.5px;
}
/* Rahulik järjestus: iga rea algustäht hingab sisse, seejärel voolavad
   ülejäänud tähed ükshaaval. Ilma põrketa (overshoot) ja pöördeta – need
   tegid liikumise rabedaks. Ridade vahe .62s, tähtede vahe .035s. */
.kai-word .ini {
  display: inline-block;
  background: linear-gradient(135deg, #3cbffa 0%, var(--blue-bright) 50%, #0077b6 100%);
  color: #fff;
  border-radius: 11px;
  padding: .02em .13em;
  margin-right: .08em;
  box-shadow: 0 6px 28px rgba(0,154,225,.5), inset 0 1px 0 rgba(255,255,255,.28);
  animation: kaiIniIn 1s cubic-bezier(.22,.7,.28,1) both;
  animation-delay: calc(var(--i) * .85s);
}
.kai-word .rest {
  display: inline-block;
  white-space: nowrap;
}
/* Ühe tähe samm. --l tuleb JS-ist (tähe järjekord reas). */
.kai-word .ltr {
  display: inline-block;
  white-space: pre;
  animation: kaiLetterIn .7s cubic-bezier(.22,.7,.28,1) both;
  animation-delay: calc(var(--i) * .85s + .4s + var(--l) * .05s);
}
/* Kui JS ei jõua tähti tükeldada, jääb sõna tervikuna nähtavaks. */
.kai-word .rest:not(:has(.ltr)) {
  animation: kaiLetterIn .7s cubic-bezier(.22,.7,.28,1) both;
  animation-delay: calc(var(--i) * .85s + .4s);
}
@keyframes kaiIniIn {
  from { opacity:0; transform: translateY(10px) scale(.86); }
  to   { opacity:1; transform: none; }
}
@keyframes kaiLetterIn {
  from { opacity:0; transform: translateY(7px); filter: blur(3px); }
  to   { opacity:1; transform: none; filter: blur(0); }
}
.splash-bar {
  height: 3px;
  width: 100%;
  margin-top: 22px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--blue-bright) 55%, rgba(255,255,255,.5));
  transform-origin: left;
  animation: kaiBar 1s cubic-bezier(.4,0,.2,1) both;
  animation-delay: 3.35s;
  box-shadow: 0 0 14px rgba(0,154,225,.5);
}
@keyframes kaiBar {
  from { transform: scaleX(0); opacity:0; }
  to   { transform: scaleX(1); opacity:1; }
}
.splash-tag {
  margin-top: 14px;
  color: rgba(167,203,235,.88);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  animation: splashFade .9s ease both;
  animation-delay: 3.9s;
}
@keyframes splashFade {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-inner * { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ═══════════════════════════
   BODY
═══════════════════════════ */
body {
  margin: 0;
  /* iOS: 100vh on SUUR vaateaken (nagu URL-riba oleks peidus), .phone aga 100dvh.
     Kui need lahku lähevad, on dokument ekraanist ~80px kõrgem – leht kerib ja
     päise ülaserv (ESTELi logo) kaob ülevalt ära. live.css-is oli see juba õige. */
  min-height: 100vh;
  min-height: 100dvh;
  /* .phone kerib ise seest; dokument ise ei tohi liikuda ega kummiefekti anda. */
  overscroll-behavior: none;
  display: flex;
  justify-content: center;
  font-family: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(ellipse 130% 70% at 50% -5%, #c5d8ee 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 95% 95%, rgba(174,202,32,.1) 0%, transparent 45%),
    #dfe6f0;
}

/* ═══════════════════════════
   PHONE SHELL
═══════════════════════════ */
.phone {
  position: relative;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--panel);
  box-shadow:
    0 0 0 1px rgba(1,47,96,.07),
    0 10px 40px rgba(1,47,96,.15),
    0 32px 80px rgba(1,47,96,.1);
}

/* ═══════════════════════════
   HEADER
═══════════════════════════ */
.bar {
  padding: 0;
  background: var(--navy);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 220% 160% at 105% -10%, rgba(33,152,210,.3) 0%, transparent 55%),
    radial-gradient(ellipse 100% 120% at -15% 110%, rgba(174,202,32,.1) 0%, transparent 50%);
  pointer-events: none;
}
.bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Turvaala: index.html-il on viewport-fit=cover, seega leht ulatub notchi ALLA.
     Ilma selleta libiseb logo iPhone'i Dynamic Islandi taha. Navy taust jääb
     servani (see on ilus), ainult sisu lükatakse ettepoole. */
  padding: calc(14px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) 10px calc(18px + env(safe-area-inset-left, 0px));
  position: relative;
}
.logo-img {
  height: 26px;
  width: auto;
  display: block;
  background: #fff;
  padding: 4px 9px;
  border-radius: 7px;
}
.status {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
  background: rgba(255,255,255,.07);
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  display: inline-block;
  flex-shrink: 0;
}
.status.live {
  color: var(--green);
  border-color: rgba(174,202,32,.4);
  background: rgba(174,202,32,.1);
}
.status.live::before {
  background: var(--green);
  box-shadow: 0 0 6px rgba(174,202,32,.6);
  animation: statusPulse 2.2s infinite;
}
@keyframes statusPulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(174,202,32,.22); }
  50%      { box-shadow: 0 0 0 5px rgba(174,202,32,.08); }
}
.event {
  padding: 2px 18px 16px;
  position: relative;
}
.title-row { display: flex; align-items: center; gap: 10px; }
.title {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -.3px;
  color: #ffffff;
  line-height: 1.1;
}
.kai-badge {
  font-family: "Lato", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .9px;
  color: var(--navy);
  background: var(--green);
  padding: 3px 9px;
  border-radius: 6px;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(174,202,32,.45);
  text-transform: uppercase;
}
.subtitle {
  font-size: 12px;
  color: rgba(167,203,235,.75);
  margin-top: 3px;
  letter-spacing: .1px;
}
.accent {
  height: 3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--blue-bright) 48%, rgba(1,47,96,.35) 100%);
  box-shadow: 0 1px 8px rgba(0,154,225,.28);
  flex-shrink: 0;
}

/* ═══════════════════════════
   PHASE BAR
═══════════════════════════ */
.phasebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 14px;
  background: #f6f9fc;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.phase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.phase-hint {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.phase-hint .live-dot { flex-shrink: 0; }

/* Live "Käib praegu" riba */
.nowbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(1,47,96,.1);
  background: #fff;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  box-shadow: var(--shadow-xs);
  transition: all .18s cubic-bezier(.2,.7,.3,1);
  animation: msgIn .35s cubic-bezier(.2,.7,.3,1) both;
}
.nowbar[hidden] { display: none; }
/* hidden-atribuut peab alati võitma – muidu jäävad display:flex elemendid nähtavaks */
[hidden] { display: none !important; }

/* Püsiv link küsimuste paneelile (teekonna 2. samm ei tohi ära kerida) */
.nav-link {
  margin-left: auto;
  font-family: "Lato", sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .3px;
  color: var(--navy);
  background: var(--green);
  padding: 5px 11px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(1,47,96,.15);
}
.nav-link:hover { filter: brightness(1.05); }
.nav-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.nowbar:hover { border-color: var(--blue-bright); background: #f6fbfe; transform: translateY(-1px); }
.nowbar:active { transform: scale(.99); }
.nb-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(174,202,32,.22);
  animation: livePulse 2s infinite;
}
.nb-dot.soon { background: var(--blue-bright); box-shadow: 0 0 0 3px rgba(0,154,225,.2); }
.nb-ico {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: var(--navy);
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 13px; font-weight: 900;
}
.nb-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.nb-text b {
  font-family: "Lato", sans-serif;
  font-size: 10.5px; font-weight: 900;
  letter-spacing: .5px; color: var(--green-dark);
  text-transform: uppercase;
}
.nowbar.soon .nb-text b { color: #0078b3; }
.nowbar.after .nb-text b { color: var(--navy); }
/* Üherealine variant (enne üritust): ainus rida tohib olla veidi suurem,
   sest ta ei ole enam teise rea silt vaid riba sisu ise. */
.nb-text.one-line b { font-size: 12px; letter-spacing: .4px; }
.nb-text span {
  font-size: 12.5px; color: var(--text);
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-next {
  flex-shrink: 0;
  font-size: 10px; font-weight: 800;
  color: var(--muted);
  background: #eef2f7;
  border-radius: 999px;
  padding: 4px 9px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  margin-right: 8px;
  box-shadow: 0 0 0 2px rgba(174,202,32,.22);
  animation: livePulse 2.2s infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(174,202,32,.22); }
  50%     { box-shadow: 0 0 0 5px rgba(174,202,32,.07); }
}
.toggle { display: flex; background: #e8edf4; border-radius: 999px; padding: 3px; }
.seg {
  border: 0; background: transparent; color: var(--navy);
  font-family: "Open Sans", sans-serif; font-weight: 700;
  font-size: 11px; padding: 5px 13px; border-radius: 999px; cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
  letter-spacing: .2px;
}
.seg.active { background: var(--navy); color: #fff; box-shadow: 0 2px 8px rgba(1,47,96,.28); }

/* ═══════════════════════════
   CHAT AREA
═══════════════════════════ */
.chat {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background-color: #f4f7fc;
  background-image: radial-gradient(rgba(1,47,96,.055) 1px, transparent 1px);
  background-size: 22px 22px;
  scroll-behavior: smooth;
}
.chat::-webkit-scrollbar { width: 4px; }
.chat::-webkit-scrollbar-track { background: transparent; }
.chat::-webkit-scrollbar-thumb { background: rgba(1,47,96,.15); border-radius: 4px; }

/* ═══════════════════════════
   PÜSIV TEEMARIBA (sisestusvälja kohal)
   Väljaspool .chat't, seega ei keri kunagi ära – vt DESIGN.md motion:
   "signaalib elus olekut", siin signaalib "küsimine on alati oodatud".
═══════════════════════════ */
.prompts {
  flex-shrink: 0;
  padding: 9px 16px 9px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.prompts-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.prompts-row::-webkit-scrollbar { display: none; }
/* Hiirega arvutis EI SAA peidetud kerimisribaga horisontaalset riba kerida:
   vertikaalne rullik ei liiguta seda, lohistatavat riba pole ja shift+rullikut
   ei oska keegi otsida. Telefonis pühib sõrm ja kõik toimib. Seetõttu laseme
   täpse osutiga seadmetel kiibid hoopis ridadesse murda - siis ei ole midagi
   peidus ega vaja kerida. Puutetundlikul seadmel jääb kerimine alles. */
@media (hover: hover) and (pointer: fine) {
  .prompts-row { flex-wrap: wrap; overflow-x: visible; }
}
.prompt-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background: #f4f8fc;
  border: 1.5px solid rgba(1,47,96,.1);
  border-radius: 999px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
  transition: all .14s;
}
.prompt-chip .qa-icon { display: grid; place-items: center; color: var(--blue-bright); }
.prompt-chip:hover { background: #e9f6fd; border-color: var(--blue-bright); }
.prompt-chip:active { transform: scale(.96); }
.prompt-chip:disabled { opacity: .55; cursor: default; transform: none; }

/* ═══════════════════════════
   MESSAGE ROWS
═══════════════════════════ */
.msg-row {
  display: flex;
  /* flex-end jättis avatari vastuse LÕPPU: pika vastuse puhul oli ★ 264px
     allpool seda rida, mida ta märgistab. Ankur kuulub algusesse. */
  align-items: flex-start;
  gap: 8px;
  animation: msgIn .32s cubic-bezier(.2,.7,.3,1) both;
}
/* Rea pikkus oli 31 märki (soovitus 45-75). Lagi oli avatari veerg + 90% rida:
   343px sisu - 39px veerg - 30px polsterdust = 239px teksti. Rida 100% peale
   ja veerg kitsamaks annab ~36 märki, ilma mulli kuju muutmata. */
.msg-row.bot-row { align-self: flex-start; max-width: 100%; }
.msg-row .kai-avatar { width: 28px; height: 28px; margin-top: 2px; }

.msg-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg-col.user-col { align-self: flex-end; align-items: flex-end; max-width: 82%; animation: msgIn .32s cubic-bezier(.2,.7,.3,1) both; }
.stamp {
  font-size: 10.5px;
  color: #9aabbf;
  padding: 0 6px;
  letter-spacing: .2px;
  user-select: none;
}

/* ═══════════════════════════
   WELCOME CARD
═══════════════════════════ */
.welcome {
  background: #fff;
  border: 1px solid rgba(1,47,96,.08);
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-shadow: var(--shadow-sm);
  animation: msgIn .4s cubic-bezier(.2,.7,.3,1) both;
}
.welcome-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.welcome-avatar { width: 38px; height: 38px; }
.welcome-avatar svg { width: 17px; height: 17px; }
.welcome-title {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-size: 16.5px;
  color: var(--navy);
  margin-bottom: 3px;
}
.welcome-sub { font-size: 13px; color: var(--text2); line-height: 1.5; }
.qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.qa-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  background: #f4f8fc;
  border: 1.5px solid rgba(1,47,96,.08);
  border-radius: 12px;
  font-family: "Open Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: all .18s cubic-bezier(.2,.7,.3,1);
  text-align: left;
}
.qa-card:hover {
  background: #e9f6fd;
  border-color: var(--blue-bright);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,154,225,.14);
}
.qa-card:active { transform: scale(.97); }
.qa-card:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.qa-icon { color: var(--blue-bright); display: grid; place-items: center; flex-shrink: 0; }

/* CTA: live-paneeli (küsimused esinejale) link */
.live-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-3) 0%, var(--navy) 100%);
  box-shadow: 0 4px 16px rgba(1,47,96,.25);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s;
  position: relative;
  overflow: hidden;
}
.live-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 140% at 100% 0%, rgba(33,152,210,.45) 0%, transparent 60%);
  pointer-events: none;
}
.live-cta:hover { transform: translateY(-1px); box-shadow: 0 7px 22px rgba(1,47,96,.32); }
.live-cta:active { transform: scale(.99); }
/* Enne üritust: teavituskaart, mitte nupp – ei tohi lubada vajutust, mida
   server niikuinii ei luba. Vaiksem pind, ilma tõste- ja klõpsuefektita. */
.live-cta.is-static {
  cursor: default;
  background: linear-gradient(135deg, #16406f 0%, #0d2f57 100%);
  box-shadow: 0 2px 10px rgba(1,47,96,.16);
}
.live-cta.is-static:hover { transform: none; box-shadow: 0 2px 10px rgba(1,47,96,.16); }
.live-cta.is-static:active { transform: none; }
.live-cta-ico { font-size: 19px; flex-shrink: 0; position: relative; }
.live-cta-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; position: relative; }
.live-cta-txt b { font-family: "Lato", sans-serif; font-weight: 800; font-size: 13.5px; }
.live-cta-txt span { font-size: 11.5px; color: rgba(167,203,235,.85); }
.live-cta-arr { font-size: 22px; color: rgba(255,255,255,.6); flex-shrink: 0; position: relative; }

/* Error bubble + retry */
.msg.bot.error { border-color: rgba(216,90,48,.32); background: #fdf3ef; }
.msg.bot.error::after { background: #d85a30; }
.retry-btn {
  margin-top: 8px;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #993c1d;
  background: #fff;
  border: 1.5px solid rgba(216,90,48,.4);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all .15s;
}
.retry-btn:hover { background: #d85a30; border-color: #d85a30; color: #fff; }

/* Scroll-to-bottom FAB */
/* bottom = composer + prompts-riba kõrgus, et nupp ei kaoks uue riba alla. */
.scroll-fab {
  position: absolute;
  right: 16px;
  bottom: 168px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(1,47,96,.12);
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .22s cubic-bezier(.2,.7,.3,1);
  z-index: 5;
}
.scroll-fab.show { opacity: 1; visibility: visible; transform: none; }
.scroll-fab:hover { background: #edf7fd; border-color: var(--blue-bright); color: var(--blue-bright); }

/* KAI avatar */
.kai-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--navy-3), var(--navy));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(1,47,96,.25);
}
.kai-avatar svg { display: block; }

/* ═══════════════════════════
   MESSAGES
═══════════════════════════ */
.msg {
  padding: 11px 14px;
  line-height: 1.58;
  font-size: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: msgIn .32s cubic-bezier(.2,.7,.3,1) both;
}

.msg.bot {
  background: #ffffff;
  border: 1px solid rgba(1,47,96,.08);
  color: var(--text);
  border-radius: 4px 18px 18px 18px;
  box-shadow: var(--shadow-sm);
  position: relative;
  max-width: 100%;
}
/* Värviline vasak äär oli siin. Eemaldatud: mull on juba eristatav (valge kaart
   vs sinine kasutajamull, 4px "saba" avatari poole) ja äär kordas seda üle.
   Aktsentäär ümaral kaardil on ka AI-slopi tüüpmuster. */

.msg.user {
  background: linear-gradient(145deg, var(--blue-bright) 0%, #0878bb 100%);
  color: #fff;
  border-radius: 18px 4px 18px 18px;
  align-self: flex-end;
  /* 82% laiuspiir kuulub AINULT .msg-col.user-col peale. Kui ta oli ka siin,
     tekkis ringlus: veerg kahaneb mulli sisu järgi, mull võtab siis 82% oma
     enda sisulaiusest -> iga kasutaja sõnum murdus 18% liiga vara. Lühikese
     sõna puhul ("tere") jäi murdekoht keset sõna: "te / re". */
  max-width: 100%;
  box-shadow: var(--shadow-blue);
}
.msg.user { animation: msgIn .32s cubic-bezier(.2,.7,.3,1) both; }

.msg.typing { color: var(--muted); }

@keyframes msgIn {
  from { opacity:0; transform: translateY(10px) scale(.97); }
  to   { opacity:1; transform: none; }
}

/* Typing dots */
.dots { display: inline-flex; gap: 5px; align-items: center; height: 16px; }
.dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
  animation: dotPulse 1.2s infinite ease-in-out;
}
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dotPulse {
  0%,60%,100% { transform: scale(1); opacity:.3; }
  30%         { transform: scale(1.35) translateY(-3px); opacity:1; }
}

/* ═══════════════════════════
   AFTER PANEL (QR)
═══════════════════════════ */
.hidden { display: none !important; }
.after-panel {
  margin: 14px 16px 4px;
  display: flex;
  justify-content: center;
  animation: panelIn .4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes panelIn {
  from { opacity:0; transform: translateY(-14px); }
  to   { opacity:1; transform: none; }
}
.qr-card {
  position: relative;
  display: inline-flex; align-items: center; gap: 15px;
  background: #fff; color: var(--navy);
  padding: 18px; border-radius: 20px;
  border: 1px solid rgba(1,47,96,.09);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.qr-card::before {
  content: '';
  position: absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--green), var(--blue-bright), var(--navy));
}
.qr { width: 116px; height: 116px; flex: 0 0 116px; }
.qr svg { display: block; border-radius: 8px; }
.qr-cap { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.qr-cap-title { font-family: "Lato", sans-serif; font-weight: 900; font-size: 14px; }
.qr-cap-url { font-weight: 700; font-size: 12px; color: var(--blue); }
.qr-cap-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.after-foot { margin-top: 16px; font-size: 11.5px; color: #93b8da; letter-spacing: .4px; }

/* ═══════════════════════════
   COMPOSER
═══════════════════════════ */
.composer {
  display: flex;
  gap: 10px;
  /* Alumine turvaala: ilma selleta jääb sisestusväli koduindikaatori alla. */
  padding: 11px calc(14px + env(safe-area-inset-right, 0px)) calc(13px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--line);
  background: var(--panel);
  align-items: center;
  flex-shrink: 0;
}
#input {
  flex: 1;
  background: #f0f4fa;
  border: 1.5px solid rgba(1,47,96,.1);
  color: var(--text);
  border-radius: 24px;
  padding: 11px 18px;
  /* 16px EI OLE esteetiline valik: iOS Safari suumib lehe sisse iga
     fookuses välja puhul, mille kiri on alla 16px, ega suumi tagasi.
     Ära vii allapoole. Alternatiiv (user-scalable=no) tapaks
     näpuga suurendamise ära ja on ligipääsetavuse regressioon. */
  font-size: 16px;
  outline: none;
  font-family: "Open Sans", sans-serif;
  transition: border-color .2s, background .2s, box-shadow .2s;
  line-height: 1.4;
}
#input::placeholder { color: #96aabf; }
#input:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0,154,225,.1), var(--shadow-xs);
}
#send {
  width: 44px; height: 44px; flex: 0 0 44px;
  border: 0; border-radius: 50%;
  background: linear-gradient(145deg, var(--blue-bright), #0878bb);
  color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: all .18s cubic-bezier(.2,.7,.3,1);
  box-shadow: var(--shadow-blue);
}
#send:hover {
  background: linear-gradient(145deg, #1ac4ff, var(--blue-bright));
  box-shadow: 0 6px 22px rgba(0,154,225,.52);
  transform: scale(1.06);
}
#send:active { transform: scale(.94); }
#send:disabled { opacity:.38; cursor:default; box-shadow:none; transform:none; }
#send svg { transform: translateX(1px); }
#input:disabled { opacity: .6; }

/* ═══════════════════════════
   DESKTOP / TABLET FRAME
═══════════════════════════ */
@media (min-width: 700px) {
  body { align-items: center; padding: 28px 16px; }
  .phone {
    height: calc(100dvh - 56px);
    max-height: 920px;
    min-height: 560px;
    border-radius: 28px;
    overflow: hidden;
  }
  .scroll-fab { bottom: 92px; }
}

@media (max-width: 380px) {
  .title { font-size: 18px; }
  .qa-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════
   VASTUSE SISESTRUKTUUR
   12-realine ajakava lauskirjas on telefonis loetamatu. Kellaaeg saab oma
   veeru, pealkiri oma rea, esineja jääb vaiksemaks. Kaunistust minimaalselt –
   ainult see, mis aitab silmal rida leida.
═══════════════════════════ */
.msg.bot { white-space: normal; }

.msg.bot p { margin: 0; }
.msg.bot p + p { margin-top: 9px; }
.msg.bot p + .ans-list,
.msg.bot .ans-list + p { margin-top: 11px; }

.ans-list { display: flex; flex-direction: column; }

.ans-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 12px;
  padding: 7px 0;
  border-top: 1px solid rgba(1,47,96,.07);
  align-items: baseline;
}
.ans-row:first-child { border-top: none; padding-top: 2px; }

.ans-time {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  line-height: 1.45;
  white-space: nowrap;
}
.ans-time i {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--muted);
}

.ans-body { min-width: 0; }
.ans-title { display: block; }
.ans-who {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  color: var(--text-2);
}

/* Loetelupunktid */
.ans-row.bullet { grid-template-columns: 14px 1fr; gap: 0 10px; align-items: start; }
.ans-row.bullet .ans-dot {
  width: 5px; height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--green);
  display: block;
}