@charset "UTF-8";
/* Рядом: интерфейс-мессенджер. Вся палитра — в токенах ниже: светлая тема здесь, тёмная — следом. */
:root{
  color-scheme:light;
  --bg:#fbf8f3;          /* лист переписки — самое светлое место */
  --side:#f3ede4;        /* боковая панель: чуть темнее листа, чтобы отойти на второй план */
  --side-hover:#ebe3d7;
  --surface:#fffefc;     /* карточки, поле ввода, окна */
  --surface-2:#f0e7da;   /* нажатые кнопки, выбранное */
  --hover:#f6f0e7;
  --line:#e8dfd2;
  --line-strong:#d6c8b6;
  --ink:#26201b;         /* основной текст */
  --ink-2:#6b594b;       /* второстепенный текст, контраст не ниже 5:1 */
  --accent:#b4552b;      /* акцент как цвет текста и значков */
  --accent-hover:#96431f;
  --accent-fill:#b4552b; /* акцент как заливка под белым текстом */
  --accent-fill-hover:#96431f;
  --on-accent:#fff;
  --accent-soft:#f8e5d7;
  --user:#f4e1d0;        /* ваши сообщения */
  --danger:#a33d1f;
  --danger-fill:#a33d1f;
  --danger-soft:#f6dcd2;
  --danger-line:#e9b9a6;
  --web:#e9f1f7;         /* всё, что пришло из интернета */
  --web-ink:#2c5a75;
  --web-line:#cddfea;
  --focus:#d98c4a;
  --field:#fff;          /* поля ввода */
  --chip:#efe6d9;        /* плашка дня, счётчики */
  --code:#f4ece1;
  --placeholder:#8a7461;
  --disabled:#ece3d8;
  --disabled-ink:#8d7765;
  --warn-bg:#fff1e9;--warn-line:#ebcfc1;--warn-ink:#93401f;
  --ok-bg:#eef0df;--ok-line:#d3d5b4;--ok-ink:#4f5629;--ok-dot:#6f8a3c;
  --wait-bg:#f1e4ce;--wait-ink:#7a5524;--wait-dot:#c98747;
  --toast:#3a2e25;--toast-ink:#fbf3ea;--toast-button:#fbe3d1;--toast-button-ink:#7a3416;
  --chart:#dfa57f;
  --dots:#c4ab93;
  --shadow:59 36 18;     /* цвет теней, r g b */
  --backdrop:#3b281a66;
  /* Мягкие цвета значков у примеров на первом экране. */
  --tint-rose:#fbe3e0;--tint-rose-ink:#b0483f;
  --tint-amber:#fbecc9;--tint-amber-ink:#8f6212;
  --tint-blue:#e3eef6;--tint-blue-ink:#2c5a75;
  --tint-green:#e6eeda;--tint-green-ink:#4d6a2a;
  --serif:Charter,"Noto Serif",Georgia,"Times New Roman",serif;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}
/* Тёмная тема: сама — по настройке устройства, вручную — data-theme (переключатель в окне аккаунта, ui.js).
   Два одинаковых списка: один для «как на устройстве», другой для ручного выбора. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --bg:#1e1a17;--side:#171411;--side-hover:#231e1a;--surface:#28231f;--surface-2:#372f29;--hover:#302a25;
    --line:#3a322b;--line-strong:#54483d;--ink:#f1e9df;--ink-2:#b9a999;
    --accent:#ee9a6f;--accent-hover:#f6b592;--accent-fill:#b4552b;--accent-fill-hover:#c9643a;--accent-soft:#44291b;
    --user:#48301f;--danger:#f29a80;--danger-fill:#a33d1f;--danger-soft:#44231a;--danger-line:#6a3526;
    --web:#1f2c35;--web-ink:#a3cce4;--web-line:#30475a;
    --field:#191512;--chip:#302a25;--code:#302a25;--placeholder:#928272;--disabled:#342d27;--disabled-ink:#8f8072;
    --warn-bg:#3b2219;--warn-line:#5a3324;--warn-ink:#f3a88d;
    --ok-bg:#262b1a;--ok-line:#3b4227;--ok-ink:#c3cc99;--ok-dot:#93b058;
    --wait-bg:#3a2f1c;--wait-ink:#e0c08a;--wait-dot:#d59a5c;
    --toast:#f1e9df;--toast-ink:#26201b;--toast-button:#b4552b;--toast-button-ink:#fff;
    --chart:#a8603c;--dots:#7d6c5d;--shadow:0 0 0;--backdrop:#000000a6;
    --tint-rose:#44262a;--tint-rose-ink:#f0a39b;--tint-amber:#40321a;--tint-amber-ink:#e5c07a;
    --tint-blue:#1f2c35;--tint-blue-ink:#a3cce4;--tint-green:#28301d;--tint-green-ink:#b4cc8c;
  }
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:#1e1a17;--side:#171411;--side-hover:#231e1a;--surface:#28231f;--surface-2:#372f29;--hover:#302a25;
  --line:#3a322b;--line-strong:#54483d;--ink:#f1e9df;--ink-2:#b9a999;
  --accent:#ee9a6f;--accent-hover:#f6b592;--accent-fill:#b4552b;--accent-fill-hover:#c9643a;--accent-soft:#44291b;
  --user:#48301f;--danger:#f29a80;--danger-fill:#a33d1f;--danger-soft:#44231a;--danger-line:#6a3526;
  --web:#1f2c35;--web-ink:#a3cce4;--web-line:#30475a;
  --field:#191512;--chip:#302a25;--code:#302a25;--placeholder:#928272;--disabled:#342d27;--disabled-ink:#8f8072;
  --warn-bg:#3b2219;--warn-line:#5a3324;--warn-ink:#f3a88d;
  --ok-bg:#262b1a;--ok-line:#3b4227;--ok-ink:#c3cc99;--ok-dot:#93b058;
  --wait-bg:#3a2f1c;--wait-ink:#e0c08a;--wait-dot:#d59a5c;
  --toast:#f1e9df;--toast-ink:#26201b;--toast-button:#b4552b;--toast-button-ink:#fff;
  --chart:#a8603c;--dots:#7d6c5d;--shadow:0 0 0;--backdrop:#000000a6;
  --tint-rose:#44262a;--tint-rose-ink:#f0a39b;--tint-amber:#40321a;--tint-amber-ink:#e5c07a;
  --tint-blue:#1f2c35;--tint-blue-ink:#a3cce4;--tint-green:#28301d;--tint-green-ink:#b4cc8c;
}
html.large-text{font-size:118%}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
button,a,.search,.composer,.quick-ask{transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
svg{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
[hidden]{display:none!important}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;left:20px;top:-60px;z-index:50;padding:12px;background:var(--surface);color:var(--accent-hover)}
.skip-link:focus{top:12px}

/* ---------- Каркас ---------- */
.app-shell{display:grid;grid-template-columns:20.5rem minmax(0,1fr);height:100dvh}
.app-shell.collapsed{grid-template-columns:minmax(0,1fr)}
.app-shell.collapsed .list-pane{display:none}

/* ---------- Список диалогов ---------- */
.list-pane{display:flex;flex-direction:column;min-height:0;background:var(--side);padding:1.125rem .875rem .75rem}
.brand{display:flex;align-items:center;gap:.5rem;width:max-content;padding:0 .375rem;color:var(--ink);text-decoration:none;font-size:1.5rem;font-weight:750;letter-spacing:-.05em}
.brand svg{width:1.75rem;height:1.75rem;color:var(--accent);stroke-width:2.2}
.brand i{font-style:normal;color:var(--accent)}
.list-actions{display:flex;flex-direction:column;gap:.375rem;margin-top:1.125rem}
.new-chat{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;border:0;border-radius:14px;background:var(--accent-fill);color:var(--on-accent);font-size:1.0625rem;font-weight:600;box-shadow:0 1px 2px rgb(var(--shadow)/.18),0 6px 16px -6px rgb(180 85 43/.45)}
.new-chat:hover{background:var(--accent-fill-hover)}
.new-chat:active,.send-button:active:not(:disabled),.primary-button:active{transform:scale(.985)}
.search{display:flex;align-items:center;gap:.5rem;margin:.75rem 0 .5rem;min-height:2.75rem;padding:0 .875rem;border:1px solid transparent;border-radius:12px;background:var(--surface);color:var(--ink-2);box-shadow:0 1px 2px rgb(var(--shadow)/.06)}
.search:focus-within{border-color:var(--accent)}
.search svg{width:1.25rem;height:1.25rem}
.search input{flex:1;min-width:0;border:0;outline:0!important;background:none;font-size:1rem}
.search input::placeholder{color:var(--ink-2)}
.list-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:.25rem .125rem .125rem .75rem;font-size:.8125rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.link-button{display:flex;align-items:center;gap:.375rem;min-height:2.75rem;padding:0 .625rem;border:0;border-radius:10px;background:none;color:var(--accent);font-size:.9375rem;font-weight:600;letter-spacing:0;text-transform:none}
.link-button:hover{background:var(--side-hover)}
.link-button svg{width:1.125rem;height:1.125rem}
.list{flex:1;min-height:0;overflow:auto;margin:0 -.375rem;padding:0 .375rem .5rem;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.history-empty{margin:1rem .75rem;font-size:1rem;line-height:1.5;color:var(--ink-2)}
/* An empty list gives its room to the note, so the note stays right under «Мои диалоги». */
.list:empty{flex:none}
.list:empty+.history-empty{flex:1}

.item-row{position:relative;margin-bottom:2px}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.125rem .75rem;width:100%;padding:.625rem .75rem;border:0;border-radius:12px;background:none;text-align:left}
.item:hover,.item-row:hover .item:not(.active){background:var(--side-hover)}
/* The open conversation is a white card lifted off the panel. */
.item.active{background:var(--surface);box-shadow:0 1px 2px rgb(var(--shadow)/.1),0 4px 12px -6px rgb(var(--shadow)/.18)}
.item-title{font-size:1.0625rem;font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.item-date{font-size:.8125rem;color:var(--ink-2);padding-top:.1875rem;white-space:nowrap}
.item-preview{grid-column:1/-1;font-size:.9375rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-preview:empty{display:none}
.item-menu{position:absolute;top:.375rem;right:.25rem;opacity:0;background:var(--side-hover)}
.item-row.active-row .item-menu{background:var(--surface)}
.item-row:hover .item-menu,.item-menu:focus-visible,.item-menu[aria-expanded=true]{opacity:1}
.item-row:hover .item-date,.item-row:has(.item-menu[aria-expanded=true]) .item-date,.item-row:has(.item-menu:focus-visible) .item-date{visibility:hidden}

.folder-row{display:flex;align-items:center;margin-top:.25rem;border-radius:12px}
.folder{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 .5rem;border:0;border-radius:12px;background:none;font-size:1rem;font-weight:650;text-align:left}
.folder:hover{background:var(--side-hover)}
.folder .chevron{width:1.125rem;height:1.125rem;color:var(--ink-2);transition:transform .15s}
.folder[aria-expanded=false] .chevron{transform:rotate(-90deg)}
.folder .folder-icon{width:1.25rem;height:1.25rem;color:var(--accent)}
.folder-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder-count{font-size:.8125rem;font-weight:600;color:var(--ink-2);background:var(--side-hover);border-radius:999px;padding:.0625rem .5rem}
.folder-body .item{padding-left:2.25rem}
.folder-empty{margin:0 0 .25rem;padding:.5rem .75rem .5rem 2.25rem;font-size:.9375rem;color:var(--ink-2)}
.loose-heading{margin:.75rem 0 .125rem;padding:.375rem .75rem;border-radius:12px;font-size:.8125rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
/* Date groups: the same folding row as a folder, but quieter — small caps, no icon. */
.group-row{margin-top:.375rem}
.group-row .folder{min-height:2.5rem;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.group-row .folder-count{letter-spacing:0}
.drop-target{background:var(--accent-soft)!important;outline:2px dashed var(--accent);outline-offset:-2px}

.list-bottom{margin-top:.25rem}
.admin-link{display:flex;align-items:center;gap:.625rem;min-height:3rem;margin:-.25rem 0 1rem;padding:0 .875rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--accent-hover);font-size:1rem;font-weight:600;text-decoration:none;overflow-wrap:break-word;hyphens:auto}
.admin-link:hover{background:var(--hover)}
.admin-link svg{width:1.25rem;height:1.25rem}
.admin-link span{flex:1;min-width:0}
.admin-link-arrow{transform:rotate(180deg);color:var(--ink-2)}
.profile-button{display:flex;align-items:center;gap:.75rem;width:100%;padding:.5rem;border:0;border-radius:14px;background:none;text-align:left}
.profile-button:hover{background:var(--side-hover)}
.avatar{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--accent-fill);color:var(--on-accent);font-weight:700;font-size:1.0625rem;flex-shrink:0}
.profile-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.profile-copy strong{font-size:1rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-copy small{font-size:.875rem;color:var(--ink-2);overflow-wrap:break-word;hyphens:auto}

/* ---------- Переписка ---------- */
.chat-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.chat-head{display:flex;align-items:center;gap:.5rem;min-height:4rem;padding:.5rem 1.25rem;border-bottom:1px solid var(--line)}
.back-button{display:none;align-items:center;gap:.125rem;min-height:2.75rem;padding:0 .625rem 0 .25rem;border:0;border-radius:12px;background:none;color:var(--accent);font-size:1.0625rem;font-weight:600;flex-shrink:0}
.back-button svg{width:1.5rem;height:1.5rem;stroke-width:2.2}
.title-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding-left:.25rem}
.title-wrap h1{margin:0;font-size:1.125rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb{display:flex;align-items:center;gap:.25rem;min-width:0;font-size:.875rem;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.crumb svg{width:.9375rem;height:.9375rem}
.icon-button{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex-shrink:0;border:0;border-radius:12px;background:none;color:var(--ink-2)}
.icon-button:hover{background:var(--surface-2);color:var(--ink)}
.icon-button.small{width:2.25rem;height:2.25rem;border-radius:10px}
.icon-button.small svg{width:1.125rem;height:1.125rem}
#menu-button[aria-expanded=false]{background:var(--accent-soft);color:var(--accent)}
.text-size{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 .875rem;flex-shrink:0;border:0;border-radius:12px;background:none;color:var(--ink-2);font-size:.9375rem;font-weight:500}
.text-size:hover,.back-button:hover{background:var(--surface-2);color:var(--ink)}
.text-size b{font-family:var(--serif);font-size:1.25rem;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.text-size[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-hover)}
.text-size[aria-pressed=true] b{color:inherit}

.scroll{flex:1;min-height:0;overflow:auto;padding:1.5rem 1.5rem 2rem;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.thread,.messages,.welcome{display:flex;flex-direction:column;gap:.875rem}
.thread{max-width:46rem;margin:0 auto}
.day{align-self:center;margin:.5rem 0;padding:.25rem .875rem;border-radius:999px;background:var(--chip);color:var(--ink-2);font-size:.875rem;font-weight:500}
.msg{font-size:1.1875rem;line-height:1.6;overflow-wrap:anywhere;animation:arrive .25s ease-out}
/* Your words are a bubble on the right; the answer is plain text on the page, like a letter. */
.msg.user{align-self:flex-end;max-width:80%;margin-top:.5rem;padding:.75rem 1.125rem .5rem;border-radius:22px 22px 8px 22px;background:var(--user)}
.msg.user .msg-body{white-space:pre-wrap}
.msg.bot{align-self:stretch;padding:.25rem 0 0}
.msg p{margin:0 0 .7em}
.who{display:flex;align-items:center;gap:.4rem;margin-bottom:.375rem;font-size:.9375rem;font-weight:650;color:var(--accent)}
/* A small sun before «Рядом»; an answer from the internet shows its globe instead. */
.msg.bot .who::before{content:"";width:1.125rem;height:1.125rem;background:currentColor;-webkit-mask:var(--sun) center/contain no-repeat;mask:var(--sun) center/contain no-repeat;
  --sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='10'/%3E%3Cpath d='M24 2v6M24 40v6M2 24h6M40 24h6M8.5 8.5l4.3 4.3m22.4 22.4 4.3 4.3M8.5 39.5l4.3-4.3m22.4-22.4 4.3-4.3'/%3E%3C/svg%3E")}
.msg.bot.web .who::before{display:none}
.msg.bot.web .who{width:max-content;max-width:100%;padding:.125rem .625rem .125rem .5rem;border-radius:999px;background:var(--web);color:var(--web-ink)}
.who svg{width:1.0625rem;height:1.0625rem}
.msg.web .sources a{background:var(--web);color:var(--web-ink)}
.time{display:block;margin-top:.125rem;text-align:right;font-size:.8125rem;color:var(--ink-2)}
/* The day plate and the time of your own message already say when; the answer stays clean. */
.msg.bot .time{display:none}
.typing{display:flex;align-items:center;gap:.3rem;padding:.5rem 0 .375rem}
.typing>span:not(.typing-text){width:.5rem;height:.5rem;border-radius:50%;background:var(--dots);animation:dot 1.2s infinite}
.typing-text{margin-left:.375rem;font-size:1rem;color:var(--ink-2)}
.sources{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .5rem;margin-top:.75rem;font-size:.9375rem}
.sources-label{color:var(--ink-2)}
.sources a{padding:.1875rem .75rem;border-radius:999px;background:var(--chip);color:var(--accent-hover);text-decoration:none}
.sources a:hover{text-decoration:underline}
.typing>span:nth-child(2){animation-delay:.15s}
.typing>span:nth-child(3){animation-delay:.3s}
.msg-actions{align-self:flex-start;display:flex;align-items:center;gap:.5rem;margin:-.5rem 0 .25rem -.625rem}
/* A quiet icon under the answer: 44 px to tap, no frame; after copying the word «Скопировано» shows next to it. */
.action{display:flex;align-items:center;justify-content:center;gap:.375rem;min-width:2.75rem;min-height:2.75rem;padding:0 .625rem;border:0;border-radius:12px;background:none;color:var(--ink-2);font-size:.9375rem;font-weight:500}
.action:hover{background:var(--surface-2);color:var(--ink)}
.action.done{color:var(--accent)}
.action svg{width:1.25rem;height:1.25rem;stroke-width:1.9}
/* Turned back by the rules or declined by the model: dimmed, with a note, and never sent to the model again. */
.msg.user.turned-back{background:none;border:1px dashed var(--line-strong);color:var(--ink-2)}
.msg.bot.turned-back{color:var(--ink-2)}
.msg-note{display:block;margin-top:.375rem;font-size:.8125rem;color:var(--ink-2)}
.quick-q.turned-back span{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.message-status{font-size:.9375rem;color:var(--ink-2)}
.msg-photo{display:block;width:10rem;height:10rem;margin:.125rem 0 .5rem auto;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--surface-2);cursor:zoom-in}
.msg-photo img{display:block;width:100%;height:100%;object-fit:cover}
.msg-photo-missing{display:grid;place-items:center;height:100%;padding:.5rem;font-size:.875rem;color:var(--ink-2)}
/* The whole photo on a dark screen; a tap anywhere closes it. */
.image-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:#120c08eb}
.image-dialog[open]{display:grid;place-items:center}
.image-dialog::backdrop{background:#120c08eb}
.image-dialog img{max-width:100%;max-height:100dvh;object-fit:contain}
.image-dialog .dialog-close{top:max(.75rem,env(safe-area-inset-top));border-radius:50%;background:#0000008c;color:#fff}
.recovery-notice{align-self:center;margin:.5rem 0;padding:.75rem 1rem;border-radius:12px;background:var(--surface-2);font-size:1rem;color:var(--ink-2)}

/* Ответы в разметке Markdown */
.msg-body>:last-child{margin-bottom:0}
.msg-body ul,.msg-body ol{margin:0 0 .7em;padding-left:1.4em}
.msg-body li{margin:.25em 0}
.msg-body li::marker{color:var(--accent)}
.msg-body li>p{margin:0}
.msg-body strong{font-weight:650}
.msg-body h1,.msg-body h2,.msg-body h3,.msg-body h4{margin:1.1em 0 .4em;font-size:1em;font-weight:700;line-height:1.35}
.msg-body h1,.msg-body h2{font-size:1.1em}
.msg-body>:first-child{margin-top:0}
.msg-body blockquote{margin:0 0 .7em;padding:.625em 1em;border-left:3px solid var(--accent);border-radius:4px 12px 12px 4px;background:var(--surface);font-family:var(--serif)}
.msg-body blockquote>:last-child{margin-bottom:0}
.msg-body a{color:var(--accent-hover);text-underline-offset:3px}
.msg-body code{padding:.1em .35em;border-radius:6px;background:var(--code);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em}
.msg-body pre{margin:0 0 .7em;padding:.875em 1em;border-radius:14px;background:var(--code);overflow-x:auto;white-space:pre}
.msg-body pre code{padding:0;background:none;font-size:.85em}
.msg-body hr{margin:1em 0;border:0;border-top:1px solid var(--line)}
/* Cells keep whole words (the bubble's «anywhere» would squeeze them to one letter); the table scrolls sideways. */
.msg-body table{display:block;width:max-content;max-width:100%;margin:0 0 .7em;overflow-x:auto;overflow-wrap:normal;border-collapse:collapse;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:.92em}
.msg-body th,.msg-body td{padding:.5em .8em;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.msg-body tr:last-child td{border-bottom:0}
.msg-body th{background:var(--hover);font-weight:650}

/* Начало диалога: приветствие по времени суток и четыре примера. */
.welcome{align-items:center;gap:1.75rem;padding:clamp(1rem,11vh,6.5rem) 0 1rem;text-align:center}
.hero{display:flex;flex-direction:column;align-items:center;max-width:34rem}
.hero-sun{width:3.25rem;height:3.25rem;margin-bottom:1rem;color:var(--accent);stroke-width:2;animation:sun 60s linear infinite}
.hero h2{margin:0 0 .625rem;font-family:var(--serif);font-size:clamp(1.75rem,1.2rem + 2vw,2.375rem);font-weight:600;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere}
.hero p{margin:0;font-size:1.125rem;line-height:1.55;color:var(--ink-2)}
/* Примеры — лёгкие «таблетки» в ряд, а не карточки: одна строка текста и цветной значок. */
.suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem;width:min(100%,38rem)}
.suggestion{display:flex;align-items:center;gap:.5rem;min-height:3rem;padding:0 1.125rem 0 .875rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:1.0625rem;font-weight:500;text-align:left}
.suggestion:hover{border-color:var(--line-strong);background:var(--hover)}
.suggestion-icon{display:grid;place-items:center;color:var(--tint-rose-ink)}
.suggestion:nth-child(2) .suggestion-icon{color:var(--tint-blue-ink)}
.suggestion:nth-child(3) .suggestion-icon{color:var(--tint-green-ink)}
.suggestion:nth-child(4) .suggestion-icon{color:var(--tint-amber-ink)}
.suggestion-icon svg{width:1.375rem;height:1.375rem}

/* Поле ввода */
/* «Интернет» switch: on — the model may search, off — it certainly will not. */
.web-toggle{display:flex;align-items:center;gap:.375rem;min-height:3rem;padding:0 .875rem;flex-shrink:0;border:1px solid var(--web-line);border-radius:999px;background:var(--web);color:var(--web-ink);font-size:1rem;font-weight:600}
.web-toggle svg{width:1.25rem;height:1.25rem}
.web-toggle[aria-pressed=false]{border-color:var(--line);background:var(--surface-2);color:var(--ink-2)}
.composer:has(.web-toggle:not([hidden])),.composer:has(.attach-button:not([hidden])){padding-left:.5rem}
/* Фото к вопросу: a paper clip in the field; the chosen photo sits above the words with a cross to drop it. */
.attach-button{display:grid;place-items:center;width:3rem;height:3rem;flex-shrink:0;border:0;border-radius:50%;background:none;color:var(--ink-2)}
.attach-button:hover{background:var(--hover);color:var(--ink)}
.attach-button:disabled{opacity:.5}
.attach-button svg{width:1.5rem;height:1.5rem}
.composer:has(.attachment:not([hidden])){flex-wrap:wrap}
.attachment{flex:1 0 100%;display:flex;align-items:center;gap:.875rem;padding:.5rem .25rem .25rem .5rem}
.attachment-frame{position:relative;flex-shrink:0}
.attachment-thumb{display:block;width:4.5rem;height:4.5rem;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--hover);cursor:zoom-in}
.attachment-thumb img{display:block;width:100%;height:100%;object-fit:cover}
/* A small dark cross on the corner; the invisible margin around it makes a 44 px target. */
.attachment-remove{position:absolute;top:-.625rem;right:-.625rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;padding:0;border:2px solid var(--surface);border-radius:50%;background:var(--toast);color:var(--toast-ink)}
.attachment-remove::after{content:"";position:absolute;inset:-.5rem}
.attachment-remove svg{width:.875rem;height:.875rem;stroke-width:2.6}
.attachment-note{font-size:.9375rem;line-height:1.35;color:var(--ink-2)}
/* The thread fades out above the field instead of being cut by a line. */
.composer-area{position:relative;flex-shrink:0;padding:.25rem 1.5rem 1rem}
.composer-area::before{content:"";position:absolute;left:0;right:.75rem;bottom:100%;height:1.5rem;background:linear-gradient(to top,var(--bg),transparent);pointer-events:none}
.composer-area>*{max-width:46rem;margin-left:auto;margin-right:auto}
.composer{display:flex;align-items:flex-end;gap:.5rem;padding:.5rem .5rem .5rem 1.375rem;border:1px solid var(--line-strong);border-radius:1.75rem;background:var(--surface);box-shadow:0 1px 2px rgb(var(--shadow)/.06),0 12px 32px -12px rgb(var(--shadow)/.22)}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgb(180 85 43/.14),0 12px 32px -12px rgb(var(--shadow)/.22)}
.composer textarea{flex:1;min-width:0;max-height:10rem;padding:.5625rem 0;border:0;outline:0!important;background:none;resize:none;font-size:1.1875rem;line-height:1.5;color:var(--ink);overflow-y:auto;scrollbar-width:thin}
.composer textarea::placeholder{color:var(--placeholder)}
.send-button{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;min-width:3rem;padding:0 1.25rem;border:0;border-radius:999px;background:var(--accent-fill);color:var(--on-accent);font-size:1.0625rem;font-weight:600}
.send-button:hover:not(:disabled){background:var(--accent-fill-hover)}
.send-button:disabled{background:var(--disabled);color:var(--disabled-ink)}
.send-button.stop{background:var(--toast);color:var(--toast-ink)}
.send-button.stop svg{width:1rem;height:1rem;fill:currentColor;stroke:none}
.composer-hint{display:flex;align-items:center;gap:1rem;margin-top:.5rem;padding:0 .75rem;font-size:.8125rem;color:var(--ink-2)}
/* Little height left (a phone with the keyboard open): the field grows to three lines, the demo note gives way. */
@media (max-height:520px){
  .composer textarea{max-height:6.375rem}
  .composer-hint:has(.char-count[hidden]){display:none}
  .welcome{padding-top:.5rem;gap:1rem}
  .hero-sun{display:none}
}
.hint-link{padding:0;border:0;background:none;color:inherit;font-size:inherit;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.hint-link:hover{color:var(--ink)}
.char-count{color:var(--accent-hover);font-weight:600}
.keyboard-hint{margin-left:auto}
/* Быстрый вопрос: a screen of its own in place of the conversation; a card is a question, a short answer, one follow-up. */
.quick-entry{display:flex;align-items:center;gap:.625rem;min-height:3rem;padding:0 .875rem;border:0;border-radius:14px;background:none;color:var(--ink);font-size:1.0625rem;font-weight:600;text-align:left}
.quick-entry svg{color:var(--tint-amber-ink)}
.quick-entry:hover{background:var(--side-hover)}
.quick-entry.active{background:var(--surface);box-shadow:0 1px 2px rgb(var(--shadow)/.1),0 4px 12px -6px rgb(var(--shadow)/.18)}
.quick-entry small{margin-left:auto;min-width:1.5rem;padding:.0625rem .5rem;border-radius:999px;background:var(--tint-amber);color:var(--tint-amber-ink);font-size:.8125rem;font-weight:650;text-align:center}
.app-shell[data-screen=quick] .thread,.app-shell[data-screen=quick] .composer-area{display:none}
.app-shell:not([data-screen=quick]) .quick-view{display:none}
.quick-view{max-width:44rem;margin:0 auto}
.quick-ask{padding:.875rem 1rem .75rem 1.25rem;border:1px solid var(--line-strong);border-radius:1.75rem;background:var(--surface);box-shadow:0 1px 2px rgb(var(--shadow)/.06),0 12px 32px -12px rgb(var(--shadow)/.22)}
.quick-ask:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgb(180 85 43/.14),0 12px 32px -12px rgb(var(--shadow)/.22)}
.quick-ask textarea{display:block;width:100%;min-height:3.25rem;border:0;outline:0;resize:none;background:none;font-size:1.1875rem;line-height:1.5}
.quick-ask textarea::placeholder{color:var(--placeholder)}
.quick-ask-row{display:flex;align-items:center;gap:.75rem;margin-top:.375rem}
.quick-ask-row .send-button{margin-left:auto}
.quick-hint{margin:.75rem 1.25rem 0;font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.quick-view .inline-error{margin:1rem 0 0}
.quick-day{display:flex;align-items:center;gap:.5rem;width:100%;min-height:2.75rem;margin:1.25rem 0 .375rem;padding:0 .5rem;border:0;border-radius:12px;background:none;font-size:.8125rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);text-align:left}
.quick-day:hover{background:var(--surface-2);color:var(--ink)}
.quick-day[aria-expanded=false]{margin-bottom:-.875rem}
.quick-day .chevron{width:1.125rem;height:1.125rem;transition:transform .15s}
.quick-day[aria-expanded=false] .chevron{transform:rotate(-90deg)}
.quick-day small{padding:.0625rem .5rem;border-radius:999px;background:var(--chip);font-size:.8125rem;font-weight:600;letter-spacing:0}
/* A question of an earlier day as one line; a tap opens its card. */
.quick-row{display:flex;align-items:center;gap:.75rem;width:100%;min-height:3.25rem;margin-bottom:.375rem;padding:0 .875rem 0 1.25rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);font-size:1.0625rem;font-weight:500;text-align:left}
.quick-row:hover{border-color:var(--line-strong);background:var(--hover)}
.quick-row span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-row time{font-size:.8125rem;color:var(--ink-2);white-space:nowrap}
.quick-row .chevron{width:1.125rem;height:1.125rem;color:var(--ink-2);transform:rotate(-90deg)}
.quick-fold{margin-left:auto}
.quick-fold svg{transform:rotate(180deg)}
.quick-card{margin-bottom:.875rem;padding:1.125rem 1.25rem .5rem;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 1px 2px rgb(var(--shadow)/.05);overflow-wrap:anywhere}
.quick-card.web{border-color:var(--web-line)}
.quick-q{display:flex;gap:.625rem;align-items:baseline;font-family:var(--serif);font-size:1.25rem;font-weight:600;line-height:1.35}
.quick-q span{flex:1;min-width:0;white-space:pre-wrap}
.quick-q time{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:.8125rem;font-weight:400;color:var(--ink-2);white-space:nowrap}
.quick-q.follow{margin-top:1rem;padding-top:.875rem;border-top:1px dashed var(--line-strong);font-size:1.125rem}
.quick-card.web .quick-q.follow{border-top-color:var(--web-line)}
.quick-q.follow::before{content:"↳";color:var(--ink-2);font-weight:400}
.quick-card .msg-photo{width:7.5rem;height:7.5rem;margin:.5rem 0 .25rem}
.quick-ask .attachment{padding:.25rem 0 .5rem .25rem}
.quick-ask-row .attach-button{margin-left:-.75rem}
.quick-from{display:flex;align-items:center;gap:.3rem;width:max-content;max-width:100%;margin-top:.625rem;padding:.125rem .625rem .125rem .5rem;border-radius:999px;background:var(--web);font-size:.875rem;font-weight:600;color:var(--web-ink)}
.quick-from svg{width:1rem;height:1rem}
.quick-a{margin-top:.5rem;font-size:1.125rem;line-height:1.6}
.quick-card .sources{margin-top:.625rem}
.quick-card.web .sources a{background:var(--web);color:var(--web-ink)}
.quick-status{margin:.5rem 0 0;font-size:.9375rem;color:var(--ink-2)}
.quick-followup{display:flex;gap:.5rem;margin-top:.875rem;padding:.375rem .375rem .375rem 1rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--field)}
.quick-followup:focus-within{border-color:var(--accent)}
.quick-followup input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:1.0625rem}
.quick-followup button{min-height:2.75rem;padding:0 1.125rem;border:0;border-radius:999px;background:var(--accent-fill);color:var(--on-accent);font-weight:600}
.quick-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin:.5rem 0 0 -.5rem}
.text-action{display:flex;align-items:center;gap:.375rem;min-height:2.75rem;padding:0 .875rem;border:0;border-radius:999px;background:none;color:var(--ink-2);font-size:.9375rem;font-weight:600}
.text-action svg{width:1.125rem;height:1.125rem}
.text-action:hover{background:var(--surface-2);color:var(--ink)}
.text-action.accent{color:var(--accent-hover)}
.text-action.accent:hover{background:var(--accent-soft);color:var(--accent-hover)}
/* Past a long pause the model starts afresh: a quiet line between the messages marks the place. */
.context-break{align-self:stretch;display:flex;align-items:center;gap:.75rem;margin:.75rem 0;color:var(--ink-2);font-size:.875rem;text-align:center}
.context-break::before,.context-break::after{content:"";flex:1 1 1.5rem;border-top:1px dashed var(--line-strong)}
.topic-hint{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:.625rem;padding:.625rem .625rem .625rem 1rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink-2);font-size:.9375rem;line-height:1.45}
.topic-hint span{flex:1 1 14rem}
.topic-hint-button{min-height:2.5rem;padding:0 1rem;border:0;border-radius:999px;background:var(--accent-soft);color:var(--accent-hover);font-weight:600}
.topic-hint-button:hover{background:var(--surface-2)}
.inline-error,.offline-notice{margin-bottom:.625rem;padding:.75rem 1rem;border:1px solid var(--warn-line);border-radius:14px;background:var(--warn-bg);color:var(--warn-ink);font-size:1rem;line-height:1.5}

/* ---------- Меню, окна, уведомление ---------- */
/* Many folders make a long menu: it scrolls inside the screen. */
.menu{position:fixed;z-index:30;min-width:16rem;max-width:min(20rem,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;padding:.375rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 6px rgb(var(--shadow)/.08),0 16px 48px -8px rgb(var(--shadow)/.28);animation:pop .12s ease-out}
.menu-label{padding:.5rem .75rem .25rem;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.menu button{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.75rem;padding:0 .75rem;border:0;border-radius:10px;background:none;font-size:1rem;text-align:left}
.menu button:hover,.menu button:focus-visible{background:var(--surface-2)}
.menu button svg{width:1.25rem;height:1.25rem;color:var(--ink-2)}
.menu button .menu-label-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu button .mark{color:var(--accent)}
.menu button[aria-checked=true]{font-weight:650}
.menu .danger,.menu .danger svg{color:var(--danger)}
.menu hr{margin:.375rem .25rem;border:0;border-top:1px solid var(--line)}

.dialog{position:fixed;width:min(28rem,calc(100vw - 32px));padding:1.75rem;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px rgb(var(--shadow)/.3)}
.dialog[open]{animation:pop .16s ease-out}
.compact-dialog{width:min(26rem,calc(100vw - 32px));padding:1.5rem}
.dialog::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dialog h2{margin:0 2rem .5rem 0;font-size:1.375rem;font-weight:650;line-height:1.3}
.dialog p{margin:0 0 1rem;font-size:1rem;line-height:1.55;color:var(--ink-2)}
.dialog input{width:100%;min-height:3rem;padding:0 .875rem;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--field);font-size:1.0625rem}
.dialog input:focus{outline:0;border-color:var(--accent)}
.dialog-close{position:absolute;right:.75rem;top:.75rem}
.dialog-sun{color:var(--accent);margin-bottom:1rem}
.dialog-sun svg{width:2.75rem;height:2.75rem}
.small-copy{font-size:.9375rem!important}
.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem}
.account-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}
/* Оформление: как на устройстве, светлое или тёмное — три кнопки в одной рамке. */
.theme-row{margin-top:1rem}
.theme-row>span{display:block;margin:0 .25rem .375rem;font-size:.9375rem;font-weight:600;color:var(--ink-2)}
.segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem;padding:.25rem;border-radius:14px;background:var(--surface-2)}
.segmented button{min-height:2.75rem;padding:0 .25rem;border:0;border-radius:10px;background:none;color:var(--ink-2);font-size:.9375rem;font-weight:600;overflow-wrap:anywhere}
.segmented button:hover{color:var(--ink)}
.segmented button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgb(var(--shadow)/.18)}
/* Two quiet buttons in one row; with a large font they stack. */
.logout-row{display:flex;flex-wrap:wrap;gap:.5rem}
.logout-row .secondary-button{flex:1 1 7rem;min-height:2.75rem;padding:0 .75rem}
/* The person's own numbers in the account window. */
.account-stats{container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem;padding:.75rem;border-radius:16px;background:var(--hover)}
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(7.5rem,100%),1fr));gap:.5rem}
/* «Всего»: one strip of two cells with a divider. */
.stat-tile{display:flex;flex-direction:column;gap:.125rem;min-width:0;padding:.625rem .75rem;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.stat-tile strong{font-size:1.625rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.stat-tile span{font-size:.9375rem;color:var(--ink);overflow-wrap:break-word;hyphens:auto}
.stat-tile span svg{width:1rem;height:1rem;margin-right:.3rem;vertical-align:-.15em;color:var(--web-ink)}
.stat-tile small{font-size:.8125rem;color:var(--ink-2)}
.stat-tile .meter{margin-top:.375rem}
.stat-tile.wide{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:.5rem}
.stat-tile.wide strong{font-size:1.25rem}
.dialog .stat-info{display:flex;align-items:flex-start;gap:.5rem;margin:0 .25rem;font-size:.9375rem;line-height:1.4;color:var(--ink-2)}
.stat-info svg{width:1.125rem;height:1.125rem;margin-top:.1em;flex-shrink:0}
.stat-info span{min-width:0;overflow-wrap:break-word}
.meter{height:.375rem;border-radius:999px;background:var(--line);overflow:hidden}
.meter span{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.meter.low span{background:var(--wait-dot)}
.meter.full span{background:var(--danger)}
.dialog .stat-note{margin:0 .25rem;font-size:.8125rem;color:var(--ink-2)}
.with-icon{display:flex;align-items:center;justify-content:center;gap:.5rem}
.with-icon svg{width:1.25rem;height:1.25rem}
.dialog .install-hint{margin:-.25rem 0 .5rem;padding:.75rem 1rem;border-radius:12px;background:var(--accent-soft);color:var(--ink);font-size:1rem;line-height:1.5}
.primary-button,.secondary-button{min-height:3rem;padding:0 1.25rem;border-radius:14px;font-size:1rem;font-weight:600}
.primary-button{border:1px solid var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}
.primary-button:hover{background:var(--accent-fill-hover)}
.primary-button:disabled{opacity:.6}
.primary-button.danger{border-color:var(--danger-fill);background:var(--danger-fill)}
.secondary-button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
.secondary-button:hover{background:var(--surface-2)}
.dialog>.primary-button{margin-top:.5rem}

/* Centred by margins, not by left:50%, which would cap its width at half the screen. */
.toast{position:fixed;left:12px;right:12px;bottom:8.5rem;z-index:40;width:fit-content;margin-inline:auto;display:flex;align-items:center;gap:1rem;min-height:3.25rem;padding:.625rem 1.25rem;border-radius:16px;background:var(--toast);color:var(--toast-ink);font-size:1rem;box-shadow:0 8px 30px rgb(var(--shadow)/.3);animation:arrive .2s ease-out}
.toast.with-action{padding-right:.625rem}
.toast button{min-height:2.5rem;padding:0 1rem;flex-shrink:0;border:0;border-radius:10px;background:var(--toast-button);color:var(--toast-button-ink);font-size:1rem;font-weight:700}
.toast button:hover{filter:brightness(1.06)}

/* ---------- Вход ---------- */
.auth-screen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,440px);align-items:center;gap:4rem;max-width:1100px;min-height:100dvh;margin:auto;padding:3rem}
.auth-brand{font-size:2.25rem;margin-bottom:2.5rem}
.auth-brand svg{width:2.75rem;height:2.75rem}
.auth-intro h1{margin:0 0 1.25rem;font-family:var(--serif);font-size:2.5rem;line-height:1.18;font-weight:600;letter-spacing:-.015em}
.auth-intro p{margin:0;max-width:30rem;font-size:1.1875rem;line-height:1.6;color:var(--ink-2)}
.auth-card{padding:2rem;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:0 2px 4px rgb(var(--shadow)/.04),0 24px 64px -24px rgb(var(--shadow)/.28)}
.auth-card h2{margin:0 0 .5rem;font-size:1.625rem;font-weight:700;letter-spacing:-.01em}
.auth-card>p{margin:0 0 1.25rem;font-size:1.0625rem;line-height:1.5;color:var(--ink-2)}
.field-form label{display:block;margin:1.125rem 0 .5rem;font-size:1rem;font-weight:650}
.field-form input{width:100%;min-width:0;min-height:3.25rem;padding:0 .875rem;border:1.5px solid var(--line-strong);border-radius:14px;background:var(--field);color:var(--ink);font-size:1.0625rem}
.field-form input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgb(180 85 43/.14)}
.field-form input::placeholder{color:var(--placeholder)}
.field-form input[readonly]{background:var(--surface-2);color:var(--ink-2)}
.password-field{position:relative;display:flex;align-items:center}
.password-field input{padding-right:6rem}
.password-field button{position:absolute;right:4px;top:4px;bottom:4px;padding:0 .75rem;border:0;border-radius:10px;background:none;color:var(--accent-hover);font-size:.9375rem;font-weight:650}
.field-form>.primary-button{width:100%;min-height:3.5rem;margin-top:1.5rem;border-radius:16px;font-size:1.125rem}
.field-help{margin:.75rem 0;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.auth-help{margin-top:1rem;font-size:1rem;color:var(--ink-2)}
.auth-help summary{padding:.5rem 0;cursor:pointer;color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
.auth-help p{line-height:1.55}
.auth-card .auth-footer{margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.9375rem;color:var(--ink-2)}
.form-error,.form-success{margin:1rem 0;padding:.75rem 1rem;border:1px solid var(--warn-line);border-radius:12px;background:var(--warn-bg);color:var(--warn-ink);font-size:1rem;line-height:1.5}
.form-success{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok-ink)}
.text-button{width:100%;margin-top:.5rem;padding:.75rem;border:0;background:none;color:var(--accent-hover);font-size:1rem}

@keyframes arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes sun{to{transform:rotate(360deg)}}

@media (max-width:1100px){
  .app-shell{grid-template-columns:18.5rem minmax(0,1fr)}
  .keyboard-hint{display:none}
}

/* ---------- Телефон: список и переписка — отдельные экраны ---------- */
@media (max-width:760px){
  .app-shell,.app-shell.collapsed{grid-template-columns:minmax(0,1fr)}
  .app-shell[data-view=chat] .list-pane,.app-shell[data-view=list] .chat-pane{display:none}
  .app-shell.collapsed[data-view=list] .list-pane{display:flex}
  .list-pane{padding:1rem .75rem max(.75rem,env(safe-area-inset-bottom))}
  .list-pane .brand{font-size:1.375rem}
  .list-pane .brand svg{width:1.625rem;height:1.625rem}
  /* «Новый диалог» and «Быстрый вопрос» share a row, so more of the list fits. */
  .list-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(9rem,100%),1fr));gap:.5rem;margin-top:.875rem}
  .new-chat,.quick-entry{position:relative;flex-direction:column;justify-content:center;gap:.125rem;min-height:3.5rem;padding:.375rem .5rem;font-size:.9375rem;line-height:1.2;text-align:center}
  .quick-entry{background:var(--surface);box-shadow:0 1px 2px rgb(var(--shadow)/.08)}
  .new-chat svg,.quick-entry svg{width:1.25rem;height:1.25rem}
  .quick-entry small{position:absolute;top:.375rem;right:.5rem}
  .search{margin-top:.625rem}
  .icon-button.small{width:2.75rem;height:2.75rem;border-radius:12px}
  /* Only the arrow: the conversation title gets the room. «Крупный текст» moves into «⋯». */
  .back-button{display:flex;justify-content:center;width:2.75rem;padding:0}
  .back-button span{display:none}
  #menu-button,.text-size{display:none}
  .chat-head{gap:.25rem;min-height:3.5rem;padding:.25rem .5rem}
  .title-wrap{align-items:center;padding-left:0;text-align:center}
  .title-wrap h1{max-width:100%;font-size:1.0625rem}
  .sources a{padding:.5rem .75rem}
  /* Three buttons do not fit a phone card: «Продолжить в диалоге» takes a row of its own on purpose. */
  .quick-actions:has(.text-action:not(.accent)) .text-action.accent{flex:1 1 100%;justify-content:center;background:var(--accent-soft)}
  .scroll{padding:1rem 1rem 1.5rem}
  .msg{font-size:1.125rem}
  .msg.user{max-width:88%}
  .welcome{gap:1.25rem;padding-top:clamp(.5rem,5vh,3rem)}
  .hero-sun{width:2.75rem;height:2.75rem;margin-bottom:.75rem}
  .hero p{font-size:1.0625rem}
  .suggestions{gap:.5rem}
  .item-row .item{padding-right:3rem}
  .item-menu{opacity:1;background:none}
  .item-row:hover .item-date{visibility:visible}
  .composer-area{padding:.25rem .625rem max(.75rem,env(safe-area-inset-bottom))}
  .composer{padding-left:1.125rem}
  .composer textarea{font-size:1.125rem}
  .send-button{padding:0}
  .send-button span{display:none}
  .web-toggle{width:3rem;padding:0;justify-content:center}
  .web-toggle span{display:none}
  .composer:has(.attach-button:not([hidden])){gap:.25rem}
  .composer:has(.attach-button:not([hidden])) .send-button{margin-left:.5rem}
  .msg-photo{width:9rem;height:9rem}
  .composer-hint{justify-content:center}
  .keyboard-hint{display:none}
  .toast{bottom:6rem}
  .auth-screen{display:block;max-width:500px;padding:1.75rem 1.25rem 2.5rem}
  .auth-brand{margin-bottom:1.25rem}
  .auth-intro h1{font-size:1.625rem;margin-bottom:1.25rem}
  .auth-intro p{display:none}
  /* A first visit by an invitation: the form and its button come first, the slogan is not needed. */
  .auth-screen:has(#activation-form:not([hidden])) .auth-intro h1{display:none}
  .auth-card{padding:1.5rem 1.25rem;border-radius:22px}
  /* 12 px from the screen edges: the browser's own dialog max-width would leave 19. */
  .dialog,.compact-dialog{width:calc(100vw - 24px);max-width:calc(100vw - 24px);padding:1.25rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}