/* ═══════════════════════════════════════════════════════════════════════
   Плавающий чат-виджет — РЕДИЗАЙН (.cw-*), зеркалит полную страницу /chat.
   Источник: docs/design/assets/dashboard-redesign.html. На токенах tokens.css.
   ═══════════════════════════════════════════════════════════════════════ */

.cw-fab { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 54px; height: 54px; border-radius: 50%;
    background: var(--accent); color: #fff; border: none; cursor: pointer; display: grid; place-items: center;
    font-size: 1.35rem; box-shadow: 0 6px 18px var(--accent-glow), var(--shadow-md);
    transition: transform var(--m-fast) var(--ease), background var(--m-fast); }
.cw-fab:hover { background: var(--accent-hover); transform: translateY(-2px); }
.cw-fab .badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 99px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; display: grid;
    place-items: center; border: 2px solid var(--bg); }

.cw-panel { position: fixed; right: 20px; bottom: 86px; z-index: 90; width: 380px; height: min(584px, calc(100vh - 130px));
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop); display: flex; flex-direction: column; overflow: hidden;
    animation: cw-pop-in var(--m-base) var(--ease); transform-origin: bottom right; }
@keyframes cw-pop-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.cw-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Скрытие через атрибут hidden (JS): перебиваем display:flex выше */
.cw-panel[hidden], .cw-view[hidden], #cwFabBadge[hidden], #cwAttachPreview[hidden] { display: none !important; }

/* avatars */
.cw-av { position: relative; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; line-height: 1; overflow: hidden; }
.cw-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cw-av[data-t="0"]{ background:#5b8a86; } .cw-av[data-t="1"]{ background:#6b7280; }
.cw-av[data-t="2"]{ background:#8a7a5b; } .cw-av[data-t="3"]{ background:#8a5b6b; } .cw-av[data-t="4"]{ background:#5b6b8a; }
.cw-av.ai { background: linear-gradient(150deg, var(--accent), var(--accent-strong)); }
.cw-av.s34 { width: 34px; height: 34px; font-size: 12px; }
.cw-av.s28 { width: 28px; height: 28px; font-size: 11px; }
.cw-av .pr { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ink-3); }
.cw-av .pr.on { background: var(--ok); }

/* header */
.cw-hd { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-shrink: 0; }
.cw-hd .ttl { flex: 1; min-width: 0; font-weight: 700; font-size: var(--text-base); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-hd .ttl small { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--ink-3); margin-top: 1px; }
.cw-hd .ttl small.on { color: var(--ok); }
.cw-hd .ttl-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cw-ic { width: 30px; height: 30px; border: none; background: none; cursor: pointer; color: var(--ink-3);
    border-radius: var(--r-sm); display: grid; place-items: center; font-size: .95rem; transition: background var(--m-fast), color var(--m-fast); flex-shrink: 0; text-decoration: none; }
.cw-ic:hover { background: var(--surface-3); color: var(--ink); }
.cw-aitag { font-size: var(--text-2xs); font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 5px; padding: 0 5px; }

/* channel list */
.cw-search { margin: 10px 12px 4px; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 7px 10px; flex-shrink: 0; }
.cw-search i { color: var(--ink-3); font-size: .85rem; }
.cw-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--ink); }
.cw-search input::placeholder { color: var(--ink-3); }
.cw-list { flex: 1; overflow-y: auto; padding: 4px 8px 10px; }
.cw-sec { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 11px 8px 4px; }
.cw-ci { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px 9px;
    border: none; background: none; cursor: pointer; color: inherit; text-align: left; border-radius: var(--r-md); transition: background var(--m-fast); }
.cw-ci:hover { background: var(--surface-2); }
.cw-ci.ai { background: linear-gradient(180deg, var(--accent-soft), transparent); border: 1px solid var(--accent-line); }
.cw-ci-mid { min-width: 0; }
.cw-ci-r1 { display: flex; align-items: baseline; gap: 7px; }
.cw-ci-name { font-weight: 600; font-size: var(--text-base); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.cw-ci.unread .cw-ci-name { font-weight: 700; }
.cw-ci-time { font-size: var(--text-2xs); color: var(--ink-3); flex-shrink: 0; }
.cw-ci-prev { font-size: var(--text-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cw-ci.unread .cw-ci-prev { color: var(--ink-2); }
.cw-ci-prev b { font-weight: 500; color: var(--ink-2); }
.cw-ci-prev .me { color: var(--ink-3); }
.cw-ci-badge { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: #fff; font-size: var(--text-2xs); font-weight: 700; display: grid; place-items: center; align-self: center; }
.cw-hash { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; }
.cw-empty { padding: 24px 14px; text-align: center; color: var(--ink-3); font-size: var(--text-sm); }
.cw-empty a { color: var(--accent-strong); }

/* messages */
.cw-msgs { flex: 1; overflow-y: auto; padding: 12px 13px; display: flex; flex-direction: column; gap: 9px; }
.cw-sep { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.cw-sep::before, .cw-sep::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.cw-sep span { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.cw-m { display: flex; flex-direction: column; max-width: 86%; gap: 3px; align-self: flex-start; }
.cw-m.mine { align-self: flex-end; align-items: flex-end; }
.cw-b { padding: 7px 11px; border-radius: 4px 13px 13px 13px; font-size: var(--text-base); line-height: 1.45; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); white-space: pre-wrap; word-wrap: break-word; }
.cw-m.mine .cw-b { background: var(--accent); color: #fff; border-color: transparent; border-radius: 13px 4px 13px 13px; }
.cw-b a { color: var(--accent-strong); text-decoration: underline; }
.cw-m.mine .cw-b a { color: #fff; }
/* «Очистить историю» — наверху ленты ассистента, когда есть прошлые вопросы. */
.cw-ai-clear { text-align: center; padding: 4px 0 6px; }
.cw-ai-clear button { border: none; background: none; color: var(--ink-3); font: inherit;
    font-size: var(--text-2xs); cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--r-full); }
.cw-ai-clear button:hover { background: var(--surface-2); color: var(--ink-2); }

/* AI-пузырь рендерит markdown (p/ul/li) — pre-wrap не нужен (давал бы лишние
   переносы между тегами). */
.cw-ai-bubble { white-space: normal; }
.cw-ai-bubble p { margin: 0 0 7px; } .cw-ai-bubble p:last-child { margin-bottom: 0; }
.cw-ai-bubble ul { margin: 4px 0; padding-left: 18px; }
.cw-ai-bubble li { margin-bottom: 3px; }
.cw-ai-bubble code { font-family: var(--font-mono); font-size: .85em; background: var(--surface-3); padding: 1px 5px; border-radius: 5px; }
.cw-b.cw-ai-err { color: var(--bad); }
.cw-b.cw-ai-loading { opacity: .75; }
.cw-mention { background: var(--accent-soft); color: var(--accent-strong); padding: 0 3px; border-radius: 4px; font-weight: 600; }
.cw-meta { font-size: var(--text-2xs); color: var(--ink-3); padding: 0 3px; }
.cw-att-img { max-width: 220px; max-height: 180px; border-radius: var(--r-sm); border: 1px solid var(--line); cursor: zoom-in; display: block; }
.cw-att-file { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: inherit; text-decoration: none; font-size: var(--text-sm); max-width: 260px; }
.cw-att-file:hover { background: var(--surface-3); }
.cw-att-file span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* compact LIMS object card */
.cw-card { width: 100%; max-width: 280px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-xs); text-decoration: none; color: inherit; display: block; }
.cw-card-hd { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.cw-card-ic { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; flex-shrink: 0; }
.cw-card-tt { min-width: 0; flex: 1; }
.cw-card-k { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.cw-card-n { font-weight: 600; font-size: var(--text-sm); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-card-ft { display: flex; align-items: center; gap: 7px; padding: 0 10px 8px; }

/* typing */
.cw-typing { display: flex; align-items: center; gap: 7px; color: var(--ink-3); font-size: var(--text-sm); padding: 0 3px; }
.cw-typing .d { display: inline-flex; gap: 3px; }
.cw-typing .d i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: cwdot 1.2s infinite ease-in-out; }
.cw-typing .d i:nth-child(2){ animation-delay:.18s; } .cw-typing .d i:nth-child(3){ animation-delay:.36s; }
@keyframes cwdot { 0%,60%,100%{ transform: translateY(0); opacity:.4 } 30%{ transform: translateY(-3px); opacity:1 } }

/* composer */
.cw-comp { border-top: 1px solid var(--line); padding: 9px 10px; flex-shrink: 0; background: var(--surface); display: flex; align-items: flex-end; gap: 5px; }
.cw-comp.dragover { background: var(--accent-soft); }
.cw-comp textarea { flex: 1; resize: none; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 8px 11px;
    font-family: inherit; font-size: var(--text-base); line-height: 1.4; max-height: 100px; overflow-y: hidden; background: var(--surface-2); color: var(--ink); outline: none; }
.cw-comp textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.cw-comp textarea::placeholder { color: var(--ink-3); }
.cw-comp textarea:disabled { opacity: .6; }
.cw-send { width: 34px; height: 34px; border-radius: var(--r-md); border: none; background: var(--accent); color: #fff; cursor: pointer;
    flex-shrink: 0; display: grid; place-items: center; font-size: .9rem; transition: background var(--m-fast), transform var(--m-fast); }
.cw-send:hover { background: var(--accent-hover); } .cw-send:active { transform: scale(.94); }
.cw-send:disabled { background: var(--surface-3); color: var(--ink-3); cursor: default; }

/* attach preview (до отправки) */
.cw-attach-preview { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--text-xs); }
.cw-attach-preview img { width: 30px; height: 30px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.cw-attach-preview-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Цитата ответа в сообщении виджета (read-only) */
.cw-reply { font-size: var(--text-2xs); color: var(--ink-3); border-left: 2px solid var(--accent); padding-left: 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-reply b { color: var(--ink-2); font-weight: 600; }

/* Карточки-источники ответа ассистента (тир данных): реальные строки БД. */
.cw-cards { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; max-width: 100%; }
.cw-card2 { display: block; text-decoration: none; background: var(--surface-2); border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong); border-radius: var(--r-sm); padding: 7px 9px; color: var(--ink);
    transition: background var(--m-fast), border-color var(--m-fast); }
a.cw-card2:hover { background: var(--surface-3); border-color: var(--ink-3); }
.cw-card2-h { display: flex; align-items: baseline; gap: 6px; }
.cw-card2-t { font-size: var(--text-sm); font-weight: 600; color: var(--ink); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-card2-s { font-size: var(--text-2xs); color: var(--ink-2); margin-top: 2px; }
.cw-card2-m { font-size: var(--text-2xs); color: var(--ink-3); margin-top: 1px; }
.cw-card2-b { flex-shrink: 0; font-size: var(--text-2xs); font-weight: 700; padding: 1px 7px; border-radius: var(--r-full);
    background: var(--surface-3); color: var(--ink-2); }
.cw-card2-b.ok  { background: var(--ok-soft);   color: var(--ok);  }
.cw-card2-b.warn{ background: var(--warn-soft); color: var(--warn); }
.cw-card2-b.bad { background: var(--bad-soft);  color: var(--bad);  }
.cw-card2-b.mut { background: var(--surface-3); color: var(--ink-2); }
.cw-seeall { font-size: var(--text-2xs); font-weight: 600; color: var(--accent-strong); text-decoration: none; padding: 2px 2px; }
.cw-seeall:hover { text-decoration: underline; }