/* Доски (Kanban) и боковая панель карточки. Собственные стили с переменными для светлой и тёмной
   темы: классы Tailwind из Unfold собираются выборочно, поэтому здесь не на них полагаемся. */

.kb {
  --kb-col-bg: #f1f5f9;
  --kb-col-border: #dbe3ec;
  --kb-card-bg: #ffffff;
  --kb-card-border: #dbe3ec;
  --kb-text: #0f172a;
  --kb-muted: #64748b;
  --kb-hover: rgba(21, 186, 237, 0.08);
  --kb-accent: #15baed;
  --kb-danger: #dc2626;
  --kb-ok: #16a34a;
  --kb-input-bg: #ffffff;
  color: var(--kb-text);
}
.dark .kb {
  --kb-col-bg: #131c2e;
  --kb-col-border: #243049;
  --kb-card-bg: #1b2740;
  --kb-card-border: #2b3a57;
  --kb-text: #e6edf6;
  --kb-muted: #93a1b8;
  --kb-hover: rgba(21, 186, 237, 0.12);
  --kb-input-bg: #0f1726;
  --kb-danger: #f87171;
  --kb-ok: #4ade80;
}

/* Шапка и KPI */
.kb-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kb-title { font-size: 1.5rem; font-weight: 600; }
.kb-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-input, .kb select.kb-input, .kb textarea.kb-input {
  background: var(--kb-input-bg); color: var(--kb-text);
  border: 1px solid var(--kb-card-border); border-radius: 8px; padding: 6px 10px; font: inherit; min-width: 0;
}
.kb-input:focus { outline: none; border-color: var(--kb-accent); box-shadow: 0 0 0 3px rgba(21, 186, 237, 0.18); }
.kb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .kb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kb-kpi { background: var(--kb-col-bg); border: 1px solid var(--kb-col-border); border-radius: 10px; padding: 10px 14px; }
.kb-kpi .l { font-size: 0.75rem; color: var(--kb-muted); }
.kb-kpi .v { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
.kb-kpi .v.accent { color: var(--kb-accent); }
.kb-kpi .v.ok { color: var(--kb-ok); }

/* Доска: на высоту экрана, горизонтальная прокрутка у нижнего края окна */
.kb-board {
  display: flex; gap: 12px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  height: calc(100vh - 300px); min-height: 360px; padding-bottom: 10px;
  scrollbar-width: thin;
}
.kb-col {
  flex: 0 0 292px; width: 292px; display: flex; flex-direction: column; max-height: 100%;
  background: var(--kb-col-bg); border: 1px solid var(--kb-col-border); border-radius: 12px;
}
.kb-col-head { padding: 12px 12px 10px; border-bottom: 1px solid var(--kb-col-border); }
.kb-col-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.kb-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kb-count { margin-left: auto; font-size: 0.75rem; padding: 1px 8px; border-radius: 999px;
  background: var(--kb-card-bg); border: 1px solid var(--kb-card-border); color: var(--kb-muted); }
.kb-col-sum { font-size: 0.75rem; color: var(--kb-muted); margin-top: 4px; }
.kb-cards { flex: 1 1 auto; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 70px; }
.kb-add {
  text-align: left; width: 100%; padding: 10px 12px; font-size: 0.875rem; color: var(--kb-muted);
  border: 0; border-top: 1px solid var(--kb-col-border); background: transparent; cursor: pointer; border-radius: 0 0 12px 12px;
}
.kb-add:hover { background: var(--kb-hover); color: var(--kb-text); }
.kb-archive { padding: 0 12px 8px; font-size: 0.75rem; color: var(--kb-muted); }

/* Карточка */
.kb-card {
  background: var(--kb-card-bg); border: 1px solid var(--kb-card-border); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; color: var(--kb-text);
}
.kb-card:hover { border-color: var(--kb-accent); }
.kb-card.is-open { border-color: var(--kb-accent); box-shadow: 0 0 0 2px rgba(21, 186, 237, 0.25); }
.kb-card-title { font-weight: 600; line-height: 1.3; }
.kb-card-sub { font-size: 0.75rem; color: var(--kb-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-card-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 0.8125rem; }
.kb-card-amount { font-weight: 600; }
.kb-muted { color: var(--kb-muted); }
.kb-danger { color: var(--kb-danger); }
.kb-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; background: rgba(21, 186, 237, 0.2); color: var(--kb-accent);
  background-size: cover; background-position: center;
}
.kb-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.75rem; color: var(--kb-muted); }
.kb-who span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 8rem; }
.sortable-ghost { opacity: 0.35; }
.sortable-chosen { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); cursor: grabbing; }

/* Диалоги (отказ, создание) */
.kb-dialog { background: var(--kb-card-bg); color: var(--kb-text); border: 1px solid var(--kb-card-border);
  border-radius: 12px; padding: 20px; min-width: 22rem; }
.kb-dialog::backdrop { background: rgba(2, 6, 23, 0.55); }
.kb-dialog .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.kb-btn { border: 1px solid var(--kb-card-border); background: var(--kb-card-bg); color: var(--kb-text);
  border-radius: 8px; padding: 6px 14px; cursor: pointer; font: inherit; }
.kb-btn:hover { border-color: var(--kb-accent); }
.kb-btn.primary { background: var(--kb-accent); border-color: var(--kb-accent); color: #04202b; font-weight: 600; }
.kb-btn.danger { background: var(--kb-danger); border-color: var(--kb-danger); color: #fff; }

/* Боковая панель справа */
.kb-overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.35); opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease; z-index: 60; }
.kb-overlay.open { opacity: 1; pointer-events: auto; }
.kb-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 61;
  background: var(--kb-card-bg); border-left: 1px solid var(--kb-card-border); color: var(--kb-text);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column; visibility: hidden; box-shadow: none;
}
.kb-panel.open { transition-delay: 0s; transform: none; visibility: visible; box-shadow: -20px 0 40px rgba(0, 0, 0, 0.25); }
.kb-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kb-p-head { padding: 14px 18px; border-bottom: 1px solid var(--kb-col-border); display: flex; gap: 10px; align-items: flex-start; }
.kb-p-title { flex: 1; font-size: 1.125rem; font-weight: 600; background: transparent; border: 1px solid transparent;
  border-radius: 8px; padding: 4px 8px; color: inherit; font-family: inherit; }
.kb-p-title:hover, .kb-p-title:focus { border-color: var(--kb-card-border); outline: none; background: var(--kb-input-bg); }
.kb-p-close { border: 0; background: transparent; color: var(--kb-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 8px; }
.kb-p-close:hover { background: var(--kb-hover); color: var(--kb-text); }
.kb-p-scroll { overflow-y: auto; padding: 14px 18px; flex: 0 1 auto; max-height: 48%; border-bottom: 1px solid var(--kb-col-border); }
.kb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.kb-field { display: flex; flex-direction: column; gap: 4px; }
.kb-field.wide { grid-column: 1 / -1; }
.kb-field label { font-size: 0.75rem; color: var(--kb-muted); }
.kb-field .kb-input { width: 100%; }
.kb-saved { font-size: 0.75rem; color: var(--kb-ok); height: 1em; opacity: 0; transition: opacity 0.3s; }
.kb-saved.show { opacity: 1; }

.kb-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--kb-col-border); }
.kb-tab { padding: 10px 12px; border: 0; background: transparent; color: var(--kb-muted); cursor: pointer; font: inherit;
  border-bottom: 2px solid transparent; }
.kb-tab.active { color: var(--kb-text); border-bottom-color: var(--kb-accent); }
.kb-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.kb-pane.active { display: flex; }

/* Чат */
.kb-chat { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.kb-msg { display: flex; gap: 10px; max-width: 92%; animation: kb-pop 0.25s ease backwards; }
.kb-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.kb-bubble { background: var(--kb-col-bg); border: 1px solid var(--kb-col-border); border-radius: 12px; padding: 8px 12px; min-width: 0; }
.kb-msg.mine .kb-bubble { background: rgba(21, 186, 237, 0.14); border-color: rgba(21, 186, 237, 0.4); }
.kb-msg-meta { font-size: 0.7rem; color: var(--kb-muted); margin-bottom: 2px; }
.kb-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9rem; }
.kb-empty { color: var(--kb-muted); text-align: center; margin: auto; font-size: 0.875rem; }
.kb-compose { padding: 12px 18px; border-top: 1px solid var(--kb-col-border); display: flex; gap: 8px; align-items: flex-end; }
.kb-compose textarea { flex: 1; resize: none; max-height: 140px; }
.kb-history { overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.kb-hist-item { font-size: 0.85rem; border-left: 2px solid var(--kb-col-border); padding-left: 10px; }
.kb-hist-item time { display: block; font-size: 0.7rem; color: var(--kb-muted); }

@keyframes kb-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .kb-panel, .kb-overlay { transition-duration: 0.001ms; }
  .kb-msg { animation: none; }
}

/* --- Доски задач --- */
.kb-prio { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle;
  background: #94a3b8; flex: none; }
.kb-prio-0 { background: #94a3b8; }
.kb-prio-1 { background: #15baed; }
.kb-prio-2 { background: #f59e0b; }
.kb-prio-3 { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); }
.kb-card.is-done .kb-card-title { text-decoration: line-through; color: var(--kb-muted); }
.kb-card.is-done { opacity: 0.8; }
.kb-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; font-size: 0.75rem; color: var(--kb-muted); }
.kb-chip { padding: 1px 6px; border-radius: 6px; background: var(--kb-col-bg); border: 1px solid var(--kb-col-border); }
.kb-section { margin-top: 14px; }
.kb-section-title { font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; }
.kb-check { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 0.9rem; cursor: pointer; }
.kb-check .done { text-decoration: line-through; color: var(--kb-muted); }
.kb-x { margin-left: auto; border: 0; background: transparent; color: var(--kb-muted); cursor: pointer; font-size: 1.1rem; line-height: 1;
  opacity: 0; transition: opacity 0.15s; }
.kb-check:hover .kb-x, .kb-att:hover .kb-x { opacity: 1; }
.kb-att { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 0.875rem; }
.kb-att a { color: var(--kb-accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }

/* --- Панель: прокручивается целиком, шапка и поле ввода липкие --- */
.kb-panel-body { overflow-y: auto; }
.kb-p-head { position: sticky; top: 0; z-index: 3; background: var(--kb-card-bg); }
.kb-p-scroll { max-height: none; overflow: visible; flex: none; }
.kb-tabs { position: sticky; top: 61px; z-index: 2; background: var(--kb-card-bg); }
.kb-pane { flex: none; min-height: 0; }
.kb-pane.active { flex: none; }
.kb-chat { flex: none; min-height: 220px; max-height: 420px; }
.kb-history { max-height: 420px; }
.kb-compose { position: sticky; bottom: 0; z-index: 3; background: var(--kb-card-bg); }

/* --- Карточка в стиле YouGile: приоритет, срок, стикеры, прогресс --- */
.kb-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kb-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem;
  font-weight: 600; line-height: 1.5; color: #fff; background: #64748b; white-space: nowrap; }
.kb-pill-low { background: #94a3b8; }
.kb-pill-high { background: #f59e0b; }
.kb-pill-urgent { background: #ef4444; }
.kb-pill-due { background: var(--kb-col-bg); color: var(--kb-text); border: 1px solid var(--kb-col-border); font-weight: 500; }
.kb-pill-due.kb-due-overdue { background: #ef4444; border-color: #ef4444; color: #fff; font-weight: 600; }
.kb-pill-due.kb-due-soon { background: #f59e0b; border-color: #f59e0b; color: #fff; font-weight: 600; }
.kb-pill-due.kb-due-done { background: rgba(22, 163, 74, 0.16); border-color: rgba(22, 163, 74, 0.5); color: #16a34a; }
.kb-pill-est { background: var(--kb-col-bg); color: var(--kb-muted); border: 1px solid var(--kb-col-border); font-weight: 500; }
.kb-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.kb-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 600;
  color: var(--c, #15baed); background: color-mix(in srgb, var(--c, #15baed) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, #15baed) 45%, transparent); }
.kb-tag-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0; opacity: 0.7; }
.kb-tag-x:hover { opacity: 1; }
.kb-card .kb-tags { margin-top: 8px; }
.kb-progress { height: 6px; border-radius: 999px; background: var(--kb-col-border); overflow: hidden; margin-top: 8px; position: relative; }
.kb-progress > i { display: block; height: 100%; background: #16a34a; border-radius: 999px; transition: width 0.3s; }
.kb-progress-row { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--kb-muted); }
.kb-progress-row .kb-progress { flex: 1; }
.kb-progress-row span { margin-top: 8px; }
.kb-card-row.kb-foot { margin-top: 8px; }
.kb-meta-chips { display: inline-flex; gap: 8px; font-size: 0.75rem; color: var(--kb-muted); }

/* --- Панель: вкладки сверху, блоки --- */
.kb-p-key { display: flex; gap: 8px; align-items: center; padding: 0 8px; font-size: 0.78rem; }
.kb-key { font-weight: 700; color: var(--kb-accent); letter-spacing: 0.02em; }
.kb-tabs-top { top: 78px; }
.kb-block-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; }
.kb-label { font-size: 0.75rem; color: var(--kb-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.kb-info-line { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; flex-wrap: wrap; }
.kb-link { border: 0; background: transparent; color: var(--kb-accent); cursor: pointer; font: inherit; padding: 0; text-decoration: none; }
.kb-link:hover { text-decoration: underline; }
.kb-desc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; margin-top: 12px; }
.kb-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.kb-swatch.active { border-color: var(--kb-text); }
.kb-history .kb-hist-item[hidden] { display: none; }

/* --- название в панели и создание задачи в колонке --- */
textarea.kb-p-title { resize: none; overflow: hidden; line-height: 1.3; min-height: 2.2em; border-color: var(--kb-card-border);
  background: var(--kb-input-bg); }
textarea.kb-p-title:focus { border-color: var(--kb-accent); }
.kb-ro { display: flex; align-items: center; color: var(--kb-muted); cursor: default; }
.kb-composer { border-style: dashed; border-color: var(--kb-accent); cursor: default; }
.kb-composer textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; color: inherit;
  font: inherit; font-weight: 600; min-height: 3.2em; }
.kb-composer-hint { font-size: 0.7rem; color: var(--kb-muted); }

/* --- панель: вкладки фиксированы, ввод чата прижат к низу --- */
.kb-panel-body { overflow: hidden; }
.kb-p-head, .kb-tabs { position: static; flex: none; }
.kb-pane { flex: 1 1 0; min-height: 0; }
.kb-pane.active { flex: 1 1 0; display: flex; flex-direction: column; }
.kb-p-scroll { flex: 1 1 auto; overflow-y: auto; max-height: none; border-bottom: 0; }
.kb-chat { flex: 1 1 0; max-height: none; min-height: 0; }
.kb-history { max-height: none; }
.kb-chat-foot { flex: none; border-top: 1px solid var(--kb-col-border); background: var(--kb-card-bg); }
.kb-compose { position: static; border-top: 0; padding: 10px 14px 4px; align-items: flex-end; }
.kb-compose-box { flex: 1; min-width: 0; border: 1px solid var(--kb-card-border); border-radius: 14px; background: var(--kb-input-bg); padding: 4px 8px; }
.kb-compose-row { display: flex; align-items: flex-end; gap: 4px; }
.kb-compose-row textarea { border: 0; background: transparent; outline: 0; box-shadow: none; padding: 8px 4px; }
.kb-icon-btn { border: 0; background: transparent; color: var(--kb-muted); cursor: pointer; font: inherit; font-size: 1.05rem;
  padding: 6px 8px; border-radius: 8px; line-height: 1; }
.kb-icon-btn:hover { background: var(--kb-hover); color: var(--kb-accent); }
.kb-icon-btn.small { font-size: 1rem; padding: 0 4px; }
.kb-fmt { display: flex; gap: 2px; padding: 4px 0; border-bottom: 1px solid var(--kb-col-border); }
.kb-fmt[hidden], .kb-emoji[hidden], #p-sub-pick[hidden] { display: none; }
.kb-fmt button { border: 0; background: transparent; color: var(--kb-text); cursor: pointer; padding: 4px 9px; border-radius: 6px; font: inherit; }
.kb-fmt button:hover { background: var(--kb-hover); }
.kb-emoji-wrap { position: relative; display: inline-flex; }
.kb-emoji { position: absolute; bottom: 36px; right: 0; width: 220px; display: flex; flex-wrap: wrap; gap: 2px; padding: 6px;
  background: var(--kb-card-bg); border: 1px solid var(--kb-card-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 5; }
.kb-emoji button { border: 0; background: transparent; cursor: pointer; font-size: 1.15rem; padding: 3px 5px; border-radius: 6px; }
.kb-emoji button:hover { background: var(--kb-hover); }
.kb-pending { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 0; }
.kb-pending:empty { display: none; }
.kb-pend { font-size: 0.78rem; border: 1px solid var(--kb-col-border); border-radius: 8px; padding: 2px 8px; background: var(--kb-col-bg); }
.kb-pend button { border: 0; background: transparent; color: var(--kb-muted); cursor: pointer; }
.kb-subs { display: flex; align-items: center; gap: 8px; padding: 6px 18px 10px; font-size: 0.75rem; }
.kb-subs-list { display: inline-flex; gap: 2px; }
.kb-subs-list .kb-avatar { width: 22px; height: 22px; font-size: 0.65rem; }
#p-sub-pick { position: absolute; bottom: 28px; left: 0; width: 200px; z-index: 5; }
.kb-msg-img { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; margin-top: 6px; }
.kb-msg-file { display: block; margin-top: 6px; color: var(--kb-accent); text-decoration: none; overflow-wrap: anywhere; font-size: 0.85rem; }
.kb-msg-text code, .kb-desc code { background: var(--kb-col-bg); border-radius: 4px; padding: 0 4px; }
.kb-msg-text a, .kb-desc a { color: var(--kb-accent); }
.kb-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border: 1px solid var(--kb-card-border); border-bottom: 0;
  border-radius: 10px 10px 0 0; background: var(--kb-col-bg); }
.kb-toolbar button, .kb-tool-file { border: 0; background: transparent; color: var(--kb-text); cursor: pointer; padding: 4px 10px;
  border-radius: 6px; font: inherit; }
.kb-toolbar button:hover, .kb-tool-file:hover { background: var(--kb-hover); }
.kb-editor { min-height: 260px; border: 1px solid var(--kb-card-border); border-radius: 0 0 10px 10px; padding: 12px;
  background: var(--kb-input-bg); outline: 0; margin-top: 0; white-space: normal; }
.kb-editor:empty::before { content: attr(data-placeholder); color: var(--kb-muted); }
.kb-editor:focus { border-color: var(--kb-accent); }
.kb-editor img, .kb-desc img { max-width: 100%; border-radius: 8px; }
.kb-desc { white-space: normal; }
.kb-desc ul, .kb-editor ul { list-style: disc; padding-left: 1.4em; }
.kb-desc ol, .kb-editor ol { list-style: decimal; padding-left: 1.4em; }
.kb-desc blockquote, .kb-editor blockquote { border-left: 3px solid var(--kb-accent); margin: 8px 0; padding-left: 10px; color: var(--kb-muted); }
.kb-desc h2, .kb-editor h2 { font-size: 1.1rem; font-weight: 700; margin: 8px 0; }
.kb-p-del:hover { color: #ef4444; }
.task-card[data-movable="0"] { cursor: pointer; }

/* --- выбор исполнителя --- */
button.kb-assignee { border: 0; padding: 0; cursor: pointer; background-size: cover; background-position: center; }
.kb-assignee.empty { background: transparent; border: 1.5px dashed var(--kb-muted); color: var(--kb-muted); }
.kb-assignee.empty::after { content: "☺"; font-size: 0.8rem; }
.kb-assignee:hover { outline: 2px solid var(--kb-accent); }
.kb-assign-pop { position: fixed; z-index: 60; width: 340px; background: var(--kb-card-bg); color: var(--kb-text);
  border: 1px solid var(--kb-card-border); border-radius: 12px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); padding: 0 0 4px; }
.kb-assign-pop[hidden] { display: none; }
.kb-assign-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-weight: 700;
  border-bottom: 1px solid var(--kb-col-border); }
.kb-assign-pop > .kb-input { width: calc(100% - 24px); margin: 10px 12px 6px; }
.kb-assign-cols { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 16px 4px 52px; font-size: 0.75rem; color: var(--kb-muted); }
.kb-assign-list { max-height: 240px; overflow-y: auto; }
.kb-assign-row { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 10px; align-items: center; width: 100%; text-align: left;
  border: 0; background: transparent; color: inherit; cursor: pointer; padding: 6px 16px; font: inherit; font-size: 0.875rem; }
.kb-assign-row:hover:not(:disabled) { background: var(--kb-hover); }
.kb-assign-row.sel { background: rgba(21, 186, 237, 0.14); }
.kb-assign-row:disabled { opacity: 0.45; cursor: not-allowed; }
.kb-assign-foot { display: block; padding: 10px 14px; border-top: 1px solid var(--kb-col-border); color: var(--kb-accent);
  text-decoration: none; font-size: 0.875rem; }

.kb-tag-pool { cursor: pointer; opacity: 0.85; }
.kb-tag-pool:hover { opacity: 1; }
#tag-pool { margin-bottom: 8px; }

.kb-keycopy { border: 0; background: transparent; padding: 0 4px; margin-left: -4px; border-radius: 6px; cursor: copy;
  font: inherit; color: var(--kb-muted); font-size: 0.75rem; }
.kb-keycopy:hover { color: var(--kb-accent); background: var(--kb-hover); }
.kb-keycopy.copied { color: var(--kb-ok); }
.kb-key.kb-keycopy { font-weight: 700; color: var(--kb-accent); font-size: 0.78rem; padding: 0 4px; }

/* --- колокольчик уведомлений --- */
.kb-bell { position: relative; margin-left: 8px; flex: none; }
.kb-bell-btn { position: relative; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 6px;
  border-radius: 10px; display: inline-flex; }
.kb-bell-btn:hover { background: rgba(127, 127, 127, 0.15); }
.kb-bell-badge { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.kb-bell-badge[hidden], .kb-bell-pop[hidden], .kb-bell-foot[hidden] { display: none; }
.kb-bell-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-width: 92vw; z-index: 70;
  background: var(--kb-card-bg, #fff); color: var(--kb-text, #111); border: 1px solid var(--kb-card-border, #e5e7eb);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3); overflow: hidden; }
.kb-bell-head, .kb-bell-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
  border-bottom: 1px solid var(--kb-col-border, #e5e7eb); font-size: 0.9rem; }
.kb-bell-foot { border-bottom: 0; border-top: 1px solid var(--kb-col-border, #e5e7eb); }
.kb-bell-list { max-height: 380px; overflow-y: auto; }
.kb-bell-item { display: block; padding: 10px 14px; text-decoration: none; color: inherit; font-size: 0.875rem;
  border-bottom: 1px solid var(--kb-col-border, #eee); }
.kb-bell-item:hover { background: rgba(127, 127, 127, 0.12); }
.kb-bell-item.unread { background: rgba(21, 186, 237, 0.12); }
.kb-bell-item time { display: block; font-size: 0.72rem; opacity: 0.6; margin-top: 2px; }
.kb-bell-empty { padding: 28px; text-align: center; opacity: 0.6; font-size: 0.875rem; }