@charset "UTF-8";
/* Рядом: интерфейс-мессенджер. Вся палитра — в токенах ниже. */
:root{
  color-scheme:light;
  --bg:#f5ede3;          /* фон переписки */
  --surface:#fffdf9;     /* панели, ответы, поле ввода */
  --surface-2:#f1e5d7;   /* выбранный разговор, нажатые кнопки */
  --hover:#f8f0e6;
  --line:#e2d3c2;
  --line-strong:#d6c1ab;
  --ink:#2e2620;         /* основной текст */
  --ink-2:#6a5646;       /* второстепенный текст, контраст не ниже 5:1 */
  --accent:#b4552b;
  --accent-hover:#96431f;
  --accent-soft:#f8e3d4;
  --user:#f6dbc6;        /* ваши сообщения */
  --danger:#a33d1f;
  --web:#e8f1f7;         /* ответы, найденные в интернете */
  --web-ink:#2c5a75;
  --web-line:#cddfea;
  --focus:#d98c4a;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
}
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}
: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:22rem 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(--surface);border-right:1px solid var(--line);padding:1.25rem 1rem 1rem}
.brand{display:flex;align-items:center;gap:.5rem;width:max-content;padding:0 .25rem;color:var(--ink);text-decoration:none;font-size:1.625rem;font-weight:750;letter-spacing:-.05em}
.brand svg{width:2rem;height:2rem;color:var(--accent);stroke-width:2.2}
.brand i{font-style:normal;color:var(--accent)}
.new-chat{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.25rem;min-height:3.25rem;border:0;border-radius:14px;background:var(--accent);color:#fff;font-size:1.0625rem;font-weight:600}
.new-chat:hover{background:var(--accent-hover)}
.search{display:flex;align-items:center;gap:.5rem;margin:.875rem 0 .5rem;min-height:3rem;padding:0 .875rem;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink-2)}
.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 .25rem .25rem .75rem;font-size:.9375rem;font-weight:600;color:var(--ink-2)}
.link-button{display:flex;align-items:center;gap:.375rem;min-height:2.25rem;padding:0 .625rem;border:0;border-radius:10px;background:none;color:var(--accent);font-size:.9375rem;font-weight:600}
.link-button:hover{background:var(--accent-soft)}
.link-button svg{width:1.125rem;height:1.125rem}
.list{flex:1;min-height:0;overflow:auto;margin:0 -.5rem;padding:0 .5rem .5rem;scrollbar-width:thin}
.history-empty{margin:1rem .75rem;font-size:1rem;line-height:1.5;color:var(--ink-2)}

.item-row{position:relative;margin-bottom:2px}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem;width:100%;padding:.75rem .875rem;border:0;border-radius:14px;background:none;text-align:left}
.item:hover,.item-row:hover .item:not(.active){background:var(--hover)}
.item.active{background:var(--surface-2);box-shadow:inset 4px 0 0 var(--accent)}
.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:.875rem;color:var(--ink-2);padding-top:.125rem;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:.5rem;right:.375rem;opacity:0;background:var(--hover)}
.item-row.active-row .item-menu{background:var(--surface-2)}
.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(--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(--surface-2);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:.9375rem;font-weight:600;color:var(--ink-2)}
.drop-target{background:var(--accent-soft)!important;outline:2px dashed var(--accent);outline-offset:-2px}

.list-bottom{margin-top:.5rem}
.admin-nav{display:flex;align-items:center;gap:.5rem;min-width:0;overflow-wrap:break-word;hyphens:auto;min-height:2.75rem;margin-bottom:.5rem;padding:0 .75rem;border:1px solid var(--line);border-radius:12px;background:var(--hover);color:var(--accent-hover);font-size:.9375rem;font-weight:600;text-decoration:none}
.admin-nav svg{width:1.25rem;height:1.25rem}
.profile-button{display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem .5rem .25rem;border:0;border-top:1px solid var(--line);background:none;text-align:left}
.avatar{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--accent-soft);color:var(--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{container-type:inline-size;display:flex;align-items:center;gap:.75rem;min-height:4.25rem;padding:.5rem 1.5rem;background:var(--surface);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}
.title-wrap h1{margin:0;font-size:1.1875rem;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:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:1rem;font-weight:500}
.text-size:hover,.back-button:hover{background:var(--surface-2)}
.text-size b{font-family:Georgia,serif;font-size:1.25rem;font-weight:700;letter-spacing:-.04em}
.text-size[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-hover)}

.scroll{flex:1;min-height:0;overflow:auto;padding:1.5rem;scrollbar-width:thin;scrollbar-color:#d8caba transparent}
.thread,.messages,.welcome{display:flex;flex-direction:column;gap:.625rem}
.thread{max-width:50rem;margin:0 auto}
.day{align-self:center;margin:.5rem 0;padding:.25rem .875rem;border-radius:999px;background:#eadccb;color:var(--ink-2);font-size:.875rem;font-weight:500}
.msg{max-width:82%;padding:.75rem 1rem .5rem;border-radius:20px;font-size:1.1875rem;line-height:1.55;box-shadow:0 1px 2px #5a3a1a14;overflow-wrap:anywhere;animation:arrive .2s ease-out}
.msg.user{align-self:flex-end;background:var(--user);border-bottom-right-radius:6px}
.msg.user .msg-body{white-space:pre-wrap}
.msg.bot{align-self:flex-start;background:var(--surface);border-bottom-left-radius:6px}
.msg p{margin:0 0 .6em}
.who{display:block;margin-bottom:.25rem;font-size:.9375rem;font-weight:650;color:var(--accent)}
.msg.bot.web{background:var(--web)}
.msg.bot.web .who{display:flex;align-items:center;gap:.3rem;color:var(--web-ink)}
.who svg{width:1.0625rem;height:1.0625rem}
.msg.web .sources{border-top-color:var(--web-line)}
.msg.web .sources a{background:#fff;color:var(--web-ink)}
.time{display:block;margin-top:.125rem;text-align:right;font-size:.875rem;color:var(--ink-2)}
.typing{display:flex;gap:.3rem;padding:.5rem 0 .375rem}
.typing>span:not(.typing-text){width:.5rem;height:.5rem;border-radius:50%;background:#c4ab93;animation:dot 1.2s infinite}
.typing{align-items:center}
.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:.625rem;padding-top:.5rem;border-top:1px solid var(--line);font-size:.9375rem}
.sources-label{color:var(--ink-2)}
.sources a{padding:.125rem .625rem;border-radius:999px;background:var(--hover);color:var(--accent-hover);text-decoration:none}
.sources a:hover{background:var(--accent-soft);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:.75rem;margin:-.125rem 0 .5rem .25rem}
.action{display:flex;align-items:center;gap:.375rem;min-height:2.5rem;padding:0 .875rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:.9375rem;font-weight:500}
.action:hover{color:var(--ink);border-color:#cdb8a3}
.action svg{width:1.125rem;height:1.125rem}
.message-status{font-size:.9375rem;color:var(--ink-2)}
.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 .6em;padding-left:1.4em}
.msg-body li{margin:.2em 0}
.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:.9em 0 .35em;font-size:1em;font-weight:700;line-height:1.35}
.msg-body h1,.msg-body h2{font-size:1.08em}
.msg-body>:first-child{margin-top:0}
.msg-body blockquote{margin:0 0 .6em;padding:.5em .75em;border-left:3px solid var(--accent);border-radius:6px;background:#faf1e6}
.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:#f3e9dd;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em}
.msg-body pre{margin:0 0 .6em;padding:.75em 1em;border-radius:12px;background:#f3e9dd;overflow-x:auto;white-space:pre}
.msg-body pre code{padding:0;background:none;font-size:.85em}
.msg-body hr{margin:.9em 0;border:0;border-top:1px solid var(--line)}
.msg-body table{display:block;max-width:100%;margin:0 0 .6em;overflow-x:auto;border-collapse:collapse;font-size:.92em}
.msg-body th,.msg-body td{padding:.4em .7em;border:1px solid var(--line);text-align:left;vertical-align:top}
.msg-body th{background:var(--hover);font-weight:650}

/* Начало разговора */
.suggestions{display:grid;grid-template-columns:1fr 1fr;gap:.625rem;width:min(100%,40rem);margin-top:.25rem}
.suggestion{display:flex;align-items:center;gap:.75rem;min-height:3.75rem;padding:.625rem 1rem;border:1px solid var(--line);border-radius:16px;background:var(--surface);font-size:1.0625rem;font-weight:600;text-align:left}
.suggestion:hover{border-color:var(--accent)}
.suggestion-icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:12px;background:var(--accent-soft);color:var(--accent);flex-shrink:0}
.suggestion-icon svg{width:1.25rem;height:1.25rem}

/* Поле ввода */
/* «Интернет» switch: on — the model may search, off — it certainly will not. */
.web-toggle{display:flex;align-items:center;gap:.375rem;min-height:3.25rem;padding:0 .875rem;flex-shrink:0;border:1px solid var(--web-line);border-radius:16px;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])){padding-left:.5rem}
.composer-area{flex-shrink:0;padding:.75rem 1.5rem 1rem}
.composer-area>*{max-width:50rem;margin-left:auto;margin-right:auto}
.composer{display:flex;align-items:flex-end;gap:.75rem;padding:.5rem .5rem .5rem 1.25rem;border:1.5px solid var(--line-strong);border-radius:22px;background:var(--surface);box-shadow:0 4px 18px #6b40180d}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px #b4552b1a}
.composer textarea{flex:1;min-width:0;max-height:10rem;padding:.625rem 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:#8a7461}
.send-button{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.25rem;min-width:3.25rem;padding:0 1.25rem;border:0;border-radius:16px;background:var(--accent);color:#fff;font-size:1.0625rem;font-weight:600}
.send-button:hover:not(:disabled){background:var(--accent-hover)}
.send-button:disabled{background:#ecdfd2;color:#8d7765}
.send-button.stop{background:var(--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 .5rem;font-size:.875rem;color:var(--ink-2)}
.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}
.inline-error,.offline-notice{margin-bottom:.625rem;padding:.75rem 1rem;border:1px solid #ebcfc1;border-radius:12px;background:#fff1e9;color:#93401f;font-size:1rem;line-height:1.5}

/* ---------- Меню, окна, уведомление ---------- */
.menu{position:fixed;z-index:30;min-width:16rem;max-width:min(20rem,calc(100vw - 16px));padding:.375rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px #3b241226}
.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:22px;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px #3b241240}
.compact-dialog{width:min(26rem,calc(100vw - 32px));padding:1.5rem}
.dialog::backdrop{background:#3b281a59}
.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:#fff;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:1.25rem}
.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);background:var(--accent);color:#fff}
.primary-button:hover{background:var(--accent-hover)}
.primary-button:disabled{opacity:.6}
.primary-button.danger{border-color:var(--danger);background:var(--danger)}
.secondary-button{border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.secondary-button:hover{background:var(--surface-2)}
.dialog>.primary-button{margin-top:.5rem}

.toast{position:fixed;left:50%;bottom:8.5rem;z-index:40;transform:translateX(-50%);display:flex;align-items:center;gap:1rem;max-width:calc(100vw - 24px);min-height:3.25rem;padding:.625rem 1.25rem;border-radius:14px;background:#3a2e25;color:#fbf3ea;font-size:1rem;box-shadow:0 8px 30px #2e262040}
.toast.with-action{padding-right:.625rem}
.toast button{min-height:2.5rem;padding:0 1rem;flex-shrink:0;border:0;border-radius:10px;background:#fbe3d1;color:#7a3416;font-size:1rem;font-weight:700}
.toast button:hover{background:#fff}

/* ---------- Вход ---------- */
.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-size:2.25rem;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.auth-intro p{margin:0;font-size:1.1875rem;line-height:1.6;color:var(--ink-2)}
.auth-card{padding:2rem;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:0 15px 55px #67411c0d}
.auth-card h2{margin:0 0 .5rem;font-size:1.75rem;font-weight:700}
.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:12px;background:#fff;color:var(--ink);font-size:1.0625rem}
.field-form input:focus{outline:0;border-color:var(--accent)}
.field-form input::placeholder{color:#8a7461}
.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;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{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 #e9bba4;border-radius:12px;background:#fbe6db;color:#923f24;font-size:1rem;line-height:1.5}
.form-success{border-color:#d3d5b4;background:#eef0df;color:#4f5629}
.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 dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}

@media (max-width:1100px){
  .app-shell{grid-template-columns:19rem 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{border-right:0;padding-bottom:max(1rem,env(safe-area-inset-bottom))}
  .back-button{display:flex}
  #menu-button{display:none}
  .chat-head{gap:.25rem;min-height:3.75rem;padding:.375rem .5rem}
  .title-wrap{align-items:center;text-align:center}
  .title-wrap h1{max-width:100%;font-size:1.0625rem}
  .text-size span{display:none}
  .text-size{padding:0 .625rem}
  .scroll{padding:1rem .75rem}
  .msg{max-width:94%;font-size:1.125rem}
  .suggestions{grid-template-columns:1fr}
  .item-row .item{padding-right:3rem}
  .item-menu{opacity:1}
  .item-row:hover .item-date{visibility:visible}
  .composer-area{padding:.5rem .625rem max(.75rem,env(safe-area-inset-bottom))}
  .composer{padding-left:1rem;border-radius:20px}
  .composer textarea{font-size:1.125rem}
  .send-button{padding:0;border-radius:50%}
  .send-button span{display:none}
  .web-toggle{width:3.25rem;padding:0;justify-content:center;border-radius:50%}
  .web-toggle span{display:none}
  .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.5rem;margin-bottom:1.25rem}
  .auth-intro p{display:none}
  .auth-card{padding:1.5rem 1.25rem;border-radius:20px}
}
/* Large system font: few letters fit in the header, so «Назад» keeps only its arrow
   and the conversation title gets the room. The width is in letters (em), so it follows the font. */
@container (max-width: 21em) {
  .back-button span{display:none}
  .back-button{padding:0 .375rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}