/* A5 CRM — inbox.css (screen: Переписка #/inbox; owned by screens/inbox.js). The parts follow DESIGN-STRIPE.md §6.3,
   the colours DESIGN-CALM.md, the layout the owner's pick of 2026-10-19 (DESIGN-CALM.md §6): no page header, four panes
   flush from the sidebar with 1 px --border-soft between them — folders | list | chat | deal panel. Two-line rows without
   dividers, one «Порядок и фильтр» icon menu, a quiet chat header (ghost buttons), a reading column of at most 880 px,
   the reply box as one box with its tools inside. Below a 1000 px #view the panel steps aside for a one-line deal strip.
   Bubbles, the «/» picker, the AI bar and the post-insert strip come from deal.css (.cm-*, .tpl, .aix-*,
   .aistrip; G3); the wrapper / input rules, badges, the segmented control and buttons from components.css / base.css.
   Every colour is a token of base.css; both themes come from the tokens. */

/* no page header on this route: the panes take the height under the top bar (as Front / Attio inboxes) */
html[data-route="inbox"] .phead{display:none}

/* ── grid: folders 216 | list 340 | chat + deal panel 300 (inside .ipv); steps by the #view width at the end ── */
.inbox{display:grid;grid-template-columns:240px 340px minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;background:var(--bg);border-top:1px solid var(--border-soft)}   /* the top rule under the top bar meets the pane rules */

/* ── folders: the sidebar language (§4.2, DESIGN-CALM §3.1): 32 px tiles, radius 6; hover --surface-hover, active = the
      grey --row-selected fill + --text-strong (no accent, no bar). Counts only where they ask for action, as plain
      numbers: «Ждут ответа» 600 --text-strong, «Непрочитанные» --text-3; the other folders show none ── */
.folders{display:flex;flex-direction:column;min-height:0;padding:12px 8px 16px 16px;border-right:1px solid var(--border-soft);overflow:auto;overscroll-behavior:contain}
.fo{position:relative;display:flex;align-items:center;gap:10px;flex:none;width:100%;height:32px;padding:0 8px;border-radius:var(--radius-s);
  font:var(--t-body);color:var(--text);text-align:left;white-space:nowrap;transition:color var(--dur-1),background var(--dur-1)}
.fo .ic{width:16px;height:16px;flex:none;color:var(--icon);stroke-width:2;transition:color var(--dur-1)}
.fo .ic.wa{color:var(--wa)}
.fo .ic.dt{color:var(--info)}                                                          /* unread is blue everywhere */
.fo .fl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fo:hover{background:var(--surface-hover);color:var(--text-strong)}
.fo:hover .ic:not(.wa,.dt){color:var(--text)}
.fo.on,.fo.on:hover{background:var(--row-selected);color:var(--text-strong);font-weight:600}
.fo.on .ic:not(.wa,.dt){color:var(--text-strong)}
.fo .n{flex:none;font:var(--t-body);color:var(--text-3);font-variant-numeric:tabular-nums}
.fo .n:not(.r,.u){display:none}
.fo .n.r{font-weight:600;color:var(--text-strong)}
.fo .av.xs{width:18px;height:18px;margin:0 -1px;font-size:9px}
/* «Кто пишет» / «О чём пишут» (2026-10-26, DESIGN-CALM §27): their counts are plain --text-3 numbers on every row (they
   are for choosing, not a call to act); an empty choice is dimmed; a topic's colour is an 8 px dot in the icon's place */
.fo .n.k{display:inline;font-weight:400;color:var(--text-3)}
.fo.zero:not(.on){color:var(--text-3)}
.fo .tdi{width:16px;height:16px;flex:none;display:grid;place-items:center}
.fo .tdi i{width:8px;height:8px;border-radius:50%}
/* «Только мои» at the foot, over the channel status */
.fo-mine{display:flex;align-items:center;gap:10px;margin-top:auto;padding:16px 8px 0;font:var(--t-body);color:var(--text);cursor:pointer}
.fo-mine .fl{flex:1}
.fo-mine + .fo-foot{margin-top:0;padding-top:12px}
/* group labels like the sidebar section label .ns: 12/16 500, sentence case, 20 px above */
.fo-g{flex:none;display:flex;align-items:center;height:24px;margin-top:20px;padding:0 8px;font:500 12px/16px var(--font-sans);color:var(--text-3)}
/* channel status at the foot: a 6 px dot per channel, --success when connected, --dot-neutral when not (live data is
   WhatsApp only: «Почта не подключена»); the whole foot links to Настройки → Каналы */
.fo-foot{display:grid;gap:6px;margin-top:auto;padding:16px 8px 0;font:var(--t-caption);color:var(--text-3);text-decoration:none;transition:color var(--dur-1)}
.fo-foot .fl{display:flex;align-items:center;gap:8px}
.fo-foot .st{width:6px;height:6px;flex:none;border-radius:50%;background:var(--dot-neutral)}
.fo-foot .st.ok{background:var(--success)}
.fo-foot:hover{color:var(--text)}

/* ── list ── */
.ilist{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);min-height:0;min-width:0;border-right:1px solid var(--border-soft)}
/* header: folder name 16/24 600 + its count 14/20 --text-3; «Порядок и фильтр», sync, «Написать» as 28 px ghost icon buttons */
.ilh{display:flex;align-items:center;gap:8px;padding:10px 12px 4px 16px}
.ilh-t{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:36px}
.ilh-t h2{margin:0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-heading-s);color:var(--text-strong)}
.ilh-t .cnt{flex:none;font:var(--t-body);color:var(--text-3);font-variant-numeric:tabular-nums}
.ilh-r{display:flex;align-items:center;gap:2px}
.ilh .ib{position:relative;width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:var(--radius-s);color:var(--icon-strong);transition:color var(--dur-1),background var(--dur-1)}
.ilh .ib:hover,.ilh .ib[aria-expanded="true"]{color:var(--text-strong);background:var(--surface-hover)}
.ilh .ib .ic{width:16px;height:16px;stroke-width:2}
/* a non-default order or «Только мои» puts a 6 px accent dot on «Порядок и фильтр» (its tooltip says which) */
.ilh .ib.vw.on::after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
/* .spin is also the shared spinner helper (components.css): keep the button a button, only its icon turns */
.ilh .ib.sync.spin{display:grid;width:28px;height:28px;border:0;border-radius:var(--radius-s);animation:none}
.ilh .sync.spin .ic{animation:i-spin 600ms var(--ease-move)}
@keyframes i-spin{to{transform:rotate(360deg)}}
/* search: 32 px wrapper (components.css §5.3 rule 2: keyline, 1 px focus line), full pane width */
.isearch{display:flex;align-items:center;gap:8px;height:32px;margin:6px 16px 10px;padding:0 4px 0 8px;color:var(--text-3)}
.isearch > .ic{width:12px;height:12px;flex:none;stroke-width:2.4;color:var(--text-3)}
.isearch input::-webkit-search-cancel-button{display:none}
.isearch .qx{width:16px;height:16px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--icon);transition:background var(--dur-1),color var(--dur-1)}
.isearch .qx:hover{color:var(--text-strong);background:var(--surface-hover)}
.isearch .qx .ic{width:12px;height:12px;stroke-width:2.4}

/* under the search: «Все · Новые · Знакомые» (a full-width segmented row) and the filter menu's choices as pills */
.ifl{display:grid;gap:8px;padding:0 16px 10px}
.ifl:empty{display:none}
.ifl .seg-f > button{height:28px;padding:0 6px;gap:4px}
/* rows sit 8 px in from the pane edges so the selected tile and its keyboard keyline stay inside the scroll box */
.irows{position:relative;overflow:auto;padding:0 8px 8px;outline:0;overscroll-behavior:contain}
.irows:focus-visible{box-shadow:none}                                                  /* the keyline goes on the selected row */
.irows.swap{animation:i-fade var(--dur-3) var(--ease-out)}
.irows .imore{padding:12px 16px 16px;font:var(--t-small);color:var(--text-3)}       /* the next page loads when this line nears (screens/inbox.js) */
@keyframes i-fade{from{opacity:0}to{opacity:1}}
/* day groups: 32 px on --bg, 12/16 500 --text-3; the waiting group carries its colour in a 6 px --dot-orange dot
   (DESIGN-CALM §1.6 / §3.7: the colour lives in the dot) */
.igrp{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;height:32px;margin:0 -8px 2px;padding:6px 20px 0 16px;background:var(--bg);font:500 12px/16px var(--font-sans);color:var(--text-3)}
.igrp > .tnum{font-weight:400}
/* «Ждут ответа» by topic: the topic's colour in its 6 px dot; the auto-replies are one folding line at the end */
.igrp.t > :first-child{display:inline-flex;align-items:center;gap:6px}
.igrp.t i{width:6px;height:6px;border-radius:50%}
.igrp.fold{width:calc(100% + 16px);border:0;cursor:pointer;text-align:left;transition:color var(--dur-1)}
.igrp.fold > :first-child{display:inline-flex;align-items:center;gap:6px}
.igrp.fold .ic{width:12px;height:12px;stroke-width:2.4}
.igrp.fold:hover{color:var(--text-strong)}
.igrp.fold:focus-visible{box-shadow:none;outline:var(--focus-outline);outline-offset:-2px;border-radius:var(--radius-s)}
.igrp.r > :first-child::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;vertical-align:1px;background:var(--dot-orange)}

/* row: 6 | 36 | text, padding 12, no dividers; hover --surface-hover; selected = the grey --row-selected tile, no outline
   (DESIGN-CALM §3.5); only a keyboard-focused list adds one 1 px --focus-color keyline on it. «Keyboard» = .irows.via-keys,
   set by inbox.js on real key use: Chrome also counts the script focus on arrival as :focus-visible */
.irow{--rowbg:var(--surface);position:relative;display:grid;grid-template-columns:6px 36px minmax(0,1fr);column-gap:10px;align-items:start;padding:12px 12px 12px 6px;
  border-radius:var(--radius-m);background:var(--rowbg);cursor:pointer;overflow:hidden;transition:background var(--dur-1),box-shadow var(--dur-1)}
.irow:hover{--rowbg:var(--surface-hover)}
.irow.sel{--rowbg:var(--row-selected);z-index:1}
.irows.via-keys:focus-visible .irow.sel{z-index:2;box-shadow:inset 0 0 0 1px var(--focus-color)}
.irow .ud{width:6px;height:6px;margin-top:15px;border-radius:50%}                       /* centred on the 36 px avatar */
.irow.u .ud{background:var(--info)}
/* client avatar 36 (list and chat header): palette in components.css (data-c), sans 600 */
.iav{position:relative;width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;font:600 13px/1 var(--font-sans);letter-spacing:0}
.iav > .ic{width:16px;height:16px;color:currentColor;stroke-width:2}
/* the neutral avatar (palette 6, 1.06:1 on the grey tile) keeps its circle on a hovered / selected row: a 1 px
   --border-strong edge; the channel badge still cuts it out */
.irow:is(:hover,.sel) .iav[data-c="6"]{box-shadow:inset 0 0 0 1px var(--border-strong)}
/* channel badge: a 16 px circle cut out of the avatar with a 2 px ring in the row colour; glyph 10 px */
.chb{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:var(--rowbg,var(--surface));box-shadow:0 0 0 2px var(--rowbg,var(--surface));transition:background var(--dur-1),box-shadow var(--dur-1)}
.chb .ic{width:10px;height:10px;stroke-width:2.4}
.chb.wa{color:var(--wa)}
.chb.em{color:var(--icon)}
.irow .ibd{display:grid;gap:2px;min-width:0}
/* line 1: name 14/20 500 (600 when unread) + time 12/16, or the waiting status mark (DESIGN-CALM §3.7: it repeats on every
   row, so no badge: a --warning clock glyph next to neutral 12/16 600 --text-2 text, «◷ 4 ч») */
.l1{display:flex;align-items:center;gap:8px;min-width:0;height:20px}
.l1 .who{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 14px/20px var(--font-sans);color:var(--text-strong)}
.irow.u .who{font-weight:600}
.l1 .tm{margin-left:auto;flex:none;font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.l1 .tm.w{display:inline-flex;align-items:center;gap:4px;font:var(--t-caption-strong);color:var(--text-2)}
.l1 .tm .ic{width:12px;height:12px;stroke-width:2.4}
.l1 .tm.w .ic{color:var(--warning)}
/* line 2: the last message 13/18 --text-3 (--text-2 when unread) with receipts and «Вы:» */
.l3{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 13px/18px var(--font-sans);color:var(--text-3)}
.irow.u .l3{color:var(--text-2)}
.l3 .you{color:var(--text-2)}
/* the AI's line about the chat (2026-10-26): 13/18 500 --text, the last message is its title */
.l3.hd{font-weight:500;color:var(--text)}
.irow.u .l3.hd{color:var(--text-strong)}
/* «новый»: the contact first wrote less than 3 days ago — a small pastel info tag after the name */
.l1 .nw{flex:none;padding:0 6px;border-radius:var(--radius-pill);background:var(--badge-info-bg);color:var(--badge-info-text);font:600 11px/16px var(--font-sans)}
/* the third line: the topic (its dot + name, outside «Ждут ответа») and how long we know them, 12/16 --text-3 */
.l4{display:flex;align-items:center;gap:10px;min-width:0;margin-top:2px;font:var(--t-caption);color:var(--text-3);white-space:nowrap;overflow:hidden}
.l4 .tp{display:inline-flex;align-items:center;gap:6px;flex:none;color:var(--text-2)}
.l4 .tp i{width:6px;height:6px;border-radius:50%}
.l4 .mt{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* only an auto-reply: the name and the line step back */
.irow.quiet:not(.sel) :is(.who,.l3.hd){color:var(--text-3)}
.l3 .tk{margin-right:4px;vertical-align:-2px}
.l3 .tk .ic{width:12px;height:12px}
.l3 .at{display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-2px;color:var(--icon);stroke-width:2.4}
/* hover actions: 24×24 ghost icon buttons on the solid row colour (no gradient), on the name line */
.ha{position:absolute;right:10px;top:10px;display:flex;gap:2px;padding-left:8px;background:var(--rowbg);opacity:0;transform:translateX(4px);pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.irow:hover .ha{opacity:1;transform:none;pointer-events:auto;transition-delay:60ms}
.ha button{width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius-xs);color:var(--icon-strong);transition:color var(--dur-1),background var(--dur-1)}
.ha button:hover{color:var(--text-strong);background:var(--surface-offset-hover)}
.irow.sel .ha button:hover{background:var(--row-selected-hover)}                       /* --surface-offset-hover equals the selected grey */
.ha .ic{width:16px;height:16px;stroke-width:2}
.ha .ic.dt{color:var(--info)}
.ha .av.xs{width:18px;height:18px;font-size:9px}
/* a conversation that left the folder stays dimmed in place until the selection moves. Dimmed by colour, not by row
   opacity (that took its small text to 2.3–3.1:1): every text --text-3, the avatar and glyphs at 60% */
.irow.gone :is(.who,.l3,.l3 .you,.l1 .tm.w){color:var(--text-3)}
.irow.gone :is(.iav,.ud,.l1 .tm .ic,.l3 .tk,.l3 .at){opacity:.6}
.gone-note{display:block;margin-top:4px;font:var(--t-caption);color:var(--text-3);font-style:normal}
.irow.leaving{opacity:0;padding-top:0;padding-bottom:0;transition:height 180ms var(--ease-out),padding 180ms var(--ease-out),opacity 140ms var(--ease-out)}
.irow.bump{animation:i-bump 220ms var(--ease-out)}
@keyframes i-bump{0%,100%{transform:none}40%{transform:translateY(-2px)}}
/* empty list: one quiet line (glyph + what is empty) and the way out, if any; the story is told on the right (.ipv-empty) */
.iempty{display:grid;justify-items:start;gap:12px;padding:12px 10px;font:var(--t-body);color:var(--text-3)}
.iempty .ie-l{display:flex;align-items:center;gap:8px}
.iempty .ie-l .ic{width:16px;height:16px;flex:none;color:var(--icon);stroke-width:2}
/* <kbd> on this screen = the .kbd chip (§5.21); deal.css styles .inbox kbd too */

/* ── chat + deal panel: .ipv is a two-column grid — header / thread / reply box in a reading column of at most 880 px
      (centred in the chat), the deal panel 300 on the right over the full height ── */
.ipv{--col:max(24px, (100% - 880px) / 2);display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto minmax(0,1fr) auto;min-height:0;min-width:0;background:var(--bg)}
.ipv > :is(.ipv-hw,.ipv-aiw,.ipv-thread,.iq){grid-column:1;min-width:0;padding-inline:var(--col)}
.ipv > .ipv-hw{grid-row:1;box-shadow:inset 0 -1px 0 var(--border-soft)}
.ipv > .ipv-aiw{grid-row:2}
.ipv > .ipv-thread{grid-row:3}
.ipv > .iq{grid-row:4}
.ipv > .idc-w{grid-column:2;grid-row:1/-1;min-height:0;overflow:auto;overscroll-behavior:contain;box-shadow:inset 1px 0 0 var(--border-soft)}
.ipv > .ipv-empty{grid-column:1/-1;grid-row:1/-1}
.ipv.in > *{animation:ipv-in var(--dur-3) var(--ease-out) both}
@keyframes ipv-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* header: avatar 36, name 16/24 600 (never cut: a long name wraps), channel line 12/16 --text-3; archive and «…» as 28 px
   ghost icon buttons. The contacts and the assignee live in the deal panel; they come back here when it steps aside */
.ipv-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;padding-block:16px 12px}
.ipv-h > .iav{grid-row:1/3}
.ipv-who{display:contents}
.ipv-who b{grid-column:2;grid-row:1;min-width:0;overflow-wrap:anywhere;text-wrap:balance;font:var(--t-heading-s);color:var(--text-strong)}
.ipv-who small{grid-column:2;grid-row:2;display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums}
.ipv-who small .ic{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-2px;color:var(--icon);stroke-width:2.4}
.ipv-who small .ic.wa{color:var(--wa)}
.ipv-who small .ct{display:none}
.ipv-a{grid-column:3;grid-row:1/3;display:flex;align-items:center;gap:2px}
.ipv-a .ib{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-s);color:var(--icon-strong);transition:background var(--dur-1),color var(--dur-1)}
.ipv-a .ib .ic{width:16px;height:16px;stroke-width:2}
.ipv-a .ib:hover,.ipv-a .ib[aria-expanded="true"]{background:var(--surface-hover);color:var(--text-strong)}
.ipv-a .asg-h{display:none;margin-right:4px;color:var(--text-2);font:var(--t-body-strong)}
/* assignee: a ghost picker (avatar, name, updown chevron, §5.4) — in the panel's «Менеджер» row, or in the header */
.asg{display:inline-flex;align-items:center;gap:6px;height:28px;max-width:100%;padding:0 8px 0 6px;border:0;border-radius:var(--radius-s);background:none;
  color:var(--text-strong);font:var(--t-body);white-space:nowrap;cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.asg:hover,.asg[aria-expanded="true"]{background:var(--surface-hover);color:var(--text-strong)}
.asg .av{width:20px;height:20px;font-size:9px}
.asg .an{min-width:0;overflow:hidden;text-overflow:ellipsis}
.asg .ic{width:12px;height:12px;flex:none;color:var(--text-3);stroke-width:2.4}

/* ── deal panel: sections of 16 / 20 padding with --border-soft rules; labels 12/16 600 --text-3 ── */
.ictx{display:flex;flex-direction:column;min-height:100%}
.ix-s{padding:16px 20px;box-shadow:inset 0 -1px 0 var(--border-soft)}
.ix-l{display:flex;align-items:center;margin-bottom:8px;font:var(--t-caption-strong);color:var(--text-3)}
/* pinned notes (deal.js pinsHtml, deal.css .pins) and «Ждём от клиента» in the deal panel (DESIGN-CALM §23) */
.ix-pins{display:grid;gap:6px;margin-top:12px}
.ix-pins .pin{font:var(--t-caption);padding:6px 8px}
.ix-pins .pin-ic{width:12px;height:12px;margin-top:2px}
.ix-pins a.pin-t{-webkit-line-clamp:3}
.ix-pins a.pin-t:hover{text-decoration:underline;text-decoration-color:var(--note-border);text-underline-offset:3px}
.wmini{display:grid;gap:4px;margin:0;padding:0 0 0 16px;font:var(--t-body);color:var(--text)}
.wmini li::marker{color:var(--text-4)}
.ix-open{margin-left:auto;display:inline-flex;align-items:center;gap:2px;border-radius:var(--radius-xs);font:var(--t-caption-strong);color:var(--text-2);transition:color var(--dur-1)}
.ix-open .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.ix-open:hover,.ix-open:hover .ic{color:var(--text-strong)}
/* the deal title is a record link (DESIGN-CALM §3.10): --text-strong with a light 1 px underline, darker on hover */
.ix-n{display:block;overflow-wrap:anywhere;font:var(--t-heading-s);color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--border-strong);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color var(--dur-1)}
.ix-n:hover{text-decoration-color:var(--text-3)}
:is(.ix-n,.ix-open,.ix-lnk):focus-visible{border-radius:var(--radius-xs);box-shadow:var(--focus-ring)}
.ix-st{display:flex;align-items:center;gap:8px;margin-top:8px}
.ix-st .badge{white-space:nowrap}
.ix-step{font:var(--t-caption);color:var(--text-3)}
/* facts: 96 px label column, values 14/20 --text-strong (placeholders --text-3) */
.ix-r{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;min-height:32px;font:var(--t-body)}
.ix-r .k{color:var(--text-3)}
.ix-r .v{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text-strong)}
.ix-r .v b{font-weight:600}
.ix-r .ph{color:var(--text-3)}
.ix-r .asg{margin-left:-6px}
/* next step: type icon + title, the due time under it (--danger with a clock when overdue); none = a warning mark +
   «Запланировать» (secondary) */
.ix-x{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start;font:var(--t-body);color:var(--text)}
.ix-x > .ic{width:16px;height:16px;margin-top:2px;color:var(--icon);stroke-width:2}
.ix-x > .ic.warn{width:12px;height:12px;margin:4px 2px 0;color:var(--warning);stroke-width:2.4}
.ix-x .tt{display:block}
.ix-x .aist{color:var(--ai-text);font-size:12px;cursor:help}
.ix-x .wh{display:flex;align-items:center;gap:4px;margin-top:2px;font:var(--t-caption);color:var(--text-3)}
.ix-x .wh .ic{width:12px;height:12px;stroke-width:2.4}
.ix-x.late .wh{color:var(--danger)}
.ix-x.muted{color:var(--text-3)}
.ix-plan{margin-top:12px}
.ix-lnk{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font:var(--t-body-strong);color:var(--text-2);transition:color var(--dur-1)}
.ix-lnk .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.ix-lnk:hover,.ix-lnk:hover .ic{color:var(--text-strong)}
/* the 7-segment stage bar: passed grey, current blue (--step-*), won all green, lost grey with the current red */
.idl-bar,.ix-bar{display:inline-grid;grid-auto-flow:column;grid-auto-columns:8px;gap:2px}
.ix-bar{display:grid;grid-auto-columns:minmax(0,1fr);margin-top:12px}
:is(.idl-bar,.ix-bar) i{height:4px;border-radius:2px;background:var(--step-future)}
:is(.idl-bar,.ix-bar) i.d{background:var(--step-done)}
:is(.idl-bar,.ix-bar) i.c{background:var(--step-current)}
:is(.idl-bar,.ix-bar).won i{background:var(--success)}
:is(.idl-bar,.ix-bar).lost i{background:var(--border)}
:is(.idl-bar,.ix-bar).lost i.c{background:var(--danger)}

/* ── deal strip: the panel's stand-in below a 1000 px #view (shown by the step at the end): one quiet line under the
      chat header — stage · value · probability · deadline · next step … «Открыть сделку ›» ── */
.idl{display:none;align-items:center;flex-wrap:wrap;gap:4px 16px;min-width:0;min-height:24px;padding-bottom:12px;font:var(--t-body);color:var(--text-3)}
.idl-st{flex:none;display:inline-flex;align-items:center;gap:8px;font:var(--t-body-strong);color:var(--text-strong);cursor:default}
.idl-f{flex:none;display:inline-flex;align-items:center;white-space:nowrap}
.idl-f > * + *::before{content:"·";margin:0 6px;color:var(--text-4)}
.idl-f b{font-weight:600;color:var(--text-strong)}
.idl-f .ic{display:inline-block;width:12px;height:12px;margin-right:4px;vertical-align:-1px;color:var(--icon);stroke-width:2.4}
.idl-x{flex:0 1 auto;display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--text)}
.idl-x > .ic{width:16px;height:16px;flex:none;color:var(--icon);stroke-width:2}
.idl-x > .ic.warn{width:12px;height:12px;color:var(--warning);stroke-width:2.4}
.idl-x .tt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.idl-x.muted{color:var(--text-3)}
.idl-x .aist{flex:none;color:var(--ai-text);font-size:12px;line-height:1;cursor:help}
.idl-x .wh{flex:none;display:inline-flex;align-items:center;gap:4px;color:var(--text-3);white-space:nowrap}
.idl-x.late .wh{color:var(--danger)}
.idl-x .wh .ic{width:12px;height:12px;stroke-width:2.4}
.idl-plan{flex:none;font:var(--t-body-strong);color:var(--link);text-decoration:none}
.idl-plan:hover{text-decoration:underline;text-underline-offset:3px}
.idl-go{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:4px;font:var(--t-body-strong);color:var(--text-2);white-space:nowrap;transition:color var(--dur-1)}
.idl-go .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}
.idl-go:hover,.idl-go:hover .ic{color:var(--text-strong)}
:is(.idl-plan,.idl-go):focus-visible{border-radius:var(--radius-xs);box-shadow:var(--focus-ring)}

/* ── thread: bubbles / notes / events of deal.css; 8 px between messages ── */
.ipv-thread{position:relative;overflow:auto;padding-block:20px 24px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
/* empty preview: the page empty state (§5.24 #1), a 448 column about 120 px down */
.ipv-empty{justify-self:center;display:grid;justify-items:start;align-content:start;box-sizing:border-box;width:100%;max-width:calc(448px + 2 * var(--page-pad));padding:120px var(--page-pad) 0;text-align:left;font:var(--t-body);color:var(--text-3)}
.ipv-empty > .ic{box-sizing:border-box;width:48px;height:48px;padding:14px;margin-bottom:16px;border-radius:var(--radius-m);background:var(--surface-offset);color:var(--text-3);stroke-width:1.6}
.ipv-empty b{display:block;margin-bottom:4px;font:var(--t-heading);color:var(--text-strong)}
.ipv-empty p{margin:0;max-width:448px}
/* the mail folder: the mailbox as a keyline card — address, «Gmail · общий ящик», the status with its dot */
.ie-mb{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;max-width:448px;margin-top:20px;padding:12px 14px;border-radius:var(--radius-l);box-shadow:0 0 0 1px var(--border)}
.ie-mb > .ic{width:16px;height:16px;flex:none;color:var(--icon);stroke-width:2}
.ie-mb .mb-t{flex:1;min-width:0;display:grid}
.ie-mb .mb-t b{margin:0;font:var(--t-body-strong);color:var(--text-strong)}
.ie-mb .mb-t small{font:var(--t-caption);color:var(--text-3)}
.mb-st{flex:none;display:inline-flex;align-items:center;gap:6px;font:var(--t-caption-strong);color:var(--text-3)}
.mb-st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot-neutral)}
.mb-st.ok{color:var(--text-2)}
.mb-st.ok::before{background:var(--success)}
.ie-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ie-acts .btn .ic{width:12px;height:12px;stroke-width:2.4}
/* nothing picked (2026-10-26): what the list holds — one line each, its 6 px dot orange where an answer is due — and
   «Открыть первый» (J); a quiet note under it */
.ipv-sum ul{display:grid;gap:8px;margin:8px 0 0;padding:0;list-style:none;color:var(--text-2)}
.ipv-sum li{display:flex;gap:10px;align-items:baseline}
.ipv-sum li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--dot-neutral);transform:translateY(-1px)}
.ipv-sum li.r::before{background:var(--dot-orange)}
.ipv-sum li b{display:inline;margin:0;font:var(--t-body-strong);color:var(--text-strong)}
.ipv-sum .ie-acts .btn .kbd{margin-left:8px}
.ipv-sum-n{margin-top:12px!important;font:var(--t-caption);color:var(--text-3)}

/* «О чём переписка» between the chat header and the thread (2026-10-26): a --surface-offset card, radius 12, in the
   reading column; the head line (✦, title, the topic, how long we know them, the fold chevron) is its own button; the
   rows 96 px label + text, the first (the AI's line) in 500 --text-strong. Folded: the head + that line */
.ipv-aiw:empty{display:none}
.ipv-aiw{padding-block:12px 8px;box-shadow:inset 0 -1px 0 var(--border-soft)}
.ipv-ai{border-radius:var(--radius-l);background:var(--surface-offset);padding:4px 14px 12px}
.ipv-ai.fold{padding-bottom:10px}
.ipv-ai .ai-h{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:0;border:0;background:none;text-align:left;font:var(--t-caption-strong);color:var(--text-2);cursor:pointer}
.ipv-ai .ai-h > .ic{width:14px;height:14px;flex:none;color:var(--ai-text);stroke-width:2}
.ipv-ai .ai-h b{flex:none;white-space:nowrap}
.ipv-ai .ai-h .tp{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;font-weight:400;color:var(--text-2)}
.ipv-ai .ai-h .tp i{width:6px;height:6px;border-radius:50%}
.ipv-ai .ai-h .mt{margin-left:auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:400;color:var(--text-3)}
.ipv-ai .ai-h .chev{width:12px;height:12px;flex:none;color:var(--text-3);stroke-width:2.4}
.ipv-ai .ai-h:hover .chev,.ipv-ai .ai-h:hover b{color:var(--text-strong)}
.ipv-ai .ai-h:focus-visible{box-shadow:none;outline:var(--focus-outline);outline-offset:2px;border-radius:var(--radius-xs)}
.ipv-ai dl{display:grid;gap:4px;margin:2px 0 0}
.ipv-ai dl > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:baseline}
.ipv-ai dt{font:var(--t-caption);color:var(--text-3)}
.ipv-ai dd{margin:0;font:var(--t-body);color:var(--text)}
.ipv-ai dd.b{font-weight:500;color:var(--text-strong)}
.ipv-ai .ai-one{margin:0;font:500 14px/20px var(--font-sans);color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ipv-ai .ai-old{display:flex;align-items:center;gap:6px;margin:8px 0 0;font:var(--t-caption);color:var(--text-3)}
.ipv-ai .ai-old .ic{width:12px;height:12px;stroke-width:2.4}
/* the older part of a long thread behind one line (screens/inbox.js THREAD_KEEP) */
.ith-more{display:flex;align-items:center;gap:6px;margin:12px auto 4px;height:26px;padding:0 10px;border:0;border-radius:var(--radius-pill);background:none;
  box-shadow:0 0 0 1px var(--border-soft);font:var(--t-caption-strong);color:var(--text-3);cursor:pointer;transition:color var(--dur-1),background var(--dur-1)}
.ith-more .ic{width:12px;height:12px;stroke-width:2.4}
.ith-more:hover{color:var(--text-strong);background:var(--surface-hover)}

/* ── reply box .iq: one box (the components.css keyline, a 1 px focus line, radius 10), the text on top (two lines high,
      grows to 160), the tool row inside: channel tabs, «/» templates, the send key (while the box has focus), «✦ Черновик
      от ИИ», «Отправить» — the screen's one primary (DESIGN-CALM §3.4) ── */
.iq{container:iq / inline-size;position:relative;padding-block:4px 16px;background:var(--bg)}
.iq .cm-rbox{flex-direction:column;align-items:stretch;gap:6px;min-height:0;padding:10px 8px 8px 12px;border-radius:var(--radius-l)}
.iq .cm-rbox textarea{flex:none;height:40px;min-height:40px;padding:0 2px}   /* flex:none — the column box ignored autosize's height (flex:1 from deal.css): long texts scrolled in 2 lines */
.iq .cm-rbox textarea:placeholder-shown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.iq .cm-rbox textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the 24 h window notice: a caution banner (as .cmp-win) */
.iq-win{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:12px 16px;background:var(--banner-caution-bg);border:1px solid var(--banner-caution-border);border-radius:var(--radius-s);font:var(--t-body);color:var(--badge-warning-text)}
.iq-win .ic{width:16px;height:16px;flex:none;color:currentColor}
.iq-win .lnk{margin-left:auto;white-space:nowrap}
/* email mode: the letter's head inside the box, rows of 40 px with --border-soft rules running the box width: «Кому» (the
   address --text-strong, or «Нет email у клиента» with a --warning glyph and «Добавить» → the client card; «от
   info@a5renova.com» at the right), «Тема» (the subject input, no line of its own); the letter is four lines high */
.iq-mail{margin:-10px -8px 6px -12px}
.iq-row{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;box-shadow:inset 0 -1px 0 var(--border-soft);font:var(--t-body)}
.iq-row .k{flex:none;width:40px;color:var(--text-3)}
.iq-row .v{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text-strong)}
.iq-row .v.none{display:inline-flex;align-items:center;gap:6px;color:var(--text-3)}
.iq-row .v.none .ic{width:12px;height:12px;flex:none;color:var(--warning);stroke-width:2.4}
.iq-add{flex:none;font:var(--t-body-strong);color:var(--link);text-decoration:none}
.iq-add:hover{text-decoration:underline;text-underline-offset:3px}
.iq-add:focus-visible{border-radius:var(--radius-xs);box-shadow:var(--focus-ring)}
.iq-row .fr{flex:none;margin-left:auto;font:var(--t-caption);color:var(--text-3);white-space:nowrap}
.iq-row .iq-subj{flex:1;min-width:0;height:38px;padding:0;border:0;box-shadow:none;background:transparent;font:var(--t-body);color:var(--text-strong)}
.iq-row .iq-subj:focus{box-shadow:none}
.iq-row .iq-subj::placeholder{color:var(--text-4)}
.iq[data-mode="em"] .cm-rbox textarea{height:96px;min-height:96px}
/* note mode: the box takes the note colours, the textarea stays transparent */
.iq[data-mode="note"] .cm-rbox{background:var(--note-bg);box-shadow:0 0 0 1px var(--note-border)}
.iq[data-mode="note"] .cm-rbox:focus-within{box-shadow:var(--focus-ring)}
.iq-bar{display:flex;align-items:center;gap:4px;min-width:0}
/* channel tabs: the segmented control (.seg) made quiet — no keylines, the selected one a pressed grey */
.iq .iq-bar .iq-ch{gap:2px;margin-left:-4px}
.iq .iq-bar .iq-ch > button{height:28px;padding:0 8px;gap:6px;background:none;box-shadow:none;font:500 13px/18px var(--font-sans);color:var(--text-3)}
.iq .iq-bar .iq-ch > button:hover{background:var(--surface-hover);color:var(--text-strong);box-shadow:none}
.iq .iq-bar .iq-ch > button.on{background:var(--surface-pressed);color:var(--text-strong);box-shadow:none}
.iq .iq-bar .iq-ch > button:focus-visible{box-shadow:var(--focus-ring)}
.iq-ch button .ic{width:12px;height:12px;stroke-width:2.4}
.iq-bar .ib{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:var(--radius-s);color:var(--icon);transition:color var(--dur-1),background var(--dur-1)}
.iq-bar .ib:hover{color:var(--text-strong);background:var(--surface-hover)}
.iq-bar .ib .ic{width:16px;height:16px;stroke-width:2}
.iq-bar .hint{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;overflow:hidden;white-space:nowrap;font:var(--t-caption);color:var(--text-3);opacity:0;transition:opacity var(--dur-2)}
.iq:focus-within .iq-bar .hint{opacity:1}
/* «✦ Подсказать»: an AI action (DESIGN-CALM §3.13), neutral label, the ✦ in the AI colour; while the AI writes it is
   the neutral working pill: pressed grey, --text-strong label, a grey spinner arc */
.iq-bar .ai2{flex:none;margin:0 0 0 auto;align-self:center;height:28px;padding:0 8px;border-radius:var(--radius-s);font:500 13px/18px var(--font-sans)}
.iq-bar .hint + .ai2{margin-left:4px}
/* «✦ Оформить» takes the place of «Подсказать» while the box holds something to turn into a message (aiPanel o.swap) */
.iq-bar .aix-fmt:not([hidden]){margin-left:auto}
.iq-bar .aix-fmt:not([hidden]) + .ai2{margin-left:0}
.iq-bar .ai2:hover{background:var(--surface-hover)}
.iq.gen .iq-bar .ai2{padding:0 10px;background:var(--surface-pressed);color:var(--text-strong);box-shadow:none;font:600 12px/16px var(--font-sans)}
.iq.gen .ai2 .ic{display:none}
.iq.gen .ai2::before{content:"";width:12px;height:12px;flex:none;box-sizing:border-box;border:2px solid var(--border-strong);border-top-color:var(--text-2);border-radius:50%;animation:i-spin .8s linear infinite}
.iq.gen .ai2.has::after{background:var(--text-2)}
.iq .send,.iq .stop{height:28px;margin-left:4px}
.iq .send .kbd{display:none}                                                            /* the send key shows as the hint */
/* under the box: the post-insert strip only, when it shows */
.iq-f{margin-top:8px}
.iq-f:not(:has(> .aistrip:not([hidden]))){display:none}
.iq-f .aistrip{margin-left:0;justify-content:flex-start}
/* live mode: the «sending is off» note (live.css) is one quiet caption over the box, not a grey band */
html.is-live:not(.wa-send) .inbox .iq[data-mode="wa"]::before,html.is-live:not(.mail-send) .inbox .iq[data-mode="em"]::before{margin:0 0 8px;padding:0 2px;background:none;box-shadow:none;font:var(--t-caption);color:var(--text-3)}
@container iq (max-width:640px){
  .iq-bar .hint{display:none}
  .iq .iq-bar .iq-ch > button .ic{display:none}
}
@container iq (max-width:560px){
  .iq-f .aistrip > span:first-of-type{display:none}                              /* «Текст ИИ»: the ✦ says it */
  .iq-f .aistrip{gap:2px 2px}
  .iq-f .aistrip button,.iq-f .aistrip .aix-ru{padding:0 6px}
}
@container iq (max-width:520px){
  .iq-bar .ai2 > span{display:none}
  .iq-bar .aix-fmt{width:28px;padding:0;justify-content:center;font-size:0;gap:0}    /* ✦ alone, like «Подсказать»; the tooltip names it */
}
@container iq (max-width:460px){                                                    /* the bar was 8px wider than the box at 424px */
  .iq .iq-bar .iq-ch > button{padding:0 6px}
}

/* ── narrower #view (§4.6): the panes give way in this order — folders and list a little, then the folders become
      icons, then the deal panel steps aside for the strip (and the contacts / assignee return to the chat header) ── */
@container view (max-width:1399px){
  .inbox{grid-template-columns:224px 320px minmax(0,1fr)}
  .ipv{grid-template-columns:minmax(0,1fr) 272px}
}
@container view (max-width:1199px){
  .inbox{grid-template-columns:64px 320px minmax(0,1fr)}
  .folders .fl,.fo-foot{display:none}
  .fo-g{visibility:hidden;margin-top:0}                                                 /* the label becomes a 24 px gap */
  .fo{justify-content:center;width:40px;padding:0}
  /* «Ждут ответа» keeps its count as the collapsed sidebar's accent dot (base.css .nb-accent): 6 px at the icon's
     top-right with a 2 px ring in the tile colour; «Непрочитанные» shows none, its icon already is the blue dot */
  .fo .n{position:absolute;top:6px;left:24px;width:6px;height:6px;border-radius:50%;font-size:0;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
  .fo:hover .n{box-shadow:0 0 0 2px var(--surface-hover)}
  .fo.on .n{box-shadow:0 0 0 2px var(--row-selected)}
  .fo .n.u,.fo .n.k,.fo-mine{display:none}
}
@container view (max-width:999px){
  .inbox{grid-template-columns:64px 300px minmax(0,1fr)}
  .ipv{grid-template-columns:minmax(0,1fr)}
  .ipv > .idc-w{display:none}
  .idl{display:flex}
  .ipv-who small .ct{display:inline}
  .ipv-a .asg-h{display:inline-flex}
}

@media (prefers-reduced-motion: reduce){
  .ha,.ipv.in > *{transform:none!important}
  .irows.swap,.ipv.in > *,.irow.bump{animation:none}
  .ilh .sync.spin .ic{animation:none}
  .iq.gen .ai2::before{animation-duration:2s}
}
/* waiting 15 minutes to a day (the owner's pick 8, js/alerts.js): the timer turns red */
.l1 .tm.w.late,.l1 .tm.w.late .ic{color:var(--danger)}