/* NOA HOLOGRAMM-KAASLANE — Shall sillal. Reeglid DISAIN.md: hairline'id, mitte varjud;
   kuld ainult tegevusel; iga nupp teeb midagi; telefon esimesena. */
.nh { --nh-kuld: #e8d5a8; --nh-kuld2: #e8d5a8; --nh-must: #050507; --nh-joon: rgba(216,180,106,.22);
      --nh-tekst: #f5f5f2; --nh-hall: rgba(239,233,220,.62); --nh-hologramm: #9ad7ff;
      display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; max-width: 1080px; margin: 0 auto;
      background: var(--nh-must); border: 1px solid var(--nh-joon); border-radius: 18px; overflow: hidden;
      color: var(--nh-tekst); font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.nh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── lava: 9:16 hologramm */
.nh-stage { position: relative; aspect-ratio: 9 / 13; min-height: 320px; background:
  radial-gradient(60% 40% at 50% 100%, rgba(154,215,255,.16), transparent 70%), #000; overflow: hidden; isolation: isolate; }
.nh-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen;
  transition: opacity .7s ease; opacity: 0; filter: saturate(1.05) contrast(1.06); }
.nh-v-idle { opacity: 1; }
.nh.is-talking .nh-v-idle { opacity: 0; }
.nh.is-talking .nh-v-talk { opacity: 1; }
.nh-cone { position: absolute; left: 50%; bottom: 0; width: 140%; height: 100%; transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 100%, transparent 40%, rgba(154,215,255,.10) 48%, rgba(216,180,106,.10) 52%, transparent 60%);
  opacity: .8; pointer-events: none; }
.nh-scan { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px); animation: nh-scan 6s linear infinite; }
.nh-ring { position: absolute; left: 50%; bottom: 7%; width: 64%; height: 9%; transform: translateX(-50%);
  border-radius: 50%; border: 1px solid rgba(216,180,106,.55); box-shadow: 0 0 0 6px rgba(216,180,106,.06) inset;
  background: radial-gradient(closest-side, rgba(216,180,106,.18), transparent 75%); animation: nh-ring 4s ease-in-out infinite; }
.nh.is-thinking .nh-ring { animation-duration: 1.2s; border-color: var(--nh-kuld2); }
.nh.is-talking .nh-ring { border-color: var(--nh-kuld2); background: radial-gradient(closest-side, rgba(216,180,106,.34), transparent 75%); }
.nh-olek { position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px;
  border: 1px solid var(--nh-joon); border-radius: 999px; background: rgba(5,5,7,.55); backdrop-filter: blur(8px);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--nh-hall); }
.nh-olek-nimi { color: var(--nh-tekst); font-weight: 600; }
.nh-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--nh-hologramm); box-shadow: 0 0 10px var(--nh-hologramm); }
.nh.is-thinking .nh-punkt { background: var(--nh-kuld); box-shadow: 0 0 10px var(--nh-kuld); animation: nh-pulss .8s ease-in-out infinite; }
.nh.is-talking .nh-punkt { background: var(--nh-kuld2); box-shadow: 0 0 12px var(--nh-kuld2); animation: nh-pulss .35s ease-in-out infinite; }

.nh-kes { position: absolute; right: 12px; top: 12px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--nh-joon); background: rgba(5,5,7,.55); backdrop-filter: blur(8px); }
.nh-kes-nupp { padding: 5px 12px; border-radius: 999px; border: 0; background: transparent; color: var(--nh-hall);
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.nh-kes-nupp:hover, .nh-kes-nupp:focus-visible { color: var(--nh-tekst); outline: none; }
.nh-kes-nupp[aria-selected="true"] { background: var(--nh-kuld); color: #1b1408; }

/* ── külg: sõnad + sisend */
.nh-side { display: grid; grid-template-rows: 1fr auto auto auto; gap: 12px; padding: 18px 18px 16px; min-height: 260px; }
.nh-tekst { overflow: auto; max-height: 40vh; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.nh-rida { max-width: 92%; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--nh-joon); background: rgba(255,255,255,.025); }
.nh-rida-me { align-self: flex-end; border-color: rgba(255,255,255,.14); color: var(--nh-hall); }
.nh-rida-noa { align-self: flex-start; font-family: "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 18px; line-height: 1.45; letter-spacing: .005em; }
.nh-fraas { transition: color .25s ease, opacity .25s ease; opacity: .38; }
.nh-fraas.on { opacity: 1; color: var(--nh-kuld2); }
.nh-fraas.ol { opacity: 1; }
.nh-rida-noa.valmis .nh-fraas { opacity: 1; color: inherit; }
.nh-kiired { display: flex; flex-wrap: wrap; gap: 8px; }
.nh-kiire { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--nh-joon); background: transparent; color: var(--nh-tekst);
  font: inherit; font-size: 13px; cursor: pointer; transition: border-color .2s, background .2s; }
.nh-kiire:hover, .nh-kiire:focus-visible { border-color: var(--nh-kuld); background: rgba(216,180,106,.08); outline: none; }
.nh-vorm { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: end; }
.nh-sisend { width: 100%; resize: none; min-height: 44px; max-height: 140px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--nh-tekst); font: inherit; }
.nh-sisend:focus { outline: none; border-color: var(--nh-kuld); }
.nh-saada { height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--nh-kuld); background: var(--nh-kuld);
  color: #1b1408; font: inherit; font-weight: 700; cursor: pointer; transition: background .2s, transform .1s; }
.nh-saada:hover { background: var(--nh-kuld2); }
.nh-saada:active { transform: translateY(1px); }
.nh-saada[disabled] { opacity: .55; cursor: wait; }
.nh-haal { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: transparent; cursor: pointer; display: grid; place-items: center; }
.nh-haal-ikoon { width: 18px; height: 18px; background: currentColor; color: var(--nh-tekst); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat; }
.nh-haal[aria-pressed="false"] { border-color: rgba(255,255,255,.08); }
.nh-haal[aria-pressed="false"] .nh-haal-ikoon { opacity: .35; }
.nh-haal[aria-pressed="true"] { border-color: var(--nh-kuld); }
.nh-haal[aria-pressed="true"] .nh-haal-ikoon { color: var(--nh-kuld); }
.nh-viga { margin: 0; font-size: 13px; color: #f0a9a0; }

@keyframes nh-scan { to { background-position: 0 60px; } }
@keyframes nh-ring { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .85; } 50% { transform: translateX(-50%) scale(1.04); opacity: 1; } }
@keyframes nh-pulss { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }

@media (min-width: 820px) {
  .nh { grid-template-columns: 380px minmax(0, 1fr); }
  .nh-stage { aspect-ratio: auto; min-height: 520px; }
  .nh-side { padding: 26px 26px 22px; }
  .nh-tekst { max-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .nh-scan, .nh-ring, .nh-punkt { animation: none !important; }
}

/* /maailm sektsioon: nähtav lava ilma vestluseta */
.nw-hologramm { width: min(100%, 360px); margin: 0 auto 18px; }
.nw-hologramm .nh-stage { aspect-ratio: 9 / 13; min-height: 0; border-radius: 18px; border: 1px solid rgba(216,180,106,.22); }