/* ============================================================================
 * alto-ui-kit.css — КАНОНИЧЕСКАЯ ДИЗАЙН-СИСТЕМА ALTO (1С-стиль).
 *
 * СТАТУС: формируется. Это единый самодостаточный файл (без зависимостей от
 * legacy alto.css) — основа для переделки реального UII проекта. Будущий дом —
 * apps/ui_kit/static/ui_kit/css/. Направление выбрано владельцем: облик 1С
 * (командная панель, форма-документ, сетка ячеек, дерево) на бренд-палитре ALTO.
 *
 * Принципы:
 *  1. Одно рабочее пространство — всё остальное вкладками. Вкладка НИКОГДА не
 *     прокручивается целиком: либо закладки внутри, либо скролл конкретной
 *     внутренней области (тулбар/итоги закреплены).
 *  2. Плотность «как в 1С», семантика цвета и бренд — ALTO (не меняются).
 *  3. Одна область показывает одно (фокус, без мусора).
 *  4. Свой пикер/поповер вместо <select>; действия объекта — правый клик.
 *
 * Оглавление:
 *  [0] Токены   [1] База/сброс   [2] Каркас вкладки (au-tab / tf-*)
 *  [3] Командная панель (ribbon)  [4] Кнопки/ссылки  [5] Форма-документ + ссылочные поля
 *  [6] Поля/пикер/флажки  [7] Чипы/статусы  [8] Сетка (табличная часть/список)
 *  [9] Дерево  [10] Вкладки документа/секции  [11] Диалог/сообщения  [12] Чат
 *  [13] Оболочка-докинг (au ws / td-* / grid / doc / chip / dlg / ctx / pick / auth-*)
 *  [14] BROWSE: атомы/молекулы/организмы ленты (uk-cb/uk-counter/uk-dot/uk-viewitem/
 *       uk-listrow/uk-datesep/uk-sidepanel/uk-viewlist/uk-checkgroup/uk-rowlist/
 *       uk-composer/uk-contentview) — T2, первый потребитель почта, блоки ОБЩИЕ
 *  [15] uk-ctxmenu — тема контекстного меню (ПКМ) движка alto-ui-behaviors
 *       (contextmenu-engine.js, T7.3) — 1С-канон, тот же облик, что классик .ctx §13
 *  [16] uk-messages — лента переписки (T15), тот же облик, что классик .oc-chat §12
 * ========================================================================== */

/* Токены — динамически из /ui/tokens.css (alto_ui_kit.tokens) */

/* ─────────────────────────────── [1] БАЗА ────────────────────────────────── */
.au *,.au *::before,.au *::after{box-sizing:border-box}
.au{font-family:var(--sans);font-size:12.5px;line-height:1.35;color:var(--ink);background:var(--win)}
.au .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.au button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
.au a{color:inherit;text-decoration:none}

/* ───────────────────── [2] КАРКАС ВКЛАДКИ (без внешнего скролла) ──────────── */
/* Хост вкладки: заполняет область, сам НЕ скроллится. */
.au-tab{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden;padding:8px;gap:8px;background:var(--win)}
.tf-title{flex:0 0 auto;font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px}
.tf-title .num{font-family:var(--mono)}
.tf-title .cnt{font-family:var(--mono);font-size:12px;color:var(--mute);background:var(--ribbon);padding:1px 8px;border-radius:10px}
.tf-title .sp{flex:1}
/* Единственная прокручиваемая область — данные */
.tf-scroll{flex:1;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
/* Горизонтальный сплит: каждая половина скроллится сама */
.tf-split{flex:1;min-height:0;display:flex;gap:8px}
.tf-col{display:flex;flex-direction:column;min-height:0;min-width:0}
.tf-col.tree{flex:0 0 230px}
.tf-col.grow{flex:1}
/* Подвал-итоги (фикс снизу) */
.tf-foot{flex:0 0 auto;display:flex;justify-content:flex-end;gap:20px;padding:8px 12px;font-size:13px;background:var(--head);border-top:1px solid var(--line)}
.tf-foot b{font-family:var(--mono)}
.tf-foot .g{color:var(--c-blue);font-weight:700}
/* Тело закладки-документа: фикс-подтулбар + скролл данных + фикс-итоги */
.tf-tabbody{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden}
.tf-tabbody .pad{padding:10px 12px}
.tf-tabbody .pad.scrollable{overflow:auto;flex:1;min-height:0}
.oc-ribbon,.oc-doc-tabs,.oc-form{flex:0 0 auto}

/* ─────────────────────────── [3] КОМАНДНАЯ ПАНЕЛЬ ────────────────────────── */
.oc-ribbon{display:flex;align-items:center;gap:2px;flex-wrap:wrap;background:linear-gradient(180deg,var(--ribbon-2),var(--ribbon));border:1px solid var(--line);border-radius:var(--r-lg);padding:3px 4px}
.oc-ribbon .cmd{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:var(--r);font-size:12.5px;color:var(--ink);border:1px solid transparent;white-space:nowrap;cursor:pointer}
.oc-ribbon .cmd:hover{background:var(--panel);border-color:var(--line)}
.oc-ribbon .cmd .i{width:15px;height:15px;display:grid;place-items:center;opacity:.85}
.oc-ribbon .cmd.primary{background:var(--c-blue);color:#fff}
.oc-ribbon .cmd.primary:hover{background:#134c85}
.oc-ribbon .cmd.primary .i{opacity:1}
.oc-ribbon .cmd.danger{color:var(--c-red)}
.oc-ribbon .cmd[disabled]{opacity:.45;cursor:not-allowed}
.oc-ribbon .sep{width:1px;height:18px;background:var(--line);margin:0 3px}
.oc-ribbon .grow{flex:1}
.oc-ribbon .oc-search{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);color:var(--mute);min-width:200px}
.oc-ribbon .oc-search input{border:0;outline:0;background:transparent;font:inherit;color:var(--ink);flex:1}

/* ───────────────────────────── [4] КНОПКИ/ССЫЛКИ ─────────────────────────── */
.oc-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;font-size:12.5px;color:var(--ink);background:linear-gradient(180deg,#fff,#f3f4f6);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;white-space:nowrap}
.oc-btn:hover{background:linear-gradient(180deg,#fff,#eceef1);border-color:#c3c7cf}
.oc-btn .i{width:15px;height:15px;display:grid;place-items:center;opacity:.85}
.oc-btn.primary{background:var(--c-blue);border-color:#134c85;color:#fff}
.oc-btn.primary:hover{background:#134c85}
.oc-btn.danger{color:var(--c-red);border-color:rgba(200,62,62,.4)}
.oc-btn.danger:hover{background:rgba(200,62,62,.06)}
.oc-btn[disabled]{opacity:.45;cursor:not-allowed}
.oc-link{color:var(--c-blue);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(24,95,165,.4);cursor:pointer}
.oc-link:hover{text-decoration-color:var(--c-blue)}

/* ──────────────────── [5] ФОРМА-ДОКУМЕНТ + ССЫЛОЧНЫЕ ПОЛЯ ─────────────────── */
.oc-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px 10px;align-items:center}
.oc-form .lbl{color:var(--mute);text-align:right;font-size:12px;white-space:nowrap}
.oc-form .lbl.req::after{content:"*";color:var(--c-red);margin-left:3px}
.oc-form .val{display:flex;align-items:center;gap:6px;min-width:0}
.oc-form .val.span2{grid-column:span 3}
.oc-form .fld{flex:1;min-width:0;height:26px;display:flex;align-items:center;gap:6px;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 8px;font-size:12.5px;color:var(--ink)}
.oc-form .fld .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-form .fld .pick{margin-left:auto;color:var(--mute);cursor:pointer;flex-shrink:0}
/* ССЫЛОЧНОЕ поле (объект): значение-ссылка + ДВЕ прикреплённые кнопки —
   «Выбрать» (⌕ форма подбора) и «Открыть экземпляр» (↗ объект новой вкладкой).
   Распространяется на все объектные реквизиты (контрагент/организация/договор/банк…). */
.oc-form .fld.ref{gap:0;padding:0 0 0 8px}
.oc-form .fld.ref .v{color:var(--c-blue)}
.oc-form .fld .fb{width:22px;align-self:stretch;display:grid;place-items:center;color:var(--mute);cursor:pointer;border-left:1px solid var(--line);background:var(--ribbon-2);flex-shrink:0;font-size:12px}
.oc-form .fld .fb:hover{background:var(--ribbon);color:var(--c-blue)}
.oc-form .fld .fb.open{color:var(--c-blue)}

/* ─────────────────────── [6] ПОЛЯ / ПИКЕР / ФЛАЖКИ ───────────────────────── */
.oc-input,.oc-num{height:26px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0 8px;font:inherit;font-size:12.5px;color:var(--ink);outline:0}
.oc-input:focus,.oc-num:focus{border-color:var(--c-blue);box-shadow:0 0 0 2px rgba(24,95,165,.14)}
.oc-num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.oc-input[readonly]{background:#eef0f3;color:var(--mute)}
.oc-pickfld{display:inline-flex;align-items:center;height:26px;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.oc-pickfld input{border:0;outline:0;height:100%;padding:0 8px;font:inherit;font-size:12.5px;background:transparent;min-width:180px}
.oc-pickfld .btn{width:24px;height:100%;display:grid;place-items:center;background:var(--ribbon);border-left:1px solid var(--line);color:var(--mute);cursor:pointer}
.oc-pickfld .btn:hover{background:#dfe2e7}
.oc-drop{margin-top:2px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:0 8px 22px rgba(20,30,60,.16);overflow:hidden;max-width:320px}
.oc-drop .opt{padding:5px 9px;font-size:12.5px;cursor:pointer;display:flex;gap:8px;align-items:center}
.oc-drop .opt:hover{background:var(--hover)}
.oc-drop .opt.sel{background:var(--sel)}
.oc-drop .more{padding:5px 9px;font-size:11.5px;color:var(--c-blue);cursor:pointer}
.oc-check{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);cursor:pointer}
.oc-check input{width:15px;height:15px;accent-color:var(--c-blue)}

/* ────────────────────────── [7] ЧИПЫ / СТАТУСЫ ───────────────────────────── */
.oc-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;font-size:12px;font-weight:500;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);cursor:pointer}
.oc-chip:hover{background:var(--hover)}
.oc-chip.on{background:var(--sel);border-color:var(--sel-bd);color:var(--c-blue)}
.oc-chip .dot{width:7px;height:7px;border-radius:50%}
.oc-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:1px 8px;border-radius:3px;line-height:1.5;border:1px solid transparent}
.oc-tag .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.oc-tag.blue{background:rgba(24,95,165,.10);color:var(--c-blue);border-color:rgba(24,95,165,.25)}
.oc-tag.green{background:rgba(29,158,117,.12);color:#0f7a58;border-color:rgba(29,158,117,.25)}
.oc-tag.amber{background:rgba(186,117,23,.12);color:#8a5610;border-color:rgba(186,117,23,.25)}
.oc-tag.purple{background:rgba(83,74,183,.12);color:var(--c-purple);border-color:rgba(83,74,183,.25)}
.oc-tag.c1{background:rgba(21,101,192,.12);color:var(--c-1c);border-color:rgba(21,101,192,.25)}
.oc-tag.gray{background:rgba(136,135,128,.16);color:#5b5b55;border-color:rgba(136,135,128,.3)}

/* ─────────────── [8] СЕТКА (табличная часть / список) — сетка ячеек ────────── */
.oc-grid{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;background:var(--panel)}
.oc-grid th{position:sticky;top:0;z-index:2;background:var(--head);color:var(--ink);font-weight:600;text-align:left;padding:5px 9px;border-bottom:1px solid var(--cell);border-right:1px solid var(--cell);white-space:nowrap;font-size:12px}
.oc-grid th:last-child{border-right:0}
.oc-grid th.num{text-align:right}
.oc-grid td{padding:3px 9px;border-bottom:1px solid var(--cell-2);border-right:1px solid var(--cell-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;vertical-align:middle}
.oc-grid td:last-child{border-right:0}
.oc-grid tr:nth-child(even) td{background:var(--zebra)}
.oc-grid tr.sel td{background:var(--sel)}
.oc-grid tbody tr:hover td{background:var(--hover)}
.oc-grid tr.sel:hover td{background:var(--sel)}
.oc-grid .rn{color:var(--mute);font-family:var(--mono);font-size:11px;text-align:right;width:34px}
.oc-grid .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.oc-grid .lnk{color:var(--c-blue);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(24,95,165,.35);cursor:pointer}
.oc-grid .lnk:hover{text-decoration-color:var(--c-blue)}
.oc-grid .ic{color:var(--mute);margin-right:6px}
.oc-grid .ic.folder{color:var(--c-amber)}
.oc-grid tfoot td{background:var(--head);font-weight:600;border-top:1px solid var(--cell);position:sticky;bottom:0}
.oc-grid tr.plus td{background:var(--panel);color:var(--c-blue);cursor:pointer;padding:4px 9px}
.oc-grid tr.plus td:hover{background:var(--hover)}

/* ─────────────────────────────── [9] ДЕРЕВО ──────────────────────────────── */
.oc-tree{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px;overflow:auto}
.oc-tree .row{display:flex;align-items:center;gap:7px;height:24px;padding:0 8px;border-radius:var(--r);color:var(--ink);font-size:12.5px;cursor:pointer;white-space:nowrap}
.oc-tree .row:hover{background:var(--hover)}
.oc-tree .row.sel{background:var(--sel)}
.oc-tree .row .tw{width:12px;color:var(--mute);flex-shrink:0;text-align:center}
.oc-tree .row .ic{width:15px;text-align:center;flex-shrink:0}
.oc-tree .row .ic.folder{color:var(--c-amber)}
.oc-tree .row .ic.item{color:var(--c-blue)}
.oc-tree .row .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.oc-tree .lvl2{padding-left:22px}
.oc-tree .lvl3{padding-left:38px}

/* ──────────────────── [10] ВКЛАДКИ ДОКУМЕНТА / СЕКЦИИ ────────────────────── */
.oc-doc-tabs{display:flex;gap:0;border-bottom:1px solid var(--line)}
.oc-doc-tabs a{padding:6px 14px;font-size:12.5px;color:var(--mute);cursor:pointer;border:1px solid transparent;border-bottom:0;border-radius:var(--r) var(--r) 0 0;margin-bottom:-1px}
.oc-doc-tabs a:hover{color:var(--ink)}
.oc-doc-tabs a.on{color:var(--ink);background:var(--panel);border-color:var(--line);font-weight:600}
.oc-sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.oc-sec>.h{padding:6px 12px;background:var(--ribbon-2);border-bottom:1px solid var(--line);font-weight:600;font-size:12px;color:var(--ink);display:flex;align-items:center;gap:8px}
.oc-sec>.b{padding:10px 12px}

/* ──────────────────────── [11] ДИАЛОГ / СООБЩЕНИЯ ────────────────────────── */
.oc-dialog{background:var(--win);border:1px solid #b6bac2;border-radius:var(--r-lg);box-shadow:0 20px 60px rgba(20,30,60,.3);overflow:hidden;width:min(460px,92vw)}
.oc-dialog .h{display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(180deg,#e9ebef,#dfe2e7);border-bottom:1px solid var(--line);font-weight:600;font-size:12.5px}
.oc-dialog .h .x{margin-left:auto;color:var(--mute);cursor:pointer;font-size:14px}
.oc-dialog .b{padding:12px 14px;background:var(--panel)}
.oc-dialog .f{display:flex;justify-content:flex-end;gap:8px;padding:8px 12px;background:var(--win);border-top:1px solid var(--line)}
.oc-msg{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r);font-size:12.5px;border:1px solid transparent}
.oc-msg.info{background:rgba(24,95,165,.08);border-color:rgba(24,95,165,.25);color:var(--c-blue)}
.oc-msg.ok{background:rgba(29,158,117,.10);border-color:rgba(29,158,117,.28);color:#0f7a58}
.oc-msg.err{background:rgba(200,62,62,.08);border-color:rgba(200,62,62,.3);color:var(--c-red)}

/* ─────────────────── [12] ЧАТ (1С + Telegram; одна беседа) ────────────────── */
.oc-chat{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.oc-chat .feed{flex:1;min-height:0;overflow:auto;background:var(--win);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);padding:14px}
.oc-chat .feed-in{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.oc-chat .daysep{align-self:center;font-size:11px;color:var(--mute);background:var(--ribbon);border-radius:10px;padding:2px 10px;margin:4px 0}
.oc-chat .msg{max-width:78%;background:#fff;border:1px solid var(--cell);border-radius:10px;padding:6px 10px}
.oc-chat .msg.mine{align-self:flex-end;background:#eaf2fb;border-color:#c7ddf5}
.oc-chat .msg .mh{display:flex;gap:8px;align-items:baseline;font-size:11.5px;margin-bottom:2px}
.oc-chat .msg .au{font-weight:600;color:var(--ink)}
.oc-chat .msg .t{margin-left:auto;color:var(--mute);font-size:10.5px}
.oc-chat .msg .body{font-size:13px;color:var(--ink);line-height:1.45;white-space:pre-wrap}
.oc-chat .msg .fwd{font-size:10.5px;padding:0 6px;border-radius:3px;background:rgba(29,158,117,.1);color:#0f7a58}
.oc-chat .composer{flex:0 0 auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 10px;margin-top:8px}
.oc-chat .comp-row{max-width:680px;margin:0 auto;display:flex;gap:8px;align-items:flex-end}
.oc-chat .comp-row textarea{flex:1;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:8px 10px;font:inherit;font-size:13px;resize:none;outline:0;height:40px}
.oc-chat .send{width:38px;height:38px;border-radius:var(--r-lg);background:var(--c-blue);color:#fff;font-size:16px}
/* ── [13] ОБОЛОЧКА-ДОКИНГ (канон концепта 00-shell: БЕЗ сайдбара, вкладки/области) ── */
html,body{margin:0;height:100%}
.ws{display:flex;flex-direction:column;height:100vh;font-size:var(--fs);background:var(--win)}
/* топбар 56px: слева «☰ Вкладки», ЛОГО ПО ЦЕНТРУ, справа колокол+аватар */
.tb{height:56px;flex:none;display:flex;align-items:center;background:var(--panel);
  border-bottom:1px solid var(--line);position:relative;padding:0 18px;gap:10px}
.td-tbtn{height:32px;padding:0 12px;border:1px solid var(--line);background:var(--panel);
  border-radius:8px;font-size:13px;color:var(--ink-2);cursor:pointer;display:inline-flex;
  align-items:center;gap:6px}
.td-tbtn:hover{background:var(--win)}
.tb .logo{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%;display:flex;
  align-items:center;gap:8px;font-weight:700;letter-spacing:1px;color:var(--ink)}
.tb .logo .mk{width:22px;height:22px;border-radius:6px;background:var(--c-blue);display:grid;
  place-items:center;color:#fff;font-size:12px}
.tb .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tb .bell{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);display:grid;
  place-items:center;color:var(--ink-2);position:relative;cursor:pointer;background:var(--panel)}
.tb .bell .bdg{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--c-orange);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center}
.tb .av{width:32px;height:32px;border-radius:50%;background:var(--c-blue);color:#fff;display:grid;
  place-items:center;font-size:12px;font-weight:600}
/* меню «☰ Вкладки» — поповер со списком экранов (замена сайдбару: всё вкладками) */
.tabs-menu{position:absolute;top:52px;left:14px;z-index:40;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 34px rgba(20,30,60,.18);
  min-width:240px;padding:6px;display:none}
.tabs-menu.open{display:block}
.tabs-menu .sec{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  color:var(--mute-2);padding:8px 8px 3px;font-family:var(--mono)}
.tabs-menu .mi{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:8px;
  cursor:pointer;font-size:13px;color:var(--ink)}
.tabs-menu .mi:hover{background:var(--hover)}
.tabs-menu .mi .nic{width:16px;text-align:center;color:var(--mute)}
/* докинг: области td-tabs со сплиттерами */
#td-shell{flex:1;min-height:0;background:var(--win);padding:6px;display:flex;overflow:hidden}
.td-splitter{flex:0 0 7px;position:relative;cursor:col-resize}
.td-splitter::after{content:"";position:absolute;inset:0;margin:auto;width:2px;background:var(--line)}
.td-splitter:hover::after{background:var(--c-blue)}
.td-tabs{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel);
  border:1px solid var(--line);border-radius:7px;overflow:hidden;flex:1}
.td-strip{flex:0 0 auto;display:flex;align-items:stretch;background:var(--win);
  border-bottom:1px solid var(--line);min-height:26px;position:relative;overflow:hidden}
.td-labzone{flex:1 1 auto;min-width:0;display:flex;align-items:stretch;gap:3px;
  padding:2px 0 0 6px;overflow:hidden}
.td-label{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;font-size:12px;
  color:#7a7f88;background:#e6e8ec;border-radius:6px 6px 0 0;white-space:nowrap;
  border:1px solid #cfd4db;border-bottom:none;max-width:230px;cursor:pointer}
.td-label:hover{background:#eef0f3;color:#5b6472}
.td-label.active{background:#fff;color:var(--ink);font-weight:600;border-color:var(--line);
  box-shadow:0 -2px 0 var(--c-blue) inset}
.td-close{margin-left:3px;width:16px;height:16px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:4px;color:#5f6773;font-size:15px}
.td-close:hover{background:rgba(217,48,37,.13);color:#d93025}
.td-body{flex:1;min-height:0;position:relative;display:flex;background:#fff;overflow:hidden}
/* экран внутри области; ПОЗИЦИОННЫЙ КОНТЕКСТ для модалок (в границах вкладки) */
.ws-screen{display:none;flex:1;height:100%;flex-direction:column;position:relative;
  overflow:hidden;min-width:0}
.ws-screen.on{display:flex}
/* командная панель */
.ribbon{display:flex;align-items:center;gap:4px;padding:5px 8px;background:var(--ribbon);
  border-bottom:1px solid var(--line)}
.cmd{padding:5px 12px;border:1px solid transparent;border-radius:var(--r);font-size:var(--fs-sm);
  color:var(--ink-2);cursor:pointer;background:none}
.cmd:hover{background:var(--hover);border-color:var(--line)}
.cmd.primary{background:var(--c-blue);color:#fff}
.cmd.danger{color:var(--c-red)}
.cmd[disabled]{opacity:.5;cursor:not-allowed}
.grow{flex:1}
/* сетка */
.tf-scroll{flex:1;overflow:auto;position:relative}
.grid{width:100%;border-collapse:collapse;font-size:var(--fs-dense);background:#fff}
.grid th{position:sticky;top:0;background:var(--head);border:1px solid var(--cell);padding:4px 8px;
  text-align:left;font-weight:600;color:var(--ink-2);white-space:nowrap;z-index:2}
.grid td{border:1px solid var(--cell-2);padding:3px 8px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:360px}
.grid td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.grid tbody tr:nth-child(even){background:var(--zebra)}
.grid tbody tr:hover{background:var(--hover)}
.grid tbody tr.sel{background:var(--sel);outline:1px solid var(--sel-bd)}
.mute{color:var(--mute)}
.loading-veil{position:absolute;inset:0;background:rgba(252,252,251,.6);display:flex;
  align-items:center;justify-content:center;z-index:3}
.spinner{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--c-blue);
  border-radius:50%;animation:uk-spin .8s linear infinite}
@keyframes uk-spin{to{transform:rotate(360deg)}}
/* форма-документ */
.doc{padding:12px;overflow:auto}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:4px 24px;max-width:1100px}
.f{display:flex;align-items:center;gap:8px;min-height:28px}
.lbl{width:150px;flex:none;color:var(--ink-2);font-size:var(--fs-sm);text-align:right}
.lbl.req::after{content:" *";color:var(--c-red)}
.fld{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:5px 8px;font:inherit;
  background:#fff;min-width:0}
.fld:focus{outline:none;border-color:var(--sel-bd);box-shadow:0 0 0 2px var(--sel)}
/* бейджи полупрозрачные */
.chip{display:inline-flex;align-items:center;gap:6px;padding:1px 9px;border-radius:9px;font-size:12px}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip--blue{color:var(--c-blue);background:rgba(24,95,165,.10)}
.chip--green{color:var(--c-green);background:rgba(29,158,117,.12)}
.chip--red{color:var(--c-red);background:rgba(200,62,62,.10)}
.chip--amber{color:var(--c-amber);background:rgba(186,117,23,.12)}
.chip--gray{color:var(--c-gray);background:rgba(136,135,128,.14)}
/* модалка В ГРАНИЦАХ вкладки */
.dlg-back{position:absolute;inset:0;background:rgba(20,25,35,.35);display:flex;align-items:center;
  justify-content:center;z-index:20;animation:uk-fade .15s ease}
.dlg{background:var(--panel);border-radius:var(--r-lg);min-width:420px;max-width:92%;max-height:92%;
  display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.25);animation:uk-pop .2s ease}
@keyframes uk-fade{from{opacity:0}}
@keyframes uk-pop{from{opacity:0;transform:translateY(8px)}}
.dlg-h{padding:10px 14px;font-weight:600;font-size:var(--fs-h-modal);border-bottom:1px solid var(--line);
  display:flex;align-items:center}
.dlg-h .x{margin-left:auto;cursor:pointer;opacity:.5;font-weight:400}
.dlg-h .x:hover{opacity:1}
.dlg-b{padding:12px 14px;overflow:auto}
/* контекст-меню с подписью */
.ctx{position:absolute;z-index:30;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 8px 28px rgba(0,0,0,.18);min-width:220px;
  font-size:var(--fs-sm);overflow:hidden}
.ctx .ctx-title{padding:7px 12px;background:var(--ribbon-2);color:var(--mute);font-size:11.5px;
  border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:300px}
.ctx .ctx-item{padding:7px 12px;cursor:pointer}
.ctx .ctx-item:hover{background:var(--hover)}
.ctx .ctx-item.danger{color:var(--c-red)}
/* пикер */
.pick{position:relative;flex:1;display:flex;min-width:0}
.pick input{flex:1;border:1px solid var(--line);border-radius:var(--r) 0 0 var(--r);
  padding:5px 8px;font:inherit;min-width:0}
.pick input:focus{outline:none;border-color:var(--sel-bd)}
.pick .pick-btn{border:1px solid var(--line);border-left:0;border-radius:0 var(--r) var(--r) 0;
  background:var(--ribbon-2);padding:0 10px;cursor:pointer}
.pick .pick-list{position:absolute;top:100%;left:0;right:0;z-index:25;background:var(--panel);
  border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);
  box-shadow:0 8px 20px rgba(0,0,0,.15)}
.pick .pick-opt{padding:6px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pick .pick-opt:hover,.pick .pick-opt.hot{background:var(--hover)}
/* логин: тёмная тема + логотип */
.auth-page{display:flex;align-items:center;justify-content:center;height:100vh;
  background:var(--dark);font-family:var(--sans)}
.auth-card{background:var(--dark-2);border:1px solid var(--dark-line);border-radius:10px;
  padding:30px 34px;min-width:360px;color:var(--dark-ink)}
.auth-logo{font-size:26px;font-weight:700;color:#fff;letter-spacing:1px;margin-bottom:4px}
.auth-logo b{color:var(--c-blue-l)}
.auth-sub{color:var(--dark-mute);font-size:var(--fs-sm);margin-bottom:20px}
.auth-card .f{display:block;margin:12px 0}
.auth-card .lbl{display:block;text-align:left;width:auto;margin-bottom:4px;color:var(--dark-mute)}
.auth-card .fld{width:100%;box-sizing:border-box;background:var(--dark);
  border:1px solid var(--dark-line);color:var(--dark-ink);padding:8px 10px}
.auth-card .fld:focus{border-color:var(--c-blue);box-shadow:0 0 0 2px rgba(24,95,165,.35)}
.auth-card .cmd.primary{width:100%;padding:9px;margin-top:8px;font-size:var(--fs)}
.auth-err{color:#ff8f8f;font-size:var(--fs-sm);margin-top:8px}
/* Вторичная ссылка под формой (вход↔регистрация) */
.auth-alt{margin-top:16px;font-size:var(--fs-sm);color:var(--dark-mute);text-align:center}
.auth-alt a{color:var(--c-blue-l);text-decoration:none}
.auth-alt a:hover{text-decoration:underline}

/* ──────── [14] BROWSE: атомы/молекулы/организмы ленты (T2, Atomic Design) ────────
 * Первый потребитель — почта (владелец, T2), блоки ОБЩИЕ: ничего почтового в
 * именах/классах. Только токены (var(--…)) — ни одного своего цвета/размера (канон
 * §8 «чего не делать»); белый #fff — нейтральный неоформленный холст, как у
 * .oc-form .fld/.oc-input/.grid в файле выше, НЕ новый цвет палитры. */

/* Атом: флажок-выбор (голый, без подписи — см. .oc-check §6 с подписью). */
.uk-cb{width:15px;height:15px;accent-color:var(--c-blue);cursor:pointer;flex-shrink:0}

/* Атом: бейдж-счётчик (рецепт §2 .tf-title .cnt, самостоятельный). */
.uk-counter{font-family:var(--mono);font-size:12px;color:var(--mute);background:var(--ribbon);
  padding:1px 8px;border-radius:10px;flex-shrink:0}

/* Атом: цветная точка-маркер (палитра — бренд-токены, как .chip §13/.oc-tag §7). */
.uk-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.uk-dot--blue{background:var(--c-blue)}
.uk-dot--green{background:var(--c-green)}
.uk-dot--red{background:var(--c-red)}
.uk-dot--amber{background:var(--c-amber)}
.uk-dot--purple{background:var(--c-purple)}
.uk-dot--gray{background:var(--c-gray)}

/* Молекула: пункт вида (иконка+имя+счётчик) — боковой список видов ленты. */
.uk-viewitem{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:var(--r);
  color:var(--ink-2);font-size:var(--fs-sm);cursor:pointer;white-space:nowrap}
.uk-viewitem:hover{background:var(--hover)}
.uk-viewitem.is-active{background:var(--sel);color:var(--c-blue);font-weight:600}
.uk-viewitem__ic{width:16px;text-align:center;flex-shrink:0;opacity:.85}
.uk-viewitem__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Молекула: разделитель группы по дате (лента). */
.uk-datesep{padding:6px 10px 4px;font-size:11px;font-weight:600;color:var(--mute-2);
  text-transform:uppercase;letter-spacing:.04em;background:var(--panel)}

/* Молекула: строка списка-ленты («gmail-плотность»): чекбокс+колонка-фикс+жирный
 * заголовок—серое превью+маркеры+дата справа.
 *
 * ★ФИКС (живое ревью владельца, T7.2):
 * (а) hover на .is-unread НЕ подсвечивался — .uk-listrow.is-unread{background:#fff} та
 *     же специфичность (0,2,0), что .uk-listrow:hover, и шла ПОЗЖЕ в файле — на
 *     непрочитанной строке белый фон побеждал ховер. Добавлено .is-unread:hover
 *     специфичностью выше (0,3,0) — ховер снова виден на непрочитанных.
 * (б) [data-active]/[data-selected] (движок alto-ui-behaviors, list-engine.js — «строка
 *     СТАВИТ» по контракту, НЕ читает) СОВСЕМ не были стилизованы — «открыл и не видно,
 *     что открыл». data-selected — заливка (эталон .oc-grid tr.sel), data-active —
 *     синяя кайма СЛЕВА (box-shadow, не background — не спорит с is-unread/hover/
 *     selected, виден ВСЕГДА поверх любого фона строки).
 * (в) uk-listrow__fixed (колонка отправителя) — 11rem→13rem, разумный запас (Почта
 *     параллельно укорачивает содержимое, но ширина не завязана на это).
 *
 * ★ФИКС (владелец, доп. к T7.2, п.9): различие прочитано/не прочитано было СЛАБЫМ —
 * только жирная тема (500→700), фон #fff почти неотличим от базового --panel. Взят
 * Gmail-контраст: НЕПРОЧИТАННОЕ = яркий фон (--panel) + жирные ОТПРАВИТЕЛЬ И тема
 * (700, --ink); ПРОЧИТАННОЕ = приглушённый фон (--win, на ступень темнее панели) +
 * обычный вес (400) + приглушённый цвет (--ink-2) на обоих. Фон — токен, не #fff
 * (канон: только var(--…), см. правило CSS в README пакета). Расчёт специфичности
 * сохранён: .is-unread (0,2,0) идёт РАНЬШЕ [data-selected]/:hover-паттернов того же
 * веса — на пересечении состояний побеждает hover/selected (позже в файле), а
 * data-active — box-shadow, не background, поэтому виден ПОВЕРХ любой комбинации
 * прочитано×hover/selected — все 4 связки (прочитано/нет × hover/active) различимы. */
.uk-listrow{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;
  border-bottom:1px solid var(--cell-2);background:var(--win);cursor:pointer;font-size:var(--fs-sm)}
.uk-listrow:hover{background:var(--hover)}
.uk-listrow.is-unread{background:var(--panel)}
.uk-listrow.is-unread:hover{background:var(--hover)}
.uk-listrow.is-unread .uk-listrow__fixed{font-weight:700;color:var(--ink)}
.uk-listrow.is-unread .uk-listrow__title{font-weight:700;color:var(--ink)}
.uk-listrow[data-selected]{background:var(--sel)}
.uk-listrow[data-selected]:hover{background:var(--sel)}
.uk-listrow[data-active]{box-shadow:inset 3px 0 0 var(--c-blue)}
.uk-listrow__check{flex-shrink:0;display:flex;align-items:center}
.uk-listrow__fixed{flex:0 0 13rem;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--ink-2);font-weight:400}
.uk-listrow__main{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;overflow:hidden}
.uk-listrow__title{flex-shrink:0;color:var(--ink-2);font-weight:400;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:60%}
.uk-listrow__prev{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.uk-listrow__prev::before{content:"— "}
.uk-listrow__markers{flex-shrink:0;display:flex;align-items:center;gap:4px}
.uk-listrow__date{flex-shrink:0;width:4.2rem;text-align:right;color:var(--mute);font-family:var(--mono);
  font-size:11px}

/* Организм: СКРЫВАЮЩАЯСЯ боковая панель области — .is-collapsed схлопывает тело,
 * оставляет кнопку-открытие (когда класс ставится/снимается — поведение, вне пакета). */
.uk-sidepanel{display:flex;flex-direction:column;flex:0 0 220px;height:100%;background:var(--panel);
  border-right:1px solid var(--line);overflow:hidden;transition:flex-basis .15s ease}
.uk-sidepanel.is-collapsed{flex-basis:0}
.uk-sidepanel__toggle{flex:0 0 auto;width:30px;height:30px;margin:6px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);cursor:pointer;display:none}
.uk-sidepanel.is-collapsed .uk-sidepanel__toggle{display:inline-flex;align-items:center;
  justify-content:center;position:absolute}
.uk-sidepanel__body{flex:1;min-height:0;overflow:auto;padding:8px;min-width:220px}
.uk-sidepanel.is-collapsed .uk-sidepanel__body{display:none}
.uk-sidepanel__title{font-size:11px;font-weight:600;color:var(--mute);text-transform:uppercase;
  letter-spacing:.04em;padding:4px 8px 8px}

/* Организм: список видов (viewitem'ов). */
.uk-viewlist{display:flex;flex-direction:column;gap:1px}

/* Организм: группа чекбоксов-фильтров.
 * collapsed=True рендерит <details class="uk-checkgroup"><summary class="uk-checkgroup__h">
 * — сам div.uk-checkgroup__h и details/summary делят класс, стили ниже общие для обоих
 * вариантов; ::marker/::-webkit-details-marker убираем и рисуем свой треугольник, чтобы
 * не зависеть от рендера маркера в разных браузерах (Bitrix-стиль сворачиваемого меню).
 *
 * ★ФИКС (владелец, доп. к T7.2): свой треугольник был 9px — «не видно». list-style:none
 * на summary УЖЕ убирает нативный маркер в современных Chrome/Firefox, но добавлен и
 * ::marker{display:none} — некоторые движки рендерят ::marker поверх list-style. Свой
 * треугольник получил явный цвет (--ink-2, темнее приглушённого --mute текста заголовка
 * — иначе на фоне uppercase-подписи тоже терялся бы).
 *
 * ★ФИКС №2 (владелец: «всё ещё мала после 14px», сравнить с Битрикс/файловыми
 * менеджерами): var(--fs) (14px) сам по себе крупный кегль, НО ::before наследует
 * font-size от ближайшего заданного — им был .uk-checkgroup__h{font-size:11px}
 * (uppercase-подпись), а не var(--fs); абсолютный var(--fs) на ::before ДОЛЖЕН был
 * перебить наследование, но выглядел мелко рядом с 11px-текстом визуально (владелец
 * прав — маленький треугольник на фоне даже небольшой подписи теряется). Взят
 * var(--fs-h-modal) (18px, канон-токен — не магическое число) — тот масштаб, что
 * заголовки модалок, заметно крупнее подписи группы. width:100% на summary — область
 * клика ГАРАНТИРОВАННО на весь ряд (не полагаемся на неявное block-stretch — на
 * случай будущего flex/grid-контекста вокруг блока), cursor:pointer уже был. */
.uk-checkgroup{padding:6px 4px}
.uk-checkgroup__h{font-size:11px;font-weight:600;color:var(--mute);text-transform:uppercase;
  letter-spacing:.04em;padding:4px 6px}
summary.uk-checkgroup__h{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
  width:100%}
summary.uk-checkgroup__h::marker{display:none}
summary.uk-checkgroup__h::-webkit-details-marker{display:none}
summary.uk-checkgroup__h::before{content:"▸";display:inline-block;font-size:var(--fs-h-modal);
  line-height:1;color:var(--ink-2);transition:transform .15s ease;
  /* ★ФИКС (владелец: стрелка сползла вниз после 18px) — flex align-items:center у
     summary центрирует БОКС ::before, но глиф ▸ внутри своего em-квадрата у большинства
     шрифтов подвешен НЕ по центру (визуальный низ) — на 18px это стало заметно.
     vertical-align тут не работает (flex-контекст его игнорирует), поэтому оптическая
     правка — position:relative;top, НЕЗАВИСИМО от transform:rotate() ниже (разные
     свойства, не конфликтуют, не нужно склеивать в одно transform). */
  position:relative; top:-1px}
details.uk-checkgroup[open]>summary.uk-checkgroup__h::before{transform:rotate(90deg)}
.uk-checkgroup__opt{display:flex;align-items:center;gap:7px;padding:3px 6px;font-size:var(--fs-sm);
  color:var(--ink);cursor:pointer;border-radius:var(--r)}
.uk-checkgroup__opt:hover{background:var(--hover)}

/* Организм: контейнер списка-ленты (скелет — данные тянет data-engine="list").
 * .uk-rowlist — внешний узел (el движка); .uk-rowlist__scroll — ВЛОЖЕННЫЙ [data-scroll]
 * (контракт list-engine.js: root.querySelector('[data-scroll]') не матчит сам root). */
.uk-rowlist{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--panel)}
.uk-rowlist__scroll{flex:1;min-height:0;overflow:auto}

/* Организм: композер сообщения (кому/тема/текст/вложения). */
.uk-composer{display:flex;flex-direction:column;gap:6px;padding:10px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.uk-composer__row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--cell-2);
  padding-bottom:4px}
.uk-composer__row label{flex:0 0 4rem;color:var(--mute);font-size:var(--fs-sm)}
.uk-composer__row input{flex:1;border:0;outline:0;font:inherit;background:transparent;color:var(--ink)}
.uk-composer__body{border:0;outline:0;resize:vertical;min-height:140px;font:inherit;font-size:var(--fs);
  color:var(--ink);background:transparent}
.uk-composer__attach{border-top:1px solid var(--cell-2);padding-top:6px;min-height:24px}

/* Организм: просмотр содержимого записи (шапка-реквизиты+песочный body+вложения). */
.uk-contentview{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--panel)}
.uk-contentview__head{flex:0 0 auto;padding:10px 14px;border-bottom:1px solid var(--line)}
.uk-contentview__title{font-size:var(--fs-h-card);font-weight:700;color:var(--ink);margin-bottom:4px}
.uk-contentview__meta-row{display:flex;gap:6px;font-size:var(--fs-sm);color:var(--mute)}
.uk-contentview__meta-k{flex:0 0 auto}
.uk-contentview__meta-v{color:var(--ink-2)}
.uk-contentview__body{flex:1;min-height:0;width:100%;border:0;background:#fff}
.uk-contentview__attach{flex:0 0 auto;border-top:1px solid var(--line);padding:8px 14px;
  display:flex;flex-wrap:wrap;gap:6px}

/* ────────────────── [15] uk-ctxmenu (T7.3, ПКМ владельца) ──────────────────
 * Тема на DOM-контракт alto-ui-behaviors/contextmenu-engine.js (движок строит разметку,
 * позиционирует у курсора инлайн-style — position/z-index сюда НЕ дублируем, движок сам
 * ставит их inline и они всё равно перебьют любые правила CSS): .uk-ctxmenu[data-ctxmenu]
 * > .uk-ctxmenu__label[data-ctxmenu-label]? > .uk-ctxmenu__item[data-ctxmenu-item] (button)
 * | .uk-ctxmenu__sep. Облик — 1С-канон, тот же, что классик .ctx (§13 выше): белое меню,
 * тонкая рамка, hover-подсветка строки, danger — красным; здесь дополнительно кнопки
 * (не div) — сброс border/background/font, и disabled-состояние (движок ставит его класс
 * при item.disabled). */
[data-ctx-open]{background:var(--hover)}  /* цель ПКМ подсвечена, пока меню открыто */
.uk-ctxmenu{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 8px 28px rgba(0,0,0,.18);min-width:200px;font-size:var(--fs-sm);
  font-family:var(--sans);overflow:hidden;padding:4px 0}
.uk-ctxmenu__label{padding:7px 12px;background:var(--ribbon-2);color:var(--mute);font-size:11.5px;
  border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:300px}
.uk-ctxmenu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;
  border:0;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.uk-ctxmenu__item:hover{background:var(--hover)}
.uk-ctxmenu__item.is-danger{color:var(--c-red)}
.uk-ctxmenu__item.is-disabled{color:var(--mute-2);cursor:default;opacity:.6}
.uk-ctxmenu__item.is-disabled:hover{background:none}
.uk-ctxmenu__icon{flex-shrink:0;width:1em;text-align:center}
.uk-ctxmenu__text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uk-ctxmenu__sep{height:1px;margin:4px 0;background:var(--cell-2)}

/* ────────────────── [16] uk-messages (T15, лента переписки) ──────────────────
 * Тот же облик, что классик .oc-chat §12 (1С+Telegram) — скелет+данные клиента
 * (organisms/messages.py не рисует пузырей, только контейнер+скролл), пузыри
 * кладёт потребитель (панель-биндер ЧАТ-воркера) классами ниже. side="out" →
 * .is-out (свой пузырь — справа, приглушённый акцент фона вместо простого белого). */
.uk-messages{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.uk-messages__scroll{flex:1;min-height:0;overflow:auto;background:var(--win);padding:14px;
  display:flex;flex-direction:column;gap:8px}
.uk-message{max-width:78%;align-self:flex-start;background:var(--panel);
  border:1px solid var(--cell);border-radius:10px;padding:6px 10px}
.uk-message.is-out{align-self:flex-end;background:var(--hover);border-color:var(--sel-bd)}
.uk-message__head{display:flex;gap:8px;align-items:baseline;font-size:11.5px;margin-bottom:2px}
.uk-message__author{font-weight:600;color:var(--ink)}
.uk-message__time{margin-left:auto;color:var(--mute);font-size:10.5px}
.uk-message__body{font-size:13px;color:var(--ink);line-height:1.45;white-space:pre-wrap}
/* .uk-message__link (владелец: link={kind,pk,label} на сообщении — HTML-письма
 * Почты) — плашка ВМЕСТО .uk-message__body, стиль вложения/чипа (канон .oc-chip). */
.uk-message__link{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  color:var(--c-blue);font-size:12.5px;font-weight:500;cursor:pointer;text-decoration:none}
.uk-message__link:hover{background:var(--hover);border-color:var(--sel-bd)}

/* ── Палитра цвета в инструменте «Тема оформления» (mutation control="color"). ──────
 * Атом рендерит <span.uk-color-field> с <input type="color"> (живой предпросмотр) +
 * текстовым hex-полем. Аддитивно к теме; индикация сохранения — .uk-saved/.uk-save-err
 * вешаются на hex-поле (уже есть общий стиль). */
.uk-color-field{display:inline-flex;align-items:center;gap:6px}
.uk-color-field .uk-color-picker{width:26px;height:26px;padding:0;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);cursor:pointer;flex:0 0 auto}
.uk-color-field .uk-color-picker::-webkit-color-swatch-wrapper{padding:2px}
.uk-color-field .uk-color-picker::-webkit-color-swatch{border:none;border-radius:2px}
.uk-color-field .uk-color-hex{width:5.5em;font-family:var(--mono);font-size:var(--fs-sm)}