:root {
  --bg: #f3f1ec;
  --panel: #ffffff;
  --text: #1d2321;
  --muted: #59625e;
  --line: #dcd8cf;
  --accent: #2f6f68;
  --accent-2: #3f8a82;
  --accent-ink: #ffffff;
  --live: #b5473a;
  --live-2: #cf5d4f;
  --me: #e6efe9;
  --ai: #ffffff;
  --agent: #f4ecd9;
  --warn: #9a5b00;
  --err: #a33a2c;
  --me-label: #58625e;
  --shadow: 0 10px 30px rgba(33, 45, 41, .14);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121615;
    --panel: #1b201f;
    --text: #e8ece9;
    --muted: #a9b3ae;
    --line: #2c3432;
    --accent: #4f9d93;
    --accent-2: #62b0a6;
    --accent-ink: #0d1413;
    --live: #d0665a;
    --live-2: #e07b6f;
    --me: #1f2d29;
    --ai: #1b201f;
    --agent: #2b2719;
    --warn: #e0a64b;
    --err: #ef8a7c;
    --me-label: #9aa5a0;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121615; --panel: #1b201f; --text: #e8ece9; --muted: #a9b3ae; --line: #2c3432;
  --accent: #4f9d93; --accent-2: #62b0a6; --accent-ink: #0d1413; --live: #d0665a; --live-2: #e07b6f;
  --me: #1f2d29; --ai: #1b201f; --agent: #2b2719; --warn: #e0a64b; --err: #ef8a7c; --me-label: #9aa5a0;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  min-height: 100dvh;
}
[hidden] { display: none !important; }
button, select { font: inherit; color: inherit; }

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  /* высота ровно в экран: журнал прокручивается внутри, кнопка остаётся внизу под большим пальцем */
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.top { order: 1; }
.top { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.seg {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px;
}
.segb {
  border: 0; background: transparent; border-radius: 999px; padding: 10px 4px;
  font-size: clamp(14px, 3.9vw, 16px);
  font-weight: 600; color: var(--muted); cursor: pointer; min-height: 44px;
}
.segb.on { background: var(--accent); color: var(--accent-ink); }
.segb:disabled, .segb[aria-disabled="true"] { opacity: .5; cursor: default; }
.langrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px;
  color: var(--muted);
}
.langrow span { white-space: nowrap; }
.langrow select {
  background: transparent; border: 0; font-weight: 600; color: var(--text); padding: 8px 4px; min-height: 44px;
}

.invite { order: 2; text-align: center; margin: auto 0; padding: 24px 8px; }
.invite h1 { margin: 0 0 8px; font-size: 28px; }
.invite p { margin: 8px 0; text-wrap: balance; }
.invite .err { margin: 0 0 14px; }
.muted { color: var(--muted); font-size: 14px; }

.stage {
  order: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 10px 0 4px;
  flex: 0 0 auto;
}
.stage .status { order: 1; margin: 0; }
.stage .badge { order: 2; }
.stage .err { order: 3; }
.stage .talk { order: 4; }
.stage .tools { order: 5; }
.talk {
  position: relative;
  margin-top: 8px;
  width: min(46vw, 184px); height: min(46vw, 184px);
  border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, var(--accent-2), var(--accent));
  color: var(--accent-ink);
  box-shadow: var(--shadow);
  display: grid; place-items: center;
  transition: transform .12s ease, background .2s ease;
  touch-action: manipulation;
}
.talk:active { transform: scale(.97); }
.talk:disabled { opacity: .6; cursor: default; }
.talkLabel { font-size: clamp(19px, 5.6vw, 26px); font-weight: 700; letter-spacing: .2px; }
.ring {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 3px solid transparent; pointer-events: none;
}
.talk.live { background: radial-gradient(circle at 35% 30%, var(--live-2), var(--live)); }
.talk.connecting .ring { border-color: var(--accent); animation: spin 1.1s linear infinite; border-top-color: transparent; }
.talk.speaking .ring { border-color: var(--live); animation: pulse 1s ease-in-out infinite; }
.talk.listening .ring { border-color: var(--live); opacity: .35; }
.talk.thinking .ring { border-color: var(--warn); border-top-color: transparent; animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.05); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .ring { animation: none !important; } }

.status { margin: 6px 0 0; font-size: 20px; font-weight: 600; text-align: center; min-height: 1.45em; }
.badge {
  margin: 0; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--agent); color: var(--warn);
}
.badge.test { background: var(--err); color: var(--panel); text-align: center; }
.err {
  margin: 0; padding: 10px 14px; border-radius: 12px; max-width: 100%;
  background: var(--panel); border: 1px solid var(--err); color: var(--err); text-align: center;
}
.tools { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pill {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 10px 16px; min-height: 44px; cursor: pointer; font-weight: 600;
}
.pill:disabled { opacity: .45; cursor: default; }
.pill.on { border-color: var(--live); color: var(--live); }
.pill.warn { border-color: var(--warn); color: var(--warn); }
/* «Смотрю…» и «Читаю…»: занятая кнопка залита, а не бледная (единственный знак, что снимок в работе) */
.pill#look:disabled, .pill#read:disabled { opacity: 1; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (max-width: 380px) {
  .tools { gap: 8px; }
  .pill { padding: 10px 12px; font-size: 15px; }
}

.log {
  order: 2;
  margin-top: 8px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 0 4px;
}
.log > .msg:first-child { margin-top: auto; }
.msg {
  max-width: 88%; padding: 9px 12px; border-radius: 16px; border: 1px solid var(--line);
  overflow-wrap: anywhere; font-size: 16px;
}
.msg b { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.msg.me { align-self: flex-end; background: var(--me); border-bottom-right-radius: 6px; }
.msg.me b { color: var(--me-label); }
body.tr .msg.ai span { font-size: 22px; line-height: 1.35; }
.msg.ai { align-self: flex-start; background: var(--ai); border-bottom-left-radius: 6px; }
.msg.sys { align-self: center; background: transparent; border: 0; color: var(--muted); font-size: 14px; padding: 2px; }

/* ── «Камера» и «Посмотри» (27.09.2026) ── */
.cam {
  order: 2;
  position: relative; margin-top: 10px; flex: 0 0 auto;
  height: min(38dvh, 62vw); min-height: 150px;
  border-radius: 18px; overflow: hidden; background: #0b0f0e; border: 1px solid var(--line);
}
.cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam video.front { transform: scaleX(-1); }
.camHint {
  position: absolute; inset: 0; margin: 0; padding: 16px; display: grid; place-items: center; text-align: center;
  color: #e8ece9; font-size: 15px; text-wrap: balance;
}
/* «Сменить камеру» и «Фонарик»: круглые значки в верхних углах, нижние углы картинки (штрихкод, мелкий текст) открыты */
.cam .camIco {
  position: absolute; top: 8px; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
}
.cam .camIco svg { width: 24px; height: 24px; }
.cam #camFlip { right: 8px; }
.cam #torch { left: 8px; }
.cam #torch[aria-pressed="true"] { background: #f2c14e; color: #1d2321; }
/* в камере статус уже «Жду ответ: Аналитик»: плашка «Обычно это 10-20 секунд» только съедает журнал */
body.mode-cam .badge:not(.test) { display: none !important; }
body.mode-cam .log { order: 3; }
body.mode-cam .stage { order: 4; }
body.mode-cam .talk { width: min(34vw, 140px); height: min(34vw, 140px); }
.pill.cam-pill { border-color: var(--accent); color: var(--accent); }
.pill[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.flash {
  /* ниже переключателя режимов: снимок ложится на журнал, а не на кнопки */
  position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 64px); right: 12px; z-index: 5;
  width: 112px; height: auto; border-radius: 12px; border: 3px solid var(--panel); box-shadow: var(--shadow);
  animation: flash 1.8s ease forwards; pointer-events: none;
}
@keyframes flash { 0% { opacity: 0; transform: scale(.85); } 12% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }
.msg.me img { display: block; width: 96px; height: auto; border-radius: 8px; margin-top: 4px; }
.msg .desc { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.offscreen { position: fixed; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
body.mode-cam .talkLabel { font-size: clamp(16px, 4.6vw, 19px); }
body.mode-cam .tools .pill { padding: 8px 12px; font-size: 15px; min-height: 44px; }
body.mode-cam .stage { gap: 8px; padding-top: 6px; }
body.mode-cam .status { font-size: 18px; }

/* Альбомный экран во вкладке Chrome (приложение и значок держат вертикаль): две колонки, всё на экране */
@media (orientation: landscape) and (max-height: 540px) {
  .wrap { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px 16px; }
  .top, .invite { grid-column: 1 / -1; }
  .log { grid-column: 1; grid-row: 2 / 4; margin: 0; }
  .stage { grid-column: 2; grid-row: 2 / 4; align-self: end; padding: 0; }
  body.mode-cam .cam { grid-column: 1; grid-row: 2 / 4; height: auto; min-height: 0; margin: 0; }
  body.mode-cam .log { grid-column: 2; grid-row: 2; }
  body.mode-cam .stage { grid-column: 2; grid-row: 3; }
  .talk, body.mode-cam .talk { width: 112px; height: 112px; margin-top: 0; }
  .talkLabel, body.mode-cam .talkLabel { font-size: 15px; }
  .status { font-size: 17px; }
  body.tr .trp { grid-column: 1 / -1; grid-row: 2 / 4; }
}