/* A5 CRM — deal.css (screen: deal page #/deal/:id; DESIGN-STRIPE.md §6.2, §5.26–5.28). Owned by screens/deal.js (G3). Also holds the shared conversation pieces that screens/inbox.js reuses: .cm-* (feed items, reply box, attachments), the «/» template picker .tpl, the AI variants panel .aiv-*, the post-insert strip .aistrip and the AI task modals .aic-*. Full width (DESIGN-CALM §14): the header band (crumb, H1 + status, facts, actions, stepper), then three panes over hairlines — «Свойства» left (label | value rows), the conversation in the middle (a reading column of at most 880 px), AI + next steps + files right; below 1500 px of #view two panes (data-look="am", screens/deal.js layout) — the owner's pick of five looks (DESIGN-CALM §15). Every colour is a token of base.css; both themes come from the tokens. */ /* ── layout: the header band .dtop, then the panes .dl | .dr | .dx (each scrolls on its own; hairlines between) ── */ .deal{--dpad:32px;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;background:var(--bg)} .dtop{min-width:0;padding:0 var(--dpad) 16px;box-shadow:inset 0 -1px 0 var(--border-soft)} .dbody{display:grid;grid-template-columns:360px minmax(0,1fr) 384px;grid-template-rows:minmax(0,1fr);min-height:0} .dbody > :is(.dl,.dx){min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px var(--dpad) 40px} .dbody > .dl{box-shadow:inset -1px 0 0 var(--border-soft)} .dbody > .dx{box-shadow:inset 1px 0 0 var(--border-soft)} /* look a on a narrower #view: the right pane's blocks sit in the left one (AI + next steps on top, files at the bottom) */ .deal[data-look="am"] .dbody{grid-template-columns:352px minmax(0,1fr)} .deal[data-look="am"] .dbody > .dx{display:none} .dbody .blk + .blk{margin-top:32px} .dbody .blk:empty{display:none} /* the stage glyph in the «Этап» row (a menu of the stages, as the stepper) */ .kv .kv-ring{flex:none;width:14px;height:14px} /* ── header .dh: crumb, H1 + status badge, subtitle; actions centred on the title line ── */ .dh{display:flex;align-items:flex-start;gap:16px;padding-top:20px} .dh-m{min-width:0;flex:1} .dh-crumb{display:flex;align-items:center;gap:8px;height:20px;margin-bottom:4px} .dh-crumb .crumb{font:var(--t-body-strong);color:var(--text-2);text-decoration:none;transition:color var(--dur-1)} /* crumb = secondary text (DESIGN-CALM §3.10) */ .dh-crumb .crumb:hover{color:var(--text-strong)} .dh-crumb .crumb-ch{width:12px;height:12px;color:var(--text-3);stroke-width:2} /* the title row is inline text: «8 px, then the status badge» right after the title's last word, also when a long title wraps (a wrapped flex item would take the whole row and push the badge to the far right) */ .dh-t{display:block;min-width:0;min-height:36px;font:var(--t-title);color:var(--text-strong)} .dh .ttl{position:relative;display:inline;margin:0 0 0 -6px;padding:1px 6px;border-radius:var(--radius-s);-webkit-box-decoration-break:clone;box-decoration-break:clone;font:var(--t-title);color:var(--text-strong);overflow-wrap:anywhere;cursor:text;transition:background var(--dur-1) var(--ease-out)} .dh .ttl:hover{background:var(--surface-hover)} .dh .ttl.editing{display:inline-flex;vertical-align:top;width:min(680px,100%);max-width:680px;padding:0 6px;background:var(--surface);box-shadow:var(--focus-ring);cursor:default} .dh .ttl .ie{flex:1;min-width:0;height:36px;padding:0;border:0;outline:0;background:transparent;box-shadow:none;font:inherit;color:inherit} .dh-t > .aim{display:inline-block;vertical-align:top;margin-top:12px} /* ✦ on the last title line, 6 px (the title's padding) after it */ .dh-t > .dh-st{vertical-align:top;margin:8px 0 0 2px} /* 20 px badge centred on the 36 px line, 8 px after the text */ .dh-t > .aim + .dh-st{margin-left:8px} .dh .ttl.editing ~ :is(.aim,.dh-st){margin-left:8px} /* while the title is an input box: 8 px of air after its keyline (2 px read as touching) */ /* subtitle: «client · value · phone · deadline», 16/24 --text-2; the waiting badge after it */ .dh .facts{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0;min-height:24px;margin-top:4px;font:var(--t-lead);color:var(--text-2)} .dh .facts .fi{display:inline-flex;align-items:center;min-width:0} .dh .facts .fi + .fi::before{content:"·";margin:0 8px;color:var(--text-3)} /* the client name = a record link (DESIGN-CALM §3.10): text-1 with a light underline, never the accent */ .dh .facts .cl{font-weight:600;color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--border-strong);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--dur-1)} .dh .facts .cl:hover{text-decoration-color:var(--text-3)} .dh .facts .val{position:relative;display:inline-flex;align-items:center;gap:6px;margin:0 -6px;padding:0 6px;border-radius:var(--radius-s);font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--dur-1) var(--ease-out)} .dh .facts .val:hover{background:var(--surface-hover)} .dh .facts .val .ph{font-weight:400;color:var(--text-3)} .dh .facts .val.editing{height:28px;margin-top:-2px;margin-bottom:-2px;padding:0 8px;background:var(--surface);box-shadow:var(--focus-ring);cursor:default} .dh .facts .val .ie{width:120px;height:24px;padding:0;border:0;outline:0;background:transparent;box-shadow:none;font:inherit;color:inherit} .dh .facts .val .cur{font:var(--t-lead);color:var(--text-3)} /* phone: sans tabular, dotted underline + 12 px copy icon (§5.1) */ .dh .facts .tel{display:inline-flex;align-items:center;gap:6px;padding:0;border-radius:var(--radius-xs);font:inherit;color:inherit} .dh .facts .tel > span{text-decoration:underline dotted var(--text-4);text-underline-offset:4px;transition:text-decoration-color var(--dur-1)} .dh .facts .tel .ic{width:12px;height:12px;color:var(--icon);stroke-width:2.4} .dh .facts .tel:hover > span{text-decoration-color:var(--text-2)} .dh .facts .tel:hover .ic{color:var(--text)} /* 12 px before the waiting badge as a spacer at the END of the last fact: when the badge wraps, the spacer stays on the line above and the badge starts flush with the subtitle */ .dh .facts .fi:has(+ .wchip)::after{content:"";flex:none;width:12px} .dh .r{display:flex;align-items:center;gap:8px;flex:none;padding-top:28px} /* crumb 20 + 4, then the 36 px title line: a 28 px button sits on its centre */ .dh .owner{padding:0 8px 0 4px} .dh .owner .on{max-width:140px;overflow:hidden;text-overflow:ellipsis} .dh .owner .ic:last-child{color:var(--text-3)} /* ✦ «поставил ИИ» outside the data column (title, stage hint, pipeline selector) */ .deal .aim{flex:none;color:var(--ai-text);font-size:12px;line-height:1;cursor:help} /* ── stage stepper .stages (segmented progress bar, §6.2 + the stage bar rule of §6.1) ── */ .stages{display:grid;gap:8px;padding-top:20px} .steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px} .step{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);column-gap:6px;row-gap:6px;min-width:0;padding:0;border-radius:var(--radius-xs);text-align:left;font:var(--t-caption-strong);color:var(--text-2);cursor:pointer} .step i{grid-column:1/-1;position:relative;display:block;height:4px;border-radius:2px;background:var(--step-future);overflow:hidden} .step i b{position:absolute;inset:0;background:var(--step-done);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-5) var(--ease-move) calc(var(--k, 0) * 45ms),background-color var(--dur-3) var(--ease-out)} .step .sn{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:color var(--dur-1) var(--ease-out)} .step .sd{font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums} .step.done i b{transform:none} .step.cur i b{transform:none;background:var(--step-current)} .step.cur .sn{color:var(--text-strong)} /* the current stage label is neutral; its bar carries the accent */ .step:hover .sn,.step:focus-visible .sn,.step.ph .sn{color:var(--text-strong)} .step.cur:hover .sn,.step.cur.ph .sn{color:var(--text-strong)} /* hover preview: forward = the segments it would fill, back = the ones it would empty (dashed) */ /* forward: dashed --step-done (the --accent-bg-2 fill of §6.2 is ≈1.0:1 on --step-future in light, so it never read) */ .step.pf i b{transform:none;background:repeating-linear-gradient(90deg,var(--step-done) 0 4px,transparent 4px 7px);transition:transform var(--dur-2) var(--ease-out)} .step.pb i b{background:repeating-linear-gradient(90deg,var(--border) 0 4px,transparent 4px 7px);transition:none} .steps.closed .step{cursor:default} .steps.won .step i b{transform:none;background:var(--success)} .steps.won .step .sn{color:var(--text-2)} .steps.lost .step i,.steps.lost .step i b{background:var(--border)} .steps.lost .step.cur i b{background:var(--danger)} .steps.lost .step.cur .sn{color:var(--danger)} /* meta line: pipeline selector (ghost .btn.sm with updown), then «Новый лид · вероятность 10% · 1 д на этапе» */ .st-meta{display:flex;align-items:center;min-height:24px;font:var(--t-caption);color:var(--text-3)} .st-pipe{display:inline-flex;align-items:center;gap:4px;flex:none} .st-pipe:not(:empty) + .st-hint::before{content:"·";margin:0 8px 0 4px;color:var(--text-3)} .pl-sel{display:inline-flex;align-items:center;gap:4px;height:24px;margin-left:-8px;padding:0 8px;border-radius:var(--radius-s);font:var(--t-caption-strong);color:var(--text);transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)} .pl-sel .ic{width:12px;height:12px;color:var(--icon);stroke-width:2.4} .pl-sel .ic:last-child{color:var(--text-3)} .pl-sel:hover,.pl-sel[aria-expanded="true"]{background:var(--surface-hover);color:var(--text-strong)} .pl-sel.nd{color:var(--text-2)} .st-hint b{font-weight:600;color:var(--text-2)} .st-hint b.ok{color:var(--success)} .st-hint .aim{margin-left:4px} .st-hint.pv{color:var(--text)} .st-hint.pv b{color:var(--text-strong)} /* ── won / lost banner (success / critical, §5.14) ── */ .dstatus{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-4) var(--ease-out)} .dstatus.show{grid-template-rows:1fr} .ds-i{overflow:hidden;min-height:0} .ds-c{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface);font:var(--t-body);color:var(--text)} .ds-c .ic{width:16px;height:16px;margin-top:2px;flex:none;color:currentColor} .ds-c b{font-weight:600;color:inherit} .dstatus.won .ds-c{background:var(--banner-success-bg);border-color:var(--banner-success-border);color:var(--badge-success-text)} .ds-c .ds-warn{display:flex;align-items:center;gap:6px;margin-top:4px;font-weight:600} .ds-c .ds-warn .ic{width:14px;height:14px;margin-top:0} .dstatus.lost .ds-c{background:var(--banner-critical-bg);border-color:var(--banner-critical-border);color:var(--badge-danger-text)} /* ── «Не сделка» banner (pipelineId 'nondeal'): the default banner with a secondary «Это сделка» ── */ .dnd{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-4) var(--ease-out)} .dnd.show{grid-template-rows:1fr} .nd-c{display:flex;align-items:center;gap:8px;margin-top:16px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface);font:var(--t-body);color:var(--text)} .nd-c > .ic{width:16px;height:16px;flex:none;color:var(--icon)} .nd-t{flex:1;min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px} .nd-t b{font-weight:600;color:var(--text-strong)} .nd-ai{cursor:help;text-decoration:underline dotted var(--text-4);text-underline-offset:3px} .nd-t small{font:var(--t-caption);color:var(--text-3)} .nd-t small::before{content:"·";margin-right:6px;color:var(--text-3)} .nd-c .btn{flex:none} /* ── «Свойства» (.dl) and the side blocks: collapsible groups, a 40 px heading, then label | value rows split by hairlines — the «Новая сделка» look the owner picked (DESIGN-CALM §11): glyph + label in --text-2, the value cell a 32 px hover tile ── */ .grp + .grp{margin-top:32px} .grp-h{display:flex;align-items:center;gap:8px;min-height:40px;padding-bottom:4px} .grp-t{position:relative;display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:28px;padding:0;border-radius:var(--radius-xs);font:var(--t-heading-s);color:var(--text-strong);text-align:left} .grp-t > span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} /* the fold chevron sits in the pane gutter, 20 px left of the heading: shown on hover / focus and while folded */ .grp-t .chev{position:absolute;left:-20px;top:8px;width:12px;height:12px;color:var(--icon);stroke-width:2.4;opacity:0;transform:rotate(90deg);transition:transform var(--dur-3) var(--ease-out),color var(--dur-1),opacity var(--dur-2) var(--ease-out)} .grp-h:hover .grp-t .chev,.grp-t:focus-visible .chev,.grp.col .grp-t .chev{opacity:1} .grp-t:hover .chev{color:var(--text)} .grp.col .grp-t .chev{transform:none} .grp-h .grp-a{flex:none} .grp-h .grp-a .ic{width:12px;height:12px;stroke-width:2.4} .grp-h .aimark{flex:none;cursor:default} .grp-b{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur-4) var(--ease-out)} .grp.col .grp-b{grid-template-rows:0fr} .grp-i{overflow:hidden;min-height:0} .grp .none{padding:10px 0;font:var(--t-body);color:var(--text-3);box-shadow:inset 0 1px 0 var(--border-soft)} /* rows: 40 px, label column 116 px (glyph 14 + 10 + label), value cell from there to the pane edge */ .kv{display:grid;margin:0;box-shadow:inset 0 1px 0 var(--border-soft)} .kr{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;min-height:40px;padding:4px 0;box-shadow:inset 0 -1px 0 var(--border-soft)} .kv dt{display:flex;align-items:center;gap:10px;min-width:0;padding-right:8px;font:var(--t-body);color:var(--text-2);white-space:nowrap} .kv dt .ic{flex:none;width:14px;height:14px;stroke-width:2;color:var(--icon)} .kv dt span{min-width:0;overflow:hidden;text-overflow:ellipsis} .kv dd{position:relative;display:flex;align-items:center;gap:6px;min-width:0;min-height:32px;margin:0;padding:0 8px;border-radius:var(--radius-s);font:var(--t-body);color:var(--text)} .kv dd .v{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .kv dd .v .vt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kv dd small{font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums} .kv dd .v small.lt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .kv dd .v small.soon{color:var(--warning)} .kv dd .v small.red{color:var(--danger)} /* placeholder actions («Добавить сумму», «Указать срок», «Ожидаемая дата») are ghost placeholders: 400 --text-3, hover --text-strong (DESIGN-CALM §3.10, Attio «Set Description…»); an empty value «—» is --text-3 as well (4.5:1 kept) */ .kv dd .ph{font-weight:400;color:var(--text-3);transition:color var(--dur-1)} .kv dd .ph.emp{font-weight:400;color:var(--text-3)} .kv dd.ro{color:var(--text)} .kv dd.ed{cursor:pointer;transition:background var(--dur-1) var(--ease-out)} .kv dd.ed:hover{background:var(--surface-hover)} .kv dd.ed:hover .ph:not(.emp){color:var(--text-strong)} .kv dd .pen{margin-left:auto;display:grid;color:var(--icon);opacity:0;transition:opacity var(--dur-2) var(--ease-out)} .kv dd .pen .ic{width:12px;height:12px;stroke-width:2.4} .kv dd.ed:hover .pen,.kv dd.ed:focus-visible .pen{opacity:1} /* AI field: dotted underline in the AI colour + ✦ + a 20 px ghost «confirm» with a green check */ .kv dd.aif .v{text-decoration:underline dotted var(--ai-text);text-decoration-thickness:1px;text-underline-offset:4px} .kv dd .aim{flex:none;color:var(--ai-text);font-size:12px;line-height:1;cursor:help} .kv dd :is(.vf,.qk){flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:var(--radius-xs);color:var(--icon);transition:color var(--dur-1),background var(--dur-1),opacity var(--dur-2) var(--ease-out)} .kv dd :is(.vf,.qk) .ic{width:12px;height:12px;stroke-width:2.4} .kv dd .vf{color:var(--success);opacity:0} .kv dd.ed:hover .vf,.kv dd .vf:focus-visible{opacity:1} .kv dd :is(.vf,.qk):hover{background:var(--surface-offset-hover)} .kv dd .qk:hover{color:var(--text)} .kv dd .qk .wa{color:var(--wa)} /* contact type: the whole cell opens a menu */ .kv dd.pick{padding:0} .kv-b{display:flex;align-items:center;gap:6px;flex:1;min-width:0;min-height:32px;padding:0 8px;border-radius:var(--radius-s);text-align:left;font:var(--t-body);color:var(--text);transition:background var(--dur-1) var(--ease-out)} .kv-b:hover,.kv-b[aria-expanded="true"]{background:var(--surface-hover)} .kv-b .dn{width:12px;height:12px;margin-left:auto;color:var(--icon);stroke-width:2.4;opacity:0;transition:opacity var(--dur-2) var(--ease-out)} .kv-b:hover .dn,.kv-b:focus-visible .dn,.kv-b[aria-expanded="true"] .dn{opacity:1} /* inline editor (§5.3): the input look in the 32 px cell with the focus keyline (DESIGN-CALM §3.8: one 1 px accent keyline, no halo), drawn INSET: .grp-i (overflow:hidden, for the fold) clips at the cell edge. Same for the keyboard ring on value cells, the «Тип» button and documents */ .kv dd.editing{min-height:32px;padding:0 8px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--focus-color);cursor:default} .kv dd.ed:focus-visible,.kv-b:focus-visible,.doc:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)} .kv dd.editing .ie{flex:1;min-width:0;height:30px;padding:0;border:0;outline:0;background-color:transparent;box-shadow:none;font:var(--t-body);color:var(--text)} .kv dd.editing select.ie{padding-right:20px;background:transparent var(--select-chevron) no-repeat right 0 center/12px 12px;cursor:pointer} .ed .cur{font:var(--t-body);color:var(--text-3)} .ed .ie-err{position:absolute;left:0;top:calc(100% + 4px);z-index:3;padding:6px 8px;border-radius:var(--radius-s);background:var(--surface-raised);color:var(--danger);font:var(--t-small);box-shadow:var(--shadow-3);white-space:nowrap} .ed .ie-err:empty{display:none} .ed.err{box-shadow:inset 0 0 0 2px var(--danger)!important} /* focused error = 2 px red, no blue (DESIGN-CALM §3.8), drawn inside the box (clip, above) */ .ed.saved{animation:ed-saved 600ms var(--ease-out)} .ed.saved::after{content:"✓";position:absolute;right:6px;top:50%;margin-top:-10px;line-height:20px;color:var(--success);font-weight:700;font-size:12px;animation:ed-tick 1s var(--ease-out) forwards;pointer-events:none} @keyframes ed-saved{from{background:var(--badge-success-bg)}to{background:transparent}} @keyframes ed-tick{0%{opacity:0;transform:scale(.7)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}} .kv .av.xs{flex:none} .kv dd.tags{flex-wrap:wrap;gap:4px;padding-top:4px;padding-bottom:4px} .kv .lab.vip{background:var(--badge-purple-bg);color:var(--badge-purple-text);box-shadow:inset 0 0 0 1px var(--badge-purple-border)} .kv .tg-add .ic{color:var(--icon)} /* client note = a note card (§5.26) */ .cnote{display:flex;gap:8px;margin:12px 0 0;padding:12px 16px;background:var(--note-bg);border:1px solid var(--note-border);border-radius:var(--radius-m);font:var(--t-body);color:var(--text)} .cnote .ic{width:12px;height:12px;flex:none;margin-top:4px;color:var(--note-label);stroke-width:2.4} /* documents: rows split by hairlines as the properties, file tag = neutral badge, status = badge */ .grp[data-grp="docs"] .grp-i{box-shadow:inset 0 1px 0 var(--border-soft)} .grp[data-grp="docs"] .none{box-shadow:none} .deal .blk[hidden]{display:none} /* «Клиенты партнёра» (UI.referrals; the deal page of a partner and the partner's client card): a summary line, then two-line rows split by hairlines as the next steps — client … sum / stage ring + name · the deal title */ .rf-sum{padding:0 0 10px;font:var(--t-caption);color:var(--text-3)} .rf-sum b{font-weight:600;color:var(--text-strong)} .rf-sum .sp,.rf-row .sp{margin:0 6px;font-style:normal;color:var(--text-4)} .rf-row{display:grid;gap:4px;min-height:60px;padding:10px 8px;color:inherit;text-decoration:none;box-shadow:inset 0 -1px 0 var(--border-soft);transition:background var(--dur-1)} .rf-sum + .rf-row,.grp-i > .rf-row:first-child{box-shadow:inset 0 1px 0 var(--border-soft),inset 0 -1px 0 var(--border-soft)} .rf-row:hover{background:var(--surface-hover)} .rf-row:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--focus-color)} .rf-row .l1{display:flex;align-items:baseline;gap:12px;min-width:0} .rf-row .l1 b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-body-medium);color:var(--text-strong)} .rf-row .l1 .sm{flex:none;font:var(--t-body-strong);color:var(--text-strong)} .rf-row .l2{display:flex;align-items:center;min-width:0;font:var(--t-caption);color:var(--text-3);white-space:nowrap;overflow:hidden} .rf-row .l2 > span{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis} .rf-row .l2 > span:first-child{flex:none;color:var(--text-2)} .rf-row .l2 .stg-ring{flex:none;width:12px;height:12px} .rf-row .l2 .ok{color:var(--success)} .rf-row.closed .l1 :is(b,.sm){font-weight:400;color:var(--text-3)} .rf-none{line-height:20px} .doc{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:start;column-gap:8px; /* a fixed tag column: every name starts at the same x */width:100%;min-height:52px;margin:0;padding:10px 8px;text-align:left;box-shadow:inset 0 -1px 0 var(--border-soft);transition:background var(--dur-1) var(--ease-out)} .doc:hover{background:var(--surface-hover)} .doc:focus-visible{border-radius:var(--radius-s)} .doc > .ft{justify-self:start;margin-top:2px} .doc .dn{display:grid;gap:4px;min-width:0} .doc .dn b{font:var(--t-body-medium);color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .doc .dm{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0} .doc .dm small{font:var(--t-caption);color:var(--text-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .doc .dm .did{font:var(--t-mono)} /* the document number is an ID: mono 12/16 (§2.1) */ .doc .dv{font:var(--t-body-strong);color:var(--text-strong);font-variant-numeric:tabular-nums} .doc .dv.ok{color:var(--success)} .doc .dv.rej{font-weight:400;color:var(--text-3);text-decoration:line-through} /* file-type tags (PDF, PLAN, IMG): neutral badge, 16 px, 11/16 600 sans */ .cm-file .ft,.doc .ft,.cm-ach .ft{display:inline-flex;align-items:center;flex:none;height:16px;padding:0 4px;border-radius:var(--radius-xs);background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border);font:600 11px/16px var(--font-sans);letter-spacing:0} /* ── the conversation pane .dr: feed tabs, the feed, the composer in a reading column of at most 880 px (as the inbox, DESIGN-CALM §6); the tab bar's and the composer's hairlines run the full pane width. .dr is a size container, so --col (in cqw) means the same inside every descendant (a % in a custom property resolves where it is used) ── */ .dr{--col:max(var(--dpad), (100cqw - 880px) / 2);container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(150px,1fr) auto;min-height:0;min-width:0;background:var(--bg)} /* explicit column: an implicit auto track would grow to the widest row's min-content */ .dr > *{min-width:0;padding-inline:var(--col)} /* a short window (≤ 840 px high, e.g. 1280×800): the chat keeps 120 px and the composer always stays in view */ @media (max-height:840px){ .dr{grid-template-rows:auto minmax(120px,1fr) auto} } .dr > .cmp > .tpl{left:var(--col);width:min(460px,calc(100cqw - 2 * var(--col)))} @container (max-width:720px){ .ftabs .sync{display:none} } html.is-live .deal .dr > .cmp::before{margin-inline:calc(-1 * var(--col));padding-inline:var(--col)} /* the «sending is off» line runs the full pane width (live.css) */ /* ── the right pane .dx (or the top of .dl on a narrower #view): AI cards, next steps; then the files ── */ .sugw{background:transparent} /* AI suggestion: --ai-bg card with an --ai-border keyline, radius 8 */ .aisug{margin:0 0 16px;border:1px solid var(--ai-border);border-radius:var(--radius-m);background:var(--ai-bg);overflow:hidden; transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),height var(--dur-4) var(--ease-move),margin var(--dur-4) var(--ease-move),border-color var(--dur-3) var(--ease-out),background var(--dur-3) var(--ease-out)} .as-row{display:flex;align-items:center;gap:8px;min-height:52px;padding:12px 16px} .as-ic{display:grid;flex:none;color:var(--ai-text)} .as-ic .ic{width:16px;height:16px;stroke-width:2} .as-tx{flex:1;min-width:0;font:var(--t-body);color:var(--text)} .as-tx b{font-weight:600;color:var(--text-strong)} /* «Почему?» = explain link (§5.1), right after the suggestion's sentence */ .as-w{display:inline-flex;align-items:center;gap:4px;vertical-align:top;height:20px;margin-left:2px;padding:0 2px;border-radius:var(--radius-xs);font:var(--t-body-strong);color:var(--text)} .as-w .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon);transition:transform var(--dur-3) var(--ease-out)} .as-w:hover .explain{text-decoration-color:var(--text-2)} .aisug.why .as-w .ic{transform:rotate(180deg)} .as-row .btn{flex:none} .dx-a .as-row{flex-wrap:wrap;align-items:flex-start;row-gap:12px} .dx-a .as-row > .as-ic{margin-top:2px} .dx-a .as-tx{flex:1 1 calc(100% - 24px)} .dx-a .as-row > .btn.g{order:2;margin-left:24px} .dx-a .as-row > .btn:not(.g){order:3} /* «Принять» / «Написать» is a secondary here: the composer's «Отправить» is the view's one primary (DESIGN-CALM §3.4 recipe «demote primary»; markup unchanged) */ .aisug .btn.g{background:var(--btn-bg);color:var(--btn-text);box-shadow:var(--shadow-control),0 0 0 1px var(--border)} .aisug .btn.g:hover{background:var(--btn-bg-hover);box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong)} .aisug .btn.g:active{background:var(--surface-hover)} .aisug .btn.g:focus-visible{outline:none;box-shadow:var(--shadow-control),var(--focus-ring)} .aisug .btn.g :is(.kbd,kbd){background:var(--kbd-bg);box-shadow:none;color:var(--kbd-text)} .as-why{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-3) var(--ease-out)} .aisug.why .as-why{grid-template-rows:1fr} .as-wi{overflow:hidden;min-height:0} .as-wi > p{margin:0 16px 8px 40px;font:var(--t-body);color:var(--text)} /* quoted messages: a 2 px --border left rule, 14/20 --text-2 */ .as-q{display:grid;grid-template-columns:12px minmax(0,1fr);gap:0 8px;width:calc(100% - 56px);margin:0 16px 8px 40px;padding:2px 0 2px 10px;border-left:2px solid var(--border);text-align:left;transition:border-color var(--dur-1)} .as-q:hover{border-left-color:var(--text-3)} .as-q .ic{width:12px;height:12px;margin-top:4px;color:var(--icon);stroke-width:2.4} .as-q .ic.wa{color:var(--wa)} .as-q .qt{font:var(--t-body);color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .as-q:hover .qt{color:var(--text-strong)} .as-q small{grid-column:2;font:var(--t-caption);color:var(--text-3)} .as-meta.lbl,.as-meta{display:block;margin:4px 16px 12px 40px;font:var(--t-caption);color:var(--text-3)} .aisug.ok{border-color:var(--banner-success-border);background:var(--banner-success-bg)} .aisug.ok :is(.as-ic,.as-tx,.as-tx b){color:var(--badge-success-text)} .aisug.dismiss{opacity:0;transform:translateX(24px)} .aisug.gone{opacity:0;margin-top:0;margin-bottom:0;border-width:0} /* AI pilot summary (live mode): a bordered card; it informs, the suggestion card asks */ .aisum{margin:0 0 16px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface);overflow:hidden} .aisum-w:has(> .aisum) + [data-part="sug"] .aisug{margin-top:-8px} .asm-h{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:4px 12px;text-align:left;transition:background var(--dur-1) var(--ease-out)} .asm-h:hover{background:var(--surface-hover)} .asm-h .as-ic .ic{width:12px;height:12px;stroke-width:2.4} .asm-h b{flex:none;font:var(--t-body-strong);color:var(--text-strong);white-space:nowrap} .asm-p{min-width:0;font:var(--t-body);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .asm-h .lbl{margin-left:auto;flex:none;font:var(--t-caption-strong);color:var(--text-3);white-space:nowrap} .dx-a .asm-h{flex-wrap:wrap;padding:8px 12px} .dx-a .asm-p{order:5;flex:1 1 100%;padding-left:20px;white-space:normal} .asm-c{flex:none;width:12px;height:12px;color:var(--icon);transition:transform var(--dur-3) var(--ease-out)} .aisum.col .asm-c{transform:rotate(-90deg)} .asm-b{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--dur-3) var(--ease-out)} .aisum.col .asm-b{grid-template-rows:0fr} .asm-l{overflow:hidden;min-height:0;margin:0;padding:4px 12px 0 36px;list-style:none;counter-reset:asm} .asm-l li{position:relative;font:var(--t-body);color:var(--text);counter-increment:asm} .asm-l li + li{margin-top:4px} .asm-l li:last-child{padding-bottom:12px} .asm-l li::before{content:counter(asm);position:absolute;left:-16px;top:2px;font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums} /* ── next steps: the group heading (16/24 600) + count + «+ Задача»; two-line task rows split by hairlines ── */ .next-h{display:flex;align-items:center;gap:8px;min-height:40px;padding-bottom:4px} .next-h > .lbl{font:var(--t-heading-s);color:var(--text-strong)} .next-h .add{margin-left:auto} .tlist{box-shadow:inset 0 1px 0 var(--border-soft)} .tlist:has(> .nostep){box-shadow:none} /* ○ · type · title ✦ on the first line, «date · (manager) … ✦ Сделать» under the title; snooze / delete on hover */ .task{position:relative;display:flex;align-items:flex-start;gap:10px;min-height:60px;padding:10px 8px;border-bottom:1px solid var(--border-soft);font:var(--t-body);color:var(--text);min-width:0;overflow:hidden;transition:background var(--dur-1) var(--ease-out)} .task:hover{background:var(--surface-hover)} .task > .cb{margin-top:2px} .tk-m{flex:1;display:grid;gap:4px;min-width:0} .tk-l1{display:flex;align-items:center;gap:8px;min-width:0;min-height:20px} .tk-l2{display:flex;align-items:center;gap:8px;min-width:0;min-height:24px;padding-left:24px} .tk-who{display:inline-flex;align-items:center;gap:4px;min-width:0;font:var(--t-caption);color:var(--text-3);white-space:nowrap} .tk-who::before{content:"·";margin-right:4px} /* round check (DESIGN-CALM §3.11): 16 px circle, --control-border keyline; hover = a darker keyline + a grey tick preview; overdue has no red keyline (the «Просрочено» tag says it); done = the one checkbox blue */ .task .cb{width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center; transition:box-shadow var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),transform var(--dur-1)} .task:not(.done) .cb:hover{box-shadow:0 0 0 1px var(--control-border-hover),var(--shadow-control)} .task .cb.cb:focus-visible{outline:var(--focus-outline);outline-offset:2px} /* the rest keyline stays; a 1 px accent ring 2 px out */ .task .ck{width:10px;height:10px;fill:none;stroke:var(--on-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset var(--dur-3) var(--ease-spring) 60ms} .task:not(.done) .cb:hover .ck{stroke:var(--text-3);stroke-dashoffset:0;opacity:.5;transition:none} .task.done .cb{background:var(--accent);box-shadow:0 0 0 1px var(--accent)} .task.done .ck{stroke-dashoffset:0} .task.done .cb:hover{background:var(--surface);box-shadow:0 0 0 1px var(--control-border-hover)} .task.done .cb:hover .ck{stroke:var(--text-3)} .task .ty{display:grid;flex:none;color:var(--icon)} .task .ty .ic{width:16px;height:16px;stroke-width:2} .task .tt{position:relative;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:color var(--dur-3) var(--ease-out)} .task .tt::after{content:"";position:absolute;left:0;right:0;top:54%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform 200ms var(--ease-out) 80ms} .task.done .tt{color:var(--text-3)} .task.done .tt::after{transform:scaleX(1)} .task .aitag{flex:none;color:var(--ai-text);font-size:12px;line-height:1;cursor:help} .task .when{display:flex;align-items:center;gap:4px;flex:none;font:var(--t-caption);color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums} /* overdue = the date itself in red with a small clock, as on the tasks screen (Attio-like, no pastel tag); «Просрочено» is its tooltip */ .task .when.od{color:var(--danger)} .task .when.od .ic{width:12px;height:12px;stroke-width:2.4} /* «✦ Сделать»: an AI action (DESIGN-CALM §3.13): neutral label, only the ✦ in the AI colour (never clicked while verifying) */ .task .aib{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 4px;border-radius:var(--radius-xs);font:var(--t-body-strong);color:var(--text-2);transition:color var(--dur-1)} .task .aib span{font-size:12px;line-height:1;color:var(--ai-text)} .task .aib:hover{color:var(--text-strong)} .task .tt.go{cursor:pointer} .task .tt.go:hover{color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px} .task.done .aib{visibility:hidden} /* hover actions on a solid --surface-hover */ .task .ta{position:absolute;right:0;top:8px;height:24px;display:flex;align-items:center;gap:2px;padding:0 6px 0 8px;background:var(--surface-hover);opacity:0;transform:translateX(4px);pointer-events:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)} .task:hover .ta,.task:focus-within .ta{opacity:1;transform:none;pointer-events:auto;transition-delay:60ms} .task .ta 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)} .task .ta button:hover{color:var(--text-strong);background:var(--surface-offset-hover)} .task .ta .ic{width:16px;height:16px;stroke-width:2} .task.done .ta{display:none} .task.leaving{min-height:0;padding-top:0;padding-bottom:0;opacity:0;border-bottom-color:transparent;transition:height var(--dur-5) var(--ease-move),padding var(--dur-5) var(--ease-move),opacity 200ms var(--ease-out)} /* «Нет следующего шага»: a dashed box (§5.24 #2), the line first, the quick pills under it */ .nostep{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:4px;padding:16px;border:1px dashed var(--border);border-radius:var(--radius-m);font:var(--t-body);color:var(--text-3)} .nostep .warn{width:16px;height:16px;flex:none;color:var(--warning)} .nostep > span:not(.qch){color:var(--text-2)} .nostep.calm > span:not(.qch){color:var(--text-3)} .qch,.tk-q{display:flex;flex-wrap:wrap;gap:6px} .nostep .qch{flex-basis:100%} /* ── feed filter: underline tabs (§5.9) + «✓ синхронизировано» ── */ .ftabs{position:relative;display:flex;align-items:flex-end;gap:24px;padding-top:14px;box-shadow:inset 0 -1px 0 var(--border-soft)} .ftabs [data-filter]{display:flex;align-items:center;padding:0 0 8px;font:var(--t-body-strong);color:var(--text-2);white-space:nowrap;transition:color var(--dur-1) var(--ease-out)} .ftabs [data-filter]:hover{color:var(--text-strong)} .ftabs [data-filter].on{color:var(--text-strong)} /* monochrome tabs (DESIGN-CALM §3.2): no accent in a tab bar */ /* keyboard focus on an underline tab: a 1 px keyline around the label with 6 px of air and the small radius; it stops 2 px under the text, clear of the ink and the hairline (the global ring sat flush on the first and last glyph) */ .ftabs [data-filter],.cmp-tabs [data-mode]{position:relative} .ftabs [data-filter]:focus-visible,.cmp-tabs [data-mode]:focus-visible{box-shadow:none} .ftabs [data-filter]:focus-visible::after,.cmp-tabs [data-mode]:focus-visible::after{content:"";position:absolute;inset:-2px -6px 6px;border-radius:var(--radius-xs);box-shadow:inset 0 0 0 1px var(--focus-color);pointer-events:none} .ftabs .n{font-weight:400;color:var(--text-3)} .ftabs .n:not(:empty){margin-left:6px} .ftabs .ink,.cmp-tabs .ink{position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:1px;background:var(--tab-ink);pointer-events:none} .ftabs.ready .ink,.cmp-tabs.ready .ink{transition:transform var(--dur-3) var(--ease-out),width var(--dur-3) var(--ease-out)} .ftabs .sync{margin-left:auto;display:flex;align-items:center;gap:4px;padding-bottom:10px;font:var(--t-caption);color:var(--text-3);white-space:nowrap} .ftabs .sync .ic{width:12px;height:12px;color:var(--success);stroke-width:2.4} /* feed: padding 20 0 24 inside the reading column, gap 8 (16 when the side changes) */ .feed{overflow:auto;padding-block:20px 24px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain;transition:opacity var(--dur-2) var(--ease-out)} .feed.fade{opacity:0;transition-duration:100ms} /* ── shared conversation items (.cm-*): deal feed + inbox thread ── */ .cm-day{display:flex;align-items:center;gap:12px;margin:8px 0;font:var(--t-caption-strong);color:var(--text-3)} .cm-day::before,.cm-day::after{content:"";flex:1;height:1px;background:var(--border-soft)} .cm-day span::first-letter{text-transform:uppercase} /* sentence case (§5.26): «ср, 14 октября» → «Ср, 14 октября» */ /* «Новые»: a neutral divider, one step stronger than the day line (DESIGN-CALM §4 G3) */ .cm-newdiv{display:flex;align-items:center;gap:12px;margin:4px 0;font:var(--t-caption-strong);color:var(--text-2)} .cm-newdiv::before,.cm-newdiv::after{content:"";flex:1;height:1px;background:var(--border)} /* event line: 12/16 --text-3, centred, 12 px icon (created / won green, lost red) */ .cm-ev{align-self:center;display:flex;align-items:center;gap:6px;max-width:90%;padding:2px 0;font:var(--t-caption);color:var(--text-3);text-align:center} .cm-ev .ic{width:12px;height:12px;flex:none;stroke-width:2.4;color:var(--text-3)} .cm-ev.ok .ic{color:var(--success)} .cm-ev.bad .ic{color:var(--danger)} .cm-ev b{font-weight:600;color:var(--text-2)} .cm-ev time{color:var(--text-3);font-variant-numeric:tabular-nums} /* chat bubbles (§5.27): 10 px corners, no tails; in = surface + hairline, out = gray50 */ .cm-msg{display:flex;flex-direction:column;align-items:flex-start;gap:2px} .cm-msg.out{align-items:flex-end} .cm-msg.in + .cm-msg.out,.cm-msg.out + .cm-msg.in{margin-top:8px} .cm-bub{max-width:min(64%,560px);padding:8px 12px 6px;border-radius:var(--radius-bubble);font:var(--t-body);color:var(--text);overflow-wrap:anywhere; background:var(--bubble-in-bg);box-shadow:inset 0 0 0 1px var(--bubble-in-border)} .cm-msg.out .cm-bub{background:var(--bubble-out-bg);box-shadow:none} /* a waiting bubble keeps the plain hairline: the status mark above it says «ждёт» (DESIGN-CALM §4 G3) */ .cm-msg.bad .cm-bub{box-shadow:inset 0 0 0 1px var(--badge-danger-border)} .cm-bub .tx{white-space:pre-wrap} .cm-bub .who,.cm-msg .who{display:block;margin-bottom:2px;font:var(--t-caption-strong);color:var(--text-2)} .cm-bub .meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:2px;font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums} .cm-bub .cm-file{display:flex} /* receipts (A5Comms.tickHtml): ✓ sent / ✓✓ delivered = --receipt, ✓✓ read = --receipt-read, ! failed = --danger, – unknown = --text-disabled; 12 px glyph on the 12/16 meta line */ .tk{--tk-read:var(--receipt-read);display:inline-grid;border-radius:var(--radius-xs);color:var(--receipt)} .tk .ic{width:12px;height:12px;stroke-width:2.4} .tk[data-st="read"]{color:var(--tk-read)} .tk[data-st="failed"]{color:var(--danger)} .tk[data-st="unknown"]{color:var(--text-disabled)} .tk[tabindex]:focus-visible,.cm-st:focus-visible{outline:0;box-shadow:var(--focus-ring)} .tk.pop{animation:tk-pop 260ms var(--ease-out)} .cm-st{display:inline-flex;align-items:center;gap:4px;max-width:min(64%,560px);border-radius:var(--radius-xs);font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums} .cm-st[data-st="failed"]{font:var(--t-caption);color:var(--danger)} .cm-st .ic{flex:none;width:12px;height:12px} @keyframes tk-pop{from{opacity:.2;transform:scale(.7)}to{opacity:1;transform:none}} /* the label above a waiting bubble = a status mark (DESIGN-CALM §3.7): a 12 px clock in --warning, neutral text, no badge */ .cm-wl{display:inline-flex;align-items:center;gap:4px;height:auto;margin-bottom:4px;padding:0;border-radius:0;font:var(--t-caption-strong);white-space:nowrap; background:none;color:var(--text-2);box-shadow:none} .cm-wl .ic{width:12px;height:12px;stroke-width:2.4;color:var(--warning)} /* email card: a bordered card; outgoing on --surface-offset */ .cm-mail{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 6%} .cm-mail .mc{align-self:stretch;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden;transition:border-color var(--dur-1) var(--ease-out)} .cm-mail .mc:hover{border-color:var(--border-strong)} .cm-mail.out .mc{background:var(--surface-offset)} /* a waiting email keeps the --border keyline (and its hover); no warning edge (DESIGN-CALM §4 G3) */ .cm-mail .mh{display:grid;grid-template-columns:16px minmax(0,1fr) auto auto;align-items:center;gap:2px 8px;width:100%;padding:12px 16px;text-align:left} .cm-mail .mh > .ic{width:16px;height:16px;color:var(--icon);stroke-width:2} .cm-mail .mh b{font:var(--t-body-strong);color:var(--text-strong);overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .cm-mail .mh .mclip{width:12px;height:12px;color:var(--icon);stroke-width:2.4} .cm-mail .mh time{font:var(--t-caption);color:var(--text-3);font-variant-numeric:tabular-nums} .cm-mail .mw{grid-column:2/-1;font:var(--t-caption);color:var(--text-3)} .cm-mail .pv{grid-column:2/-1;font:var(--t-body);color:var(--text-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .cm-mail.open .pv{display:none} .cm-mail .mh:hover b{text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px} .cm-mail .mb{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-3) var(--ease-out)} .cm-mail.open .mb{grid-template-rows:1fr} .cm-mail .mbi{overflow:hidden;min-height:0} .cm-mail .tx{padding:0 16px 12px 40px;font:var(--t-body);white-space:pre-wrap;color:var(--text)} .cm-mail .fl{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px 40px} .cm-mail .fl .cm-file{margin-top:0} /* attachments: 32 px, radius 6, surface + keyline */ .cm-file{display:inline-flex;align-items:center;gap:8px;max-width:100%;height:32px;margin-top:6px;padding:0 8px;border-radius:var(--radius-s);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);font:var(--t-body);color:var(--text);text-align:left;transition:box-shadow var(--dur-1)} .cm-file:hover{box-shadow:inset 0 0 0 1px var(--border-strong)} a.cm-file{text-decoration:none} .cm-file.expired,.cm-file.pending{color:var(--text-3)} /* live WhatsApp media: css/media.css (js/media.js) */ .cm-file .fn{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .cm-file small{font:var(--t-caption);color:var(--text-3);white-space:nowrap} /* notes (§5.26): Stripe pinned-note orange */ .cm-note{margin:0 6%;padding:12px 16px;background:var(--note-bg);border:1px solid var(--note-border);border-radius:var(--radius-m);font:var(--t-body);color:var(--text)} .cm-note .nh{display:flex;align-items:center;gap:6px;min-height:16px;margin-bottom:4px;font:var(--t-caption);color:var(--note-label)} .cm-note .nh .ic{width:12px;height:12px;flex:none;stroke-width:2.4} .cm-note .nh b{font-weight:600} .cm-note .tx{white-space:pre-wrap;color:var(--text)} /* AI note .ain (live AI actions, or a note of the «ИИ-помощник») + the delete button of the deal page */ .cm-note .aim{flex:none;color:var(--ai-text);font-size:12px;line-height:1} .cm-note.ain .nh b{cursor:help} .cm-note ul.tx{margin:2px 0 0;padding:0 0 0 18px;white-space:normal} .cm-note ul.tx li{margin:2px 0} .cm-note ul.tx li::marker{color:var(--note-label)} .cm-note .nx{flex:none;width:24px;height:24px;margin:-4px -8px -4px auto;display:grid;place-items:center;border-radius:var(--radius-s);color:var(--note-label);opacity:0;transition:opacity var(--dur-2) var(--ease-out),background var(--dur-1)} .cm-note:hover .nx,.cm-note:focus-within .nx{opacity:1} .cm-note .nx:hover{background:var(--surface-hover)} .cm-note .nx .ic{width:12px;height:12px;stroke-width:2.4} /* empty feed: the page empty-state parts (§5.24 #1), centred in the column */ .cm-empty{display:grid;justify-items:start;align-content:center;gap:0;width:100%;max-width:448px;margin:auto;padding:32px 0;text-align:left;font:var(--t-body);color:var(--text-3)} .cm-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} .cm-empty b{display:block;margin-bottom:4px;font:var(--t-heading);color:var(--text-strong)} .cm-empty p{margin:0;max-width:448px} .cm-empty .btn{margin-top:16px} @keyframes cm-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes cm-note-flash{from{background:var(--flash-bg)}to{background:var(--note-bg)}} /* highlight of a quoted / jumped-to item: a soft --accent-bg wash + one 1 px accent ring (DESIGN-CALM §3.14) */ @keyframes cm-hl{0%,35%{background-color:var(--accent-bg);box-shadow:0 0 0 1px var(--accent)}100%{box-shadow:0 0 0 1px transparent}} [data-id].new{animation:cm-in var(--dur-3) var(--ease-out) both} .cm-note.new{animation:cm-in var(--dur-3) var(--ease-out) both,cm-note-flash 900ms var(--ease-out) both} .cm-msg.hl .cm-bub,.cm-mail.hl .mc,.cm-note.hl,.cm-ev.hl{animation:cm-hl 900ms var(--ease-out)} /* ── composer .cmp (§5.28): hairline on top, underline mode tabs, the reply box, footer hints ── */ .cmp{position:relative;background:var(--bg);box-shadow:inset 0 1px 0 var(--border-soft)} .cmp-tabs{position:relative;display:flex;align-items:flex-end;gap:24px;padding-top:12px;box-shadow:inset 0 -1px 0 var(--border)} .cmp-tabs [data-mode]{display:flex;align-items:center;gap:6px;padding:0 0 8px;font:var(--t-body-strong);color:var(--text-2);white-space:nowrap;transition:color var(--dur-1) var(--ease-out)} .cmp-tabs [data-mode]:hover{color:var(--text-strong)} .cmp-tabs [data-mode].on{color:var(--text-strong)} /* monochrome tabs (DESIGN-CALM §3.2); the WhatsApp glyph keeps --wa */ .cmp-tabs [data-mode] .ic{width:12px;height:12px;stroke-width:2.4} .cmp-tabs [data-mode].on .ic.wa{color:var(--wa)} /* «✦ Подсказать»: an AI action (DESIGN-CALM §3.13): neutral label, the ✦ in the AI colour; the «draft ready» dot is --ai-text too; while the AI writes it becomes the neutral working pill */ .ai2{margin-left:auto;align-self:flex-end;display:flex;align-items:center;gap:4px;height:24px;margin-bottom:6px;padding:0 4px;border-radius:var(--radius-pill);font:var(--t-body-strong);color:var(--text-2);white-space:nowrap;transition:color var(--dur-1),background var(--dur-1)} .ai2 .ic{width:12px;height:12px;stroke-width:2.4;color:var(--ai-text)} .ai2[hidden]{display:none} .ai2:hover{color:var(--text-strong)} .ai2.has::after{content:"";flex:none;width:6px;height:6px;margin-left:2px;border-radius:50%;background:var(--ai-text)} .cmp.gen .ai2{padding:0 10px;background:var(--surface-pressed);color:var(--text-strong);box-shadow:none;font:600 12px/16px var(--font-sans)} .cmp.gen .ai2 .ic{display:none} .cmp.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:ai-spin .8s linear infinite} .cmp.gen .ai2.has::after{background:var(--text-2)} @keyframes ai-spin{to{transform:rotate(360deg)}} .cmp-body{padding:12px 0 16px} .cmp-body.anim{transition:height 200ms var(--ease-out)} .pane.in{animation:pane-in 140ms var(--ease-out)} @keyframes pane-in{from{opacity:0}to{opacity:1}} /* reply box: surface + keyline (components.css wrapper rule), radius 8, min 44; 28 px ghost icon buttons */ .cm-rbox{display:flex;align-items:flex-end;gap:4px;min-height:44px;padding:8px;border-radius:var(--radius-m)} .cm-rbox .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)} .cm-rbox .ib:hover{color:var(--text-strong);background:var(--surface-hover)} .cm-rbox .ib .ic{width:16px;height:16px;stroke-width:2} .cm-rbox textarea{flex:1;min-width:0;height:28px;max-height:160px;padding:4px;border:0;outline:0;resize:none;background:transparent;box-shadow:none;font:var(--t-body);color:var(--text)} .cm-rbox textarea::placeholder{color:var(--text-4)} .cm-rbox .btn{flex:none} .cmp .stop,.iq .stop{display:none} .cmp.gen .pane .send,.iq.gen .send{display:none} .cmp.gen .pane .stop,.iq.gen .stop{display:inline-flex} textarea[readonly]{cursor:progress} textarea.glow{animation:cm-glow 900ms var(--ease-out)} textarea.ins{animation:cm-ins 160ms var(--ease-out)} @keyframes cm-glow{from{background-color:var(--ai-bg)}to{background-color:transparent}} @keyframes cm-ins{from{opacity:.35}to{opacity:1}} /* footer hints: 12/16 --text-3 with kbd chips */ .cmp-foot{display:flex;align-items:center;gap:12px;min-height:24px;margin-top:8px;font:var(--t-caption);color:var(--text-3)} .cmp-foot .hint{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap} .cmp-foot .hint .ic{width:12px;height:12px;stroke-width:2.4} .cmp-foot .send,.cmp-foot .stop{margin-left:auto} .pane[data-pane="em"] .cmp-foot .hint{margin-left:auto} .pane[data-pane="em"] .cmp-foot .send,.pane[data-pane="em"] .cmp-foot .stop{margin-left:0} /* in the deal page, the inbox and the template picker = the .kbd chip (§5.21) */ .deal kbd,.inbox kbd,.tpl kbd{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border:0;border-radius:var(--radius-xs);white-space:nowrap; background:var(--kbd-bg);color:var(--kbd-text);font:500 11px/16px var(--font-mono);letter-spacing:0;text-align:center} .deal .btn.g kbd,.inbox .btn.g kbd{background:transparent;box-shadow:inset 0 0 0 1px var(--kbd-on-accent-ring);color:var(--on-accent)} /* post-insert strip: 12/16 600 --text-3, only the leading ✦ in the AI colour (DESIGN-CALM §4 G3); its buttons ghost .btn.sm */ /* its parts never wrap inside themselves: on a narrow row whole parts move to the next line, right-aligned */ .aistrip{display:inline-flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:2px 8px;min-width:0;margin-left:auto;font:var(--t-caption-strong);color:var(--text-3);animation:cm-in var(--dur-3) var(--ease-out)} .aistrip > .ic{flex:none;width:12px;height:12px;stroke-width:2.4;color:var(--ai-text)} .aistrip > span{white-space:nowrap} .aistrip button{display:inline-flex;align-items:center;flex:none;gap:4px;height:24px;padding:0 8px;border-radius:var(--radius-s);font:var(--t-caption-strong);color:var(--text);white-space:nowrap;transition:background var(--dur-1),color var(--dur-1)} .aistrip button:hover{background:var(--surface-hover);color:var(--text-strong)} .aistrip button .ic{width:12px;height:12px;stroke-width:2.4} /* live mode: sending is off, so the draft is copied and pasted into WhatsApp on the phone */ .aistrip.lv{flex-wrap:wrap;row-gap:2px} .aistrip > span[data-tip]{cursor:help} .aistrip .cp{color:var(--text-strong)} .aistrip .cp .ic{color:currentColor} .aistrip .as-ph{font:var(--t-caption);color:var(--text-3)} .aistrip .aix-ru{display:inline-flex;align-items:center;flex:none;gap:4px;height:24px;padding:0 8px;border-radius:var(--radius-s);font:var(--t-caption-strong);color:var(--text-2);cursor:help;white-space:nowrap} .aistrip .aix-ru .ic{width:12px;height:12px;stroke-width:2.2} .aistrip .aix-ru:hover,.aistrip .aix-ru:focus-visible{outline:0;background:var(--surface-hover);color:var(--text-strong)} /* «Tab вставить» / «Tab дописать»: the key of the grey suggestion in the box */ .aistrip button kbd{margin-right:2px;font:600 10px/14px var(--font-sans)} .aistrip .aix-tab{color:var(--ai-text)} .aistrip button > .ic:last-child:not(:first-child){margin-left:-2px} /* the strip takes the hint's place whenever it shows, demo and live (inbox.css does the same for .iq-f) */ .cmp-foot:has(> .aistrip:not([hidden])) > .hint,.iq-f:has(> .aistrip.lv:not([hidden])) > .hint{display:none} /* the 24 h window notice: a caution banner */ .cmp-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)} .cmp-win .ic{width:16px;height:16px;flex:none;color:currentColor} .cmp-win .lnk{margin-left:auto;white-space:nowrap} /* email: To / Subject rows of 36 px with --border-soft lines; the letter in a keyline box */ .em-grid{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:stretch;margin-bottom:12px} .em-grid .lbl{display:flex;align-items:center;height:36px;font:var(--t-body);color:var(--text-3);box-shadow:inset 0 -1px 0 var(--border-soft)} .em-grid input{height:36px;font:var(--t-body);color:var(--text)} .pane[data-pane="em"] textarea,.pane[data-pane="note"] textarea{display:block;width:100%;min-height:76px;max-height:240px;padding:8px 12px;border:0;outline:0;resize:none;border-radius:var(--radius-m); background:var(--surface);box-shadow:0 0 0 1px var(--control-border);font:var(--t-body);color:var(--text);transition:box-shadow var(--dur-1)} .pane[data-pane="em"] textarea:hover{box-shadow:0 0 0 1px var(--control-border-hover)} /* note mode: the box takes the note colours (the old whole-composer yellow is gone) */ .pane[data-pane="note"] textarea{min-height:64px;background:var(--note-bg);box-shadow:0 0 0 1px var(--note-border)} .pane[data-pane="em"] textarea:focus,.pane[data-pane="note"] textarea:focus{box-shadow:var(--focus-ring)} .cm-atts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px} .pane[data-pane="em"] .cm-atts{margin:8px 0 0} .cm-ach{display:inline-flex;align-items:center;gap:8px;height:28px;max-width:320px;padding:0 2px 0 8px;border-radius:var(--radius-s);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);font:var(--t-body);color:var(--text);animation:cm-in var(--dur-3) var(--ease-out)} .cm-ach .fn{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .cm-ach small{font:var(--t-caption);color:var(--text-3)} .cm-ach button{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:var(--radius-xs);color:var(--icon-strong)} .cm-ach button:hover{color:var(--text-strong);background:var(--surface-hover)} .cm-ach button .ic{width:12px;height:12px;stroke-width:2.4} /* task mode: title 28 px, type segmented, due + owner 28 px (components.css), quick pills in the footer */ .tk-title{display:block;width:100%} .tk-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px} .tk-due{font-variant-numeric:tabular-nums} /* the owner picker is a