/* Emglare // Ella — čistě černá kvůli vlně Elly (oranžovobílé světlo na černé). Písmo a oranžová jako ostatní aplikace Emglare. */
@font-face { font-family: 'Gotham'; src: url('fonts/Gotham-Book.otf') format('opentype'); font-weight: 300 450; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('fonts/Gotham-Medium.otf') format('opentype'); font-weight: 500 550; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('fonts/Gotham-Bold.otf') format('opentype'); font-weight: 600 800; font-style: normal; font-display: swap; }

:root {
  --orange: #f18c15;
  --orange-dark: #db7713;
  --bg: #000000;
  --side: #0b0c0f;
  --surface: #14161a;
  --surface-2: #1d2026;
  --line: #24272e;
  --ink: #eef0f3;
  --ink-2: #b9bec7;
  --muted: #8a8f96;
  --user: #241c15;
  --user-line: #4a3624;
  --danger: #ff6b5e;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 'Gotham', Poppins, -apple-system, system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* načítání */
.boot { position: fixed; inset: 0; display: grid; place-items: center; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--orange); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* rozvržení */
.app { display: grid; grid-template-columns: 272px 1fr; height: 100dvh; }
.app[hidden] { display: none; }
.side { background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.side-head { padding: 16px; }
.btn-new {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; text-align: left; font-weight: 500;
}
.btn-new:hover { border-color: var(--orange); }
.convs { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.conv {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 10px; border-radius: 9px; border: 0; background: none;
  color: var(--ink-2); cursor: pointer; text-align: left; font-size: 14px;
}
.conv span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv:hover { background: var(--surface); color: var(--ink); }
.conv[aria-current="true"] { background: var(--surface-2); color: var(--ink); }
.conv .del { opacity: 0; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; font-size: 16px; line-height: 1; }
.conv:hover .del, .conv:focus-within .del { opacity: 1; }
.conv .del:hover { color: var(--danger); background: var(--bg); }
.convs .empty { color: var(--muted); font-size: 13px; padding: 8px 10px; }
/* paměť Elly (mozek) */
.memory { border-top: 1px solid var(--line); padding: 10px 16px; font-size: 13px; max-height: 42vh; overflow-y: auto; }
.memory summary { cursor: pointer; color: var(--ink-2); font-weight: 500; list-style: none; }
.memory summary::-webkit-details-marker { display: none; }
.memory summary::before { content: '▸ '; color: var(--muted); }
.memory[open] summary::before { content: '▾ '; }
.mem-count { color: var(--muted); font-weight: 400; }
.mem-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mem-list li { display: flex; gap: 6px; align-items: flex-start; color: var(--ink-2); background: var(--surface); border-radius: 8px; padding: 6px 8px; }
.mem-list li span { flex: 1; overflow-wrap: anywhere; }
.mem-list li button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 15px; line-height: 1.2; }
.mem-list li button:hover { color: var(--danger); }
.mem-add { display: flex; gap: 6px; }
.mem-add input { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.mem-add input:focus { outline: none; border-color: var(--orange); }
.mem-add button { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; cursor: pointer; padding: 0 10px; }
.mem-wiki { color: var(--muted); margin: 8px 0 0; font-size: 12px; }
/* zdroje odpovědi z mozku */
.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sources span { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.msg.note { align-self: center; font-size: 13px; color: var(--ink-2); background: none; border: 1px dashed var(--line); }

.side-foot { border-top: 1px solid var(--line); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.me { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 4px; text-decoration: none; }
.link:hover { color: var(--orange); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-height: 56px; }
.title { flex: 1; }
.icon-btn { border: 0; background: none; padding: 7px; border-radius: 9px; cursor: pointer; color: var(--ink-2); line-height: 0; }
.icon-btn:hover { color: var(--ink); background: var(--surface); }
#menu { display: none; }
.provider {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8f96' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 28px 6px 10px; max-width: 46vw;
}
.provider:hover { border-color: var(--orange); color: var(--ink); }
.provider[hidden] { display: none; }
.voice-toggle[aria-pressed="false"] { color: var(--muted); }
.voice-toggle[aria-pressed="false"] .waves { opacity: 0; }
.name { font-weight: 600; }
.status { font-size: 12px; color: var(--muted); }

/* vlna: velká na začátku rozhovoru, nad zprávami se zmenší na pruh */
.stage { flex: none; display: flex; flex-direction: column; align-items: center; transition: height .45s ease; height: min(46vh, 420px); }
.main.has-msgs .stage { height: 132px; }
.wave-btn { flex: 1; width: 100%; max-width: 980px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 18px; min-height: 0; }
.wave-btn canvas { display: block; width: 100%; height: 100%; }
.caption { min-height: 1.5em; margin: 2px 16px 6px; color: var(--ink-2); text-align: center; font-size: 15px; max-width: 760px; }
.caption.interim { color: var(--muted); font-style: italic; }

/* rozhovor */
.thread { flex: 1; overflow-y: auto; padding: 8px 16px 16px; min-height: 0; }
.hello { max-width: 560px; margin: 0 auto; text-align: center; }
.hello[hidden] { display: none; }
.hello h1 { font-size: 26px; font-weight: 600; margin: 4px 0 8px; }
.hello p { color: var(--ink-2); margin: 0 0 8px; }
.notice { margin-top: 16px !important; padding: 10px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; }
.msgs { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 88%; padding: 11px 15px; border-radius: var(--radius); overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--user); border: 1px solid var(--user-line); border-bottom-right-radius: 5px; white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg.error { align-self: flex-start; background: none; border: 1px dashed var(--danger); color: var(--danger); font-size: 14px; }
.msg p { margin: 0 0 8px; }
.msg p:last-child, .msg ul:last-child, .msg ol:last-child, .msg pre:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 0 0 8px; padding-left: 22px; }
.msg code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); padding: 1px 5px; border-radius: 5px; }
.msg pre { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; overflow-x: auto; margin: 0 0 8px; }
.msg pre code { background: none; padding: 0; }
.msg a { color: var(--orange); }
.msg.streaming::after { content: '▍'; color: var(--orange); animation: blink 1s steps(2) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }

/* mikrofon (hlavní) + psaní */
.composer {
  display: flex; align-items: flex-end; gap: 10px; max-width: 792px; width: 100%; margin: 0 auto;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
}
.composer textarea {
  flex: 1; resize: none; max-height: 200px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; line-height: 1.45; min-height: 48px;
}
.composer textarea:focus { outline: none; border-color: var(--orange); }
.mic {
  flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--orange); color: #17191c; box-shadow: 0 0 0 0 rgba(241, 140, 21, .5); transition: box-shadow .2s, background .2s;
}
.mic:hover { background: var(--orange-dark); }
.mic[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 6px rgba(241, 140, 21, .35); }
.mic[hidden] { display: none; }
.send, .stop {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2); color: var(--ink);
}
.send:hover { border-color: var(--orange); color: var(--orange); }
.send:disabled { opacity: .35; cursor: default; border-color: var(--line); color: var(--ink); }
.send[hidden], .stop[hidden] { display: none; }

/* stránka serveru (chyba přihlášení) */
body.plain { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; max-width: 440px; }
.card h1 { font-size: 20px; margin: 0 0 10px; }
.card p { color: var(--ink-2); }
.btn { display: inline-block; padding: 10px 16px; border-radius: 10px; background: var(--orange); color: #17191c; text-decoration: none; font-weight: 500; }

/* telefon: rozhovory jako vysouvací panel */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 10; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .6); }
  #menu { display: block; }
  .stage { height: min(42vh, 340px); }
  .main.has-msgs .stage { height: 96px; }
  .msg { max-width: 94%; }
}
@media (prefers-reduced-motion: reduce) { .side, .stage { transition: none; } .msg.streaming::after { animation: none; } }