/* ============================================================================
   70-dash.css — редизайн «Главной» + лента сервисов (пара к web/js/80-dash.js)
   Грузится ПОСЛЕДНИМ: правила поверх 20-screens/40-revisions. Разметка: index.html
   (#screen-dash: омни-поиск · .dash-cols = слева (75%) лента #deskSvc + канбан,
   справа (25%) история · мини-чат · «Ближайшие действия»; #screen-docs: лента
   #docFeats). Старые .dash-bento/.dash-side удалены из разметки — их правила в
   20-screens мертвы и не мешают.
   ============================================================================ */

/* ---------- глобальный поиск (омни) ---------- */
.omni-wrap{position:relative;flex:1 1 320px;min-width:min(320px,100%);max-width:720px}
.omni-box{height:46px;width:100%}
.omni-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;max-height:min(64vh,560px);
  overflow:auto;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);padding:6px}
.omni-sec{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--txt-3);padding:9px 10px 5px}
.omni-sec svg{width:14px;height:14px;flex:none}
.omni-wait{font-weight:600;text-transform:none;letter-spacing:0;color:var(--txt-3);opacity:.8;margin-left:auto}
.omni-item{cursor:pointer}
.omni-item .dos-ic{color:var(--iris)}
.omni-item:hover,.omni-item:focus-visible{background:var(--elev);outline:none}
.omni-item .dos-go{width:15px;height:15px;flex:none;color:var(--txt-3);opacity:0;transform:translateX(-4px);transition:all var(--fast)}
.omni-item:hover .dos-go,.omni-item:focus-visible .dos-go{opacity:1;transform:none;color:var(--iris-300)}
.omni-err{padding:10px 12px;font-size:12.5px;color:var(--warn)}
.omni-none{padding:8px 12px 10px;font-size:12.5px;color:var(--txt-3)}

/* ---------- лента сервисов (иконки-плитки) ---------- */
.svc-ribbon-wrap{position:relative;margin-bottom:13px}
/* адаптив: при нехватке ширины плитки переносятся на следующий ряд (без прокрутки/стрелок) */
.svc-ribbon{display:flex;flex-wrap:wrap;align-items:stretch;gap:2px;padding:8px 2px 4px}
.svci{flex:none;width:clamp(86px,7vw,112px);display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:4px 4px 6px;cursor:grab;border-radius:var(--r-md);user-select:none}
.svci:focus-visible{outline:none;box-shadow:var(--ring)}
/* квадратная кнопка-иконка: наши синие глифы + фирменный ховер (подъём, синяя рамка, поворот) */
.svci-btn{width:clamp(50px,3.9vw,60px);height:clamp(50px,3.9vw,60px);border-radius:13px;flex:none;
  display:grid;place-items:center;background:var(--surface);border:1px solid var(--hairline);
  color:var(--iris);transition:transform var(--fast),border-color var(--fast),box-shadow var(--fast)}
.svci-btn svg{width:26px;height:26px;transition:transform var(--fast)}
.svci:hover .svci-btn{transform:translateY(-4px);border-color:color-mix(in oklab,var(--iris) 55%,transparent);box-shadow:var(--shadow-2)}
.svci:hover .svci-btn svg{transform:scale(1.08) rotate(-5deg)}
:root[data-theme="light"] .svci:hover .svci-btn{box-shadow:0 4px 10px -2px rgba(22,42,72,.14),0 16px 34px -16px rgba(31,111,194,.28)}
.svci-lbl{font-size:11.5px;font-weight:600;line-height:1.25;color:var(--txt-2);text-align:center;max-width:100%;
  overflow-wrap:break-word;hyphens:auto}
.svci:hover .svci-lbl{color:var(--txt)}
/* «(?)» — ссылка на инструкцию/руководство (openServiceDoc), не мешает клику по плитке */
.svci-help{border:none;background:none;padding:0 1px;font:inherit;font-size:10.5px;font-weight:700;
  color:var(--txt-3);cursor:pointer;transition:color var(--fast)}
.svci-help:hover{color:var(--iris)}
.svci-div{flex:none;width:1px;align-self:stretch;margin:6px 8px;background:var(--hairline)}
/* драг: тащимая полупрозрачна, ховер соседей глушится (как у плашек) */
.svci.dragging{opacity:.45;cursor:grabbing}
.svc-ribbon.svc-dnd .svci:hover .svci-btn{transform:none;border-color:var(--hairline);box-shadow:none}
.svc-ribbon.svc-dnd .svci:hover .svci-btn svg{transform:none}
/* ---------- рабочая область: золотое сечение φ=1.618 (слева ~62% лента+канбан ·
   справа ~38% история·чат·действия); ритм отступов — ряд Фибоначчи 5/8/13/21/34 ---------- */
.dash-cols{display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:21px;
  align-items:stretch;min-height:0}
.dash-col-l{display:flex;flex-direction:column;min-width:0;min-height:0}
.dash-col-r{display:flex;flex-direction:column;gap:13px;min-width:0;min-height:0}
.desk-hist-card,.desk-chat-card{display:flex;flex-direction:column;min-width:0;min-height:0;
  padding:13px}
/* история и чат (композер + «Ближайшие действия») делят колонку ПОПОЛАМ: равные высоты,
   обе карточки вписаны в экран (flex-basis 0 → рост только от свободного места) */
.desk-hist-card,.desk-chat-card{flex:1 1 0;min-height:0}
.dh-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;margin-bottom:8px}
.dh-head .tr-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700}
.dh-head .tr-ic{color:var(--iris)}
.dh-head .tr-ic svg{width:17px;height:17px}
.desk-hist-tabs{flex:none}
.dh-search{height:38px;flex:none;margin-bottom:8px}
.dh-search svg{width:16px;height:16px}
.desk-hist-body{flex:1;min-height:0;overflow:auto;padding-right:2px}
/* мини-чат: композер (ввод улетает в полный чат юриста) + секция «Ближайшие действия».
   height:auto ОБЯЗАТЕЛЕН: карточка несёт класс .chat, а глобальный .chat{height:100%}
   (20-screens) в грид-строке раскручивал высоту карточки/строки до тысяч px — чат
   распухал, а «Ближайшие действия» уезжали за экран. */
.desk-chat-card{border:1px solid var(--hairline);height:auto;min-height:0;padding:10px 13px 11px}
.desk-chat-card .dh-head{margin-bottom:5px}
.desk-chat-card .tr-title{font-size:12.5px}
.desk-chat-card .tr-ic svg{width:15px;height:15px}
.desk-chat-foot{flex:none;padding:2px 0 0;border-top:none}
/* порядок в карточке: сверху «Ближайшие действия», снизу композер чата (ввод внизу, как в
   чате); подзаголовок «Чат с юристом» отбит волосяной линией */
.desk-chat-head{margin:11px 0 0;padding-top:10px;border-top:1px solid var(--hairline)}
/* канбан: шаг Фибоначчи между колонками (перебивает gap:12px из 40-revisions) */
#deskKanban{gap:13px}
/* «Ближайшие действия»: список кейсов-сроков; занимает всё между шапкой и «Чатом с юристом» */
.desk-act-body{flex:1 1 auto;min-height:0;overflow:auto}
.desk-act-none{font-size:12.5px;color:var(--txt-2);line-height:1.45}
/* строка = тот же .dos-item, что чаты записи (#recDlgList) — кнопке нужен только сброс,
   вид (фон/рамка/ховер/шеврон) целиком наследуется от .dos-item/.dos-ic/.dos-go */
.desk-act{width:100%;text-align:left;font:inherit;color:var(--txt);cursor:pointer}
.desk-act .da-due{flex:none;font-size:11px;font-weight:700;color:var(--txt-2);background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:3px 8px}
/* тёмный текст на янтарном — белый на var(--warn) не проходит контраст (axe 2.14:1) */
.desk-act.urgent .da-due{color:#33270a;background:var(--warn);border-color:transparent}

/* ---------- десктоп: канбан = основная площадь, правая колонка тянется рядом ---------- */
@media (min-width:1081px){
  /* генератор: авто-колонка грида .docgen-left растягивается по max-content ленты (914px >
     ширины колонки) и лента выезжает поверх чата. minmax(0,1fr) прижимает трек к контейнеру —
     тот же приём, что «min-width:0 по цепочке» из frontend-responsive. */
  #screen-docs .docgen-left{grid-template-columns:minmax(0,1fr)}
  #screen-docs .docgen-left>.svc-ribbon-wrap{min-width:0}
  /* рабочий стол = один экран без прокрутки страницы: высота вьюпорта (36px = вертикальные
     паддинги .main), канбан скроллится ВНУТРИ, «Ближайшие действия» всегда видны внизу справа */
  #screen-dash.screen.active{height:calc(100vh - 36px);min-height:0;overflow:hidden}
  #screen-dash>.dash-cols{flex:1 1 auto;min-height:0}
  .dash-col-l>.svc-ribbon-wrap{flex:none}
  .dash-col-l>#deskCasesBody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .dash-col-l #deskKanban{flex:1;min-height:0;overflow:auto}
  .dash-col-l #deskKanban .kan-col{max-height:none;overflow:visible;min-height:100%}
}
/* средние десктопы: φ-колонка слева уже, чем при 75/25 — ужимаем плитки, чтобы лента
   занимала 2 ряда, а основную площадь держал канбан (главная рабочая зона) */
@media (min-width:1081px) and (max-width:1600px){
  .dash-col-l .svci{width:84px;padding:4px 2px 6px}
  .dash-col-l .svci-btn{width:46px;height:46px}
  .dash-col-l .svci-btn svg{width:22px;height:22px}
  /* 10px: самые длинные слова («Универсальный», «Саммаризация») влезают в плитку целиком,
     без уродливого разрыва посреди слова (headless-Chrome может быть без словаря переносов) */
  .dash-col-l .svci-lbl{font-size:10px}
  /* без декоративной черты системная плитка встаёт в общий ряд → лента ровно в 2 ряда */
  .dash-col-l .svci-div{display:none}
}
/* ---------- ≤1080: колонки складываются, высоты автоматические ---------- */
@media (max-width:1080px){
  .dash-cols{display:block}
  .dash-col-r{margin-top:clamp(12px,1.6vh,18px)}
  /* без фиксированной высоты вьюпорта равное деление не имеет смысла — карточки по контенту */
  .desk-hist-card,.desk-chat-card{flex:none}
  .desk-hist-card{height:auto;min-height:300px;max-height:56vh}
  .omni-wrap{order:3;flex-basis:100%;max-width:none}
}
@media (max-width:480px){
  .svci{width:78px}
  .desk-act div>span{white-space:normal}
}
/* QHD/4K — лента и правая колонка дышат просторнее */
@media (min-width:2560px){
  .svci{width:128px}
  .svci-btn{width:66px;height:66px}
  .svci-btn svg{width:30px;height:30px}
  .svci-lbl{font-size:12.5px}
  .desk-hist-card{min-height:420px}
}