:root {
  --bg: #07090d;
  --bg-2: #0c1018;
  --text: #e9edf5;
  --muted: #8b94a7;
  --dim: #5d6678;
  --accent: #ff8a4c;
  --accent-soft: rgba(255, 138, 76, .16);
  --line: rgba(255, 255, 255, .08);
  --panel: rgba(255, 255, 255, .045);
  --radius: 22px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  overscroll-behavior: none;
}

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 45% at 50% 12%, rgba(255, 138, 76, .10), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(94, 120, 255, .10), transparent 70%),
    linear-gradient(180deg, #080a0f 0%, #07090d 55%, #05060a 100%);
}

.app {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom));
  max-width: 760px; margin: 0 auto;
}

/* ---------- верх ---------- */
.top { display: flex; align-items: center; gap: 10px; height: 44px; }

.brand { display: flex; align-items: center; gap: 8px; min-width: 92px; }
.brand .name { font-weight: 650; letter-spacing: .2px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #56607a; transition: .3s; }
body[data-link="on"] .dot { background: #57d38c; box-shadow: 0 0 10px rgba(87, 211, 140, .7); }
body[data-link="off"] .dot { background: #d35757; }

.modes {
  margin-left: auto; display: flex; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
}
.mode {
  border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 13.5px; padding: 6px 13px; border-radius: 999px;
  cursor: pointer; transition: .2s; white-space: nowrap;
}
.mode.active { background: rgba(255, 255, 255, .10); color: var(--text); }

.icon {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); display: grid; place-items: center;
  cursor: pointer; flex: 0 0 auto;
}
.icon svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- сцена ---------- */
.stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.transcript {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 2px 6px;
  display: flex; flex-direction: column; gap: 8px;
  mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 100%);
  scrollbar-width: none;
}
/* Пустой блок сверху прижимает переписку к орбу, но не мешает прокрутке. */
.transcript::before { content: ""; margin-top: auto; }
.transcript::-webkit-scrollbar { display: none; }

.msg { max-width: 86%; font-size: 15.5px; line-height: 1.5; animation: rise .25s ease-out; }
.msg.me {
  align-self: flex-end; text-align: right; color: #cfd6e4;
  background: var(--panel); border: 1px solid var(--line);
  padding: 9px 13px; border-radius: 18px 18px 6px 18px;
}
.msg.voice { align-self: flex-start; color: var(--text); padding: 2px 2px; }
.msg.voice .who { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; }
.msg.err { align-self: flex-start; color: #ff9d9d; font-size: 14px; }

.tool {
  align-self: flex-start; font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted); background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool b { color: var(--accent); font-weight: 600; }

@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- орб ---------- */
.orb-wrap { display: grid; place-items: center; padding: 8px 0 2px; }

.orb {
  position: relative; width: 190px; height: 190px; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .18s ease-out;
}
.orb .core {
  width: 108px; height: 108px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #ffd7b0 0%, #ff9a5c 26%, #ff6a3d 52%, #b8371f 82%, #6d1f12 100%);
  box-shadow: 0 0 60px 12px rgba(255, 122, 66, .20), inset 0 -14px 30px rgba(0, 0, 0, .45);
  opacity: .92;
  animation: breathe 5.2s ease-in-out infinite;
}
.orb .sheen {
  position: absolute; width: 108px; height: 108px; border-radius: 50%;
  background: radial-gradient(circle at 36% 26%, rgba(255, 255, 255, .55), transparent 42%);
  mix-blend-mode: screen; opacity: .5; pointer-events: none;
}
.orb .rings { position: absolute; inset: 0; border-radius: 50%; }
.orb .rings::before, .orb .rings::after {
  content: ""; position: absolute; inset: 12px; border-radius: 50%;
  border: 1px solid rgba(255, 138, 76, .20); opacity: 0; transform: scale(.9);
}
body[data-state="speaking"] .rings::before { animation: ripple 2.4s ease-out infinite; }
body[data-state="speaking"] .rings::after { animation: ripple 2.4s ease-out .8s infinite; }
body[data-state="thinking"] .orb .core { animation: spin-glow 2.2s linear infinite; }
body[data-state="hearing"] .orb .core { animation: none; transform: scale(calc(1 + var(--level, 0) * .28)); }

@keyframes breathe { 0%,100% { transform: scale(.96); opacity: .82; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes ripple { 0% { opacity: .5; transform: scale(.86); } 70% { opacity: 0; transform: scale(1.28); } 100% { opacity: 0; } }
@keyframes spin-glow {
  0% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(-14deg) brightness(1.15); }
  100% { filter: hue-rotate(0deg) brightness(1); }
}

.hint { margin-top: 14px; font-size: 13px; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }

.meter { height: 3px; width: 120px; margin: 4px auto 6px; border-radius: 3px; background: rgba(255,255,255,.05); overflow: hidden; }
.meter span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), #ffd0a8); transition: width .09s linear; }

/* ---------- низ ---------- */
.composer { display: flex; align-items: center; gap: 8px; padding-top: 6px; }

.mic, .stop {
  width: 50px; height: 50px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  display: grid; place-items: center; cursor: pointer; transition: .2s;
}
.mic svg, .stop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.mic.off { color: #ff8080; border-color: rgba(255, 128, 128, .35); }
.stop { width: 44px; height: 44px; color: var(--muted); }

.textbox {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 4px 4px 16px; min-width: 0;
}
.textbox input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 15px; padding: 10px 0;
}
.textbox input::placeholder { color: var(--dim); }
.textbox button {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
}
.textbox button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- меню ---------- */
.sheet { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); display: grid; align-items: end; }
.sheet[hidden] { display: none; }
.sheet-card {
  background: #10141c; border-top: 1px solid var(--line);
  border-radius: 24px 24px 0 0; padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  display: grid; gap: 10px; animation: sheet .25s ease-out;
}
@keyframes sheet { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet-card h3 { margin: 0 0 4px; font-size: 15px; color: var(--muted); font-weight: 500; }
.row {
  width: 100%; text-align: left; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font: inherit; cursor: pointer;
}
.row.ghost { background: transparent; color: var(--muted); text-align: center; }
.note { margin: 2px 4px 0; color: var(--dim); font-size: 13px; line-height: 1.45; }