/* Coburg — Chat (Kocka 2). Rozloženie, písma a farby podľa aplikácie Coburg na Macu:
   bočný panel 246 px (--raised), obsah 780 px, odpovede Source Serif 4 17/24 px, vaše správy Inter 15,5 px v sivej bubline,
   okno na písanie s rohmi 15 px, tmavé okrúhle tlačidlo Odoslať. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --raised: #fbfbf9;
  --inset: #f1f1ec;
  --line: #e7e7e0;
  --crds-text-primary: #11110E;
  --crds-border-soft: #E4E1DA;
  --orange: #FF650B;
  --font-user: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-reading: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --content-width: 780px;
  --shell-border: rgba(55, 55, 50, .22);
  --shell-shadow: 0 14px 36px rgba(30, 30, 25, .045), 0 3px 10px rgba(30, 30, 25, .025);
  --shadow: 0 1px 2px rgba(20, 20, 15, .05), 0 10px 30px -14px rgba(20, 20, 15, .18);
}

.app { display: flex; height: 100vh; height: 100dvh; background: var(--workflow-canvas); color: var(--ink); font-family: var(--sans); }

/* --- rozhovor (Kocka 5a: podľa aplikácie pre Mac — audit/kocka-5a/SPEC-MAC-CHAT.md) -------------------------------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
/* Posuvná plocha pod oknom na písanie: dole voľné miesto (--safe = výška okna + 10 px) a jemné miznutie textu. */
.thread {
  flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; scrollbar-gutter: stable; background: var(--raised);
  padding-bottom: var(--safe, 0px); scroll-padding-bottom: var(--safe, 0px); box-sizing: border-box;
  --fade-gap: var(--safe, 0px);
  /* ako Claude (Owner 5.10.2026): hore text plynulo mizne pod lištou (40 px, kosínus); dole podľa Claudovho obrázka (Owner 5.10.2026):
     32 px nad hranou poľa na písanie text rýchlo bledne, na hrane ostane ~6 % a za ňou do 12 px úplne zmizne. Hrana poľa
     (.cbox) je 24 px pod 100 % − --safe (--safe = vzdialenosť k #composer + 10, #composer má hore 14 px priehľadný okraj). */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.040) 0.0px, rgba(0,0,0,0.077) 5.0px, rgba(0,0,0,0.181) 10.0px, rgba(0,0,0,0.336) 15.0px, rgba(0,0,0,0.520) 20.0px, rgba(0,0,0,0.704) 25.0px, rgba(0,0,0,0.859) 30.0px, rgba(0,0,0,0.963) 35.0px, rgba(0,0,0,1.000) 40.0px, rgba(0,0,0,1.000) calc(100% - var(--fade-gap) - 8px), rgba(0,0,0,0.850) calc(100% - var(--fade-gap) - 4px), rgba(0,0,0,0.707) calc(100% - var(--fade-gap) + 0px), rgba(0,0,0,0.570) calc(100% - var(--fade-gap) + 4px), rgba(0,0,0,0.442) calc(100% - var(--fade-gap) + 8px), rgba(0,0,0,0.323) calc(100% - var(--fade-gap) + 12px), rgba(0,0,0,0.215) calc(100% - var(--fade-gap) + 16px), rgba(0,0,0,0.123) calc(100% - var(--fade-gap) + 20px), rgba(0,0,0,0.060) calc(100% - var(--fade-gap) + 24px), rgba(0,0,0,0.000) calc(100% - var(--fade-gap) + 36px), rgba(0,0,0,0.000) 100%), linear-gradient(#000, #000);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.040) 0.0px, rgba(0,0,0,0.077) 5.0px, rgba(0,0,0,0.181) 10.0px, rgba(0,0,0,0.336) 15.0px, rgba(0,0,0,0.520) 20.0px, rgba(0,0,0,0.704) 25.0px, rgba(0,0,0,0.859) 30.0px, rgba(0,0,0,0.963) 35.0px, rgba(0,0,0,1.000) 40.0px, rgba(0,0,0,1.000) calc(100% - var(--fade-gap) - 8px), rgba(0,0,0,0.850) calc(100% - var(--fade-gap) - 4px), rgba(0,0,0,0.707) calc(100% - var(--fade-gap) + 0px), rgba(0,0,0,0.570) calc(100% - var(--fade-gap) + 4px), rgba(0,0,0,0.442) calc(100% - var(--fade-gap) + 8px), rgba(0,0,0,0.323) calc(100% - var(--fade-gap) + 12px), rgba(0,0,0,0.215) calc(100% - var(--fade-gap) + 16px), rgba(0,0,0,0.123) calc(100% - var(--fade-gap) + 20px), rgba(0,0,0,0.060) calc(100% - var(--fade-gap) + 24px), rgba(0,0,0,0.000) calc(100% - var(--fade-gap) + 36px), rgba(0,0,0,0.000) 100%), linear-gradient(#000, #000);
}
/* posuvník vpravo bez blednutia (Owner 7.10.2026): miznutie len nad obsahom, pás posuvníka (16 px) má vlastnú plnú vrstvu */
@media (min-width: 761px) {
  .thread {
    -webkit-mask-size: calc(100% - 16px) 100%, 16px 100%; mask-size: calc(100% - 16px) 100%, 16px 100%;
    -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}
/* hore 32 px (prvý riadok mimo miznutia), dole +24 px — posledný riadok odpovede ostane celý nad miznutím (Owner 5.10.2026) */
.thread-inner { max-width: var(--content-width); margin: 0 auto; padding: 32px 26px 38px; box-sizing: border-box; }
.conv-tail { flex: none; pointer-events: none; }
.main:has(.composer-empty) .thread { display: none; }
.msg-row { width: 100%; display: flex; flex-direction: column; margin-bottom: 24px; }
.msg-row.me { align-items: flex-end; }

/* vaša správa: karta vpravo, dlhá skrátená na 9 riadkov */
/* bublina otázky (Owner 5.10.2026, ako Claude): najviac 85 % šírky vlákna (Claude zmerané ~85 %, predtým pevne 480 px
   ≈ 66 %), krátky text ju zúži na svoju šírku; dva riadky s osamoteným koncom vyrovná app.js (fitUserBubble) */
.ubub { width: auto; max-width: 85%; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.user-card {
  width: auto; max-width: 100%; box-sizing: border-box; background: #EDECEA; border: 1px solid var(--line2); border-radius: 12px; padding: 11px 15px;
  font-family: var(--font-user); font-size: 14.5px; line-height: 1.6; text-wrap: pretty; overflow-wrap: anywhere; word-break: break-word;
  color: var(--ink);
}
.user-card[hidden] { display: none; } /* prílohy bez textu (Owner 12.10.2026): len fotky, bez prázdnej bubliny */
.user-preview { position: relative; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.user-preview.clamped {
  max-height: calc(1.6em * 9); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.7em), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.7em), transparent 100%);
}
.user-show-more {
  display: inline-block; margin: 2px 0 0 -8px; padding: 3px 8px; border: none; border-radius: 6px; background: none; color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.6; text-align: left; cursor: pointer;
}
.user-show-more:hover { background: #D8D6D2; }
/* odkazy z otázky, ktoré prečítal Coburg (Owner 5.10.2026) — tichá sivá kartička pod otázkou */
.ulink-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; max-width: 100%; }
.ulink { font-size: 12px; line-height: 16px; color: var(--item); background: var(--inset); border-radius: 8px; padding: 3px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ulink-failed { color: var(--sec-head); }
/* úprava odoslanej otázky (Owner 7.10.2026, ako Claude): pole cez celú šírku v tvare a písme bubliny, farbou ako pole na písanie (var(--surface)), s oranžovým lemom, pod
   ním dve guličky so symbolmi — sivá s krížikom (Zrušiť, bez zmeny pod kurzorom) a čierna so šípkou hore (Odoslať, ako v poli
   na písanie; pod kurzorom len šípka sivšia) */
.ubub.editing { width: 100%; max-width: 100%; }
.user-edit {
  display: block; width: 100%; box-sizing: border-box; resize: none; overflow-y: auto; background: var(--surface);
  /* lem bledomodrý ako prepínače (Owner 15.10.2026), nie oranžový */
  border: 1.5px solid #83A9E4; border-radius: 12px; padding: 10.5px 14.5px; font-family: var(--font-user); font-size: 14.5px;
  line-height: 1.6; color: #6E6A63;  /* farba textu ako v poli na písanie (.cta) */
}
.user-edit:focus { outline: none; }
.user-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.user-edit-btn {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; padding: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.user-edit-cancel { background: #ECEBE9; color: #8c8c8c; border: 1px solid #d6d6d6; }
.user-edit-cancel .ic { width: 16px; height: 16px; }
.user-edit-send { background: #2e2e2e; color: #fdfdfd; border: none; transition: color .12s; }
.user-edit-send .ic { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .user-edit-send:hover:not(:disabled) { color: #B8B6B0; } }
.user-edit-send:disabled { background: #ECEBE9; color: #8c8c8c; border: 1px solid #d6d6d6; cursor: default; }
.user-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; width: 100%; min-width: 0; white-space: nowrap; margin-top: 2px; }
.msg-time { flex: 1 1 auto; text-align: right; font-size: 10px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.iconbtn {
  width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 0; border: 1px solid transparent; background: none; color: #5f6268; cursor: pointer; position: relative;
}
.iconbtn:hover { background: rgba(27, 27, 23, .08); }
.iconbtn:disabled { cursor: default; }
.iconbtn .ic { width: 18px; height: 18px; }
.iconbtn .ic-check { color: #000; width: 14px; height: 14px; }
/* Kocka 6: odpoveď sa práve číta — reproduktor oranžový (oranžová = zapnuté, Owner 3.10.2026) */
.iconbtn.ai-read.reading { color: var(--orange); }
/* čaká sa na prvý zvuk: namiesto reproduktora koliesko zariadenia (veľkosť ikony) */
.iconbtn.ai-read.loading { color: #5f6268; }
.iconbtn.ai-read.loading .ic { display: none; }
.iconbtn.ai-read .spin { transform: scale(.375); margin: -15px; }  /* 48 px → 18 px v tlačidle reproduktora */

/* odpoveď: bez bubliny, Source Serif */
.msg-row.ai.streaming::before {
  content: attr(data-tag); align-self: flex-start; margin-bottom: 6px; font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 9.5px; letter-spacing: .02em; font-weight: 600; padding: 3px 7px; border-radius: 5px; color: #17783F; background: rgba(34, 160, 90, .13);
}
/* farba štítku podľa typického času odpovede, text v jazyku rozhrania z data-tag (Owner 11.10.2026, app.js answerSpeed): do 12 s bledomodrý, 12–32 s
   zelený (aj model bez meraní), nad 32 s oranžový (hranice Owner 19.10.2026). Pulzujúca gulička ostáva vždy oranžová — farba Coburgu. */
.msg-row.ai.streaming:not([data-tag])::before { content: "ANSWERING…"; }  /* bez textu z app.js (staršia stránka) */
.msg-row.ai.streaming[data-speed="quick"]::before { color: #1A63B8; background: rgba(47, 128, 230, .13); }
.msg-row.ai.streaming[data-speed="long"]::before { color: #FF650B; background: rgba(255, 101, 11, .12); }
.ai-txt { font-family: var(--font-reading); font-size: 17px; line-height: 24px; font-weight: 400; color: #11110E; text-wrap: pretty; overflow-wrap: anywhere; max-width: 100%; }
.ai-txt > :first-child { margin-top: 0; }
/* Obrázok odpovede (Kocka 2b — ChatGPT Image): celá šírka stĺpca, najviac 512 px, zaoblený ako karty */
.ai-picture { display: block; width: 100%; max-width: 512px; border-radius: 14px; overflow: hidden; background: #F1F0EC; }
.ai-picture img { display: block; width: 100%; height: auto; }
/* kým sa obrázok načítava: prázdna plocha na jeho mieste a v strede koliesko podľa zariadenia (Owner 30.9.2026) */
.ai-picture { position: relative; }
.ai-picture-loading, .ai-picture-failed { aspect-ratio: 3 / 2; }
.ai-picture-loading img, .ai-picture-failed img { display: none; }
/* Video odpovede (režim Video, Owner 19.10.2026): ako obrázok, 16:9 aj počas načítania, čierne pozadie pod prehrávačom */
.ai-video { max-width: 640px; aspect-ratio: 16 / 9; background: #000; }
.ai-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ai-video.ai-picture-loading, .ai-video.ai-picture-failed { aspect-ratio: 16 / 9; background: #F1F0EC; }
.ai-video.ai-picture-loading video, .ai-video.ai-picture-failed video { display: none; }
.ai-picture-wait {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px;
  text-align: center; font-family: var(--sans); font-size: 14px; color: var(--dim);
}
.ai-txt > :last-child { margin-bottom: 0; }
.ai-txt p { margin: 0 0 12px; }
.ai-txt h1 { margin: 28px 0 10px; font-size: 28px; line-height: 34px; font-weight: 600; }
.ai-txt h2 { margin: 22px 0 8px; font-size: 21px; line-height: 28px; font-weight: 600; }
.ai-txt h3, .ai-txt h4 { margin: 18px 0 6px; font-size: 18px; line-height: 25px; font-weight: 600; }
.ai-txt ul, .ai-txt ol { margin: 6px 0 12px; padding-left: 24px; }
.ai-txt li { margin-bottom: 4px; }
.ai-txt li > ul, .ai-txt li > ol, .ai-txt li > p { margin: 4px 0 0; }
.ai-txt strong { font-weight: 600; color: #11110E; }
.ai-txt em { font-style: italic; font-weight: 400; }
.ai-txt blockquote { border-left: 3px solid var(--line2); padding-left: 14px; margin: 12px 0; color: var(--dim); }
.ai-txt code {
  font-family: var(--font-mono); font-size: .9em; line-height: inherit; color: var(--ink); background: #ECEBE8; padding: .1em .32em; border-radius: 3px;
  font-variant-ligatures: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; overflow-wrap: break-word; word-break: normal;
}
.ai-txt code::selection { background: #E1DFDB; }
.codewrap { position: relative; margin: 10px 0; }
.ai-txt pre {
  font-family: var(--font-mono); font-size: 14px; line-height: 22px; padding: 16px; border: 1px solid var(--line); border-radius: 4px;
  margin: 0; overflow-x: auto; white-space: pre; background: var(--surface);
}
.ai-txt pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; line-height: inherit; white-space: inherit; }
.tok-key { color: #FF650B; }
.tok-fn { color: #7B57D8; }
.tok-str { color: #4078D0; }
.tok-com { color: var(--faint); }
.codecopy { position: absolute; top: 8px; right: 8px; background: var(--surface); }
.codecopy:hover { color: var(--ink); background: linear-gradient(rgba(27, 27, 23, .08), rgba(27, 27, 23, .08)), var(--surface); }
.ai-txt hr { border: none; border-top: 1px solid #E4E1DA; margin: 24px 0; }
.ai-txt a { color: #11110E; text-decoration: underline; text-decoration-color: var(--line2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ai-txt a:hover { color: #FF650B; text-decoration-color: #FF650B; }
.ai-txt a:focus-visible { outline: 2px solid #E55700; outline-offset: 2px; border-radius: 3px; }
/* Zdroje pod odpoveďou (Kocka 2e — Perplexity) */
/* pás Google Search pri Gemini (Owner 4.10.2026): cudzie HTML uzavreté v páse — nič z neho nesiahne mimo (Astra K3) */
.ai-gsearch { display: block !important; position: relative !important; margin-top: 14px; max-width: 100%; max-height: 160px;
  overflow: hidden !important; contain: layout paint style !important; z-index: auto !important; transform: none !important; }
.ai-sources { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--ui); }
.ai-sources-head { font-size: 12px; font-weight: 500; color: var(--sec-head); margin-bottom: 6px; }
.ai-sources-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ai-sources-list li { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.45; }
.ai-src-n { flex: none; min-width: 18px; color: var(--sec-head); font-variant-numeric: tabular-nums; }
.ai-txt .ai-src-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: #1B1A18; }
.ai-txt .ai-src-title:hover { color: #FF650B; }
.ai-src-host { flex: none; color: var(--faint); font-size: 12px; }
.ai-status-icon { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; }
/* vzorce LaTeX cez KaTeX (Owner 6.10.2026): v riadku ako text, samostatné v strede; široký vzorec sa posúva, nepretečie */
.math-display { display: block; margin: 10px 0; text-align: center; overflow-x: auto; overflow-y: hidden; }
.math-display .katex-display { margin: 0; }
.math .katex { font-size: 1.08em; }
/* diagramy Mermaid (Owner 6.10.2026): obrázok na bielom podklade, kód pod ním na požiadanie */
.codewrap.has-diagram { background: #fff; }
.codewrap.has-diagram:not(.diagram-code-open) > pre, .codewrap.has-diagram:not(.diagram-code-open) > .codecopy { display: none; }
.diagram { padding: 14px 14px 8px; text-align: center; overflow-x: auto; }
.diagram-img { max-width: 100%; height: auto; }
.codewrap:not(.has-diagram) > .diagram { display: none; }  /* kým sa obrázok nenačíta, je vidno kód */
.diagram-code-toggle { display: block; margin: 8px auto 0; border: none; background: none; font: inherit; font-size: 13px;
  color: #6B6A66; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.diagram-code-toggle:hover { color: var(--ink); }
.mermaid-measure { position: absolute; left: -10000px; top: 0; width: 1200px; visibility: hidden;
  font-family: Arial, Helvetica, sans-serif; font-size: 16px; }

/* tabuľky: posúvanie s tieňmi na okrajoch, čísla vpravo */
.msg-table-scroll {
  max-width: 100%; overflow-x: auto; margin: 24px 0;
  background-image: linear-gradient(to right, var(--raised) 40%, transparent), linear-gradient(to left, var(--raised) 40%, transparent),
    radial-gradient(farthest-side at 0 50%, rgba(15, 15, 12, .13), transparent), radial-gradient(farthest-side at 100% 50%, rgba(15, 15, 12, .13), transparent);
  background-position: left center, right center, left center, right center; background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 13px 100%, 13px 100%; background-attachment: local, local, scroll, scroll;
}
.msg-table { min-width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13.5px; line-height: 1.45; font-weight: 400; }
.msg-table th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint);
  padding: 0 20px 7px 0; white-space: nowrap; border-bottom: 1px solid var(--line2);
}
.msg-table td { padding: 9px 20px 9px 0; color: var(--dim); vertical-align: top; text-wrap: pretty; border-bottom: 1px solid var(--inset); overflow-wrap: break-word; }
.msg-table tr:last-child td { border-bottom: 0; }
.msg-table th:last-child, .msg-table td:last-child { padding-right: 0; }
.msg-table td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.msg-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.msg-table .mid { text-align: center; }
.msg-table col.wide { min-width: 24ch; }

/* riadok čakania — pulzujúca guľôčka aj guľôčka pod odpoveďou vo farbe zvolenej v Nastaveniach (--ball, Owner 20.10.2026) */
.ai-wait-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 8px; }
.ai-wait { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; line-height: 1; }
.ai-wait-dot { width: 13px; height: 13px; min-width: 13px; border-radius: 50%; background: var(--ball, #FF650B); display: inline-block; animation: aiWaitDot3 1.3s cubic-bezier(.45, 0, .55, 1) infinite; }
.ai-wait-time { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-wait-time.is-waving {
  background-image: linear-gradient(90deg, var(--ink) 0%, var(--ink) 42%, var(--raised) 50%, var(--ink) 58%, var(--ink) 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: aiWaitWave 1.25s linear infinite;
}
@keyframes aiWaitDot3 {
  0% { transform: scale(.88); opacity: .45; filter: blur(.4px); }
  38% { transform: scale(1.06); opacity: 1; filter: blur(0); }
  100% { transform: scale(.88); opacity: .45; filter: blur(.4px); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-wait-dot { animation: none; opacity: .85; }
  .ai-wait-time.is-waving { animation: none; background-image: none; -webkit-text-fill-color: currentColor; color: var(--faint); }
}

/* stav a pätička odpovede */
.ai-note { font-family: var(--sans); font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 6px; letter-spacing: .01em; }
.ai-note .ic { width: 14px; height: 14px; }
.ai-note.is-warn { color: #a9761b; }
.ai-note.is-error { color: #FF650B; }
.ai-note.is-quiet { color: var(--faint); }
.ai-foot { display: flex; align-items: center; gap: 4px; margin-top: 10px; min-width: 50%; width: max-content; max-width: 100%; font-family: var(--sans); }
.ai-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--ball, #FF650B); display: inline-block; flex: none; margin-right: 4px; }
.ai-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: 6px; padding: 2px 9px; border-radius: 7px;
  background: #ECEBE9; color: #1B1A18; font-size: 12px; font-weight: 500; line-height: 1.4; cursor: default;
}
.ai-chip-logo { width: 14px; height: 14px; object-fit: contain; }
/* mobil a tablet nemajú kurzor: model a čas pod odpoveďou sú vidieť hneď (Owner 30.9.2026) */

/* --- okno na písanie --------------------------------------------------------------------------- */
/* Okno na písanie leží nad spodkom rozhovoru (ako v aplikácii pre Mac); prázdny rozhovor: v strede, nad ním pozdrav. */
.composer {
  position: absolute; z-index: 20; bottom: 0; left: 50%; transform: translateX(-50%); box-sizing: border-box;
  width: calc(min(calc(100% - 24px), calc(var(--content-width) + 32px)) - 10px); padding: 14px 26px 5px;
}
/* gulička so šípkou nadol nad poľom na písanie (Owner 5.10.2026, ako Claude): ukáže sa, keď je koniec vlákna mimo
   obrazovky; ťuknutie posunie vlákno úplne na koniec */
.to-end {
  position: absolute; top: -40px; left: 50%; width: 36px; height: 36px; margin-left: -18px; padding: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #e3e2de; background: #fff;
  color: #3d3d3a; box-shadow: 0 2px 8px rgba(20, 20, 15, .08); cursor: pointer; opacity: 0; pointer-events: none;
  transform: translateY(6px); transition: opacity .15s, transform .15s; -webkit-tap-highlight-color: transparent;
}
.to-end .ic { width: 18px; height: 18px; }
.to-end.show { opacity: 1; pointer-events: auto; transform: none; }
@media (hover: hover) and (pointer: fine) { .to-end:hover { background: #F4F3F1; } }
.composer-empty .to-end { display: none; }
.composer.composer-empty { top: 33%; bottom: auto; transform: translate(-50%, -50%); padding-top: 30px; }
/* guľôčka nad textom a oboje v strede nad poľom na písanie — aj na počítači ako v mobile (Owner 4.10.2026) */
.empty-head { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 9px; margin-bottom: 45px; }
.composer-empty .empty-head { display: flex; }
.empty-head.head-clash, .empty-head.head-off { visibility: hidden; }  /* pole na písanie narástlo až k pozdravu (Owner 19.10.2026) */
/* text-wrap: balance — vyvážené riadky, bez „vdovy“ (osamoteného slova na poslednom riadku), vo všetkých jazykoch
   (Owner 4.10.2026); staršie prehliadače zalomia ako doteraz */
.empty-note { font-family: "Lora", Georgia, serif; font-size: 38px; line-height: 1.2; color: var(--ink); text-align: center; text-wrap: balance; }
.empty-dot { flex: none; width: 40px; height: 40px; object-fit: contain; }
/* gulička nad Composerom pulzuje ako na stránke Log in (Owner 7.10.2026) — tá istá animácia z app.css */
.empty-dot, .project-mark { animation: login-mark-pulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .empty-dot, .project-mark { animation: none; } }

/* oznámenia nad poľom: spoločný rámček, ktorý sa zasúva pod okno na písanie */
.notice-stack {
  border-radius: 20px 20px 0 0; overflow: hidden; border: 1px solid rgba(55, 55, 50, .22); border-bottom: none; padding-bottom: 20px;
  background: var(--raised);
}
.notice-stack:not(:has(> :not([hidden]))) { display: none; }
.notice-stack:has(> :not([hidden])) + .cbox { margin-top: -20px; }
.composer-notice {
  display: flex; align-items: center; gap: 10px; padding: 7px 16px; font-family: var(--sans); font-size: 12.5px; line-height: 1.4;
  color: var(--dim); background: var(--raised);
}
.composer-notice.load { display: grid; grid-template-columns: minmax(0, 210px) 96px 40px 1fr auto; }
.notice-text { flex: 1; min-width: 0; }
.notice-text a { color: var(--ink); }
.notice-bar { flex: none; width: 96px; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.notice-bar-fill { display: block; height: 100%; border-radius: 4px; background: #4078D0; width: 0; transition: width .3s ease, background-color .3s ease; }
.notice-bar-fill.warning { background: #4078D0; }
.notice-bar-fill.high { background: #F0B443; }
.notice-bar-fill.critical { background: #C04841; }
.notice-bar-fill.warn { background: var(--orange); }
.notice-text.notice-warn, .notice-text.notice-warn a { color: var(--orange); }  /* kredit od 92 % minutý (Owner 7.10.2026) */
.load-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--dim); white-space: nowrap; }
.notice-action {
  width: 20px; height: 20px; padding: 0; border: none; border-radius: 5px; background: none; color: var(--faint); font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.notice-action:hover { background: var(--inset); color: var(--dim); }
.notice-action .ic { width: 14px; height: 14px; }

/* okno na písanie */
.cbox {
  position: relative; width: 100%; box-sizing: border-box; background: var(--surface); border: 1px solid rgba(55, 55, 50, .22);
  border-radius: 20px; box-shadow: 0 14px 36px rgba(30, 30, 25, .045), 0 3px 10px rgba(30, 30, 25, .025); cursor: text;  /* rohy 20 px, trochu oblejšie (Owner 5.10.2026; predtým 15) */
}
.cbox:focus-within { border-color: rgba(55, 55, 50, .28); }
/* Kocka 5h: prílohy — karty ako v aplikácii pre Mac (náhľad alebo značka typu, meno, typ a veľkosť, krížik) */
.cbox.att-drop { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 101, 11, .15); }
.att-row { display: flex; gap: 8px; padding: 10px 12px 2px; overflow-x: auto; scrollbar-width: none; }
.att-row::-webkit-scrollbar { display: none; }
.att-card {
  position: relative; flex: none; display: flex; align-items: center; gap: 10px; width: 230px; min-height: 64px;
  box-sizing: border-box; padding: 8px 30px 8px 8px; border: 1px solid var(--line); border-radius: 14px; background: #F7F6F3;
  font-family: var(--sans); text-align: left;
}
.att-pic {
  flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; overflow: hidden;
  border-radius: 10px; background: #ECEBE7; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #6E6A63;
}
.att-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-txt { min-width: 0; flex: 1; }
.att-name { font-size: 13.5px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-meta { margin-top: 3px; font-size: 12px; color: #8B877F; white-space: nowrap; }
.att-up { opacity: .72; }
.att-up .att-pic { animation: att-pulse 1.1s ease-in-out infinite alternate; }
@keyframes att-pulse { from { opacity: .55; } to { opacity: 1; } }
.att-x {
  position: absolute; top: 6px; right: 6px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  padding: 0; border: none; border-radius: 50%; background: #1C1C1E; color: #fff; cursor: pointer;
}  /* odstránenie prílohy: čierny krúžok, biely krížik — pri dokumentoch aj fotkách (Owner 3.10.2026) */
.att-x .ic { width: 12px; height: 12px; }
.att-x:hover { background: #3A3A3C; }
.att-open { cursor: pointer; }
.att-open:hover { box-shadow: 0 2px 6px rgba(40, 38, 30, .10); }
/* prílohy otázky v rozhovore: nad textom, zarovnané doprava */
.uatt-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 6px; max-width: 100%; }
.uatt-row[hidden] { display: none; }
.uatt-row .att-card { padding-right: 10px; background: var(--surface); }
/* fotka v odoslanej správe ako Claude (zmerané z iPhonu, Owner 3.10.2026): dlhšia strana vždy 200 bodov (zmenší aj
   zväčší sa), tvar najviac 3 : 2 alebo 2 : 3 — čo je širšie či vyššie, sa oreže zo stredu; rohy 12 bodov. Na výšku 3:4 →
   150 × 200, na ležato 4:3 → 200 × 150, 16:9 aj panoráma → 200 × 133, ikona 64/120/215 px → 200 × 200 (rozmer z app.js) */
.uatt-row .att-card.att-image { width: auto; height: auto; min-height: 0; padding: 0; border: none; background: none; }
.uatt-row .att-card.att-image .att-pic { width: auto; height: auto; border-radius: 12px; background: #ECEBE7; }
.uatt-row .att-card.att-image .att-pic img {
  width: var(--fit-w, auto); height: var(--fit-h, auto); max-height: 200px; max-width: 200px;  /* aj malý obrázok → 200 */
  object-fit: cover; object-position: center;  /* tvar nad 3 : 2 (panoráma) sa oreže zo stredu, ako Claude */
}
.uatt-row .att-card.att-image .att-txt { display: none; }
/* viac fotiek ako Claude (zmerané z iPhonu, Owner 3.10.2026): mozaika široká 288 bodov, po dvoch štvorcoch 141 × 141 vedľa
   seba, medzery 6; pri nepárnom počte je prvá fotka cez celú šírku (288 × 141); všetky orezané zo stredu */
.uatt-grid { display: grid; grid-template-columns: repeat(2, 141px); gap: 6px; width: 288px; }
.uatt-grid.odd > :first-child { grid-column: 1 / -1; }
.uatt-row .uatt-grid .att-card.att-image .att-pic { width: 141px; height: 141px; }
.uatt-row .uatt-grid.odd > .att-card.att-image:first-child .att-pic { width: 288px; }
.uatt-row .uatt-grid .att-card.att-image .att-pic img { width: 100%; height: 100%; max-width: none; max-height: none; }
.uatt-row .uatt-grid .att-card.att-image .att-pic { position: relative; }
/* 5 a viac fotiek: štvrtá dlaždica stmavená s bielym „+N“ (zvyšné fotky), ako Claude */
.uatt-more {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45);
  color: #fff; font-family: var(--ui); font-size: 22px; font-weight: 600; letter-spacing: .01em; pointer-events: none;
}

/* dokumenty v rozhovore ako Claude (Owner 3.10.2026, variant B): dlaždica 141 × 141 — sivý rám, biely list s veľkým
   štítkom druhu (PDF: náhľad prvej strany), dole biely pás s názvom a veľkosťou; vždy vlastný riadok zarovnaný doprava */
.udoc-grid { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; width: 288px; max-width: 100%; }
.udoc {
  position: relative; width: 141px; height: 141px; box-sizing: border-box; padding: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 12px; background: var(--inset); overflow: hidden; cursor: pointer;
  font: inherit; text-align: left; color: var(--ink); -webkit-tap-highlight-color: transparent;
}
/* Safari a aplikácia pre Mac (systémový WebKit, Owner 17.10.2026): obsah tlačidla sa sám nenaťahoval na šírku — biely
   list bol úzky pásik so štítkom „MD“ cez okraj; Chrome a novší WebKit to robia aj bez toho */
.udoc > * { align-self: stretch; }
.udoc.udoc-off { cursor: default; }
.udoc:focus { outline: none; }
html.kbd .udoc:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.udoc-page {
  flex: 1; min-height: 0; margin: 12px 13px 0; background: #fff; border-radius: 3px 3px 0 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 .5px rgba(20, 20, 15, .08);
}
.udoc-page img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.udoc-page img[hidden], .udoc-tag[hidden] { display: none; }
.udoc-tag { font-family: var(--ui); font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--sec-head); }
.udoc-foot { flex: none; height: 40px; box-sizing: border-box; padding: 5px 10px 0; background: #fff; }
.udoc-name { font-family: var(--ui); font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.udoc-meta { font-family: var(--ui); font-size: 12px; line-height: 15px; color: var(--sec-head); white-space: nowrap; }
.udoc .uatt-more { border-radius: inherit; }
/* počítač ako Claude (Owner 6.10.2026): viac príloh v otázke = najprv riadok(y) obrázkov, potom dokumentov; zarovnané
   doprava a dole, medzery 6; obrázok vo svojom tvare (rozmer z photoFrame), dokument štvorec 120 × 120 */
.uatt-tiles { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(100%, 640px); }
.uatt-tile-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 6px; }
.uatt-tiles .udoc { width: 120px; height: 120px; }
.uatt-tiles .udoc-page { margin: 10px 11px 0; }
.uatt-row .uatt-tiles .att-card.uatt-photo .att-pic {
  position: relative; width: 160px; height: 160px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px;
  background: #FFFFFF; overflow: hidden;
}
.uatt-row .uatt-tiles .att-card.uatt-photo .att-pic img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.udoc.udoc-rest .udoc-tag, .udoc.udoc-rest .udoc-page img, .udoc.udoc-rest .udoc-foot > * { visibility: hidden; }  /* „+N“: len tvar listu, bez textu (ako Claude) */

/* prehliadač fotiek správy (ako Claude na iPhone): čierna bublina zospodu takmer po vrch, biele ovládanie */
/* pás nad bublinou celý biely ako stránka (Owner 3.10.2026): pás s hodinami farbí každý prehliadač inak — Safari podľa stránky,
   Chrome a Firefox na iPhone vlastnou bielou, ktorú stránka zmeniť nevie; sivé stmavenie by bolo len v časti pásu */
.pv { position: fixed; inset: 0; z-index: 120; background: rgba(251, 251, 249, 0); transition: background .38s ease; }
.pv.open { background: var(--raised); }
.pv-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top, 0px) + 8px); display: flex;
  flex-direction: column; overflow: hidden; background: #000; border-radius: 38px 38px 0 0; color: #fff;
  transform: translateY(100%); transition: transform .4s cubic-bezier(.32, .72, 0, 1); touch-action: pan-x;
}
.pv.open .pv-sheet { transform: none; }
.pv-sheet.dragging { transition: none; }
.pv-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 8px; }
.pv-count { flex: 1; min-width: 0; text-align: center; font-family: var(--ui); font-size: 17px; font-weight: 600; color: #fff; }
.pv.instant, .pv.instant.open { transition: none; background: var(--raised); }  /* zo Storage: biela hneď (Safari si pás inak nechá sivý) */
/* vpravo ceruzka a Zdieľať spolu v jednej tmavej pilulke, ✕ vľavo samostatne v kruhu (ako Claude) */
.pv-acts { flex: none; display: flex; align-items: center; height: 44px; padding: 0 4px; border-radius: 22px; background: rgba(255, 255, 255, .14); }
.pv-btn {
  flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none;
  border-radius: 22px; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pv-btn:disabled { opacity: .35; cursor: default; }
.pv-round { background: rgba(255, 255, 255, .14); }

/* kreslenie do fotky (ceruzka, ako Claude na iPhone — Owner 3.10.2026): hore ✕, späť/znova a ✓, dole perá a farba */
.pv-top[hidden] { display: none; }
.pv-markleft { display: flex; align-items: center; gap: 10px; }
.pv-ok { background: rgba(255, 255, 255, .9); color: #111; }
.pv-ok:disabled { background: rgba(255, 255, 255, .3); color: rgba(0, 0, 0, .55); opacity: 1; }
.pv.marking .pv-track { overflow: hidden; }
.pv-canvas { position: absolute; z-index: 2; touch-action: none; cursor: crosshair; }
/* ukladanie pokreslenej fotky: koliesko v strede fotky (biele na tmavom kruhu — vidno ho na svetlej aj tmavej fotke);
   kreslenie, nástroje aj tlačidlá hore stoja, kým sa uloží */
.pv-busy {
  position: absolute; z-index: 4; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); pointer-events: none;
}
.pv-busy .spin i, .pv-spin .spin i { background: #fff; }  /* na čiernom pozadí prehliadača biele */
.pv-busy .spin-ring circle, .pv-spin .spin-ring circle { stroke: #fff; }
.pv-busy .spin::before, .pv-spin .spin::before { border-color: rgba(255, 255, 255, .25); border-top-color: #fff; }
.pv.saving .pv-canvas, .pv.saving .pv-tools, .pv.saving .pv-markbar { pointer-events: none; }
.pv.saving .pv-tools, .pv.saving .pv-markbar { opacity: .5; transition: opacity .15s; }
.pv-tools {
  position: absolute; z-index: 3; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; height: 64px; padding: 0 10px; border-radius: 22px;
  background: rgba(236, 236, 240, .96); box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
/* variant C (Owner 3.10.2026): dlaždica s ikonou nástroja a pod ňou ukážka ťahu v aktuálnej farbe a hrúbke */
.pv-tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 52px; height: 52px;
  padding: 0; border: none; border-radius: 14px; background: none; color: #555; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pv-tool .ic { width: 20px; height: 20px; }
.pv-tool.on { background: #fff; color: #222; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.pv-sample { width: 28px; height: 4px; border-radius: 2px; background: var(--ink, #E5372E); }
.pv-tool-fine .pv-sample { height: 2px; border-radius: 1px; }
.pv-tool-marker .pv-sample { height: 9px; opacity: .55; }
.pv-tool-eraser .pv-sample { height: 6px; background: none; border: 1.5px dashed #999; box-sizing: border-box; }
.pv-color { align-self: center; width: 30px; height: 30px; margin: 0 2px 0 6px; padding: 0; border: 3px solid transparent; border-radius: 50%;
  background: linear-gradient(var(--ink, #E5372E), var(--ink, #E5372E)) padding-box,
    conic-gradient(#E5372E, #F5C518, #2EAD4B, #2F7CF6, #8E44EC, #E5372E) border-box; box-shadow: inset 0 0 0 2px #fff; cursor: pointer; }
.pv-swatches {
  position: absolute; z-index: 4; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); display: flex; gap: 10px;
  padding: 10px 12px; border-radius: 22px; background: rgba(236, 236, 240, .96); box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}
.pv-swatches[hidden] { display: none; }
.pv-swatch { width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); cursor: pointer; }
.pv-btn .ic { width: 22px; height: 22px; }
.pv-btn:focus { outline: none; }
html.kbd .pv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }  /* krúžok len pri klávesnici, nie po ťuknutí */
.pv-track { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pv-track::-webkit-scrollbar { display: none; }
.pv-slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; min-width: 0; }
.pv-slide { position: relative; }
.pv-slide img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.pv-slide img:not(.ready) { visibility: hidden; }  /* nenačítaná fotka nič neukáže (ani meno v rámčeku) — len koliesko */
.pv-spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* mobil (Owner 2.10.2026, „tip-top“): fotka = len štvorcový náhľad (ako WhatsApp/ChatGPT), dokument = kompaktná
   karta — v Composeri sa zmestia aj tri a viac; v odoslanej správe fotky v pôvodnom pomere (vyššie, ako Claude) */
@media (max-width: 760px) {
  .att-row { gap: 8px; padding: 10px 12px 0; flex-wrap: wrap; overflow-x: visible; }  /* všetky prílohy viditeľné */
  .att-card { width: calc(50% - 4px); min-height: 58px; padding: 7px 28px 7px 7px; gap: 9px; border-radius: 14px; }
  .att-pic { width: 42px; height: 42px; border-radius: 9px; }
  .att-name { font-size: 13px; }
  .att-meta { font-size: 11.5px; }
  .att-card.att-image { width: 64px; min-height: 64px; height: 64px; padding: 0; border: none; background: none; }
  .att-card.att-image .att-pic { width: 64px; height: 64px; border-radius: 14px; }
  .att-card.att-image .att-txt { display: none; }
  .att-card.att-image .att-x { top: 4px; right: 4px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }  /* biely lem — čierny krúžok vidno aj na tmavej fotke */
  .uatt-row .att-card:not(.att-image) { width: 200px; }
}
.cta {
  display: block; width: 100%; box-sizing: border-box; border: none; outline: none; resize: none; background: none;
  font-family: var(--font-user); font-size: 15.5px; line-height: 22px; color: #6E6A63; padding: 13px 18px 4px; min-height: 39px; overflow-y: hidden;
}
.cta::placeholder { color: #9B9891; font-family: "Inter", var(--sans); }
/* prílohy a text pod nimi oddelí jeden prázdny riadok (Owner 5.10.2026) — výška riadku poľa, počítač aj mobil */
.cbox.has-atts .cta { margin-top: 22px; }
.cta:disabled { cursor: not-allowed; }
.cbar { display: flex; align-items: center; gap: 6px; padding: 6px 12px 12px; min-width: 0; flex-wrap: nowrap; cursor: default; }
.attach { width: 36px; height: 36px; border-radius: 50%; }
/* „+“ na iPhone nepreblikne (Owner 2.10.2026): žiadne systémové zvýraznenie ťuknutia a sivý kruh len pri myši
   (na dotyku by „hover“ ostal visieť a pri otvorení ponuky iPhonu zablikal druhýkrát) */
.attach { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) { .attach:hover { background: #ECEBE9; } }
/* Jedna sivá pilulka s 1–3 voľbami (Owner 4.10.2026, ako na mobile): farba ako gulička so šípkou hore (.send:disabled),
   bez deliacich čiar; každá voľba sa dá kliknúť zvlášť a pod kurzorom stmavne */
.pill-split {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 36px; box-sizing: border-box; padding: 0 12px;
  border: 1px solid #d6d6d6; border-radius: 999px; background: #ECEBE9; font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: #6E6D69; white-space: nowrap; flex: none;
}
.pill-split > button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; margin: 0; border: none; background: none; color: inherit; font: inherit;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.pill-split { cursor: pointer; }  /* jedno tlačidlo — pod kurzorom stmavne celé (Owner 4.10.2026) */
@media (hover: hover) and (pointer: fine) { .pill-split:hover > button { color: var(--ink); } }
/* počítač (Owner 5.10.2026, ako Claude): pilulka modelu je len text — sivé pozadie a rámik sa ukážu až pod kurzorom
   a ostanú, kým je otvorená bublina s modelmi; mobil (bez kurzora) má pilulku ako doteraz */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .pill-split { background: transparent; border-color: transparent; transition: background-color .12s, border-color .12s; }
  .pill-split:hover, body:has(.menu.menu-models:not([hidden])) .pill-split { background: #ECEBE9; border-color: #d6d6d6; }
}
.pill-split > button[hidden] { display: none; }
/* logo poskytovateľa pred názvom modelu v pilulke (Owner 5.10.2026) — veľké ako v ponuke modelov */
.pill-logo { width: 16px; height: 16px; flex: none; object-fit: contain; }
.pill-split > .pill-level { color: inherit; }
.pill-split > button:disabled { cursor: default; opacity: .6; }
/* Kocka 6 — diktovanie: mikrofón ako tlačidlo s ikonou (ako „+“), na počítači vedľa šípky; počas diktovania oranžová
   gulička so štvorčekom (oranžová = práve zapnuté, Owner 3.10.2026), jemne pulzuje ako gulička na Log in */
.mic {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none;
  margin-left: 8px; padding: 0; border: none; background: none; color: #3d3d3a; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mic[hidden] { display: none; }
.mic .ic { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .mic:hover { background: rgba(27, 27, 23, .08); } }
.mic .icon-stop { display: none; width: 12px; height: 12px; border-radius: 3px; background: #fff; }
.cbox.dictating .mic { background: var(--orange); animation: mic-pulse 2.6s ease-in-out infinite; }
.cbox.dictating .mic .ic { display: none; }
.cbox.dictating .mic .icon-stop { display: block; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 101, 11, .35); } 50% { box-shadow: 0 0 0 7px rgba(255, 101, 11, 0); } }
@media (prefers-reduced-motion: reduce) { .cbox.dictating .mic { animation: none; } }
/* Kocka 6, krok 3 — hlasový hovor ako Claude (Owner 7.10.2026): vlnka v čiernej guličke na mieste šípky, kým nie je čo
   poslať; počas hovoru namiesto poľa na písanie panel hovoru */
.call {
  width: 36px; height: 36px; border-radius: 50%; background: #2e2e2e; color: #fdfdfd; border: none; display: flex; align-items: center;
  justify-content: center; flex: none; margin-left: 8px; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.call[hidden] { display: none; }
.call .ic { width: 20px; height: 20px; }
.cbox.can-send .call, .cbox.dictating .call { display: none; }
.cbox.can-call:not(.can-send) .send { display: none; }
.composer.calling .cbox, .composer.calling .cunder { display: none; }
/* Owner 15.10.2026 (ako starý prehrávač): stav mikrofónu, tri biele guličky ▶ ❚❚ ■ — zvolená oranžová; pod nimi biela
   pilulka Voice translator so skleneným prepínačom (zapnutý = bledomodrý, ako v Settings) */
.call-panel { display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; }
.call-panel[hidden] { display: none; }
.call-status { min-height: 20px; font-size: 15px; line-height: 20px; color: #6B6A66; text-align: center; }
.call-keys { display: flex; gap: 18px; margin-top: 20px; }
.call-key {
  width: 56px; height: 56px; border-radius: 50%; border: none; background: #fff; color: #1a1a18; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(20, 20, 15, .1);
  -webkit-tap-highlight-color: transparent; transition: background .15s ease, color .15s ease;
}
.call-key.haptic-host { position: relative; }
.call-key svg { width: 22px; height: 22px; }
.call-key.on { background: var(--orange); color: #fff; box-shadow: 0 4px 14px rgba(255, 101, 11, .3); }
.call-key-pause { display: flex; gap: 5px; }
.call-key-pause i { width: 5px; height: 18px; border-radius: 2px; background: currentColor; }
.call-key-stop { width: 16px; height: 16px; border-radius: 3px; background: currentColor; }
.call-tr {
  display: flex; align-items: center; gap: 10px; width: 290px; max-width: calc(100vw - 48px); height: 52px; box-sizing: border-box;
  margin-top: 80px; padding: 0 12px 0 20px; border-radius: 26px; background: #fff; box-shadow: 0 2px 10px rgba(20, 20, 15, .08);
  color: #3d3d3a;
}
.call-tr svg { flex: none; width: 18px; height: 18px; }
.call-tr-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-tr .set-switch { flex: none; }
/* horná lišta hovoru: pilulka jazyka presne v strede medzi ☰ a „i“ (Owner 15.10.2026) */
.call-top { display: none; }
html.in-call .call-top {
  position: absolute; left: 0; right: 0; top: 14px; z-index: 16; height: 42px; display: flex; align-items: center;
  justify-content: center; pointer-events: none;
}
.call-top > * { pointer-events: auto; }
.call-info {
  position: absolute; right: 16px; top: 0; width: 42px; height: 42px; border-radius: 50%; border: none; padding: 0;
  background: #fff; box-shadow: 0 2px 12px rgba(20, 20, 15, .08); color: var(--ink); cursor: pointer;
  font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1; -webkit-tap-highlight-color: transparent;
}
.call-info.haptic-host { position: absolute; }
.call-lang {
  display: flex; align-items: center; justify-content: center; gap: 7px; height: 38px; max-width: calc(100% - 128px);
  box-sizing: border-box; padding: 0 16px; border-radius: 19px; border: 1.5px solid var(--orange-line); background: #FFF4EC;
  color: var(--orange); font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.call-lang svg { flex: none; width: 15px; height: 15px; }
#call-lang-name { display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; }
/* prekladač (dva jazyky): bledomodrá pilulka */
.call-lang.interpret { border-color: #B9D0F0; background: #EEF4FC; color: #1A63B8; }
.call-lang:disabled { cursor: default; }
@media (max-width: 760px) {
  /* v telefóne na úrovni ☰ (lišta: výška 48, horný odstup ako .mtop); ostatné tlačidlá lišty počas hovoru preč */
  html.in-call .call-top { top: calc(env(safe-area-inset-top) + 9px); }
  html.in-call #mtop-open, html.in-call .mtop-chat-actions, html.in-call #mtop-new, html.in-call .mtop-pp-actions, html.in-call .mtop-back,
  html.in-call .mtop-project { visibility: hidden; }
}
/* kým sa hovor pripája: koliesko zariadenia (Apple 12 lúčov, Android kruh — os.js) nad „Pripájam…“ (Owner 13.10.2026) */
.call-stage-state .spin { display: block; margin: 0 auto; }  /* len koliesko, bez textu (Owner 13.10.2026) */
/* počas hovoru: vlákno zahmlené (prepis je pre archív, čítať ho netreba), v strede meno hlasu, zdola teplý opar */
/* Owner 15.10.2026: na obrazovke hovoru je veľa prvkov — rozmazaný prepis v pozadí rušil, preto sa celkom skryje (čisté pozadie) */
html.in-call .thread { filter: blur(7px); opacity: 0; pointer-events: none; transition: filter .35s ease, opacity .35s ease; }
html.in-call .empty-head, html.in-call .to-end, html.in-call .notice-stack { visibility: hidden; }
/* Owner 10.10.2026: prst (alebo stlačená myš) na obrazovke = prepis čitateľný; pustí = znova zahmlené */
html.in-call.call-peek .thread { filter: none; opacity: 1; transition: filter .15s ease, opacity .15s ease; }
/* podržanie prsta nesmie označovať text (modré pásy a ponuka Kopírovať na iPhone — Owner 10.10.2026) */
html.in-call, html.in-call * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.call-stage {
  position: absolute; inset: 0; z-index: 15; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding-bottom: 236px; pointer-events: none;
  /* opar zdola o kúsok výraznejší (Owner 15.10.2026) */
  background: linear-gradient(to top, rgba(255, 101, 11, .15) 0%, rgba(255, 101, 11, .05) 40%, rgba(255, 101, 11, 0) 70%);
}
html.in-call .call-stage { display: flex; }
.call-stage-state { font-size: 14px; color: var(--orange); min-height: 18px; }
/* Páska (Owner 10.10.2026): kto hovorí + vlna hlasu — vy sivá a nižšia, AI oranžová; vľavo sa stráca do minulosti */
.call-who { font-family: "Lora", Georgia, serif; font-size: 30px; line-height: 36px; color: #2e2e2e; min-height: 36px;
  transition: opacity .2s ease; }
.call-wave { position: relative; width: calc(100% - 40px); max-width: 420px; height: 72px; margin-top: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%, #000 100%); mask-image: linear-gradient(to right, transparent 0, #000 34%, #000 100%); }
.call-wave-axis { position: absolute; left: 0; right: 0; top: 35.5px; height: 1px; background: #e7e6e2; }
.call-wave-bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.call-wave-bars i { flex: none; width: 3px; height: 3px; border-radius: 2px; background: #cfcdc8; }
.call-wave-bars i.me { background: #8c8c8c; }
.call-wave-bars i.ai { background: var(--orange); }
.call-wave-bars i.off { background: #b9b7b1; height: 2px; }
.call-wave-bars i.off:nth-child(2n) { opacity: 0; }
.call-wave-sweep { position: absolute; top: 33px; left: 0; width: 34px; height: 6px; border-radius: 3px; background: var(--orange);
  display: none; animation: call-sweep 2.4s ease-in-out infinite alternate; }
.call-wave.connecting .call-wave-sweep { display: block; }
.call-wave.connecting .call-wave-bars { visibility: hidden; }
@keyframes call-sweep { from { left: 0; } to { left: calc(100% - 34px); } }
.call-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; line-height: 16px; color: #8c8c8c; }
.call-legend > span { display: flex; align-items: center; gap: 6px; }
.call-legend i { width: 8px; height: 8px; border-radius: 4px; background: #8c8c8c; }
.call-legend-ai i { background: var(--orange); }
/* zapnutý prekladač (Owner 15.10.2026): opar zdola, vlna hlasu a bodka pri mene hlasu bledomodré */
html.call-translating .call-stage { background: linear-gradient(to top, rgba(64, 120, 208, .18) 0%, rgba(64, 120, 208, .06) 40%, rgba(64, 120, 208, 0) 70%); }
html.call-translating .call-wave-bars i.ai, html.call-translating .call-wave-sweep, html.call-translating .call-legend-ai i { background: #4078D0; }
/* prst na obrazovke = čítanie prepisu — páska a mená zmiznú (Owner 10.10.2026) */
html.in-call.call-peek .call-stage { opacity: 0; transition: opacity .15s ease; }
@media (prefers-reduced-motion: reduce) { .call-wave-sweep { animation: none; left: calc(50% - 17px); } }
.send {
  width: 36px; height: 36px; border-radius: 50%; background: #2e2e2e; color: #fdfdfd; border: none; display: flex; align-items: center;
  justify-content: center; flex: none; margin-left: 14px; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.send:active:not([disabled]) { background: #222; }
.send .icon-send { width: 22px; height: 22px; }
.send:disabled { background: #ECEBE9; color: #8c8c8c; border: 1px solid #d6d6d6; cursor: default; }
.send .icon-stop { display: none; width: 14px; height: 14px; border-radius: 3px; background: currentColor; }
.send.stop .icon-send { display: none; }
.send.stop .icon-stop { display: block; }
/* STOP naopak (Owner 19.10.2026, „reverzne“): svetlosivé tlačidlo ako „+“ a tmavý štvorček — počas písania odpovede
   sa nebije s čiernym Odoslať */
.send.stop { background: #F0EFEC; color: #2e2e2e; border: 1px solid #E3E2DE; box-sizing: border-box; }
.send.stop:active:not([disabled]) { background: #E6E5E1; }


/* --- mobil (Kocka 4): ako Claude a ChatGPT — horná lišta, výsuvné menu, písanie dole nad klávesnicou ---------------------- */
.mtop, .scrim { display: none; }

@media (max-width: 760px) {
  html, body { overscroll-behavior: none; }
  /* Výška podľa viditeľnej časti obrazovky (s klávesnicou menšia) — nastavuje app.js z visualViewport. */
  .app { position: fixed; left: 0; top: var(--app-top, 0px); width: 100%; height: var(--app-height, 100dvh); }
  /* Otvorená klávesnica (Owner 2.10.2026, ako Claude): rozhovor pokračuje aj pod klávesnicou — tá je priesvitná a text
     za ňou jemne presvitá, nie je odseknutý tvrdo pri poli na písanie. Stránka siaha až pod klávesnicu (--kbd = jej
     výška), pole na písanie je nad ňou, prázdny rozhovor (pozdrav a pole) tiež nad ňou. */
  /* --kbd-x: stránka siaha aj pod spodný riadok klávesnice (glóbus, mikrofón) až po spodok obrazovky — tam bol predtým
     len prázdny okraj stránky, Claude tam ukazuje rozmazaný text (Owner 2.10.2026) */
  html.kbd-open { --kbd-x: 300px; }
  .app { height: calc(var(--app-height, 100dvh) + var(--kbd, 0px) + var(--kbd-x, 0px)); }
  .main:has(.composer-empty) { padding-bottom: calc(var(--kbd, 0px) + var(--kbd-x, 0px)); box-sizing: border-box; }

  .nav {
    display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(84vw, 320px);
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box;
    transform: translateX(-102%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
  }
  .app.drawer-open .nav { transform: none; visibility: visible; transition: transform .22s ease; box-shadow: 0 0 40px rgba(20, 20, 15, .18); }
  .scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(20, 20, 15, .32); }
  .scrim[hidden] { display: none; }

  .mtop {
    display: flex; align-items: center; gap: 2px; flex: none; box-sizing: content-box; height: 48px;
    padding: env(safe-area-inset-top) 6px 0; padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right));
  }
  .mtop-btn {
    flex: none; width: 44px; height: 44px; border: none; border-radius: 10px; background: none; color: var(--ink);
    display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mtop-btn:active { background: var(--inset); }
  /* rámik len pri ovládaní klávesnicou — Coburg sem vracia kurzor po zatvorení menu (Owner 30.9.2026) */
  .mtop-btn:focus { outline: none; }
  html.kbd .mtop-btn:focus-visible { outline: 2px solid #E55700; outline-offset: 2px; }
  .mtop-btn svg { width: 22px; height: 22px; }
  .mtop-title {
    flex: 1; min-width: 0; text-align: center; font-size: 15px; font-weight: 500; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px;  /* odstup od guľôčok */
    visibility: hidden;  /* bez názvu rozhovoru v lište — text pod ním doznieva k okraju (Owner 5.10.2026, ako Claude) */
  }

  /* spodok 19: na konci rozhovoru je medzi spodkom pilulky s modelom a poľom na písanie presne 57 bodov (zmerané na
     iPhone, Owner 2.10.2026) */
  .thread-inner { padding: 12px 16px 19px; }
  /* čítanie podľa parametrov Claude na iPhone (Owner 29.9.2026, zmerané pri 3×): riadkovanie 27 bodov, medzera medzi
     odsekmi 17 bodov, malé písmená 9,2 bodu vysoké a rovnako sýte — Source Serif 19 px (x-výška 0,48 em). Claude má
     užšie písmo, preto sa do riadku zmestí asi o 7 % menej slov (Owner to prijal). */
  .ai-txt { font-size: 19px; line-height: 27px; font-weight: 430; }
  /* nadpisy nad textom (ako Claude): podnadpis tučne v rovnakej veľkosti ako text, nadpis o stupeň väčší */
  .ai-txt h2 { font-size: 23px; line-height: 30px; }
  .ai-txt h3, .ai-txt h4 { font-size: 19px; line-height: 27px; }
  /* vaša správa ako Claude na iPhone: bublina len taká široká ako text, najviac po 37 bodov od ľavého okraja textu
     (Owner 29.9.2026, zmerané) — nie cez celú šírku */
  .ubub { width: auto; max-width: calc(100% - 37px); align-items: flex-end; }
  /* bublina vašej správy presne ako Claude na iPhone (Owner 3.10.2026, zmerané pri 3×): široká podľa textu (aj keď je nad
     ňou fotka — tá je samostatne), najviac 321 bodov; zaoblenie 24 bodov (jeden riadok = pilulka, výška 48); písmo 17
     bodov, riadok 23; vnútri 12 bodov hore a dole, 17 po stranách */
  .user-card { width: auto; max-width: 100%; border-color: transparent; border-radius: 24px; padding: 11.5px 16px;
    font-size: 17px; line-height: 23px; }
  .user-preview.clamped { max-height: calc(23px * 9); }
  .ubub.editing { max-width: 100%; }
  html.q-editing .composer { display: none; }  /* úprava otázky: pole na písanie a šípka nadol ustúpia (Owner 7.10.2026) */
  .user-edit { border-radius: 24px; padding: 11px 15.5px; font-size: 17px; line-height: 23px; }  /* dlhá správa: 9 riadkov aj pri väčšom písme */
  .uatt-row { margin-bottom: 1px; }  /* fotka → bublina 9 bodov ako Claude (zmerané 8,7; predtým 14) */
  .ai-txt p { margin-bottom: 17px; }
  .ai-txt pre { font-size: 13px; line-height: 20px; padding: 12px; }

  .main { position: relative; }
  /* telefón: okno na písanie pod rozhovorom (nad klávesnicou), nie nad ním */
  .composer {
    position: static; transform: none; width: auto; margin: 0;
    /* 8 bodov z oboch strán — šírka ako aplikácia Claude na iPhone (Owner 15.10.2026, zmerané 24 px pri 3×; predtým 16
       podľa Claude v Safari) */
    padding: 0 max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  /* prázdny rozhovor: pozdrav v strede, písanie dole (ako v aplikáciách na mobile) */
  .composer.composer-empty { margin: auto 0 0; position: static; top: auto; transform: none; padding-top: 0; }
  /* guľôčka nad pozdravom, vycentrovaná; výška ako v aplikácii Claude (stred značky 26,8 % výšky obrazovky, text
     pod ňou) — podľa celej obrazovky, nie viditeľnej časti, aby sa pri otvorenej klávesnici neposunula (Owner 29.9.2026) */
  /* POLOHY AKO CLAUDE V SAFARI NA iPHONE (Owner 29.9.2026, zmerané na jeho snímkach 1170×2532):
     zatvorená klávesnica — stred pozdravu 44,1 %, spodok poľa na písanie 83,4 % výšky obrazovky;
     po ťuknutí do poľa — pozdrav 24,6 %, spodok poľa 43,4 % (oboje ide hore). Guľôčka nad textom (34 + 9 + pol riadka
     = 60 px nad stredom textu). Výšky podľa celej obrazovky (lvh), pole cez okraj pod ním voči viditeľnej časti. */
  .composer-empty .empty-head {
    position: absolute; left: 16px; right: 16px; margin: 0; flex-direction: column; gap: 9px;
    top: calc(44.1vh - 68px); top: calc(44.1lvh - 68px);  /* guľôčka 40 + medzera 9 + pol riadka */
  }
  /* zatvorená klávesnica: pole dole ako Claude z plochy iPhonu — 42 bodov od spodného okraja = 8 px + spodný okraj
     iPhonu (Owner 29.9.2026, zmerané); pole nad tým nedvíhame */
  .empty-note { font-size: 32px; }  /* trochu väčší pozdrav (Owner 29.9.2026) */
  .empty-dot { width: 40px; height: 40px; }  /* trochu väčšia (Owner 29.9.2026) */
  /* klávesnica otvorená: bez rezervy pre spodný okraj iPhonu (tú prekrýva klávesnica) a pozdrav priamo nad poľom
     na písanie, nie za ním (Owner 29.9.2026, ako Claude) */
  /* pole na písanie zaoblené ako v aplikácii Claude na iPhone (zmerané: polomer ~70 px pri 3× = 24 px; Owner 29.9.2026) */
  /* vnútro poľa ako Claude na iPhone: #FAFAF9, o odtieň svetlejšie ako stránka #F9F9F7 (Owner 15.10.2026, zmerané) */
  .cbox { border-radius: 24px; background: #FAFAF9; }
  /* bez spodnej rezervy — medzeru k pilulke nad klávesnicou určuje poloha poľa (5 px, viď nižšie; Owner 2.10.2026) */
  html.kbd-open .composer { padding-bottom: 0; }
  /* o 36 bodov vyššie — na iPhone zmerané: stred textu ako Claude pri otvorenej klávesnici (Owner 29.9.2026) */
  /* pozdrav s guľôčkou pri otvorenej klávesnici: o 24 bodov vyššie ako „Let's noodle“ v Claude — u nás je pole vyššie
     (nad ním je lišta Safari), tak aby pozdrav nebol pri poli stiesnený (Owner 1.10.2026, Claude Design návrh B) */
  html.kbd-open .composer-empty .empty-head {
    top: calc(24.6vh - 59px); top: calc(24.6lvh - 59px);
    /* na menšom telefóne nikdy nie cez pole na písanie: najnižšie 24 bodov nad ním */
    top: min(calc(24.6lvh - 59px), calc(var(--app-height, 100dvh) - 225px));
  }
  /* otvorená klávesnica: pole na písanie hneď nad klávesnicou (a nad pruhom, ktorý tam Safari na iPhone pridáva a web
     ho skryť nevie) — ako aplikácia Claude (Owner 1.10.2026; predtým v 43,4 % výšky ako Claude v Safari) */
  html.kbd-open .composer.composer-empty { margin-bottom: -5px; }  /* aj prázdny rozhovor: 5 px nad pilulkou (Owner 2.10.2026) */
  /* 16 px: iPhone pri ťuknutí do poľa nezväčší stránku. Text začína presne nad „+“ (20 px zľava) a 20 bodov pod horným
     okrajom ako Claude na iPhone (Owner 1.10.2026, zmerané na jeho snímkach: predtým 26,7 b a o 7,7 b vľavo od „+“) */
  .cta { font-size: 16px; padding: 16px 14px 10px 20px; }
  /* prázdny rozhovor: pole vysoké 106 bodov ako Claude na iPhone (Owner 29.9.2026). Tlačidlá dole symetricky: od spodku
     rovnako ďaleko ako gulička so šípkou od pravej steny — 8 bodov, všade rovnako (Owner 1.10.2026) */
  .cbar { padding: 4px 8px 8px; }
  /* v rozhovore o kúsok nižšie pole — 95 bodov ako Claude v rozhovore (Owner 29.9.2026, zmerané) */
  .composer:not(.composer-empty) .cta { padding: 15px 14px 7px 20px; }
  .composer:not(.composer-empty) .cbar { padding: 4px 8px 8px; }
  /* okraj a tieň ako Claude na iPhone (Owner 15.10.2026, zmerané na IMG_0145 pri 3×): biela čiara 1 bod po obvode
     a mäkký tieň okolo — hore slabší, po bokoch a dole silnejší */
  .cbox, .cbox:focus-within { border: 1px solid #fff; box-shadow: 0 8px 32px rgba(0, 0, 0, .1); }
  /* v rozhovore text prechádza za pole na písanie (ako Claude): pole leží nad textom pri spodku, text pod ním a pod
     ním bledne; prázdny rozhovor ostáva ako doteraz */
  .composer:not(.composer-empty) { position: absolute; left: 0; right: 0; bottom: 0; }
  .composer:not(.composer-empty) { bottom: calc(var(--kbd, 0px) + var(--kbd-x, 0px)); }  /* nad klávesnicou; stránka siaha až pod ňu (viď .app) */
  /* medzi poľom na písanie a pilulkou Safari nad klávesnicou 5 px (Owner 2.10.2026; spodok viditeľnej časti je 10 b nad
     pilulkou) */
  html.kbd-open .composer:not(.composer-empty) { bottom: calc(var(--kbd, 0px) + var(--kbd-x, 0px) - 5px); }
  .thread {
    /* text bledne postupne od kúska nad poľom až po spodný okraj, kde úplne zmizne (Owner 29.9.2026) */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.3) 0px, #000 24px, #000 calc(100% - var(--safe, 0px) - 44px), rgba(0,0,0,.55) calc(100% - var(--safe, 0px) + 10px), rgba(0,0,0,.2) calc(100% - 30px), rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.3) 0px, #000 24px, #000 calc(100% - var(--safe, 0px) - 44px), rgba(0,0,0,.55) calc(100% - var(--safe, 0px) + 10px), rgba(0,0,0,.2) calc(100% - 30px), rgba(0,0,0,0) 100%);
  }
  /* miznutie hore plynulou krivkou (17 krokov, kosínus) — predtým 3 rovné úseky, na fotke boli vidieť ako pásiky
     (Owner 2.10.2026). Bez názvu rozhovoru v lište (Owner 5.10.2026, ako Claude) text doznieva až k hornému okraju
     obrazovky: pri okraji 10 % sily, plná sila 24 px pod lištou s ☰ */
  /* v rozhovore aj hore ako dole (Owner 30.9.2026): text prechádza za ☰ a ikonu nastavení a pod nimi postupne mizne —
     lišta leží nad textom, rozhovor začína až pod ňou (výška lišty = horný okraj iPhonu + 6 + 48) */
  .main { --mtop-h: calc(env(safe-area-inset-top) + 54px); }
  .main:not(:has(.composer-empty)) .mtop { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
  .main:not(:has(.composer-empty)) .thread {
    padding-top: var(--mtop-h); scroll-padding-top: var(--mtop-h);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.100) calc(var(--mtop-h) * 0.0000 + 0.00px), rgba(0,0,0,0.109) calc(var(--mtop-h) * 0.0625 + 1.50px), rgba(0,0,0,0.134) calc(var(--mtop-h) * 0.1250 + 3.00px), rgba(0,0,0,0.176) calc(var(--mtop-h) * 0.1875 + 4.50px), rgba(0,0,0,0.232) calc(var(--mtop-h) * 0.2500 + 6.00px), rgba(0,0,0,0.300) calc(var(--mtop-h) * 0.3125 + 7.50px), rgba(0,0,0,0.378) calc(var(--mtop-h) * 0.3750 + 9.00px), rgba(0,0,0,0.462) calc(var(--mtop-h) * 0.4375 + 10.50px), rgba(0,0,0,0.550) calc(var(--mtop-h) * 0.5000 + 12.00px), rgba(0,0,0,0.638) calc(var(--mtop-h) * 0.5625 + 13.50px), rgba(0,0,0,0.722) calc(var(--mtop-h) * 0.6250 + 15.00px), rgba(0,0,0,0.800) calc(var(--mtop-h) * 0.6875 + 16.50px), rgba(0,0,0,0.868) calc(var(--mtop-h) * 0.7500 + 18.00px), rgba(0,0,0,0.924) calc(var(--mtop-h) * 0.8125 + 19.50px), rgba(0,0,0,0.966) calc(var(--mtop-h) * 0.8750 + 21.00px), rgba(0,0,0,0.991) calc(var(--mtop-h) * 0.9375 + 22.50px), rgba(0,0,0,1.000) calc(var(--mtop-h) * 1.0000 + 24.00px), #000 calc(100% - var(--safe, 0px) - 44px), rgba(0,0,0,.55) calc(100% - var(--safe, 0px) + 10px), rgba(0,0,0,.2) calc(100% - 30px), rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.100) calc(var(--mtop-h) * 0.0000 + 0.00px), rgba(0,0,0,0.109) calc(var(--mtop-h) * 0.0625 + 1.50px), rgba(0,0,0,0.134) calc(var(--mtop-h) * 0.1250 + 3.00px), rgba(0,0,0,0.176) calc(var(--mtop-h) * 0.1875 + 4.50px), rgba(0,0,0,0.232) calc(var(--mtop-h) * 0.2500 + 6.00px), rgba(0,0,0,0.300) calc(var(--mtop-h) * 0.3125 + 7.50px), rgba(0,0,0,0.378) calc(var(--mtop-h) * 0.3750 + 9.00px), rgba(0,0,0,0.462) calc(var(--mtop-h) * 0.4375 + 10.50px), rgba(0,0,0,0.550) calc(var(--mtop-h) * 0.5000 + 12.00px), rgba(0,0,0,0.638) calc(var(--mtop-h) * 0.5625 + 13.50px), rgba(0,0,0,0.722) calc(var(--mtop-h) * 0.6250 + 15.00px), rgba(0,0,0,0.800) calc(var(--mtop-h) * 0.6875 + 16.50px), rgba(0,0,0,0.868) calc(var(--mtop-h) * 0.7500 + 18.00px), rgba(0,0,0,0.924) calc(var(--mtop-h) * 0.8125 + 19.50px), rgba(0,0,0,0.966) calc(var(--mtop-h) * 0.8750 + 21.00px), rgba(0,0,0,0.991) calc(var(--mtop-h) * 0.9375 + 22.50px), rgba(0,0,0,1.000) calc(var(--mtop-h) * 1.0000 + 24.00px), #000 calc(100% - var(--safe, 0px) - 44px), rgba(0,0,0,.55) calc(100% - var(--safe, 0px) + 10px), rgba(0,0,0,.2) calc(100% - 30px), rgba(0,0,0,0) 100%);
  }
  /* otvorená klávesnica (Owner 2.10.2026, ako Claude): pod poľom na písanie text pokračuje, len veľmi jemne svetlosivo —
     zmerané na snímkach: Claude ~15 % sily bežného textu, u nás bolo 29 % → teraz ~14 % medzi poľom a pilulkou; pod
     klávesnicou tmavší (~60 %), aby cez jej sklo zreteľne presvital (Owner 2.10.2026) */
  html.kbd-open .main:not(:has(.composer-empty)) .thread {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.100) calc(var(--mtop-h) * 0.0000 + 0.00px), rgba(0,0,0,0.109) calc(var(--mtop-h) * 0.0625 + 1.50px), rgba(0,0,0,0.134) calc(var(--mtop-h) * 0.1250 + 3.00px), rgba(0,0,0,0.176) calc(var(--mtop-h) * 0.1875 + 4.50px), rgba(0,0,0,0.232) calc(var(--mtop-h) * 0.2500 + 6.00px), rgba(0,0,0,0.300) calc(var(--mtop-h) * 0.3125 + 7.50px), rgba(0,0,0,0.378) calc(var(--mtop-h) * 0.3750 + 9.00px), rgba(0,0,0,0.462) calc(var(--mtop-h) * 0.4375 + 10.50px), rgba(0,0,0,0.550) calc(var(--mtop-h) * 0.5000 + 12.00px), rgba(0,0,0,0.638) calc(var(--mtop-h) * 0.5625 + 13.50px), rgba(0,0,0,0.722) calc(var(--mtop-h) * 0.6250 + 15.00px), rgba(0,0,0,0.800) calc(var(--mtop-h) * 0.6875 + 16.50px), rgba(0,0,0,0.868) calc(var(--mtop-h) * 0.7500 + 18.00px), rgba(0,0,0,0.924) calc(var(--mtop-h) * 0.8125 + 19.50px), rgba(0,0,0,0.966) calc(var(--mtop-h) * 0.8750 + 21.00px), rgba(0,0,0,0.991) calc(var(--mtop-h) * 0.9375 + 22.50px), rgba(0,0,0,1.000) calc(var(--mtop-h) * 1.0000 + 24.00px), #000 calc(100% - var(--safe, 0px) - 44px), rgba(0,0,0,.4) calc(100% - var(--safe, 0px) + 10px), rgba(0,0,0,.14) calc(100% - var(--kbd, 0px) - var(--kbd-x, 0px)), rgba(0,0,0,.14) calc(100% - var(--kbd, 0px) - var(--kbd-x, 0px) + 60px), rgba(0,0,0,.6) calc(100% - var(--kbd, 0px) - var(--kbd-x, 0px) + 110px), rgba(0,0,0,.6) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.100) calc(var(--mtop-h) * 0.0000 + 0.00px), rgba(0,0,0,0.109) calc(var(--mtop-h) * 0.0625 + 1.50px), rgba(0,0,0,0.134) calc(var(--mtop-h) * 0.1250 + 3.00px), rgba(0,0,0,0.176) calc(var(--mtop-h) * 0.1875 + 4.50px), rgba(0,0,0,0.232) calc(var(--mtop-h) * 0.2500 + 6.00px), rgba(0,0,0,0.300) calc(var(--mtop-h) * 0.3125 + 7.50px), rgba(0,0,0,0.378) calc(var(--mtop-h) * 0.3750 + 9.00px), rgba(0,0,0,0.462) calc(var(--mtop-h) * 0.4375 + 10.50px), rgba(0,0,0,0.550) calc(var(--mtop-h) * 0.5000 + 12.00px), rgba(0,0,0,0.638) calc(var(--mtop-h) * 0.5625 + 13.50px), rgba(0,0,0,0.722) calc(var(--mtop-h) * 0.6250 + 15.00px), rgba(0,0,0,0.800) calc(var(--mtop-h) * 0.6875 + 16.50px), rgba(0,0,0,0.868) calc(var(--mtop-h) * 0.7500 + 18.00px), rgba(0,0,0,0.924) calc(var(--mtop-h) * 0.8125 + 19.50px), rgba(0,0,0,0.966) calc(var(--mtop-h) * 0.8750 + 21.00px), rgba(0,0,0,0.991) calc(var(--mtop-h) * 0.9375 + 22.50px), rgba(0,0,0,1.000) calc(var(--mtop-h) * 1.0000 + 24.00px), #000 calc(100% - var(--safe, 0px) - 44px), rgba(0,0,0,.4) calc(100% - var(--safe, 0px) + 10px), rgba(0,0,0,.14) calc(100% - var(--kbd, 0px) - var(--kbd-x, 0px)), rgba(0,0,0,.14) calc(100% - var(--kbd, 0px) - var(--kbd-x, 0px) + 60px), rgba(0,0,0,.6) calc(100% - var(--kbd, 0px) - var(--kbd-x, 0px) + 110px), rgba(0,0,0,.6) 100%);
  }
  /* model, variant a Effort ako obyčajný text, na ktorý sa dá ťuknúť — bez rámčekov a pozadia; farba ako text
     „Write a message…“ (Owner 29.9.2026) */
  .pill-split { font-size: 13px; border: none; border-radius: 0; background: none; color: #9B9891; }
  .pill-split > button { padding: 7px 5px; color: #9B9891; }
  .pill-split > button:hover, .pill-split > button:active { background: none; }
  .pill-split > button:not(:first-child) { border-left: none; }
  .pill-split > .pill-level { color: #9B9891; }
  .pill-split { gap: 0; cursor: pointer; } /* jedno tlačidlo: ťuknutie kamkoľvek otvorí výber (Owner 29.9.2026) */
  /* model v pilulke, aby bolo vidno, že sa dá zmeniť (Owner 1.10.2026): farba ako gulička so šípkou hore (.send:disabled),
     dĺžka podľa celého textu */
  .pill-split { background: #F0EFEC; border: 1px solid #F0EFEC; border-radius: 999px; padding: 0 9px; height: 36px;
    box-sizing: border-box; align-items: center; flex: none; gap: 5px; }
  .pill-split > button { padding: 6px 0; color: #6E6D69; white-space: nowrap; }
  .pill-split > .pill-level { color: #6E6D69; }
  /* mobil (Owner 12.10.2026): v pilulke len model, úsilie (Effort) nikdy — vyberá sa v bubline s modelmi */
  .pill-split > .pill-level { display: none; }
  /* tlačidlá dole 36 bodov ako Claude na iPhone (Owner 1.10.2026, zmerané na jeho snímkach; predtým 40) */
  .send { width: 36px; height: 36px; margin-left: 8px; }
  /* mobil: mikrofón namiesto šípky, kým nie je čo poslať (Owner 7.10.2026); počas diktovania mikrofón (stop) ostáva
     a s textom v poli aj šípka — „dokončiť prepis a odoslať“ (Astra H19) */
  .cbox:not(.can-send) .send { display: none; }
  .cbox.can-send:not(.dictating) .mic { display: none; }
  .send .icon-send { width: 20px; height: 20px; }
  .attach { width: 36px; height: 36px; }
  .cunder { display: none; }
  .composer-notice.load { grid-template-columns: 1fr 60px 36px auto; }
  .load-text2 { display: none; }


}
@media (hover: none) { .iconbtn.attach:hover, .iconbtn.attach:active { background: none; } }  /* dotyk: bez visiaceho sivého kruhu */

/* ťahanie súboru do okna (Owner 5.10.2026, návrh A+): celé okno rozmazané a zosvetlené, oranžový rámik 12 px od okraja,
   tri oranžové ikony, „Drop files here“ v oranžovej a sivý riadok s tým, čo sa dá vložiť. Udalosti prechádzajú pod neho. */
.drop-overlay {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; background: rgba(251, 251, 249, .55);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.drop-overlay[hidden] { display: none; }
.drop-frame {
  position: absolute; inset: 12px; border: 2px solid var(--orange, #FF650B); border-radius: 16px; background: rgba(255, 101, 11, .035);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--ui);
}
.drop-icons { display: flex; align-items: flex-end; gap: 22px; margin-bottom: 12px; color: var(--orange, #FF650B); }
.drop-ic { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.drop-ic-left { transform: rotate(-10deg); }
.drop-ic-mid { width: 44px; height: 44px; margin-bottom: 14px; }
.drop-ic-right { transform: rotate(10deg); }
.drop-title { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--orange, #FF650B); }
.drop-hint { font-size: 14px; line-height: 20px; color: #5F6268; }

/* Stránka projektu (Owner 15.10.2026, ako Claude) — app.js renderProjectPage. Počítač: „Projects / názov ⌄“, veľký názov,
   popis, pole na písanie na mieste .pp-slot (app.js placeComposer), pod ním vlákna projektu; vpravo Instructions a Context.
   Mobil: samostatná obrazovka nad poľom na písanie. */
.project-page { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: var(--raised); }
.project-page[hidden] { display: none; }
.main.project-home .composer.composer-empty {
  top: var(--pp-ctop, 200px); left: var(--pp-cleft, 48px); width: var(--pp-cwidth, 600px); transform: none; padding: 0;
}
.main.project-home .composer .empty-head { display: none !important; }
.main.project-home #chat-head { visibility: hidden; }
.pp-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 49px; padding: 0 18px 0 26px; }
.pp-crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; font-family: var(--ui); font-size: 15px; }
.pp-crumb {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 32px; padding: 0 8px; border: none; border-radius: 8px;
  background: none; font: inherit; color: #6B6A66; cursor: pointer;
}
.pp-crumb:hover, .pp-crumb.is-open { background: var(--soft-hover); color: var(--ink); }
.pp-crumb-name { color: var(--ink); }
.pp-crumb-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-crumb .ic { width: 15px; height: 15px; }
.pp-sep { color: #B5B3AD; }
.pp-bar-tools { display: flex; align-items: center; gap: 4px; }
.pp-tool {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 8px;
  background: none; color: var(--ink); cursor: pointer;
}
.pp-tool:hover { background: var(--soft-hover); }
.pp-tool .ic { width: 20px; height: 20px; }
.pp-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.pp-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-areas: "hero hero" "left side";
  column-gap: 64px; max-width: 1080px; margin: 0 auto; padding: 34px 48px 60px; box-sizing: border-box; align-items: start;
}
.pp-hero { grid-area: hero; margin-bottom: 30px; min-width: 0; }
.pp-name { margin: 0; font-family: "Lora", Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.pp-desc { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: #3d3d3a; overflow-wrap: anywhere; }
.pp-left { grid-area: left; display: flex; flex-direction: column; min-width: 0; }
.pp-slot { grid-area: slot; min-height: 60px; }
.pp-side { grid-area: side; display: flex; flex-direction: column; min-width: 0; margin-top: 12px; }
.pp-sessions { grid-area: list; min-width: 0; margin-top: 26px; display: flex; flex-direction: column; }
.pp-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.pp-row:last-child { border-bottom: none; }
.pp-row-head { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.pp-row-ic { width: 20px; height: 20px; color: #3d3d3a; }
.pp-row-label { flex: 1; font-size: 15.5px; color: var(--ink); }
.pp-row-action {
  height: 30px; padding: 0 10px; border: none; border-radius: 8px; background: none; font: inherit; font-size: 15px; color: var(--ink);
  cursor: pointer;
}
.pp-row-action:hover, .pp-row-action.is-open { background: var(--soft-hover); }
.pp-row-text {
  margin: 8px 0 0 32px; font-size: 14px; line-height: 1.45; color: #6B6A66; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pp-row > .pp-grid, .pp-row > .pp-failed, .pp-row > .doc-loading { margin: 12px 0 0; }
.pp-side .pp-grid { gap: 8px; }
.pp-nosessions { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; }
.pp-nosessions-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #6B6A66; }
.pp-nosessions-ic .ic { width: 30px; height: 30px; }
.pp-nosessions-title { margin: 12px 0 0; font-size: 17px; color: #6B6A66; }
.pp-nosessions-text { margin: 8px 0 0; max-width: 460px; font-size: 15.5px; line-height: 1.45; color: #8c8e92; }
.pp-session {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 10px; border: none; border-bottom: 1px solid var(--line);
  background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; border-radius: 0;
}
.pp-session:hover { background: var(--soft-hover); }
.pp-session-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pp-session-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; }
.pp-session-when { margin-top: 3px; font-size: 13.5px; color: #8c8e92; }
.pp-empty { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--faint); }
.pp-failed { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pp-link {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
.pp-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-tile { position: relative; }
.pp-remove {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line2); background: var(--surface); color: var(--dim); font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.pp-tile:hover .pp-remove, .pp-remove:focus-visible { opacity: 1; }
@media (hover: none) { .pp-remove { opacity: 1; } }
.pp-mbar, .pp-info, .pp-mbtns, .pp-newsession, .mtop-back, .mtop-project, .pp-recents, .mtop-pp-actions { display: none; }
@media (max-width: 1100px) {
  .pp-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "slot" "side" "list"; }
  .pp-left { display: contents; }
  .pp-side { margin-top: 18px; }
}
@media (max-width: 760px) {
  .project-page { z-index: 25; }
  .main.project-screen .composer { display: none; }
  .pp-bar { display: none; }
  .pp-mbar {
    flex: none; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 6px) 16px 8px;
  }
  .pp-round {
    flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: none;
    border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 2px 12px rgba(20, 20, 15, .08); cursor: pointer;
  }
  .pp-round .ic { width: 21px; height: 21px; }
  .pp-mtitle { flex: 1; min-width: 0; text-align: center; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pp-pill { flex: none; display: flex; align-items: center; height: 42px; padding: 0 4px; border-radius: 21px; background: #fff; box-shadow: 0 2px 12px rgba(20, 20, 15, .08); }
  .pp-pill-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: none; background: none; color: var(--ink); cursor: pointer; }
  .pp-pill-btn .ic { width: 20px; height: 20px; }
  .pp-scroll { padding: 6px 16px 110px; }
  .pp-info {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #EFEEEA; color: #6B6A66;
    font-size: 16px; line-height: 1.4;
  }
  .pp-info .ic { flex: none; width: 21px; height: 21px; }
  .pp-mbtns { display: flex; gap: 10px; margin-top: 12px; }
  .pp-mbtn {
    flex: 1; height: 50px; border: 1px solid var(--line2); border-radius: 25px; background: var(--raised); font: inherit; font-size: 17px;
    font-weight: 500; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .pp-mbtn:disabled { opacity: .5; }
  .pp-sessions { margin-top: 22px; }
  .pp-recents { display: block; padding: 0 4px 6px; font-size: 15px; color: #8c8e92; }
  .pp-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .pp-mbtn .ic { width: 20px; height: 20px; }
  .pp-nosessions { padding-top: 22vh; }
  .pp-nosessions-ic { width: 54px; height: 54px; border-radius: 50%; background: #EDECE8; }
  .pp-nosessions-ic .ic { width: 24px; height: 24px; }
  .pp-session { padding: 12px 4px; border-bottom: none; align-items: flex-start; }
  .pp-session:hover { background: none; }
  .pp-session:active { background: var(--soft-hover); }
  .pp-session-ic { width: 21px; height: 21px; margin-top: 2px; color: #3d3d3a; }
  .pp-session-name { font-size: 17px; }
  .pp-session-when { font-size: 15px; }
  .pp-newsession {
    position: absolute; right: 20px; bottom: calc(8px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px;
    height: 46px; padding: 0 22px 0 18px; border: none; border-radius: 23px; background: #2A2A27; color: #fff; font: inherit;
    font-size: 17px; font-weight: 500; box-shadow: 0 6px 20px rgba(20, 20, 15, .18); cursor: pointer;
  }
  .pp-newsession .ic { width: 18px; height: 18px; }
  /* prázdne vlákno projektu: ‹ a pilulka s názvom projektu namiesto ☰ (ako Claude) */
  body.pp-thread #menu-btn { display: none; }
  body.pp-thread .mtop-back {
    display: flex; width: 42px; height: 42px; margin-left: 10px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(20, 20, 15, .08);
  }
  body.pp-thread .mtop-back .ic { width: 21px; height: 21px; }
  /* vlákno projektu (Owner 15.10.2026, ako Claude): ‹, pilulka s projektom a vpravo pilulka „+“ a „…“ */
  /* rozpísané vlákno projektu: vľavo ☰ (otvorí bočné menu, Owner 15.10.2026), v prázdnom ‹ späť na projekt */
  body.pp-inthread #mtop-open, body.pp-thread #mtop-open, body.pp-inthread #mtop-new, body.pp-thread #mtop-new,
  body.pp-inthread .mtop-chat-actions, body.pp-thread .mtop-chat-actions { display: none !important; }
  /* vlákno otvorené zo stránky projektu (Projects → projekt → vlákno): ‹ späť na projekt namiesto ☰ (Owner 15.10.2026) */
  body.pp-inthread.pp-from #menu-btn { display: none !important; }
  body.pp-inthread.pp-from .mtop-back {
    display: flex; width: 42px; height: 42px; margin-left: 10px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(20, 20, 15, .08);
  }
  body.pp-inthread.pp-from .mtop-back .ic { width: 21px; height: 21px; }
  body.pp-thread .mtop-pp-actions, body.pp-inthread .mtop-pp-actions {
    display: flex; align-items: center; margin-left: auto; margin-right: 10px; height: 42px; padding: 0 3px; border-radius: 21px;
    background: #fff; box-shadow: 0 2px 12px rgba(20, 20, 15, .08);
  }
  .mtop-pp-btn {
    display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: none; border-radius: 50%;
    background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mtop-pp-btn .ic { width: 21px; height: 21px; }
  body.pp-thread #mtop-pp-more { display: none; }  /* prázdne vlákno: len sivé „+“ (ako Claude) */
  body.pp-thread #mtop-pp-new { color: #A9A8A3; cursor: default; }
  body.pp-inthread .mtop-project .ic { flex: none; width: 19px; height: 19px; }
  body.pp-inthread .mtop-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.pp-thread .mtop-project, body.pp-inthread .mtop-project {
    display: inline-flex; align-items: center; gap: 7px; max-width: 55vw; height: 42px; margin-left: 8px; padding: 0 16px; border: none;
    border-radius: 21px; background: #fff; box-shadow: 0 2px 12px rgba(20, 20, 15, .08); font: inherit; font-size: 15px;
    font-weight: 500; color: var(--ink); cursor: pointer;
  }
  body.pp-thread .mtop-project .ic { flex: none; width: 19px; height: 19px; }
  body.pp-thread .mtop-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Composer na telefóne (Owner 14.10.2026, IMG_0053): „+“ a mikrofón v sivej guličke (ako pilulka modelu), pilulka modelu
   hneď vedľa „+“ vľavo, vpravo mikrofón a gulička hovoru; keď je čo poslať, je odoslanie oranžová gulička so šípkou hore */
@media (max-width: 760px) {
  /* farby ako Claude (Owner 15.10.2026, zmerané): sivá #F0EFEC bez tmavšieho okraja, gulička hovoru #121211 */
  .attach, .mic { background: #F0EFEC; border: 1px solid #F0EFEC; box-sizing: border-box; color: #3d3d3a; }
  .call { background: #121211; }
  .attach .ic { width: 18px; height: 18px; }
  .cbar .pill-split { margin-left: 8px; margin-right: auto; }
  .cbox.dictating .mic { border-color: var(--orange); }
  .send:not(:disabled):not(.stop) { background: var(--orange); color: #fff; }
  .send:active:not([disabled]):not(.stop) { background: #E55700; }
  /* mikrofón ostáva aj počas písania (Owner 14.10.2026, IMG_0054/55): sivá gulička vedľa oranžovej so šípkou */
  .cbox.can-send .mic:not([hidden]) { display: flex; }
}

/* Súbory projektu ako Claude (Owner 15.10.2026): štvorčeky v mriežke — obrázok a PDF s náhľadom, ostatné formát
   v rámčeku hore a názov dole; čierny krížik vpravo hore maže podklad */
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-tile { position: relative; aspect-ratio: 1 / 1; min-width: 0; }
.pf-tile.is-pending { opacity: .55; }
.pf-open {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 1px solid #E3E2DE;
  border-radius: 14px; background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pf-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 9px 10px 10px; }
.pf-tag {
  align-self: flex-start; padding: 1px 6px; border: 1px solid #D6D5D0; border-radius: 7px; font-size: 11px; font-weight: 600;
  letter-spacing: .02em; line-height: 16px; color: #3d3d3a;
}
.pf-name {
  font-size: 12.5px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.pf-img.pf-pdf { object-fit: cover; object-position: top center; }
.pf-tile.has-preview .pf-text { visibility: hidden; }
.pf-x {
  position: absolute; top: 6px; right: 6px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 21px; height: 21px;
  padding: 0; border: none; border-radius: 50%; background: #1a1a18; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pf-x .ic { width: 16px; height: 16px; }
.pf-x.haptic-host { position: absolute; }  /* plocha na cvaknutie (UI.hapticTap) nesmie krížik vytrhnúť z rohu dlaždice */
.pf-tile.has-preview .pf-x { background: rgba(20, 20, 16, .55); }
@media (max-width: 760px) {
  .pf-grid { gap: 12px; }
  .pf-open { border-radius: 18px; }
  .pf-text { padding: 10px 10px 11px; }
  .pf-tag { font-size: 12px; padding: 1px 7px; line-height: 17px; border-radius: 8px; }
  .pf-name { font-size: 14px; line-height: 1.25; -webkit-line-clamp: 3; }
  .pf-x { top: 8px; right: 8px; width: 22px; height: 22px; }
  .pf-x .ic { width: 18px; height: 18px; }
}
/* najviac 2 riadky súborov, ďalšie sa posúvajú (Owner 15.10.2026) — výška z šírky mriežky (3 štvorčeky v riadku) */
.pp-row, .pfiles-list { container-type: inline-size; }
.pp-row .pf-grid {
  max-height: calc((100cqw - 20px) / 3 * 2 + 10px); overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding-right: 2px;
}
/* kapacita projektu (Owner 15.10.2026, ako Claude) */
.pf-cap { margin: 2px 0 14px; }
.pf-bar { height: 8px; border-radius: 4px; background: #DCE6F5; overflow: hidden; }
.pf-fill { height: 100%; border-radius: 4px; background: #4078D0; min-width: 6px; transition: width .3s ease; }
.pf-fill.is-full { background: #C04841; }
.pf-cap-text { margin: 10px 0 0; font-size: 13.5px; color: #8c8e92; }
.pf-cap-note { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4; color: #8c8e92; }
.pp-row > .pf-cap { margin: 12px 0 10px; }
@media (max-width: 760px) {
  /* jemnejšie ako Claude na iPhone (Owner 15.10.2026, zmerané IMG_0164): menšie teplejšie sivé písmo, modrejší pruh */
  .pf-cap-text, .pf-cap-note { font-size: 12.5px; color: #787972; }
  .pf-bar { background: #D1E2F8; }
  .pf-cap { margin-bottom: 20px; }
}
/* bublina „i“ v hovore: jedna veta (zalomená) a odkaz do Language and voice — šírka ako v návrhu (Owner 15.10.2026) */
.menu.menu-callinfo, .menu.menu-morph.menu-callinfo { width: 300px; min-width: 0; max-width: calc(100vw - 24px); box-sizing: border-box; }
.menu.menu-callinfo .menu-head { white-space: normal; padding: 10px 14px 6px; font-size: 14px; line-height: 20px; color: var(--item); }
@media (max-width: 760px) {
  .menu.menu-morph.menu-callinfo .menu-head { padding: 9px 24px 2px; font-size: 16px; line-height: 22px; color: #3d3d3a; }
}
/* telefón (Owner 15.10.2026): bublina otázky sa dá ťuknúť — otvorí bublinu Znova, Upraviť, Kopírovať */
@media (max-width: 760px) { .msg-row.me .user-card { cursor: pointer; -webkit-tap-highlight-color: transparent; } }

/* Recents na stránke projektu na počítači (Owner 16.10.2026, ako Claude): sivý nadpis, názov vľavo a dátum vpravo,
   pod kurzorom riadok zosivie a namiesto dátumu ⋮ s ponukou */
@media (min-width: 761px) {
  .pp-recents { display: block; padding: 0 0 8px 16px; font-size: 14px; color: #8c8e92; }
  .pp-srow { position: relative; }
  .pp-session.pp-session-desk { justify-content: space-between; min-height: 52px; padding: 0 16px; border-radius: 10px; border-bottom: none; }
  .pp-srow + .pp-srow::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; border-top: 1px solid var(--line); }
  .pp-srow:hover::before, .pp-srow:hover + .pp-srow::before, .pp-srow.menu-open::before, .pp-srow.menu-open + .pp-srow::before { opacity: 0; }
  .pp-srow:hover .pp-session-desk, .pp-srow.menu-open .pp-session-desk { background: var(--soft-hover); }
  .pp-session-desk .pp-session-name { flex: 1; min-width: 0; }
  .pp-session-date { flex: none; font-size: 14px; color: #8c8e92; }
  .pp-session-more {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: none; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px; background: none; color: var(--ink); cursor: pointer;
  }
  .pp-session-more .ic { width: 18px; height: 18px; }
  .pp-session-more:hover { background: rgba(0, 0, 0, .06); }
  .pp-srow:hover .pp-session-more, .pp-srow.menu-open .pp-session-more { display: flex; }
  .pp-srow:hover .pp-session-date, .pp-srow.menu-open .pp-session-date { visibility: hidden; }
}
@media (min-width: 761px) { .pp-session-more .ic { transform: rotate(90deg); } }  /* zvislé tri bodky ako Claude */

/* nadpis projektu na počítači ako Claude (Owner 16.10.2026): menší názov a popis, bližšie k sebe a vyššie */
@media (min-width: 761px) {
  .pp-wrap { padding-top: 24px; }
  .pp-name { font-size: 26px; line-height: 1.25; }
  .pp-desc { margin-top: 6px; font-size: 14.5px; line-height: 1.45; }
}

/* stránka projektu na počítači ako Claude (Owner 17.10.2026, porovnanie snímok): nadpis 33 px od panela, pole na písanie
   vysunuté o 16 px doľava a o 10 px vyššie, pravý stĺpec 320 px s medzerou 62 px, riadky Pokyny / Kontext / Výstupy nižšie */
@media (min-width: 761px) {
  .pp-wrap { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 62px; padding-left: 33px; padding-right: 43px; }
  .pp-left .pp-slot { margin-left: -16px; }
  .main.project-home .composer .cta { min-height: 48px; }
  .pp-row { padding: 11px 0; }
  .pp-side { margin-top: 6px; }
}
/* Nedávne na stránke projektu (Owner 17.10.2026, ako Claude): nadpis „Nedávne“ aj názvy relácií začínajú presne pod
   nadpisom projektu — riadok (a jeho podsvietenie) siaha doľava ako pole na písanie */
@media (min-width: 761px) {
  .pp-sessions .pp-recents { padding-left: 0; }
  .pp-sessions .pp-srow { margin-left: -16px; }
}

/* Composer na počítači ako Claude (Owner 17.10.2026): v poli vľavo „+“, vpravo mikrofón so šípkou (výber mikrofónu)
   a vlnka hovoru bez guličky; šípka odoslania ako čierny zaoblený štvorec; počas diktovania ✕ a ✓. Pod poľom vľavo
   Projekt ▾ (len nový chat), vpravo výber AI. */
.mic-pick, .dict-key { display: none; }
.cunder { display: none; }  /* telefón: výber AI ostáva v poli (bez riadku pod ním) */
@media (min-width: 761px) { .cunder { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px 0; } }
.cunder-pill { margin-left: auto; display: flex; align-items: center; }
.cunder-proj {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: none; border-radius: 8px; background: none;
  font: inherit; font-family: var(--sans); font-size: 14px; color: var(--item); cursor: pointer;
}
.cunder-proj[hidden] { display: none; }
.cunder-proj .ic { width: 13px; height: 13px; }
.cunder-proj-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .cunder-proj:hover, .cunder-proj.is-open { background: var(--row-open); color: var(--ink); } }
@media (min-width: 761px) {
  .cbar .mic { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; }
  .mic-pick {
    display: flex; align-items: center; justify-content: center; width: 18px; height: 32px; margin-left: -4px; padding: 0; border: none;
    border-radius: 6px; background: none; color: var(--faint); cursor: pointer;
  }
  .mic-pick[hidden] { display: none; }
  .mic-pick .ic { width: 13px; height: 13px; }
  .mic-pick:hover, .mic-pick.is-open { background: rgba(27, 27, 23, .08); color: var(--ink); }
  .call { width: 36px; height: 36px; margin-left: 6px; border-radius: 10px; background: none; color: var(--ink); }
  .call:hover { background: rgba(27, 27, 23, .08); }
  .send { border-radius: 10px; margin-left: 6px; }
  /* diktovanie: namiesto mikrofónu, šípky, vlnky a odoslania ✕ (s rámikom) a ✓ */
  .cbox.dictating .mic, .cbox.dictating .mic-pick, .cbox.dictating .call, .cbox.dictating .send { display: none !important; }
  .cbox.dictating .dict-key {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent;
    border-radius: 10px; background: none; color: var(--ink); cursor: pointer;
  }
  .cbox.dictating .dict-cancel { margin-left: auto; border-color: var(--line2); }
  .cbox.dictating .dict-key .ic { width: 18px; height: 18px; }
  .cbox.dictating .dict-key:hover { background: rgba(27, 27, 23, .06); }
  /* bublina Projekt ▾ */
  .menu.proj-pop { width: 300px; max-width: calc(100vw - 24px); padding: 6px; }
  .proj-pop-search { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .proj-pop-search .ic { width: 17px; height: 17px; color: var(--faint); }
  .proj-pop-input { flex: 1; min-width: 0; border: none !important; outline: none !important; box-shadow: none !important; background: none; font: inherit; font-size: 14.5px; color: var(--ink); padding: 0; }
  .proj-pop-list { max-height: min(50vh, 420px); overflow-y: auto; display: flex; flex-direction: column; }
  .proj-pop-sec { padding: 8px 10px 4px; font-size: 13px; color: var(--faint); }
  .proj-pop-none { padding: 10px; font-size: 14px; color: var(--faint); }
  .proj-pop .menu-row { min-height: 32px; }
}

/* hlasový hovor na počítači (Owner 17.10.2026): obrazovka neposkakuje — ovládanie (stav, ▶ ❚❚ ■, prekladač) je počas
   celého hovoru dole, aj kým v rozhovore ešte nič nie je (predtým bolo najprv v strede ako prázdny chat a po prvej
   vete skočilo dole) */
@media (min-width: 761px) {
  html.in-call .composer.composer-empty { top: auto; bottom: 0; transform: translateX(-50%); padding-top: 14px; }
}
/* obrazovka hovoru na počítači (Owner 17.10.2026): hranaté tlačidlá ako celá aplikácia v tomto režime — ▶ ❚❚ ■,
   pilulka jazyka, „i“, Hlasový prekladač aj jeho sklenený prepínač ako zaoblené obdĺžniky */
@media (min-width: 761px) {
  .call-key { border-radius: 14px; }
  .call-lang { border-radius: 10px; }
  .call-info { border-radius: 10px; }
  .call-tr { border-radius: 14px; }
  /* prekladač (Owner 17.10.2026): bublina len taká, aký je jej obsah, a vysoká ako pilulka jazyka hore; prepínač
     rovnako veľký ako v oknách Nastavení */
  .call-tr { width: auto; height: 38px; gap: 8px; padding: 0 6px 0 14px; border-radius: 10px; }
  .call-tr-name { font-size: 15px; }
  .call-tr svg { width: 16px; height: 16px; }
  #call-tr-switch { transform: scale(.78); transform-origin: right center; margin-left: -10px; }
  /* počítač (web, Mac, Windows — Owner 20.10.2026): Hlasový prekladač vôbec nie je, len na telefóne */
  .call-tr { display: none !important; }
}
/* obrazovka hovoru na počítači (Owner 17.10.2026): „i“ vpravo hore aj jeho bublina s „Jazyk a hlas“ preč — mobil ich má */
@media (min-width: 761px) { .call-info { display: none !important; } }