@font-face{font-family:'Golos Text';src:url('/static/fonts/golos-400.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:'Golos Text';src:url('/static/fonts/golos-500.ttf') format('truetype');font-weight:500;font-display:swap}@font-face{font-family:'Golos Text';src:url('/static/fonts/golos-600.ttf') format('truetype');font-weight:600;font-display:swap}@font-face{font-family:'Golos Text';src:url('/static/fonts/golos-700.ttf') format('truetype');font-weight:700;font-display:swap}
body,button,input,textarea,select{font-family:'Golos Text',sans-serif}.boot{display:grid;place-content:center;min-height:100dvh;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-60px;left:16px;z-index:200;background:var(--mint);color:var(--ink);padding:12px}.skip-link:focus{top:10px}.auth-shell{height:100dvh;overflow:auto;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr}.field{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--ink);margin-bottom:20px}.field input,.field textarea,.field select{box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);font-size:14px;line-height:1.5}.field textarea{min-height:135px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--plum-500);outline-offset:2px}.field select{appearance:auto}.field small{color:var(--muted);line-height:1.6}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid .field{margin:0}.inline-error{color:var(--red);font-size:13px;line-height:1.6;margin:12px 0;white-space:pre-wrap}.inline-error:empty{display:none}.connection-status{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--green)}.connection-status:before{content:'';width:6px;height:6px;background:currentColor;border-radius:50%}.connection-status.offline{color:var(--red)}.workspace-title{font-size:23px}.onboarding{max-width:1000px;margin:auto;width:100%}.onboarding>h1{max-width:600px;line-height:1.2;margin-bottom:24px}.onboarding>p{max-width:620px;color:var(--muted);line-height:1.8;margin:18px 0 30px}.setup-step{display:grid;grid-template-columns:42px 1fr auto;align-items:start;gap:20px;padding:28px 0;border-top:1px solid var(--line)}.step-check{display:grid;place-content:center;width:34px;height:34px;border-radius:50%;background:var(--plum-pale);color:var(--plum);font-size:13px}.step-check.done{background:var(--mint);color:var(--success-800)}.setup-step h2{font-size:18px;font-weight:500;margin-bottom:9px}.setup-step p{max-width:560px;line-height:1.7;color:var(--muted);font-size:13px}.setup-actions{margin-top:25px;display:flex;gap:12px;flex-wrap:wrap}.conversation-empty{display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;flex:1}.conversation-empty .empty{max-width:420px}.conversation-empty h2{font-weight:500;font-size:23px;line-height:1.3;margin:20px 0 12px}.conversation-empty p{color:var(--muted);font-size:14px;line-height:1.8;margin-bottom:24px}.list-heading .icon-btn{background:var(--white);border-radius:10px}.client.selected{background:var(--white)}.client-time{font-variant-numeric:tabular-nums}.conversation-header{min-height:94px}.compose-hint{font-size:11px!important}.compose-toolbar .text-btn{font-size:12px!important;max-width:none}.compose-toolbar .btn{font-size:12px!important}.bubble{font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap}.message-meta{font-size:11px!important}.thread{overflow-y:auto;min-height:0}.assistant-empty{background:var(--plum);color:var(--white);border-radius:16px;padding:26px}.assistant-empty h3{font-size:22px;font-weight:500;line-height:1.3}.assistant-empty p{font-size:13px;color:var(--plum-200);line-height:1.8;margin:16px 0 23px}.assistant-empty .btn{background:var(--mint);color:var(--success-800);border:0}.suggestion .source-link{display:block;text-align:left;white-space:normal}.source-quote{font-size:12px;line-height:1.7;color:var(--plum-200);margin-top:8px}.source-name{color:var(--white);font-weight:500;font-size:12px}.assistant .sources{border-top:1px solid var(--plum-700);margin-top:18px;padding-top:16px}.suggestion-copy .reason{color:var(--plum-200)}.stale-advice{background:var(--amber-pale);color:var(--amber);padding:12px;border-radius:10px;font-size:12px;line-height:1.6;margin:0 0 12px}.source-doc{white-space:pre-wrap;font-size:14px;line-height:1.85;color:var(--ink)}.document-content{min-width:0}.document h3{overflow-wrap:anywhere}.document p{font-size:12px}.document .status{font-size:11px}.document .icon-btn{flex-shrink:0}.rules-form{max-width:740px;margin-top:28px;margin-bottom:28px}.rules-form .field textarea{min-height:220px}.page-description{max-width:660px;color:var(--muted);font-size:14px;line-height:1.8;margin:16px 0 24px}.overdue{color:var(--red)!important}.settings-section{max-width:750px;padding:30px 0;border-top:1px solid var(--line)}.settings-section h2{font-size:20px;font-weight:500;margin-bottom:15px}.settings-section p{font-size:13px;line-height:1.8;color:var(--muted);margin-bottom:18px}.status-line{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.busy{cursor:progress!important}.busy svg{animation:working 1.1s linear infinite}.busy-label{font-size:12px;color:var(--muted);margin-top:12px}.summary-message{font-size:13px;line-height:1.8}.summary-message p{white-space:pre-wrap}.dialog-body textarea{width:100%}.url-copy{overflow-wrap:anywhere;color:var(--plum);font-size:13px;line-height:1.7;padding:16px;border-radius:10px;background:var(--ground);margin:18px 0}.field input,.field select{min-height:44px}.guest-body{overflow:auto;background:var(--ground)}.guest-shell{height:100dvh;max-width:820px;margin:auto;display:flex;flex-direction:column;background:var(--white)}.guest-header{display:flex;gap:14px;padding:25px 30px;border-bottom:1px solid var(--line);align-items:center}.guest-header h1{font-size:20px;font-weight:600}.guest-header p{font-size:12px;color:var(--muted);margin-top:4px}.guest-header .status{margin-left:auto}.guest-shell .thread{flex:1}.guest-shell .composer-wrap{padding:0 24px 22px}.guest-shell .message.client{margin-left:auto;align-items:flex-end}.guest-shell .message.client .bubble{background:var(--plum-pale)}.guest-shell .message.seller{margin-right:auto;margin-left:0;align-items:flex-start}.guest-shell .message.seller .bubble{background:var(--plum-100)}.guest-shell textarea{width:100%;resize:none;max-height:180px;min-height:80px}@keyframes working{to{transform:rotate(360deg)}}
@media(max-width:850px){.topbar .connection-status{font-size:10px}.form-grid{grid-template-columns:1fr}.setup-step{grid-template-columns:32px 1fr;gap:12px}.setup-step>.btn{grid-column:2;justify-self:start}.setup-step p{font-size:13px}.page-heading{gap:16px}.settings-section{padding:24px 0}}
@media(max-width:650px){.nav .nav-btn{padding:8px 6px;min-width:57px;font-size:10px}.nav-btn svg{width:19px;height:19px}.topbar .btn{font-size:11px}.topbar .connection-status{display:none}.workspace-title{font-size:20px}.page{padding:26px 20px}.bubble{font-size:14px}.message-meta{font-size:11px!important}.compose-toolbar .text-btn{font-size:11px!important;max-width:130px}.compose-toolbar .btn{font-size:11px!important}.compose-hint{font-size:10px!important}.client-preview{font-size:13px}.client-time{font-size:11px}.identity h2{font-size:16px}.identity p{font-size:11px}.conversation-header{padding:18px 12px}.header-actions .icon-btn{min-width:36px;width:36px}.assistant .source-quote{font-size:12px}.page-heading h1{font-size:26px}.field input,.field select,.field textarea{font-size:16px}.page-description{font-size:13px}.document h3{font-size:13px}.document p{font-size:11px}.guest-header{padding:18px;gap:10px}.guest-header h1{font-size:17px}.guest-header .status{font-size:10px}.guest-shell .composer-wrap{padding:0 12px 16px}.guest-shell .thread{padding:22px 16px}.onboarding h1{font-size:28px}.onboarding>p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.busy svg{animation:none!important}}

/* State-led motion: no decorative animation while the workspace is idle. */
.draft-transfer{position:fixed;z-index:240;pointer-events:none;width:40px;height:6px;border-radius:4px;background:var(--mint);box-shadow:0 0 18px oklch(from var(--mint-200) l c h / 0.702)}
.suggestion{isolation:isolate}.suggestion-copy blockquote{font-size:15px;line-height:1.7;letter-spacing:-.01em}
.suggestion .source-link{background:transparent;border:0;padding:0;margin-top:14px}.suggestion .source-quote{font-size:12px;color:var(--plum-300)}
.assistant-empty{position:relative;overflow:hidden}.assistant-empty h3{letter-spacing:-.025em}.assistant-empty .btn{width:100%;justify-content:center;min-height:44px}
.indexing-status{display:flex;align-items:center;gap:12px;background:var(--plum-pale);padding:16px 18px;border-radius:12px;font-size:13px;margin-bottom:20px}.indexing-status svg{animation:request-dots 1.4s ease-in-out infinite}
.audio-level{display:flex;align-items:center;gap:3px;height:28px;width:70px;flex-shrink:0}.audio-level i{width:3px;height:24px;border-radius:2px;background:var(--plum);transform:scaleY(.12)}
.composer textarea[readonly]{color:var(--muted)}.composer:focus-within{border-color:var(--plum-500)}.speech-language{max-width:360px}
.client .avatar{transition:background-color 200ms,color 200ms}.client.selected .avatar{background:var(--plum);color:var(--mint)}.client.selected{box-shadow:inset 0 0 0 1px var(--plum-200)}
.document .btn{min-height:40px}.nav .nav-btn{position:relative}.assistant .page-description{font-size:13px;line-height:1.7}.assistant-section{padding:22px 4px}.assistant-section+.assistant-section{border-top:1px solid var(--line)}
.assistant-section>.btn{width:100%;justify-content:center}.identity div{min-width:0}.identity h2,.identity p{overflow-wrap:anywhere}
.advice-reason{font-size:12px;line-height:1.7;color:var(--plum-300);margin-top:20px}.advice-reason summary,.source-link summary{cursor:pointer;list-style-position:inside}.advice-reason p{margin-top:10px}.suggestion-copy>blockquote{margin-top:0}.source-link summary{line-height:1.6}.source-name{overflow-wrap:anywhere}
@keyframes request-dots{0%,80%,100%{opacity:.35;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
@media(min-width:651px){[data-mobile-back]{display:none}}
@media(min-width:1200px){.assistant-close{display:none}}
@media(max-width:650px){.identity>.avatar{display:none}.compose-tools{flex-wrap:wrap}.compose-toolbar{align-items:flex-end}.suggestion-copy blockquote{font-size:14px}.audio-level{width:58px;gap:2px}.speech-language{max-width:none}.document .status{display:none}}
@media(prefers-reduced-motion:reduce){.indexing-status svg{animation:none!important;opacity:1}.draft-transfer{display:none}}

/* Independent finish review: enabled navigation and functional text remain readable. */

@media(max-width:850px){.nav .nav-btn{font-size:11px}.topbar .connection-status{font-size:11px}}
@media(max-width:650px){.compose-hint{font-size:11px!important}.guest-header .status{font-size:11px}}


.settings-details{margin:8px 0 24px;border-block:1px solid var(--line)}
.settings-details>summary{padding:14px 0;min-height:44px;cursor:pointer;color:var(--ink);font-size:14px;font-weight:500}
.settings-details>summary:hover{color:var(--plum)}
.settings-details>summary:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
.settings-details-content{padding-top:8px}
.settings-diagnostics{display:flex;justify-content:flex-end;margin-bottom:20px}
.settings-details .settings-section:last-child{padding-bottom:4px}
.guest-shell .compose-toolbar{justify-content:flex-end}

/* Shared input and action states. */
.field :is(input,textarea,select),.composer{border-color:var(--control-line)}
.composer:focus-within,.search:focus-within{border-color:var(--focus)}
.btn.primary{color:var(--on-accent)}
/* The format action keeps its full accessible name and shows the short one when the composer itself is narrow (a phone, or
   the thread beside the chat list at about 650–720px): measured on the composer, not on the viewport. */
.fmt-short{display:none}
.conversation .composer{container:composer/inline-size}
@container composer (max-width:392px){#format-button .fmt-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#format-button .fmt-short{display:inline}}
/* Touch: header icons reach 44px at tablet and phone widths. */
@media(max-width:1024px){.conversation-header .header-actions .icon-btn{width:44px;min-width:44px;height:44px}.conversation-header .cc-summary-trigger{min-height:44px}.conversation-header.cc-compact .cc-summary-trigger{width:44px;min-width:44px}}
/* Knowledge tabs: a count badge stays beside its label. */
.knowledge-switch button{white-space:nowrap;flex:none}
@media(max-width:430px){.knowledge-switch{gap:18px}}
/* Settings: «Готовить ответ заранее» (native checkbox, label wraps the input). */
.check-field{gap:6px}
.check-label{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.check-label input{width:18px;height:18px;margin:0;accent-color:var(--plum);cursor:pointer}
.check-label input:focus-visible{outline:2px solid var(--plum-500);outline-offset:3px}
.check-field small{padding-left:28px;margin-top:-6px}

/* Rail (2026-10-02): the account on top, collapsible to icons (state per browser, app.js). Collapsed, each label
   becomes a small popover on hover and keyboard focus and stays the button's accessible name. Phones keep the bottom bar. */
.nav{position:relative;z-index:20}
.brand-cell{position:relative;z-index:21}
.rail-toggle .nav-tip{display:none}
.rail-collapsed .rail-toggle .nav-tip{display:flex}
.rail-toggle{position:relative;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:28px;padding:0;border:0;border-radius:8px;background:none;color:var(--plum-300)}
@media(hover:hover){.rail-toggle:hover{background:var(--plum-800);color:var(--white)}}
.nav-account{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:60px;margin:0 0 12px;padding:10px 6px 10px 8px;border:0;border-radius:12px;background:var(--plum-900);color:var(--white);text-align:left}
@media(hover:hover){.nav-account:hover{background:var(--plum-800)}}
.nav-account .avatar-self{flex:none;width:34px;height:34px;background:var(--plum-200);color:var(--plum-900);font-size:13px}
.nav-account-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.nav-account strong{font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--white)}
.nav-account small{font-size:12px;line-height:1.3;color:var(--plum-200);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nav-account strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1350px) and (min-width:1200px){.app-shell:not(.rail-collapsed) .nav-badge{position:static;margin-left:auto;height:18px;min-width:20px;padding:0 6px;font-size:11px}}
@media(min-width:851px){
 .app-shell.rail-collapsed{grid-template-columns:72px minmax(0,1fr)}
 .rail-collapsed .brand-cell{flex-direction:column;justify-content:center;gap:2px;padding:0}
 .rail-collapsed .brand-wordmark{display:none}
 .rail-collapsed .brand-cell .brand-mark{height:28px}
 .rail-collapsed .rail-toggle{margin:0}
 .rail-collapsed .nav{padding:17px 10px 18px}
 .rail-collapsed .nav-btn{justify-content:center;gap:0;padding:12px 0}
 .rail-collapsed .nav-btn.active:after{position:absolute;right:6px;top:50%;margin-top:-2.5px}
 .rail-collapsed .nav-account{justify-content:center;min-height:52px;padding:7px 0;background:none}
 .rail-collapsed .nav-account:is(:hover,:focus-visible){background:var(--plum-800)}
 .app-shell.rail-collapsed .nav-badge{position:absolute;top:5px;left:50%;margin-left:3px;height:17px;min-width:18px;padding:0 5px;font-size:10px}
 .rail-collapsed .nav-tip{position:absolute;left:calc(100% + 12px);top:50%;z-index:2;display:flex;width:max-content;max-width:240px;padding:7px 10px;border-radius:8px;background:var(--plum-900);color:var(--white);font-size:12px;font-weight:500;line-height:1.35;text-align:left;box-shadow:0 6px 20px oklch(from var(--plum-950) l c h / .2);opacity:0;pointer-events:none;transform:translate(-4px,-50%);transition:opacity 140ms var(--ease),transform 200ms var(--ease)}
 .rail-collapsed :is(.nav-btn,.nav-account,.rail-toggle):is(:hover,:focus-visible) .nav-tip{opacity:1;transform:translate(0,-50%)}
 .rail-collapsed .nav-account strong{font-size:12px}
 .rail-collapsed .nav-account small{font-size:11px}
}
@media(max-width:850px){.rail-toggle{display:none}}
@media(max-width:650px){.nav-account{display:none}}
@media(max-width:850px) and (min-width:651px){
 .nav-account{justify-content:center;min-height:50px;margin-bottom:8px;padding:6px 0;background:none}
 .nav-account .avatar-self{width:36px;height:36px;font-size:12px}
 .nav-account .nav-tip{position:absolute;left:calc(100% + 12px);top:50%;z-index:2;width:max-content;max-width:240px;padding:7px 10px;border-radius:8px;background:var(--plum-900);box-shadow:0 6px 20px oklch(from var(--plum-950) l c h / .2);opacity:0;pointer-events:none;transform:translate(-4px,-50%);transition:opacity 140ms var(--ease),transform 200ms var(--ease)}
 .nav-account:is(:hover,:focus-visible) .nav-tip{opacity:1;transform:translate(0,-50%)}
 .nav-account strong{font-size:12px}
 .nav-account small{font-size:11px}
}

/* «Задачи клиента»: a compact non-modal layer under the chat header, with the shared dialog's head and body. */
.tasks-layer{position:fixed;inset:auto;left:var(--tl-left,auto);top:var(--tl-top,96px);width:var(--tl-width,380px);max-height:var(--tl-max-height,70dvh);margin:0;padding:0;border:0;border-radius:16px;background:var(--white);color:var(--ink);box-shadow:var(--shadow);overflow:hidden;flex-direction:column}
.tasks-layer:popover-open{display:flex;animation:tl-open 200ms var(--ease)}
.tasks-layer .dialog-head{flex:none;padding:12px 10px 12px 20px;gap:12px}
.tasks-layer .dialog-head h2{font-size:17px}
.tasks-layer .dialog-head .icon-btn{width:40px;height:40px;min-width:40px;border-radius:10px}
.tasks-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 20px 16px}
.tl-bar{position:sticky;top:-12px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-12px 0 4px;padding:12px 0 4px;background:var(--white)}
.tasks-body .tl-count{margin:0;font-size:13px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-switch{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 4px 0 8px;margin-right:-4px;border:0;border-radius:8px;background:none;color:var(--ink);font-size:12px;font-weight:500;white-space:nowrap}
@media(hover:hover){.tl-switch:hover{background:var(--plum-100)}}
.tl-switch:before{content:'';order:2;width:32px;height:18px;border-radius:9px;background:var(--plum-400);transition:background-color var(--fast)}
.tl-switch:after{content:'';position:absolute;right:20px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--white);transition:transform 200ms var(--ease)}
.tl-switch[aria-checked=true]:before{background:var(--plum-800)}
.tl-switch[aria-checked=true]:after{transform:translateX(14px)}
.tl-list{list-style:none;margin:0;padding:0}
.tl-task+.tl-task{border-top:1px solid var(--line)}
.tl-check{display:flex;align-items:flex-start;gap:12px;padding:11px 0;cursor:pointer}
.tl-check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--plum);cursor:pointer}
.tl-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.tl-text{font-size:14px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.tl-due{font-size:12px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-task.done .tl-text{text-decoration:line-through;color:var(--muted)}
.tl-group{padding-top:8px}
.tl-group+.tl-group{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.tl-group .tl-task+.tl-task{border-top:0}
.tl-group .tl-check{padding:8px 0}
.tl-group h3{margin:0;font-size:13px}
.tl-client{display:inline-flex;align-items:center;gap:7px;min-height:34px;max-width:100%;margin-left:-8px;padding:4px 8px;border:0;border-radius:8px;background:none;color:var(--ink);font-size:13px;font-weight:600;text-align:left}
.tl-client[aria-current=true]{background:var(--plum-100)}
@media(hover:hover){.tl-client:hover{background:var(--plum-100)}}
.tl-client svg{color:var(--plum-500)}
.tl-none{padding:7px 0;color:var(--muted)}
.tl-done{margin-top:6px;border-top:1px solid var(--line)}
.tl-done>summary{font-size:13px;color:var(--muted)}
.tasks-body .tl-note{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--muted)}
@keyframes tl-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(max-width:650px){.tasks-layer .dialog-head{padding:10px 8px 10px 16px}.tasks-body{padding:10px 16px 14px}.tl-bar{top:-10px;margin-top:-10px;padding-top:10px}.tl-text{font-size:15px}}

/* Fix pass 2026-10-02 (verifier findings). */
/* Shell: the rail comes first in the DOM (focus order), its cells are placed explicitly. The top bar collapses when it has
   neither a page title nor «Нет соединения» (app.js syncTopbar): the page takes its 80px. Phones keep it as the header. */
@media(min-width:651px){
 .brand-cell{grid-row:1;grid-column:1}
 .nav{grid-row:2;grid-column:1}
 .topbar{grid-row:1;grid-column:2}
 .workspace{grid-row:2;grid-column:2}
 .app-shell.topbar-empty .topbar{display:none}
 .app-shell.topbar-empty .workspace{grid-row:1/3;padding-top:20px}
}
@media(min-width:1650px){.app-shell.topbar-empty .workspace{padding-top:26px}}
@media(max-width:1350px) and (min-width:651px){.app-shell.topbar-empty .workspace{padding-top:16px}}
@media(max-width:850px) and (min-width:651px){.app-shell.topbar-empty .workspace{padding-top:12px}}
/* «Новый чат» is the chats page's action, beside its title. A name may take two lines (then an ellipsis); the time never wraps. */
.list-heading{justify-content:space-between}
.list-heading .btn{flex:none}
.client-top{min-width:0;align-items:baseline}
.client-name{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.3}
.client-time{flex:none;white-space:nowrap}
/* Client page: the company's initials, not the vendor mark. */
.guest-avatar{width:40px;height:40px;border-radius:12px;background:var(--plum-150);color:var(--plum-700);font-size:13px;font-weight:600;letter-spacing:.02em}
.guest-avatar:empty{visibility:hidden}
/* Disclosures share one marker: the drawn chevron at the right, turned while open, on a 44px row. */
:is(.settings-details,.copilot-card details,.laboratory details,.tl-done)>summary{display:flex;align-items:center;gap:12px;min-height:44px;list-style:none;cursor:pointer}
:is(.settings-details,.copilot-card details,.laboratory details,.tl-done)>summary::-webkit-details-marker{display:none}
:is(.settings-details,.copilot-card details,.laboratory details,.tl-done)>summary::after{content:'';flex:none;width:6px;height:6px;margin:0 4px 0 auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 180ms var(--ease)}
:is(.settings-details,.copilot-card details,.laboratory details,.tl-done)[open]>summary::after{transform:translateY(2px) rotate(225deg)}
/* Touch: every control in the thumb zone reaches 44px (the citation chips carry a larger invisible hit area). */
@media(pointer:coarse){
 :is(.compose-toolbar>.btn,.compose-tools>.btn,.list-heading .btn,.dialog-body .btn,.tl-switch,.tl-client,.lab-decisions .btn,.draft-feedback .btn){min-height:44px}
 :is(.mic-btn,#dialog-close,#tasks-close,.thread .empty .btn,.copilot-empty .btn){min-width:44px;min-height:44px}
 /* The rail toggle keeps its 26px box so the wordmark fits; its 44px target is an invisible hit area around it. */
 .rail-toggle::after{content:'';position:absolute;inset:-8px -9px}
}
/* Phone: dialog actions become full-width rows, the confirming action first. */
@media(max-width:650px){
 .dialog-body .row{flex-direction:column-reverse;flex-wrap:nowrap;align-items:stretch}
 .dialog-body .row>.btn{width:100%}
 /* Three even bottom-bar slots; the active pill stays inset inside its full-width target. */
 .nav-btn.active{background:none}
 .nav-btn.active::before{content:'';position:absolute;inset:0 max(0px,calc(50% - 44px));z-index:-1;border-radius:9px;background:var(--plum-800)}
 /* The client's name may take two lines; the interest is in the «О клиенте» sheet behind the name. */
 .conversation .conversation-header.cc-header .identity h2{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
 .conversation .conversation-header .identity>.cc-identity p.cc-subtitle{display:none}
 .conversation-header .identity p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Short viewports (a phone in landscape, a small window): the header and composer shrink and the conversation scrolls
   rather than clipping the send controls. */
.conversation .thread{position:relative} /* its screen-reader-only meta stays inside the thread's own scroll */
@media(max-height:500px) and (min-width:651px){
 .conversation{overflow-y:auto}
 .conversation>.conversation-header,.conversation>.conversation-header.cc-header,.conversation>.conversation-header.cc-header:has(.cc-interest){min-height:0;padding-block:10px;flex:none}
 .conversation>.composer-wrap{flex:none}
 .conversation-header .identity p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* One line with an ellipsis (a one-line clamp under nowrap would cut mid-glyph). */
 .conversation .cc-interest-text{display:block;min-height:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 /* `.inbox` outranks capsule.css's 88px reserve (loaded after this file): the 44px capsule needs 56px, and the last
    message stays above it in the few lines that fit. */
 .inbox .conversation .thread{flex:1 0 140px;padding-top:12px;padding-bottom:56px;scroll-padding-bottom:56px}
 .conversation .composer textarea{min-height:44px;height:48px}
 /* The day label scrolls with its day: a stuck label would cover the few lines that fit. */
 .conversation .date-divider{position:static}
 /* The client's phone and the number share one line under the name, so the thread keeps its lines. */
 .conversation-header .identity>div:has(>.room-contact){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px}
 .conversation-header .identity>div:has(>.room-contact)>:not(.room-contact,.room-channel){flex-basis:100%}
 .conversation-header .identity>div>.room-contact+.room-channel{flex:1 1 0;margin-top:2px}
}
/* A phone turned sideways (or a short narrow window): one pane at a time, like a phone held upright. The open chat takes
   the whole width with «К списку клиентов»; the capsule shrinks to its 44px mark so it covers less of the thread. */
@media(max-height:500px) and (min-width:651px) and (max-width:950px){
 .inbox{display:block;overflow:hidden}
 .inbox .conversations{height:100%}
 .inbox .conversation{height:100%;display:none}
 .inbox.mobile-thread .conversations{display:none}
 .inbox.mobile-thread .conversation{display:flex}
 .conversation-header [data-mobile-back]{display:inline-flex}
 .conversation .assistant-capsule{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center;gap:0}
 .conversation .assistant-capsule>span:not([class]){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .conversation .assistant-capsule .capsule-indicator{position:absolute;top:6px;right:6px}
}

/* «!» hint (core.js hint, app.js): a short instruction on hover and keyboard focus; a click pins it, Escape closes it.
   The tip hangs from the label row, so it stays inside the page at phone width. */
.field-label{position:relative;display:flex;align-items:center;gap:8px}
#rules-form>h2{margin-bottom:18px}
.hint{display:inline-flex}
.hint-btn{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;padding:0;border:1px solid var(--control-line);border-radius:50%;background:none;color:var(--plum-700);font-size:12px;font-weight:600;line-height:1}
@media(hover:hover){.hint-btn:hover{background:var(--plum-150);color:var(--plum-900)}}
.hint-tip{position:absolute;z-index:5;left:0;top:calc(100% + 8px);width:max-content;max-width:min(300px,calc(100vw - 56px));padding:9px 12px;border-radius:8px;background:var(--plum-900);color:var(--white);font-size:12px;font-weight:500;line-height:1.5;text-align:left;box-shadow:0 6px 20px oklch(from var(--plum-950) l c h / .2);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-3px);transition:opacity 140ms var(--ease),transform 200ms var(--ease),visibility 0s linear 140ms}
.hint-tip::before{content:'';position:absolute;inset:-10px 0 auto;height:10px}
.hint:is(:hover,:focus-within,[data-open]):not([data-off]) .hint-tip{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
@media(pointer:coarse){.hint-btn::after{content:'';position:absolute;inset:-13px}}
@media(prefers-reduced-motion:reduce){.hint-tip{transition:none;transform:none}}

/* «Чаты» with WhatsApp (app.js, 2026-10-03): the number filter above the list and a number label on WhatsApp rows (only
   when the workspace has more than one channel; web rows never carry one), the number in the conversation header, the
   delivery state of the seller's messages, «авто», attachment placeholders, failed + retry, and the composer of a number
   that cannot send. Filters stay quiet text buttons; the chosen one takes the white fill of a selected row. */
/* One horizontally scrolling row whatever the number of numbers (app.js revealFilter keeps the chosen chip, and any chip
   that takes keyboard focus, 32px clear of a faded edge; a vertical wheel scrolls it sideways). The edge that hides more
   chips fades out. No scroll snapping: it would pull a revealed chip back under the fade. Padding keeps focus rings
   unclipped. */
.chat-filters{position:relative;display:flex;flex-wrap:nowrap;gap:4px;margin:8px 0 0;padding:4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.chat-filters::-webkit-scrollbar{display:none}
/* While more chips follow, a small arrow sits on the faded end and scrolls the row on; a touch screen swipes instead. */
.chat-filter-bar{position:relative}
.filter-more{position:absolute;right:0;top:8px;bottom:0;display:none;place-items:center;width:28px;padding:0;border:0;border-radius:8px;background:none;color:var(--plum-600)}
@media(hover:hover){.filter-more:hover{background:var(--plum-150);color:var(--plum-900)}}
@media(hover:hover) and (pointer:fine){.chat-filters[data-more~=right]:not([hidden])+.filter-more{display:grid}}
.chat-filters[data-more=right]{-webkit-mask-image:linear-gradient(90deg,var(--white) calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,var(--white) calc(100% - 28px),transparent)}
.chat-filters[data-more=left]{-webkit-mask-image:linear-gradient(90deg,transparent,var(--white) 28px);mask-image:linear-gradient(90deg,transparent,var(--white) 28px)}
.chat-filters[data-more="left right"]{-webkit-mask-image:linear-gradient(90deg,transparent,var(--white) 28px,var(--white) calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,var(--white) 28px,var(--white) calc(100% - 28px),transparent)}
.chat-filters[hidden]{display:none}
.chat-filters .filter{display:inline-flex;align-items:center;flex:none;min-height:32px;max-width:26ch;padding:6px 10px;border-radius:8px;font-size:12px;line-height:1.3;color:var(--plum-700);white-space:nowrap;transition:background-color 160ms,color 160ms}
.filter-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* A number that cannot send: the state colour of its Settings row. */
.filter-dot{flex:none;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--warning-600)}
.chat-filters .filter[aria-pressed=true]{background:var(--white);color:var(--plum-900);font-weight:500;box-shadow:inset 0 0 0 1px var(--plum-200)}
@media(hover:hover){.chat-filters .filter:hover:not([aria-pressed=true]){background:var(--plum-150);color:var(--plum-900)}}
.chat-filters .filter:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.chat-filter-bar+.clients{margin-top:6px}
.client-channel{display:flex;align-items:center;gap:5px;min-width:0;margin-top:6px;font-size:11px;font-weight:500;line-height:1.35;color:var(--plum-600)}
.client-channel>svg{flex:none;color:var(--plum-500)}
.client-channel-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client.selected .client-channel{color:var(--plum-700)}
/* The number line gives way from its name: the state word never shrinks, and while it shows, the phone steps aside. */
.conversation-header .room-channel{display:flex;align-items:baseline;min-width:0;margin-top:5px;font-size:12px;line-height:1.45;color:var(--plum-700);overflow:hidden;white-space:nowrap}
.room-channel>svg{flex:none;align-self:center;margin-right:5px;color:var(--plum-400)}
.room-channel-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.room-channel-sep{flex:none;margin:0 6px;color:var(--plum-300)}
.room-channel-state{flex:none;font-weight:500;color:var(--warning-600)}
/* The client's own phone, part of who the client is: right under the name, apart from the number line. */
.conversation-header .room-contact{display:block;margin-top:4px;font-size:13px;font-weight:500;line-height:1.4;color:var(--plum-800);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conversation-header .room-contact+.room-channel{margin-top:2px}
/* Message meta: «авто», «изменено»/«удалено», the time, then the delivery state (WhatsApp's ticks, in the palette). */
.message-meta .msg-state{display:inline-flex;color:var(--plum-400)}
.message-meta .msg-state svg{color:inherit}
.message-meta .msg-state[data-state=read]{color:var(--success-600)}
.message-meta .msg-state[data-state=failed]{color:var(--danger-600)}
.msg-auto{padding:0 6px;border-radius:8px;background:var(--plum-150);font-size:11px;font-weight:600;line-height:16px;color:var(--plum-700)}
.msg-note{color:var(--muted)}
.message.revoked .bubble{color:var(--muted)}
.message.failed .bubble{box-shadow:inset 0 0 0 1px var(--danger-300)}
.msg-failed{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:0 12px;max-width:100%;margin-top:6px;font-size:12px;line-height:1.5;text-align:right;color:var(--danger-600)}
.msg-failed .text-btn,.msg-media-open,.composer-lock .text-btn{min-height:32px;font-weight:500;color:var(--plum-800);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.msg-failed .text-btn:hover,.msg-media-open:hover,.composer-lock .text-btn:hover{color:var(--plum-950)}
/* An attachment: a typed placeholder (glyph tile, kind, detail) and an explicit «Открыть»/«Скачать»; the caption follows. */
.msg-media{display:flex;align-items:center;gap:10px;min-width:min(230px,100%);white-space:normal}
.msg-media-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--white);color:var(--plum-600)}
.msg-media-text{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.45}
.msg-media-type{font-weight:500;color:var(--ink)}
.msg-media-detail{font-size:12px;color:var(--muted);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.msg-media-open{flex:none;padding:4px 2px}
.msg-caption{margin-top:10px}
/* The opened photo, sticker, video or voice message in the shared dialog. */
.msg-view{display:grid;justify-items:center;gap:12px;margin:0}
.msg-view :is(img,video){display:block;max-width:100%;max-height:min(62dvh,560px);border-radius:10px;background:var(--plum-100);object-fit:contain}
.msg-view audio{width:100%}
.msg-view figcaption{justify-self:stretch;font-size:13px;line-height:1.65;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
/* A number that cannot send: the draft stays readable and copyable, the toolbar gives way to the reason. */
.conversation .composer[data-locked]{border-color:var(--plum-200);background:var(--plum-50)}
.conversation .composer[data-locked] textarea{min-height:44px;color:var(--plum-700)}
.composer-lock{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;min-height:55px;padding:7px 14px 10px;font-size:13px;line-height:1.5;color:var(--plum-800)}
.composer-lock>svg{flex:none;color:var(--warning-600)}
@media(pointer:coarse){.chat-filters .filter,.msg-failed .text-btn,.msg-media-open,.composer-lock .text-btn{min-height:44px}}
@media(max-width:650px){
 .chat-filters{margin:10px 0 2px;gap:6px}
 .chat-filters .filter{padding:7px 12px;font-size:13px}
 .conversation-header .room-channel{margin-top:3px;font-size:11px}
 .conversation-header .room-contact{margin-top:2px;font-size:12px}
 .msg-media{min-width:0}
 .composer-lock{min-height:52px;padding:7px 12px 9px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.chat-filters .filter{transition:none}}

/* Fix pass 2026-10-03 (WhatsApp review). */
/* An error inside the shared dialog reads as an error (`.dialog-body p` would draw it as muted body text). */
.dialog-body p.inline-error{color:var(--danger-600);font-size:13px}
/* One column width for Settings: the company form and every section below it end on the same line. */
.settings-section{max-width:740px}
/* Native selects share the text fields' box (same height) with a drawn plum-600 caret. */
.field select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--plum-600) 50%),linear-gradient(135deg,var(--plum-600) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field select:disabled{background-image:linear-gradient(45deg,transparent 50%,var(--plum-300) 50%),linear-gradient(135deg,var(--plum-300) 50%,transparent 50%)}
/* A phone name breaks only between its digit groups. */
:is(.client-name,.identity h2) .nw{white-space:nowrap}
/* The list marks a reply that did not leave for WhatsApp. */
.client-failed{display:inline-flex;margin-right:5px;vertical-align:-2px;color:var(--danger-600)}
.client-failed svg{color:inherit}
/* A file WhatsApp no longer has. */
.msg-media-gone{font-size:12px;color:var(--muted)}
.msg-media-gone:focus{outline:none}
/* A locked chat with an empty draft shows only the reason. */
.conversation .composer textarea[hidden]{display:none}
/* While a day label is stuck at the top of the thread (app.js markStuck), a band of the thread's own white sits behind
   it, from the thread's top edge to just under the pill, so text slides beneath instead of colliding with the pill. */
.thread .date-divider.stuck::before{content:'';position:absolute;z-index:-1;left:-24px;right:-24px;top:-60px;bottom:-12px;background:linear-gradient(var(--white) calc(100% - 16px),oklch(from var(--white) l c h / 0))}
/* Touch: the open tip never takes the taps meant for the control under it (the hover bridge is for a mouse). */
@media(pointer:coarse){.hint:is(:hover,:focus-within,[data-open]):not([data-off]) .hint-tip{pointer-events:none}}