/* App-owned additions on top of the design's app.css (keep tiny; move into design when stable). */
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.strong { font-weight: 700; }
.login .center { margin-top: var(--s4); }
.pw-once { font-size: var(--fs-xl); letter-spacing: .06em; padding: var(--s3); border-radius: var(--r-md); background: var(--surface-2); text-align: center; user-select: all; word-break: break-all; }
.langs [aria-pressed="true"] { color: var(--accent); }
.list > .item .switch { margin-left: var(--s2); }
.list > .item.user-row { flex-wrap: wrap; row-gap: var(--s1); }
.user-ctl { margin-left: auto; }
@media (max-width: 559px) { .user-ctl { width: 100%; justify-content: flex-end; } span.user-ctl { text-align: right; } }
/* Orders (M2): spacing helpers instead of the prototype's inline styles (CSP style-src 'self'). */
.mt1 { margin-top: var(--s1); } .mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); }
.mb2 { margin-bottom: var(--s2); } .mb3 { margin-bottom: var(--s3); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
fieldset.bare { border: 0; margin: 0; padding: 0; min-width: 0; }
.olist { margin-top: var(--s4); }
.banner.stale { align-items: center; margin-bottom: var(--s3); }
.order-h { margin: var(--s3) 0 var(--s1); font-size: var(--fs-xl); overflow-wrap: anywhere; }
.sec-acts .btn, .order-bar .row .btn { flex: 1; min-width: 0; }
.actionbar.order-bar { flex-direction: column; gap: 6px; }
.photo-slot .thumb { position: relative; }
.photo-slot .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-slot .thumb .badge { position: absolute; left: var(--s2); bottom: var(--s2); }
.badge.on-photo { background: var(--surface); color: var(--text); }
.photo-slot label.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.av0 { background: var(--btn); } .av1 { background: var(--ok-soft); } .av2 { background: var(--warn-soft); }
.av3 { background: var(--info-soft); } .av4 { background: var(--violet-soft); } .av5 { background: var(--danger-soft); }
.seg button { min-width: 0; }
.amt-pos .cur, .amt-neg .cur { margin-left: 3px; font-weight: 600; }
/* Four order tabs don't fit one row on a phone in ru / hi: 2 × 2 below 560 px. */
@media (max-width: 559px) { .seg.tabs4 { display: grid; grid-template-columns: 1fr 1fr; } }
/* Notifications (M3): one list item per channel kind, its rows (devices / addresses / hooks) inside. */
.list > .item.nitem { flex-direction: column; align-items: stretch; gap: 0; padding-top: var(--s3); padding-bottom: var(--s3); }
.nitem > .row { gap: var(--s3); }
.nicon { flex: none; color: var(--text-muted); display: grid; }
.nicon svg { width: 22px; height: 22px; }
.nrow { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.nrow .strong { overflow-wrap: anywhere; }
.nacts { gap: var(--s2); }
.nev summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent-ink); }
.nitem .row > .input { flex: 1; min-width: 0; }
.nrow > .row > .grow { flex: 1 1 160px; }
/* Chats (M3): the design's .chat / .msgs / .composer, plus what the prototype did inline (CSP). */
.chat .seg a { text-decoration: none; }
.msg > .grow { min-width: 0; }
.msg img.pic { display: block; margin-top: var(--s2); border-radius: var(--r-sm); max-width: min(220px, 100%); max-height: 260px; width: auto; height: auto; aspect-ratio: auto; background: var(--surface-2); }
.msg .pic-missing { display: grid; place-items: center; margin-top: var(--s2); width: 120px; height: 90px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); }
.msg .pic-missing svg { width: 28px; height: 28px; }
.msgs .older { align-self: center; }
.msgs .empty { margin: auto; }
.composer .stack.grow { gap: var(--s2); }
.composer .compose-row { align-items: flex-end; gap: var(--s2); }
.composer .quote-pick { align-items: flex-start; }
.composer .quote-pick .quote { margin-top: 0; }

/* Money (M4): payout rows, the request form's fieldset, the "sent" card. */
.pay-row { flex-wrap: wrap; align-items: flex-start; }
.pay-row .grow { flex: 1 1 180px; }
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.plain legend { margin-bottom: var(--s2); }
.sent-card { text-align: center; padding: var(--s6, 32px) var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.sent-card > svg { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
/* Icons in muted info rows (e.g. «Only X sees the login…») keep text size; an unsized SVG would fill the column. */
.row.muted > svg { width: 18px; height: 18px; flex: none; align-self: flex-start; margin-top: 2px; }

/* ---- Dense CRM-style UI (owner 15.10 DESIGN): one row per order, popovers for the rest ---- */
body.is-test { --test-h: 0px; } /* the TEST label is a chip now, not a strip */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); font-size: 11px; font-weight: 600; white-space: nowrap; flex: none; }
.chip svg { width: 12px; height: 12px; }
.chip.test { background: var(--test-bg); color: var(--test-fg); font-weight: 800; letter-spacing: .02em; }
.chip.prob { background: var(--danger-soft); color: var(--danger); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.topbar .chip.test { margin-left: var(--s2); }
.login .box > .chip.test { align-self: center; margin-bottom: var(--s3); }

.sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-muted); }
.sdot[data-s="assigned"] { background: var(--s-assigned); }
.sdot[data-s="handed"] { background: var(--s-handed); }
.sdot[data-s="in_progress"] { background: var(--s-in_progress); }
.sdot[data-s="done"] { background: var(--s-done); }
.sdot[data-s="cancelled"] { background: var(--s-cancelled); }
/* «Возвращён в Бустинг»: out of this team's hands, shown like a cancelled order */
.sdot[data-s="returned"] { background: var(--s-cancelled); }
.badge[data-s="returned"] { color: var(--s-cancelled); background: var(--s-cancelled-bg); }

.olist.rows { margin-top: var(--s3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.orow { display: flex; align-items: center; gap: var(--s2); height: 44px; padding: 0 var(--s1) 0 var(--s3); border-top: 1px solid var(--border); cursor: pointer; min-width: 0; }
.orow:first-child { border-top: 0; }
.orow:hover, .orow:focus-within { background: var(--surface-3); }
.orow.has-problem { box-shadow: inset 3px 0 0 var(--danger); }
.otitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.otitle:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-2); }
.onum { color: var(--text-muted); font-family: var(--mono); font-weight: 400; font-size: var(--fs-xs); }
.ochips { display: flex; gap: 4px; flex: none; }
.ocd { flex: none; font-size: var(--fs-xs); white-space: nowrap; text-align: right; min-width: 80px; }
.ocd .countdown { font-weight: 700; }
.avatar.xs { width: 24px; height: 24px; font-size: 10px; }
.avatar.none { background: transparent; border: 1px dashed var(--border-2); }
.oprice { flex: none; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 64px; text-align: right; }
.oprice .cur { font-size: 10px; }
.oacts { display: flex; gap: 2px; flex: none; }
.btn.ibtn { width: 32px; height: 32px; min-height: 32px; padding: 0; border-radius: var(--r-md); flex: none; }
.btn.ibtn svg { width: 16px; height: 16px; }
.oinfo { display: none; }
@media (hover: none) { .oinfo { display: inline-flex; } }
@media (max-width: 559px) {
  .orow { padding-left: var(--s2); gap: 6px; }
  .orow .chip.plat, .orow .oprice, .orow .avatar.xs { display: none; }
  .ocd { min-width: 64px; }
}
/* phone card (owner 16.10): a live row shows what to do, the login and one big labelled button — no expanding */
.ocard { display: none; }
@media (max-width: 559px) {
  .orow.has-card { flex-wrap: wrap; height: auto; padding: var(--s3); row-gap: var(--s2); }
  .orow.has-card .otitle { white-space: normal; font-size: var(--fs-md); }
  .orow.has-card .oacts { display: none; }
  .orow.has-card .ocard { display: flex; flex-direction: column; gap: var(--s2); flex: 0 0 100%; min-width: 0; cursor: default; }
  .ocard-meta { color: var(--text-muted); font-size: var(--fs-sm); }
  .ocard-note { margin: 0; font-size: var(--fs-sm); color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
  .ocard-cred { display: flex; gap: var(--s2); }
  .ocard-cred .btn { flex: 1; min-height: 44px; }
  .ocard .btn.block { min-height: 48px; }
  .ocard-flag { align-self: center; min-height: 44px; color: var(--text-muted); }
}
.obig input[type=file] { display: none; }
.obig-t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.obig-t small { font-size: var(--fs-xs); font-weight: 400; }
.shot-pick { margin-top: var(--s2); min-height: 44px; }
.shot-pick input[type=file] { display: none; }
.shot-pick[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.ofilter[hidden] { display: none; }

.skel-row { height: 44px; border-top: 1px solid var(--border); background: var(--surface); }
.skel-row:first-child { border-top: 0; }
.skel-row::after { content: ""; display: block; margin: 15px var(--s3); height: 14px; width: 60%; border-radius: var(--r-sm); background: var(--surface-3); }
.empty1 { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin: var(--s4) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.empty1 svg, .note1 svg { width: 16px; height: 16px; flex: none; }
.note1 { display: flex; align-items: center; gap: var(--s2); margin: var(--s3) 0 0; padding: 6px var(--s3); border-radius: var(--r-md); font-size: var(--fs-xs); background: var(--info-soft); }
.note1.danger { background: var(--danger-soft); } .note1.danger svg { color: var(--danger); }
.note1.warn { background: var(--warn-soft); } .note1.warn svg { color: var(--warn); }
.seg.tabs4 button, .seg button { min-height: 34px; }

/* popover */
.pop { position: fixed; z-index: 60; left: 0; top: 0; width: max-content; max-width: min(360px, calc(100vw - 16px)); max-height: min(60vh, 480px); overflow: auto;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); padding: var(--s3); font-size: var(--fs-sm); }
.pop[hidden] { display: none; }
.pop-t { font-weight: 700; margin-bottom: 2px; }
.pop-h { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: var(--s3) 0 var(--s1); }
.pop-h:first-child { margin-top: 0; }
.pop-warn { display: flex; gap: 6px; align-items: center; margin-top: var(--s2); color: var(--danger); font-size: var(--fs-xs); font-weight: 700; }
.pop-warn svg { width: 14px; height: 14px; }
.pop .list > .item { min-height: 0; padding: 6px 0; }
.pop .kv { grid-template-columns: minmax(80px, 40%) 1fr; gap: 4px var(--s2); font-size: var(--fs-xs); }
.pop .kv dt { font-size: var(--fs-xs); }
.pop .timeline li { padding-bottom: var(--s2); font-size: var(--fs-xs); }
.pop ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pshots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.pshot img, .pshot > svg { display: block; width: 100%; max-width: 160px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); }

/* order view */
.ohead { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-sm); }
.ostate { font-weight: 700; }
.ohead .countdown { font-size: var(--fs-md); }
.ohead + .order-h { margin: var(--s2) 0 2px; font-size: var(--fs-lg); }
.ofacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--text-muted); font-size: var(--fs-sm); min-width: 0; }
.ofacts .sep { color: var(--text-muted); } /* 6.6:1 on --bg (was opacity .6 = 3.2:1) */
.ofacts + .bar { margin-top: var(--s2); height: 4px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.pill svg { width: 14px; height: 14px; color: var(--text-muted); }
.pill .n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pill:hover, .pill[aria-expanded="true"] { background: var(--surface-3); }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.pill.danger svg { color: var(--danger); }
.card.tight { padding: var(--s2) var(--s3); }
.card.tight .cred { padding: 4px var(--s2); gap: var(--s2); }
.card.tight .cred .muted { min-width: 52px; font-family: var(--font); }
.shot { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.sthumb { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--text-muted); }
.sthumb img { width: 100%; height: 100%; object-fit: cover; }
.sthumb svg { width: 18px; height: 18px; }
.shot input[type=file] { display: none; }
.shot label.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.order-bar .row { flex-wrap: nowrap; }
.order-bar .row > .btn { flex: 1; min-width: 0; }
.tight-acts { gap: 4px; flex: none; margin-left: auto; }

@media (prefers-reduced-motion: no-preference) {
  .orow, .pill { transition: background-color 100ms ease-out; }
  .pop:not([hidden]) { animation: bx-pop 120ms ease-out; }
  @keyframes bx-pop { from { opacity: 0; transform: translateY(-2px); } }
  .skel-row::after { animation: bx-skel 1.2s ease-in-out infinite alternate; }
  @keyframes bx-skel { from { opacity: .5; } to { opacity: 1; } }
}

/* ---- click-to-copy (owner 15.10 DESIGN addendum) ---- */
[data-cv] { cursor: copy; border-radius: var(--r-sm); }
[data-cv]:not(button):hover { background: var(--ghost-hover); }
[data-cv]:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.otitle [data-pop-row] { color: var(--text); }

/* ---- chats = the CRM «Команда» messenger look (owner 15.10 DESIGN addendum; crm team.css #ivt rules) ---- */
.chat .msgs { gap: 0; padding: var(--s2) 0 var(--s5); }
.chat .msgs > * { flex: none; }
.cm { position: relative; display: flex; align-items: flex-start; gap: var(--s4); margin-top: 17px; padding: 2px var(--s4) 2px var(--s4); min-height: 22px; }
.cm.is-cont { margin-top: 0; padding-top: 1px; padding-bottom: 1px; }
.cm:hover { background: rgba(4, 4, 5, .07); }
.cm-ava { width: 40px; height: 40px; font-size: 15px; margin-top: 2px; }
.cm-ava.iv { background: var(--btn); color: #fff; }
.cm-gut { flex: none; width: 40px; padding-top: 3px; color: var(--text-dim); font-size: 11px; line-height: 1.375; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; visibility: hidden; }
.cm.is-cont:hover .cm-gut { visibility: visible; }
@media (hover: none) { .cm-gut { visibility: visible; opacity: .7; } }
.cm-col { flex: 1; min-width: 0; }
.cm-hd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s2); line-height: 1.375; }
.cm-who { font-size: 15px; font-weight: 600; color: #F2F3F5; }
.cm-who.is-iv { color: var(--accent-ink); }
.cm-hd time { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.cm-hd .chip { align-self: center; height: 16px; font-size: 10px; }
.cm-txt { color: var(--text); font-size: 15px; line-height: 1.375; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.cm .pic { display: block; margin-top: 4px; border-radius: var(--r-md); max-width: min(320px, 100%); max-height: 260px; object-fit: cover; background: var(--surface-2); }
.cm .quote { margin-top: 4px; max-width: min(420px, 100%); }
.cm .state { font-size: var(--fs-xs); color: var(--text-muted); }
.cm .state.failed { color: var(--danger); }
.cm.is-pending .cm-txt { opacity: .6; }
.cm-day { display: flex; align-items: center; gap: var(--s2); margin: 20px var(--s4) 4px; }
.cm-day::before, .cm-day::after { content: ""; flex: 1; height: 1px; background: var(--border-2); }
.cm-day span { color: var(--text-dim); font-size: 12px; font-weight: 600; }
.cm-new { display: flex; align-items: center; margin: 12px var(--s4) 6px; }
.cm-new::before { content: ""; flex: 1; height: 1px; background: #F23F43; }
.cm-new span { flex: none; padding: 1px 8px; border-radius: var(--r-pill); background: #DA373C; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; line-height: 1.5; }
.chat .older { align-self: center; margin: var(--s2) 0; }
/* composer: the CRM's rounded field + icon buttons */
.chat .composer { padding: var(--s2) var(--s3) calc(var(--s2) + var(--nav-h) + env(safe-area-inset-bottom)); }
.chat .composer textarea { border-radius: 12px; min-height: 42px; padding: 10px 13px; background: var(--surface-2); border: 1px solid var(--border-2); font-size: 15px; line-height: 1.4; }
.chat .composer textarea:focus { border-color: var(--accent); outline: none; }
@media (min-width: 960px) { .chat .composer { padding-bottom: var(--s3); } .cm { padding-right: 48px; } }

/* ---- emoji: the CRM kit (owner 15.10 «emojis and reactions like in discord»). Twemoji 17.0.3, CC BY 4.0.
   The font downloads only when a page shows an emoji (unicode-range = the CRM's ivemoji.css). ---- */
@font-face { font-family: "IV Twemoji 17"; src: url(/emoji/iv-twemoji-17.0.3.woff2) format("woff2"); font-display: block;
  ascent-override: 80.5%; descent-override: 19.5%; line-gap-override: 0%; unicode-range:U+A9,U+AE,U+200D,U+203C,U+2049,U+20E3,U+2122,U+2139,U+2194-2199,U+21A9-21AA,U+231A-231B,U+2328,U+23CF,U+23E9-23F3,U+23F8-23FA,U+24C2,U+25AA-25AB,U+25B6,U+25C0,U+25FB-25FE,U+2600-2604,U+260E,U+2611,U+2614-2615,U+2618,U+261D,U+2620,U+2622-2623,U+2626,U+262A,U+262E-262F,U+2638-263A,U+2640,U+2642,U+2648-2653,U+265F-2660,U+2663,U+2665-2666,U+2668,U+267B,U+267E-267F,U+2692-2697,U+2699,U+269B-269C,U+26A0-26A1,U+26A7,U+26AA-26AB,U+26B0-26B1,U+26BD-26BE,U+26C4-26C5,U+26C8,U+26CE-26CF,U+26D1,U+26D3-26D4,U+26E9-26EA,U+26F0-26F5,U+26F7-26FA,U+26FD,U+2702,U+2705,U+2708-270D,U+270F,U+2712,U+2714,U+2716,U+271D,U+2721,U+2728,U+2733-2734,U+2744,U+2747,U+274C,U+274E,U+2753-2755,U+2757,U+2763-2764,U+2795-2797,U+27A1,U+27B0,U+27BF,U+2934-2935,U+2B05-2B07,U+2B1B-2B1C,U+2B50,U+2B55,U+3030,U+303D,U+3297,U+3299,U+E50A,U+FE0F,U+1F004,U+1F0CF,U+1F170-1F171,U+1F17E-1F17F,U+1F18E,U+1F191-1F19A,U+1F1E6-1F1FF,U+1F201-1F202,U+1F21A,U+1F22F,U+1F232-1F23A,U+1F250-1F251,U+1F300-1F321,U+1F324-1F393,U+1F396-1F397,U+1F399-1F39B,U+1F39E-1F3F0,U+1F3F3-1F3F5,U+1F3F7-1F4FD,U+1F4FF-1F53D,U+1F549-1F54E,U+1F550-1F567,U+1F56F-1F570,U+1F573-1F57A,U+1F587,U+1F58A-1F58D,U+1F590,U+1F595-1F596,U+1F5A4-1F5A5,U+1F5A8,U+1F5B1-1F5B2,U+1F5BC,U+1F5C2-1F5C4,U+1F5D1-1F5D3,U+1F5DC-1F5DE,U+1F5E1,U+1F5E3,U+1F5E8,U+1F5EF,U+1F5F3,U+1F5FA-1F64F,U+1F680-1F6C5,U+1F6CB-1F6D2,U+1F6D5-1F6D8,U+1F6DC-1F6E5,U+1F6E9,U+1F6EB-1F6EC,U+1F6F0,U+1F6F3-1F6FC,U+1F7E0-1F7EB,U+1F7F0,U+1F90C-1F93A,U+1F93C-1F945,U+1F947-1F9FF,U+1FA70-1FA7C,U+1FA80-1FA8A,U+1FA8E-1FAC6,U+1FAC8,U+1FACD-1FADC,U+1FADF-1FAEA,U+1FAEF-1FAF8,U+E0062-E0063,U+E0065,U+E0067,U+E006C,U+E006E,U+E0073-E0074,U+E0077,U+E007F; }
.chat, .emo-pick, .rx-tip, .emo-sug { font-family: "IV Twemoji 17", var(--font); }

.ctab-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--badge); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

/* composer: grows to ~6 lines, no native scrollbar until then, theme focus (no browser-blue outline) */
.chat .composer { position: relative; }
.chat .composer textarea { overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.chat .composer textarea.is-max { overflow-y: auto; }
.chat .composer textarea::-webkit-scrollbar { width: 8px; }
.chat .composer textarea::-webkit-scrollbar-button { display: none; height: 0; }
.chat .composer textarea::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.chat .composer textarea::-webkit-scrollbar-track { background: transparent; }
.chat .composer textarea:focus, .chat .composer textarea:focus-visible { outline: none; box-shadow: none; border-color: var(--accent); }
.chat .msgs { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.chat .msgs::-webkit-scrollbar { width: 8px; } .chat .msgs::-webkit-scrollbar-button { display: none; height: 0; }
.chat .msgs::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.emo-sug { position: absolute; left: var(--s3); right: var(--s3); bottom: 100%; margin-bottom: 4px; display: flex; flex-direction: column; padding: 4px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); z-index: 30; }
.emo-sug[hidden] { display: none; }
.emo-s { display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s2); border: 0; border-radius: var(--r-md); background: none; color: var(--text); font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.emo-s span { font-size: 20px; line-height: 1; }
.emo-s.is-on, .emo-s:hover { background: var(--surface-3); }

/* picker */
.emo-pick { position: fixed; z-index: 70; left: 0; top: 0; width: min(352px, calc(100vw - 16px)); height: min(420px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); overflow: hidden; }
.emo-top { padding: var(--s2); }
.emo-q { height: 34px; min-height: 0; font-size: var(--fs-sm); padding: 0 var(--s3); }
.emo-cats { display: flex; gap: 2px; padding: 0 var(--s2) 4px; border-bottom: 1px solid var(--border); }
.emo-tab { flex: 1; height: 30px; border: 0; border-radius: var(--r-md); background: none; font-size: 18px; line-height: 1; cursor: pointer; filter: grayscale(.6); }
.emo-tab:hover { background: var(--surface-3); filter: none; }
.emo-grid { flex: 1; overflow-y: auto; padding: 0 var(--s2) var(--s2); scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.emo-grid section { content-visibility: auto; contain-intrinsic-size: auto 300px; }
.emo-grid h4 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 4px 4px; background: var(--surface); color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.emo-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.emo-c { height: 40px; border: 0; border-radius: var(--r-md); background: none; font-size: 26px; line-height: 1; cursor: pointer; }
.emo-c:hover, .emo-c:focus-visible { background: var(--surface-3); outline: none; }
.emo-note { padding: var(--s4); color: var(--text-muted); font-size: var(--fs-sm); text-align: center; }
.emo-foot { display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 4px var(--s3); border-top: 1px solid var(--border); background: var(--surface-2); font-size: var(--fs-xs); }
.emo-big { font-size: 24px; line-height: 1; }
.emo-name { font-weight: 600; color: var(--text); }
.emo-credit { color: var(--text-dim); font-size: 10px; }

/* reactions: chips under the message, Discord-like; hover tools at the row's top right */
.rxs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rx { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: var(--surface-2); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.rx .rx-e { font-size: 16px; line-height: 1; }
.rx:hover:not(:disabled) { border-color: var(--border-2); }
.rx.is-me { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); color: var(--accent-ink); }
.rx:disabled { cursor: default; }
.rx-add { color: var(--text-muted); opacity: 0; }
.rx-add svg { width: 16px; height: 16px; }
.cm:hover .rx-add, .rx-add:focus-visible { opacity: 1; }
@media (hover: none) { .rx-add { opacity: 1; } }
.cm-tools { position: absolute; top: -14px; right: var(--s4); z-index: 2; display: none; gap: 0; padding: 2px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.cm:hover .cm-tools, .cm-tools:focus-within { display: flex; }
@media (hover: none) { .cm-tools { display: none !important; } }
.cm-tool { width: 32px; height: 28px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.cm-tool:hover { background: var(--surface-3); color: var(--text); }
.cm-tool svg { width: 18px; height: 18px; }
.rx-tip { display: flex; align-items: center; gap: var(--s3); }
.rx-big { font-size: 40px; line-height: 1; }

/* ---- orders page: stacked sections + inline dropdown (owner «ORDER ROWS») ---- */
.ofilter { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ofilter .oq { flex: 1 1 200px; min-width: 0; height: 36px; min-height: 0; font-size: var(--fs-sm); }
.ofilter select { flex: 0 1 180px; height: 36px; min-height: 0; padding: 0 var(--s2); font-size: var(--fs-sm); }
.osec { margin-top: var(--s4); }
.osec-h { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.osec-h .n { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--surface-2); color: var(--text-muted); font-size: 11px; line-height: 18px; text-align: center; letter-spacing: 0; }
.osec-h.danger { color: var(--danger); } .osec-h.danger .n { background: var(--danger-soft); color: var(--danger); }
button.osec-h { cursor: pointer; } button.osec-h svg { width: 14px; height: 14px; }
.osec .olist.rows { margin-top: 0; }
.orow.is-open { background: var(--surface-3); }
.odrop { display: grid; grid-template-rows: 0fr; border-top: 1px solid var(--border); background: var(--bg); }
.odrop.is-open { grid-template-rows: 1fr; }
.odrop-in { overflow: hidden; min-height: 0; }
.odrop-pad { padding: var(--s3) var(--s3) var(--s3) calc(var(--s3) + 16px); }
.skel-line { height: 12px; margin: 8px 0; width: 70%; border-radius: var(--r-sm); background: var(--surface-3); }
.skel-line:nth-child(2) { width: 50%; } .skel-line:nth-child(3) { width: 60%; }
.dgrid { display: grid; grid-template-columns: 1fr; gap: var(--s2) var(--s5); margin-top: var(--s2); }
@media (min-width: 720px) { .dgrid { grid-template-columns: 1fr 1fr; } }
.dcol { min-width: 0; font-size: var(--fs-sm); }
.dcol .list > .item { min-height: 0; padding: 6px 0; }
.dcol .kv { grid-template-columns: minmax(80px, 40%) 1fr; gap: 4px var(--s2); font-size: var(--fs-xs); }
.dcol .kv dt { font-size: var(--fs-xs); }
.dcol .timeline li { padding-bottom: var(--s2); font-size: var(--fs-xs); }
.dcol ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dprob { padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--danger-soft); }
.dprob .pop-h { color: var(--danger); margin-top: 0; }
.dacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--border); }
.dacts .hint { flex-basis: 100%; }
.gap2 { gap: var(--s2); }
@media (prefers-reduced-motion: no-preference) { .odrop { transition: grid-template-rows 150ms ease-out; } }

/* ---- sidebar: order summary + chat channels (owner 15.10) ---- */
.sb-block:empty { display: none; }
.sb-block { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.sb-h { padding: 0 var(--s2) 4px; color: var(--text-dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sb-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sb-counts a { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px var(--s2); border-radius: var(--r-md); color: var(--text-muted); font-size: 12px; text-decoration: none; }
.sb-counts a b { color: var(--text); font-variant-numeric: tabular-nums; }
.sb-counts a.is-bad, .sb-counts a.is-bad b { color: var(--danger); }
.sb-counts a:hover, .sb-o:hover, .sb-ch:hover { background: var(--ghost-hover); }
.sb-next { margin-top: 4px; display: flex; flex-direction: column; }
.sb-o { display: flex; align-items: center; gap: 6px; padding: 4px var(--s2); border-radius: var(--r-md); color: var(--text); font-size: 12px; text-decoration: none; min-width: 0; }
.sb-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-o .countdown { flex: none; font-size: 11px; }
.sb-empty { margin: 0; padding: 0 var(--s2); color: var(--text-dim); font-size: 12px; }
.sb-ch { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s2); border-radius: var(--r-md); color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.sb-ch.is-on { background: var(--selected); color: #fff; }
.sb-hash { color: var(--text-dim); font-size: 18px; font-weight: 400; width: 14px; text-align: center; }
.sb-ch.is-on .sb-hash { color: inherit; } /* the selected channel's # is white like its name (was 3.7:1) */
.sb-chs { display: flex; flex-direction: column; min-width: 180px; }
.osec.flash .osec-h, .osec-h.flash { color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) { .osec .osec-h { transition: color 150ms; } }
.osec-h .n:empty { display: none; }

/* ---- new-order intake card (bottom-right on desktop, bottom sheet on phones) + availability ---- */
.intake { position: fixed; z-index: 65; right: var(--s4); bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s2); width: min(360px, calc(100vw - 16px)); pointer-events: none; }
.intake:empty { display: none; }
.icard { pointer-events: auto; padding: var(--s3); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); border-left: 3px solid var(--accent); }
.icard-h { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); white-space: nowrap; }
.icard-h > svg { width: 16px; height: 16px; color: var(--accent-ink); flex: none; }
.icard-t { margin-top: 6px; font-weight: 700; overflow-wrap: anywhere; }
.icard-m { display: flex; flex-wrap: wrap; gap: 4px var(--s3); margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); }
.icard-a { display: flex; gap: var(--s2); margin-top: var(--s3); }
.icard-a .btn { flex: 1; }
.icard-d { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.icard-d textarea { min-height: 56px; font-size: var(--fs-sm); }
.chip-btn { height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.chip-btn.is-on { border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 959px) { .intake { left: 8px; right: 8px; width: auto; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px); } }
@media (prefers-reduced-motion: no-preference) { .icard { animation: bx-pop 140ms ease-out; } }
.sb-wait:empty { display: none; }
.sb-wait { margin: 0 0 4px; padding: 2px var(--s2); color: var(--warn); font-size: 12px; font-weight: 700; }
.avail-host:empty { display: none; }
.avail { display: flex; align-items: center; gap: var(--s2); width: 100%; height: 32px; margin: var(--s2) 0; padding: 0 var(--s2); border-radius: var(--r-md); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; }
.avail svg { width: 14px; height: 14px; color: var(--text-muted); }
.adot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ok-fill); }
.avail.is-off .adot, .adot.is-off { background: var(--danger); }
.avail.is-off_for .adot, .adot.is-off_for { background: var(--warn); }
.adot.is-on { background: var(--ok-fill); }
.radio .av-h { width: auto; height: 32px; min-height: 0; padding: 0 var(--s2); }
.icard-h b { flex: 1; min-width: 0; } .icard-h .ibtn { width: 28px; height: 28px; min-height: 28px; }
.icard-h b { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 559px) { .ofilter select { flex: 1 1 40%; } }

/* ---- avatars: picture or the CRM-style initial; availability dot on my own ---- */
img.avatar { object-fit: cover; background: var(--surface-3); }
.avatar.lg { width: 64px; height: 64px; font-size: 24px; flex: none; }
.avatar.xxs { width: 18px; height: 18px; font-size: 8px; }
.ava-btn { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; line-height: 0; }
.ava-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ava-btn:hover .avatar { filter: brightness(1.1); }
.who-ava { position: relative; flex: none; line-height: 0; }
.who-ava .avatar { width: 32px; height: 32px; font-size: 13px; }
.who-ava .adot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border: 2px solid var(--surface); }
.sidenav .who .grow { min-width: 0; }
.rx-faces { display: flex; gap: 2px; margin: 4px 0 2px; }
/* on chat pages the intake card sits above the composer */
body.chat-page .intake { bottom: 76px; }
@media (max-width: 959px) { body.chat-page .intake { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 72px); } }