/* app.css — autós felület: kis állapotkör felül, alatta alulra igazított, felfelé gördülő leirat.
   A paletta a LoxTop-appokéval (lxbrain, web-server, chromeservice-dashboard, mail-watchdog) bitre
   azonos „Tokyo Night Dark + Pastel” (0.5.0, a user kérése: a többi apphoz közelítve).
   Az állapotszíneket a kör data-state attribútuma választja (DESIGN.md §6.8). */

:root {
  color-scheme: dark;

  /* --- A LoxTop paletta (k8s-lxbrain/.../lxbrain.css — ha ott változik, itt is) --- */
  --bg-page: #1a1b26;
  --bg-card: #24283b;
  --bg-header: #1f2335;
  --bg-deep: #16161e;
  --border: #414868;
  --border-light: #2a2e44;
  --text: #c0caf5;
  --text-muted: #9aa5ce;
  --text-dim: #6b7394;
  --pastel-cyan: #7dcfff;
  --pastel-mint: #9ece6a;
  --pastel-peach: #e0af68;
  --pastel-red: #f7768e;
  --pastel-lilac: #bb9af7;
  --pastel-orange: #ff9e64;

  /* --- A felület szerepei --- */
  --bg: var(--bg-page);
  --fg: var(--text);
  --muted: var(--text-muted);
  --panel: var(--bg-card);
  --line: var(--border);
  --ok: var(--pastel-mint);
  --warn: var(--pastel-peach);
  --bad: var(--pastel-red);
  --accent: var(--pastel-cyan);

  --c-off: var(--border);
  --c-connecting: var(--pastel-red);
  --c-listening: var(--pastel-mint);
  --c-speaking: var(--pastel-cyan);
  --c-needs-tap: var(--pastel-orange);
  --c-auth-failed: var(--pastel-lilac);
  --c-superseded: var(--text-dim);

  /* A leirat betűmérete és sorköze (a user kérése: 0.5.0-ban 20–28 → ~17 px; 0.5.2-ben rögzített
     15 px és szorosabb sor, mert a sorok még mindig sok helyet foglaltak). */
  --text-size: 15px;
  --text-line: 1.25;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  /* Enyhe derengés felül (a kártyaszínből), lefelé a mély háttérbe — a többi app sima háttere. */
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(122, 162, 247, 0.10) 0%, rgba(122, 162, 247, 0) 70%),
    linear-gradient(180deg, var(--bg-header) 0%, var(--bg-page) 38%, var(--bg-deep) 100%);
  /* A „notch” és a home-indikátor alá ne kerüljön vezérlő (viewport-fit=cover). */
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; touch-action: manipulation; }

/* ── Felső sáv: kapcsolat-jelző ─────────────────────────────────────────── */

.topbar { display: flex; justify-content: center; flex: none; }

.chip {
  border: 1px solid var(--border-light);
  background: rgba(36, 40, 59, 0.75);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--muted);
  min-height: 30px;
}
.chip::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--line);
}
.chip[data-kind="ok"]::before { background: var(--ok); }
.chip[data-kind="warn"]::before { background: var(--warn); }
.chip[data-kind="bad"]::before { background: var(--bad); }

/* ── A kör (felül, kicsi — a hely a szövegé) ─────────────────────────────── */

.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  margin: 10px auto 0;
}

.circle {
  /* 0.5.0: ~155 px egy iPhone-on (a 0.4.x-ben ~273 px) — autóban is elég nagy koppintási felület. */
  --size: min(40vw, 24vh, 190px);
  --ring-scale: 1;
  --color: var(--c-off);
  flex: none;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--color) 70%, transparent);
  /* Áttetsző pasztell kitöltés a kártyaszínen: éjjel az autóban nyugodtabb, mint a teli szín. */
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color) 38%, transparent) 0%, transparent 70%),
    color-mix(in srgb, var(--color) 22%, var(--bg-card));
  box-shadow: 0 0 28px color-mix(in srgb, var(--color) 22%, transparent);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.circle-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--color);
  opacity: 0.5;
  transform: scale(var(--ring-scale));
  transition: transform 90ms linear;
  pointer-events: none;
}
.circle-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.circle-ai {
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-muted);
}
.circle-ai:empty { display: none; }
.circle-label {
  font-size: clamp(15px, 4.2vw, 20px);
  font-weight: 600;
  text-align: center;
  padding: 0 12%;
  line-height: 1.2;
  color: var(--fg);
}

.circle[data-state="off"] { --color: var(--c-off); }
.circle[data-state="starting"],
.circle[data-state="connecting"] { --color: var(--c-connecting); animation: pulse 1.6s ease-in-out infinite; }
.circle[data-state="listening"] { --color: var(--c-listening); }
.circle[data-state="talking"] { --color: var(--ok); box-shadow: 0 0 36px color-mix(in srgb, var(--ok) 45%, transparent); }
.circle[data-state="thinking"] { --color: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
.circle[data-state="speaking"] { --color: var(--c-speaking); }
.circle[data-state="speaking"] .circle-ring { animation: breathe 1.2s ease-in-out infinite; }
.circle[data-state="needs-tap"] { --color: var(--c-needs-tap); }
.circle[data-state="auth-failed"] { --color: var(--c-auth-failed); }
.circle[data-state="superseded"] { --color: var(--c-superseded); }
.circle[data-state="limited"] { --color: var(--c-auth-failed); }

@keyframes pulse { 50% { opacity: 0.6; } }
@keyframes breathe { 50% { transform: scale(1.12); } }

.status {
  flex: none;
  margin: 0;
  min-height: 1.35em;
  font-size: clamp(14px, 3.9vw, 17px);
  text-align: center;
  color: var(--muted);
  line-height: 1.35;
}

/* ── Élő leirat: alulra igazítva, felfelé gördül, a teteje elhalványul; visszagörgethető ── */

/* A leirat és a két sarok-vezérlő („végére” balra, félduplex jobbra) közös kerete — a vezérlők
   ehhez képest állnak, saját sort nem foglalnak (0.5.4: a leirat a képernyő aljáig ér). */
.transcript-wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.transcript {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* 0.5.3: GÖRGETHETŐ (a user kérése: a munkamenet eleje is visszanézhető). 🔴 NEM
     `justify-content: flex-end` — azzal a kilógó (régi) rész felül elérhetetlen, nem görgethető;
     az alulra igazítást az első gyerek `margin-top: auto`-ja adja. */
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
  text-align: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4.5em);
  mask-image: linear-gradient(to bottom, transparent 0, #000 4.5em);
}
.transcript::-webkit-scrollbar { display: none; }
/* Visszagörgetve olvasáskor nincs halványítás — a régi sorok is teljesen olvashatók. */
.transcript.browsing { -webkit-mask-image: none; mask-image: none; }
.transcript-finals { margin-top: auto; will-change: transform; }

/* „A végére” gomb (0.5.3): csak visszagörgetve látszik; a végére visz, és újra követ. A bal alsó
   sarokban (0.5.3-ban a kapcsoló-sor fölött — a kapcsoló négyzetét fedte volna; 0.5.4-től a kapcsoló
   a jobb sarokban van, így ez a képernyő legalsó bal sarka). */
.to-end {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(36, 40, 59, 0.92);
  color: var(--pastel-cyan);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  z-index: 5;
}
.to-end[hidden] { display: none; }
.transcript-final {
  margin: 0 0 5px;
  font-size: var(--text-size);
  line-height: var(--text-line);
  color: var(--fg);
}
.transcript-reply {
  margin: 0 0 6px;
  font-size: var(--text-size);
  line-height: var(--text-line);
  color: var(--c-speaking);
}
.transcript-speaker {
  font-weight: 700;
}
.transcript-partial {
  margin: 0;
  min-height: 1.25em;
  font-size: var(--text-size);
  line-height: var(--text-line);
  font-style: italic;
  color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
  .circle, .circle-ring { animation: none !important; transition: none; }
}

/* ── Félduplex kapcsoló: „1/2” a jobb alsó sarokban (0.5.4, a user kérése) ── */

.toggle {
  position: absolute;
  right: 0;
  bottom: 4px;
  height: 44px;
  padding: 0 14px 0 11px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(36, 40, 59, 0.92);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 5;
}
/* 🔴 A `display: flex` felülírja a `hidden` attribútumot (0.3.0 óta látszott asszisztens módban is,
   ahol hatástalan) — kifejezetten el kell rejteni, mint a `.to-end`-et. */
.toggle[hidden] { display: none; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-box {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
}
.toggle input:checked + .toggle-box { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle-box::after { content: "✓"; color: var(--bg-deep); font-size: 15px; font-weight: 700; }
.toggle input:focus-visible + .toggle-box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Gombok ─────────────────────────────────────────────────────────────── */

.btn {
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 17px;
  min-height: 44px;
  cursor: pointer;
}
.btn-small { padding: 8px 12px; font-size: 14px; min-height: 36px; }
.btn-danger { border-color: rgba(247, 118, 142, 0.45); color: var(--pastel-red); }

/* ── Token-ablak ────────────────────────────────────────────────────────── */

.dialog {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  color: var(--fg);
  width: min(92vw, 420px);
  padding: 20px;
}
.dialog::backdrop { background: rgba(22, 22, 30, 0.8); }
.dialog h2 { margin: 0 0 8px; font-size: 22px; }
.dialog-hint { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.35; }
.dialog input {
  width: 100%;
  font-size: 18px; /* 16 px alatt az iOS ráközelít a mezőre */
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  color: var(--fg);
  user-select: text;
  -webkit-user-select: text;
}
.dialog-error { color: var(--pastel-red); margin: 10px 0 0; font-size: 15px; }
.dialog-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

/* ── Diagnosztikai panel ─────────────────────────────────────────────────── */

.debug {
  position: fixed;
  inset: auto 0 0 0;
  max-height: 62dvh;
  overflow: auto;
  background: rgba(22, 22, 30, 0.97);
  border-top: 1px solid var(--line);
  padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  font-size: 12px;
  user-select: text;
  -webkit-user-select: text;
}
.debug-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.debug-build { color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.debug-stats, .debug-log {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text);
}
.debug-log { margin-top: 8px; color: var(--text-muted); }
.debug-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }