:root {
  --bg: #0f0f12;
  --bg-card: #18181c;
  --bg-hover: #222228;
  --border: #2a2a32;
  --text: #e8e8ec;
  --text-muted: #8888a0;
  --accent: #e8a84a;
  --accent-dim: #c48938;
  --success: #4ade80;
  --danger: #f87171;
  --radius: 10px;
  --sidebar-w: 240px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: var(--bg);
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app {
  display: flex;
  min-height: 100vh;
}

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.login-card { width: 100%; max-width: 420px; padding: 1.5rem; }
.login-title { margin: 0 0 0.5rem; font-size: 1.5rem; }
.login-subtitle { margin: 0 0 1rem; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.sidebar-brand {
  padding: 1.25rem 1rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent);
}
.sidebar-nav, .sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0.5rem;
}
.sidebar-footer { margin-top: auto; padding-bottom: 1rem; }
.user-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.user-name { font-weight: 600; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: rgba(232, 168, 74, 0.15); color: var(--accent); }
.nav-item:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.link-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.nav-icon { width: 1.1rem; text-align: center; opacity: 0.85; }

.main-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mobile-header {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.header-title { margin: 0; font-size: 1.35rem; font-weight: 600; }
.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.content {
  flex: 1;
  padding: 1.5rem;
  overflow: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.btn-block { width: 100%; }
.btn-sm { padding: 0.35rem 0.65rem; font-size: 0.8rem; }
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { background: var(--accent-dim); }
.btn-secondary {
  background: var(--bg-hover);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--border); }
.btn-danger { background: var(--danger); color: #fff; }
.link-btn {
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.link-btn:hover { text-decoration: underline; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
}
tr:hover td { background: var(--bg-hover); }
.muted { color: var(--text-muted); }
.badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
}
.badge-lead { background: rgba(74, 222, 128, 0.2); color: var(--success); }
.badge-active { background: rgba(232, 168, 74, 0.2); color: var(--accent); }
.badge-lost { background: rgba(248, 113, 113, 0.2); color: var(--danger); }
.badge-new { background: rgba(136, 136, 160, 0.2); color: var(--text-muted); }
.badge-won { background: rgba(74, 222, 128, 0.2); color: var(--success); }
.badge-open { background: rgba(232, 168, 74, 0.2); color: var(--accent); }
.badge-done { background: rgba(74, 222, 128, 0.2); color: var(--success); }

.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], select, textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
textarea { min-height: 80px; resize: vertical; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.search-input { max-width: 320px; }
.tag-input { max-width: 160px; }
.pagination { margin-top: 1rem; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal[hidden] { display: none !important; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
.modal-box {
  position: relative;
  z-index: 101;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.modal-title { margin: 0; font-size: 1.1rem; }
.modal-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 8px;
}
.modal-body { padding: 1.25rem; }

.order-items-list {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.order-item-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
}
.order-item-row > .btn { align-self: end; }
.order-item-total, .order-total-preview { color: var(--accent); font-weight: 700; }

.dash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.dash-card h3 { margin: 0 0 0.25rem; font-size: 0.85rem; color: var(--text-muted); }
.dash-card .num { font-size: 1.75rem; font-weight: 700; color: var(--accent); }
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.dash-section { padding: 1rem; }
.section-title { margin: 0 0 0.75rem; font-size: 1rem; }
.dash-list, .entity-list, .chat-messages, .search-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-list li, .entity-list li, .chat-messages li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 1rem 0;
}
.tab-btn {
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  font: inherit;
}
.tab-btn.active { background: rgba(232, 168, 74, 0.15); border-color: var(--accent); color: var(--accent); }
.tab-panel { margin-top: 0.5rem; }
.detail-list { display: grid; gap: 0.75rem; }
.detail-list dt { color: var(--text-muted); font-size: 0.85rem; }
.detail-list dd { margin: 0.15rem 0 0; }
.entity-title { margin: 0 0 0.5rem; }

.chat-compose { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.chat-message p { margin: 0.25rem 0 0; white-space: pre-wrap; word-break: break-word; }

.file-input { display: none; }
.file-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; align-items: center; }
.upload-progress { color: var(--accent); }

.alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.alert-error {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fecaca;
}
.loading-state { padding: 2rem 0; }

.toast-container {
  position: fixed;
  pointer-events: none;
  right: 1rem;
  bottom: 1rem;
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(360px, calc(100vw - 2rem));
}
.toast {
  pointer-events: auto;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.toast-error { border-color: var(--danger); }

.search-results { margin-top: 1rem; }
.search-group-title { margin: 0 0 0.5rem; font-size: 0.95rem; }
.search-hint { margin: 0.35rem 0 0; font-size: 0.85rem; }

.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .mobile-header { display: flex; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .sidebar.sidebar-open { transform: translateX(0); }
  .header { padding-top: 0.75rem; }
  .mobile-search { flex: 1; max-width: none; }
}

@media (max-width: 600px) {
  .order-item-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sidebar { transition: none; }
}

/* R4 conversational light surface. */
:root { --bg: #fffaf4; --bg-card: #ffffff; --bg-hover: #f4ede5; --border: #d9d0c7; --text: #27221d; --text-muted: #665e56; --accent: #9a4e16; --accent-dim: #793d11; --success: #176b45; --danger: #ae2c2c; }
html { color-scheme: light; }
[data-theme='dark'] { --bg: #151719; --bg-card: #202326; --bg-hover: #2b2f33; --border: #45494d; --text: #f5f2ed; --text-muted: #c2bbb1; --accent: #f1b273; --accent-dim: #d78a41; --success: #76d7a4; --danger: #ff9992; color-scheme: dark; }
.btn, .modal-close { min-height: 44px; }
.nav-item { min-height: 34px; padding: .4rem .7rem; font-size: .9rem; }
.chat-messages { display: grid; gap: .75rem; max-width: 880px; margin-inline: auto; }
.chat-messages li { border: 0; padding: 0; }
.chat-message { max-width: min(78ch, 88%); padding: .75rem 1rem; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border); overflow-wrap: anywhere; }
.chat-message--incoming { justify-self: start; }.chat-message--outgoing { justify-self: end; background: color-mix(in srgb, var(--accent) 14%, var(--bg-card)); }
.chat-message-meta { display:flex; align-items:center; gap:.5rem; font-weight:650; min-width:0; overflow-wrap:anywhere; }
.chat-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; flex:none; }
.chat-avatar-placeholder { display:inline-grid; place-items:center; background:var(--accent); color:var(--bg-card); font-weight:700; }
.avatar-controls .btn { display:inline-flex; align-items:center; }
.chat-media-image, .chat-message video { display:block; max-inline-size:100%; max-width:100%; max-height:360px; border-radius:10px; margin-top:.5rem; }
.chat-message audio { display:block; max-inline-size:100%; max-width:100%; margin-top:.5rem; }
.chat-media-name { display:block; min-width:0; max-inline-size:100%; overflow-wrap:anywhere; }
.chat-tombstone { font-style:italic; }
.chat-compose { position:sticky; bottom:0; background:var(--bg); padding-bottom:max(1rem, env(safe-area-inset-bottom)); max-height:var(--composer-viewport-height, 100vh); }
.chat-local-preview { min-width:0; max-inline-size:100%; overflow-wrap:anywhere; }
.avatar-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.75rem; min-width:0; }
.avatar-controls input[type='file'] { max-width:100%; min-height:44px; }
.mobile-theme-toggle { display:none; }
input:not([type='checkbox']):not([type='radio']):not([type='file']), select, textarea { min-height:44px; }
@media (max-width: 760px) {
  .content { padding:.75rem; overflow-x:hidden; }
  .chat-message { max-width:94%; }
  .header-actions { width:100%; }
  .chat-compose { margin-inline:-.75rem; padding-inline:.75rem; padding-bottom:max(.75rem, env(safe-area-inset-bottom)); max-height:var(--composer-viewport-height, 100vh); overflow:auto; }
  .sidebar { display:flex; width:min(88vw, 320px); padding-bottom:env(safe-area-inset-bottom); }
  .main-wrap { min-width:0; width:100%; }
  .mobile-header { padding-top:max(.5rem, env(safe-area-inset-top)); gap:.5rem; }
  .mobile-search { min-width:0; }
  .mobile-theme-toggle { display:inline-flex; }
}

.nav-group { border: 0; margin: 0 0 .35rem; }
.nav-group summary {
  cursor: pointer;
  list-style: none;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .35rem .75rem .15rem;
}
.nav-group summary::-webkit-details-marker { display: none; }
.mini-tools { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .35rem; }
.mini-btn {
  min-height: 28px;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.mini-btn:hover { background: var(--bg-hover); color: var(--text); }
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 110;
  border: 0;
  background: rgba(0, 0, 0, .35);
}
.nav-group:not(:has(.nav-item:not([hidden]))) { display: none; }
.call-channels { display: grid; gap: .4rem; }
.call-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.call-stage { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.nav-accent {
  background: #f1b273;
  color: #2a2118;
  font-weight: 650;
}
.nav-accent:hover { background: #e09a45; color: #1c140c; }
.call-devices { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.call-device {
  min-height: 32px;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font: inherit;
  font-size: .78rem;
}
.gallery-file { display: grid; gap: 6px; }
.gallery-file img, .gallery-file video, .gallery-file audio { width: 100%; max-height: 160px; }
#crmHelper.crm-helper-mini {
  position: fixed;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 30;
  max-width: min(240px, 70vw);
}
@media (max-width: 760px) {
  .mobile-header { display: flex; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    width: min(86vw, 300px);
    transform: translateX(-105%);
    overflow: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sidebar.sidebar-open { transform: none; }
  .sidebar-backdrop.is-open { display: block; }
  .main-wrap { width: 100%; }
}

/* Wave 12: журнал аудита */
.filters-form { padding: 1rem; }
.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 1rem;
}
input[type="datetime-local"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
#auditResults { margin-top: 1rem; }
#auditResults .toolbar { margin-top: 1rem; }

/* Wave 16: accessible deals pipeline. */
.deal-view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.deal-view-toggle [aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.deal-kanban {
  display: grid;
  grid-template-columns: repeat(6, minmax(240px, 1fr));
  gap: 1rem;
  overflow-x: auto;
  align-items: start;
  padding-bottom: 0.5rem;
}
.deal-kanban-column {
  min-width: 0;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
}
.deal-kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.deal-kanban-column-header h2 {
  margin: 0;
  font-size: 0.95rem;
}
.deal-kanban-count {
  min-width: 1.75rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}
.deal-kanban-cards { display: grid; gap: 0.75rem; }
.deal-kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
}
.deal-kanban-card-title { margin: 0 0 0.5rem; font-size: 1rem; overflow-wrap: anywhere; }
.deal-kanban-card-status { margin-bottom: 0.65rem; }
.deal-kanban-card-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.6rem;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
}
.deal-kanban-card-details dt { color: var(--text-muted); }
.deal-kanban-card-details dd { margin: 0; overflow-wrap: anywhere; }
.deal-kanban-card-move {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
}
@media (max-width: 700px) {
  .deal-kanban { grid-template-columns: 1fr; overflow-x: visible; }
  .deal-kanban-column { min-width: 0; }
}
@media (max-width: 380px) {
  .deal-kanban-card-move { grid-template-columns: 1fr; }
}

/* Wave 1b: CRM communications three-pane chat shell */
.chat-shell {
  display: grid;
  gap: 1rem;
  min-width: 0;
  width: 100%;
}
.chat-shell--inbox-only { grid-template-columns: minmax(0, 1fr); }
.chat-inbox-pane,
.chat-detail-pane,
.chat-reply-pane {
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.chat-inbox-section { padding: 0.75rem; }
.chat-inbox-section + .chat-inbox-section { border-top: 1px solid var(--border); }
.chat-inbox-section-title {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chat-thread-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.chat-thread-card {
  width: 100%;
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-thread-card:hover { background: var(--bg-hover); }
.chat-thread-card--selected,
.chat-thread-card[aria-current='true'] {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.chat-thread-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}
.chat-thread-type { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.chat-thread-card-title { font-weight: 650; overflow-wrap: anywhere; }
.chat-thread-card-time { font-size: 0.75rem; white-space: nowrap; }
.chat-thread-card-preview {
  margin: 0;
  font-size: 0.85rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.chat-unread-badge {
  justify-self: start;
  min-width: 1.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-card);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.chat-thread-header {
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.chat-thread-header-type { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.chat-thread-header-title { margin: 0.25rem 0; font-size: 1.15rem; }
.chat-thread-header-meta,
.chat-thread-header-policy,
.chat-thread-header-description { margin: 0.2rem 0 0; font-size: 0.9rem; }
.chat-detail-pane { display: flex; flex-direction: column; min-height: 0; }
.chat-detail-pane .chat-messages { flex: 1; overflow: auto; padding: 1rem; }
.chat-reply-pane {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  max-height: calc(100vh - 8rem);
  overflow: auto;
}
.chat-reply-root { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem; }
.chat-reply-root-title { margin: 0 0 0.5rem; font-size: 0.9rem; }
.chat-replies { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.chat-reply-compose { display: grid; gap: 0.5rem; margin-top: auto; }
.chat-reply-btn { margin-top: 0.5rem; }
.mention-compose { display: grid; gap: 0.5rem; }
.mention-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.5rem; }
.mention-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-card));
  border: 1px solid var(--border);
  font-size: 0.85rem;
}
.mention-chip-remove {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}
.mention-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 12rem;
  overflow: auto;
}
.mention-option {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0.65rem 0.75rem;
  font: inherit;
  cursor: pointer;
  min-height: 44px;
}
.mention-option:hover,
.mention-option:focus-visible,
.mention-option--active { background: var(--bg-hover); }
.notification-list .notification-item { padding: 0.75rem 0; }
.notification--unread { border-left: 3px solid var(--accent); padding-left: 0.75rem; }
.notification-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.header-actions-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (min-width: 1024px) {
  .chat-shell { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(280px, 360px); }
  .chat-shell--inbox-only { grid-template-columns: minmax(280px, 420px); }
  .chat-back-btn { display: none; }
}
@media (max-width: 1023px) {
  .chat-shell { grid-template-columns: minmax(0, 1fr); }
  .chat-shell--detail .chat-inbox-pane { display: none; }
  .chat-reply-pane:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 130;
    width: 100%;
    max-width: none;
    border-radius: 0;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}
/* Wave 1c: operational task queue, responsibility board and notes drawer. */
.task-kpis { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.75rem; margin-bottom:1rem; }
.task-kpi { display:grid; gap:.15rem; padding:.85rem 1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.task-kpi span, .task-kpi small { color:var(--text-muted); font-size:.8rem; }.task-kpi strong { color:var(--accent); font-size:1.45rem; }
.task-view-toggle { display:flex; gap:.5rem; margin-bottom:.75rem; }.task-view-toggle [aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }.tab-btn { min-height:44px; }
.task-filter-bar { display:grid; grid-template-columns:repeat(3, minmax(0, 220px)); gap:.6rem; margin-bottom:1rem; }
.task-view-panel { display:grid; gap:.75rem; }.task-card { display:grid; gap:.7rem; padding:1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); }
.task-card-title { margin:0; font-size:1.05rem; overflow-wrap:anywhere; }.task-card-meta { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:.3rem .7rem; margin:0; font-size:.88rem; }
.task-card-meta dt { color:var(--text-muted); }.task-card-meta dd { margin:0; overflow-wrap:anywhere; }.task-overdue { color:var(--danger); font-weight:700; }
.task-card-actions { display:flex; flex-wrap:wrap; gap:.5rem; }.task-responsibility-board { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; overflow-x:auto; align-items:start; }
.task-responsibility-column { display:grid; gap:.75rem; min-width:250px; padding:.85rem; background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--radius); }.task-responsibility-column h2 { margin:0; font-size:1rem; }
.task-notes-overlay { position:fixed; z-index:160; inset:0; display:flex; justify-content:flex-end; background:rgba(0,0,0,.35); }
.task-notes-drawer { position:relative; display:grid; grid-template-rows:auto minmax(0, 1fr) auto; width:min(480px, 100vw); background:var(--bg-card); border-left:1px solid var(--border); box-shadow:-12px 0 32px rgba(0,0,0,.2); }
.task-notes-header { position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:.85rem 1rem; background:var(--bg-card); border-bottom:1px solid var(--border); }.task-notes-header h2 { margin:0; font-size:1rem; overflow-wrap:anywhere; }
.task-notes-list { overflow:auto; list-style:none; margin:0; padding:1rem; }.task-note { padding:.75rem 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }.task-note p { margin:0 0 .3rem; white-space:pre-wrap; }
.task-notes-compose { position:sticky; bottom:0; display:grid; gap:.5rem; padding:1rem; background:var(--bg-card); border-top:1px solid var(--border); padding-bottom:max(1rem, env(safe-area-inset-bottom)); }
@media (max-width:700px) { .task-kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); }.task-filter-bar { grid-template-columns:1fr; }.task-responsibility-board { grid-template-columns:1fr; overflow-x:visible; }.task-responsibility-column { min-width:0; } }

/* Organization directory: compact tree and touch-safe management controls. */
.org-card { margin-bottom: 1rem; padding: 1rem; }
.org-tree { overflow-x: auto; }
.org-tree-list { list-style: none; margin: 0; padding-left: 1rem; }
.org-tree-node { margin: 0.35rem 0; }
.org-tree-name { display: inline-block; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-hover); overflow-wrap: anywhere; }
@media (max-width: 700px) { .org-card { padding: .75rem; } .org-card .toolbar .btn { width: 100%; } }

/* Finish views: responsive cards and touch-safe control-plane actions. */
.agent-roster,
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.agent-card,
.call-room-card,
.gallery-item,
.inbox-notification,
.inbox-review,
.call-safety-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gallery-item img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 8px;
}

.call-room-card .btn,
.agent-card .btn,
#headerActions .btn {
  min-height: 44px;
}

@media (max-width: 700px) {
  .agent-roster,
  .gallery-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .call-room-card,
  .gallery-item,
  .inbox-notification,
  .inbox-review,
  .call-safety-card {
    padding: 0.75rem;
  }

  .agent-card .toolbar,
  #headerActions {
    width: 100%;
  }

  .agent-card .toolbar .btn,
  #headerActions .btn {
    flex: 1 1 100%;
  }
}