/* Coburg — Kocka 5a: bočný panel a spoločné prvky podľa aplikácie Coburg pre Mac
   (predloha: audit/kocka-5a/SPEC-MAC-SIDEBAR.md — hodnoty z Resources/Frontend/index.html). */

:root {
  --bg: #f3f3f0;
  --raised: #fbfbf9;
  --inset: #f1f1ec;
  --line: #e7e7e0;
  --line2: #dadad1;
  --item: #5f6268;              /* text riadkov v paneli a v menu */
  --sec-head: #8c8e92;          /* nadpisy sekcií */
  --unavailable: #D8D6D2;
  --row-hover: #EDECEA;
  --row-open: #E7E6E2;          /* aktívny riadok (Owner 1.10.2026) */
  --orange: #FF650B;            /* oranžová — druhý štýl tlačidiel popri čiernom (Owner 1.10.2026, ako Grok) */
  --ball: #FF650B;              /* farba guľôčky a bodky za „Coburg“ — voľba účtu (Owner 19.10.2026) */
  --orange-line: #FFCDB0;
  --orange-soft: #FFF8F4;
  --nav-hover: rgba(27, 27, 23, .08);
  --soft-hover: rgba(15, 15, 12, .05);
  --shadow-lg: 0 30px 70px -30px rgba(20, 20, 15, .45), 0 8px 20px -12px rgba(20, 20, 15, .2);
  --ui: "Inter", var(--sans);
  --nav-width: 246px;
}

/* ikony: maska zo súboru vo farbe textu */
.ic {
  display: inline-block; flex: none; width: 18px; height: 18px; background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ic-chevron-right { --ic: url("/icons/ui/chevron-right.svg"); }
.ic-chevron-down { --ic: url("/icons/ui/chevron-down.svg"); }
.ic-arrow-down { --ic: url("/icons/ui/arrow-down.svg"); }
.ic-pin { --ic: url("/icons/ui/pin.svg"); }
/* pripnuté = plný čierny pripínačik, nepripnuté = obrysový (Owner 15.10.2026) — nie prečiarknutý */
.ic-pin-on { --ic: url("/icons/ui/pin-on.svg"); }
.ic-highlight { --ic: url("/icons/ui/highlight.svg"); }
.ic-rename { --ic: url("/icons/ui/rename.svg"); }
.ic-delete { --ic: url("/icons/ui/delete.svg"); }
.ic-search { --ic: url("/icons/ui/search.svg"); }
.ic-more { --ic: url("/icons/ui/more.svg"); }  /* tri bodky: možnosti vlákna na mobile (sada ikon A, Owner 3.10.2026) */
.ic-sidebar-collapse { --ic: url("/icons/ui/sidebar-collapse.svg"); }
.ic-sidebar-expand { --ic: url("/icons/ui/sidebar-expand.svg"); }
.ic-chat { --ic: url("/icons/ui/chat.svg"); }
.ic-image { --ic: url("/icons/ui/image.svg"); }  /* režim Images aj priečinok Pictures — jedna ikona (sada A) */
.ic-video { --ic: url("/icons/ui/video.svg"); }  /* režim Video (Owner 19.10.2026) — kamera, sada A */
.ic-code { --ic: url("/icons/ui/code.svg"); }  /* režim Code (Kocka 5e) */
.ic-workflow { --ic: url("/icons/ui/projects.svg"); }  /* režim Projects — priečinok s projektmi ako v Claude (Owner 15.10.2026) */
.ic-sort { --ic: url("/icons/ui/sort.svg"); }  /* stránka Projects: zoradenie (Owner 15.10.2026, ako Claude) */
.ic-sort-sliders { --ic: url("/icons/ui/sort-sliders.svg"); }  /* mobil: zoradenie projektov (Owner 15.10.2026) */
.ic-paperclip { --ic: url("/icons/ui/paperclip.svg"); }  /* projekt: Upload from device / Add Files (Owner 15.10.2026) */
.ic-file-plus { --ic: url("/icons/ui/file-plus.svg"); }
.ic-chat-plus { --ic: url("/icons/ui/chat-plus.svg"); }
.ic-chat-plus-solid { --ic: url("/icons/ui/chat-plus-solid.svg"); }  /* plná bublinka, „+“ vyrezané (Owner 16.10.2026) */
.ic-instructions { --ic: url("/icons/ui/instructions.svg"); }
.ic-text-add { --ic: url("/icons/ui/text-add.svg"); }
.ic-project { --ic: url("/icons/ui/project.svg"); }  /* režim Project — ako aplikácia pre Mac (Owner 28.9.2026, predtým Loop) */
.ic-plus { --ic: url("/icons/ui/plus.svg"); }
.ic-lock { --ic: url("/icons/ui/lock.svg"); }  /* Workflow od plánu Pro (Owner 14.10.2026) */
.ic-swap { --ic: url("/icons/ui/swap.svg"); }
.ic-close { --ic: url("/icons/ui/close.svg"); }
.ic-close-bold { --ic: url("/icons/ui/close-bold.svg"); }  /* krížik na štvorčeku súboru (Owner 15.10.2026, ako Claude) */
.ic-menu { --ic: url("/icons/ui/menu.svg"); }
.ic-copy { --ic: url("/icons/ui/copy.svg"); }
.ic-share { --ic: url("/icons/ui/share.svg"); }
.ic-flag { --ic: url("/icons/ui/flag.svg"); }  /* Nahlásiť odpoveď (Owner 20.10.2026, Apple 1.2) */
.ic-undo { --ic: url("/icons/ui/undo.svg"); }
.ic-tool-pen { --ic: url("/icons/ui/tool-pen.svg"); }
.ic-tool-fine { --ic: url("/icons/ui/tool-fine.svg"); }
.ic-tool-marker { --ic: url("/icons/ui/tool-marker.svg"); }
.ic-tool-eraser { --ic: url("/icons/ui/tool-eraser.svg"); }
.ic-redo { --ic: url("/icons/ui/redo.svg"); }  /* zdieľať ako iPhone (prehliadač fotiek) */
.ic-check { --ic: url("/icons/ui/check.svg"); }
.ic-retry { --ic: url("/icons/ui/retry.svg"); }
.ic-alert { --ic: url("/icons/ui/alert.svg"); }
.ic-send { --ic: url("/icons/ui/send.svg"); }
.ic-mic { --ic: url("/icons/ui/mic.svg"); }
.ic-call { --ic: url("/icons/ui/call.svg"); }
.ic-mic-off { --ic: url("/icons/ui/mic-off.svg"); }
.ic-speaker-off { --ic: url("/icons/ui/speaker-off.svg"); }
.ic-updown { --ic: url("/icons/ui/updown.svg"); }
.ic-speaker { --ic: url("/icons/ui/speaker.svg"); }
.ic-settings { --ic: url("/icons/ui/settings.svg"); }  /* ozubené koliesko všade (sada A, Owner 3.10.2026) */
.account-gear { display: none; }
.ic-billing { --ic: url("/icons/ui/billing.svg"); }
.ic-dollar { --ic: url("/icons/ui/dollar.svg"); }
.ic-upgrade { --ic: url("/icons/ui/upgrade.svg"); }
.ic-connections { --ic: url("/icons/ui/connections.svg"); }
.ic-language { --ic: url("/icons/ui/language.svg"); }
.ic-wave { --ic: url("/icons/ui/wave.svg"); }  /* Oslovenie (Owner 13.10.2026): mávajúca ruka */
.ic-download { --ic: url("/icons/ui/download.svg"); }
.ic-info { --ic: url("/icons/ui/info.svg"); }
.ic-log-out { --ic: url("/icons/ui/log-out.svg"); }
.ic-log-in { --ic: url("/icons/ui/log-in.svg"); }
.ic-personal { --ic: url("/icons/ui/personal.svg"); }
.ic-admin { --ic: url("/icons/ui/admin.svg"); }  /* Admin — postavička (Owner 11.10.2026) */
.ic-sun { --ic: url("/icons/ui/sun.svg"); }  /* Motív — svetlý / tmavý vzhľad (Owner 17.10.2026) */
.ic-sliders { --ic: url("/icons/ui/sliders.svg"); }  /* Settings — posuvníky (Owner 11.10.2026) */
.ic-apple { --ic: url("/icons/ui/apple.svg"); }
.ic-back { --ic: url("/icons/ui/back.svg"); }
.ic-dot { --ic: url("/icons/ui/dot.svg"); }
.ic-file { --ic: url("/icons/ui/file.svg"); }
/* ikony priečinkov v bubline Storage od Ownera (1.10.2026) */
.ic-document { --ic: url("/icons/ui/document.svg"); }
/* menu účtu po kontrole Astry (Owner 13.10.2026): postava, slúchadlá, koláčový graf */
.ic-person { --ic: url("/icons/ui/person.svg"); }
.ic-headset { --ic: url("/icons/ui/headset.svg"); }
.ic-chart-pie { --ic: url("/icons/ui/chart-pie.svg"); }
.ic-gift { --ic: url("/icons/ui/gift.svg"); }
/* ikony priečinkov v bubline Storage: jednotná farba ako ostatné ikony (Owner 2.10.2026 — predtým farebné ako Grok);
   farbu v Coburgu nesie len oranžová (vybrané) */
.ic.tone-documents, .ic.tone-pictures, .ic.tone-threads { color: inherit; }
.ic-wrap { --ic: url("/icons/ui/wrap.svg"); }
.ic-windows { --ic: url("/icons/ui/windows.svg"); }
.ic-mail { --ic: url("/icons/ui/mail.svg"); }
.ic-radar { --ic: url("/icons/ui/radar.svg"); }
.ic-credit { --ic: url("/icons/ui/credit.svg"); }
.ic-communication { --ic: url("/icons/ui/communication.svg"); }
.ic-support { --ic: url("/icons/ui/support.svg"); }  /* Podpora: dve postavičky (Owner 13.10.2026, návrh B) */
.ic-rules { --ic: url("/icons/ui/rules.svg"); }
.ic-routing { --ic: url("/icons/ui/routing.svg"); }
.menu-img { width: 18px; height: 18px; flex: none; object-fit: contain; }

/* --- bočný panel ------------------------------------------------------------------------------------------------ */
.app { display: flex; background: var(--raised); }
.nav {
  position: relative; flex: none; width: var(--nav-width); background: var(--raised); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; transition: width .2s ease-out; font-family: var(--sans);
}
body.nav-resizing .nav { transition: none; }
body.nav-resizing { cursor: col-resize; user-select: none; }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

.nav-head { display: flex; align-items: flex-start; justify-content: space-between; flex: none; padding: 10px 14px 0 16px; }
.wordmark { font-family: "Lora", Georgia, serif; font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.1; color: var(--ink); }
.wordmark-dot { color: var(--ball); font-weight: 700; }
html.ball-atlas { --ball: #38BDF8; }  /* Coburg Atlas — svetlomodrá */
html.ball-muse { --ball: #A855F7; }   /* Coburg Muse — fialová */
.wordmark-home { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.wordmark-home:focus-visible { outline: 2px solid #FF650B; outline-offset: 3px; border-radius: 4px; }
.nav-close { display: none; }

/* Chats a Projects ako samostatné riadky, bez bubliny — rovnako ako na mobile (Owner 30.9.2026); ikona a text na tej
   istej osi ako ostatné riadky panela (New Chat, Storage…) */
.mode-card { flex: none; margin: 0; padding: 0 6px; background: none; border: none; border-radius: 0; }
.mode-row {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; padding: 2.5px 19px 2.5px 10px; border: 1px solid transparent;
  border-width: 1px 0; border-radius: 8px; background: none; font: inherit; font-family: var(--ui); font-size: 14px; line-height: 21.2px; color: var(--item);
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mode-row .ic { margin-right: 4px; }
.mode-row:hover { background-color: var(--nav-hover); }
.mode-row.current, .mode-row.current:hover { color: var(--ink); background-color: var(--row-open); }
.mode-name { flex: 1; min-width: 0; }
.menu-check { width: 15px; height: 15px; flex: none; }

.nav-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 30px 14px 8px; scrollbar-width: thin; }
.nav-scroll::-webkit-scrollbar { width: 10px; }
.nav-scroll::-webkit-scrollbar-thumb { background: #d5d5cc; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }

/* riadok v paneli (rozhovor, Nový rozhovor, úložisko, poskytovateľ) */
.row {
  display: flex; align-items: center; gap: 9px; width: calc(100% + 16px); margin: 0 -8px; box-sizing: border-box; min-height: 32px;
  padding: 2.5px 19px 2.5px 10px; border: 1px solid transparent; border-width: 1px 0; border-radius: 8px; background: none;
  background-clip: padding-box; font: inherit; font-family: var(--ui); font-size: 14px; line-height: 21.2px; color: var(--item);
  text-align: left; cursor: pointer; transition: background .12s, color .12s; -webkit-tap-highlight-color: transparent;
}
.row:hover { background-color: var(--row-hover); }
.row:focus, .tr-row:focus, .mode-row:focus { outline: none; }  /* .mode-row (Chats, Projects): modrý rámik Safari po otvorení menu (Owner 30.9.2026) */
/* Oranžový rámček len pri ovládaní klávesnicou (Tab) — nie po kliknutí, ťuknutí ani keď stránka sama presunie kurzor
   (napr. do menu v mobile); Owner 28.9.2026. Trieda .kbd na <html> nastavuje app.js. */
html.kbd .row:focus-visible, html.kbd .mode-row:focus-visible { outline: 2px solid #E55700; outline-offset: -2px; }
.row .ic { width: 18px; height: 18px; margin-right: 4px; }
.row-logo { width: 18px; height: 18px; flex: none; object-fit: contain; margin-right: 4px; }
.row-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-weight: 400; transition: color .12s; }
.new-chat { padding-left: 10px; padding-right: 8px; }  /* ikona „+“ v jednej línii s ikonami riadkov nad ňou (Owner 3.10.2026) */
/* „+ New“ prvý riadok nad Chats (Owner 7.10.2026): v karte režimov bez presahu riadkov z nav-scroll, riadkovanie ako Chats */
.nav-new { flex: none; margin: 14px 0 0; padding: 0 6px; }  /* stred „+ New“ 44 px pod stredom nápisu Coburg — ako Claude */
.nav-new > .new-chat { width: 100%; margin: 0; }
/* Chats … Projects sú v posuvnej časti (Owner 7.10.2026): pri dlhom zozname sa všetko zasúva pod pevný riadok „+ New“;
   karta režimov presahuje okraje posuvnej časti, aby riadky ostali presne tam, kde boli */
.nav-scroll > .mode-card { margin: 0 -14px; }
/* „+“ v sivej guličke veľkej ako gulička s kolieskom Settings (25 px, Owner 4.10.2026); stred guličky aj „+“ v jednej
   zvislej línii so stredmi ikon nad ňou (25 px od okraja), text v línii s ostatnými riadkami */
.plus-ball { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px;
  margin: 0 0.5px 0 -3.5px; border-radius: 50%; background: #ECEBE9; color: var(--ink); }
.plus-ball .ic { width: 18px; height: 18px; margin: 0; }  /* veľké ako ostatné ikony panela, presne v strede guličky */
/* poradie (Owner 7.10.2026): + New → Chats … Projects → Storage → voľný riadok → Pinned */
@media (min-width: 761px) {
  .nav-scroll:has(> .nav-storage) { padding-top: 0; }
  .nav-sec.nav-storage { margin-top: 0; margin-bottom: 30px; }
  .nav-sec.nav-storage { display: none; }  /* Úložisko je v menu účtu (Owner 16.10.2026) */
  /* Pinned a Threads v pomeroch mobilu (Owner 5.10.2026, iPhone: nadpis 0,85 kroku riadku pod posledným riadkom, prvý
     riadok 0,68 kroku pod nadpisom; krok riadku tu 32 px): bez voľného riadku medzi sekciami, nadpis bližšie k riadku pod
     ním — stred nadpisu 22 px nad stredom prvého riadku (predtým 28) a Threads 27 px pod stredom posledného riadku
     Pinned (predtým 58) */
  .sec-head:not(.sec-button) { min-height: 18px; padding-top: 0; padding-bottom: 0; margin-bottom: -3px; position: relative; z-index: 1; pointer-events: none; }
  /* o kúsok väčšia medzera medzi posledným riadkom Pinned a nadpisom Threads (Owner 6.10.2026) — predtým 2 px */
  .nav-sec[aria-label="Threads"] { margin-top: 14px; }
}

/* riadok s náhradou pri prejdení („Change Provider“) — ako v aplikácii pre Mac */
.swap-row { margin-top: 2px; }
.swap-ic, .swap-hover { display: none; }
.swap-row:hover .swap-rest, .swap-row:hover .row-logo { display: none; }
.swap-row:hover .swap-ic { display: inline-block; }
.swap-row:hover .swap-hover { display: inline; }
.swap-row:hover { background-color: var(--soft-hover); }

/* sekcie */
.nav-sec { margin-top: 30px; }
/* nadpis sekcie Pinned a Threads: vždy otvorená, nezbaľuje sa; bez ikony, menšie sivé písmo a nižší riadok
   (Owner 30.9.2026, druhá úprava) — nie je to tlačidlo */
.sec-head {
  display: flex; align-items: center; gap: 9px; width: calc(100% + 16px); margin: 0 -8px; box-sizing: border-box; min-height: 24px;
  padding: 1px 19px 1px 10px; font-family: var(--ui); font-size: 12.5px; line-height: 18px; color: var(--sec-head); cursor: default;
}
.sec-ic { width: 18px; height: 18px; flex: none; margin-right: 4px; }
.sec-name { flex: 1; min-width: 0; }
.tint-strip { display: none; }
.storage-check { display: none; }  /* fajka pri Storage len na mobile pri otvorenej bublinke */
.ic-storage { --ic: url("/icons/ui/storage.svg"); }  /* oblak: úložisko (sada A, Owner 3.10.2026) */
.ic-threads { --ic: url("/icons/ui/threads.svg"); }
/* Storage je riadok v bežnom formáte s ikonou (storage.svg) — klik otvorí bublinu úložiska (Owner 30.9.2026) */
.sec-head.sec-button {
  min-height: 32px; padding: 2.5px 19px 2.5px 10px; font-size: 14px; line-height: 21.2px; color: var(--item);
  position: relative;  /* šípka vpravo (.storage-chev je absolútna) ostane v tomto riadku */
  border: none; border-radius: 8px; background: none; font-weight: inherit; text-align: left; cursor: pointer;  /* veľkosť písma z .sec-head */
  transition: background .12s; -webkit-tap-highlight-color: transparent;
}
.sec-head.sec-button:hover, .sec-head.sec-button.menu-open { background-color: var(--row-hover); }
.sec-head.sec-button:focus { outline: none; }
html.kbd .sec-head.sec-button:focus-visible { outline: 2px solid #E55700; outline-offset: -2px; }
.sec-head.sec-button .storage-chev { width: 15px; height: 15px; flex: none; opacity: 0; transition: opacity .12s; }
.sec-head.sec-button:hover .storage-chev, .sec-head.sec-button.menu-open .storage-chev { opacity: .6; }
/* súbory priečinka vo vedľajšej bubline — široká ako bublina úložiska (šírku dáva sidebar.js) */
.nav-rows { display: flex; flex-direction: column; }

/* riadok úložiska ako v aplikácii pre Mac: pri prejdení „Change Storage“ s ikonou Change a šípkou vpravo */
.storage-row { cursor: pointer; position: relative; }
.storage-row:hover, .storage-row.menu-open { background-color: var(--soft-hover); }
.storage-row .row-logo { width: 20px; height: 20px; }
.storage-row:hover .swap-rest, .storage-row:hover .row-logo, .storage-row.menu-open .swap-rest, .storage-row.menu-open .row-logo { display: none; }
.storage-row:hover .swap-ic, .storage-row.menu-open .swap-ic { display: inline-block; }
.storage-row:hover .swap-hover, .storage-row.menu-open .swap-hover { display: inline; }
.storage-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; opacity: 0; transition: opacity .12s; }
.storage-row:hover .storage-chev, .storage-row.menu-open .storage-chev { opacity: 1; }
.menu-row.disabled .menu-img { filter: grayscale(1); opacity: .3; }  /* sivé, ale s kresbou — štvorčekové logá (HubSpot, Stripe) nie sú len sivý štvorec (Owner 9.10.2026) */
/* prázdne Pripnuté / Vlákna rovnakým písmom ako „No Pinned Project“ pod Projects (Owner 4.10.2026): 14 px, mobil 16 px */
.nav-empty { font-size: 14px; color: var(--unavailable); padding: 6px 2px; font-family: var(--ui); }

/* strom úložiska (Kocka 5b, ako v aplikácii pre Mac): priečinok = šípka + názov, súbor = krúžok + názov */
.storage-tree { margin: 0 -8px; width: calc(100% + 16px); font-family: var(--ui); }
.tree-wait { font-size: 11.5px; color: var(--faint); padding: 8px; }
.tr-row {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; min-height: 28px; padding: 3.4px 16px 3.4px 10px;
  border: none; border-radius: 8px; background: none; font: inherit; color: var(--item); text-align: left; cursor: pointer;
}
.tr-row:hover, .tr-row.menu-open { background-color: var(--row-hover); }
html.kbd .tr-row:focus-visible { outline: 2px solid #E55700; outline-offset: -2px; }
.tr-chev { width: 15px; height: 15px; }
.tr-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; line-height: 21.2px; font-size: 14px; }
.tr-sub { position: relative; }
.tr-sub::before { content: ""; position: absolute; left: 17.5px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tr-file { padding-left: 26px; }
.tr-file .tr-name {
  font-size: 13px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%); margin-right: -7px;
}
.tr-file-icon { width: 18px; height: 18px; color: var(--faint); }
.tr-file .row-more { opacity: 0; }
.tr-file:hover .row-more, .tr-file.menu-open .row-more { opacity: 1; }

/* rozhovor v zozname: bez ikony, maska vpravo namiesto „…“, šípka menu pri prejdení */
.thread-row { gap: 0; transition: background .12s, color .12s, gap .12s ease; }
.thread-row:hover, .thread-row.menu-open { gap: 9px; }
.thread-row .row-name {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  /* ako Claude (Owner 7.10.2026): v základnom zobrazení text bledne až takmer k okraju riadku (4 px) — cez miesto
     neviditeľnej šípky (18 px) a pravý okraj riadku; pod kurzorom ustúpi a šípka dostane miesto ako doteraz */
  margin-right: -33px; transition: margin-right .12s ease, color .12s;
}
.thread-row:hover .row-name, .thread-row.menu-open .row-name { margin-right: -7px; }
.row-name-scroll { display: inline-block; will-change: transform; }
.thread-row.on { background-color: var(--row-open); color: var(--ink); }
.thread-row.menu-open:not(.on) { background-color: var(--row-hover); }
.row-more {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px;
  padding: 0; border: none; background: none; color: inherit; opacity: 0; transition: opacity .12s ease; cursor: pointer;
}
.row-more .ic { width: 15px; height: 15px; margin: 0; }
.row-more::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 28px; transform: translate(-50%, -50%); border-radius: 14px; }
.thread-row:hover .row-more, .thread-row.menu-open .row-more, .row-more:focus-visible { opacity: 1; }
.pin-row { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pin-empty { color: var(--unavailable); cursor: default; }
.pin-empty:hover { background: none; }
body.pin-reordering, body.pin-reordering * { cursor: grabbing !important; user-select: none; }
.pin-dragging { position: relative; z-index: 3; pointer-events: none; opacity: .92; background-color: var(--row-hover); }

/* premenovanie priamo v riadku */
.thread-row.renaming { gap: 9px; }
.thread-row.renaming .row-name { -webkit-mask-image: none; mask-image: none; margin-right: 0; }
.is-renaming {
  background: rgba(47, 128, 230, .13); border-radius: 4px; padding: 1px 3px; margin: -1px -3px; outline: none; white-space: pre; max-width: 100%;
  overflow-x: hidden; color: var(--ink); cursor: text;
}
/* bledomodrá ako štítok „QUICK ANSWER…“ a pole s menom v Settings — farebne jednotne (Owner 12.10.2026) */
.is-renaming::selection { background: rgba(47, 128, 230, .28); color: #1A63B8; }
.rename-msg { font-family: var(--ui); font-size: 11.5px; color: #C04841; padding: 2px 0 4px 2px; }

/* bežiaci rozhovor: vlniaci sa názov */
.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 aiWaitWave { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) {
  .waving { animation: none; background-image: none; -webkit-text-fill-color: currentColor; color: var(--faint); }
}

/* spodok panela */
.nav-bottom { position: relative; flex: none; z-index: 30; padding: 8px 14px 10px; background: var(--raised); border-top: none; }
.foot-line { display: flex; align-items: center; gap: 4px; }
.account {
  display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 2.5px 11px 2.5px 2px;
  border: 1px solid transparent; border-width: 1px 0; border-radius: 8px; background: none; font: inherit; font-family: var(--ui);
  font-size: 14px; line-height: 21.2px; color: var(--item); cursor: pointer; text-align: left;
}
.account:hover, .account[aria-expanded="true"] { background: var(--soft-hover); }
.avatar {
  flex: none; width: 25px; height: 25px; border-radius: 50%; background: #E1E0E0; color: var(--ink); display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1;
}
/* v guličke ozubené koliesko namiesto začiatočného písmena (Owner 3.10.2026, ako aplikácia pre Mac) */
.avatar { font-size: 0; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(15, 15, 12, .08), 0 1px 3px rgba(15, 15, 12, .10); }  /* biela gulička (Owner 3.10.2026) */
.avatar::after {
  content: ""; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: url("/icons/ui/settings.svg") center / contain no-repeat; mask: url("/icons/ui/settings.svg") center / contain no-repeat;
}
.account-name {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
}
.navtoggle {
  width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex: none; padding: 0;
  border: none; background: none; color: var(--item); cursor: pointer;
}
.navtoggle:hover { background: var(--nav-hover); }

/* menu účtu (ako v aplikácii pre Mac): e-mail hore, skupiny oddelené čiarou */
/* Owner 4.10.2026: bublina ako Storage (okraje, ikony v línii s panelom) a riadky ako horná časť panela (32 px) */
.menu.menu-account { min-width: 0; max-width: none; padding: 7px 4px; border-color: var(--line); box-shadow: 0 8px 28px rgba(28, 28, 30, .14); }
.menu-account .menu-row { gap: 13px; min-height: 32px; padding: 2.5px 24px 2.5px 5px; line-height: 21.2px; }
.menu-account .menu-row:hover { background: var(--soft-hover); }
.menu-account .menu-head { padding-left: 5px; }
/* hlavička menu účtu (Owner 16.10.2026): celé meno a pod ním e-mail, v strede */
.menu-account .menu-head.menu-acct { padding: 8px 8px 6px; text-align: center; white-space: normal; }
.menu-acct-name { font-size: 14px; line-height: 19px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-acct-mail { margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-account .menu-sep { margin: 5px 9px; }
.menu.flyout { width: 176px; min-width: 0; padding: 6px; border-color: var(--line); box-shadow: 0 8px 28px rgba(28, 28, 30, .14); z-index: 61; }
.menu.flyout .menu-row { gap: 8px; padding-left: 10px; }
.menu.flyout .menu-row.current { background: var(--row-open); color: var(--ink); }
.menu.flyout .menu-row.current.plain { background: none; }
.menu.flyout .menu-row.current.plain:hover, .menu.flyout .menu-row.current.plain:focus-visible { background-color: var(--nav-hover); }
.menu.flyout { max-height: calc(100vh - 16px); }
/* druhá bublina menu účtu (Owner 5.10.2026): široká presne ako prvá (šírku nastaví ui.js), riadky 32 px ako v paneli */
.menu.flyout.flyout-account { padding: 7px 4px; }
.menu.flyout.flyout-account .menu-row { min-height: 32px; padding: 2.5px 24px 2.5px 10px; line-height: 21.2px; }
.menu-sub { margin-left: auto; padding-left: 10px; font-size: 12px; line-height: 1; opacity: 0; }
.menu-tail-ic { margin-left: auto; flex: none; width: 18px; height: 18px; }  /* ikona na konci riadku (zámena úložiska) */
/* Free (Owner 17.10.2026): zámok pri platených modeloch vždy vpravo pod sebou, ako fajka */
#row-menu.menu-models .menu-row:has(.ic-lock) { position: relative; padding-right: 40px; }
#row-menu.menu-models .menu-row .menu-tail-ic.ic-lock { position: absolute; right: 14px; top: 50%; margin: -8px 0 0; width: 16px; height: 16px; background-color: #8A8A80; }
.menu-row:hover .menu-sub, .menu-row.flyout-open .menu-sub { opacity: 1; }
/* obrázok otvorený zo Storage (Owner 1.10.2026): celý v paneli, bez lišty úložiska */
.doc-picture { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 16px; box-sizing: border-box; }
.doc-picture img { display: block; max-width: 100%; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); object-fit: contain; border-radius: 12px; }
/* prázdny priečinok v bubline Storage: „No files yet“ vpravo, bez šípky a bez reakcie (Owner 1.10.2026) */
.menu-row.empty, .menu-row.empty:hover { cursor: default; background: none; }
.menu-row.empty .menu-hint { color: var(--unavailable); }
.ms-row.ms-empty-folder { cursor: default; }
.ms-row.ms-empty-folder .ms-value { color: #C3C1BB; }
/* bublina Storage: šípka vpravo vždy viditeľná — riadok má pokračovanie (Owner 1.10.2026) */
.menu-storage .menu-sub { opacity: .55; font-size: 15px; }
.menu-storage .menu-row:hover .menu-sub, .menu-storage .menu-row.flyout-open .menu-sub { opacity: 1; }
.menu-row.flyout-open { background: var(--soft-hover); }
.menu-head { padding: 6px 10px 8px; font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-head.menu-title { display: flex; align-items: center; gap: 13px; box-sizing: border-box; height: 32px; min-height: 32px; padding: 2.5px 24px 2.5px 9px; font-size: 14px; line-height: 21.2px; font-weight: 400; color: var(--item); }  /* „Google Drive“ ako ostatné riadky (Owner 3.10.2026) */
/* bublina Storage na počítači: riadky ako názvy vlákien v paneli (Owner 3.10.2026) */
@media (min-width: 761px) {
  .menu.menu-storage .menu-row { min-height: 32px; padding-top: 2.5px; padding-bottom: 2.5px; padding-left: 5px; line-height: 21.2px; }
  .menu.menu-storage .menu-head.menu-title { padding-left: 5px; }  /* ikony v línii s panelom (16 px) */
  /* otvorená bublina Storage: oranžová fajka a sivý riadok prejdú na Storage, režim aj projekt zhasnú */
  #sec-storage.menu-open .storage-check { display: block; }
  #sec-storage.menu-open .sec-name { flex: 0 1 auto; }
  #sec-storage.menu-open .storage-chev { margin-left: auto; }
  #sec-storage.menu-open, #sec-storage.menu-open:hover { background-color: var(--row-open); color: var(--ink); }
  .nav:has(#sec-storage.menu-open) .mode-row .menu-check { display: none; }
  .nav:has(#sec-storage.menu-open) .mode-row.current { background-color: transparent; color: var(--item); }
  .nav:has(#sec-storage.menu-open) .mode-row.active-project { color: #D8D6D2; }
}

/* hlavička panela ako Claude (Owner 5.10.2026, počítač): vľavo tlačidlo zbalenia — ikona v stĺpci ikon riadkov (stred
   25 px), „Coburg.“ obyčajným rezom tam, kde začínajú texty riadkov (47 px). Lupa je dole na mieste, kde bolo zbalenie.
   Zbalený panel má tlačidlo rozbalenia presne na tom istom mieste. Mobil ostáva bez zmeny (tlačidlo je tam skryté). */
@media (min-width: 761px) {
  .nav-head { align-items: center; justify-content: flex-start; gap: 8px; padding: 8px 14px 0 11px; }
  .nav-head .wordmark, .nav-head .wordmark-dot { font-weight: 400; }
  .nav-head .wordmark { font-size: 20px; }  /* veľkosť ako „Claude“ v jeho paneli — zmerané podľa výšky písmena C (Owner 5.10.2026) */
  .app.nav-collapsed .nav-rail { align-items: flex-start; padding: 8px 0 0 11px; }
}

/* zbalený panel: len tlačidlo na rozbalenie */
.nav-rail { display: none; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; }
.rail-btn {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: none; background: none;
  color: var(--dim); cursor: pointer; transition: background .12s, color .12s;
}
.rail-btn:hover { background: var(--nav-hover); color: var(--ink); }
@media (min-width: 761px) {
  .app.nav-collapsed .nav { width: 56px; border-right: none; }
  .app.nav-collapsed .nav > :not(.nav-rail) { display: none; }
  .app.nav-collapsed .nav-rail { display: flex; }
}

/* ťahadlo šírky na hrane panela */
.resizer {
  position: absolute; top: 0; bottom: 0; right: 0; width: 9px; transform: translateX(4.5px); cursor: col-resize; z-index: 40;
  display: flex; align-items: center; justify-content: center; touch-action: none;
}
.resizer::after { content: ""; width: 4px; height: 32px; border-radius: 999px; background: var(--line2); opacity: 0; transition: opacity .12s ease-out; }
.resizer:hover::after, body.nav-resizing .resizer::after { opacity: 1; }

/* --- hlavička rozhovoru (počítač) ------------------------------------------------------------------------------------- */
.main { background: var(--raised); }
.chat-head { flex: none; display: flex; align-items: center; min-height: 49px; padding: 1px 26px; background: var(--raised); }
.chat-title {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 5px 8px; margin: -5px -8px; border: none;
  border-radius: 8px; background: none; font: inherit; font-family: var(--ui); font-size: 14px; font-weight: 400; color: var(--ink);
  cursor: pointer; text-align: left;
}
.chat-title:hover { background: var(--row-hover); }
.chat-title-name { min-width: 0; max-width: 560px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-title-chev { width: 15px; height: 15px; }

/* --- menu ------------------------------------------------------------------------------------------------------------- */
.menu {
  position: fixed; z-index: 60; display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; background: #fff;
  border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 7px; width: max-content;
  min-width: 150px; max-width: calc(100vw - 40px); box-sizing: border-box; font-family: var(--ui);
}
.menu-row {
  display: flex; align-items: center; gap: 13px; width: 100%; min-height: 26px; padding: 3px 24px 3px 9px; border: none; border-radius: 8px;
  background: none; font: inherit; font-size: 14px; line-height: 20px; color: var(--item); cursor: pointer; text-align: left;
}
.menu-row:hover, .menu-row:focus-visible { background-color: var(--nav-hover); outline: none; }
.menu-row.current { color: var(--ink); }
.menu-row.disabled { color: var(--unavailable); cursor: default; }
/* Odstrániť (rozhovor, súbor): ikona aj text oranžové #FF650B — počítač (menu) aj mobil (bublinka), Owner 3.10.2026 */
.menu-row.danger, .ms-row.ms-danger, .ms-row.ms-danger .ms-name { color: var(--orange); }
.menu-row.disabled:hover { background: none; }
.menu-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-hint { color: var(--faint); font-size: 11.5px; }
.menu-chev { width: 15px; height: 15px; opacity: 0; }
.menu-row:hover .menu-chev, .menu-row:focus-visible .menu-chev { opacity: 1; }
.menu-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin: 0 2px; border: 1px solid rgba(0, 0, 0, .1); box-sizing: border-box; }
.menu-sep { flex: none; height: 1px; background: var(--line); margin: 5px 9px; }

/* --- upozornenie (Owner 14.10.2026): okno v strede, stmavené pozadie, nadpis, žltý trojuholník, text a OK ------------ */
.toast {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px;
  box-sizing: border-box; background: rgba(0, 0, 0, .32); opacity: 0; transition: opacity .16s ease;
}
.toast.show { opacity: 1; }
.toast[hidden] { display: none; }
.toast-card {
  width: min(340px, 100%); box-sizing: border-box; padding: 22px 22px 18px; border-radius: 22px; background: #FFFFFF;
  box-shadow: 0 12px 40px rgba(20, 20, 15, .18); display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; font-family: var(--ui); color: var(--ink); transform: scale(.96); transition: transform .16s ease;
}
.toast.show .toast-card { transform: none; }
.toast-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.toast-ic { width: 44px; height: 44px; }  /* ako ikony pod nadpisom bubliniek (support-head-ic) */
.toast-text { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }  /* web 15, mobil 17 — rovnako ako otázky (Owner 16.10.2026) */
.toast-ok {
  align-self: stretch; height: 44px; margin-top: 4px; border: none; border-radius: 999px; background: var(--ink); color: #FFFFFF;
  font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* --- potvrdzovacie okno ----------------------------------------------------------------------------------------------- */
.modal-scrim {
  position: fixed; inset: 0; background: rgba(20, 20, 16, .45); z-index: 50; opacity: 0;
  transition: opacity 220ms cubic-bezier(.4, 0, 1, 1);
}
.modal-scrim.show { opacity: 1; transition: opacity 260ms cubic-bezier(.2, 0, 0, 1); }
.modal {
  position: fixed; top: 50%; left: 50%; z-index: 51; width: calc(100vw - 40px); max-width: 520px; max-height: calc(100vh - 90px);
  overflow-y: auto; box-sizing: border-box; background: #F3F3F0; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
  font-family: var(--sans); opacity: 0; transform: translate(-50%, -50%) translateY(12px) scale(.98);
  transition: opacity 220ms cubic-bezier(.4, 0, 1, 1), transform 220ms cubic-bezier(.4, 0, 1, 1);
}
.modal.show { opacity: 1; transform: translate(-50%, -50%); transition: opacity 260ms cubic-bezier(.2, 0, 0, 1), transform 260ms cubic-bezier(.2, 0, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal.show { transform: translate(-50%, -50%); transition: opacity 200ms linear; }
}
.sd2-confirm { padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 8px; }
.testing-wa { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #6B6A66; }  /* Owner 4.10.2026 */
.testing-wa-logo { width: 18px; height: 18px; flex: none; }
.sd2-eyebrow { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #FF650B; }
.sd2-confirm h2 { font-family: "Lora", Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.15; margin: 0; color: var(--ink); }
.sd2-confirm p { margin: 0; font-size: 14px; color: var(--faint); }
.sd2-warntri { display: inline-block; width: .78em; height: .78em; margin-left: .34em; vertical-align: -.06em; }
.sd2-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 26px 24px; }
.sd2-actions.single { grid-template-columns: 1fr; }
/* užšia (Owner 4.10.2026: bola 277 px — zbytočne široká); širšia len keď sa dlhý názov inak nezmestí (Nano Banana Pro
   a dlhý preklad „Version“) — nikdy neskráti text */
/* všetky bubliny výberu modelu rovnako široké (Owner 6.10.2026) — v prvej sú len názvy poskytovateľov, preto užšia */
.menu.menu-models { width: 254px; min-width: 0; max-width: calc(100vw - 16px); box-sizing: border-box; }
/* Change Storage (ako v aplikácii pre Mac, Owner 28.9.2026): šírku a polohu dáva sidebar.js (8 px od okrajov panela ako
   karta Chat/Loop); značky úložísk majú rovnakú viditeľnú veľkosť už v súboroch
   (/icons/brands, design/brand-logos/normalizuj.py, Owner 9.10.2026) — žiadne zväčšovanie/zmenšovanie v CSS. */
.menu.menu-storage { min-width: 0; max-width: none; padding-left: 4px; padding-right: 4px; }  /* ikony v línii s panelom */
.menu-storage .menu-img, #flyout-menu.flyout-storage .menu-img { width: 18px; height: 18px; }  /* logá veľké ako ikony (Owner 3.10.2026) */
@media (min-width: 761px) {
  #flyout-menu.flyout-storage .menu-row { min-height: 32px; padding-top: 2.5px; padding-bottom: 2.5px; line-height: 21.2px; }
  #flyout-menu.flyout-storage { min-width: 210px; }  /* „Google Drive“ celé, bez skrátenia */
}
.menu-models .menu-row { min-height: 28px; line-height: 21px; }
.menu-models .menu-img { width: 16px; height: 16px; }
/* Nadpis bubliny modelu ako na mobile (Owner 4.10.2026): v strede „Select model“, alebo ikona a názov modelu a pod ním
   sivé „Select version“ / „Select effort“; vľavo šípka späť na zoznam modelov */
.menu-titlebar { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 32px; padding: 4px 30px 8px; box-sizing: border-box; text-align: center; }
/* šírka 254 (Owner 6.10.2026): najdlhší nadpis „BytePlus Seedream“ 132 + okraje 2×30 + ikona a protiváha 2×23 + bublina 16 */
.menu-title-main { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; font-size: 14px; line-height: 20px;
  font-weight: 600; color: var(--ink); white-space: nowrap; }
.menu-title-main > span { overflow: hidden; text-overflow: ellipsis; }
.menu-title-main .menu-img { width: 16px; height: 16px; flex: none; }
/* názov modelu presne v strede bubliny (Owner 6.10.2026): napravo neviditeľný pás široký ako ikona vľavo */
.menu-title-main:has(> .menu-img)::after { content: ""; width: 16px; flex: none; }
.menu-title-sub { font-size: 12.5px; line-height: 17px; color: #6B6A66; }
/* rozdeľovník pod nadpisom bubliny modelu, ako .menu-sep (Owner 6.10.2026) */
/* nadpis a čiara stoja hore, zoznam sa pri posúvaní schováva presne pod čiaru (Owner 17.10.2026) — biele pozadie
   prekryje aj horný okraj bubliny, aby nad nadpisom nepresvital posúvaný riadok */
.menu-titlebar { position: sticky; top: -7px; z-index: 2; margin: -7px 0 3px; padding-top: 11px; padding-bottom: 12px;
  background: #fff; flex: none; }
.menu-titlebar::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 1px; background: var(--line); }
.menu-back { position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border: none; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center; background: none; color: var(--item); cursor: pointer; }
.menu-back:hover { background: var(--nav-hover); }
.menu-back .ic { width: 15px; height: 15px; }
/* Model a Effort ako na mobile (Owner 4.10.2026): vľavo hodnota, vpravo oranžový názov voľby v rovnakej veľkosti písma
   a šípka doprava, ktorá ostáva vidieť */
.menu-swap .menu-hint { color: var(--orange); font-size: inherit; flex: none; }
.menu-models .menu-row.menu-swap { gap: 10px; padding-right: 9px; }  /* šípka bližšie k okraju — dlhá verzia sa zmestí */
.menu-swap .menu-chev { opacity: 1; color: var(--faint); }
.sd2-btn { border-radius: 17.5px; padding: 10px 0; font: inherit; font-size: 14px; font-weight: 500; text-align: center; cursor: pointer; }
.sd2-quiet { border: 1px solid var(--line2); background: none; color: var(--dim); }
.sd2-quiet:hover { background: var(--row-hover); color: var(--ink); }
.sd2-strong { background: var(--ink); color: #fff; border: none; }
.sd2-strong:hover { background: #2e2e2e; }
.sd2-btn:focus:not(:focus-visible) { outline: none; }
a.sd2-btn { display: block; text-decoration: none; }
/* Podpora (Owner 13.10.2026): jediné tlačidlo s logom WhatsApp */
.testing-actions .sd2-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.support-head { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.support-head .ms-card { align-self: stretch; }
.support-head-ic { width: 44px; height: 44px; color: var(--ink); }
.support-head .ms-card .ms-name { font-weight: 600; }  /* Napísať na WhatsApp, Faktúry a platby — tučne ako ostatné riadky */
.support-pop-ic { align-self: center; margin-bottom: 6px; }
/* Jazyk (Owner 13.10.2026): ako Podpora — ikona zemegule, pod ňou text bez bielej karty, potom karta s nastaveniami */
.lang-head .lang-text { margin: 0; padding: 0 6px; text-align: center; color: var(--ink); font-size: 15px; line-height: 1.5; }
.lang-head .lang-card { align-self: stretch; margin-top: 2px; }
.lang-pop .lang-card { margin-top: 18px; text-align: left; }
.lang-pop { width: min(460px, calc(100vw - 32px)); }
/* Ďalšie informácie (Owner 13.10.2026): karta so štyrmi pravidlami, na konci riadku sivá šípka */
.info-row { width: 100%; padding: 0; border: none; border-radius: 0; background: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.info-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.info-chev { flex: none; width: 16px; height: 16px; color: #8a8a80; }
/* Kredit a spotreba (Owner 13.10.2026): koľko ostáva (pruh ako nad chatom) a rozdelenie ako Apple Storage */
.credit-wrap { display: flex; flex-direction: column; gap: 12px; }
.credit-wrap .set-card { margin-top: 0; padding: 16px 20px; }
.credit-big { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--ink); margin-bottom: 10px; }
.credit-big b { font-size: 20px; font-weight: 600; }
.credit-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.credit-bar-fill { display: block; height: 100%; border-radius: 4px; background: #4078D0; }
.credit-bar-fill.high { background: #F0B443; }
.credit-bar-fill.critical { background: #C04841; }
/* kredit navyše (Owner 19.10.2026): oranžový pruh Coburgu na svetlooranžovej dráhe */
.credit-bar-fill.credit-extra-fill { background: #FF650B; }
.credit-extra-text { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: #8C8B86; }
.credit-line, .credit-none { margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; color: #6B6A66; }
/* Dobiť kredit (Owner 14.10.2026, návrh 1): v riadku „Minuté … %“ vpravo oranžová pilulka s lemom (ako pilulka jazyka) */
.credit-line-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }  /* Dobiť kredit vpravo (veta „Minuté…“ odpadla 14.10.2026) */
.credit-line-row .credit-line { margin: 0; min-width: 0; }
.credit-topup {
  flex: none; height: 36px; padding: 0 16px; box-sizing: border-box; border: 1.5px solid var(--orange-line); border-radius: 999px;
  background: #fff; color: var(--orange); font: inherit; font-size: 14.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: border-color .15s;
}
.credit-topup:disabled { opacity: .6; cursor: default; }
@media (hover: hover) and (pointer: fine) { .credit-topup:hover { border-color: var(--orange); } }
.credit-none { margin: 0; font-size: 15px; color: var(--ink); }
.credit-parts-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.credit-seg { display: flex; gap: 2px; height: 12px; margin: 10px 0 6px; border-radius: 6px; overflow: hidden; background: var(--line); }
.credit-seg > span { display: block; height: 100%; }
.credit-legend-row { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; color: var(--ink); }
.credit-legend-row + .credit-legend-row { border-top: 1px solid var(--line); }
.credit-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.credit-pct { margin-left: auto; color: #6B6A66; }
.credit-lock { flex: none; width: 15px; height: 15px; margin-left: -4px; color: #8C8B86; }
button.credit-legend-row { width: 100%; padding: 0; border: none; border-radius: 0; background: none; font: inherit;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) { button.credit-legend-row:hover .credit-lock { color: var(--ink); } }
/* Prepojené aplikácie (Owner 13.10.2026, návrh A): písmená ako Kontakty v iPhone, číslo, logo, názov, fajka; abeceda vpravo */
.conn-wrap { position: relative; align-self: stretch; display: flex; min-height: 0; }
.conn-list { flex: 1 1 auto; min-height: 0; padding-right: 30px; text-align: left; }
.lang-pop .conn-list { max-height: min(52vh, 460px); overflow-y: auto; scrollbar-width: none; }
.conn-letter { margin: 14px 0 6px 6px; font-family: var(--ui); font-size: 12.5px; line-height: 18px; color: var(--sec-head); }
.conn-letter:first-child { margin-top: 0; }
.conn-card.set-card { margin-top: 0; padding: 0 16px; }
.conn-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0; border: none; background: none;
  font: inherit; font-size: 15.5px; color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.conn-row + .conn-row { border-top: 1px solid var(--line); }
.conn-num { flex: none; min-width: 20px; font-size: 13px; color: #8a8a80; font-variant-numeric: tabular-nums; }
.conn-logo { flex: none; width: 22px; height: 22px; object-fit: contain; }
.conn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }  /* tučne ako riadky v ostatných bublinkách (Owner 14.10.2026) */
.conn-check { flex: none; width: 16px; height: 16px; }
.conn-check[hidden] { display: none; }
.conn-list.conn-list-plain { padding-right: 0; }  /* bez písmen vpravo (Angličtina) */
.conn-row.conn-off { cursor: default; color: #A9A8A2; }
.conn-row.conn-off .conn-logo { filter: grayscale(1); opacity: .35; }
/* abeceda vpravo (Owner 13.10.2026): roztiahnutá po výške zoznamu, väčšie písmená — každé písmeno má celé svoje pole
   na ťuknutie (najviac 44 bodov), nie len samotný znak */
.conn-index { position: absolute; top: 0; right: 0; bottom: 0; width: 28px; display: flex; flex-direction: column;
  justify-content: center; align-items: stretch; font-family: var(--ui); font-size: 14px; font-weight: 600;
  color: var(--orange); touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.conn-index > span { flex: 1 1 0; max-height: 44px; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* mobil: bublinka má pevnú výšku (ako menu účtu) — hlavička hore, zoznam vyplní zvyšok a posúva sa prstom */
.modal.account-sheet .ms-page.ms-fill { height: 100%; }
.ms-fill > .ms-top { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ms-fill .lang-head { flex: 1 1 auto; min-height: 0; }
.ms-fill .conn-wrap { flex: 1 1 auto; }
/* dokument v bublinke (Podmienky a súkromie, Owner 14.10.2026): výška ako menu účtu, nadpis s dátumom stoja, pod čiarou
   sa posúva text; dole v strede biela gulička so šípkou hore (vzhľad .policy-to-top z legal.css) */
.ms-policy-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ms-policy {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  text-align: left; padding: 0 6px 72px; scrollbar-width: none;
}
.ms-policy::-webkit-scrollbar { display: none; }
.ms-policy .policy-body { font-size: 15px; line-height: 1.6; }
.ms-policy .policy-body > :first-child { margin-top: 0; }
.ms-policy .policy-body h2 { font-size: 22px; margin: 30px 0 4px; }
.policy-to-top.ms-policy-top { position: absolute; top: auto; bottom: 14px; left: 50%; transform: translateY(6px); }
.policy-to-top.ms-policy-top.show { transform: none; }
/* Plán a fakturácia v menu účtu (Owner 13.10.2026): pod nadpisom kartičky plánov, riadok Faktúry a platby a pätička s DPH */
.plan-list { flex: 1 1 auto; min-height: 0; align-self: stretch; text-align: left; }
/* kartičky pod sebou (Owner 13.10.2026), každá vlastnej výšky; celý obsah sa posúva zvisle (ms-list) */
.plan-list .upgrade-rail { flex-direction: column; width: auto; max-width: none; margin: 0; padding: 0; gap: 12px;
  overflow: visible; scroll-snap-type: none; }
.plan-list .upgrade-card { flex: none; width: auto; }
.plan-list .upgrade-card.is-active { border-color: var(--line); }  /* pod sebou nie je „zvolená“ kartička */
.plan-list .upgrade-rail + .upgrade-dots, .plan-list .upgrade-rail.is-scrolling + .upgrade-dots { display: none; }
.plan-list .upgrade-card { min-height: var(--plan-h, auto); box-sizing: border-box; }
.plan-list .plan-cut { display: none; }  /* jedna výhoda menej, aby sa kartička zmestila na obrazovku (Owner 13.10.2026) */
.upgrade-benefit.plan-only { display: none; }  /* len v bublinke Plán a fakturácia (MCP konektor pri Basic) */
.plan-list .upgrade-benefit.plan-only { display: flex; }
/* v bublinke tesnejšie medzery, aby sa celá kartička (aj Tím s počtom účtov) zmestila medzi nadpis a spodok */
.plan-list .upgrade-card { padding: 18px 20px 16px; }
.plan-list .upgrade-tagline { min-height: 0; }
.plan-list .upgrade-price { margin-top: 12px; }
.plan-list .upgrade-seats { margin-top: 10px; }
.plan-list .upgrade-benefits { margin: auto 0; padding: 15px 0; gap: 12px; }  /* výhody v strede medzi cenou a tlačidlom */
.plan-list .upgrade-cta { margin-top: 0; }
.plan-pinned { flex: none; align-self: stretch; text-align: left; }
/* Faktúry a platby (Owner 13.10.2026): obsah stránky Fakturácia v bubline; tester ho vidí rozmazaný s hlásením navrchu */
.inv-wrap { position: relative; flex: 1 1 auto; min-height: 0; align-self: stretch; display: flex; flex-direction: column; text-align: left; }
.inv-list { flex: 1 1 auto; min-height: 0; }
.inv-list .billing-card { border-radius: 22px; background: #fff; }
.inv-list #billing-change { display: none; }  /* plány sú o krok späť (šípka) */
.inv-list .billing-foot { margin: 12px 0 0; text-align: center; font-size: 12.5px; }
.inv-blur { filter: blur(5px); opacity: .7; pointer-events: none; -webkit-user-select: none; user-select: none; }
.inv-note { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 0 0; background: #F9F9F7; border-radius: 26px 26px 0 0; box-shadow: 0 -10px 24px rgba(20, 20, 15, .07); }
.inv-note .ms-card { align-self: stretch; margin-top: 8px; }
.inv-eyebrow { margin: 4px 0 0; }
.inv-title { margin: 0; font-family: "Lora", Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.2; text-align: center; color: var(--ink); }
.inv-text { margin: 2px 0 0; padding: 0 6px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink); }
/* guľôčky B, P, T vľavo (Owner 13.10.2026, návrh B): bodkovaná čiara medzi nimi, zvolená s oranžovým obrysom */
.plan-mid { flex: 1 1 auto; min-height: 0; align-self: stretch; display: flex; gap: 10px; }
.plan-mid .plan-list { flex: 1 1 auto; min-width: 0; }
.plan-nav { flex: none; width: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.plan-nav-b { position: relative; flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1.5px solid #C9C7C1;
  background: transparent; color: #8a8a80; font-family: var(--ui); font-size: 14px; font-weight: 600; display: flex;
  align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s;
  -webkit-tap-highlight-color: transparent; }
.plan-nav-b.on { border-color: var(--orange); color: var(--orange); background: #fff; }
.plan-nav-b.mine::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: #34C759; border: 2px solid #F9F9F7; }
.plan-nav-line { flex: none; width: 0; height: 44px; margin: 6px 0; border-left: 2px dotted #C9C7C1; }
.plan-pinned .upgrade-foot { margin: 10px 0 0; text-align: center; font-size: 12.5px; }
.plan-pinned .upgrade-foot a { display: block; width: fit-content; margin: 2px auto 0; }  /* Ceny mimo EÚ na vlastnom riadku */
/* riadok „ostáva … %“ v menu: od 80 % žltý, od 92 % červený (ako pruh) */
/* bežne sivý ako text v menu (oranžová len pre zvolené — Owner); od 80 % žltý, od 92 % červený */
.menu-hint.tone-quiet, .ms-value.tone-quiet { color: #8a8a80; }
.menu-hint.tone-high, .ms-value.tone-high { color: #B7791F; }
.menu-hint.tone-critical, .ms-value.tone-critical { color: #C04841; }
/* druhý jazyk tlmočníka: svetlomodrá pilulka ako pilulka tlmočníka v hovore */
.set-lang.set-lang-second { border-color: transparent; background: rgba(47, 128, 230, .13); color: #1A63B8; }
/* kopírovanie medzi úložiskami (Kocka 3e) */
.copy-bar { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--line); overflow: hidden; }
.copy-bar > span { display: block; height: 100%; width: 0; background: #FF650B; transition: width .3s ease; }
.copy-bar.busy { background: linear-gradient(90deg, var(--line) 0%, rgba(255, 101, 11, .35) 50%, var(--line) 100%);
  background-size: 200% 100%; animation: copy-busy 1.2s linear infinite; }
@keyframes copy-busy { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .copy-bar.busy { animation: none; } }

/* --- panel dokumentu (Kocka 5b, ako v aplikácii pre Mac) --------------------------------------------------------- */
:root { --doc-width: 516px; }
.doc-panel {
  flex: none; width: var(--doc-width); background: #fff; border-left: 1px solid var(--line); display: flex; flex-direction: column;
  min-height: 0; overflow: hidden; font-family: var(--sans);
}
.doc-resizer { position: absolute; top: 0; bottom: 0; right: var(--doc-width); left: auto; transform: translateX(4.5px); }
.app { position: relative; }
body.doc-resizing { cursor: col-resize; user-select: none; }
body.doc-resizing .doc-resizer::after { opacity: 1; }
.doc-head { flex: none; height: 40px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; }
.doc-name {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
}
.doc-tools { flex: none; display: flex; align-items: center; gap: 6px; }
#doc-wrap[aria-pressed="true"] { color: #FF650B; }
.doc-body { flex: 1; min-height: 0; overflow: auto; position: relative; }
.doc-prose { padding: 18px 20px 40px; }
.doc-prose.ai-txt { font-size: 15px; line-height: 1.6; }
.doc-prose.ai-txt p, .doc-prose.ai-txt li { font-size: 15px; line-height: 1.6; }
.doc-code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; padding: 12px 0 40px; min-width: max-content; }
.doc-code.doc-wrapped { min-width: 0; }
.doc-line { display: flex; align-items: flex-start; min-height: 20px; }
.doc-lineno { flex: none; position: sticky; left: 0; z-index: 1; text-align: right; padding: 0 10px 0 12px; color: var(--faint); opacity: .7; background: #fff; user-select: none; box-sizing: border-box; }
.doc-linetext { flex: 1; min-width: 0; white-space: pre; padding-right: 16px; }
.doc-wrapped .doc-linetext { white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; box-sizing: border-box; }
.doc-empty-title { font-size: 15.5px; color: var(--dim); max-width: 34ch; }
.doc-empty-sub { font-size: 12px; color: var(--faint); }
.doc-open-btn { border: 1px solid var(--line2); border-radius: 17.5px; padding: 9px 18px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.doc-open-btn:hover { background: var(--row-hover); }
a.iconbtn { color: #5f6268; }

/* --- hľadanie (Kocka 5b, ako v aplikácii pre Mac) ------------------------------------------------------------------ */
.modal.recent-modal { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.recent { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; font-family: var(--sans); }
.recent-head { padding-bottom: 14px; position: relative; flex: none; }
.sd2-dot { color: #FF650B; }
.recent-close {
  position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; border-radius: 8px; border: none; background: none;
  display: flex; align-items: center; justify-content: center; color: var(--faint); cursor: pointer; padding: 0;
}
.recent-close:hover { background: var(--row-hover); color: var(--ink); }
.recent-close .ic { width: 14px; height: 14px; }
.recent-search { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--faint); }
.recent-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; line-height: 21.12px; color: var(--ink); }
.recent-search input::placeholder { color: var(--faint); }
.recent-list { padding: 0 12px 12px; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; max-height: 50vh; }
.recent-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 3.5px 10px; border: none; border-radius: 8px; background: none;
  min-height: 28px; font: inherit; font-size: 15px; line-height: 21.12px; color: var(--ink); text-align: left; cursor: pointer;
}
.recent-row:hover, .recent-row:focus-visible { background: #D8D6D2; outline: none; }
.recent-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%); }
.recent-when { flex: none; color: var(--faint); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recent-empty { margin: 0; padding: 0 12px 18px; color: var(--faint); font-size: 14px; }
.recent-none { margin: 0; padding: 18px 12px; color: var(--faint); font-size: 15px; }
.recent-foot { flex: none; display: flex; align-items: center; gap: 8px; background: #ECEBE9; padding: 10px 22px 14px; border-top: 1px solid var(--line); font-size: 10px; color: var(--faint); }
.recent-mark { width: 18px; height: 18px; }

/* --- Upgrade plan (ako v aplikácii pre Mac) ------------------------------------------------------------------------- */
/* overscroll-behavior: none — stránka sa pri ťahu za okraj nesmie „odtiahnuť“ aj so šípkou späť (Owner 12.10.2026) */
.upgrade {
  position: fixed; inset: 0; z-index: 45; overflow-y: auto; overscroll-behavior: none; background: var(--workflow-canvas); color: var(--ink); font-family: var(--sans);
  font-size: 15px; line-height: 1.5; padding: 20px 32px 56px; box-sizing: border-box;
}
.upgrade-back {
  display: inline-flex; align-items: center; gap: 7px; color: var(--dim); font: inherit; font-size: 14px; cursor: pointer; background: none;
  border: none; padding: 4px 6px; margin: 0 0 28px -6px;
}
.upgrade-back:hover { color: var(--ink); }
.upgrade-head { max-width: 1000px; margin: 1.5em auto 0; text-align: center; }
.upgrade-head h1 { font-family: "Lora", Georgia, serif; font-weight: 400; font-size: 40px; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 12px; }
.upgrade-head p { font-size: 16px; color: var(--faint); margin: 0; }
/* Kartičky plánov (Owner 4.10.2026, návrh A): Basic, Pro, Tím vedľa seba; kde sa nezmestia (mobil), posúvajú sa prstom
   so zarážkou na každej kartičke a pod nimi sú bodky. Jediné čierne tlačidlo je Basic, ostatné oranžové s obrysom. */
.upgrade-rail {
  display: flex; gap: 20px; width: max-content; max-width: 100%; margin: 36px auto 0; box-sizing: border-box; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; align-items: stretch;
}
.upgrade-rail::-webkit-scrollbar { display: none; }
/* šírka aj ako width: Safari (WebKit) inak počíta šírku radu z nezalomeného textu kartičiek a rad nie je v strede */
.upgrade-card {
  flex: 0 0 318px; width: 318px; scroll-snap-align: center; box-sizing: border-box; background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 26px 24px; display: flex; flex-direction: column;
}
.upgrade-name { margin: 0; font-family: "Lora", Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.2; }
.upgrade-tagline { margin: 6px 0 0; min-height: 40px; font-size: 14.5px; line-height: 20px; color: #6B6A66; }
.upgrade-price { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; }
.upgrade-price b { font-size: 44px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.upgrade-price span { font-size: 15px; color: #6B6A66; }
.upgrade-saving { margin-top: 4px; min-height: 20px; font-size: 14.5px; line-height: 20px; color: #3A3935; }
.upgrade-saving s { color: var(--orange); margin-right: 6px; }
/* gulička „−/+“ stredom na strede druhého riadku „accounts“ (Owner 6.10.2026) — výšku dorovná alignTeamBenefits */
/* počet účtov (Owner 13.10.2026, návrh A z Claude Design): celý riadok v bledomodrom poli ako bublina s menom v Nastaveniach */
.upgrade-seats { margin-top: 30px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px 12px 12px 16px; border-radius: 18px; background: rgba(47, 128, 230, .13); }
.upgrade-seats b { display: block; font-size: 15px; font-weight: 600; color: #1A63B8; }
.upgrade-seats span { display: block; margin-top: 2px; font-size: 13.5px; color: #1A63B8; }
.upgrade-stepper { display: flex; align-items: center; gap: 10px; flex: none; }
.upgrade-stepper button {
  width: 36px; height: 36px; border-radius: 18px; border: none; background: #fff; font: inherit; font-size: 20px; line-height: 1;
  color: #1A63B8; cursor: pointer;  /* „−“ a „+“ modré v bielej guličke (Owner 13.10.2026, návrh A) */
}
.upgrade-stepper button:disabled { opacity: .35; cursor: default; }
/* „−“ a „+“ ako čiary presne v strede guličky (znak písma sedel mimo stredu — Owner 6.10.2026) */
.upgrade-stepper button { display: flex; align-items: center; justify-content: center; padding: 0; }
.upgrade-stepper button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.upgrade-stepper output { min-width: 24px; text-align: center; font-size: 19px; font-weight: 600; color: #1A63B8; }
.upgrade-benefits { margin: 20px 0 24px; display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; line-height: 1.35; }
.upgrade-benefit { display: flex; gap: 12px; }
.upgrade-benefit b { display: block; font-weight: 600; }
.upgrade-benefit span { display: block; color: #6B6A66; }
.upgrade-ic { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.upgrade-ic.upgrade-dot { stroke: none; }
.upgrade-contact { margin: -6px 0 16px; font-size: 13.5px; color: #3A3935; }
.upgrade-contact[hidden] { display: none; }
.upgrade-contact a { color: var(--ink); }
/* tlačidlá plánov (Owner 6.10.2026): všetky oranžové s obrysom; čierne (s čiernym obrysom) len v zvolenej kartičke —
   tej, na ktorú prišiel kurzor alebo prst naposledy; zvolená ostáva, kým sa nezvolí iná (aj keď kurzor odíde) */
/* sivé ako ostatné tlačidlá aplikácie (Owner 16.10.2026: len čierne a sivé, oranžové preč) */
.upgrade-cta {
  margin-top: auto; height: 44px; border: 1.5px solid #EDECE8; border-radius: 22px; background: #EDECE8; color: var(--ink);
  font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; flex: none; transition: background-color .15s, color .15s, border-color .15s;
}
.upgrade-card { transition: border-color .15s; }
.upgrade-card.is-active { border-color: var(--ink); }
.upgrade-card.is-active .upgrade-cta { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .upgrade-card:not(.is-active) .upgrade-cta:hover { background: #E3E2DD; border-color: #E3E2DD; }
  .upgrade-card.is-active .upgrade-cta:hover { color: #B8B6B0; }  /* kurzor na čiernom tlačidle: len text sivý */
  .upgrade-stepper button:not(:disabled):hover { background: #E3EEFB; }  /* „−“ a „+“: svetlomodrá gulička pod kurzorom */
}
.upgrade-dots { display: none; justify-content: center; gap: 7px; margin-top: 10px; }
.upgrade-dots span { width: 7px; height: 7px; border-radius: 4px; background: #D3D1CB; transition: width .2s; }
.upgrade-dots span.on { width: 18px; background: var(--ink); }
.upgrade-rail.is-scrolling + .upgrade-dots { display: flex; }
.upgrade-foot { max-width: 620px; margin: 24px auto 0; text-align: center; }
.upgrade-foot p { color: var(--faint); font-size: 13px; margin: 0; }
.upgrade-foot a { color: var(--ink); }  /* odkaz na ceny mimo EÚ / pre EÚ (Owner 6.10.2026) */
.upgrade-close { display: none; }
@media (max-width: 760px) {
  .upgrade { padding: calc(6px + env(safe-area-inset-top)) 0 calc(32px + env(safe-area-inset-bottom)); }
  /* mobil (Owner 6.10.2026): stránka príde sprava; gulička so šípkou doľava alebo potiahnutie prstom doprava ju odsunie
     doprava a ukáže bočné menu; gulička na mieste ☰ (42 px, 16 px od okraja) */
  .upgrade-back { display: none; }
  .upgrade-close {
    display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0 0 4px 16px; padding: 0; border: none;
    border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 2px 12px rgba(20, 20, 15, .08); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .upgrade-close .ic { width: 18px; height: 18px; }
  /* tlačidlá plánov na mobile vždy čierne — prepínanie oranžová ↔ čierna pri listovaní pôsobilo zle (Owner 6.10.2026) */
  .upgrade-cta, .upgrade-card.is-active .upgrade-cta { background: var(--ink); color: #fff; border-color: var(--ink); }
  .upgrade.sheet-moving { transition: transform .42s cubic-bezier(.32, .72, 0, 1); }
  .upgrade-head { padding: 0 24px; }
  .upgrade-head h1 { font-size: 32px; }
  .upgrade-rail { gap: 12px; margin-top: 26px; padding: 4px 24px 8px; scroll-padding-inline: 24px; }
  .upgrade-card { flex-basis: min(318px, calc(100vw - 72px)); width: min(318px, calc(100vw - 72px)); scroll-snap-align: start; padding: 22px 22px 20px; }
  .upgrade-foot { padding: 0 24px; margin-top: 12px; }
  /* celá stránka na jednu obrazovku telefónu, bez posúvania nadol (Owner 4.10.2026) */
  .upgrade-back { margin-bottom: 4px; }
  .upgrade-head { margin-top: 4px; }
  .upgrade-head h1 { margin-bottom: 8px; }
  .upgrade-head p { font-size: 15px; }
  .upgrade-rail { margin-top: 18px; }
  .upgrade-price { margin-top: 10px; }
  .upgrade-price b { font-size: 40px; }
  .upgrade-seats { margin-top: 18px; }
  .upgrade-benefits { margin: 16px 0 20px; gap: 11px; }
}

/* --- Billing (Owner 6.10.2026, podľa návrhu z aplikácie pre Mac) — plán, platobná karta, faktúry ------------------------ */
.billing {
  position: fixed; inset: 0; z-index: 45; overflow-y: auto; overscroll-behavior: none; background: var(--workflow-canvas); color: var(--ink); font-family: var(--sans);
  font-size: 15px; line-height: 1.5; padding: 20px 32px 72px; box-sizing: border-box;
}
.billing-doc { max-width: 760px; margin: 0 auto; padding-top: 40px; }
/* testeri (Owner 13.10.2026): fakturácia zahmlená ako rozhovor počas hovoru — nad ňou okno s bezplatným prístupom */
.billing.tester-blur .billing-doc { filter: blur(7px); opacity: .45; pointer-events: none; user-select: none; }
/* bublina pre testerov na mobile: obsah ako okno pri mazaní, tlačidlá nad spodným okrajom */
.modal.tester-sheet .sd2-confirm { padding: 26px 14px 10px; }
.modal.tester-sheet .sd2-actions { padding: 8px 14px 0; }
.billing-head { display: flex; flex-direction: column; gap: 8px; margin: 0 0 26px; }
.billing-head h1 { font-family: "Lora", Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.1; letter-spacing: -.015em; margin: 0; }
.billing-head p { margin: 0; color: var(--faint); font-size: 15px; }
.billing-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.billing-sec + .billing-sec { border-top: 1px solid var(--line); }
.billing-plan { padding: 26px 28px; display: flex; align-items: flex-start; gap: 18px; }
.billing-plan-icon { width: 85px; height: 85px; flex: none; position: relative; }
.billing-mark { position: absolute; width: 103.66px; height: 103.66px; top: -9.33px; left: -9.33px; display: block; max-width: none; }
.billing-plan-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.billing-plan-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.billing-plan-name { font-family: "Lora", Georgia, serif; font-size: 22px; }
.billing-seats { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border: 1px solid currentColor;
  border-radius: 999px; padding: 2px 9px; color: var(--ink); }
.billing-seats[hidden] { display: none; }
.billing-plan-what { font-size: 15px; color: var(--dim); }
.billing-plan-terms { font-size: 14px; color: var(--faint); }
.billing-btn { border: 1px solid var(--line2); border-radius: 999px; padding: 9px 18px; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink); background: none; cursor: pointer; flex: none; }
@media (hover: hover) and (pointer: fine) { .billing-btn:hover { background: var(--inset); } }
.billing-pay { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.billing-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.billing-pay-row { display: flex; align-items: center; gap: 14px; }
.billing-pay-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.billing-pay-name { font-size: 15px; color: var(--ink); }
.billing-pay-exp { font-size: 13px; color: var(--faint); }
.billing-pay-exp:empty { display: none; }
.billing-inv { padding: 24px 28px 26px; display: flex; flex-direction: column; gap: 4px; }
.billing-inv .billing-label { padding-bottom: 10px; }
.billing-inv-head, .billing-inv-row { display: grid; grid-template-columns: 1.1fr .9fr .9fr 60px; gap: 12px; border-bottom: 1px solid var(--line); }
.billing-inv-head[hidden] { display: none; }
.billing-inv-head { padding: 0 0 10px; font-size: 13px; color: var(--faint); }
.billing-inv-row { align-items: center; padding: 14px 0; font-size: 14px; color: var(--dim); }
.billing-inv-total { font-variant-numeric: tabular-nums; }
.billing-inv-act { text-align: right; }
.billing-paid { color: #15757d; background: #ebf4f4; border: 1px solid #bcdada; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 500; }
.billing-view { font-size: 14px; color: #15757d; }
.billing-empty { margin: 0; font-size: 14px; color: var(--faint); }
.billing-empty[hidden] { display: none; }
.billing-foot { margin: 20px 0 0; font-size: 13px; color: var(--faint); }
@media (max-width: 760px) {
  .billing { padding: calc(6px + env(safe-area-inset-top)) 0 calc(32px + env(safe-area-inset-bottom)); }
  .billing .upgrade-back { display: none; }
  .billing-doc { padding: 12px 16px 0; }
  .billing-head h1 { font-size: 32px; }
  .billing-plan, .billing-pay, .billing-inv { padding-left: 18px; padding-right: 18px; }
  .billing-plan { flex-wrap: wrap; gap: 14px 16px; }
  .billing-plan > .billing-btn { flex-basis: 100%; }
  .billing-plan-what span { display: block; }  /* mobil: každá veta na vlastnom riadku (Owner 6.10.2026) */  /* „Zmeniť plán“ vo vlastnom riadku — text plánu má celú šírku */
  .billing-plan-icon { width: 56px; height: 56px; }
  .billing-mark { width: 68.3px; height: 68.3px; top: -6.15px; left: -6.15px; }
  .billing-inv-head, .billing-inv-row { grid-template-columns: 1.2fr .9fr .8fr 44px; gap: 8px; }
}
.billing.sheet-moving { transition: transform .42s cubic-bezier(.32, .72, 0, 1); }
/* Plány na mobile (Owner 13.10.2026): kartičky pod sebou, nie vedľa seba — v aplikácii sa vodorovne posúva len bočné menu.
   Biela gulička vľavo hore stojí, obsah sa posúva pod ňou a hore sa stráca ako rozhovor v Chate (ako Settings). */
@media (max-width: 760px) {
  #view-upgrade { overflow: hidden; padding: 0; --up-top: calc(env(safe-area-inset-top) + 54px); }
  #view-upgrade > .upgrade-close { position: absolute; top: calc(6px + env(safe-area-inset-top)); left: 16px; z-index: 2; margin: 0; }
  #view-upgrade > .upgrade-scroll {
    position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch;
    padding: var(--up-top) 0 calc(32px + env(safe-area-inset-bottom));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.100) calc(var(--up-top) * 0.0000 + 0.00px), rgba(0,0,0,0.134) calc(var(--up-top) * 0.1250 + 3.00px), rgba(0,0,0,0.232) calc(var(--up-top) * 0.2500 + 6.00px), rgba(0,0,0,0.378) calc(var(--up-top) * 0.3750 + 9.00px), rgba(0,0,0,0.550) calc(var(--up-top) * 0.5000 + 12.00px), rgba(0,0,0,0.722) calc(var(--up-top) * 0.6250 + 15.00px), rgba(0,0,0,0.868) calc(var(--up-top) * 0.7500 + 18.00px), rgba(0,0,0,0.966) calc(var(--up-top) * 0.8750 + 21.00px), #000 calc(var(--up-top) + 24px), #000 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.100) calc(var(--up-top) * 0.0000 + 0.00px), rgba(0,0,0,0.134) calc(var(--up-top) * 0.1250 + 3.00px), rgba(0,0,0,0.232) calc(var(--up-top) * 0.2500 + 6.00px), rgba(0,0,0,0.378) calc(var(--up-top) * 0.3750 + 9.00px), rgba(0,0,0,0.550) calc(var(--up-top) * 0.5000 + 12.00px), rgba(0,0,0,0.722) calc(var(--up-top) * 0.6250 + 15.00px), rgba(0,0,0,0.868) calc(var(--up-top) * 0.7500 + 18.00px), rgba(0,0,0,0.966) calc(var(--up-top) * 0.8750 + 21.00px), #000 calc(var(--up-top) + 24px), #000 100%);
  }
  #view-upgrade .upgrade-rail { flex-direction: column; width: auto; max-width: none; overflow: visible; scroll-snap-type: none;
    gap: 16px; padding: 4px 16px 8px; }
  #view-upgrade .upgrade-card { flex: none; width: auto; }
  #view-upgrade .upgrade-card.is-active { border-color: var(--line); }  /* pod sebou nie je „zvolená“ kartička */
  #view-upgrade .upgrade-dots { display: none; }
}

/* --- Settings (Owner 11.10.2026, návrh B2; predtým Personalization): jeden zoznam na jednu obrazovku — meno a štyri
   prepínače z dvoch piluliek rovnakej veľkosti v sivej kapsule ako pilulky v Composeri; zvolená čierna, nezvolená sivá. -- */
.set-card { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 0 24px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row[hidden] { display: none; }  /* skrytý riadok (hlas, tykanie pri angličtine) */
.set-q { display: flex; flex-direction: column; min-width: 0; }
.set-title { font-size: 15.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.set-hint { font-size: 13.5px; line-height: 1.4; color: #6B6A66; }
/* pole s menom (Owner 12.10.2026): šírka podľa mena (app.js settingsFitName, do 20 znakov), bledomodré ako štítok
   „QUICK ANSWER…“ pri odpovedi (chat.css) a ako premenovanie v bočnom menu */
.set-name {
  flex: none; width: 120px; min-width: 64px; max-width: 62%; height: 36px; box-sizing: border-box; border: none; border-radius: 999px;
  padding: 0 16px; font: inherit; font-size: 14.5px; font-weight: 500; color: #1A63B8; background: rgba(47, 128, 230, .13);
  caret-color: #1A63B8; -webkit-appearance: none; appearance: none; transition: width .12s ease;
}
.set-name::placeholder { color: rgba(26, 99, 184, .5); }
.set-name:focus { outline: none; color: #6FA3E0; }  /* prepisovanie mena: svetlejšia modrá (Owner 12.10.2026) */
.set-name::selection { background: rgba(47, 128, 230, .28); }
/* Prepínač ako Apple iOS 26 (Owner 12.10.2026, snímky IMG_9934–9940): dráha 64×28, podlhovastý biely gombík 39×24;
   vypnutý sivá dráha, zapnutý zelená (Apple systemGreen). Pri prepnutí sa gombík zväčší na priehľadné „sklo“, prejde na
   druhú stranu (dráha medzitým zmení farbu) a zmenší sa späť na biely gombík. */
.set-switch {
  position: relative; flex: none; width: 64px; height: 28px; padding: 0; border: none; border-radius: 14px;
  background: #C7C7CC; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* dráha zapnutého prepínača je vlastná vrstva — mení sa len jej priehľadnosť (kreslí grafická karta, nič sa neprekresľuje);
   naša stredná bledomodrá #83A9E4 namiesto zelenej iOS (Owner 15.10.2026, variant B — predtým C #A9C8F0) */
.set-switch::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #83A9E4; opacity: 0;
  transition: opacity .12s ease; }
.set-switch.on::before { opacity: 1; }
.set-switch:disabled { cursor: default; }
.set-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Gombík podľa nahrávky skutočného prepínača iOS 26 (Owner 12.10.2026, 60 snímok/s): sklo sa zväčší a súčasne prejde
   (~70 ms, mierne prestrelí), ~150 ms drží, potom sa zmenší a znova zbelie (spolu ~420 ms). Animuje sa len poloha,
   veľkosť a priehľadnosť — tiene a farby sú pevné, takže telefón nič neprekresľuje (predtým to trhalo).
   .set-lens je nakreslená vo veľkosti skla 62×38 a v pokoji zmenšená na 0,63 (= gombík 39×24) — sklo je tak ostré. */
.set-knob {
  position: absolute; top: 2px; left: 2px; width: 39px; height: 24px; pointer-events: none;
  transform: translate3d(0, 0, 0); will-change: transform;
}
.set-switch.on .set-knob { transform: translate3d(21px, 0, 0); }
.set-lens {
  position: absolute; left: -11.5px; top: -7px; width: 62px; height: 38px;
  transform: scale(.63); will-change: transform;
}
.set-white, .set-glass { position: absolute; inset: 0; border-radius: 19px; will-change: opacity; }
.set-white { background: #fff; box-shadow: 0 5px 13px rgba(0, 0, 0, .15), 0 1.5px 1.5px rgba(0, 0, 0, .16); }
.set-glass {
  opacity: 0; background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), inset 0 3px 4px rgba(255, 255, 255, .9),
    inset 0 -3px 4px rgba(255, 255, 255, .7), 0 6px 16px rgba(0, 0, 0, .12);
}
@media (prefers-reduced-motion: reduce) { .set-switch::before { transition: none; } }
/* jazyk odpovedí (Owner 12.10.2026): pilulka široká podľa názvu jazyka (ako pole s menom), oranžový lem a oranžový
   názov jazyka (ako tlačidlá v Choose your plan); ťuknutím zoznam jazykov */
.set-lang {
  flex: none; width: auto; min-width: 64px; max-width: 62%; height: 36px; box-sizing: border-box; padding: 0 16px; border: 1.5px solid var(--orange-line);
  border-radius: 999px; background: #fff; color: var(--orange); font: inherit; font-size: 14.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
/* hlas (Owner 12.10.2026): reproduktor s ukážkou vedľa prepínača; počas prehrávania štvorček „stop“ */
.set-ctl { display: flex; align-items: center; gap: 12px; flex: none; }
.set-play {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none;
  border-radius: 50%; background: rgba(47, 128, 230, .13); color: #1A63B8; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.set-play[hidden] { display: none; }
.set-play .ic { width: 18px; height: 18px; }
.set-stop { display: none; width: 11px; height: 11px; border-radius: 2.5px; background: currentColor; }
.set-play.playing .ic-speaker, .set-play.loading .ic-speaker { display: none; }
.set-play.playing .set-stop { display: block; }
/* kým sa hlas načíta: koliesko podľa zariadenia (Apple 12 lúčov, Android kruh Google — .spin, os.js), zmenšené do tlačidla */
.set-play .spin { display: none; transform: scale(.42); margin: -6px; }
.set-play.loading .spin { display: inline-block; }
.set-play:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.set-lang:disabled { cursor: default; }
.set-lang:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* telefón: karty nastavení užšie, bez sivých popisov pri otázkach */
@media (max-width: 760px) {
  .set-card { margin-top: 10px; border-radius: 20px; padding: 0 16px; }
  .set-row { gap: 12px; min-height: 64px; }
  .set-title { font-size: 15px; }
  .set-hint { display: none; }
  .set-name { font-size: 16px; padding: 0 14px; }  /* iPhone pri 16 px nepribližuje stránku */
}

/* --- „+ New Chat“ so zoznamom tém pre Coburg (Kocka 5b, ako v aplikácii pre Mac) --------------------------------------- */
#topic-flyout {
  position: fixed; z-index: 60; background: #fff; border: 1px solid #e7e7e0; border-radius: 12px; box-shadow: 0 8px 28px rgba(28, 28, 30, .14);
  padding: 6px; min-width: 196px; box-sizing: border-box; overflow-y: auto; scrollbar-width: none; font-family: var(--ui);
}
#topic-flyout::-webkit-scrollbar { width: 0; height: 0; display: none; }
.topic-row {
  padding: 4px 10px; border-radius: 8px; min-height: 26px; line-height: 18px; font-size: 13px; color: #5f6268; cursor: pointer;
  display: flex; align-items: baseline; gap: 8px; box-sizing: border-box;
}
.topic-n { font-size: 11px; color: #c2beb2; font-variant-numeric: tabular-nums; width: 16px; flex-shrink: 0; font-family: var(--font-mono); }
.topic-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-row:hover { background: #ECEBE9; }
.topic-row.is-current { background: var(--row-open); }
.topic-row.is-disabled { color: var(--unavailable); cursor: default; }
.topic-row.is-disabled:hover { background: none; }
.topic-check { width: 15px; height: 15px; align-self: center; flex: none; }
.topic-toggle {
  padding: 7px 10px 5px; margin-top: 2px; border-top: 1px solid #e7e7e0; display: flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 26px; box-sizing: border-box;
}
.topic-toggle .check { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line2); display: flex; align-items: center; justify-content: center; color: #fff; background: #fff; }
.topic-toggle .check .ic { width: 12px; height: 12px; }
.topic-toggle .check.on { background: #000; border-color: #000; }
.topic-toggle span { font-size: 13px; color: #5f6268; }
.coburg-topic-n { font-size: 11px; color: #c2beb2; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-weight: 500; margin-right: 6px; }
@media (max-width: 760px) { .topic-row, .topic-toggle { min-height: 36px; font-size: 15px; } .topic-row { align-items: center; } }

/* --- Settings pre Ownera (Kocka 5b, ako v aplikácii pre Mac — audit/kocka-5a/SPEC-MAC-SETTINGS.md) ------------------ */
.modal.settings-modal {
  width: 980px; max-width: 94vw; height: 663.6px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; padding: 0;
  border-radius: 16px; background: var(--raised); transform: translate(-50%, -50%) scale(.98);
}
.modal.settings-modal.show { transform: translate(-50%, -50%) scale(1); }
.settings-modal .modal-b-split { display: flex; flex-direction: row; flex: 1; min-height: 0; overflow: hidden; }
.settings-modal .rm-nav {
  width: 212px; flex: none; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line);
  padding: 0 8px 0 14px; background: var(--raised); box-sizing: border-box;
}
.settings-modal .rmnav-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 39px 0 16px; }
.settings-modal .wf-row {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; text-align: left; background: none; border: none;
  padding: 3.5px 11px 3.5px 2px; border-radius: 8px; color: #5f6268; cursor: pointer; font: inherit; font-family: var(--ui);
  transition: background .12s, color .12s;
}
.settings-modal .wf-row-icon { flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; margin-right: 4px; }
.settings-modal .wf-row-icon .ic { width: 16px; height: 16px; }
.settings-modal .wf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 400; line-height: 21.2px; }
.settings-modal .wf-row:hover { background-color: var(--row-hover); }
.settings-modal .wf-row.on, .settings-modal .wf-row.on:hover { background-color: var(--row-open); color: var(--ink); }
.settings-modal .wf-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.settings-modal .rm-content { flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.settings-modal .eco-fixed-header { flex: none; padding: 39px 34px 0; margin-bottom: 6px; }
.settings-modal .rm-role-title-name { font-family: "Lora", Georgia, serif; font-size: 44px; line-height: 1.3; font-weight: 500; color: var(--ink); }
.settings-modal .rm-role-title-dot { color: #FF650B; }
.settings-modal .eco-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 69px; padding: 28px 34px 32px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.25) 0, #000 64px, #000 calc(100% - 64px), rgba(0,0,0,.25) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.25) 0, #000 64px, #000 calc(100% - 64px), rgba(0,0,0,.25) 100%);
}
.settings-modal .eco-scroll.routing-scroll { -webkit-mask-image: none; mask-image: none; padding-top: 0; }
.settings-modal .rm-close {
  position: absolute; width: 40px; height: 40px; top: 27px; right: 27px; z-index: 61; border: none; background: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--dim); cursor: pointer; padding: 0;
}
.settings-modal .rm-close:hover { background: var(--row-hover); color: var(--ink); }
.settings-modal .rm-close .ic { width: 16px; height: 16px; }
.settings-modal .rm-desc { font-family: "Source Serif 4", Georgia, serif; font-size: 16px; color: var(--dim); line-height: 1.5; min-height: 38px; margin-bottom: 28px; }

/* Radar */
.radar-card { padding: 14px 0; border-bottom: 1px solid var(--inset); }
.radar-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; font-size: 15px; color: var(--dim); }
.radar-card-head b { color: var(--ink); }
.radar-provider-row { display: flex; align-items: center; gap: 6px; }
.radar-provider-row .pico { width: 16px; height: 16px; border-radius: 4px; }
.radar-title { font-weight: 600; color: var(--ink); }
.radar-line { font-family: "Source Serif 4", Georgia, serif; font-size: 16px; color: var(--dim); line-height: 1.5; margin: 0 0 10px; }
.badge.b-neutral {
  display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 6px; background: var(--inset);
  color: var(--dim); text-decoration: none;
}
.badge.b-neutral:hover { background: var(--row-hover); color: var(--ink); }

/* Credits */
.eco-list { display: flex; flex-direction: column; gap: 10px; }
.eco-row { border: 1px solid var(--line2); border-radius: 16px; padding: 8px 18px 8px 10px; background: #fff; }
.eco-row.bubble-bound { border-color: var(--ink); }
.eco-row-grid { display: grid; grid-template-columns: minmax(130px, 190px) minmax(150px, 1fr) 180px; align-items: center; gap: 16px; min-height: 38px; }
.eco-row-identity { display: flex; align-items: center; gap: 6px; min-width: 0; }
.eco-row-icon { width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; }
.eco-row-icon .pico { width: 30px; height: 30px; }
.eco-row-name { font-size: 15.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eco-row-modules { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: 14px; }
.eco-module-chip { font-family: var(--font-mono); font-size: 11.5px; color: var(--dim); background: var(--inset); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.eco-action-btn {
  justify-self: end; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line2); border-radius: 10px;
  background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.eco-action-btn .ic { width: 15px; height: 15px; }
.eco-action-btn:hover { background: var(--row-hover); }
.eco-action-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Communication a Rules */
.cp-field { margin-bottom: 18px; }
.cp-label { display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.cp-bubble { display: flex; align-items: center; gap: 10px; padding: 0 11px 0 0; border: 1px solid var(--line2); border-radius: 16px; background: #fff; }
.cp-bubble.bubble-bound { border-color: var(--ink); }
.cp-bubble.bubble-bound .cp-input { pointer-events: none; }
.cp-input {
  flex: 1; min-width: 0; box-sizing: border-box; resize: none; overflow-y: hidden; padding: 11px 0 11px 13px; border: none; outline: none;
  background: none; color: var(--ink); font-family: "Inter", var(--sans); font-size: 14.5px; line-height: 22px;
}
.cp-input::placeholder { color: #85857b; }
.cp-ind { flex: none; display: flex; align-items: center; justify-content: center; }
.check {
  width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line2); display: flex; align-items: center; justify-content: center;
  color: #fff; padding: 0; background: #fff; cursor: pointer;
}
.check .ic { width: 14px; height: 14px; }
.cp-check.on { background: var(--ink); border-color: var(--ink); }
.ai-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.ai-status-dot.pulsing { animation: cp-pulse 1s ease-in-out infinite; }
@keyframes cp-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-status-dot.pulsing { animation: none; opacity: .6; } }
.cp-group { display: flex; flex-direction: column; }
.cp-group-roles { border-top: 1px solid var(--line2); padding-top: 16px; margin-top: 4px; }
.cp-rules-group-label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FF650B; margin-bottom: 12px; }
.cp-error { font-size: 16px; color: #FF650B; margin-bottom: 12px; }

/* Routing */
.routing-head {
  position: sticky; top: 0; background: var(--raised); z-index: 2; display: grid; grid-template-columns: 200px 1fr 14px 1fr 1fr; gap: 10px;
  padding-top: 28px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .05em; text-transform: uppercase; color: #9a958a; font-weight: 600;
}
.routing-head-col { text-align: center; }
.routing-col-spacer { width: 14px; }
.routing-row {
  display: grid; grid-template-columns: 200px 1fr 14px 1fr 1fr; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #efece4;
  font-family: var(--sans); color: #5f6266;
}
.routing-row-scholarly { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 11px; }
.routing-topic { font-size: 14.5px; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.routing-n { font-size: 11px; color: #c2beb2; font-variant-numeric: tabular-nums; width: 16px; flex-shrink: 0; font-family: var(--font-mono); }
.routing-topic-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routing-cell { position: relative; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13.5px; min-width: 0; }
.routing-cell.is-none { opacity: .55; }
.routing-select {
  position: relative; z-index: 1; width: 100%; border: 0; background: transparent; font: inherit; color: inherit; padding: 6px 26px 6px 10px;
  border-radius: 8px; cursor: pointer; -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
}
.routing-select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.routing-cell-chevron { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); pointer-events: none; color: #8a8a80; opacity: .7; }
.routing-cell-label { display: none; }

@media (max-width: 760px) {
  /* na mobile celá obrazovka: menu sekcií hore vedľa seba, obsah pod ním */
  .modal.settings-modal, .modal.settings-modal.show {
    inset: 0; top: 0; left: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: none; transform: none;
  }
  .settings-modal .modal-b-split { flex-direction: column; }
  .settings-modal .rm-nav { width: auto; border-right: none; border-bottom: 1px solid var(--line); padding: 0; }
  .settings-modal .rmnav-scroll {
    display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: calc(12px + env(safe-area-inset-top)) 64px 10px 16px;
    scrollbar-width: none;
  }
  .settings-modal .rmnav-scroll::-webkit-scrollbar { display: none; }
  .settings-modal .wf-row { width: auto; flex: none; min-height: 36px; padding: 4px 12px 4px 8px; }
  .settings-modal .wf-row-icon { margin-right: 0; }
  .settings-modal .rm-close { top: calc(10px + env(safe-area-inset-top)); right: 8px; width: 44px; height: 44px; background: var(--raised); }
  .settings-modal .eco-fixed-header { padding: 18px 16px 0; }
  .settings-modal .rm-role-title-name { font-size: 34px; }
  .settings-modal .eco-scroll { margin-bottom: 0; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); }
  .eco-row-grid { grid-template-columns: 1fr; gap: 8px; }
  .eco-row-modules { margin-left: 0; }
  .eco-row-modules:empty { display: none; }
  .eco-action-btn { justify-self: start; }
  .cp-input { font-size: 16px; } /* iPhone inak pri písaní priblíži stránku */
  /* na mobile tri výbery pod sebou, každý so svojím názvom — celé mená modelov sa zmestia */
  .routing-head { display: none; }
  .routing-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .routing-row .routing-col-spacer { display: none; }
  .routing-cell { display: flex; align-items: center; }
  .routing-cell-label {
    display: block; flex: none; width: 76px; padding-left: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em;
    text-transform: uppercase; color: #9a958a;
  }
  .routing-select { flex: 1; min-width: 0; font-size: 16px; padding: 7px 26px 7px 4px; } /* 16 px: iPhone pri výbere nepriblíži stránku */
}

/* --- mobil ------------------------------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
  /* výsuvné menu (Kocka 4) — panel nad obsahom, nie vedľa neho */
  .nav { position: fixed; width: min(84vw, 320px); transition: transform .22s ease, visibility 0s linear .22s; }
  .app.drawer-open .nav { transition: transform .22s ease; }
  .chat-head { display: none; }
  .resizer, #nav-collapse, .nav-rail { display: none !important; }
  .nav-head { padding: 8px 8px 0 16px; }
  .nav-close {
    display: flex; flex: none; width: 44px; height: 44px; margin: -4px 0 0; border: none; border-radius: 10px; background: none;
    color: var(--ink); align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav-close .ic { width: 20px; height: 20px; }
  .nav-close:active { background: var(--inset); }
  /* ovládanie prstom: aspoň 44 px */
  .row, .mode-row, .sec-head, .account { min-height: 44px; }
  .row, .account { font-size: 15px; }
  .navtoggle { width: 44px; height: 44px; }
  /* dotyk nemá prejdenie myšou: šípka menu rozhovoru je stále viditeľná, nadpisy sekcií ukazujú stav */
  .thread-row { gap: 9px; }
  .tr-row { min-height: 40px; }
  .tr-file .row-more { opacity: 1; }
  .thread-row .row-name { margin-right: 0; }
  .row-more { opacity: 1; width: 32px; height: 32px; margin-right: -10px; }
  .swap-row:hover .swap-rest, .swap-row:hover .row-logo { display: inline; }
  .swap-row:hover .swap-ic, .swap-row:hover .swap-hover { display: none; }
  .menu-row { min-height: 44px; font-size: 16px; }
  .menu-chev { opacity: 1; }
  .sd2-confirm h2 { font-size: 30px; }
  .toast-text { font-size: 17px; }  /* mobil: ako názvy vlákien v Sidebare (17 bodov) */
  /* panel dokumentu na telefóne cez celú obrazovku */
  .doc-panel { position: fixed; inset: 0; z-index: 45; width: auto; border-left: none; padding-top: env(safe-area-inset-top);
    background: #F3F3F0; }  /* rovnaká farba ako riadok s časom hore (Owner 1.10.2026) */
  .doc-resizer { display: none !important; }
  .doc-head { height: 48px; }
  /* súbor na celú obrazovku (Owner 29.9.2026): vľavo zavrieť, vpravo menu súboru (open.svg) — biele guľôčky ako
     v rozhovore; ostatné nástroje sú v menu */
  .doc-head { height: 48px; box-sizing: content-box; padding: 6px 16px 0; border-bottom: none; gap: 10px; }
  .doc-tools { display: contents; }
  #doc-wrap, #doc-copy, #doc-download, #doc-open { display: none; }
  #doc-close {
    order: -1; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(20, 20, 15, .08);
    display: flex; align-items: center; justify-content: center; color: var(--ink);
  }
  /* vpravo pilulka (Owner 1.10.2026): Premenovať (pero) a Zdieľať / menu súboru */
  .doc-pill {
    order: 1; flex: none; display: flex; align-items: center; height: 42px; padding: 0 3px; border-radius: 21px; background: #fff;
    box-shadow: 0 2px 12px rgba(20, 20, 15, .08);
  }
  .doc-pill .iconbtn { width: 40px; height: 42px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: var(--ink); background: none; }
  #doc-close .ic, .doc-pill .ic { width: 19px; height: 19px; }
  /* názov súboru v strede hornej lišty (Owner 1.10.2026) */
  .doc-name { text-align: center; font-size: 16px; -webkit-mask-image: none; mask-image: none; text-overflow: ellipsis; }
  /* súbor v strome úložiska bez šípky na konci — ťuknutie ho rovno otvorí */
  .tr-file .row-more { display: none; }
}
#doc-menu { display: none; }
@media (max-width: 760px) { #doc-menu { display: flex; } }
.doc-pill { display: contents; }  /* počítač: pero je obyčajné tlačidlo v lište */
@media (max-width: 760px) { .doc-pill { display: flex; } }
/* premenovanie v náhľade = to isté modré pole ako pri rozhovoroch a v aplikácii pre Mac (Owner 1.10.2026) */
.doc-name.is-renaming { -webkit-mask-image: none; mask-image: none; text-overflow: clip; overflow-x: hidden; scrollbar-width: none; }
.doc-name.is-renaming::-webkit-scrollbar { display: none; }

/* --- Režim Project (Owner 28.9.2026), ako v aplikácii pre Mac — zatiaľ bez práce v rolách ------------------------------ */
.project-nav, .project-view { display: none; }
/* zvolený projekt pod „Projects“ (Owner 3.10.2026): text v línii s názvami vlákien; v Projects oranžový, inak slabo sivý */
/* zvolený projekt pod „Projects“ (Owner 4.10.2026, variant A): len v režime Projects; sivá čiara ako vetva stromu spod
   ikony priečinka, tmavý názov (oranžová patrí len fajke a zmenám stavu), bez projektu slabo sivé „No Pinned Project“ */
.mode-row.active-project { display: none; gap: 9px; font-weight: 500; color: var(--ink); cursor: default; }
body.mode-project .mode-row.active-project { display: flex; }
.mode-row.active-project:hover { background: none; }
.mode-row.active-project.is-none { font-weight: 400; color: var(--unavailable); }  /* ako prázdne Pripnuté / Vlákna */
.mode-row.active-project .active-project-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-tree { flex: none; width: 10px; height: 20px; margin-left: 8px; border-left: 1.5px solid #CFCDC7; border-bottom: 1.5px solid #CFCDC7;
  border-bottom-left-radius: 6px; transform: translateY(-8px); box-sizing: border-box; }
/* šípka až pri prejdení kurzorom (počítač) — otvorí bublinu Rename / Delete */
.ap-more { display: none; flex: none; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: -12px;
  border-radius: 6px; color: var(--faint); cursor: pointer; }
.ap-more .ic { width: 16px; height: 16px; }
@media (hover: hover) {
  .mode-row.active-project:not(.is-none):hover .ap-more, .ap-more.is-open { display: inline-flex; }
  .ap-more:hover { color: var(--ink); background: var(--nav-hover); }
}
/* Projects: pri prejdení kurzorom šípka vpravo na konci riadku, oranžová fajka sa zatiaľ skryje (Owner 3.10.2026) */
.mode-row .mode-hover-chev { display: none; width: 15px; height: 15px; margin-left: auto; opacity: .6; }
@media (hover: hover) and (min-width: 761px) {
  #mode-project:hover .mode-hover-chev { display: inline-block; }
  #mode-project:hover .menu-check { display: none; }
}
/* bublina Projects na počítači: hore pilulka na nový projekt, pod ňou projekty od najnovšieho (Owner 3.10.2026) */
.menu.menu-projects { position: fixed; z-index: 70; padding: 6px; overflow-y: auto; min-width: 0; max-width: none; }
/* nový projekt: obyčajný riadok bez rámčeka (Owner 5.10.2026, návrh A) — „+“, text, oranžové „Create“ až s textom */
.menu-projects .pb-new { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 4px 0 10px; border-radius: 8px; }
.menu-projects .pb-plus { width: 16px; height: 16px; color: var(--sec-head); }
.menu-projects .pb-new.pb-rename { background: #F4F3F1; }  /* premenovanie v riadku: jemne sivé, aby bolo vidno pole */
.menu-projects .pb-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: inherit; font-size: 14px;
  line-height: 21.2px; color: var(--ink); padding: 3px 0; }
.menu-projects .pb-input::placeholder { color: #9B9891; opacity: 1; }  /* ako „Write a message…“ v Composeri */
/* aktívny projekt: oranžový text, bez sivého podsvietenia (Owner 3.10.2026) */
.menu-projects .menu-row.current, .menu-projects .menu-row.current:hover { background: none; color: var(--orange); }
.menu-projects .pb-input { caret-color: var(--orange); }
.menu-projects .pb-add { display: none; flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: none;
  background: var(--ink); color: #FFFFFF; cursor: pointer; align-items: center; justify-content: center; }
.menu-projects .pb-add .ic { width: 15px; height: 15px; }
/* píše sa: „+“ zmizne, vpravo čierna gulička so šípkou hore (Owner 5.10.2026) */
.menu-projects .pb-new.has-text .pb-add { display: inline-flex; }
.menu-projects .pb-new.has-text .pb-plus { display: none; }
.menu-projects .pb-add[disabled] { opacity: .5; cursor: default; }
.menu-projects .pb-err { font-size: 12.5px; color: var(--orange); padding: 5px 14px 1px; }
/* riadky ako názvy vlákien v paneli */
.menu-projects .menu-row { min-height: 32px; padding: 2.5px 8px 2.5px 10px; font-size: 14px; line-height: 21.2px; }
.menu-projects .menu-row .menu-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* šípka na konci riadku pri prejdení kurzorom — bublina Rename / Delete (Owner 3.10.2026) */
.menu-projects .pb-more { display: none; flex: none; width: 24px; height: 24px; margin-left: 6px; border-radius: 6px;
  align-items: center; justify-content: center; color: var(--item); cursor: pointer; }
.menu-projects .pb-more .ic { width: 15px; height: 15px; opacity: .7; }
.menu-projects .menu-row:hover .pb-more, .menu-projects .menu-row:focus-within .pb-more { display: inline-flex; }
.menu-projects .pb-rename { margin: 2px 0; }
body.mode-project .project-nav { display: block; }
/* Projects: „+ New Thread“ na mieste „+ New Chat“ (Owner 3.10.2026) */
/* Projects (Owner 29.9.2026): tá istá prázdna stránka s poľom na písanie ako Chats, len s uvítaním Orchestratora */
/* vlákno projektu sa ukazuje ako každé iné (Owner 15.10.2026 — predtým bolo v Projects skryté); názov hore len pilulka projektu */
body.mode-project .mtop-title { display: none; }
.project-mark { width: 26px; height: 26px; margin-bottom: 4px; }
.project-title { font-family: "Lora", Georgia, serif; font-weight: 400; font-size: 38px; line-height: 1.15; margin: 0; color: var(--ink);
  max-width: min(720px, 100%); overflow-wrap: anywhere; }
.project-text { max-width: 440px; margin: 0; font-size: 14px; color: var(--faint); }
.project-create { margin-top: 8px; padding: 10px 22px; }
.project-create[hidden] { display: none; }
.project-nav .new-chat { margin-bottom: 2px; }
.project-row .project-ic { margin-right: 4px; }
.project-row:hover .project-ic, .project-row.menu-open .project-ic { display: none; }
.project-row.is-empty, .project-row.is-empty:hover { color: var(--unavailable); cursor: default; background: none; }
.project-row.is-empty .project-ic { display: inline-block; }
.project-row.is-empty .swap-ic, .project-row.is-empty .swap-hover, .project-row.is-empty .storage-chev { display: none; }
.project-row.is-empty .swap-rest { display: inline; }
/* okno New project — ako v aplikácii pre Mac (.sd2-newproj, .sd2-field, .newproj-input) */
.sd2-newproj { display: flex; flex-direction: column; gap: 8px; padding: 0 26px 24px; }
.sd2-field { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line2);
  border-radius: 12px; padding: 5px 5px 5px 18px; }
.newproj-input { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; border: none; outline: none; box-shadow: none;
  background: none; font-family: var(--font-user, var(--ui)); font-size: 14.5px; line-height: 22px; color: var(--ink); padding: 7px 0; }
.newproj-input:focus, .newproj-input:focus-visible { outline: none; border: none; box-shadow: none; }
.sd2-error { font-size: 12px; color: #C23B22; }
.sd2-error[hidden] { display: none; }
body.mode-project #mtop-new { visibility: hidden; }

/* --- Mobil: výber modelu ako panel zospodu (ako Claude na iPhone, Owner 29.9.2026) ------------------------------------- */
@media (max-width: 760px) {
  /* bublinka začína na spodnom okraji obrazovky (Owner 29.9.2026) — cez celú šírku, zaoblená hore; obsah nad
     spodným okrajom iPhonu */
  .modal.model-sheet {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    /* posledný riadok vždy 24 pt nad tým, čo je pod stránkou: lišta prehliadača, v aplikácii a s ikonou na ploche
       systémový pruh iPhonu (variant B, Owner 4.10.2026) */
    max-height: calc(100% - 70px); padding: 0 12px calc(24px + env(safe-area-inset-bottom)); background: #F9F9F7; border: none;
    border-radius: 34px 34px 0 0;
    box-shadow: 0 -8px 40px rgba(20, 20, 15, .12); transform: translateY(100%); touch-action: none;  /* vysúva sa zo spodku */
    -webkit-user-select: none; user-select: none;
    /* pomalý, mäkký pohyb bez skokov (Owner 29.9.2026) */
    transition: opacity 300ms ease, transform 500ms cubic-bezier(.22, .61, .36, 1),
      top 500ms cubic-bezier(.22, .61, .36, 1), left 500ms cubic-bezier(.22, .61, .36, 1), right 500ms cubic-bezier(.22, .61, .36, 1),
      bottom 500ms cubic-bezier(.22, .61, .36, 1), border-radius 500ms cubic-bezier(.22, .61, .36, 1),
      padding-bottom 500ms cubic-bezier(.22, .61, .36, 1);
  }
  /* vnútorné rozloženie bublinky (Owner 29.9.2026) */
  .modal.model-sheet { display: flex; flex-direction: column; overflow: hidden; }
  /* výber modelu sa posuvníkom môže zväčšiť na celú obrazovku (Owner 2.10.2026) */
  .modal.model-sheet { max-height: 100%; }  /* aj zoznamy (Storage, Projects…) až úplne hore (Owner 2.10.2026) */
  .model-sheet .ms { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .model-sheet .ms-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
  .model-sheet .ms-page { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; }
  .model-sheet .ms-page.ms-incoming { position: absolute; inset: 0; }
  .model-sheet .ms-list { flex: 1 1 auto; min-height: 0; overflow-y: hidden; }
  /* zbalená bublinka má vždy rovnakú výšku ako Select provider a Connections: 10 riadkov po 58 px + okraje karty
     (Owner 29.9.2026) — zoznam modelov hore, Version/Effort dole; dlhší zoznam sa posúva */
  .modal.model-sheet .ms-page { height: var(--ms-page-h, calc(10 * 58px + 8px)); }  /* app.js zníži na nízkej obrazovke */
  .model-sheet .ms-pinned { margin-top: auto; }
  /* ťah prstom dole kdekoľvek bublinku zatvára (Owner 30.9.2026) — iPhone ho nesmie prevziať na posúvanie; dlhý zoznam
     posúvajú šípky v lište (app.js sheetPager) */
  .modal.model-sheet * { touch-action: none; }
  /* slider ako fader na mixážnom pulte (Owner 1.10.2026, návrh A): drážka pri pravom okraji zoznamu, biely jazdec
     s oranžovou ryskou, prejdená časť drážky oranžová; len keď sa zoznam nezmestí (app.js sheetFader) */
  .ms-fader-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .ms-fader-wrap > .ms-scroller, .ms-fader-wrap > .ms-list { flex: 1 1 auto; min-height: 0; overflow-y: hidden; }
  .ms-fader { display: none; position: absolute; top: 14px; bottom: 14px; right: 2px; width: 40px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
  .ms-fader-on > .ms-fader { display: block; }
  .ms-fader-on > .ms-has-fader .ms-row { padding-right: 52px; }
  .ms-fader-on > .ms-has-fader .ms-row + .ms-row::before { right: 52px; }
  .ms-fader-groove, .ms-fader-fill { position: absolute; left: 50%; width: 4px; margin-left: -2px; border-radius: 2px; }
  .ms-fader-groove { top: 0; bottom: 0; background: #E7E6E2; }
  .ms-fader-fill { top: 0; background: var(--orange); }
  .ms-fader-cap {
    position: absolute; top: 0; left: 50%; width: 26px; height: 44px; margin-left: -13px; box-sizing: border-box;
    border-radius: 8px; background: #fff; border: 1px solid #DCDAD4; box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  }
  .ms-fader-cap i { display: block; width: 12px; height: 2px; border-radius: 1px; background: #C9C7C1; }
  .ms-fader-cap i.on { width: 16px; background: var(--orange); }
  .ms-fader-active .ms-fader-cap { box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
  /* vodorovný posuvník zoznamu modelov (Owner 2.10.2026) — rovnaký vzhľad ako zvislý: sivá drážka, oranžová časť,
     biely jazdec s ryskami */
  .model-sheet .ms-list.ms-grow { flex: none; position: relative; overflow-y: hidden; box-sizing: border-box; }  /* výška z app.js vrátane okrajov karty — inak bol spodok bubliny o 8 px orezaný */
  .model-sheet .ms-page:has(.ms-grow) > .ms-pinned { flex: none; }  /* Version/Effort sa nikdy nestlačia */
  .ms-hslider { position: relative; flex: none; height: 30px; margin: -4px 22px; cursor: pointer; touch-action: none;
    -webkit-tap-highlight-color: transparent; }
  /* zoznamy (Storage, Projects…): posuvník vyššie, aby naň palec dočiahol, a s väčším odstupom od zoznamu (Owner 2.10.2026) */
  .modal.model-sheet .ms-hslider-bar { flex: none; padding: 9px 12px; border-radius: 24px; background: #ECEBE7; }
  .modal.model-sheet .ms-hslider-bar .ms-hslider { margin: 0; }
  /* nápis nad posuvníkom („Ďalšie modely“ / „Ďalšie položky“ — Owner 4.10.2026) */
  .ms-hslider-label { padding: 1px 10px 5px; font-family: var(--sans); font-size: 13px; line-height: 16px; color: var(--faint, #8A8A85); }
  .modal.model-sheet .ms-hslider-bar .ms-hslider-groove { background: #DAD8D2; }
  .modal.account-sheet .ms-hslider-bar { margin: 4px 0 0; }  /* pod ňou len spoločných 24 pt bubliny (variant B, Owner 4.10.2026) */
  /* zoznam končí zaobleným okrajom aj keď je odrezaný posúvaním */
  .modal.account-sheet .ms-page.ms-scroll .ms-scroller { border-radius: 22px; }
  .ms-hslider-groove, .ms-hslider-fill { position: absolute; top: 50%; left: 0; height: 4px; margin-top: -2px; border-radius: 2px; }
  .ms-hslider-groove { right: 0; background: #E7E6E2; }
  .ms-hslider-fill { width: 0; background: var(--orange); }
  .ms-hslider-cap {
    position: absolute; top: 50%; left: 0; width: 44px; height: 26px; margin-top: -13px; box-sizing: border-box;
    border-radius: 8px; background: #fff; border: 1px solid #DCDAD4; box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
    display: flex; align-items: center; justify-content: center; gap: 4px;
  }
  .ms-hslider-cap i { display: block; width: 2px; height: 12px; border-radius: 1px; background: #C9C7C1; }
  .ms-hslider-cap i.on { height: 16px; background: var(--orange); }
  .ms-hslider-active .ms-hslider-cap { box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
  .modal.model-sheet.dragging { transition: none; }
  /* zatváranie (Owner 13.10.2026): pomaly a rovnomerne zíde dole (nie rýchly štart), bez blednutia — dĺžka = SHEET_CLOSE_MS v ui.js */
  .modal.model-sheet.ms-closing { opacity: 1; transition: transform 650ms cubic-bezier(.35, .1, .25, 1); }
  .modal.model-sheet .ms-page .ms-scroller.ms-none { display: none; }  /* prázdny zoznam pod hlavičkou — bez medzery navyše */
  .modal.model-sheet.show { transform: none; }
  /* sivé pozadie presne ako Claude: 199,199,198 (zmerané) nad pozadím Coburgu 251,251,249 */
  body:has(.modal.model-sheet) .modal-scrim { background: rgba(0, 0, 0, .206); touch-action: none; }  /* ťah dole aj po pozadí */
  .ms-grip { width: 36px; height: 5px; border-radius: 3px; background: #CFCFCB; margin: 8px auto 4px; }
  .ms-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; margin-bottom: 14px; }
  .ms-round {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none;
    background: #fff; box-shadow: 0 2px 10px rgba(20, 20, 15, .08); display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--ink); -webkit-tap-highlight-color: transparent;  /* nie modrá farba tlačidiel Safari — farba textu Coburgu */
  }
  .ms-round .ic { width: 20px; height: 20px; }
  .ms-title { margin: 0; font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--ink); }
  .ms-body { display: flex; flex-direction: column; }
  .ms-card { background: #fff; border-radius: 22px; padding: 4px 0; }
  .ms-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; box-sizing: border-box;  /* aj prázdny riadok 58 px */ padding: 10px 22px; border: none; background: none;
    font: inherit; font-family: var(--sans); text-align: left; color: var(--ink); cursor: pointer; position: relative;
  }
  .ms-row + .ms-row::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; border-top: 1px solid #E6E5E1; }
  /* mazanie potiahnutím (Owner 3.10.2026, variant B): riadok ide doľava, za ním oranžový krúžok s bielym košom */
  .ms-swipe { position: relative; overflow: hidden; }
  .ms-swipe > .ms-row { background: #FFFFFF; z-index: 1; touch-action: pan-y; }
  :is(.ms-swipe, .ms-row) + .ms-swipe > .ms-row::before, .ms-swipe + .ms-row::before {
    content: ""; position: absolute; top: 0; left: 22px; right: 22px; border-top: 1px solid #E6E5E1;
  }
  .ms-swipe-del {
    position: absolute; top: 0; bottom: 0; right: 14px; margin: auto 0; width: 44px; height: 44px; padding: 0; border: none;
    transform-origin: right center; z-index: 2;  /* nad riadkom — roztiahnutá pilulka je zaoblená z oboch strán */
    border-radius: 22px; background: var(--orange); color: #FFFFFF; display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(.55); cursor: pointer;
  }
  .ms-swipe-del .ic { width: 21px; height: 21px; }
  .ms-swipe.ms-swipe-gone { height: 0 !important; transition: height .24s ease; }
  .ms-swipe.ms-parked > .ms-row { padding-right: 72px; }  /* text pri odloženej guličke nejde pod ňu */
  /* potvrdenie zmazania ako na iPhone: karta vždy dole, všetko za ňou (texty aj pilulka) svetlosivé a stmavené, bez výrezov;
     bublinka sa medzitým nedá stiahnuť ani posúvať (Owner 3.10.2026) */
  .ms-confirm {
    position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); z-index: 60;  /* ako bublinky */
    box-sizing: border-box; padding: 0; font-family: var(--sans); background: #F9F9F7; border-radius: 26px;
    box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(16px); transition: opacity .2s ease-out, transform .22s ease-out;
  }
  .ms-confirm.ms-confirm-in { opacity: 1; transform: none; }
  .ms-confirm-dim {
    position: fixed; inset: 0; z-index: 55; opacity: 0; transition: opacity .2s ease-out;
    background: linear-gradient(rgba(0, 0, 0, .206), rgba(0, 0, 0, .206)), rgba(249, 249, 247, .6);  /* svetlosivé + stmavenie ako okná */
    -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1);
    pointer-events: none;
  }
  .ms-confirm-dim.ms-confirm-on { opacity: 1; }
  .ms-confirm-block { position: fixed; inset: 0; z-index: 56; touch-action: none; }
  .ms-logo { width: 20px; height: 20px; object-fit: contain; flex: none; }
  /* logá úložísk (Change storage) v rovnakom 22 px poli ako čiarové ikony bočného menu a riadkov Documents/Pictures —
     pri 20 px pôsobili menšie a text riadkov bol o 2 px vľavo (Owner 4.10.2026) */
  .modal.account-sheet .ms-logo { width: 22px; height: 22px; }
  .ms-name { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* dlhý názov rozhovoru na jeden riadok */
  .ms-value { font-size: 16px; color: var(--orange); }  /* zvolené nastavenie (Google Drive, Flash 3.6, Medium) oranžovou (Owner 1.10.2026) */
  /* dlaždice Version / Effort vo výbere modelu (Owner 1.10.2026, návrh B) */
  .ms-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
  .ms-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px 12px 12px;
    background: #fff; border: none; border-radius: 18px; font: inherit; font-family: var(--sans); text-align: left;
    color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .ms-tile:active { background: #F1F0EC; }
  /* Version s jedinou možnosťou: riadok len ukazuje hodnotu, neotvára sa (Owner 2.10.2026) */
  /* hodnota vľavo, názov voľby vpravo pred šípkou (Owner 2.10.2026, na skúšku) */
  .ms-row.ms-swap .ms-value { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-row.ms-swap .ms-name { flex: none; margin-right: 0; font-size: 16px; }
  /* vymenené farby (Owner 4.10.2026): hodnota („Luna“, „Veľmi vysoké“) čierna, názov voľby („Verzia“, „Uvažovanie“) oranžový */
  .ms-row.ms-swap .ms-value { color: var(--ink); }
  .ms-row.ms-swap .ms-name { color: var(--orange); }
  .ms-title-img { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
  .ms-title-logo { width: 20px; height: 20px; object-fit: contain; flex: none; }
  .ms-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* podnadpis pod názvom modelu („Vybrať verziu“), logo + názov ostávajú v jednom riadku (Owner 4.10.2026) */
  /* row-gap 0: nadpis s logom (Google Drive) inak dedil gap 8 px z .ms-title-img aj medzi riadky — veta bola o 8 px nižšie
     ako pri nadpise bez loga (Zmeniť úložisko) a pri prepnutí bubliny skákala (Owner 4.10.2026) */
  .ms-title-has-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 8px; row-gap: 0; max-width: calc(100% - 110px); }
  .ms-title-sub { flex: 0 0 100%; margin-top: 0; text-align: center; font-size: 14px; line-height: 18px; font-weight: 400; color: #6B6A66;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* dlhý riadok: trojbodka, nie orezanie z oboch strán */
  /* hlavička s doplnkovou vetou (Owner 4.10.2026, variant A): viac vzduchu pod úchytom, nadpis v jednej línii s krúžkom
     X / späť (44 px), veta pod ním a 24 px od obsahu — predtým sa oba riadky tlačili do 52 px */
  .ms-grip:has(+ .ms-head .ms-title-has-sub) { margin-bottom: 14px; }
  .ms-head:has(.ms-title-has-sub) { align-items: flex-start; margin-bottom: 24px; }
  /* rozdeľovník pod nadpisom („Chat“ / „Select provider“), ako na počítači (Owner 6.10.2026) */
  .ms-head:has(.ms-title-has-sub) { position: relative; padding-bottom: 14px; margin-bottom: 14px; }
  .ms-head:has(.ms-title-has-sub)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
  .ms-head:has(.ms-title-has-sub) .ms-round { top: 0; transform: none; }
  .ms-title-has-sub .ms-title-text { line-height: 44px; }
  .ms-row.ms-static { cursor: default; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
  .ms-row.ms-static:active, .ms-row.ms-static:hover { background: none; }
  .ms-tile.ms-nav { height: 78px; box-sizing: border-box; gap: 6px; padding: 14px 14px 12px; }
  .ms-tile-label { font-size: 12px; font-weight: 500; color: #6E6D69; }
  .ms-tile-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
  .ms-tile-value { font-size: 20px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-chev { width: 16px; height: 16px; opacity: .45; }
  /* „Change storage“ (Owner 4.10.2026): ikona aj text oranžové, šípka ostáva sivá ako v ostatných riadkoch */
  .ms-row.ms-orange, .ms-row.ms-orange .ms-name { color: var(--orange); }
  .ms-row.ms-orange .ms-chev { color: var(--ink); }
  .ms-check { width: 20px; height: 20px; flex: none; }
  .ms-row.ms-empty { cursor: default; }
  /* bublinka Projects: nový projekt samostatne úplne dole — oranžová pilulka s názvom a „+“ (Owner 1.10.2026) */
  .ms-foot { flex: none; }
  /* Projects (Owner 4.10.2026): sivé nadpisy sekcií „Nový projekt“ / „Vaše projekty“ 8 px nad obsahom, pod pilulkou
     väčšia medzera; pilulka hore sa nestláča */
  .ms-top { flex: none; }
  /* karta s textom (Testovanie — Owner 4.10.2026) */
  .ms-card.ms-text { padding: 16px 22px; font-family: var(--sans); font-size: 16px; line-height: 23px; color: #2E2D2A; }
  .ms-sec-img { display: flex; align-items: center; gap: 6px; }
  .ms-sec-logo { width: 16px; height: 16px; flex: none; }
  .ms-tail-logo { width: 22px; height: 22px; flex: none; margin-left: auto; }
  .ms-sec { flex: none; padding: 0 22px; margin-bottom: -6px; font-family: var(--sans); font-size: 13px; line-height: 16px; color: #6B6A66; }
  .ms-sec-after { margin-top: 18px; }  /* medzi sekciami 32 px (14 + 18), nadpis sekcie 8 px nad obsahom (Owner 4.10.2026) */
  .ms-new-project { display: flex; flex-direction: column; gap: 6px; }
  .ms-input-line { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 22px; }
  .ms-input {
    flex: 1; min-width: 0; border: none; outline: none; background: none; padding: 0; font: inherit; font-family: var(--sans);
    font-size: 17px; color: var(--ink); -webkit-user-select: text; user-select: text;  /* bublinka inak výber textu vypína */
  }
  .ms-input::placeholder { color: #8C8E92; opacity: 1; }
  .ms-send { width: 44px; height: 44px; flex: none; margin-left: 0; }
  .ms-send .icon-add { width: 22px; height: 22px; }
  /* názov je napísaný: „+“ plne čierne s bielym symbolom (Owner 3.10.2026: čierne, oranžová patrí mazaniu) */
  /* farby ako gulička so šípkou v poli na písanie (.send v chat.css — Owner 4.10.2026): bez názvu sivá, s názvom tmavá */
  .ms-send.btn-ink:disabled { background: #ECEBE9; color: #8c8c8c; border: 1px solid #d6d6d6; opacity: 1; }
  .ms-send.btn-ink:not(:disabled), .ms-send.ms-send-busy { background: #2e2e2e; border-color: #2e2e2e; color: #fdfdfd; }
  .ms-send.btn-ink:active:not(:disabled) { background: #222; border-color: #222; }
  .ms-send.ms-send-busy, .ms-send.ms-send-busy:disabled { opacity: 1; }
  .ms-send .spin { transform: scale(.45); margin: -6px; }
  .ms-send.ms-send-busy .spin i { background: #fff; }  /* koliesko bielo na oranžovej */
  .ms-send.ms-send-busy .spin-ring circle { stroke: #fff; }
  .ms-input-error { font-family: var(--sans); font-size: 13px; color: #B3261E; padding: 0 22px; }
  /* nový projekt ako prvý riadok karty (Owner 6.10.2026, ako počítač): „+“, pole; s textom „+“ zmizne a vpravo čierna
     gulička so šípkou hore */
  .ms-np-line { cursor: text; padding-right: 10px; }
  .ms-np-plus { color: var(--ink); }
  .ms-np-line .ms-input { caret-color: var(--orange); }
  .ms-np-add { display: none; flex: none; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%;
    background: var(--ink); color: #fff; align-items: center; justify-content: center; }
  .ms-np-add .ic { width: 18px; height: 18px; }
  .ms-np-line.has-text .ms-np-add, .ms-np-add.ms-send-busy { display: inline-flex; }
  .ms-np-line.has-text .ms-np-plus { display: none; }
  .ms-np-add .spin { transform: scale(.41); margin: -6px; }
  .ms-np-add.ms-send-busy .spin i { background: #fff; }
  .ms-np-add.ms-send-busy .spin-ring circle { stroke: #fff; }
  .ms-new-project { position: relative; }
  .ms-new-project:not(:last-child)::after { content: ""; position: absolute; bottom: 0; left: 22px; right: 22px; border-top: 1px solid #E6E5E1; }
  .ms-new-project .ms-input-error { padding-bottom: 10px; }
  /* „New Project“ aj výber projektu sú na mobile v bublinke Projects, v bočnom menu nie (Owner 30.9.2026) */
  #new-project, #project-switch { display: none !important; }

}


/* --- Mobil: bočné menu ako Claude na iPhone (Owner 29.9.2026, zmerané na jeho snímke) ----------------------------------
   hlavná časť sa pomaly odsunie doprava a odhalí menu pod sebou; vpravo vykukuje 70 bodov ako zaoblená kartička v pôvodnej
   farbe; menu #F3F3F0 od vrchu po spodok, posúva sa celé naraz; dole biela guľôčka účtu a čierna pilulka „+ New chat“ */
@media (max-width: 760px) {
  .nav {
    width: min(320px, calc(100vw - 70px)); background: #F3F3F0; border-right: none; overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 20; transform: none;
    bottom: auto; height: var(--app-height, 100dvh);  /* presne viditeľná výška — pilulka dole je vždy na obrazovke */
    visibility: hidden; transition: visibility 0s linear 560ms;
  }
  .app.drawer-open .nav { visibility: visible; transform: none; box-shadow: none; transition: none; }
  .main {
    z-index: 30; transition: transform 560ms cubic-bezier(.32, .72, 0, 1), border-radius 560ms cubic-bezier(.32, .72, 0, 1);
  }
  .app.drawer-open .main {
    transform: translateX(min(320px, calc(100vw - 70px))); border-radius: 44px 0 0 44px; overflow: hidden;
    box-shadow: -1px 0 0 rgba(20, 20, 15, .14), -10px 0 34px rgba(20, 20, 15, .06);
  }
  .scrim { z-index: 35; background: transparent; left: min(320px, calc(100vw - 70px)); bottom: auto; height: var(--app-height, 100dvh); }  /* ťuknutie na kartičku zavrie */
  /* hlavička: bez krížika; hľadanie je vpravo hore na stránke rozhovoru (Owner 29.9.2026) */
  /* krížik je neviditeľný, ale čítačka obrazovky ho nájde (zatvorenie menu bez gesta — kontrola Fable) */
  .nav-close {
    display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .nav-head { align-items: center; padding: 10px 16px 0 22px; }
  /* Chats a Projects ako bežné riadky (bez bubliny, ako na počítači); zvolený má tmavšie pozadie a fialovú fajku */
  .mode-card { margin: 14px 0 0; padding: 0 14px; border: none; border-radius: 0; background: none; }
  /* celé menu sa posúva naraz; miesto dole pre guľôčku a pilulku */
  .nav-scroll { flex: none; overflow: visible; padding-bottom: 24px; }
  #new-chat, #new-project { display: none; }  /* nový rozhovor / projekt je v pilulke dole */
  .nav-bottom {
    position: sticky; bottom: 0; margin-top: auto; background: none; padding: 0 28px calc(28px + env(safe-area-inset-bottom));
    pointer-events: none;
  }
  .foot-line { justify-content: space-between; pointer-events: auto; }
  /* guľôčka s kolieskom rovnako vysoká ako pilulka „+ New chat“ v tom istom riadku — 46 bodov (Owner 2.10.2026;
     predtým 42 ako hamburger) */
  .account {
    width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; background: #fff; justify-content: center;
    box-shadow: 0 2px 12px rgba(20, 20, 15, .08); flex: none;
  }
  .account:hover, .account[aria-expanded="true"] { background: #fff; }
  .account-name, #nav-search { display: none; }
  .account .avatar { background: none; width: auto; height: auto; font-size: 17px; font-weight: 500; color: var(--ink); }
  /* spodné menu: koliesko namiesto písmena účtu (Owner 1.10.2026) */
  .account .avatar { display: none; }
  /* koliesko 25 b — v guľôčke 46 b v rovnakom pomere ako predtým 23 b v 42 b (Owner 2.10.2026) */
  .account .account-gear { display: inline-block; width: 25px; height: 25px; color: var(--ink); }
  .nav-pill {
    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; cursor: pointer;
    box-shadow: 0 6px 20px rgba(20, 20, 15, .18); -webkit-tap-highlight-color: transparent;
  }
  .nav-pill .ic { width: 18px; height: 18px; }
  .pill-project { display: none; }
  body.mode-project .pill-chat { display: none; }
  body.mode-project .pill-project { display: inline; }

  /* Úpravy Owner 29.9.2026 (podľa Claude na iPhone, zmerané pri 3×) -------------------------------------------------- */
  /* pod zaoblenými rohmi kartičky rozhovoru rovnaká sivá ako menu */
  /* odsunutá kartička rozhovoru vytŕča za pravý okraj — orezať, inak iPhone rozšíri stránku a dá sa posúvať doľava
     (Owner 29.9.2026) */
  .app { overflow: hidden; }
  .app.drawer-open, .app.drawer-drag, .app.drawer-closing { background: #F3F3F0; }  /* sivá, kým kartička nedobehne */
  html, body { overflow-x: hidden; }
  /* farba líšt prehliadača (Safari 26 ju berie z pozadia stránky): rozhovor #FBFBF9, otvorené menu #F3F3F0 */
  html:has(.app:not([hidden])), html:has(.app:not([hidden])) body { background: var(--raised); }
  html:has(.app.drawer-open), html:has(.app.drawer-open) body { background: #F3F3F0; }
  /* otvorený súbor na celú obrazovku: celá stránka v jednej farbe s riadkom s časom hore — sivá #F3F3F0 (Owner 1.10.2026) */
  html:has(.app.doc-open), html:has(.app.doc-open) body, .app.doc-open { background: #F3F3F0; }
  /* Safari 26 berie farbu riadku s časom z pevného prvku v strede úplne hore (4 px pod okrajom) a jeho farbu číta len
     vtedy, keď sa pevný prvok objaví alebo zmizne. Po zatvorení bublinky si nechával tmavú farbu jej stmavenia aj nad
     otvoreným obrázkom (Owner 1.10.2026). Tento neviditeľný pás je preto vždy hore — POD stmavením bublinky (z 50), aby
     pri otvorenej bublinke Safari zobral stmavenie, a NAD stránkou a súborom (z 45), aby potom zobral farbu pása.
     Overené v Safari simulátora iOS 26.3: rozhovor, menu, bublinka, obrázok, späť, ďalší obrázok — lišta vždy ako stránka.
     opacity 0 Safari číta, pointer-events: none už nie (vtedy pás preskočí). */
  html:has(.app:not([hidden])) .tint-strip {
    display: block; position: fixed; top: 0; left: 0; right: 0; height: 12px; z-index: 49; opacity: 0;
    background: var(--raised);
  }
  html:has(.app.drawer-open) .tint-strip, html:has(.app.doc-open) .tint-strip { background: #F3F3F0; }
  /* prehliadač fotiek (z 120): pás nad ním, biely — Safari z neho po otvorení prečíta farbu riadku s časom (Owner 3.10.2026:
     pri fotke zo Storage ostával sivý od bočného panela a bublinky) */
  html.pv-open:has(.app:not([hidden])) .tint-strip { z-index: 121; background: var(--raised); }
  /* guľôčka a pilulka dole sú pevne na mieste — pri posúvaní menu (aj pri odskoku na konci) sa nehýbu, text ide pod
     nimi (Owner 29.9.2026); spodný okraj v jednej línii so spodkom poľa na písanie (8 px + spodný okraj iPhonu) */
  .nav-bottom {
    position: fixed; left: 0; width: min(320px, calc(100vw - 70px)); bottom: auto; box-sizing: border-box;
    top: calc(var(--app-top, 0px) + var(--app-height, 100dvh)); transform: translateY(-100%);
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .nav-scroll { padding-bottom: 96px; }  /* posledné riadky sa dajú vysunúť nad guľôčku a pilulku */
  .foot-line { align-items: flex-end; }
  /* „Coburg“ hore pevne na mieste; menu sa posúva pod ním a text pod ním postupne bledne (Owner 29.9.2026, ako Claude) */
  .nav-head {
    position: fixed; top: var(--app-top, 0px); left: 0; z-index: 3; width: min(320px, calc(100vw - 70px)); box-sizing: border-box;
    min-height: calc(env(safe-area-inset-top) + 54px); padding-top: calc(env(safe-area-inset-top) + 6px); pointer-events: none;
  }
  .nav-head > * { pointer-events: auto; }
  .nav-head::before {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; bottom: -34px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(243, 243, 240, .96), rgba(243, 243, 240, .88) calc(100% - 40px), rgba(243, 243, 240, 0));
  }
  .mode-card { margin-top: 68px; }  /* miesto pod pevným nápisom Coburg (54 + 14) */
  /* bez prázdneho riadku medzi Project a výberom AI (ChatGPT…) (Owner 29.9.2026) */
  .nav-scroll { padding-top: 0; }
  /* zvolený riadok (Chat, otvorený rozhovor) tmavšie — sivá z bubliny s adresou v Chrome na iPhone (Owner 29.9.2026) */
  .mode-row.current, .mode-row.current:hover, .thread-row.on { background-color: var(--row-open); }
  /* všetky riadky začínajú tam, kde ikona pri „Chat“ (26 bodov od okraja), text v jednom stĺpci (60 bodov) */
  .mode-card { padding: 0 16px; }
  .nav-new { display: none; }  /* mobil: nový rozhovor je v pilulke dole */
  .nav-scroll > .mode-card { margin: 68px -24px 0; }  /* karta režimov v posuvnej časti — riadky na mieste, pod pevným nápisom */
  /* veľkosti ako Claude na iPhone (zmerané pri 3×): písmo 17 bodov, ikona ~19 bodov, riadky po 50 bodoch, tmavý text */
  .mode-row { padding-left: 10px; gap: 12px; font-size: 17px; min-height: 50px; color: var(--ink); }
  .nav-scroll { padding-left: 24px; padding-right: 24px; }
  .mode-row .ic, .row .ic, .row-logo, .storage-row .row-logo { width: 22px; height: 22px; margin-right: 0; }
  .row { gap: 12px; font-size: 17px; min-height: 50px; color: var(--ink); }
  .thread-row { gap: 12px; }
  .thread-row .row-name { font-size: 17px; }
  /* strom úložiska: priečinky ako riadky, súbory o stupeň menšie a odsadené pod názov priečinka */
  .tr-row { gap: 12px; min-height: 46px; color: var(--ink); }
  .tr-chev { width: 22px; height: 22px; }
  .tr-name { font-size: 17px; }
  .tr-sub::before { left: 21px; }
  .tr-file { padding-left: 38px; }
  .tr-file .tr-name { font-size: 16px; }
  .tr-file-icon { width: 22px; height: 22px; }
  /* nadpisy sekcií (Storage, Pinned, Threads): riadok ako ostatné s ikonou, vždy otvorené (Owner 30.9.2026);
     bez prázdneho riadku medzi sekciami (Owner 29.9.2026, rozostupy ako Claude) */
  .nav-sec { margin-top: 6px; }
  /* Úložisko hneď pod Projekty v rovnakom rozstupe 50 pt ako ostatné riadky (Owner 4.10.2026: bolo 56 pt) */
  .nav-sec.nav-storage { margin-top: 0; }
  /* zvolený projekt (variant A): nižší podriadok, čiara spod ikony priečinka (22 px); ťuknutie otvorí výber projektu */
  .mode-row.active-project { min-height: 44px; font-size: 16px; gap: 12px; cursor: pointer; }
  .nav-empty { font-size: 16px; }
  .ap-tree { margin-left: 10px; }
  /* podfarbenie riadkov zaoblené ako v Claude — 14 pt namiesto 8 (Owner 4.10.2026) */
  .mode-row, .row, .sec-head.sec-button { border-radius: 14px; }
  .sec-head { font-size: 14px; min-height: 30px; }  /* Pinned, Threads: menšie a sivé aj na mobile */
  /* nadpis Pripnuté / Vlákna patrí k riadku pod ním (Owner 4.10.2026): text o 6 px nižšie v tom istom 30 px riadku —
     k prvému riadku 34 px (bolo 40), od riadku nad ním 52 px (bolo 46); celková výška sa nemení */
  .sec-head:not(.sec-button) { padding-top: 12px; padding-bottom: 0; }
  .sec-head.sec-button { gap: 12px; font-size: 17px; min-height: 50px; color: var(--ink); }
  .sec-ic { width: 22px; height: 22px; margin-right: 0; }
  .sec-head.sec-button .storage-chev { display: none; }  /* mobil: bez šípky vpravo pri Storage (Owner 30.9.2026) */
  /* otvorená bublinka Storage (Owner 1.10.2026): oranžová fajka aj sivý riadok prejdú na Storage */
  #sec-storage.menu-open .storage-check { display: block; }
  #sec-storage .sec-name:has(+ .storage-check) { flex: 0 1 auto; }
  #sec-storage.menu-open, #sec-storage.menu-open:hover { background-color: var(--row-open); }
  /* po zatvorení bublinky Storage nie je zvolený žiadny riadok, kým sa neťukne na režim (Owner 1.10.2026) */
  .nav:has(#sec-storage.menu-open) .mode-row .menu-check, .nav.no-mode .mode-row .menu-check { display: none; }
  .nav:has(#sec-storage.menu-open) .mode-row.current, .nav.no-mode .mode-row.current { background-color: transparent; }
  /* Chats → Projects → Storage rovnaké rozostupy ako Chats → Projects (riadky po 50 bodoch, Owner 30.9.2026) */
  .nav-sec[aria-label="Storage"] { margin-top: 0; }
  /* „No Pinned Chat“ svetlou sivou ako na počítači — nie tmavým textom riadkov (Owner 30.9.2026) */
  .row.pin-empty { color: var(--unavailable); }
  /* prechod z Projects do Chats: najprv prázdna obrazovka vo farbe pozadia, potom sa obsah plynule rozsvieti */
  /* bočné menu pri zmene režimu: jemne (na 40 %) sa stlmí a rozsvieti len ťuknutý riadok (Owner 1.10.2026) */
  .main.mode-blank > * { opacity: 0; }
  .mode-row.mode-blank, #sec-storage.mode-blank { opacity: .4; }
  .main.mode-reveal > *, .mode-row.mode-reveal, #sec-storage.mode-reveal { transition: opacity .45s ease; }
  /* ☰ vľavo, menu rozhovoru (open.svg) vpravo — v menšej bielej guľôčke, riadok o kúsok nižšie; bez názvu rozhovoru
     a bez hľadania (Owner 29.9.2026) */
  .mtop { padding-top: calc(env(safe-area-inset-top) + 6px); }
  #menu-btn, #mtop-open {
    width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(20, 20, 15, .08);
  }
  #menu-btn { margin-left: 10px; }
  #mtop-open { display: flex; margin-right: 10px; }
  .mtop:not(.has-thread) #mtop-open { visibility: hidden; }  /* prázdny nový rozhovor: nie je čo otvoriť (Owner 29.9.2026) */
  #menu-btn:active, #mtop-open:active { background: #fff; }
  #menu-btn svg { width: 20px; height: 20px; }
  #mtop-open .ic { width: 21px; height: 21px; }
  /* relácia (Owner 16.10.2026): pripináčik a „…“ v jednej bielej pilulke — ako na stránke projektu */
  .mtop-chat-actions {
    display: flex; align-items: center; margin-right: 10px; height: 42px; padding: 0 3px; border-radius: 21px; background: #fff;
    box-shadow: 0 2px 12px rgba(20, 20, 15, .08);
  }
  .mtop-chat-actions #mtop-open { width: 38px; height: 38px; margin: 0; background: none; box-shadow: none; }
  .mtop-chat-actions #mtop-open:active { background: none; }
  .mtop:not(.has-thread) .mtop-chat-actions { visibility: hidden; }
  /* pri otvorenom menu je vykúkajúca kartička rozhovoru bledá (ako Claude: text ~60 % do farby pozadia) — nepôsobí
     dominantne; pri ťahaní prstom bledne postupne (app.js nastavuje --peek) */
  .main::after {
    content: ""; position: absolute; inset: 0; z-index: 60; background: rgba(251, 251, 249, .6); pointer-events: none;
    opacity: 0; transition: opacity 560ms cubic-bezier(.32, .72, 0, 1);
  }
  .app.drawer-open .main::after { opacity: 1; }
  .app.drawer-drag .main::after { opacity: var(--peek, 0); transition: none; }
  /* názov rozhovoru hore medzi ☰ a menu rozhovoru je späť (Owner 2.10.2026) */
  /* bez posuvníka vpravo — menu sa posúva prstom (Owner 29.9.2026) */
  .nav, .nav-scroll { scrollbar-width: none; }
  .nav::-webkit-scrollbar, .nav-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
  /* riadok rozhovoru v menu bez šípky — ťuknutie kamkoľvek naň otvorí rozhovor */
  .thread-row .row-more { display: none; }
  .thread-row.project-row .row-more { display: inline-flex; opacity: .55; }  /* Workflow: pripnúť, premenovať, zmazať projekt */
  #mtop-new { display: none; }
  /* vodorovne posúva stránku len prst v app.js (menu) — iPhone sám nič; kód a tabuľky sa posúvajú ďalej */
  /* zväčšenie dvoma prstami ostáva povolené (Astra); prehliadač bez „pinch-zoom“ vezme riadok bez neho */
  .main, .nav { touch-action: pan-y; touch-action: pan-y pinch-zoom; }
  .ai-txt pre, .msg-table-scroll { touch-action: pan-x pan-y; touch-action: pan-x pan-y pinch-zoom; }
  /* text pod guľôčkou a pilulkou mizne do stratena (ako Claude) */
  .nav-bottom { z-index: 2; }
  .nav-bottom::before {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -44px; bottom: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(243, 243, 240, 0), rgba(243, 243, 240, .82) 45%, rgba(243, 243, 240, .94));
  }
  /* menu účtu ako bublinka (ako výber modelu): vysoká presne na všetky riadky, bez rozťahovania */
  .modal.account-sheet .ms-page { height: auto; }
  .modal.account-sheet .ms, .modal.account-sheet .ms-body { flex: none; }  /* výška len podľa app.js, nie podľa obsahu */
  .modal.account-sheet .ms-page { justify-content: flex-start; }
  .modal.account-sheet .ms-scroller { display: flex; flex-direction: column; gap: 14px; }
  .modal.account-sheet .ms-page.ms-scroll { height: 100%; }
  .modal.account-sheet .ms-page.ms-scroll .ms-scroller { flex: 1 1 auto; min-height: 0; overflow-y: hidden; }
  /* vlastná strana v menu účtu (Kredit a spotreba, Jazyk, Podpora…), ktorá je dlhšia ako bublinka (Owner 19.10.2026):
     horná lišta stojí, obsah sa posúva prstom pod ňou a pri nej sa jemne stráca */
  .modal.account-sheet .ms-page.ms-noswipe:not(.ms-fill) { height: 100%; min-height: 0; padding-top: 0; }
  /* obsah začína pod lištou (66 px), pri posúvaní ide pod guličku, nadpis a pilulku a tam sa postupne stráca */
  .modal.account-sheet .ms-page.ms-noswipe:not(.ms-fill) > .ms-top {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-top: 70px; padding-bottom: 16px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 24px, #000 74px);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 24px, #000 74px);
  }
  .modal.account-sheet .ms-page.ms-noswipe:not(.ms-fill) > .ms-top::-webkit-scrollbar { display: none; }
  .modal.account-sheet .ms-title { max-width: calc(100% - 110px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-ic { width: 22px; height: 22px; flex: none; }
  .ms-row.ms-disabled { color: var(--unavailable); cursor: default; }
  .ms-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; margin: 0 4px; }
  /* nedostupné: značka v rovnakej svetlosivej ako text (napr. jablko pri iCloud) — ako v menu na počítači */
  .ms-row.ms-disabled .ms-ic { filter: grayscale(1) brightness(0) invert(85%); }
  .ms-row.ms-disabled .ms-logo { filter: grayscale(1); opacity: .3; }
  /* značky úložísk opticky rovnako veľké (ako Change Storage na počítači): OneDrive má v súbore veľký okraj, Apple
     a Dropbox žiadny, Google Drive o trochu menší */
  /* kým je bublinka otvorená, riadok ukazuje „Change Storage“ / „Change Provider“ s ikonou výmeny a šípkou; na mobile
     nie podľa prejdenia prstom (to by ostalo „visieť“) */
  .storage-row:hover .swap-rest, .storage-row:hover .row-logo { display: inline; }
  .storage-row:hover .swap-ic, .storage-row:hover .swap-hover { display: none; }
  .storage-row:hover .storage-chev { opacity: 0; }
  .storage-row.menu-open .swap-rest, .storage-row.menu-open .row-logo,
  .storage-row.menu-open .swap-ic { display: inline-block; }
  .storage-row.menu-open .swap-hover { display: inline; }
  .storage-row.menu-open .storage-chev { opacity: 1; }
  /* aktívny riadok v bočnom menu: sivá z bubliny adresy v Chrome #E9EAED (Owner 29.9.2026) — Chats/Projects, Change
     Provider/Storage/Project, otvorený rozhovor v Pinned a Threads. V bublinkách zospodu zvolenú položku ukazuje len
     fialová fajka, bez podfarbenia (Owner 29.9.2026). */
  .storage-row.menu-open { background-color: #E9EAED; }
  .ms-card { overflow: hidden; }
  /* karta v bublinke so zoznamom sa nesmie zmenšiť na výšku okna (orezala by riadky) — dlhý zoznam sa posúva celý
     vo vnútri bublinky (Owner 29.9.2026: Connections a Select provider sa nedali posunúť) */
  .modal.account-sheet .ms-card { flex: none; }
  /* bez posuvníka vpravo — obsah bubliniek posúvajú šípky (Owner 30.9.2026) */
  .modal.model-sheet .ms-scroller, .modal.model-sheet .ms-list { scrollbar-width: none; }
  .modal.model-sheet .ms-scroller::-webkit-scrollbar, .modal.model-sheet .ms-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
  /* fialová fajka všade rovnako veľká, o kúsok väčšia (Owner 29.9.2026) */
  .ms-check, .menu-check, .topic-check { width: 25px; height: 25px; }
  /* kým ťaháš prstom, menu a kartička idú presne za prstom (app.js) */
  .app.drawer-drag .nav { visibility: visible; transition: none; }
  .app.drawer-drag .main { transition: none; overflow: hidden; box-shadow: -1px 0 0 rgba(20, 20, 15, .14), -10px 0 34px rgba(20, 20, 15, .06); }
}
.nav-pill, #mtop-open, .mtop-chat-actions { display: none; }  /* na počítači nie */
@media (max-width: 760px) { .nav-pill { display: inline-flex; } #mtop-open, .mtop-chat-actions { display: flex; } }

/* --- koliesko načítavania ako na iPhone: 12 lúčov, jas beží dookola (Owner 29.9.2026) ------------------------------------ */
/* jedna veľkosť kolieska v celej aplikácii — 48 px (Owner 13.10.2026: zväčšiť, všade rovnaké); v malých tlačidlách sa
   len zmenší, aby sa zmestilo do tlačidla */
.spin { position: relative; display: inline-block; width: 48px; height: 48px; flex: none; }
.spin i {
  position: absolute; left: calc(50% - 2px); top: 1px; width: 4px; height: 13px; border-radius: 2px; background: #8E8E93;
  transform-origin: 2px 23px; opacity: .15; animation: spin-fade 1s linear infinite;
}
.spin i:nth-child(1) { transform: rotate(0deg); animation-delay: -1.000s; }
.spin i:nth-child(2) { transform: rotate(30deg); animation-delay: -0.917s; }
.spin i:nth-child(3) { transform: rotate(60deg); animation-delay: -0.833s; }
.spin i:nth-child(4) { transform: rotate(90deg); animation-delay: -0.750s; }
.spin i:nth-child(5) { transform: rotate(120deg); animation-delay: -0.667s; }
.spin i:nth-child(6) { transform: rotate(150deg); animation-delay: -0.583s; }
.spin i:nth-child(7) { transform: rotate(180deg); animation-delay: -0.500s; }
.spin i:nth-child(8) { transform: rotate(210deg); animation-delay: -0.417s; }
.spin i:nth-child(9) { transform: rotate(240deg); animation-delay: -0.333s; }
.spin i:nth-child(10) { transform: rotate(270deg); animation-delay: -0.250s; }
.spin i:nth-child(11) { transform: rotate(300deg); animation-delay: -0.167s; }
.spin i:nth-child(12) { transform: rotate(330deg); animation-delay: -0.083s; }
@keyframes spin-fade { from { opacity: 1; } to { opacity: .15; } }
/* Android a ostatní (os.js): točiaci sa kruh ako Google — oblúk sa predlžuje a skracuje a pritom sa točí */
.spin-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: ring-rotate 2s linear infinite; }
.spin-ring circle {
  fill: none; stroke: #5F6368; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1, 200; stroke-dashoffset: 0;
  animation: ring-dash 1.5s ease-in-out infinite;
}
@keyframes ring-rotate { to { transform: rotate(360deg); } }
@keyframes ring-dash {
  0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124; }
}
/* Windows a ostatné počítače (os.js): kruh s dráhou — svetlý celý kruh, tmavý úsek sa točí */
.spin::before {
  content: ""; position: absolute; inset: 4px; box-sizing: border-box; border-radius: 50%; border: 4px solid #E3E3E0;
  border-top-color: #5F6368; animation: ring-rotate .8s linear infinite; display: none;
}
html:not(.os-android) .spin-ring { display: none; }
html:not(.os-apple) .spin i { display: none; }
html:not(.os-apple):not(.os-android) .spin::before { display: block; }
/* spustenie stránky: prázdna plocha, koliesko tam, kde bude oranžová guľôčka */
.boot-spin { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
.boot-spin[hidden], .load-spin[hidden] { display: none; }
/* mazanie v úložisku (Owner 12.10.2026): koliesko v strede obrazovky, priehľadná vrstva zachytí ťuknutia */
.busy-spin { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  /* pozadie rozmazané a vyblednuté ako počas hlasového hovoru (blur 7 px, ~45 % — Owner 12.10.2026) */
  background: rgba(249, 248, 246, .55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.busy-spin[hidden] { display: none; }
/* čakanie na dáta (Owner 17.10.2026): celá plocha prázdna — rozhovor, pole na písanie, hlavička, stránka projektu —
   a koliesko presne v strede; po načítaní sa všetko zase ukáže */
.load-spin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 25; }
.main.thread-loading > :not(.load-spin) { visibility: hidden !important; }
@media (max-width: 760px) {
  .boot-spin { top: calc(44.1vh - 48px); top: calc(44.1lvh - 48px); }  /* stred guľôčky nad pozdravom (chat.css) */
}

/* oranžový štýl tlačidiel a polí — druhá alternatíva popri čiernom (Owner 1.10.2026, ako Grok): biela pilulka,
   jemný oranžový okraj, oranžový text a ikona */
.pill-orange { background: #fff; border: 1.5px solid var(--orange-line); border-radius: 999px; box-sizing: border-box; }
.pill-orange:focus-within { border-color: var(--orange); }
.btn-orange {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid var(--orange-line);
  background: var(--orange-soft); color: var(--orange); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.btn-orange:active:not([disabled]) { background: #FFEDE2; }
@media (hover: hover) { .btn-orange:hover:not([disabled]) { background: var(--orange); border-color: var(--orange); color: #fff; } }
.btn-orange:disabled { opacity: .45; cursor: default; }
/* čierny štýl pilulky a tlačidla (Owner 3.10.2026: nový projekt — oranžová je vyhradená mazaniu): biela pilulka,
   čierny lem, čierny text; tlačidlo pri prejdení myšou čierne s bielym symbolom */
.pill-ink { background: #fff; border: 1.5px solid #1C1C1E; border-radius: 999px; box-sizing: border-box; }
.btn-ink {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid #1C1C1E;
  background: #fff; color: #1C1C1E; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent;
}
.btn-ink:active:not([disabled]) { background: #EDECEA; }
@media (hover: hover) { .btn-ink:hover:not([disabled]) { background: #1C1C1E; border-color: #1C1C1E; color: #fff; } }
.btn-ink:disabled { opacity: .45; cursor: default; }

/* logá AI poskytovateľov rovnako veľké všade — Chats, Images, Coding, bublinka aj menu (Owner 1.10.2026): obrázky majú
   rovnaký rozmer, ale tenká hviezda Gemini a čiary Grok pôsobia menšie, lúče Claude siahajú až po okraj */
:is(.ms-logo, .menu-img, .ai-chip-logo, .pill-logo)[src$="Google_Gemini.png"],
:is(.ms-logo, .menu-img, .ai-chip-logo, .pill-logo)[src$="xAI_Grok.png"] { transform: scale(1.15); }
:is(.ms-logo, .menu-img, .ai-chip-logo, .pill-logo)[src$="Anthropic.png"] { transform: scale(.86); }

/* potvrdzujúca fajka vždy hneď na konci textu v riadku, nie pri pravom okraji (Owner 1.10.2026) — text je len taký široký,
   aký treba, a ostatné (hodnota, šípka) idú doprava */
.menu-name, .mode-name, .topic-label, .ms-name { flex: 0 1 auto; margin-right: auto; }
:is(.menu-name, .mode-name, .topic-label, .ms-name):has(+ :is(.menu-check, .ms-check, .topic-check)) { margin-right: 0; }
.menu-check, .ms-check, .topic-check { margin-right: auto; }
.mode-row .menu-check[hidden] { display: none; }
/* komu poskytovateľ patrí („by Google“) — veľmi jemná sivá pilulka hneď za menom (Owner 6.10.2026, návrh C4) */
:is(.menu-name, .ms-name):has(+ .menu-company) { margin-right: 0; flex: none; } /* celé meno, nikdy „ByteP…“ */
.menu-company { flex: none; margin: 0 auto 0 8px; height: 18px; padding: 0 8px; box-sizing: border-box; border: 1px solid #E6E5E0;
  border-radius: 9px; background: #fff; font-size: 11px; line-height: 16px; font-weight: 400; color: #ADACA6; white-space: nowrap; }
.menu-company:has(+ :is(.menu-check, .ms-check)) { margin-right: 0; }
.menu-company + :is(.menu-check, .ms-check) { margin-left: 8px; }
@media (max-width: 760px) { .ms-row .menu-company { height: 22px; padding: 0 10px; border-radius: 11px; font-size: 13px; line-height: 20px; } }
/* krajina AI firmy — malá vlajka a názov krajiny v tej istej pilulke (Owner 6.10.2026, návrh A) */
.menu-country { display: inline-flex; align-items: center; gap: 5px; padding-left: 5px; }
.menu-flag { flex: none; width: 14px; height: 10px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
@media (max-width: 760px) { .ms-row .menu-country { padding-left: 7px; gap: 6px; } .ms-row .menu-flag { width: 16px; height: 11px; } }
/* druh poskytovateľa „Research“ — tá istá pilulka, bledomodrá (Owner 8.10.2026, výnimka z pravidla jedinej oranžovej) */
.menu-tag { color: #87C2E5; border-color: #87C2E5; }

/* haptika na iPhone (ui.js hapticTap): priehľadná plocha cez prvok so skrytým systémovým prepínačom */
.haptic-host { position: relative; }  /* prvok, do ktorého sa plocha vložila ešte mimo stránky (riadok rozhovoru) */
.haptic-hit { position: absolute; inset: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.haptic-hit > input { position: absolute; width: 1px; height: 1px; margin: 0; visibility: hidden; }
.renaming > .haptic-hit { display: none; } /* premenovanie v riadku: prst musí dosiahnuť na text */

/* Owner 4.10.2026 — bubliny a podsvietenie na počítači ako na mobile:
   - rohy všetkých bublín (Storage, spodné menu, výber modelu, názov vlákna, Projects, témy) 8 px = zaoblenie aktívneho
     riadku v paneli (pravidlá .menu a #topic-flyout vyššie);
   - aktívny riadok má na mobile #E7E6E2 na paneli #F3F3F0; na počítači je panel takmer biely (#FBFBF9), preto je riadok
     o rovnaký kus svetlejší (#EFEEEB) — vyzerá rovnako ako na mobile. Rovnako svetlý je riadok pod kurzorom v bublinách. */
@media (min-width: 761px) {
  /* riadok pod kurzorom o kúsok svetlejší než aktívny riadok (Owner 4.10.2026) */
  :root { --row-open: #EFEEEB; --row-hover: #F4F3F1; --nav-hover: #F4F3F1; }
  .menu-row:hover, .menu-row:focus-visible, .menu-account .menu-row:hover, .menu-row.flyout-open, .topic-row:hover { background-color: var(--row-open); }
}

/* Písanie názvu nového projektu (Owner 4.10.2026): existujúce projekty sivé ako „Zatiaľ žiadne vlákna“, bez fajky */
.ms-row.ms-active .ms-name { color: var(--orange); }
/* dĺžka videa (Owner 19.10.2026): sekundy na stred riadku, fajka vedľa nich (text ostáva presne v strede) */
.ms-row.ms-center { justify-content: center; }
.ms-row.ms-center .ms-name { flex: none; margin-right: 0; }
.ms-row.ms-center .ms-check { position: absolute; left: calc(50% + 26px); }  /* zvolený projekt ako na počítači (Owner 6.10.2026) */
.ms.ms-naming .ms-scroller .ms-name, .menu-projects.pb-naming .menu-row .menu-name { color: var(--unavailable); }
.ms.ms-naming .ms-scroller .ms-check, .menu-projects.pb-naming .menu-check { display: none; }
.menu-projects.pb-naming .menu-row.current { color: var(--unavailable); }

/* Úvodná stránka pre neprihláseného (Owner 6.10.2026): čistý panel — bez Pinned a Threads, bez fajky úložiska a riadku
   projektu; dole len „Log in“ s menu (na mobile bez pilulky nového rozhovoru a hľadania) */
body.guest .nav-sec:has(#sec-pinned), body.guest .nav-sec:has(#sec-threads),
body.guest .storage-check, body.guest #active-project, body.guest #nav-search,
body.guest #mtop-open, body.guest .mtop-chat-actions, body.guest #chat-title { display: none !important; }
/* mobil: na mieste „+ New chat“ čierna pilulka „Log in“ (vedie na prihlásenie) */
.pill-login { display: none; }
body.guest #nav-new .ic-plus, body.guest #nav-new .pill-chat, body.guest #nav-new .pill-project { display: none !important; }
body.guest #nav-new .pill-login { display: inline; }

/* plán, ktorý účet už má (Owner 12.10.2026): sivé, neklikateľné „Váš súčasný plán“ — silnejšie ako čierne/oranžové
   tlačidlá kartičiek (aj na mobile a pri kurzore) */
.upgrade-rail .upgrade-card .upgrade-cta.is-current,
.upgrade-rail .upgrade-card .upgrade-cta.is-current:hover { background: #F2F1EE; border-color: #F2F1EE; color: #8E8C85; cursor: default; }
/* testeri (Owner 13.10.2026): iné plány sa nedajú zvoliť — tlačidlá bledé a nereagujú */
.upgrade-rail .upgrade-card .upgrade-cta:disabled:not(.is-current) { opacity: .4; cursor: default; pointer-events: none; }

/* --- Workflow (Owner 14.10.2026): projekty v sidebare medzi Pinned a Threads, formulár nového projektu ------------- */
.nav-projects { display: none; }
/* zoznam projektov v sidebare zrušený (Owner 15.10.2026) — projekty sú na stránke Projects, v sidebare Recents */
.thread-row.project-row, .project-new, .project-more { gap: 9px; }
.project-row .ic, .project-new .ic, .project-more .ic { flex: none; }
.project-new { color: var(--orange); }
.project-new .ic { background-color: var(--orange); }
.project-more { color: #6B6A66; }
.newproj-card { align-self: stretch; padding: 4px 18px; text-align: left; }
.newproj-field { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; }
.newproj-field + .newproj-field { border-top: 1px solid var(--line); }
.newproj-label { font-size: 13px; color: #6B6A66; }
.newproj-name, .newproj-brief {
  border: none; outline: none; padding: 0; background: transparent; font: inherit; color: var(--ink); width: 100%;
}
.newproj-name { font-size: 17px; font-weight: 600; }
.newproj-brief { font-size: 15px; line-height: 1.45; resize: none; }
.newproj-go {
  align-self: stretch; height: 44px; border: none; border-radius: 22px; background: var(--ink); color: #FFFFFF;
  font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.newproj-go:disabled { opacity: .6; cursor: default; }
.newproj-error { align-self: stretch; text-align: center; }
.newproj-workflow .newproj-title { margin: 0 0 10px; text-align: center; font-size: 19px; }
.newproj-workflow { width: min(440px, calc(100vw - 32px)); }
/* Workflow od plánu Pro (Owner 14.10.2026): zámok pri Basic */
:is(#mode-project, #mode-images, #mode-coding) .lock-ic { width: 15px; height: 15px; margin-left: auto; background-color: #8A8A80; }
#mode-project.is-locked .mode-name { color: #6B6A66; }
/* Workflow (Kocka B1): dokumenty pod odpoveďou */
.ai-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ai-docs:empty { display: none; }


/* --- stránka Projects (Owner 15.10.2026, ako Claude) — browse.js -------------------------------------------------------
   počítač: pevná horná lišta (nadpis, hľadanie, zoradenie, „New project“), karty v dvoch stĺpcoch, obsah pod lištou
   postupne zosvetlí; mobil: riadky, ☰ a zoradenie hore, dole gulička s lupou a pilulka „+ New project“ */
.projects-page { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: var(--raised); }
.projects-page[hidden] { display: none; }
body.plp-on #chat-head, body.plp-on #thread, body.plp-on #project-page, body.plp-on #composer, body.plp-on #mtop { display: none !important; }
.plp-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.plp-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; box-sizing: border-box;
  padding: 44px max(48px, calc((100% - 1000px) / 2)) 30px; background: var(--raised);
}
.plp-head::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 44px; pointer-events: none;
  background: linear-gradient(to bottom, var(--raised), rgba(251, 251, 249, 0));
}
.plp-menu, .plp-bottom, .plp-ic, .plp-sub { display: none; }
.plp-title { flex: 1; min-width: 0; margin: 0; font-family: "Lora", Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.plp-tools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 1 auto; min-width: 0; }
.plp-tool {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 10px;
  background: none; color: var(--ink); cursor: pointer;
}
.plp-tool .ic { width: 21px; height: 21px; }
.plp-tool:hover, .plp-tool.is-open { background: var(--soft-hover); }
.plp-new {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; margin-left: 8px; padding: 0 20px; border: none;
  border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 15.5px; font-weight: 500; cursor: pointer;
}
.plp-new .ic { display: none; }
.plp-search {
  display: flex; align-items: center; gap: 8px; width: min(520px, 46vw); height: 42px; box-sizing: border-box; padding: 0 6px 0 14px;
  border: 1px solid var(--line2); border-radius: 12px; background: #fff;
}
.plp-search:focus-within { border-color: #8c8e92; }
.plp-lens { width: 18px; height: 18px; color: #6B6A66; }
.plp-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.plp-input::-webkit-search-cancel-button { display: none; }
.plp-x {
  flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 8px;
  background: none; color: var(--ink); cursor: pointer;
}
.plp-x .ic { width: 15px; height: 15px; }
.plp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px;
  padding: 6px max(48px, calc((100% - 1000px) / 2)) 56px;
}
.plp-card {
  display: flex; min-height: 158px; box-sizing: border-box; padding: 22px 24px 20px; border: 1px solid var(--line);
  border-radius: 16px; background: transparent; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
/* ako Claude (Owner 16.10.2026): karta vo farbe stránky s rámikom, pod kurzorom biela */
.plp-card:hover { background: #fff; border-color: var(--line2); }
.plp-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.plp-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16.5px; font-weight: 500; line-height: 1.35; }
.plp-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plp-pin { width: 15px; height: 15px; color: #8c8e92; }
.plp-desc {
  margin-top: 10px; font-size: 15px; line-height: 1.45; color: #3d3d3a;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.plp-when { margin-top: auto; padding-top: 22px; font-size: 14px; color: #8c8e92; }
.plp-empty { grid-column: 1 / -1; margin: 40px 0; text-align: center; font-size: 15px; color: #8c8e92; }
/* mobil: hľadanie v bočnom menu — biela gulička s lupou vpravo hore */
.nav-find { display: none; }
.msearch { display: none; }
@media (max-width: 760px) {
  .projects-page { position: absolute; inset: 0; }
  .plp-head {
    padding: calc(env(safe-area-inset-top) + 6px) 16px 10px; gap: 8px; min-height: 0;
  }
  .plp-head::after { height: 34px; }
  .plp-menu { display: flex; }
  .plp-title { flex: 1; text-align: center; font-family: inherit; font-size: 17px; font-weight: 600; }
  .plp-find, .plp-new { display: none; }
  .plp-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;
    -webkit-tap-highlight-color: transparent;
  }
  .plp-round .ic { width: 20px; height: 20px; }
  .plp-tools .plp-sort {
    width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(20, 20, 15, .08);
  }
  .plp-tools .plp-sort.is-open, .plp-tools .plp-sort:hover { background: #fff; }
  .plp-tools .plp-sort .ic { width: 20px; height: 20px; }
  .plp-grid { display: flex; flex-direction: column; gap: 0; padding: 4px 0 120px; }
  .plp-card {
    min-height: 0; align-items: center; gap: 16px; padding: 10px 20px; border: none; border-radius: 0; background: none;
    box-shadow: none; transition: none; -webkit-tap-highlight-color: transparent;
  }
  .plp-card:hover { box-shadow: none; }
  .plp-card:active { background: var(--soft-hover); }
  .plp-ic {
    display: flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px;
    background: #EDECE8; color: #6B6A66; align-self: flex-start; margin-top: 3px;
  }
  .plp-ic .ic { width: 19px; height: 19px; }
  .plp-name { font-size: 17px; font-weight: 400; }
  .plp-pin { width: 14px; height: 14px; }
  .plp-desc, .plp-when { display: none; }
  .plp-sub { display: flex; min-width: 0; margin-top: 3px; white-space: nowrap; font-size: 15px; color: #8c8e92; }
  .plp-sub-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .plp-sub-when { flex: none; white-space: pre; }
  .plp-sub:empty { display: none; }
  .plp-bottom {
    position: absolute; left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 3; display: flex;
    align-items: center; justify-content: space-between; gap: 10px; padding: 0 20px; pointer-events: none;
  }
  html.kbd-open .plp-bottom { bottom: calc(var(--kbd, 0px) + var(--kbd-x, 0px) + 8px); }
  .plp-bottom > * { pointer-events: auto; }
  .plp-bottom .plp-round { width: 46px; height: 46px; }
  .plp-bottom .plp-round .ic { width: 21px; height: 21px; }
  .plp-pill {
    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; cursor: pointer;
    box-shadow: 0 6px 20px rgba(20, 20, 15, .18); -webkit-tap-highlight-color: transparent;
  }
  .plp-pill .ic { width: 18px; height: 18px; }
  .plp-msearch, .msearch-field {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; box-sizing: border-box; padding: 0 16px;
    border-radius: 23px; background: #fff; box-shadow: 0 2px 12px rgba(20, 20, 15, .08);
  }
  .plp-msearch .plp-input, .msearch-input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 17px; color: var(--ink);
    -webkit-appearance: none; appearance: none;
  }
  .msearch-input::-webkit-search-cancel-button { display: none; }
  .plp-msearch .plp-lens, .msearch-field .ic { width: 20px; height: 20px; color: var(--ink); }
  /* hľadanie v bočnom menu (ako Claude): gulička hore, zoznam vlákien a pole nad klávesnicou */
  .nav-find {
    display: flex; align-items: center; justify-content: center; margin-left: auto; width: 46px; height: 46px; padding: 0; border: none;
    border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 2px 12px rgba(20, 20, 15, .08); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-find .ic { width: 21px; height: 21px; }
  .msearch {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: var(--app-top, 0px); z-index: 45;
    height: var(--app-height, 100dvh); background: var(--raised); font-family: var(--ui); color: var(--ink);
  }
  .msearch-list {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(env(safe-area-inset-top) + 8px) 0 96px;
  }
  .msearch-row {
    display: flex; align-items: flex-start; gap: 16px; width: 100%; padding: 9px 20px; border: none; background: none; font: inherit;
    color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .msearch-row:active { background: var(--soft-hover); }
  .msearch-ic { width: 21px; height: 21px; margin-top: 2px; color: #3d3d3a; }
  .msearch-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .msearch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
  .msearch-when { margin-top: 3px; font-size: 15px; color: #8c8e92; }
  .msearch-empty { margin: 30px 20px; font-size: 15px; color: #8c8e92; }
  .msearch-bar {
    position: absolute; left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
    padding: 0 16px;
  }
  html.kbd-open .msearch-bar { bottom: 8px; }
  .msearch-bar .plp-round { width: 46px; height: 46px; }
  .msearch-bar .plp-round .ic { width: 20px; height: 20px; }
}

/* Projects (Owner 15.10.2026, ako Claude): všetky vlákna — počítač skupiny Today / Yesterday / Older bez ikon,
   mobil jedna sekcia „Recents“ a pred riadkom ikona Chats/Projects (aj v Pinned) */
/* Owner 15.10.2026: ikona Chat / Projects pri vláknach v Pinned a Recents aj na počítači — vidno, čo je projekt */
.thread-row .row-ic { display: inline-block; flex: none; width: 16px; height: 16px; color: var(--item); }
.thread-row.group-first { position: relative; margin-top: 30px; }
#thread-list > .thread-row.group-first:first-child { margin-top: 24px; }
.thread-row.group-first::before {
  content: attr(data-group); position: absolute; left: 10px; top: -24px; font-family: var(--ui); font-size: 12.5px; line-height: 18px;
  color: var(--sec-head); pointer-events: none;
}
/* počítač (Owner 17.10.2026, ako Claude): jedna sekcia Recents s nadpisom; skupiny Today / Yesterday / Older len pri
   voľbe „Zoskupiť podľa: Dátum“ v bubline pri Nedávnych */
@media (min-width: 761px) {
  #thread-list:not(.by-date) > .thread-row.group-first { margin-top: 0; }
  #thread-list:not(.by-date) > .thread-row.group-first::before { display: none; }
  #thread-list.by-date > .thread-row.group-first:first-child { margin-top: 26px; }
}
@media (max-width: 760px) {
  .thread-row.group-first, #thread-list > .thread-row.group-first:first-child { margin-top: 0; }
  .thread-row.group-first::before { display: none; }
  .thread-row .row-ic { display: inline-block; flex: none; width: 21px; height: 21px; margin-right: 5px; color: #3d3d3a; }
}

/* --- okná projektu (Owner 15.10.2026, ako Claude) — projectui.js ------------------------------------------------------- */
.modal.pd-modal { width: min(560px, calc(100vw - 32px)); max-width: 560px; padding: 30px 32px 26px; background: #fff; border-radius: 20px; }
.modal.pd-modal.pd-wide { width: min(760px, calc(100vw - 32px)); max-width: 760px; }
.pd { display: flex; flex-direction: column; gap: 20px; font-family: var(--ui); text-align: left; }
.pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pd-title { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.pd-x { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: -2px -6px 0 0; border: none; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; }
.pd-x:hover { background: var(--soft-hover); }
.pd-x .ic { width: 18px; height: 18px; }
.pd-intro { margin: -8px 0 0; font-size: 15.5px; line-height: 1.5; color: #3d3d3a; }
.pd-inline-link { padding: 0; border: none; background: none; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }
.pd-field { display: flex; flex-direction: column; gap: 9px; }
.pd-label { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.pd-opt { margin-left: 8px; font-weight: 400; color: #8c8e92; }
.pd-input, .pd-area {
  box-sizing: border-box; width: 100%; border: 1px solid #D6D5D0; border-radius: 10px; background: #fff; padding: 11px 14px;
  font: inherit; font-size: 16px; color: var(--ink); outline: none;
}
/* aktívne pole (Owner 16.10.2026): modrý lem ako pri úprave textu — #83A9E4, hrúbka 1,5 bez posunu obsahu */
.pd-input:focus, .pd-area:focus { border-color: #83A9E4; box-shadow: 0 0 0 .5px #83A9E4; outline: none; }
.pd-area { line-height: 1.45; resize: vertical; min-height: 90px; }
.pd-area-tall { min-height: 260px; }
.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-add, .pd-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid #D6D5D0; border-radius: 10px; background: #fff; font: inherit; font-size: 15px; color: var(--ink);
}
.pd-add { cursor: pointer; }
.pd-add:hover, .pd-add.is-open { background: var(--soft-hover); }
.pd-add .ic { width: 16px; height: 16px; }
.pd-chip { max-width: 100%; padding-right: 6px; background: #F4F3F0; }
.pd-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-chip-x { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; }
.pd-chip-x .ic { width: 12px; height: 12px; }
.pd-error { font-size: 14px; color: #C2410C; }
.pd-hint { margin: 10px 4px 0; font-size: 15px; line-height: 1.4; color: #8c8e92; }
.pd-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.pd-cancel, .pd-go {
  height: 44px; padding: 0 18px; border-radius: 22px; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
}
.pd-cancel { border: 1px solid #D6D5D0; background: #fff; color: var(--ink); }
.pd-cancel:hover { background: var(--soft-hover); }
.pd-go { border: none; background: var(--ink); color: #fff; }
.pd-go:disabled { background: #A9A8A3; cursor: default; }
/* okná projektov na počítači v mierke Claude (Owner 16.10.2026, zmerané na snímkach „Create a project“ pri rovnakej
   veľkosti bočného panela): okno 512, okraj 24, nadpis 22, polia 34 / 80, tlačidlá 32 — predtým o štvrtinu väčšie */
.modal.pd-modal { width: min(512px, calc(100vw - 32px)); max-width: 512px; padding: 24px 24px 24px; border-radius: 18px; }
.modal.pd-modal.pd-wide { width: min(700px, calc(100vw - 32px)); max-width: 700px; }
.modal.pd-modal .pd { gap: 20px; }
.modal.pd-modal .pd-title { font-size: 22px; line-height: 1.3; }
.modal.pd-modal .pd-x { width: 30px; height: 30px; margin: -3px -5px 0 0; }
.modal.pd-modal .pd-x .ic { width: 16px; height: 16px; }
.modal.pd-modal .pd-intro { margin-top: -10px; font-size: 14.5px; }
.modal.pd-modal .pd-field { gap: 8px; }
.modal.pd-modal .pd-label { font-size: 15px; }
.modal.pd-modal .pd-input, .modal.pd-modal .pd-area { padding: 7px 12px; border-radius: 9px; font-size: 15px; line-height: 20px; }
.modal.pd-modal .pd-area { min-height: 80px; line-height: 1.45; }
.modal.pd-modal .pd-area-tall { min-height: 240px; }
.modal.pd-modal .pd-add, .modal.pd-modal .pd-chip { height: 30px; padding: 0 10px; gap: 6px; border-radius: 8px; font-size: 14.5px; }
.modal.pd-modal .pd-add .ic { width: 14px; height: 14px; }
.modal.pd-modal .pd-actions { gap: 8px; margin-top: 2px; }
.modal.pd-modal .pd-cancel, .modal.pd-modal .pd-go { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 15px; }
/* mobil: celá obrazovka s krížikom a fajkou; súbory projektu v bublinke zospodu */
.psheet, .pfiles, .pfiles-scrim { display: none; }
@media (max-width: 760px) {
  .psheet {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-height, 100dvh);
    z-index: 70; background: var(--raised); font-family: var(--ui); color: var(--ink); border-radius: 28px 28px 0 0;
    transform: translateY(100%); transition: transform .32s cubic-bezier(.32, .72, 0, 1);
  }
  .psheet.show { transform: none; }
  .psheet-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 8px) 16px 10px; }
  .psheet-title { flex: 1; min-width: 0; text-align: center; font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .psheet-round {
    flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: none;
    border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 2px 12px rgba(20, 20, 15, .08); cursor: pointer;
  }
  .psheet-round .ic { width: 20px; height: 20px; }
  .psheet-ok { background: #2A2A27; color: #fff; }
  .psheet-ok:disabled { background: #A9A8A3; color: #fff; cursor: default; }
  .psheet-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 4px 16px 24px; }
  .psheet .pd-field { gap: 8px; }
  .psheet .pd-label { padding-left: 14px; font-size: 16px; font-weight: 600; color: #6B6A66; }
  .psheet .pd-input { height: 54px; border-radius: 27px; padding: 0 22px; font-size: 17px; }
  .psheet .pd-area { border-radius: 24px; padding: 16px 22px; font-size: 17px; resize: none; }
  .psheet .pd-area-tall { min-height: 190px; }
  .pfiles-scrim { display: block; position: fixed; inset: 0; z-index: 68; background: rgba(20, 20, 16, .35); opacity: 0; transition: opacity .3s; pointer-events: none; }
  .pfiles-scrim.show { opacity: 1; pointer-events: auto; }
  .pfiles {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 69;
    max-height: calc(var(--app-height, 100dvh) - 70px);  /* najvyššia bublina ako ostatné (pod hornou lištou) */
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); box-sizing: border-box; background: var(--raised); border-radius: 28px 28px 0 0;
    font-family: var(--ui); color: var(--ink); transform: translateY(100%); transition: transform .32s cubic-bezier(.32, .72, 0, 1);
  }
  .pfiles.show { transform: none; }
  .pfiles-grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: #D6D5D0; margin-bottom: 10px; }
  .pfiles-bar { display: flex; align-items: center; gap: 10px; }
  .pfiles-spacer { width: 46px; flex: none; }
  .pfiles-list {
    flex: 0 1 auto; min-height: 0; overflow: hidden; padding: 16px 2px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    transition: max-height .32s cubic-bezier(.32, .72, 0, 1);
  }
  .pfiles.is-open .pfiles-list { overflow-y: auto; }
  .pfiles-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 12%; }
  .pfiles-empty .pp-nosessions-ic { width: 54px; height: 54px; border-radius: 50%; background: #EDECE8; }
  .pfiles-empty .pp-nosessions-ic .ic { width: 24px; height: 24px; }
  .pfiles-add {
    flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: none; border-radius: 22px;
    background: var(--ink); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
  }
  .pfiles-add .ic { width: 19px; height: 19px; }
  .pfiles-empty { min-height: 200px; }
  /* Project Files ako Claude na iPhone (Owner 15.10.2026, zmerané IMG_0164 pri 3×): bublina 8 bodov od okrajov aj zdola
     so zaoblenými všetkými rohmi, menší tmavší posuvník úplne hore, gulička s krížikom a nadpis vyššie, tenší a menší
     krížik (jemnejší), pruh využitia 25 bodov pod guličkou */
  .pfiles {
    left: 8px; right: 8px; bottom: 8px; border-radius: 38px; padding: 5px 13px max(16px, env(safe-area-inset-bottom));
    transform: translateY(calc(100% + 16px));
  }
  .pfiles.show { transform: none; }
  .pfiles-grab { width: 34px; height: 5px; background: #BFBFBF; margin-bottom: 5px; }
  .pfiles .psheet-round { width: 42px; height: 42px; }
  .pfiles .psheet-round .ic-close { width: 24.5px !important; height: 24.5px !important; }
  .pfiles-spacer { width: 42px; }
  .pfiles-list { padding-top: 23px; }
  .pfiles-add { margin: 0 2px; }
}
.pd-inline { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #FAFAF8; }
.pd-inline[hidden] { display: none; }
.pd-inline-actions { display: flex; justify-content: flex-end; gap: 8px; }
.pd-small { height: 34px; padding: 0 14px; font-size: 14.5px; }

/* Owner 15.10.2026: aktívny riadok len tmavšou sivou — bez oranžovej fajky; riadok Chats skrytý (Chat = „+ New session“
   a Recents so všetkými vláknami) */
.mode-row .menu-check, .storage-check { display: none !important; }
#mode-chat { display: none !important; }
/* Free (Owner 18.10.2026): Projekty a Kód nie sú — namiesto Projektov riadok Chats ako ostatné režimy; bez darčeka */
body.is-free #mode-chat { display: flex !important; }
body.is-free :is(#mode-project, #mode-coding, #nav-gift, #proj-pick) { display: none !important; }

/* krížik na zatvorenie bubliny väčší, ako Claude (Owner 15.10.2026) — vo všetkých bublinách a celoobrazovkových oknách */
.ms-round .ic-close, .psheet-round .ic-close, .plp-round .ic-close { width: 30px !important; height: 30px !important; }

/* okno Instructions (a popis v Create a project) na mobile ako Claude (Owner 15.10.2026): menšie písmo a pole, svetlý rámik,
   veta pod poľom bližšie a zarovnaná s textom v poli */
@media (max-width: 760px) {
  .psheet .pd-area { border-radius: 20px; border-color: #E3E2DE; padding: 13px 15px; font-size: 16px; line-height: 1.35; }
  .psheet .pd-area:focus { border-color: #D6D5D0; }
  .psheet .pd-area-tall { min-height: 132px; }
  .psheet .pd-hint { margin: -10px 0 0; padding: 0 16px; font-size: 14px; line-height: 1.35; }
}

/* úvodná obrazovka na mobile (Owner 15.10.2026, ako Claude): logo sa rozsvieti (0,35 s), chvíľu ostane a pri štarte
   aplikácie sa prelinie do pozdravu; pole na písanie vyjde zdola (app.js bootDone) */
.boot-splash { display: none; }
@media (max-width: 760px) {
  /* logo v strede obrazovky (ako Claude: 50 % výšky), dole výrobca ako „ANTHROPIC“ (Owner 15.10.2026) */
  .boot-splash {
    display: block; position: fixed; inset: 0; z-index: 200; background: var(--raised, #FBFBF9); opacity: 1;
    transition: opacity .4s ease; pointer-events: none;
  }
  /* rozplynutie (Owner 17.10.2026): nápis sa rozmaže, zväčší a písmená sa roztiahnu; pozadie doznie až za ním */
  .boot-splash.out { opacity: 0; transition: opacity .5s ease .6s; }
  .boot-splash.out .boot-logo { animation: boot-vanish .95s cubic-bezier(.4, 0, .6, 1) forwards; }
  .boot-splash.out .boot-name { animation: boot-spread .95s cubic-bezier(.4, 0, .6, 1) forwards; }
  .boot-splash.out .boot-maker { opacity: 0; transition: opacity .45s ease; }
  /* úvod hneď plný (bez stmievania celej vrstvy) — nadväzuje na úvodný obrázok iPhonu (splash/, index.html), inak by
     medzi nimi preblikla iná vrstva (Owner 15.10.2026) */
  .boot-logo {
    /* stred displeja telefónu: rovnaká výška ako stred pozdravu (44,1 % celej výšky stránky = stred obrazovky iPhonu,
       zmerané Owner 15.10.2026) — logo sa prelinie presne do pozdravu */
    position: fixed; left: 50%; top: 44.1vh; top: 44.1lvh; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 11px;
    white-space: nowrap;
  }
  /* aplikácia pre iPhone: stránka cez celú obrazovku (aj pod riadkom s časom) — logo presne v strede, kde ho ukáže úvodná
     obrazovka iOS (Info.plist UILaunchScreen), bez skoku */
  html.ios-app .boot-logo { top: 50vh; top: 50lvh; }
  /* bez guličky (Owner 17.10.2026): len „Coburg“ a za ním oranžová bodka, o kúsok väčšia ako bežná bodka písma —
     rovnako na úvodných obrázkoch iPhonu (splash/) aj v aplikácii pre iPhone (LaunchLogo) */
  .boot-period { display: inline-block; width: .24em; height: .24em; margin-left: .07em; border-radius: 50%; background: var(--ball);
    vertical-align: baseline; }
  .boot-name { font-family: "Lora Boot", "Lora", Georgia, serif; font-size: 39px; font-weight: 500; letter-spacing: -.02em; line-height: 1; color: #1a1a18; }
  .boot-maker {
    position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 50px); text-align: center;
    font-family: "Inter Boot", var(--ui, "Inter", sans-serif); font-size: 15px; font-weight: 700; letter-spacing: .07em; color: #85847F;
  }
  .boot-spin { visibility: hidden; }  /* koliesko štartu nahrádza logo */
  body.boot-enter .composer.composer-empty .empty-head { animation: boot-greet .45s ease-out both; }
  body.boot-enter .composer.composer-empty .cbox { animation: boot-rise .5s cubic-bezier(.32, .72, 0, 1) both; }
}
@keyframes boot-vanish {
  from { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; filter: blur(12px); transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes boot-spread { from { letter-spacing: -.02em; } to { letter-spacing: .1em; } }
@keyframes boot-greet { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes boot-rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .boot-splash.out .boot-logo, .boot-splash.out .boot-name { animation: none; }
  body.boot-enter .composer .empty-head, body.boot-enter .composer .cbox { animation: none; }
}

/* Create a project a Instructions na mobile ako Claude (Owner 15.10.2026): bublina zospodu so zaoblenými rohmi pod lištou
   s časom, sivé pozadie za ňou; nižšie polia bez tmavého rámika, jemnejšie a menšie písmo */
@media (max-width: 760px) {
  .psheet {
    top: calc(var(--app-top, 0px) + max(env(safe-area-inset-top), 20px)); bottom: auto;
    height: calc(var(--app-height, 100dvh) - max(env(safe-area-inset-top), 20px));
    border-radius: 26px 26px 0 0; box-shadow: 0 -4px 24px rgba(20, 20, 15, .08);
  }
  /* pod bublinou až po spodok obrazovky jej farba — pri otvorenej klávesnici sa bublina skráti po klávesnicu a medzi
     nimi (pod lištou nad klávesnicou) bolo vidno stmavené pozadie (Owner 15.10.2026, IMG_0165) */
  .psheet::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; height: 100lvh; background: var(--raised); pointer-events: none; }
  .psheet-bar { padding: 12px 16px 6px; }
  .psheet-title { font-size: 17px; font-weight: 600; }
  .psheet-round { width: 44px; height: 44px; }
  .psheet-body { gap: 16px; }
  .psheet .pd-field { gap: 7px; }
  .psheet .pd-label { padding-left: 14px; font-size: 15px; font-weight: 500; color: #7A7974; }
  .psheet .pd-input { height: 46px; border-radius: 23px; border-color: #E3E2DE; padding: 0 18px; font-size: 16px; }
  .psheet .pd-input:focus, .psheet .pd-area:focus { border-color: #E3E2DE; box-shadow: none; }
  .psheet .pd-area { border-color: #E3E2DE; font-size: 16px; min-height: 0; }
  .psheet .pd-create-goal { height: 132px; }
}

/* telefón: pozadie stránky ako Claude na iPhone #F9F9F7 (Owner 15.10.2026, zmerané na IMG_0145; predtým #FBFBF9) */
@media (max-width: 760px) {
  :root { --raised: #F9F9F7; }
}

/* Menu vlákna projektu vpravo hore na mobile ako Claude na iPhone (Owner 15.10.2026, video IMG_0169–0173, zmerané): bublina
   široká 250 bodov vyrastie z pilulky — rozmazaná kvapka pri „…“, nafúkne sa o kúsok nad konečnú veľkosť a usadí sa
   (~0,4 s); svetlá, priesvitná so zaoblením 28, riadky 42 bodov, písmo 17, ikona 20 bodov od okraja 30, delenie 24 od okrajov.
   Pri zatvorení sa zmrští späť k tlačidlu. Odstránenie ostáva oranžové (farba Coburgu). */
@media (max-width: 760px) {
  .menu.menu-morph {
    width: max-content; min-width: 250px; max-width: calc(100vw - 24px); max-height: none; overflow: visible; padding: 9px 0 8px;
    border: none; border-radius: 28px;  /* dlhší preklad (napr. „Zásady ochrany súkromia“) bublinu rozšíri, neoreže */
    background: rgba(252, 253, 250, .94); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
    box-shadow: 0 12px 44px rgba(20, 20, 15, .14), 0 1px 3px rgba(20, 20, 15, .06);
    animation: menu-morph-in .42s cubic-bezier(.2, .85, .25, 1) both;
  }
  .menu.menu-morph > * { animation: menu-morph-items .34s ease-out both; }
  .menu.menu-morph .menu-row {
    min-height: 42px; padding: 0 20px 0 30px; gap: 14px; border-radius: 0; font-size: 17px; line-height: 22px; color: var(--ink);
  }
  .menu.menu-morph .menu-row.danger { color: var(--orange); }
  .menu.menu-morph .menu-row .ic { width: 20px; height: 20px; }
  .menu.menu-morph .menu-row:hover, .menu.menu-morph .menu-row:focus-visible { background: none; }
  .menu.menu-morph .menu-row:active { background: rgba(20, 20, 15, .05); }
  .menu.menu-morph .menu-sep { margin: 10.5px 24px; background: rgba(20, 20, 15, .09); }
  .menu.menu-morph.menu-morph-out { pointer-events: none; animation: menu-morph-out .22s cubic-bezier(.4, 0, .7, .2) both; }
  .menu.menu-morph.menu-morph-out > * { animation: none; }
}
@keyframes menu-morph-in {
  0% { transform: scale(.18); border-radius: 60px; filter: blur(8px); opacity: .4; }
  35% { transform: scale(.8); filter: blur(4px); opacity: .95; }
  70% { transform: scale(1.05); filter: blur(.5px); opacity: 1; }
  100% { transform: none; filter: none; opacity: 1; }
}
@keyframes menu-morph-items { 0% { opacity: 0; filter: blur(6px); } 55% { opacity: .7; } 100% { opacity: 1; filter: none; } }
@keyframes menu-morph-out {
  0% { transform: none; filter: none; opacity: 1; }
  100% { transform: scale(.2); border-radius: 60px; filter: blur(6px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .menu.menu-morph, .menu.menu-morph > *, .menu.menu-morph.menu-morph-out { animation: none; }
}

/* Settings na mobile ako Claude (Owner 15.10.2026, schválený návrh 5): biele karty so zaoblením 24, riadky 48 bodov,
   ikona 22 a text 17 od okraja karty 16, delenie od textu po pravý okraj; sivé nadpisy sekcií 15 bodov (22 nad, 9 pod);
   hodnota vpravo sivá (Plan: Pro); hore karta účtu; Translator a druhý jazyk ako riadky karty App */
@media (max-width: 760px) {
  .modal.settings-sheet .ms-card { border-radius: 24px; padding: 0; }
  .modal.settings-sheet .ms-row { min-height: 48px; padding: 0 14px 0 16px; gap: 18px; }
  .modal.settings-sheet .ms-row + .ms-row::before, .modal.settings-sheet .ms-row + .ms-setrow::before,
  .modal.settings-sheet .ms-setrow + .ms-row::before { content: ""; position: absolute; top: 0; left: 56px; right: 16px; border-top: 1px solid #E9E8E4; }
  .modal.settings-sheet .ms-ic { width: 22px; height: 22px; flex: none; color: #3d3d3a; }
  .modal.settings-sheet .ms-ic-none { display: block; }
  .modal.settings-sheet .ms-name { font-size: 17px; }
  .modal.settings-sheet .ms-value.tone-plain { font-size: 17px; color: #9B9891; }
  .modal.settings-sheet .ms-chev { width: 16px; height: 16px; color: #9B9891; }
  .modal.settings-sheet .ms-danger .ms-ic { color: var(--orange); }
  .modal.settings-sheet .ms-sec { padding: 0 16px; margin: 2px 0 -7px; font-size: 15px; line-height: 18px; color: #85847F; }
  /* karta účtu: začiatočné písmeno v sivom krúžku, meno a pod ním e-mail · plán */
  .ms-acct { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
  .ms-acct-av {
    flex: none; width: 40px; height: 40px; border-radius: 50%; background: #E7E6E1; display: flex; align-items: center;
    justify-content: center; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink);
  }
  .ms-acct-txt { min-width: 0; font-family: var(--sans); }
  .ms-acct-name { font-size: 17px; line-height: 22px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ms-acct-plan { font-weight: 700; }
  .ms-acct-mail { font-size: 15px; line-height: 20px; color: #6E6D69; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Translator a druhý jazyk: požičané riadky nastavení (.set-row) vo vzhľade riadku menu (Owner 15.10.2026) */
  .ms-setrow { cursor: default; }
  .ms-setrow:has(> .set-row[hidden]) { display: none; }
  .ms-setrow > .set-row { flex: 1; min-width: 0; min-height: 48px; gap: 12px; border: none; }
  .ms-setrow > .set-row .set-title { font-size: 17px; font-weight: 400; }
  .ms-setrow > .set-row .set-hint { display: none; }
  /* zvolený druhý jazyk: oranžová pilulka presne ako jazyk v Language and voice (Owner 15.10.2026) */
  .ms-setrow .set-lang.set-lang-second {
    height: 36px; padding: 0 16px; border: 1.5px solid var(--orange-line); border-radius: 999px; background: #fff;
    color: var(--orange); font-size: 14.5px; font-weight: 500;
  }
}

/* Settings: Add account (oranžové), darček (naša modrá #4078D0) a Appearance — dlaždice Light / Dark / System, zvolená
   s oranžovým rámikom (Owner 15.10.2026, návrh 5) */
@media (max-width: 760px) {
  .modal.settings-sheet .ms-row.ms-add, .modal.settings-sheet .ms-row.ms-add .ms-ic { color: var(--orange); }
  .modal.settings-sheet .ms-row.ms-gift, .modal.settings-sheet .ms-row.ms-gift .ms-ic { color: #4078D0; }
  .modal.settings-sheet .ms-acct + .ms-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid #E9E8E4; }
  .ms-appear { display: flex; gap: 10px; padding: 14px 14px 12px; }
  .ms-look {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: none;
    background: none; font: inherit; font-family: var(--sans); font-size: 14px; color: #3d3d3a; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ms-look-shot {
    position: relative; display: block; width: 100%; height: 76px; box-sizing: border-box; border-radius: 14px; overflow: hidden;
    border: 1.5px solid #E2E1DC;
  }
  .ms-look-light { background: #F9F9F7; }
  .ms-look-dark { background: #1F1F1D; border-color: #1F1F1D; }
  .ms-look-sys { background: linear-gradient(135deg, #F9F9F7 50%, #1F1F1D 50%); }
  .ms-look-inner { position: absolute; left: 8px; right: 8px; top: 8px; bottom: 8px; border-radius: 9px; background: #fff; border: 1px solid #E2E1DC; }
  .ms-look-dark .ms-look-inner { background: #2B2B29; border-color: #3A3A37; }
  .ms-look-sys .ms-look-inner { background: linear-gradient(135deg, #fff 50%, #2B2B29 50%); border-color: #BDBCB7; }
  .ms-look-l1, .ms-look-l2 { position: absolute; left: 10px; height: 3px; border-radius: 2px; background: #9B9891; }
  .ms-look-l1 { top: 12px; width: 38px; }
  .ms-look-l2 { top: 20px; width: 26px; }
  .ms-look-dot { position: absolute; right: 9px; bottom: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--orange); }
  .ms-look.is-on { color: var(--orange); }
  .ms-look.is-on .ms-look-shot { border: 2px solid var(--orange); }
}
/* Settings ako Claude (Owner 15.10.2026, IMG_0183/0184): obsah sa pri posúvaní stráca pod hlavičkou (krížik, nadpis, „i“
   ostávajú nad ním na jemnom prechode do farby bubliny); vpravo hore biela gulička „i“ — bublina s verziou a dokumentmi */
@media (max-width: 760px) {
  .modal.settings-sheet .ms-head {
    z-index: 3; margin-bottom: calc(-1 * var(--ms-head, 66px)); padding-bottom: 14px;
    background: linear-gradient(to bottom, #F9F9F7 0, #F9F9F7 62%, rgba(249, 249, 247, 0) 100%);
  }
  .modal.settings-sheet .ms-page { box-sizing: border-box; padding-top: calc(var(--ms-head, 66px) + var(--ms-gap, 0px)); }
  .modal.settings-sheet .ms-page.ms-root { padding-top: 0; }
  .modal.settings-sheet .ms-page.ms-root > .ms-scroller { padding-top: var(--ms-head, 66px); }
  .ms-round.ms-round-right { left: auto; right: 0; }
  .ms-round.haptic-host { position: absolute; }  /* plocha na cvaknutie (UI.hapticTap) nesmie guličku vytrhnúť z rohu */
  /* guličky a pilulka presne na stred nadpisu (Owner 16.10.2026): hlavička má dole 14 bodov odsadenie — stred sa ráta
     bez neho, inak boli guličky o 7 bodov nižšie ako text */
  .modal.settings-sheet .ms-head:not(:has(.ms-title-has-sub)) > .ms-round,
  .modal.settings-sheet .ms-head:not(:has(.ms-title-has-sub)) > .ms-tools { top: calc((100% - 14px) / 2); }
  .ms-round.ms-info { font-family: Georgia, "Times New Roman", serif; font-size: 22px; line-height: 1; color: var(--ink); }
  .ms-round.ms-info[hidden] { display: none; }
  .menu.menu-morph .menu-head {
    padding: 12px 24px 4px; font-family: var(--sans); font-size: 17px; line-height: 22px; font-weight: 400; color: var(--ink);
    white-space: normal; text-transform: none; letter-spacing: 0;
  }
}

/* Kredit a spotreba (Owner 15.10.2026, Claude Design návrh A): vzdušné karty so zaoblením 24, veľké číslo minutej časti,
   pod pruhom čas obnovenia; sivé nadpisy sekcií „What it went on“ a „Top up“; dobitie cez celú šírku karty */
.credit-wrap.credit-a { gap: 0; }
.credit-a .set-card { border-radius: 24px; padding: 18px 20px 16px; }
.credit-a .credit-big { font-size: 17px; margin-bottom: 12px; }
.credit-a .credit-big b { font-size: 28px; letter-spacing: -.02em; }
.credit-renew { margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: #6B6A66; }
.credit-sec { margin: 18px 16px 7px; font-size: 15px; color: #85847F; }
.credit-sec[hidden], .credit-a .set-card[hidden] { display: none; }
.credit-a .credit-parts { padding: 16px 20px 4px; }
.credit-a .credit-seg { height: 10px; margin: 0 0 8px; border-radius: 5px; }
.credit-a .credit-legend-row { min-height: 44px; gap: 12px; font-size: 17px; }
.credit-a .credit-pct { color: #85847F; }
.credit-a .credit-topup-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.credit-topup-text { margin: 0; font-size: 15px; line-height: 21px; color: #3d3d3a; }
.credit-topup.credit-topup-wide { width: 100%; height: 44px; border-radius: 22px; font-size: 15.5px;  font-weight: 600; }
.credit-topup-note { margin: 0; font-size: 13px; line-height: 1.4; color: #85847F; text-align: center; }
/* nástroje strany vpravo hore v bublinke (Kredit a spotreba: Reload a „i“) — biela pilulka ako v Claude */
.ms-tools {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; align-items: center;
  height: 44px; border-radius: 22px; background: #fff; box-shadow: 0 2px 10px rgba(20, 20, 15, .08);
}
.ms-tool {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none;
  background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ms-tool .ic { width: 20px; height: 20px; }
.ms-tool.ms-tool-i { font-family: Georgia, "Times New Roman", serif; font-size: 21px; line-height: 1; }
.ms-tool.is-busy .ic { animation: ms-tool-spin .6s linear; }
@keyframes ms-tool-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  /* v Settings bez ikony a úvodnej vety — karty hneď pod hlavičkou (návrh A) */
  .modal.settings-sheet .panel-credit > .support-head-ic, .modal.settings-sheet .panel-credit > .lang-text { display: none; }
}
/* Settings (Owner 15.10.2026): sekcia Storage presunutá z bočného menu — zvolené úložisko s logom a sivým „Your own
   storage“ vpravo, priečinky s farebnými ikonami, Change storage; v bočnom menu na mobile už Storage nie je.
   Hlavička je len nadpis — údaj spod nej (počet aplikácií, dátum dokumentu…) ide na začiatok obsahu ako sivý riadok */
@media (max-width: 760px) {
  .nav-storage { display: none; }
  .modal.settings-sheet .ms-logo { width: 22px; height: 22px; }
  .modal.settings-sheet .ms-store .ms-name { flex: 1; }
  /* vpravo oranžové „Change storage“ a za ním oranžová ikona change (Owner 15.10.2026) */
  .modal.settings-sheet .ms-store .ms-value { font-size: 17px; color: var(--orange); }
  .modal.settings-sheet .ms-store .ms-tail-ic { flex: none; width: 22px; height: 22px; color: var(--orange); margin-left: -6px; }
  .modal.settings-sheet .ms-caption { margin: 0 16px 14px; font-size: 15px; line-height: 21px; color: #6B6A66; }
}
/* Name and formality, Language and voice, Answer style a výber jazyka v Settings (Owner 15.10.2026): bez veľkej ikony;
   nad každou kartou jej popis (sivý, vľavo) — každý riadok je samostatná biela karta; Translator sa zapína v hovore */
.split-text { display: none; }
@media (max-width: 760px) {
  .modal.settings-sheet :is(.panel-addr, .panel-lang, .panel-style, .panel-pick) { align-items: stretch; gap: 0; }
  .modal.settings-sheet :is(.panel-addr, .panel-lang, .panel-style, .panel-pick) > .support-head-ic { display: none; }
  .modal.settings-sheet :is(.panel-addr, .panel-lang, .panel-style, .panel-pick) > .lang-text, .modal.settings-sheet .split-text {
    display: block; margin: 0 16px 10px; padding: 0; text-align: left; font-size: 15px; line-height: 21px; color: #6B6A66;
  }
  .modal.settings-sheet .split-text { margin-top: 24px; }
  .modal.settings-sheet .split-text:has(+ .set-row[hidden]) { display: none; }
  .modal.settings-sheet :is(#addr-card, #lang-card, #style-card) { margin-top: 0; padding: 0; border: none; border-radius: 0; background: none; }
  .modal.settings-sheet :is(#addr-card, #lang-card, #style-card) > .set-row {
    min-height: 60px; padding: 0 16px; border: none; border-radius: 24px; background: #fff;
  }
  .modal.settings-sheet :is(#addr-card, #lang-card, #style-card) .set-title { font-size: 17px; font-weight: 400; }
  .modal.settings-sheet #lang-card > .set-row[data-key="interpreter"] { display: none; }
  .modal.settings-sheet .panel-pick .conn-name { font-size: 17px; font-weight: 400; }
}
/* Billing v Settings (Owner 15.10.2026, presne ako Claude): karta Account plan s názvom plánu vpravo a karta Manage
   subscription; okno Manage subscription v strede nad Settings */
.bill-page { display: flex; flex-direction: column; gap: 14px; }
.bill-page .ms-card { background: #fff; border-radius: 24px; padding: 0; }
.bill-plan-row { min-height: 52px; padding: 0 16px; }
.bill-plan-row .ms-name { flex: 1; }
.bill-plan-row .ms-value { font-size: 17px; color: #9B9891; }
.bill-pop-scrim {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 0 32px;
  background: rgba(0, 0, 0, .25); opacity: 0; transition: opacity .2s ease;
}
.bill-pop-scrim.show { opacity: 1; }
.bill-pop {
  width: 100%; max-width: 340px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 18px;
  border-radius: 26px; background: #fff; box-shadow: 0 12px 40px rgba(20, 20, 15, .18); font-family: var(--sans);
  transform: scale(.96); transition: transform .2s ease;
}
.bill-pop-scrim.show .bill-pop { transform: none; }
.bill-pop-title { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; color: #1a1a18; }
.bill-pop-text { margin: 0; font-size: 15px; line-height: 21px; color: #6B6A66; }
.bill-pop-btn {
  position: relative; height: 44px; border-radius: 22px; border: none; background: #EDECE8; color: #1a1a18; font: inherit;
  font-size: 15.5px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bill-pop-main { margin-top: 8px; background: #1a1a18; color: #fff; font-weight: 600; }
/* Project Files, Instructions a Create a project podľa návrhu v Claude Design (Owner 15.10.2026): hlavička ako Settings —
   posuvník 8 bodov od vrchu, krížik, nadpis a fajka v strede 49 bodov od vrchu bubliny; Instructions a Create a project
   rovnako vysoké ako Settings (hore voľný pás 70 bodov); popisy polí tučné sivé, polia zaoblené 24; Project Files: veta
   pod nadpisom, pruh kapacity bez poznámky, tlačidlo Add Files bez ikony 34 bodov nad spodkom bubliny */
@media (max-width: 760px) {
  .psheet { top: calc(var(--app-top, 0px) + 70px); height: calc(var(--app-height, 100dvh) - 70px); border-radius: 34px 34px 0 0; }
  .psheet-grip, .pfiles .pfiles-grab {
    position: absolute; left: 50%; top: 8px; width: 36px; height: 5px; margin: 0 0 0 -18px; border-radius: 3px; background: #CFCFCB;
  }
  .psheet-bar { padding: 27px 16px 0; }
  .psheet-body { gap: 14px; padding: 15px 16px 24px; }
  .psheet .pd-field { gap: 7px; }
  .psheet .pd-label { padding-left: 16px; font-size: 15px; font-weight: 600; color: #6B6A66; }
  .psheet .pd-input { height: 48px; border-radius: 24px; padding: 0 18px; }
  .psheet .pd-create-goal { height: 132px; border-radius: 24px; padding: 13px 18px; }
  .psheet .pd-area-tall { height: 190px; min-height: 0; border-radius: 24px; padding: 14px 16px; }
  .pfiles { padding: 0 8px max(34px, env(safe-area-inset-bottom)); }
  .pfiles-bar { padding-top: 27px; }
  .pfiles .psheet-round { width: 44px; height: 44px; }
  .pfiles .psheet-round .ic-close { width: 30px !important; height: 30px !important; }
  .pfiles-spacer { width: 44px; }
  .pfiles-text { margin: 15px 16px 0; font-size: 15px; line-height: 21px; color: #6B6A66; }
  .pfiles-list { padding: 14px 7px 16px; }
  .pfiles .pf-cap { margin: 0 0 14px; }
  .pfiles .pf-bar { background: #D1E2F8; }
  .pfiles .pf-cap-text { margin-top: 8px; font-size: 12.5px; color: #787972; }
  .pfiles .pf-cap-note { display: none; }
  .pfiles-add { height: 44px; border-radius: 22px; margin: 0 7px; }
}
/* Support v Settings podľa návrhu (Owner 15.10.2026): bez veľkej ikony, sivý text vľavo, karta „Write on WhatsApp“ so šípkou */
@media (max-width: 760px) {
  .modal.settings-sheet .panel-support { align-items: stretch; gap: 14px; }
  .modal.settings-sheet .panel-support > .support-head-ic { display: none; }
  .modal.settings-sheet .panel-support > .lang-text { margin: 0 16px; padding: 0; text-align: left; font-size: 15px; line-height: 21px; color: #6B6A66; }
  .modal.settings-sheet .panel-support .ms-card { background: #fff; border-radius: 24px; padding: 0; }
  .modal.settings-sheet .panel-support .ms-row { min-height: 52px; padding: 0 14px 0 16px; gap: 14px; }
  .modal.settings-sheet .panel-support .ms-name { flex: 1; font-weight: 500; }
}
/* Connected apps v Settings podľa návrhu (Owner 15.10.2026): bez veľkej ikony, dlhší sivý text o MCP vľavo, riadky bez
   poradových čísel a obyčajným písmom */
@media (max-width: 760px) {
  .modal.settings-sheet .panel-conn { align-items: stretch; }
  .modal.settings-sheet .panel-conn > .support-head-ic { display: none; }
  .modal.settings-sheet .panel-conn > .lang-text { margin: 0 16px; padding: 0; text-align: left; font-size: 15px; line-height: 21px; color: #6B6A66; }
  .modal.settings-sheet .panel-conn .conn-num { display: none; }
  .modal.settings-sheet .panel-conn .conn-name { font-size: 17px; font-weight: 400; }
}
/* súbory priečinka v Settings (Owner 15.10.2026): ikona pred názvom — deliaca čiara začína pri texte ako pri ostatných riadkoch */
@media (max-width: 760px) {
  .modal.settings-sheet :is(.ms-swipe, .ms-row) + .ms-swipe > .ms-row:has(.ms-ic)::before { left: 56px; right: 16px; }
}
/* Credit and usage, návrh A (Owner 15.10.2026): nadpis sekcie aj nad prvou kartou, „Used“ a percentá obyčajným písmom,
   dátum menším sivým, Top up credit čierne užšie tlačidlo (40 bodov) v strede */
.credit-a .set-card:not(.credit-parts) { padding: 16px 20px; }
.credit-a .credit-big { margin-bottom: 12px; font-size: 17px; }
.credit-a .credit-big b { font-size: 17px; font-weight: 400; letter-spacing: 0; color: #85847F; }
.credit-a .credit-renew { margin-top: 12px; font-size: 15px; line-height: 21px; color: #6B6A66; }
.credit-a .credit-topup-card { align-items: center; gap: 10px; }
/* tlačidlo ako vo všetkých oknách a hláseniach (Owner 16.10.2026): celá šírka, výška 44, zaoblenie 22, písmo 15,5 */
.credit-a .credit-topup.credit-topup-wide {
  align-self: stretch; width: 100%; height: 44px; padding: 0; border: none; border-radius: 22px; background: var(--ink); color: #fff;
  font-size: 15.5px; font-weight: 600; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) { .credit-a .credit-topup.credit-topup-wide:hover { background: #2e2e2e; } }
/* Give the gift of Coburg (Owner 15.10.2026, návrh v Claude Design): bublina zdola nad Settings, hore sivý pás s krabicou,
   nadpis písmom Lora, ponuka, Terms apply, vstupenky a čierne Share 34 bodov nad spodkom */
.gift-scrim { position: fixed; inset: 0; z-index: 72; background: rgba(20, 20, 16, .25); opacity: 0; transition: opacity .3s; }
.gift-scrim.show { opacity: 1; }
.gift-sheet {
  position: fixed; left: 0; right: 0; top: calc(var(--app-top, 0px) + 70px); height: calc(var(--app-height, 100dvh) - 70px); z-index: 73;
  display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; border-radius: 34px 34px 0 0; background: #F9F9F7; font-family: var(--ui, var(--sans));
  color: var(--ink); transform: translateY(100%); transition: transform .42s cubic-bezier(.32, .72, 0, 1);
  padding-bottom: max(34px, env(safe-area-inset-bottom));
}
.gift-sheet.show { transform: none; }
.gift-top { position: relative; flex: none; height: 270px; background: #EFEEEA; display: flex; align-items: flex-start; justify-content: center; }
.gift-grip { position: absolute; left: 50%; top: 8px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: #CFCFCB; }
.gift-x {
  position: absolute; left: 16px; top: 27px; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 10px rgba(20, 20, 15, .08); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.gift-x.haptic-host { position: absolute; }
.gift-x .ic { width: 20px; height: 20px; }
.gift-box { width: 226px; height: 175px; margin-top: 50px; }  /* o kúsok menšia (Owner 15.10.2026) */
.gift-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 36px 24px 0; text-align: center; }
.gift-title { margin: 0; font-family: "Lora", Georgia, serif; font-size: 30px; line-height: 36px; font-weight: 500; color: #1a1a18; }
.gift-text { margin: 14px 0 0; font-size: 16px; line-height: 22px; color: #3d3d3a; }
.gift-terms {
  margin-top: 6px; padding: 0; border: none; background: none; font: inherit; font-size: 16px; color: #3d3d3a; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.gift-tickets { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 44px; }
.gift-tickets svg { width: 162px; height: 91px; }
.gift-left { font-size: 15px; color: #3d3d3a; }
.gift-share {
  position: relative; flex: none; margin: 16px 16px 0; height: 44px; border: none; border-radius: 22px; background: #1a1a18; color: #fff;
  font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
}
.gift-share:disabled { opacity: .4; cursor: default; }
/* web a Mac (Owner 19.10.2026, ako Claude): odkaz v rámčeku a vpravo v ňom čierne „Kopírovať odkaz“ */
.gift-link {
  display: flex; align-items: center; gap: 10px; flex: none; margin: 24px 32px 0; padding: 4px 4px 4px 16px;
  border: 1px solid #E6E4DE; border-radius: 12px; background: #fff;
}
.gift-link-url { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; font-size: 15px; color: var(--ink); }
.gift-copy {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 36px; padding: 0 14px; border: none; border-radius: 8px;
  background: #1a1a18; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.gift-copy .ic { width: 16px; height: 16px; }
.gift-copy:disabled { opacity: .4; cursor: default; }
/* kto pozvánku využil (Owner 17.10.2026): riadky e-mail · stav, pod vstupenkami */
.gift-need { margin: 14px 0 0; font-size: 14px; line-height: 20px; color: #6b6a66; }
.gift-used { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; max-width: 360px; }
.gift-used-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #E9E8E4; font-size: 14px; line-height: 20px; }
.gift-used-who { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-used-st { flex: none; color: #6b6a66; }
/* web a Mac (Owner 17.10.2026): darček vpravo v hlavičke panela vedľa „Coburg.“; okno v strede v rozmere informačných
   okien — šírka 480, výška podľa obsahu (najviac 86 % obrazovky), krížik v bielej guličke vľavo hore, zatvorí aj Esc */
@media (min-width: 761px) {
  .nav-find.nav-gift {
    display: flex; align-items: center; justify-content: center; flex: none; margin-left: auto; width: 28px; height: 28px; padding: 0;
    border: none; border-radius: 7px; background: none; box-shadow: none; color: var(--item); cursor: pointer;
  }
  .nav-find.nav-gift:hover { background: var(--nav-hover); }
  .nav-find.nav-gift .ic { width: 18px; height: 18px; }
  .gift-sheet {
    left: 50%; right: auto; top: 50%; width: 480px; max-width: calc(100vw - 40px); height: auto; max-height: min(86vh, 820px);
    border-radius: 26px; padding-bottom: 24px; box-shadow: 0 24px 60px rgba(20, 20, 15, .28);
    opacity: 0; transform: translate(-50%, -48%); transition: opacity .2s ease, transform .2s ease;
  }
  .gift-sheet.show { opacity: 1; transform: translate(-50%, -50%); }
  .gift-grip { display: none; }
  .gift-x { left: 16px; top: 16px; width: 32px; height: 32px; }
  .gift-x .ic { width: 16px; height: 16px; }
  .gift-top { height: 240px; }
  .gift-box { margin-top: 40px; }
  .gift-body { flex: 0 1 auto; padding: 30px 32px 0; }
  .gift-tickets { margin-top: 32px; }
  .gift-share { margin: 24px 32px 0; height: 44px; border-radius: 22px; font-size: 16px; }
}
/* bočné menu na mobile (Owner 15.10.2026): guličky darček a lupa rovnako veľké ako ☰ (42); oranžová bodka za Coburg
   je späť (Owner 16.10.2026) */
@media (max-width: 760px) {
  .nav-find { width: 42px; height: 42px; }
  .nav-find.nav-gift { margin-left: auto; }
  .nav-gift + .nav-find { margin-left: 10px; }
  .nav-find .ic { width: 20px; height: 20px; }
}
/* jednotné potvrdzovacie okno (Owner 15.10.2026, návrh A v Claude Design): rovnaké ako okno Notice — biela karta,
   otázka navrchu, žltý trojuholník v strede, vysvetlenie, čierne tlačidlo akcie cez celú šírku a pod ním svetlé Zrušiť */
.modal.sd2-modal {
  width: min(340px, calc(100vw - 48px)); max-width: 340px; padding: 0; border: none; border-radius: 22px; background: #FFFFFF;
  box-shadow: 0 12px 40px rgba(20, 20, 15, .18); overflow: visible; font-family: var(--ui);
}
.modal.sd2-modal .sd2-confirm { padding: 22px 22px 0; align-items: center; text-align: center; gap: 14px; }
.modal.sd2-modal .sd2-confirm h2 { font-family: var(--ui); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.modal.sd2-modal .sd2-tri { width: 44px; height: 44px; }
.modal.sd2-modal .sd2-confirm p { font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.modal.sd2-modal .sd2-actions { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 18px; }
/* okno bez tlačidiel (kopírovanie beží / hotovo, zavrie sa samo): rovnaký spodný okraj ako horný */
.modal.sd2-modal .copy-box:has(+ .sd2-actions[style*="none"]) { padding-bottom: 22px; }
.modal.sd2-modal .sd2-btn {
  width: 100%; height: 44px; padding: 0; border: none; border-radius: 22px; font: inherit; font-size: 15.5px; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.modal.sd2-modal .sd2-strong { background: var(--ink); color: #FFFFFF; }
.modal.sd2-modal .sd2-quiet { background: #EDECE8; color: var(--ink); }
@media (max-width: 760px) {
  .modal.sd2-modal .sd2-confirm h2 { font-size: 17px; }
  .modal.sd2-modal .sd2-confirm p { font-size: 17px; }  /* ako text okna Notice na mobile */
}
/* ponuka plánov vo Free (Owner 18.10.2026, návrh C s textom 1 z Claude Design): širšie okno, nadpis Lora, tabuľka
   Free oproti Basic · Pro (fajka = má, pomlčka = nemá); tlačidlá ako ostatné okná (web a Mac hranaté) */
.modal.sd2-modal.free-up { width: min(400px, calc(100vw - 32px)); max-width: 400px; }
.modal.sd2-modal.free-up .sd2-confirm { padding: 26px 22px 0; gap: 8px; }
.modal.sd2-modal.free-up .sd2-confirm h2 { font-family: "Lora", Georgia, serif; font-size: 26px; line-height: 32px; font-weight: 500; }
.modal.sd2-modal.free-up .sd2-confirm p { font-size: 15px; line-height: 21px; color: #5C5B57; }
.free-table { align-self: stretch; margin-top: 10px; border: 1px solid #E9E8E4; border-radius: 16px; overflow: hidden; text-align: left; }
.free-tr { display: grid; grid-template-columns: minmax(0, 1fr) 56px 84px; align-items: center; gap: 4px; padding: 11px 14px;
  font-size: 15px; line-height: 20px; color: var(--ink); }
.free-tr + .free-tr { border-top: 1px solid #EFEDE8; }
.free-th { padding: 9px 14px; background: #F6F5F2; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: #5C5B57; }
.free-th span:not(:first-child), .free-yes, .free-no { justify-self: center; text-align: center; }
.free-name { overflow-wrap: anywhere; }
.free-yes svg { display: block; width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.free-no { width: 12px; height: 2px; border-radius: 1px; background: #C9C7C1; }
@media (max-width: 760px) { .free-tr { grid-template-columns: minmax(0, 1fr) 44px 78px; padding-left: 12px; padding-right: 10px; } }

/* Mobil (Owner 16.10.2026): v paneli svieti naraz len jeden riadok. iPhone si po dotyku pamätá :hover, preto na
   dotykových zariadeniach podsvietenie pod prstom robí len trieda .is-pressed (app.js); kým je prst na riadku,
   otvorený riadok (režim, relácia) zhasne. Dlhé podržanie neoznačí text ani neotvorí lupu. */
@media (hover: none) {
  .nav .mode-row:hover, .nav .row:hover { background-color: transparent; }
  .nav .mode-row.current:hover, .nav .thread-row.on:hover { background-color: var(--row-open); }
  .nav .mode-row.is-pressed, .nav .row.is-pressed { background-color: var(--row-open); }
  .nav:has(.is-pressed) .mode-row.current:not(.is-pressed),
  .nav:has(.is-pressed) .thread-row.on:not(.is-pressed) { background-color: transparent; }
  .nav .mode-row, .nav .row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  /* zhasnutie aj rozsvietenie okamžite — bez prechodu 0,12 s (inak starý riadok ešte chvíľu dosvecuje) */
  .nav .mode-row, .nav .row { transition: none; }
}
/* dotyk na mobile: prejdenie (:hover, ktoré iPhone pri ťuknutí napodobní) nesmie meniť riadok relácie — inak WebKit
   pred klikom čaká, či sa obsah nezmení, a otvorenie relácie mešká (Owner 16.10.2026) */
@media (hover: none) and (max-width: 760px) {
  .nav .thread-row:hover, .nav .thread-row.menu-open { gap: 12px; }
  .nav .thread-row:hover .row-name, .nav .thread-row.menu-open .row-name { margin-right: 0; }
  .nav .thread-row .row-name { transition: none; }
}
/* mobil: otvorená relácia je jediný sivý riadok — režim (Obrázky, Kód) vtedy nesvieti (Owner 16.10.2026) */
@media (max-width: 760px) {
  .nav:has(.thread-row.on) .mode-row.current, .nav:has(.thread-row.on) .mode-row.current:hover { background-color: transparent; }
  .nav .row input { -webkit-user-select: text; user-select: text; }  /* premenovanie relácie v riadku */
}

/* Pokyny projektu (Owner 16.10.2026): prepis už uloženého textu v rámiku so svetlomodrým lemom ako .user-edit */
.pd-area.pd-existing:focus, .psheet .pd-area.pd-existing:focus { border: 1.5px solid #83A9E4; box-shadow: none; outline: none; }

/* Okná z menu účtu na počítači a v aplikácii pre Mac (Owner 16.10.2026, návrh „Počítač — okná z menu účtu ako na mobile“
   v Claude Design): tie isté strany ako Settings na mobile v okne v strede — biela gulička s krížikom vľavo hore, nadpis
   17 bodov v strede, sivé vety nad bielymi kartami (zaoblenie 24), bez ikony, oranžového nadpisu a tlačidla Zavrieť.
   Hodnoty sú prevzaté z mobilných pravidiel (.modal.settings-sheet …) vyššie. */
@media (min-width: 761px) {
  .modal.desk-sheet {
    width: 480px; max-width: calc(100vw - 40px); height: min(86vh, 680px); padding: 16px 16px 24px; overflow: hidden;
    display: flex; flex-direction: column; background: #F9F9F7; border: none; border-radius: 26px;
    box-shadow: 0 24px 60px rgba(20, 20, 15, .28); color: var(--ink);
  }
  /* jednotná výška všetkých okien (Owner 16.10.2026): 680 = najvyššie okno Kredit a spotreba (656) celé; obsah hore,
     dlhý zoznam (Prepojené aplikácie, dokument) sa posúva vo vnútri */
  /* kratšie okná (Owner 16.10.2026, vzor Štýl odpovedí): 530 — Kredit a Prepojené aplikácie ostávajú 680 */
  .modal.desk-sheet:is(.desk-style, .desk-addr, .desk-lang, .desk-support, .desk-info, .desk-billing) { height: min(86vh, 530px); }
  .modal.desk-sheet .ms { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .modal.desk-sheet .ms-head { position: relative; flex: none; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-bottom: 16px; }
  .modal.desk-sheet .ms-round {
    position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: #fff;
    box-shadow: 0 2px 10px rgba(20, 20, 15, .08); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
  }
  .modal.desk-sheet .ms-round .ic { width: 20px; height: 20px; }
  .modal.desk-sheet .ms-tools { top: 0; transform: none; }
  .modal.desk-sheet .ms-title {
    margin: 0; max-width: calc(100% - 120px); font-family: var(--sans); font-size: 17px; line-height: 22px; font-weight: 600;
    color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .modal.desk-sheet .ms-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .modal.desk-sheet .ms-body::-webkit-scrollbar { display: none; }
  .modal.desk-sheet .ms-page { display: flex; flex-direction: column; }
  .modal.desk-sheet .ms-page.ms-fill { height: 100%; }
  .modal.desk-sheet .ms-caption { flex: none; margin: 0 16px 14px; font-size: 15px; line-height: 21px; color: #6B6A66; }
  /* obsah strán: bez ikony, sivá veta vľavo nad kartou */
  .modal.desk-sheet .support-head { align-items: stretch; gap: 0; }
  .modal.desk-sheet .support-head > .support-head-ic { display: none; }
  .modal.desk-sheet .support-head > .lang-text, .modal.desk-sheet .split-text {
    display: block; margin: 0 16px 10px; padding: 0; text-align: left; font-size: 15px; line-height: 21px; color: #6B6A66;
  }
  .modal.desk-sheet .split-text { margin-top: 24px; }
  .modal.desk-sheet .split-text:has(+ .set-row[hidden]) { display: none; }  /* skrytý riadok (Druhý jazyk) aj bez vety */
  .modal.desk-sheet .panel-credit > .lang-text { display: none; }
  .modal.desk-sheet .set-card { margin-top: 0; border: none; border-radius: 24px; padding: 0 16px; }
  .modal.desk-sheet .set-row { gap: 12px; min-height: 60px; }
  .modal.desk-sheet .set-title { font-size: 17px; font-weight: 400; }
  .modal.desk-sheet .set-hint { display: none; }
  /* Kredit: karty s vnútorným okrajom ako na mobile (.credit-a) */
  .modal.desk-sheet .credit-a .set-card { padding: 16px 20px; }
  .modal.desk-sheet .credit-a .credit-parts { padding: 16px 20px 4px; }
  .modal.desk-sheet .set-name { font-size: 16px; padding: 0 14px; }
  /* Meno, Jazyk, Štýl: každé nastavenie vo vlastnej bielej karte, veta nad ňou */
  .modal.desk-sheet :is(#addr-card, #lang-card, #style-card) { padding: 0; border: none; border-radius: 0; background: none; }
  .modal.desk-sheet :is(#addr-card, #lang-card, #style-card) > .set-row { min-height: 60px; padding: 0 16px; border: none; border-radius: 24px; background: #fff; }
  .modal.desk-sheet #lang-card > .set-row[data-key="interpreter"] { display: none; }  /* Prekladač sa zapína v hovore */
  /* Podpora a Podmienky: riadky so šípkou */
  .modal.desk-sheet .panel-support { gap: 0; }
  .modal.desk-sheet .ms-card { background: #fff; border-radius: 24px; padding: 0; overflow: hidden; }
  .modal.desk-sheet .ms-row {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; box-sizing: border-box; padding: 0 14px 0 16px;
    border: none; background: none; font: inherit; font-family: var(--sans); font-size: 17px; text-align: left; color: var(--ink); cursor: pointer;
  }
  .modal.desk-sheet .ms-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .modal.desk-sheet .panel-support .ms-name { font-weight: 500; }
  .modal.desk-sheet .ms-ic { width: 22px; height: 22px; flex: none; color: #3d3d3a; }
  .modal.desk-sheet .bill-page { gap: 14px; }
  .modal.desk-sheet .ms-logo { width: 22px; height: 22px; flex: none; object-fit: contain; }
  .modal.desk-sheet .ms-chev { width: 16px; height: 16px; flex: none; color: #9B9891; }
  .modal.desk-sheet .info-card .set-row { min-height: 52px; }
  .modal.desk-sheet .info-chev { color: #9B9891; }
  /* Prepojené aplikácie: zoznam sa posúva vo vnútri okna, abeceda vpravo */
  .modal.desk-sheet .panel-conn .lang-text { margin-bottom: 4px; }
  .modal.desk-sheet .conn-list { overflow-y: auto; scrollbar-width: none; }
  .modal.desk-sheet .conn-list::-webkit-scrollbar { display: none; }
  .modal.desk-sheet .conn-letter { margin: 14px 16px 6px; font-size: 13px; font-weight: 600; color: #85847F; }
  .modal.desk-sheet .conn-num { display: none; }
  .modal.desk-sheet .conn-name { font-size: 17px; font-weight: 400; }
  .modal.desk-sheet .conn-row { min-height: 48px; }
  @media (hover: hover) and (pointer: fine) {
    .modal.desk-sheet .ms-row:hover, .modal.desk-sheet .info-row:hover { background: #F4F3F0; }
    .modal.desk-sheet .ms-round:hover { background: #F4F3F0; }
  }
}

/* Okno Kontext / Výstupy na počítači (Owner 16.10.2026, ako Claude „Context“): nadpis, vpravo lupa · Vybrať · Pridať · ×,
   tabuľka Názov · Veľkosť · Podrobnosti, dole pruh kapacity projektu */
.modal.pft-modal {
  width: min(1040px, calc(100vw - 48px)); max-width: none; height: min(86vh, 820px); padding: 0; overflow: hidden;
  background: #fff; border-radius: 20px; display: flex;
}
.pft { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 26px 20px 22px 20px; }
.pft-head { display: flex; align-items: center; gap: 12px; padding: 0 0 14px 20px; }
.pft-title { flex: 1; margin: 0; font-size: 26px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.pft-tools { display: flex; align-items: center; gap: 4px; }
.pft-tool {
  flex: none; display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px;
  border: none; border-radius: 10px; background: none; font: inherit; font-size: 15.5px; color: var(--ink); cursor: pointer;
}
.pft-tool .ic { width: 20px; height: 20px; }
.pft-tool:hover, .pft-tool.is-on { background: var(--soft-hover); }
.pft-tool[hidden] { display: none; }
.pft-del { color: var(--orange); }
.pft-input {
  width: 220px; height: 36px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line2); border-radius: 10px;
  background: #fff; font: inherit; font-size: 15px; color: var(--ink); outline: none;
}
.pft-input[hidden] { display: none; }
.pft-table { flex: 1; min-height: 0; overflow-y: auto; }
.pft-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 130px 180px; align-items: center; gap: 16px; width: 100%; min-height: 56px;
  box-sizing: border-box; padding: 0 20px; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
  font: inherit; font-size: 16px; color: var(--ink); text-align: left; cursor: pointer;
}
.pft-row:hover:not(.pft-hrow) { background: #F7F7F5; }
.pft-hrow { min-height: 40px; cursor: default; font-size: 15px; font-weight: 500; }
.pft-row.is-pending { opacity: .5; cursor: default; }
.pft-row.is-picked { background: #EEF4FC; }
.pft-c-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pft-c-size, .pft-c-when { font-size: 15.5px; color: #6B6A66; white-space: nowrap; }
.pft-hrow .pft-c-size, .pft-hrow .pft-c-when { color: var(--ink); }
.pft-ic { flex: none; width: 20px; height: 20px; color: #6B6A66; }
.pft-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pft-ext { flex: none; font-size: 13px; color: #85847F; }
.pft-check { flex: none; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #B9B8B2; border-radius: 5px; }
.pft-check { position: relative; }
.pft-check.is-on { border-color: #4078D0; background: #4078D0; }
.pft-check.is-on::after {  /* biela fajka */
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pft-empty { margin: 28px 20px; font-size: 15px; color: #85847F; }
.pft-foot { padding: 14px 20px 0; }
.pft-foot .pf-bar { height: 4px; }
.pft-cap { margin: 10px 0 0; font-size: 14px; color: #6B6A66; }
/* riadky stránky projektu ako Claude: celý riadok sa dá stlačiť, vpravo počet súborov sivým */
.pp-row-click { cursor: pointer; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { .pp-row-click:hover { background: #F4F3F0; } }
.pp-row-count { font-size: 14.5px; color: #85847F; margin-right: auto; }
.pp-row-head:has(.pp-row-count) .pp-row-label { flex: none; }

/* Jednotný jemnejší štýl okien na počítači (Owner 16.10.2026): okná z menu účtu v mierke okna „Vytvoriť projekt“ podľa
   Claude — menšie písmo (15 / 13,5), nižšie riadky, menšie guličky a prepínače; tlačidlá sú pilulky ako Apple */
@media (min-width: 761px) {
  .modal.desk-sheet { width: 512px; padding: 20px 20px 22px; border-radius: 18px; box-shadow: 0 20px 50px rgba(20, 20, 15, .22); }
  /* výšky v novej mierke: Kredit a Prepojené aplikácie 560 (Kredit potrebuje 541), ostatné 420 (Štýl odpovedí 394) */
  .modal.desk-sheet { height: min(86vh, 560px); }
  .modal.desk-sheet:is(.desk-style, .desk-addr, .desk-lang, .desk-support, .desk-info, .desk-billing, .desk-credit) { height: min(86vh, 420px); }
  .modal.desk-sheet .ms-head { min-height: 32px; margin-bottom: 14px; }
  .modal.desk-sheet .ms-round { width: 32px; height: 32px; box-shadow: 0 1px 6px rgba(20, 20, 15, .1); }
  .modal.desk-sheet .ms-round .ic { width: 16px; height: 16px; }
  .modal.desk-sheet .ms-tools { height: 32px; border-radius: 16px; box-shadow: 0 1px 6px rgba(20, 20, 15, .1); }
  .modal.desk-sheet .ms-tool { width: 32px; height: 32px; }
  .modal.desk-sheet .ms-tool .ic { width: 16px; height: 16px; }
  .modal.desk-sheet .ms-tool.ms-tool-i { font-size: 17px; }
  .modal.desk-sheet .ms-title { font-size: 15px; line-height: 20px; }
  .modal.desk-sheet .ms-caption { margin: 0 12px 10px; font-size: 13.5px; line-height: 19px; }
  .modal.desk-sheet .support-head > .lang-text, .modal.desk-sheet .split-text { margin: 0 12px 8px; font-size: 13.5px; line-height: 19px; }
  .modal.desk-sheet .split-text { margin-top: 18px; }
  .modal.desk-sheet .set-card { border-radius: 14px; padding: 0 14px; }
  .modal.desk-sheet .set-row { min-height: 44px; }
  .modal.desk-sheet :is(#addr-card, #lang-card, #style-card) > .set-row { min-height: 44px; padding: 0 14px; border-radius: 14px; }
  .modal.desk-sheet .set-title, .modal.desk-sheet :is(#addr-card, #lang-card, #style-card) .set-title { font-size: 15px; }
  .modal.desk-sheet .set-switch { transform: scale(.78); transform-origin: right center; }
  .modal.desk-sheet .set-name, .modal.desk-sheet .set-lang { height: 30px; padding: 0 12px; font-size: 13.5px; }
  .modal.desk-sheet .set-play { width: 30px; height: 30px; }
  .modal.desk-sheet .set-play .ic { width: 15px; height: 15px; }
  .modal.desk-sheet .set-ctl { gap: 4px; }
  .modal.desk-sheet .ms-card { border-radius: 14px; }
  .modal.desk-sheet .ms-row { min-height: 40px; padding: 0 12px 0 14px; gap: 12px; font-size: 15px; }
  .modal.desk-sheet .ms-logo, .modal.desk-sheet .ms-ic { width: 18px; height: 18px; }
  .modal.desk-sheet .ms-chev, .modal.desk-sheet .info-chev { width: 14px; height: 14px; }
  .modal.desk-sheet .info-card .set-row { min-height: 40px; }
  .modal.desk-sheet .bill-page { gap: 10px; }
  .modal.desk-sheet .bill-plan-row { min-height: 40px; padding: 0 14px; }
  .modal.desk-sheet .bill-plan-row .ms-value { font-size: 15px; }
  .modal.desk-sheet .conn-letter { margin: 12px 14px 5px; font-size: 12px; }
  .modal.desk-sheet .conn-row { min-height: 38px; gap: 10px; }
  .modal.desk-sheet .conn-name { font-size: 15px; }
  .modal.desk-sheet .conn-logo { width: 18px; height: 18px; }
  .modal.desk-sheet .conn-check { width: 14px; height: 14px; }
  .modal.desk-sheet .conn-index { font-size: 12px; width: 24px; }
  .modal.desk-sheet .credit-sec { margin: 14px 12px 6px; font-size: 13.5px; }
  .modal.desk-sheet .credit-a .set-card { padding: 12px 14px; }
  .modal.desk-sheet .credit-a .credit-parts { padding: 12px 14px 2px; }
  .modal.desk-sheet .credit-a .credit-big { margin-bottom: 8px; font-size: 15px; }
  .modal.desk-sheet .credit-a .credit-big b { font-size: 15px; }
  .modal.desk-sheet .credit-a .credit-seg { height: 8px; }
  .modal.desk-sheet .credit-a .credit-legend-row { min-height: 34px; gap: 10px; font-size: 15px; }
  .modal.desk-sheet .credit-line, .modal.desk-sheet .credit-none { font-size: 13.5px; }
  .modal.desk-sheet .credit-a .credit-topup.credit-topup-wide { height: 34px; border-radius: 999px; font-size: 14.5px; }
  .modal.desk-sheet .credit-topup-note { font-size: 12px; }
  .modal.desk-sheet .credit-a .credit-topup-card { gap: 8px; padding: 12px 14px; }
}
/* okná projektov: tlačidlá ako pilulky Apple (Owner 16.10.2026) */
.modal.pd-modal .pd-cancel, .modal.pd-modal .pd-go, .modal.pd-modal .pd-add, .modal.pd-modal .pd-chip { border-radius: 999px; }
.modal.pd-modal .pd-cancel, .modal.pd-modal .pd-go { padding: 0 16px; }

/* Krížik (Owner 16.10.2026): len vľavo v bielej guličke, vpravo nikde — okná projektov majú Zrušiť; gulička 32 so znakom 14 */
.modal.pd-modal .pd-x { display: none; }
.pft-x {
  flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(20, 20, 15, .12); color: var(--ink); cursor: pointer;
}
.pft-x .ic { width: 20px; height: 20px; }
.pft-head { padding-left: 0; }
@media (min-width: 761px) {
  /* znak krížika má v súbore veľký okraj — mobilné pravidlo ho zväčšuje na 30; na počítači menší */
  .modal.desk-sheet .ms-round .ic-close { width: 20px !important; height: 20px !important; }
  .modal.desk-sheet .ms-round .ic-back { width: 15px; height: 15px; }
}

/* Kredit na počítači (Owner 16.10.2026): „Dobiť kredit ›“ oranžovým textom na konci riadku obnovy namiesto tlačidla */
.credit-renew-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
@media (min-width: 761px) { .modal.desk-sheet .credit-a .credit-renew { font-size: 13.5px; line-height: 19px; } }
.credit-renew-row .credit-renew { margin: 0; min-width: 0; }
/* platené plány (Owner 18.10.2026): pod obnovou dva oranžové odkazy — Zmeniť plán a Dobiť kredit */
.credit-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 12px; }
.credit-links .credit-topup-link { margin-left: 0; }
.credit-topup-link {
  flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding: 0; border: none; background: none;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--orange); white-space: nowrap; cursor: pointer;
}
.credit-topup-link .ic { width: 14px; height: 14px; }
.credit-topup-link:disabled { opacity: .6; cursor: default; }
@media (hover: hover) and (pointer: fine) { .credit-topup-link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ===== Jednotné pravidlá okien na počítači (Owner 16.10.2026, schválené v Claude Design „Tlačidlá a polia“) =========
   Šírky len dve: úzka 480 (nastavenia, formuláre) a široká 720 (dlhý text, zoznamy súborov). Výška podľa obsahu, najviac
   86 % obrazovky — čo sa nezmestí, posúva sa vo vnútri. Hlavička: biela gulička 32 s krížikom vľavo, nadpis 17 v strede.
   Písmo: popis 14, riadky a polia 15, sivé nadpisy sekcií 13. Tlačidlá: pilulka 36 / písmo 14,5 — čierne hlavné, biele
   s rámikom vedľajšie, text na konci riadku ako odkaz. Pole na písanie (aj hľadanie): pri písaní modrý lem #83A9E4. */
@media (min-width: 761px) {
  /* šírky a výška */
  .modal.desk-sheet, .modal.desk-sheet:is(.desk-style, .desk-addr, .desk-lang, .desk-support, .desk-info, .desk-billing, .desk-credit) {
    width: 480px; height: auto; max-height: min(86vh, 820px);
  }
  .modal.desk-sheet .ms-page.ms-fill { height: auto; }
  .modal.pd-modal { width: min(480px, calc(100vw - 32px)); max-width: 480px; padding: 20px 20px 22px; max-height: 86vh; overflow-y: auto; }
  .modal.pd-modal.pd-wide { width: min(720px, calc(100vw - 32px)); max-width: 720px; }
  .modal.pft-modal { width: min(720px, calc(100vw - 32px)); height: auto; max-height: min(86vh, 820px); }
  .pft { padding: 20px 20px 22px; min-height: 0; }
  /* hlavička: gulička vľavo, nadpis 17 v strede */
  .modal.desk-sheet .ms-title { font-size: 17px; line-height: 22px; }
  .modal.pd-modal .pd-head { position: relative; justify-content: center; align-items: center; min-height: 32px; }
  .modal.pd-modal .pd-title { font-size: 17px; line-height: 22px; text-align: center; padding: 0 44px; }
  .modal.pd-modal .pd-x {
    display: flex; position: absolute; left: 0; top: 0; width: 32px; height: 32px; margin: 0; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 6px rgba(20, 20, 15, .14);
  }
  .modal.pd-modal .pd-x .ic { width: 20px; height: 20px; }
  .pft-head { position: relative; padding: 0 0 14px; min-height: 32px; }
  .pft-title { position: absolute; left: 50%; top: 5px; transform: translateX(-50%); font-size: 17px; line-height: 22px; white-space: nowrap; }
  .pft-tools { margin-left: auto; }
  /* písmo */
  .modal.desk-sheet .support-head > .lang-text, .modal.desk-sheet .split-text, .modal.desk-sheet .ms-caption,
  .modal.pd-modal .pd-intro { font-size: 14px; line-height: 20px; }
  .modal.pd-modal .pd-intro { margin-top: -6px; }
  .modal.desk-sheet .credit-sec { font-size: 13px; }
  .modal.pd-modal .pd-label { font-size: 15px; }
  .pft-row { font-size: 15px; min-height: 48px; }
  .pft-hrow { font-size: 13px; min-height: 36px; color: #85847F; }
  .pft-hrow .pft-c-size, .pft-hrow .pft-c-when { color: #85847F; }
  .pft-c-size, .pft-c-when { font-size: 14px; }
  .pft-tool { font-size: 14.5px; height: 32px; }
  /* tlačidlá: pilulka 36, písmo 14,5 */
  .modal.pd-modal .pd-cancel, .modal.pd-modal .pd-go { height: 36px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; }
  .modal.pd-modal .pd-go { font-weight: 600; }
  .modal.pd-modal .pd-add, .modal.pd-modal .pd-chip { height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; }
  .plp-new { height: 36px; padding: 0 18px; font-size: 14.5px; font-weight: 600; }
  .sd2-btn { height: 36px; padding: 0; border-radius: 999px; font-size: 14.5px; }
  .sd2-strong { font-weight: 600; }
  .bill-pop-btn { height: 36px; border-radius: 18px; font-size: 14.5px; }
  /* polia na písanie: modrý lem pri písaní (aj hľadanie) */
  .plp-search:focus-within { border-color: #83A9E4; box-shadow: 0 0 0 .5px #83A9E4; }
  .pft-input:focus { border-color: #83A9E4; box-shadow: 0 0 0 .5px #83A9E4; }
  .modal :is(input[type="text"], input[type="search"], input:not([type]), textarea):not(.set-name):focus {
    border-color: #83A9E4; box-shadow: 0 0 0 .5px #83A9E4; outline: none;
  }
}

/* ===== Počítač a web: mierne zaoblenie ako Claude a macOS (Owner 16.10.2026) — mobil ostáva s pilulkami ===============
   tlačidlá a polia 8, karty 10, okná, hlásenia a oznamy 12; krížik a nástroje v hlavičke čisté, bez guličky a podkladu */
@media (min-width: 761px) {
  /* okná, hlásenia, oznamy */
  .modal.desk-sheet, .modal.pd-modal, .modal.pft-modal, .modal.sd2-modal, .toast-card, .bill-pop, .menu { border-radius: 12px; }
  /* karty a riadky vo vnútri */
  .modal.desk-sheet .set-card, .modal.desk-sheet .ms-card,
  .modal.desk-sheet :is(#addr-card, #lang-card, #style-card) > .set-row, .plp-card, .pp-row-click { border-radius: 10px; }
  /* tlačidlá a polia */
  .modal.pd-modal :is(.pd-cancel, .pd-go, .pd-add, .pd-chip, .pd-input, .pd-area), .plp-new, .plp-search, .pft-input, .pft-tool,
  .sd2-btn, .modal.sd2-modal .sd2-btn, .toast-ok, .bill-pop-btn, .modal.desk-sheet :is(.set-name, .set-lang, .set-play) { border-radius: 8px; }
  .modal.sd2-modal .sd2-btn, .toast-ok { height: 36px; font-size: 14.5px; }
  .bill-pop-btn { height: 36px; }
  /* krížik a nástroje v hlavičke: čistá ikona bez guličky */
  .modal.desk-sheet .ms-round, .modal.pd-modal .pd-x, .pft-x, .modal.desk-sheet .ms-tools {
    background: none; box-shadow: none; border-radius: 6px;
  }
  .modal.desk-sheet .ms-round:hover, .modal.pd-modal .pd-x:hover, .pft-x:hover, .modal.desk-sheet .ms-tool:hover { background: none; opacity: .6; }
}
/* Podmienky a súkromie (Owner 16.10.2026): podsvietenie riadku po celej šírke karty a v jej zaoblení, čiary odsadené */
@media (min-width: 761px) {
  .modal.desk-sheet .info-card { padding: 0; overflow: hidden; }
  .modal.desk-sheet .info-card .set-row { position: relative; padding: 0 14px; }
  .modal.desk-sheet .info-card .set-row + .set-row { border-top: none; }
  .modal.desk-sheet .info-card .set-row + .set-row::before {
    content: ""; position: absolute; top: 0; left: 14px; right: 14px; border-top: 1px solid var(--line);
  }
  .modal.desk-sheet .info-card .set-row:hover::before, .modal.desk-sheet .info-card .set-row:hover + .set-row::before { opacity: 0; }
}
@media (min-width: 761px) {
  .modal.desk-sheet.desk-tall { height: min(86vh, 820px); }
  .modal.desk-sheet.desk-tall .ms-page.ms-fill { height: 100%; }
}
/* viac vzduchu pod poslednou kartou (Owner 16.10.2026: dole „na tesno“) */
@media (min-width: 761px) { .modal.desk-sheet { padding-bottom: 30px; } }

/* Obrázky a Kód na počítači (Owner 16.10.2026): namiesto kariet riadky ako Recents v projekte, skupiny Dnes / Včera /
   Staršie so sivým nadpisom; prázdna skupina sa nekreslí */
@media (min-width: 761px) {
  .plp-grid.plp-rows { display: block; }
  .plp-group + .plp-group { margin-top: 22px; }
  .plp-group-title { margin: 0; padding: 0 0 8px 16px; font-size: 14px; font-weight: 400; color: #8c8e92; }
}

/* stránka Projekty (aj Obrázky a Kód) na počítači ako Claude (Owner 16.10.2026, porovnanie snímok): menší nadpis,
   menšie nástroje a tlačidlo, nižšie karty s menším písmom a menším odsadením */
@media (min-width: 761px) {
  .plp-head { padding-top: 52px; padding-bottom: 44px; }
  .plp-title { font-size: 27px; line-height: 1.25; }
  .plp-tools { gap: 4px; }
  .plp-tool { width: 32px; height: 32px; border-radius: 8px; }
  .plp-tool .ic { width: 19px; height: 19px; }
  .plp-new { height: 32px; margin-left: 8px; padding: 0 14px; font-size: 14px; font-weight: 500; }
  .plp-grid { gap: 24px; }
  .plp-card { min-height: 112px; padding: 16px; }
  .plp-name { font-size: 15px; gap: 7px; }
  .plp-pin { width: 14px; height: 14px; }
  .plp-desc { margin-top: 8px; font-size: 14.5px; }
  .plp-when { padding-top: 22px; font-size: 13.5px; }
}
@media (min-width: 761px) {
  .plp-cardbox { position: relative; display: flex; min-width: 0; }
  .plp-cardbox > .plp-card { flex: 1; min-width: 0; }
  .plp-more {
    position: absolute; top: 10px; right: 10px; 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;
  }
  .plp-more .ic { width: 18px; height: 18px; transform: rotate(90deg); }
  .plp-more:hover, .plp-cardbox.menu-open .plp-more { background: rgba(0, 0, 0, .06); }
  .plp-cardbox:hover .plp-more, .plp-cardbox.menu-open .plp-more { display: flex; }
  .plp-cardbox.menu-open > .plp-card { background: #fff; border-color: var(--line2); }
  .plp-cardbox .plp-name { padding-right: 30px; }
}

/* oznámenie na prihlasovacej stránke (Owner 16.10.2026): hranaté ako tlačidlá prihlásenia — nie čierna pilulka */
.toast.toast-login .toast-card { border-radius: 16px; padding: 22px 20px 20px; }
.toast.toast-login .toast-title { font-size: 16px; }
.toast.toast-login .toast-text { font-size: 15px; }
.toast.toast-login .toast-ok { height: 40px; border-radius: 10px; font-size: 16px; font-weight: 500; }

/* menu účtu (Owner 17.10.2026): pri nízkom okne sa hlavička s menom a e-mailom stláčala (max. 60 % výšky) —
   riadky sa nestláčajú, menu smie byť vysoké takmer ako okno */
.menu.menu-account { max-height: calc(100vh - 16px); }
.menu.menu-account > * { flex: none; }
/* šírky na počítači ako Claude (Owner 17.10.2026, porovnanie snímok): prázdny rozhovor — pole 641 px; v rozhovore
   text 738 px a pole 772 px (pole je o kúsok širšie ako text) */
@media (min-width: 761px) {
  :root { --content-width: 790px; }
  .composer { width: min(calc(100% - 34px), 824px); }
  .composer.composer-empty { width: min(calc(100% - 34px), 693px); }
}

/* bočný panel na počítači ako Claude (Owner 17.10.2026): riadok vlákna pod kurzorom tmavší, na konci ⋮ v štvorčeku;
   bublina s celým názvom a dátumom vedľa panela namiesto posúvania názvu */
@media (min-width: 761px) and (hover: hover) {
  .nav .thread-row:hover, .nav .thread-row.menu-open { background-color: var(--row-open); }
  .thread-row .row-more { width: 24px; height: 24px; border-radius: 6px; }
  .thread-row .row-more .ic { width: 16px; height: 16px; transform: rotate(90deg); }
  .thread-row .row-more:hover, .thread-row.menu-open .row-more { background: rgba(0, 0, 0, .07); }
  .thread-row .row-more::after { display: none; }
  /* názov pod kurzorom neposkočí doprava — medzera ostáva, ⋮ má vlastný odstup */
  .nav .thread-row:hover, .nav .thread-row.menu-open { gap: 0; }
  .nav .thread-row:hover .row-more, .nav .thread-row.menu-open .row-more { margin-left: 6px; margin-right: -17px; }
  .nav .thread-row:hover .row-name, .nav .thread-row.menu-open .row-name { margin-right: 6px; }  /* ⋮ ako Claude 14 px od okraja */
}
.row-tip {
  position: fixed; z-index: 70; width: 222px;  /* pevná šírka ako Claude (Owner 17.10.2026) */ box-sizing: border-box; padding: 9px 12px 10px; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; box-shadow: 0 6px 22px rgba(28, 28, 30, .12); pointer-events: none; font-family: var(--ui);
}
.row-tip[hidden] { display: none; }
.row-tip-name { font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.row-tip-when { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--faint); }

/* hlavičky Pripnuté a Nedávne na počítači (Owner 17.10.2026, ako Claude): pod kurzorom šípka za názvom (klik zbalí
   sekciu, šípka doprava), pri Nedávnych ↗ (všetky vlákna) pod kurzorom a posuvníky stále */
.sec-fold, .sec-tools { display: none; }
@media (min-width: 761px) {
  #sec-pinned, #sec-threads { pointer-events: auto; gap: 2px; min-height: 26px; }
  #sec-pinned .sec-name, #sec-threads .sec-name { flex: 0 1 auto; cursor: pointer; }
  .sec-fold {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: none;
    background: none; color: var(--sec-head); cursor: pointer; opacity: 0; transition: opacity .12s;
  }
  .sec-fold .ic { width: 13px; height: 13px; }
  .sec-head:hover .sec-fold, .sec-closed .sec-fold, .sec-fold:focus-visible { opacity: 1; }
  .sec-tools { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; margin-right: -9px; }
  .sec-tool {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none;
    border-radius: 6px; background: none; color: var(--item); cursor: pointer;
  }
  .sec-tool .ic { width: 16px; height: 16px; }
  .sec-tool:hover, .sec-tool.is-open { background: var(--row-open); }
  .sec-all { opacity: 0; transition: opacity .12s; }
  .sec-head:hover .sec-all, .sec-all:focus-visible { opacity: 1; }
  .nav-sec.sec-closed #sec-pinned-body, .nav-sec.sec-closed #sec-threads-body { display: none; }
}
.ic-arrow-up-right { --ic: url("/icons/ui/arrow-up-right.svg"); }
.ic-sliders-v { --ic: url("/icons/ui/sliders-v.svg"); }
/* Pripnuté (Owner 17.10.2026): názvy relácií začínajú na rovnakej úrovni ako názvy projektov (ikona 18 px, odstup 13 px) */
@media (min-width: 761px) {
  .nav .thread-row:not(.project-row) .row-ic { width: 18px; height: 18px; margin-right: 13px; }
}
/* bublina zoradenia pri Nedávnych: riadky 32 px ako menu účtu, hodnota vpravo sivá */
.menu.menu-navopts { min-width: 0; max-width: none; padding: 6px 4px; }
.menu-navopts .menu-row { min-height: 32px; padding: 2.5px 12px 2.5px 10px; }
.menu-navopts .menu-row { gap: 8px; }
.menu-navopts .menu-name { flex: none; }
.menu-navopts .menu-hint { flex: none; margin-left: auto; padding-left: 14px; font-size: 13px; white-space: nowrap; }
.menu.flyout.flyout-fit { width: max-content; min-width: 150px; }
/* šípka doprava stále viditeľná ako Claude (Owner 17.10.2026): hneď vidno, že pod riadkom je výber */
.menu-navopts .menu-sub {
  flex: none; opacity: 1; width: 14px; height: 14px; margin-left: 8px; padding: 0; font-size: 0; background-color: var(--faint);
  -webkit-mask: url("/icons/ui/chevron-right.svg") center / contain no-repeat; mask: url("/icons/ui/chevron-right.svg") center / contain no-repeat;
}
/* druhá bublina pri Nedávnych: riadky rovnako vysoké ako v prvej (Owner 17.10.2026) */
.menu.flyout.flyout-fit { padding: 6px 4px; }
.menu.flyout.flyout-fit .menu-row { min-height: 32px; padding: 2.5px 12px 2.5px 10px; line-height: 21.2px; }
/* zvolená hodnota v druhej bubline: len oranžová fajka, riadok nepodsvietený (Owner 17.10.2026) */
.menu.flyout.flyout-fit .menu-row.current:not(:hover):not(:focus-visible) { background: none; }
/* zvolená hodnota má rovnakú farbu písma ako ostatné — odlišuje ju len oranžová fajka (Owner 17.10.2026) */
.menu.flyout.flyout-fit .menu-row.current { color: var(--item); }
/* menu účtu (Owner 17.10.2026): šípka pri Podmienkach a súkromí stále viditeľná; v druhej bubline (úložiská) zvolené
   len oranžovou fajkou — bez podsvietenia a tmavšieho písma */
.menu-chev-on { flex: none; width: 14px; height: 14px; margin-left: auto; color: var(--faint); }
.menu.flyout.flyout-account .menu-row.current:not(:hover):not(:focus-visible) { background: none; }
.menu.flyout.flyout-account .menu-row.current { color: var(--item); }

/* Pripnuté projekty na počítači (Owner 17.10.2026, ako Claude): názov sa pod kurzorom ani po kliknutí neposúva —
   medzera ikona–názov ostáva; ⋮ ako pri reláciách */
@media (min-width: 761px) and (hover: hover) {
  .nav .thread-row.project-row:hover, .nav .thread-row.project-row.menu-open { gap: 9px; }
  .nav .thread-row.project-row:hover .row-more, .nav .thread-row.project-row.menu-open .row-more { margin-left: 0; }
}
/* Odstrániť v každej bubline (Owner 17.10.2026, ako Claude): pod kurzorom riadok v oranžovej Coburgu, biely text a ikona */
.menu-row.menu-delete:hover, .menu-row.menu-delete:focus-visible { background-color: #FF650B !important; color: #fff !important; }
.menu-row.menu-delete:hover .ic, .menu-row.menu-delete:focus-visible .ic { color: #fff !important; }
@media (min-width: 761px) {
  .menu.menu-ctx:not(.menu-account) .menu-row { min-height: 32px; padding-top: 2.5px; padding-bottom: 2.5px; line-height: 21.2px; }
}

/* Hľadanie na počítači (Owner 17.10.2026, ako Claude): pole na začiatku panela, lupa dole zmizla; okno široké 720
   v štandarde okien (krížik vľavo, nadpis v strede) — pole, záložky, Nedávne s ikonou a dátumom, Akcie, klávesy */
.nav-searchbox { display: none; }
@media (min-width: 761px) {
  .nav-searchbox {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; margin: 0 0 8px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--line2); border-radius: 8px; background: #fff; color: var(--faint); font: inherit; font-size: 14px;
    cursor: pointer; text-align: left;
  }
  .nav-searchbox .ic { width: 17px; height: 17px; color: var(--item); }
  .nav-searchbox:hover { border-color: #CFCDC6; }
  #nav-search { display: none; }
  .modal.desk-sheet.desk-search { width: min(720px, calc(100vw - 32px)); }
  .ss { display: flex; flex-direction: column; min-height: 0; }
  .ss-field {
    display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 10px;
    background: #fff;
  }
  .ss-field:focus-within { border-color: #83A9E4; box-shadow: 0 0 0 .5px #83A9E4; }
  .ss-lens { width: 18px; height: 18px; color: var(--faint); }
  .ss-input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: inherit; font-size: 15px; color: var(--ink); }
  .ss-tabs { display: flex; gap: 4px; margin: 14px 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .ss-tab {
    height: 32px; padding: 0 12px; border: none; border-radius: 8px; background: none; color: var(--faint); font: inherit; font-size: 14.5px;
    cursor: pointer;
  }
  .ss-tab:hover { color: var(--ink); }
  .ss-tab.is-on { background: var(--row-open); color: var(--ink); }
  .ss-list { display: flex; flex-direction: column; min-height: 120px; max-height: min(52vh, 480px); overflow-y: auto; }
  .ss-sec { padding: 12px 10px 6px; font-size: 13px; color: var(--faint); }
  .ss-row {
    display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border: none; border-radius: 8px; background: none;
    color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  }
  .ss-row.is-sel { background: var(--row-open); }
  .ss-ic { flex: none; width: 18px; height: 18px; color: var(--item); }
  .ss-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ss-kind { color: var(--faint); }
  .ss-when { flex: none; font-size: 13.5px; color: var(--faint); }
  .ss-none { margin: 24px 0; text-align: center; font-size: 14px; color: var(--faint); }
  .ss-foot {
    display: flex; gap: 22px; margin: 12px 0 0; padding: 12px 10px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint);
  }
  .ss-key { display: inline-flex; align-items: center; gap: 6px; }
  .ss-key kbd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
    border: 1px solid var(--line2); border-radius: 5px; font: inherit; font-size: 12px; color: var(--item); background: #fff;
  }
}
/* hľadanie (Owner 17.10.2026): okno má na každej záložke rovnakú výšku; v poli len modrý lem okolo — vnútorný
   obdĺžnik zmizol; pole v paneli o odtieň svetlejšie ako panel, zaoblenie ako podsvietený riadok */
@media (min-width: 761px) {
  .ss-list { height: min(48vh, 440px); max-height: none; }
  .modal .ss-field .ss-input, .modal .ss-field .ss-input:focus { border: none !important; outline: none !important; box-shadow: none !important; background: none !important; padding: 0; }
  .nav-searchbox { background: rgba(255, 255, 255, .55); border-color: rgba(0, 0, 0, .07); border-radius: 8px; }
  .nav-searchbox:hover { background: rgba(255, 255, 255, .85); border-color: rgba(0, 0, 0, .1); }
}
/* Odstrániť účet v menu účtu (Owner 17.10.2026): bežné sivé podsvietenie ako ostatné riadky, nie oranžové */
.menu.menu-account .menu-row.menu-delete:hover, .menu.menu-account .menu-row.menu-delete:focus-visible {
  background-color: var(--row-open) !important; color: var(--item) !important;
}
.menu.menu-account .menu-row.menu-delete:hover .ic, .menu.menu-account .menu-row.menu-delete:focus-visible .ic { color: inherit !important; }
/* tlačidlo účtu dole v paneli (Owner 17.10.2026): gulička s kolieskom sivá — pod kurzorom splynie s podsvietením riadku;
   za menom sivá bodka a plán účtu */
@media (min-width: 761px) {
  .account .avatar { background: var(--row-open); box-shadow: none; }
  .account:hover, .account[aria-expanded="true"] { background: var(--row-open); }
  .account-plan { color: var(--faint); }
  /* gulička v rovnakom zvislom stĺpci ako ikony panela; riadok účtu široký ako ostatné riadky */
  .nav-bottom { padding-left: 7px; }
  .account { padding-left: 5.5px; }
  /* väčšia medzera medzi poslednými riadkami panela a riadkom účtu (Owner 17.10.2026) — riadky sa schovajú vyššie */
  .nav-bottom { padding-top: 20px; }
}
/* stránka Projekty (aj Obrázky, Kód, Nedávne) na počítači ako Claude (Owner 17.10.2026, porovnanie snímok): obsah
   bližšie k panelu — vľavo 40, vpravo 38; dátum na karte s popisom o 3 px nižšie */
@media (min-width: 761px) {
  .plp-head, .plp-grid { padding-left: max(40px, calc((100% - 1000px) / 2)); padding-right: max(38px, calc((100% - 1000px) / 2)); }
  .plp-when { padding-top: 24px; }
  .plp-card { padding-top: 15px; }
  .plp-desc { margin-top: 7px; }
  .plp-grid { gap: 25px; }
  .plp-head { padding-top: 54px; padding-bottom: 46px; }
}
/* stránky Nedávne / Obrázky / Kód s riadkami (Owner 17.10.2026, ako Claude): nadpis stránky, nadpisy skupín aj názvy
   relácií začínajú na jednej línii; dátum končí pri pravom okraji ako tlačidlo Nový chat */
@media (min-width: 761px) {
  .plp-grid.plp-rows .plp-group-title { padding-left: 0; }
  .plp-grid.plp-rows .pp-srow { margin: 0 -16px; }
}

/* bočný panel na počítači (Owner 17.10.2026, ako Claude): pod kurzorom skratka pri „Nová“ (⇧⌘O) a pri Hľadať (⌘K),
   „+“ pri Projektoch; gulička pri „Nová“ a koliesko účtu pod kurzorom stmavnú, aby v podsvietení nezanikli */
.row-kbd, .row-plus, .kbd-pair { display: none; }
@media (min-width: 761px) and (hover: hover) {
  #new-chat:hover .row-kbd { display: inline-flex; gap: 3px; margin-left: auto; }
  #mode-project:hover .row-plus {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: auto; margin-right: -12px;
    border-radius: 6px; color: var(--item); cursor: pointer;
  }
  #mode-project:hover .row-plus .ic { width: 16px; height: 16px; }
  #mode-project .row-plus:hover { background: rgba(0, 0, 0, .07); }
  #mode-project:hover .mode-hover-chev, #mode-project:hover .menu-check { display: none; }
  .nav-searchbox:hover { background: var(--row-open); border-color: rgba(0, 0, 0, .08); }
  .nav-searchbox:hover .kbd-pair { display: inline-flex; gap: 3px; margin-left: auto; }
  .kbd-pair kbd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .12); border-radius: 5px; font: inherit; font-size: 11.5px; color: var(--item);
  }
  #new-chat:hover .plus-ball { background: #E0DFDA; }
  .account:hover .avatar, .account[aria-expanded="true"] .avatar { background: #E0DFDA; }
}
/* bublina pri riadku (Owner 17.10.2026): dátum svetlejšou sivou, aby sa opticky odlíšil od názvu */
.row-tip-when { color: #A3A19B; }

/* prepínače na počítači (Owner 17.10.2026): všetky ako zaoblený obdĺžnik, nie pilulka — dráha aj gombík */
@media (min-width: 761px) {
  .set-switch { border-radius: 8px; }
  .set-switch .set-white, .set-switch .set-glass { border-radius: 10px; }
}

/* ponuka riadku ako Claude (Owner 17.10.2026): písmeno skratky vpravo (P, R, D); „Pridať do projektu ›“ — bublina s poľom
   „Hľadať alebo vytvoriť projekt“ hore (stojí pri posúvaní), „+ Nový projekt“, čiara a projekty */
.menu-key { display: inline-flex; gap: 3px; margin-left: auto; padding-left: 18px; flex: none; }
/* klávesy ⇧ a písmeno v rámčekoch — rovnaký vzhľad ako skratky pri Hľadať a Novom chate (.kbd-pair kbd) */
.menu-key kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, .12); border-radius: 5px; font: inherit; font-size: 11.5px; line-height: 1; color: var(--item);
}
/* Vymazať: oranžové klávesy ako text riadku */
.menu-row.danger .menu-key kbd { border-color: rgba(255, 101, 11, .45); color: #FF650B; }
.menu-row.menu-delete:hover .menu-key kbd, .menu-row.menu-delete:focus-visible .menu-key kbd { border-color: rgba(255, 255, 255, .7); color: #fff; }
/* ponuky na počítači (Owner 18.10.2026): riadok pod kurzorom tmavšou sivou aktívneho riadku — na bielej ponuke bolo
   podfarbenie takmer neviditeľné */
@media (min-width: 761px) {
  .menu .menu-row:hover, .menu .menu-row:focus-visible, .menu .menu-row.flyout-open { background-color: #E7E6E2; }
}
.menu-row:has(.menu-key), .menu-ctx .menu-row:has(.menu-chev-on) { padding-right: 12px; }
.menu.flyout.flyout-search .menu-row { min-height: 32px; padding: 2.5px 12px 2.5px 10px; line-height: 21.2px; }
.menu.flyout.flyout-search { width: 250px; padding-top: 0; }
.menu-search { position: sticky; top: 0; z-index: 2; margin: 0 -6px 6px; padding: 4px 6px 0; background: #fff;
  border-bottom: 1px solid var(--line); flex: none; }
.menu-search input { display: block; width: 100%; box-sizing: border-box; height: 38px; padding: 0 9px; border: none; outline: none;
  background: none; font: inherit; font-size: 14px; color: var(--ink); }
.menu-search input::placeholder { color: var(--faint); }
.menu-row[hidden] { display: none; }

/* bez modrého rámčeka na tlačidlách (Owner 17.10.2026, okno Odhlásiť sa na iPhone): rámček zamerania len pri ovládaní
   klávesnicou (Tab → html.kbd, app.js) — po ťuknutí alebo kliknutí, aj keď okno samo zameria tlačidlo, nie je */
html:not(.kbd) :is(button, [role="button"], a):focus { outline: none !important; }

/* posúvanie v bubline neprejde na stránku za ňou (Owner 17.10.2026: bublina výberu modelu padala pri posúvaní) */
.menu { overscroll-behavior: contain; }

/* okno Motív na počítači (Owner 17.10.2026, návrh A): dlaždice Svetlý / Tmavý / Podľa systému ako na mobile, o kúsok vyššie */
@media (min-width: 761px) {
  .modal.desk-sheet .ms-theme-card { background: #fff; border-radius: 24px; padding: 0; }
  .modal.desk-sheet .ms-appear { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 16px 14px; }
  .modal.desk-sheet .ms-look {
    min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: none; background: none;
    font: inherit; font-family: var(--ui); font-size: 14px; color: #3d3d3a; cursor: pointer;
  }
  .modal.desk-sheet .ms-look-shot {
    position: relative; display: block; width: 100%; height: 86px; box-sizing: border-box; border-radius: 14px; overflow: hidden;
    border: 1.5px solid #E2E1DC;
  }
  .modal.desk-sheet .ms-look-light { background: #F9F9F7; }
  .modal.desk-sheet .ms-look-dark { background: #1F1F1D; border-color: #1F1F1D; }
  .modal.desk-sheet .ms-look-sys { background: linear-gradient(135deg, #F9F9F7 50%, #1F1F1D 50%); }
  .modal.desk-sheet .ms-look-inner { position: absolute; left: 8px; right: 8px; top: 8px; bottom: 8px; border-radius: 9px; background: #fff; border: 1px solid #E2E1DC; }
  .modal.desk-sheet .ms-look-dark .ms-look-inner { background: #2B2B29; border-color: #3A3A37; }
  .modal.desk-sheet .ms-look-sys .ms-look-inner { background: linear-gradient(135deg, #fff 50%, #2B2B29 50%); border-color: #BDBCB7; }
  .modal.desk-sheet .ms-look-l1, .modal.desk-sheet .ms-look-l2 { position: absolute; left: 10px; height: 3px; border-radius: 2px; background: #9B9891; }
  .modal.desk-sheet .ms-look-l1 { top: 12px; width: 40px; }
  .modal.desk-sheet .ms-look-l2 { top: 20px; width: 28px; }
  .modal.desk-sheet .ms-look-dot { position: absolute; right: 9px; bottom: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--orange); }
  .modal.desk-sheet .ms-look:hover .ms-look-shot { border-color: #CFCDC7; }
  .modal.desk-sheet .ms-look.is-on { color: var(--orange); }
  .modal.desk-sheet .ms-look.is-on .ms-look-shot { border: 2px solid var(--orange); }
}

/* Tím (Owner 17.10.2026, „+ Pridať účet“, návrh A z Claude Design): bublina darčeka — sivý pás s lístkami TEAM, nadpis
   Lora, text vľavo, vstupenky miest, zoznam členov s kolieskami, počet účtov a dole e-mail kolegu s čiernym Pozvať.
   Na webe a v Mac hranaté tlačidlá a políčko (Owner 17.10.2026), na telefóne guľaté ako v darčeku. */
.team-sheet .gift-top { height: 236px; }
.team-art { margin-top: 52px; }
.team-art svg { display: block; width: 232px; height: 145px; }
.team-sheet .gift-body { align-items: stretch; text-align: left; padding-top: 28px; }
/* nízke telefóny (iPhone SE, 667 bodov): menší obrázok lístka, nech sa pozvánka s tlačidlami zmestí (Owner 18.10.2026) */
@media (max-width: 760px) and (max-height: 720px) {
  .team-sheet .gift-top { height: 150px; }
  .team-art { margin-top: 30px; }
  .team-art svg { width: 160px; height: 100px; }
  .team-sheet .gift-body { padding-top: 18px; }
}
.team-sheet .gift-text { margin-top: 10px; font-size: 15.5px; }
.team-cards { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; padding-bottom: 4px; }
.team-cards:empty { display: none; }
.team-tix { display: flex; align-items: center; gap: 14px; }
.team-tix-art { display: flex; flex-wrap: wrap; gap: 6px; flex: none; max-width: 200px; }
.team-tix-art svg { width: 34px; height: 22px; }
.team-tix .gift-left { font-size: 14px; color: #6b6a66; }
.team-list { display: flex; flex-direction: column; border: 1px solid #E6E4DE; border-radius: 16px; }
.team-person, .team-line { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 12px 14px; }
.team-person + .team-person, .team-line + .team-line { border-top: 1px solid #EDEBE6; }
.team-av {
  flex: none; width: 36px; height: 36px; box-sizing: border-box; border-radius: 50%; background: #1a1a18; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
}
.team-av.is-invited { background: none; border: 1.5px dashed #83A9E4; color: #3F6FB5; }
.team-who { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.team-who b, .team-seat-text b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-sub { font-size: 13px; color: #6b6a66; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-sub:empty { display: none; }
.team-role { flex: none; font-size: 13px; color: #6b6a66; }
.team-name { flex: 1; min-width: 0; font-size: 15px; }
.team-head .team-name { font-weight: 600; }
.team-note .team-name { font-size: 14px; color: #6b6a66; }
.team-x {
  flex: none; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: none; color: #6b6a66;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.team-x .ic { width: 14px; height: 14px; }
.team-act { width: 100%; border: none; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.team-act-ic { width: 18px; height: 18px; flex: none; }
.team-seats-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.team-seat-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.team-seats-line .upgrade-stepper button { background: #F2F1EE; }
.team-input {
  flex: 1; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 18px; border: 1px solid #E6E4DE; border-radius: 24px;
  outline: none; background: #fff; font: inherit; font-family: var(--sans); font-size: 16px; color: var(--ink);
}
.team-input::placeholder { color: #8C8E92; opacity: 1; }
.team-input:focus { border-color: #B9B7B0; }
.team-field .team-input { height: auto; padding: 0; border: none; border-radius: 0; background: none; }
.team-foot { display: flex; flex-direction: column; gap: 8px; flex: none; padding: 16px 24px 0; }
.team-foot:empty { display: none; }
.team-invite-line { display: flex; gap: 10px; }
.team-sheet .team-main { margin: 0; padding: 0 24px; flex: none; }
/* celé okno Tímu jednou farbou pásu (Owner 20.10.2026); na telefóne farba pokračuje aj pod okno — za lištou iOS nad klávesnicou */
.team-sheet { background: #EFEEEA; }
.team-sheet .team-list { border-color: #DEDCD5; }
.team-sheet .team-person + .team-person, .team-sheet .team-line + .team-line { border-top-color: #E2E0DA; }
.team-sheet .team-seats-line .upgrade-stepper button { background: #E4E2DC; }
/* tieň v krokoch po 150 bodoch: jeden posunutý o viac, než je okno vysoké (pri klávesnici), by nechal medzeru */
@media (max-width: 760px) { .team-sheet { box-shadow: 0 150px 0 #EFEEEA, 0 300px 0 #EFEEEA, 0 450px 0 #EFEEEA; } }
/* otvorená klávesnica: tlačidlo dole ako pole na písanie v chate — bez rezervy pre spodok iPhonu, o 5 bodov nižšie
   (rovnaká medzera k pilulke iOS ako jej medzera ku klávesnici; chat.css html.kbd-open .composer, Owner 20.10.2026) */
@media (max-width: 760px) {
  html.kbd-open .team-sheet { height: calc(var(--app-height, 100dvh) - 70px + 5px); padding-bottom: 0; }
  .team-naming .gift-body { padding-bottom: 4px; }
}
/* krok 1 založenia tímu (Owner 20.10.2026): bez obrázka lístkov, len pás so šípkou; pole na názov pod textom */
.team-naming .team-art { display: none; }
.team-naming.team-sheet .gift-top { height: 84px; }
.team-sheet .team-name-input { flex: none; width: 100%; }
.team-focus-hold { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; }
.team-caret { animation: team-caret 1s steps(1) infinite; }
@keyframes team-caret { 50% { opacity: 0; } }
.team-sheet .team-leave { background: #E4E2DC; color: var(--orange); }
.team-sheet .team-quiet { background: #E4E2DC; color: var(--ink); } /* sivé ako Zrušiť v potvrdení (Owner 18.10.2026) */
.team-line.team-get { min-height: 0; padding: 10px 14px; line-height: 1.3; } /* čo člen získa: nižšie riadky, nech sa zmestia na telefón */
@media (hover: hover) and (pointer: fine) {
  .team-x:hover { background: #F2F1EE; color: var(--ink); }
  .team-act:hover { background: #F6F5F2; }
}
@media (min-width: 761px) {
  .team-sheet .gift-top { height: 210px; }
  .team-art { margin-top: 36px; }
  .team-sheet .gift-body { padding-top: 26px; }
  .team-foot { padding: 20px 32px 0; }
  .team-sheet .team-main, .team-input { height: 44px; border-radius: 10px; }  /* hranaté na webe a v Mac */
  .team-field .team-input { height: auto; border-radius: 0; }
  .team-list { border-radius: 12px; }
}


/* Farba guľôčky (Owner 19.10.2026): tri voľby pod dlaždicami motívu — guľôčka a názov, zvolená pulzuje, názov oranžový */
.ms-balls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 14px 16px; }
.ms-ball { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px 8px; border: none;
  background: none; font: inherit; font-family: var(--sans); font-size: 15px; color: var(--ink); cursor: pointer; }
.ms-ball-img { width: 40px; height: 40px; object-fit: contain; }
.ms-ball.is-on .ms-ball-img { animation: login-mark-pulse 2.6s ease-in-out infinite; }
.ms-ball.is-on .ms-ball-name { color: var(--ball); }  /* názov vo farbe zvolenej guľôčky (Owner 19.10.2026) */
@media (prefers-reduced-motion: reduce) { .ms-ball.is-on .ms-ball-img { animation: none; } }

/* Platba na stránke coburg.ai (Owner 20.10.2026, schválený návrh): vľavo nadpis, plán, suma a rozpis (Coburg), vpravo
   karta, Apple Pay, adresa a IČ DPH (Stripe). Na počítači dva stĺpce ako stránka Stripe, na telefóne pod sebou. */
.pay-page {
  position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-height, 100dvh); z-index: 95;
  overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; color: var(--ink); font-family: var(--ui, var(--sans));
  opacity: 0; transition: opacity .22s ease;
}
.pay-page.show { opacity: 1; }
.pay-in { display: flex; min-height: 100%; }
.pay-sum { flex: 1 1 50%; box-sizing: border-box; background: #F3F3F1; padding: 56px 64px 48px max(48px, calc(50% - 440px)); }
.pay-sum > * { max-width: 400px; margin-left: auto; }
.pay-form { flex: 1 1 50%; box-sizing: border-box; padding: 56px max(48px, calc(50% - 440px)) 48px 64px; }
.pay-form > * { max-width: 400px; }
.pay-head { display: flex; align-items: center; gap: 10px; }
.pay-back {
  flex: none; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: none; color: #8c8e92;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pay-back .ic { width: 20px; height: 20px; }
.pay-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: #333; }
.pay-ball { width: 28px; height: 28px; }
.pay-t1 { margin-top: 40px; font-size: 17px; line-height: 22px; color: #6b6b6b; }
.pay-t2 { margin-top: 4px; font-size: 17px; line-height: 22px; font-weight: 600; color: #1a1a18; overflow-wrap: anywhere; }
.pay-big { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.pay-big b { font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -.5px; }
.pay-big span { margin-top: 7px; max-width: 70px; font-size: 13px; line-height: 16px; color: #6b6b6b; }
.pay-amount { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pay-step {
  flex: none; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: #E7E6E1; color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pay-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pay-step:disabled { opacity: .35; cursor: default; }
.pay-amount-in {
  width: 84px; height: 36px; box-sizing: border-box; padding: 0 10px; border: 1px solid #DEDDD8; border-radius: 10px; background: #fff;
  font: inherit; font-size: 16px; text-align: center; color: var(--ink); outline: none;
}
.pay-amount-in:focus { border-color: #83A9E4; }
.pay-min { font-size: 13px; color: #6b6b6b; }
.pay-rows { margin-top: 30px; border-top: 1px solid #DEDDD8; }
.pay-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #E7E6E1; font-size: 15px; }
.pay-k { min-width: 0; }
.pay-s { display: block; margin-top: 2px; font-size: 13px; line-height: 17px; color: #6b6b6b; }
.pay-v { flex: none; text-align: right; }
.pay-row.pay-total { font-weight: 600; border-bottom: none; }
.pay-note { margin-top: 6px; font-size: 12.5px; line-height: 17px; color: #8a8a86; }
.pay-express:empty { display: none; }
.pay-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 4px; font-size: 13px; color: #8a8a86; text-transform: uppercase; }
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: #E7E6E1; }
.pay-or[hidden] { display: none; }
.pay-el { margin-top: 18px; }
.pay-el:empty { display: none; }
.pay-submit {
  display: block; width: 100%; height: 48px; margin-top: 24px; border: none; border-radius: 24px; background: #1a1a18; color: #fff;
  font: inherit; font-size: 16.5px; font-weight: 600; cursor: pointer;
}
.pay-submit:disabled { opacity: .4; cursor: default; }
.pay-submit.busy { opacity: .6; }
.pay-msg { margin-top: 12px; font-size: 14px; line-height: 19px; color: #C2410C; }
.pay-msg:empty { display: none; }
.pay-by { margin-top: 18px; font-size: 12.5px; color: #8a8a86; text-align: center; }
@media (min-width: 761px) {
  .pay-submit { height: 44px; border-radius: 10px; }  /* hranaté na webe a v Mac */
}
@media (max-width: 760px) {
  .pay-in { flex-direction: column; }
  .pay-sum { flex: none; padding: 16px 20px 22px; }
  .pay-sum > *, .pay-form > * { max-width: none; margin-left: 0; }
  .pay-form { flex: none; padding: 18px 20px max(28px, env(safe-area-inset-bottom)); }
  .pay-t1 { margin-top: 18px; }
  .pay-big b { font-size: 34px; line-height: 40px; }
  .pay-rows { margin-top: 18px; }
}

/* Hromadné mazanie v Posledných na mobile (Owner 20.10.2026): ťuknutie na „Posledné“ otvorí bublinu „Vyberte relácie“
   v najväčšej výške — vybraný riadok má vpravo oranžovú fajku, dole štandardné čierne „Vymazať (n)“; potvrdenie
   zospodu len Vymazať / Zrušiť (oranžové tlačidlá v aplikácii nie sú) */
@media (max-width: 760px) {
  .modal.pick-ms .pick-ms-row .ms-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modal.pick-ms .pick-ms-row { min-height: 48px; }
  .pick-check[hidden] { display: none; }
  .modal.pick-ms .ms-page { flex: 1 1 auto; min-height: 0; }
  .modal.pick-ms .ms-scroller { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .modal.pick-ms .ms-foot { margin-top: auto; padding-top: 12px; }
  .pick-ms-del {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border: none;
    border-radius: 22px; background: #1a1a18; color: #fff; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pick-ms-del:disabled { opacity: .4; cursor: default; }  /* ako ostatné čierne tlačidlá (gift-share) */
  .pick-ms-del .ic { width: 19px; height: 19px; }
}

/* Nahlásenie odpovede (Owner 20.10.2026, Apple 1.2): dôvody na karte, poznámka a štandardné čierne „Odoslať“ */
.report-page { display: flex; flex-direction: column; gap: 14px; }
.report-page .ms-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.report-page .ms-name { flex: 1; min-width: 0; }
.report-page .ms-check { flex: none; width: 20px; height: 20px; }
.report-page .ms-check[hidden] { display: none; }
.report-note {
  width: 100%; box-sizing: border-box; min-height: 96px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 22px; resize: none; outline: none;
}
.report-note:focus { border-color: #B9B8B2; }
.report-send {
  height: 44px; border: none; border-radius: 22px; background: #1a1a18; color: #fff; font: inherit; font-size: 15.5px;
  font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.report-send:disabled { opacity: .4; cursor: default; }

/* Súhlas so zdieľaním s AI (Owner 20.10.2026, Apple 5.1.2(i)) — aplikácia pre iPhone, bublina zospodu bez zatvorenia */
.consent-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(10, 10, 8, .35); opacity: 0; transition: opacity .25s; }
.consent-scrim.show { opacity: 1; }
.consent-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 301; display: flex; flex-direction: column; align-items: stretch; gap: 12px; box-sizing: border-box;
  padding: 0 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 34px 34px 0 0; background: #F9F9F7;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.32, .72, 0, 1); font-family: var(--ui, var(--sans));
}
.consent-sheet.show { transform: none; }
.consent-grip { flex: none; align-self: center; width: 36px; height: 5px; border-radius: 3px; background: #CFCFCB; margin: 10px 0 2px; }
.consent-head { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(20, 20, 15, .08); }
.consent-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 12px 0 8px; -webkit-overflow-scrolling: touch; }
.consent-flow { display: flex; align-items: flex-start; justify-content: center; padding: 14px 4px 10px; }
.consent-node { flex: none; width: 86px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.consent-node-ic { width: 46px; height: 46px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid #1a1a18; display: flex; align-items: center; justify-content: center; color: #1a1a18; background: #fff; }
.consent-node-ic .ic { width: 22px; height: 22px; }
.consent-node.mine .consent-node-ic { border-color: #2F7FE0; color: #2F7FE0; }
.consent-node-label { font-size: 12px; line-height: 15px; text-align: center; color: var(--ink); }
.consent-wire { flex: 1 1 auto; min-width: 16px; height: 1.5px; margin-top: 22px; background: #1a1a18; position: relative; }
.consent-wire::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid #1a1a18; border-right: 0; }
.consent-providers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px; border-radius: 16px; background: #FFFFFF; }
.consent-provider { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; line-height: 16px; color: var(--ink); }
.consent-provider span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consent-logo { flex: none; width: 18px; height: 18px; object-fit: contain; }
.consent-ball { align-self: center; width: 56px; height: 56px; margin: 4px 0 0; animation: login-mark-pulse 2.6s ease-in-out infinite; }
.consent-title { margin: 0; font-family: Lora, Georgia, serif; font-size: 24px; line-height: 30px; font-weight: 500; text-align: center; color: var(--ink); }
.consent-body { margin: 0; font-size: 16px; line-height: 23px; text-align: center; color: #6B6A66; }
.consent-link { align-self: center; font-size: 16px; color: #D95408; text-decoration: none; margin-bottom: 8px; }
/* rozmer ako tlačidlá v okne potvrdenia (.sd2-btn) — flex: none, inak ich pevná výška okna stlačí (Owner 20.10.2026) */
.consent-agree, .consent-out {
  flex: none; height: 44px; border: none; border-radius: 22px; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.consent-agree { background: #1a1a18; color: #fff; }
.consent-out { background: #EDECE8; color: var(--ink); }
.consent-agree:disabled, .consent-out:disabled { opacity: .5; }
/* hromadné mazanie na počítači — Obrázky, Video, Kód (Owner 20.10.2026): kôš v hornej lište, potom Zrušiť a Vymazať (n);
   riadky ako doteraz, vpravo oranžová fajka ako v mobile */
@media (min-width: 761px) {
  .plp-cancel {
    flex: none; height: 32px; padding: 0 14px; border: none; border-radius: 999px; background: #EDECE8; color: var(--ink);
    font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  }
  .plp-del:disabled { opacity: .4; cursor: default; }
  .pp-srow.pick-row .pp-session-desk { cursor: pointer; }
  .pp-srow.pick-row:hover .pp-session-date { visibility: visible; }
  .plp-check { flex: none; width: 18px; height: 18px; margin-left: 16px; visibility: hidden; }
  .pp-srow.pick-row.picked .plp-check { visibility: visible; }
}
/* jednotné tlačidlá v celej aplikácii (Owner 20.10.2026, IMG_0478): rozmer ako tlačidlá v okne potvrdenia (.sd2-btn) —
   mobil 44 / zaoblenie 22 / písmo 15,5 tučné (pravidlá vyššie), počítač 36 / zaoblenie 8 / písmo 14,5 */
@media (min-width: 761px) {
  .gift-share, .report-send, .upgrade-cta, .newproj-go, .modal.desk-sheet .credit-a .credit-topup.credit-topup-wide {
    height: 36px; border-radius: 8px; font-size: 14.5px;
  }
}