:root {
  --bg: #f4f5f8;
  --surface: #ffffff;
  --surface-soft: #f8f8fb;
  --ink: #202129;
  --muted: #777b89;
  --line: #e7e8ee;
  --accent: #6c5ce7;
  --accent-dark: #5747d6;
  --accent-soft: #eeebff;
  --green: #1e9d72;
  --red: #df5b66;
  --orange: #db7c2c;
  --shadow: 0 16px 40px rgba(36, 30, 71, .08);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 1120px;
  zoom: 1.07;
  color: var(--ink);
  background: var(--bg);
}

button, input, textarea { font: inherit; }
button { color: inherit; }

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

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 236px;
  padding: 26px 18px 18px;
  display: flex;
  flex-direction: column;
  background: #22212a;
  color: #f8f7fb;
  z-index: 30;
  transition: width .2s ease, padding .2s ease;
}

.sidebar-head { position: relative; display: flex; align-items: flex-start; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 28px;
  color: inherit;
  text-decoration: none;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.6px;
}
.sidebar-collapse {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #dedfe7;
  border-radius: 9px;
  color: #6f7180;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.sidebar-collapse svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-collapse:hover { color: #5e50d8; background: #f3f1ff; border-color: #cfc9f7; }

.brand-mark {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
  padding-bottom: 7px;
  border-radius: 9px;
  background: var(--accent);
}

.brand-mark span { width: 3px; border-radius: 3px; background: white; }
.brand-mark span:nth-child(1) { height: 7px; }
.brand-mark span:nth-child(2) { height: 14px; }
.brand-mark span:nth-child(3) { height: 10px; }

.main-nav { display: grid; gap: 5px; }
.nav-item {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: transparent;
  color: #aaa9b2;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
}
.nav-item:hover, .nav-item.active { color: white; background: #34323e; }
.nav-icon { width: 22px; font-size: 20px; text-align: center; }
.nav-count { margin-left: auto; min-width: 22px; padding: 2px 7px; border-radius: 99px; color: white; background: var(--accent); text-align: center; font-size: 11px; }

.sidebar-section { position: relative; flex: 1; min-height: 0; margin-top: 34px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #4a4853 transparent; }
.source-section-head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.source-section-head .section-label { margin-bottom: 0; }
.source-settings-button { width: 29px; height: 29px; margin-right: 7px; border: 1px solid #46444f; border-radius: 8px; color: #aaa8b4; background: #2b2933; cursor: pointer; }
.source-settings-button:hover { color: #fff; border-color: #6e61df; background: #393548; }
.section-label { margin: 0 12px 10px; color: #6f6c78; font-size: 10px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.source-manager { position: fixed; z-index: 50; left: 224px; top: 245px; width: 330px; max-height: calc(100vh - 280px); overflow: auto; padding: 16px; color: #24252e; background: #fff; border: 1px solid #e2e3eb; border-radius: 15px; box-shadow: 0 22px 60px rgba(20, 18, 36, .24); }
.source-manager-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.source-manager-head strong { font-size: 14px; }
.source-manager-head button { width: 28px; height: 28px; border: 0; border-radius: 8px; color: #777986; background: #f0f1f5; cursor: pointer; font-size: 20px; }
.source-visibility-list { display: grid; gap: 6px; }
.source-visibility-list label { display: grid; grid-template-columns: 18px 28px 1fr; gap: 9px; align-items: center; padding: 9px; border-radius: 10px; background: #f7f7fa; cursor: pointer; }
.source-visibility-list input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.source-visibility-list label > span:last-child { display: grid; gap: 2px; }
.source-visibility-list strong { font-size: 12px; }
.source-visibility-list small { color: #8b8e9a; font-size: 9px; }
.source-manager > p { margin: 12px 3px 0; color: #898b97; font-size: 10px; line-height: 1.45; }
.source-list { display: grid; gap: 3px; }
.source-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 10px 0;
  color: #85838f;
  cursor: pointer;
  font-size: 10px;
  line-height: 1.25;
}
.source-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.source-toggle:hover { color: #d4d1dc; }
.source-button, .add-source {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  background: transparent;
  color: #aaa9b2;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.source-button:hover, .source-button.active { color: white; background: #302f38; }
.source-button.future { cursor: default; opacity: .52; }
.source-button.future:hover { color: #aaa9b2; background: transparent; }
.source-button small { margin-left: auto; color: #777580; font-size: 11px; }
.source-button > span:not(.source-dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-button.active small { color: #bbb8c7; }
.source-dot {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 7px;
  color: white;
  font-size: 8px;
  font-weight: 800;
}
.source-dot.all { background: #5c5a66; font-size: 13px; }
.source-dot.wb { background: linear-gradient(135deg, #9347df, #d34ab7); }
.source-dot.telegram { background: #39a7e6; }
.source-dot.vk { background: #3274f1; }
.source-dot.max { background: linear-gradient(135deg, #3978ff, #834df4); }
.source-dot.instagram { background: linear-gradient(135deg, #7845d8, #e65472, #f2a03d); }
.source-dot.site { background: #1e9d72; font-size: 12px; }
.source-dot.email { background: #d38738; font-size: 12px; }
.source-dot.yandex { background: #e64b43; font-size: 11px; }
.add-source { margin-top: 9px; color: #7f7d88; }
.add-source:hover { color: white; }
.add-source span { font-size: 18px; }

.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid #393741; }
.profile { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #8f8d98; cursor: pointer; text-align: left; }
.avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: #ddd8ff; color: #5c4bd3; font-size: 10px; font-weight: 800; }
.profile-copy { display: grid; flex: 1; }
.profile-copy strong { color: #f2f0f5; font-size: 11px; }
.profile-copy small { margin-top: 2px; font-size: 9px; }

.workspace { width: calc(100% - 236px); margin-left: 236px; padding: 0 32px; }
.workspace { transition: width .2s ease, margin-left .2s ease; }
.sidebar-collapsed .sidebar { width: 72px; padding-left: 12px; padding-right: 12px; }
.sidebar-collapsed .workspace { width: calc(100% - 72px); margin-left: 72px; }
.sidebar-collapsed .sidebar-text, .sidebar-collapsed .nav-count, .sidebar-collapsed .source-button > span:not(.source-dot), .sidebar-collapsed .source-button small { display: none !important; }
.sidebar-collapsed .sidebar-head { justify-content: center; }
.sidebar-collapsed .brand { padding-left: 9px; padding-right: 9px; }
.sidebar-collapsed .nav-item, .sidebar-collapsed .source-button { justify-content: center; padding-left: 8px; padding-right: 8px; }
.sidebar-collapsed .nav-icon { width: 24px; }
.sidebar-collapsed .sidebar-section { margin-top: 24px; }
.sidebar-collapsed .source-section-head { justify-content: center; }
.sidebar-collapsed .source-settings-button { margin-right: 0; }
.sidebar-collapsed .sidebar-footer { padding-left: 4px; }
.sidebar-collapsed .profile { justify-content: center; }
.workspace-header {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 -32px;
  padding: 0 32px 8px;
  background: rgba(244, 245, 248, .96);
  border-bottom: 1px solid rgba(221, 223, 231, .92);
  box-shadow: 0 8px 22px rgba(36, 30, 71, .045);
  backdrop-filter: blur(12px);
}
.topbar {
  min-height: 56px;
  padding: 6px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar-title { display: flex; align-items: center; gap: 11px; }
.eyebrow { color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: 1.5px; }
h1 { margin: 1px 0 0; font-size: 21px; letter-spacing: -.7px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.demo-pill { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #dfe0e7; border-radius: 99px; color: #777984; background: rgba(255,255,255,.55); font-size: 9px; font-weight: 700; }
.demo-pill span { width: 7px; height: 7px; border-radius: 50%; background: #e1a43f; box-shadow: 0 0 0 3px #f7e8cf; }
.demo-pill.connected span { background: var(--green); box-shadow: 0 0 0 3px #dff2eb; }
.demo-pill.error span { background: var(--red); box-shadow: 0 0 0 3px #f9dde0; }
.icon-button { position: relative; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; }
.notification-dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 2px solid white; border-radius: 50%; background: var(--red); }
.primary-button, .secondary-button, .compact-button { border-radius: 9px; padding: 10px 15px; cursor: pointer; font-weight: 700; }
.primary-button { border: 0; color: white; background: var(--accent); box-shadow: 0 7px 16px rgba(108,92,231,.18); }
.primary-button:hover { background: var(--accent-dark); }
.primary-button:disabled { cursor: not-allowed; opacity: .55; }
.secondary-button { border: 1px solid var(--line); color: #555762; background: white; }
.secondary-button:hover { border-color: #cfd0d9; background: #fafafa; }

.topbar .primary-button { padding: 8px 14px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 7px; }
.metric-card { min-width: 0; display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; min-height: 58px; padding: 7px 12px; border: 1px solid #eeeef2; border-radius: 11px; background: var(--surface); box-shadow: 0 4px 13px rgba(36,30,71,.025); }
.metric-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-weight: 800; }
.lavender { color: #6c5ce7; background: #efedff; }
.peach { color: #dc7d29; background: #fff0df; }
.mint { color: #178a65; background: #e2f6ef; }
.rose { color: #d55261; background: #fdebed; }
.metric-card div { display: grid; }
.metric-card strong { font-size: 17px; line-height: 1; }
.metric-card div span { margin-top: 3px; color: #70727d; font-size: 9px; font-weight: 600; white-space: nowrap; }
.metric-card small { grid-column: 2; margin-top: -6px; color: #a1a2aa; font-size: 7px; white-space: nowrap; }
.metric-card small.positive { color: var(--green); }
.metric-card small.negative { color: var(--red); }

.inbox-panel { height: calc(100vh - 186px); min-height: 480px; overflow: hidden; margin-top: 10px; border: 1px solid #e9e9ee; border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); }
.wb-review-autoreply { margin-top: 12px; padding: 16px; border: 1px solid #ded8ff; border-radius: 15px; background: #fff; color: #292638; }
.wb-review-autoreply[hidden] { display: none; }
.autoreply-header, .autoreply-actions, .autoreply-journal-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.autoreply-header > div:first-child { min-width: 220px; flex: 1; }
.autoreply-header strong { font-size: 15px; }
.autoreply-run-state { display: inline-block; margin-left: 10px; font-size: 12px; font-weight: 600; }
.autoreply-header small { display: block; margin-top: 5px; color: #656075; font-size: 12px; }
.autoreply-actions { justify-content: flex-start; gap: 8px; }
.autoreply-actions button, .autoreply-more { min-height: 36px; padding: 8px 12px; font-size: 12px; }
.autoreply-actions .primary-button { width: auto; }
.autoreply-interval { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 12px; }
.autoreply-interval input { width: 94px; min-height: 36px; padding: 6px 10px; border: 1px solid #ddd6ff; border-radius: 9px; font: inherit; background: #fff; }
.autoreply-interval select { min-height: 36px; max-width: 100%; padding: 6px 10px; border: 1px solid #ddd6ff; border-radius: 9px; font: inherit; background: #fff; color: inherit; }
.autoreply-pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 12px 0 0; padding: 10px 12px; border: 1px solid #e9e4fa; border-radius: 9px; background: #faf9fe; font-size: 12px; overflow-wrap: anywhere; }
.autoreply-pipeline small { flex-basis: 100%; color: #656075; }
.autoreply-generation-jobs { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.autoreply-generation-jobs button { border: 1px solid #e3ddfb; border-radius: 6px; padding: 5px 8px; background: #fff; color: #5946ba; text-align: left; overflow-wrap: anywhere; font: inherit; cursor: pointer; }
.autoreply-interval input[aria-invalid="true"] { border-color: #c02e48; }
.autoreply-interval button { min-height: 36px; padding: 8px 12px; font-size: 12px; }
.autoreply-interval small { color: #656075; }
.autoreply-stop { color: #a93543; border-color: #e8bbc2; }
.autoreply-switch { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #ddd7ee; border-radius: 9px; background: #fff; color: #5d5570; font-weight: 650; cursor: pointer; }
.autoreply-switch.is-on { color: #5440ad; border-color: #c7bbee; background: #f6f3ff; }
.autoreply-switch:disabled { opacity: .5; cursor: not-allowed; }
.autoreply-switch-track { width: 36px; height: 21px; padding: 3px; border-radius: 14px; background: #b7b0c2; transition: background .15s; }
.autoreply-switch-track > span { display: block; width: 15px; height: 15px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px #0002; transition: transform .15s; }
.autoreply-switch.is-on .autoreply-switch-track { background: #6c55d9; }
.autoreply-switch.is-on .autoreply-switch-track > span { transform: translateX(15px); }
.autoreply-note { margin: 9px 0; color: #706a7d; font-size: 12px; line-height: 1.5; }
.autoreply-diagnostics { display: grid; gap: 10px; margin: 12px 0; min-width: 0; }
.autoreply-diagnostics-card { min-width: 0; padding: 12px; border: 1px solid #e6e0f7; border-radius: 12px; background: #faf9ff; }
.autoreply-diagnostics-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.autoreply-diagnostics-head strong { display: block; color: #28213f; font-size: 13px; line-height: 1.4; }
.autoreply-diagnostics-head small { display: block; margin-top: 3px; color: #746e81; font-size: 11px; line-height: 1.45; }
.autoreply-diagnostics-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.autoreply-diagnostics-metrics span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #ded6f5; border-radius: 8px; background: #fff; color: #635b75; font-size: 11px; }
.autoreply-diagnostics-metrics b { color: #4733a1; font-size: 13px; }
.autoreply-diagnostics-list { display: grid; gap: 5px; }
.autoreply-diagnostics-row { display: grid; grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(100px, auto)); gap: 8px 14px; align-items: center; padding: 8px 10px; border: 1px solid #ece8f7; border-radius: 8px; background: #fff; color: #6b6478; font-size: 11px; }
.autoreply-diagnostics-row span:first-child { color: #332c46; font-weight: 600; }
.autoreply-diagnostics-row b { color: #332c46; }
.autoreply-problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 7px; }
.autoreply-problem-group { min-width: 0; border: 1px solid #e7e2f2; border-radius: 9px; background: #fff; }
.autoreply-problem-group summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 11px; color: #332c46; font-size: 12px; font-weight: 650; cursor: pointer; list-style: none; }
.autoreply-problem-group summary::-webkit-details-marker { display: none; }
.autoreply-problem-group summary::before { content: '▸'; color: #6854c5; }
.autoreply-problem-group[open] summary::before { content: '▾'; }
.autoreply-problem-group summary > span:first-child { flex: 1; }
.autoreply-problem-count { color: #756d83; text-align: right; font-size: 11px; font-weight: 400; }
.autoreply-problem-count b { color: #4c38ad; }
.autoreply-problem-count small { display: block; }
.autoreply-problem-reasons { display: grid; gap: 6px; padding: 0 11px 10px; }
.autoreply-problem-reason { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #f0edf7; padding-top: 6px; color: #625a71; font-size: 11px; line-height: 1.35; }
.autoreply-problem-reason span { overflow-wrap: anywhere; }
.autoreply-problem-reason b { color: #332c46; white-space: nowrap; }
@media (max-width: 760px) { .autoreply-diagnostics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .autoreply-diagnostics-row span:first-child, .autoreply-diagnostics-row span:last-child { grid-column: 1 / -1; } }
.autoreply-error { color: #a02b3b; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.autoreply-journal-heading { padding: 10px 0; border-top: 1px solid #f0edf7; font-size: 12px; }
.autoreply-journal-heading small { color: #797184; font-weight: normal; }
.autoreply-journal-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.autoreply-journal-filters small { color: #797184; margin-left: auto; font-size: 11px; }
.autoreply-filter { min-height: 32px; padding: 6px 11px; border: 1px solid #e2ddef; border-radius: 8px; background: #fff; color: #625a75; font-size: 12px; cursor: pointer; }
.autoreply-filter.is-active { color: #5640b4; background: #eee9ff; border-color: #cfc2ff; font-weight: 650; }
.autoreply-filter:disabled { opacity: .5; cursor: not-allowed; }
.autoreply-filter:focus-visible, .autoreply-switch:focus-visible { outline: 2px solid #7460dd; outline-offset: 2px; }
.autoreply-journal-help { font-size: 11px; }
.autoreply-journal { max-height: 310px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.autoreply-job { margin: 0 2px 7px 0; border: 1px solid #ece9f4; border-radius: 9px; font-size: 12px; }
.autoreply-job summary { cursor: pointer; padding: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.autoreply-job summary strong { margin-right: 10px; }
.autoreply-stage { display: inline-block; border-radius: 5px; padding: 1px 6px; margin-right: 9px; background: #f0edf8; color: #635b78; font-weight: 650; }
.autoreply-stage.working, .autoreply-stage.ready { background: #eee9ff; color: #644dc5; }
.autoreply-stage.accepted { background: #eaf2ff; color: #285a9d; }
.autoreply-stage.published { background: #e3f6ec; color: #23744c; }
.autoreply-stage.error, .autoreply-stage.unknown { background: #fff0e5; color: #975118; }
.autoreply-job-body { padding: 0 12px 12px; }
.autoreply-job-body h4 { margin: 12px 0 5px; font-size: 12px; }
.autoreply-job-body p { margin: 5px 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.autoreply-job-body small { color: #756e81; }
.autoreply-draft { padding: 10px; border-radius: 7px; background: #f5f2ff; }
.autoreply-open-review { margin-left: 12px; padding: 5px 9px; border: 1px solid #ded8fb; border-radius: 7px; background: #f5f2ff; color: #5947cd; font: inherit; font-weight: 700; cursor: pointer; }
.autoreply-answer-link { display: block; width: 100%; border: 1px solid transparent; color: inherit; text-align: left; font: inherit; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; }
.autoreply-answer-link:hover { border-color: #a89beb; }
.autoreply-open-review:focus-visible, .autoreply-answer-link:focus-visible { outline: 2px solid #6853e4; outline-offset: 2px; }
.autoreply-review-detail { padding: 24px; overflow: auto; min-width: 0; height: 100%; box-sizing: border-box; }
.autoreply-review-detail header small { color: #817b91; overflow-wrap: anywhere; }
.autoreply-review-detail h2 { font-size: 18px; margin: 8px 0; }
.autoreply-review-detail h3 { font-size: 13px; margin: 24px 0 10px; }
.autoreply-review-detail p { line-height: 1.7; overflow-wrap: anywhere; }
.autoreply-review-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.autoreply-review-buyer, .autoreply-review-answer { padding: 18px; border-radius: 16px; background: #f3f2f7; white-space: pre-wrap; }
.autoreply-review-answer.has-text { color: #fff; background: #6c58e6; }
.autoreply-more { display: block; margin: 10px auto 0; }
.autoreply-collapse { display: block; margin: 6px 0 0 auto; padding: 4px 2px; border: 0; background: transparent; color: #6451b5; font: inherit; font-size: 12px; cursor: pointer; }
.autoreply-collapse:focus-visible, .autoreply-export:focus-visible { outline: 2px solid #7460dd; outline-offset: 2px; }
.autoreply-export { min-height: 34px; padding: 7px 12px; font-size: 12px; }
#autoreply-journal-body[hidden] { display: none; }
.toolbar { height: 47px; display: flex; align-items: center; gap: 12px; padding: 6px 10px; border: 1px solid #e5e6ed; border-radius: 11px; background: #fff; }
.search-box { width: 310px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: #8b8e98; background: #fafafd; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 10px; }
kbd { padding: 3px 5px; border: 1px solid #dedfe5; border-radius: 5px; background: white; color: #a0a1aa; font-size: 8px; box-shadow: 0 1px 0 #dedfe5; }
.filter-group { display: flex; align-items: center; padding: 3px; border-radius: 9px; background: #f3f3f7; }
.filter-chip { height: 28px; border: 0; border-radius: 7px; padding: 0 11px; background: transparent; color: #858792; cursor: pointer; font-size: 9px; font-weight: 700; }
.filter-chip.active { color: #353642; background: white; box-shadow: 0 2px 7px rgba(31,32,41,.07); }
.compact-button { margin-left: auto; border: 1px solid var(--line); padding: 9px 11px; color: #777984; background: white; font-size: 9px; }

.content-grid { --dialog-pane-width: 350px; display: grid; grid-template-columns: var(--dialog-pane-width) 8px minmax(0, 1fr); height: 100%; min-height: 0; }
.conversation-list-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fcfcfe; }
.list-heading { height: 47px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); }
.list-heading span:first-child { font-size: 11px; font-weight: 800; }
.list-heading span:last-child { color: #999ba5; font-size: 8px; }
.telegram-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #f8f8fc; }
.telegram-scope[hidden] { display: none; }
.telegram-scope button { min-width: 0; padding: 8px 6px; border: 0; border-radius: 8px; color: #858793; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.telegram-scope button.active { color: #fff; background: var(--accent); box-shadow: 0 4px 10px rgba(105,89,220,.2); }
.wb-scope { display: grid; gap: 6px; padding: 9px 10px; border-bottom: 1px solid var(--line); background: #f8f8fc; }
.wb-scope[hidden] { display: none; }
.wb-kind-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.returns-panel { margin: 0 auto; width: 100%; max-width: 720px; padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: 0 18px 45px rgba(47,39,92,.08); }
.returns-panel .dashboard-icon { margin: 0 auto 16px; }
.returns-panel h3 { margin: 0 0 10px; font-size: 22px; }
.returns-panel p { margin: 0 0 22px; color: var(--muted); line-height: 1.55; }
.returns-open { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.returns-access { text-align: center; }
.returns-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 16px 0; }
.returns-summary span { display: grid; gap: 4px; padding: 11px; border-radius: 10px; background: #f7f7fb; color: var(--muted); font-size: 9px; }
.returns-summary strong { color: #363744; font-size: 11px; overflow-wrap: anywhere; }
.return-comment { margin: 14px 0; padding: 14px 16px; border-radius: 12px; background: #f5f5f9; color: #3f414d; line-height: 1.55; white-space: pre-wrap; }
.return-comment.wb { background: #f0edff; }
.return-media { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.return-media img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.return-actions { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.return-actions select, .return-actions textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; }
.return-actions textarea { min-height: 80px; resize: vertical; }
.return-readonly { margin-top: 16px; padding: 12px 14px; border-radius: 10px; color: #76561e; background: #fff4dc; font-size: 10px; line-height: 1.45; }
.composer-reply-target { margin: 0 0 8px; padding: 9px 12px; border-left: 3px solid #6c5ce7; border-radius: 8px; background: #f3f0ff; display: grid; gap: 3px; }
.composer-reply-target strong { color: #5e4bd0; font-size: 11px; }
.composer-reply-target span { color: #666978; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-folder-control { gap: 10px; align-items: center; }
.mail-folder-control select { min-width: 180px; padding: 8px 10px; border: 1px solid #dedfea; border-radius: 9px; background: #fff; }
.wb-scope button { min-width: 0; padding: 8px 6px; overflow: hidden; border: 1px solid #e3e2ed; border-radius: 8px; color: #777987; background: #fff; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.wb-scope button small { margin-left: 3px; color: inherit; font-size: 8px; opacity: .72; }
.wb-kind-tabs button.active { color: #5e4bd0; border-color: #cfc8fa; background: #eeebff; }
.wb-rating-filter { display: grid; grid-template-columns: 1.35fr repeat(5,minmax(0,1fr)); gap: 4px; }
.wb-rating-filter[hidden] { display: none; }
.wb-rating-filter button { padding: 6px 3px; color: #8a8b95; font-size: 8px; }
.wb-rating-filter button:not(:first-child) { color: #a56a00; }
.wb-rating-filter button.active { color: #fff; border-color: #efad32; background: #f0a51f; box-shadow: 0 3px 8px rgba(240,165,31,.22); }
.wb-review-stats { margin-top: 2px; padding: 9px; border: 1px solid #e2def8; border-radius: 10px; background: #fff; }
.wb-review-stats[hidden] { display: none; }
.wb-review-stats-heading { display: grid; gap: 2px; margin-bottom: 6px; }
.wb-review-stats-heading strong { color: #38314f; font-size: 10px; }
.wb-review-stats-heading small, .wb-review-stats-note { color: #747286; font-size: 8px; line-height: 1.4; }
.wb-review-stats-scroll { max-width: 100%; overflow-x: auto; }
.wb-review-stats table { width: 100%; min-width: 340px; border-collapse: collapse; font-size: 8px; font-variant-numeric: tabular-nums; }
.wb-review-stats th, .wb-review-stats td { padding: 4px 3px; border-bottom: 1px solid #f0eef8; text-align: right; white-space: nowrap; }
.wb-review-stats th:first-child { text-align: left; }
.wb-review-stats thead th { color: #666177; font-weight: 700; }
.wb-review-stats tbody th { color: #a06900; }
.wb-review-stats-note { display: block; margin-top: 6px; }
.wb-review-ai-counts { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 8px; padding-top: 7px; border-top: 1px solid #eeeaf9; color: #514680; font-size: 9px; }
.wb-review-stats-error { display: block; margin-top: 5px; color: #b43737; font-size: 8px; }
.wb-return-filter { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.wb-return-filter[hidden] { display: none; }
.wb-return-filter button.active { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: 0 3px 8px rgba(108,92,231,.2); }
.conversation-list { min-height: 0; max-height: none; overflow: auto; flex: 1; }
.wb-load-more { width: calc(100% - 28px); margin: 12px 14px 16px; padding: 10px; border: 1px solid #dcd8f2; border-radius: 10px; color: #5e4bd0; background: #f5f3ff; cursor: pointer; font-size: 9px; font-weight: 900; }
.wb-load-more:hover { border-color: #bdb4f3; background: #eeebff; }
.wb-load-more:disabled { cursor: wait; opacity: .65; }
.conversation-item { position: relative; width: 100%; display: grid; grid-template-columns: 32px 1fr; gap: 10px; border: 0; border-bottom: 1px solid #ededf2; padding: 14px 14px 13px 17px; background: transparent; cursor: pointer; text-align: left; }
.conversation-item:hover { background: white; }
.conversation-item.active { background: white; box-shadow: inset 3px 0 var(--accent); }
.conversation-item.active::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 1px; background: white; }
.conversation-avatar { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #575966; background: #ececf2; font-size: 10px; font-weight: 800; }
.conversation-avatar .mini-source { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; display: grid; place-items: center; border: 2px solid white; border-radius: 5px; color: white; background: linear-gradient(135deg, #9347df, #d34ab7); font-size: 5px; }
.conversation-head { display: flex; align-items: center; gap: 7px; }
.conversation-head strong { min-width: 0; overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.conversation-time { color: #9b9da6; font-size: 8px; white-space: nowrap; }
.conversation-subject { margin-top: 4px; overflow: hidden; color: #5e606a; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.conversation-preview { margin-top: 4px; overflow: hidden; color: #a0a1a9; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.status-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 99px; padding: 3px 7px; font-size: 7px; font-weight: 800; }
.status-badge.new { color: #d45d42; background: #ffede9; }
.status-badge.draft { color: #6851cf; background: #eeeaff; }
.status-badge.overdue { color: #c84a5a; background: #fde8eb; }
.status-badge.answered { color: #168460; background: #e5f6f0; }
.status-badge.local { color: #3d6f9e; background: #e7f1fa; }
.status-badge.direct { color: #d45d42; background: #ffede9; }
.status-badge.attention { color: #93601d; background: #fff0d9; }
.status-badge.unimportant { color: #747680; background: #ececf0; }
.status-badge.neutral { color: #686b76; background: #eff0f4; }
.priority-dot { width: 5px; height: 5px; border-radius: 50%; background: #df5967; }
.empty-state { height: 300px; display: grid; place-content: center; justify-items: center; gap: 8px; color: #aaa; }
.empty-state div { font-size: 28px; }
.empty-state strong { color: #666; font-size: 12px; }
.empty-state span { font-size: 9px; }

.detail-panel { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; background: white; }
.detail-header { height: 71px; flex: 0 0 71px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--line); }
.client-block { display: flex; align-items: center; gap: 10px; }
.client-block .conversation-avatar { width: 37px; height: 37px; border-radius: 11px; }
.client-block h2 { margin: 0; font-size: 12px; }
.client-block p { margin: 4px 0 0; color: #999ba5; font-size: 8px; }
.detail-actions { display: flex; gap: 7px; }
.detail-actions button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.detail-actions button:hover { background: #f7f7fa; }
.detail-body { --ai-pane-width: 420px; min-height: 0; display: grid; grid-template-columns: minmax(300px, 1fr) 8px var(--ai-pane-width); flex: 1; overflow: hidden; }
.message-column { min-width: 0; min-height: 0; overflow: auto; padding: 18px 20px; }
.detail-body.channel-chat-layout { grid-template-columns: minmax(0,1fr); }
.channel-chat-column { padding-bottom: 0; }
.chat-composer { position: sticky; bottom: 0; z-index: 5; display: grid; gap: 7px; margin: 24px -20px 0; padding: 12px 18px 10px; border-top: 1px solid #e7e5ee; background: rgba(255,255,255,.97); box-shadow: 0 -8px 22px rgba(39,34,66,.06); backdrop-filter: blur(12px); }
.chat-composer textarea { width: 100%; min-height: 58px; max-height: 160px; resize: vertical; padding: 11px 13px; border: 1px solid #ddd8f5; border-radius: 13px; outline: 0; color: #454752; background: #fff; font: inherit; font-size: 11px; line-height: 1.5; }
.chat-composer textarea:focus { border-color: #9b8df0; box-shadow: 0 0 0 3px rgba(108,92,231,.09); }
.chat-composer-actions { display: flex; align-items: center; gap: 8px; }
.composer-attachment { display: inline-grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: #686979; background: #fff; cursor: pointer; }
.composer-attachment:hover { color: var(--purple); border-color: #cfc8fa; background: #f6f4ff; }
.emoji-menu { position: relative; }
.emoji-options { position: absolute; z-index: 20; bottom: 42px; left: 0; display: grid; grid-template-columns: repeat(4, 36px); gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(41,37,69,.16); }
.emoji-options button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 18px; cursor: pointer; }
.emoji-options button:hover { background: #f1effc; }
.chat-composer-note { flex: 1; color: #9a9ca6; font-size: 8px; }
.composer-copy, .composer-ai, .composer-save, .chat-mini-menu summary { height: 34px; border: 1px solid #dedbea; border-radius: 9px; background: #fff; cursor: pointer; }
.composer-copy { width: 38px; color: #696b75; }
.composer-ai { padding: 0 14px; border-color: var(--accent); color: #fff; background: var(--accent); font-size: 9px; font-weight: 900; }
.composer-save { padding: 0 12px; color: #5f54c8; border-color: #d9d3ff; background: #f4f2ff; font-size: 9px; font-weight: 900; }
.composer-copy:disabled, .composer-ai:disabled, .composer-save:disabled { cursor: default; opacity: .45; }
.chat-composer-count { position: absolute; right: 20px; top: 68px; color: #acaeb7; font-size: 7px; pointer-events: none; }
.chat-mini-menu { position: relative; }
.chat-mini-menu summary { width: 38px; display: grid; place-items: center; color: #696b75; list-style: none; }
.chat-mini-menu summary::-webkit-details-marker { display: none; }
.chat-mini-menu > div { position: absolute; left: 0; bottom: 42px; width: 280px; padding: 9px; border: 1px solid #e3e0ee; border-radius: 11px; background: #fff; box-shadow: 0 12px 34px rgba(35,30,64,.16); }
.chat-mini-menu .triage-control { margin: 0; border: 0; padding: 0; }
.wb-chat-column { display: flex; flex-direction: column; }
.wb-chat-composer { margin-top: auto; }
.wb-chat-composer .review-response-group { display: flex; align-items: center; gap: 9px; margin: 0; padding: 8px 10px; }
.wb-chat-composer .review-response-group strong { flex: 0 1 auto; }
.wb-chat-composer .review-response-group small { margin-left: auto; text-align: right; }
.wb-chat-composer .chat-composer-count { top: auto; bottom: 53px; }
.wb-composer-menu { max-height: min(430px, 70vh); overflow: auto; }
.wb-composer-menu > strong { display: block; color: #4f515c; font-size: 10px; }
.wb-composer-menu > p { margin: 6px 0 0; color: #8a8c97; font-size: 8px; line-height: 1.5; }
.wb-composer-menu .activity { margin-top: 10px; padding-top: 10px; }
.wb-template-picker { z-index: 8; }
.wb-template-picker summary { width: auto; min-width: 84px; padding: 0 10px; display: flex; gap: 6px; font-size: 9px; font-weight: 900; color: #5e52c8; border-color: #d9d3ff; background: #f6f4ff; }
.wb-template-picker[open] summary { color: #fff; border-color: var(--accent); background: var(--accent); }
.chat-mini-menu > .wb-template-menu { width: min(390px, calc(100vw - 44px)); max-height: min(470px, 70vh); padding: 13px; overflow: hidden; }
.wb-template-menu > strong { display: block; color: #353642; font-size: 11px; }
.wb-template-menu > p { margin: 4px 0 10px; color: #8a8c97; font-size: 8px; line-height: 1.5; }
.wb-template-menu input { width: 100%; height: 36px; padding: 0 11px; border: 1px solid #dedbea; border-radius: 9px; outline: none; color: #3f414c; background: #fafafe; font: inherit; font-size: 10px; }
.wb-template-menu input:focus { border-color: #9587ec; box-shadow: 0 0 0 3px rgba(108,92,231,.09); }
.wb-template-options { display: grid; gap: 6px; max-height: 330px; margin-top: 10px; overflow: auto; }
.wb-template-option { display: grid; gap: 4px; width: 100%; padding: 10px 11px; text-align: left; border: 1px solid #ebe9f2; border-radius: 10px; color: #444652; background: #fff; cursor: pointer; }
.wb-template-option:hover { border-color: #cfc8fb; background: #f8f7ff; }
.wb-template-option strong { color: #5b50be; font-size: 9px; }
.wb-template-option span { color: #777a87; font-size: 9px; line-height: 1.4; }
.wb-template-empty { padding: 22px 10px; text-align: center; color: #9698a3; font-size: 9px; }
.wb-menu-save { width: 100%; margin-top: 2px; }
.wb-question-publish-state { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px; margin: 4px 0 16px; padding: 12px 13px; border: 1px solid #dcd7f8; border-radius: 12px; color: #5e54b7; background: #f6f4ff; }
.wb-question-publish-state.delivery_unknown, .wb-question-publish-state.conflict { color: #8a5b18; border-color: #efd7ae; background: #fff8ea; }
.wb-question-publish-state.rejected { color: #a93c4c; border-color: #f1c8cf; background: #fff1f3; }
.wb-question-publish-state.published { color: #197859; border-color: #bde4d5; background: #eefaf5; }
.wb-question-publish-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: currentColor; font-size: 12px; font-weight: 900; }
.wb-question-publish-copy { min-width: 0; display: grid; gap: 3px; }
.wb-question-publish-copy strong { font-size: 10px; }
.wb-question-publish-copy small { color: #777985; font-size: 8px; line-height: 1.45; }
.wb-question-publish-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.wb-question-publish-actions .secondary-button { padding: 7px 10px; font-size: 8px; }
.wb-question-publish-actions .external-link { padding: 7px 2px; white-space: nowrap; }
.context-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; padding: 10px; border: 1px solid #ececf0; border-radius: 10px; background: #fafafd; }
.product-thumb { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 8px; color: #7066a0; background: linear-gradient(135deg,#e8e2ff,#f6eaf0); font-size: 18px; }
.context-copy { min-width: 0; display: grid; gap: 2px; flex: 1; }
.context-copy small { color: #9b9ca5; font-size: 7px; text-transform: uppercase; }
.context-copy strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.context-copy span { color: #8d8f99; font-size: 8px; }
.external-link { color: var(--accent); font-size: 8px; text-decoration: none; font-weight: 700; }
.message-day { margin: 12px 0; color: #aaaab2; font-size: 7px; text-align: center; }
.message { max-width: 88%; margin-bottom: 12px; }
.message.incoming { margin-right: auto; }
.message.outgoing { margin-left: auto; }
.bubble { padding: 10px 12px; border-radius: 12px 12px 12px 3px; color: #4d4f59; background: #f3f3f7; font-size: 9px; line-height: 1.55; }
.message.outgoing .bubble { border-radius: 12px 12px 3px 12px; color: white; background: var(--accent); }
.wb-rating { margin: 2px 0 7px; color: #f0a51f; font-size: 17px; letter-spacing: 2px; }
.message-info { display: flex; gap: 5px; margin-top: 4px; color: #a0a2aa; font-size: 7px; }
.message.outgoing .message-info { justify-content: flex-end; }
.question-label { margin-bottom: 5px; color: #9698a1; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.conversation-context { position: sticky; top: -18px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px -4px 14px; padding: 9px 12px; border: 1px solid #e7e5f3; border-radius: 10px; color: #5d6070; background: rgba(255,255,255,.96); box-shadow: 0 4px 12px rgba(41,36,72,.04); font-size: 10px; font-weight: 800; }
.conversation-context a { flex: 0 0 auto; color: var(--accent); text-decoration: none; }
.message-card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #5b5d68; font-size: 10px; }
.message.outgoing .message-card-head { justify-content: flex-end; }
.message-card-head > span:not(.message-role) { color: #9698a4; font-weight: 500; }
.message-role { padding: 3px 7px; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.message-role.client { color: #2d6b59; background: #e2f5ee; }
.message-role.request { color: #b34c38; background: #ffebe6; }
.message-role.manager { color: #5d4bd0; background: #eeeafe; }
.message-role.neutral { color: #686b76; background: #eff0f4; }
.message-attachments { display: grid; gap: 7px; margin-top: 7px; color: #8d8f9a; font-size: 9px; }
.wb-attachment { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; padding: 8px; border: 1px solid #e6e4f2; border-radius: 10px; background: #faf9fe; }
.wb-attachment-preview { display: block; overflow: hidden; width: 72px; height: 72px; border-radius: 8px; background: #eeecf7; }
.wb-attachment-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wb-attachment-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: #6858da; background: #eeeafe; font-size: 16px; }
.wb-attachment-copy { display: grid; gap: 3px; min-width: 0; }
.wb-attachment-link, .wb-attachment-label { overflow-wrap: anywhere; color: #5c52c8; font-weight: 800; text-decoration: none; }
.wb-attachment-link:hover { text-decoration: underline; }
.wb-attachment-copy small { color: #8d8f9a; line-height: 1.4; }
.telegram-post-preview { display: grid; gap: 8px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid #ddd8f5; border-radius: 13px; background: linear-gradient(135deg,#faf9ff,#fff); box-shadow: 0 6px 20px rgba(54,43,112,.05); }
.telegram-post-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.telegram-post-preview-head strong { color: #3f414c; font-size: 12px; }
.telegram-post-preview-head a { flex: 0 0 auto; padding: 6px 9px; border-radius: 8px; color: #fff; background: var(--accent); font-size: 9px; font-weight: 800; text-decoration: none; }
.telegram-post-preview-head > span { color: #a0a1aa; font-size: 8px; }
.telegram-post-preview p { margin: 0; color: #4e505b; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.telegram-post-preview p.post-preview-missing { color: #93959f; font-size: 9px; }
.telegram-post-preview small { color: #9698a3; font-size: 8px; }
.request-stack { display: grid; gap: 15px; }
.request-card { overflow: hidden; border: 1px solid #e4e2ee; border-radius: 14px; background: #fff; box-shadow: 0 7px 24px rgba(45,39,78,.05); }
.request-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #eceaf3; background: #faf9fd; }
.request-card-header > div { display: grid; gap: 3px; min-width: 0; }
.request-card-header small { color: #9798a3; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.request-card-header strong { overflow: hidden; color: #464853; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.request-state { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; font-size: 8px; font-weight: 900; }
.request-state.waiting { color: #d45a46; background: #ffebe6; }
.request-state.answered { color: #248263; background: #e2f5ee; }
.request-card-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.request-question-group, .request-answer-group { display: grid; align-content: start; gap: 8px; padding: 14px; }
.request-question-group { border-right: 1px solid #eceaf3; background: #fbfbfd; }
.request-answer-group { background: #fff; }
.request-side { min-width: 0; }
.request-side + .request-side { padding-top: 9px; border-top: 1px dashed #e6e4ee; }
.request-side-title { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: #8b8d98; font-size: 8px; }
.request-side-title span { font-weight: 900; text-transform: uppercase; }
.request-side-title strong { overflow: hidden; color: #555762; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.request-side-title time { margin-left: auto; white-space: nowrap; }
.request-side-text { padding: 11px 12px; border-radius: 10px; color: #4f515c; background: #f0f0f5; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.request-side.manager .request-side-text { color: #4f43a9; background: #f0edff; }
.request-no-answer, .request-empty { display: grid; place-content: center; gap: 5px; min-height: 92px; padding: 18px; color: #a0a1aa; text-align: center; font-size: 10px; }
.request-empty { min-height: 220px; }
.request-empty strong { color: #555762; font-size: 13px; }

.answer-column { min-width: 0; min-height: 0; overflow: auto; padding: 16px; background: #fcfcfe; }
.pane-resizer { position: relative; z-index: 4; min-width: 8px; height: 100%; cursor: col-resize; touch-action: none; background: #f5f5f8; outline: 0; }
.pane-resizer::after { content: ""; position: absolute; top: 50%; left: 3px; width: 2px; height: 44px; transform: translateY(-50%); border-radius: 99px; background: #d6d6df; transition: height .16s ease, background .16s ease, box-shadow .16s ease; }
.pane-resizer:hover::after, .pane-resizer:focus-visible::after, .pane-resizer.active::after { height: 66px; background: #7869e8; box-shadow: 0 0 0 3px rgba(108, 92, 231, .1); }
body.pane-resizing { cursor: col-resize; user-select: none; }
body.pane-resizing iframe { pointer-events: none; }
.triage-control { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.triage-control > span { color: #777984; font-size: 8px; font-weight: 800; }
.triage-control > div { display: flex; gap: 4px; }
.triage-option { padding: 5px 7px; border: 1px solid #e4e4ea; border-radius: 7px; color: #777984; background: #f7f7fa; cursor: pointer; font-size: 7px; font-weight: 800; }
.triage-option[data-triage-status="direct"].active { color: #c95037; border-color: #f4cabe; background: #ffede9; }
.triage-option[data-triage-status="attention"].active { color: #8f5d1d; border-color: #f0d29e; background: #fff0d9; }
.triage-option[data-triage-status="unimportant"].active { color: #646670; border-color: #d9d9de; background: #ececf0; }
.triage-option:disabled { cursor: not-allowed; opacity: .65; }
.answer-heading { display: flex; align-items: center; justify-content: space-between; }
.answer-heading div { display: flex; align-items: center; gap: 7px; }
.ai-spark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: var(--accent); background: var(--accent-soft); font-size: 11px; }
.answer-heading h3 { margin: 0; font-size: 10px; }
.answer-heading small { display: block; margin-top: 2px; color: #9c9da6; font-size: 7px; }
.ai-label { border-radius: 99px; padding: 4px 7px; color: #6654ce; background: #edeaff; font-size: 7px; font-weight: 800; }
.draft-box { margin-top: 13px; padding: 3px; border: 1px solid #ddd8fa; border-radius: 11px; background: white; box-shadow: 0 5px 15px rgba(108,92,231,.05); }
.draft-box textarea { width: 100%; min-height: 142px; resize: vertical; border: 0; outline: 0; padding: 10px; color: #4b4d57; background: transparent; font-size: 9px; line-height: 1.6; }
.draft-tools { display: flex; align-items: center; gap: 4px; padding: 7px; border-top: 1px solid #eeeef3; }
.draft-tools button { width: 27px; height: 27px; border: 0; border-radius: 7px; color: #858792; background: transparent; cursor: pointer; }
.draft-tools button:hover { background: #f2f1f8; }
.char-count { margin-left: auto; color: #aaaab2; font-size: 7px; }
.draft-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 10px; }
.draft-actions button { font-size: 9px; }
.send-button { display: flex; align-items: center; justify-content: center; gap: 7px; }
.safety-note { display: flex; gap: 8px; margin-top: 11px; padding: 9px; border-radius: 9px; color: #7e7f88; background: #f1f2f5; font-size: 7px; line-height: 1.5; }
.safety-note strong { color: #5c5e68; }
.activity { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); }
.activity h4 { margin: 0 0 10px; font-size: 9px; }
.activity-item { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding-bottom: 10px; }
.activity-item:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 21px; bottom: 1px; width: 1px; background: #e3e3e8; }
.activity-icon { z-index: 1; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #e6e6eb; border-radius: 50%; color: #7d7f89; background: white; font-size: 7px; }
.activity-copy { font-size: 7px; line-height: 1.45; }
.activity-copy strong { display: block; color: #5d5f69; }
.activity-copy span { color: #a0a1a9; }

.toast { position: fixed; right: 28px; bottom: 28px; z-index: 20; max-width: 330px; transform: translateY(20px); opacity: 0; padding: 12px 16px; border-radius: 10px; color: white; background: #272630; box-shadow: 0 15px 35px rgba(0,0,0,.22); pointer-events: none; transition: .25s ease; font-size: 10px; font-weight: 700; }
.toast.show { transform: translateY(0); opacity: 1; }

.modal { width: min(430px, calc(100% - 30px)); border: 0; border-radius: 16px; padding: 0; color: var(--ink); box-shadow: 0 25px 80px rgba(17,15,34,.24); }
.modal::backdrop { background: rgba(24,22,34,.46); backdrop-filter: blur(3px); }
.modal form { position: relative; padding: 26px; }
.modal-close { position: absolute; top: 13px; right: 14px; border: 0; background: transparent; color: #999; cursor: pointer; font-size: 23px; }
.modal-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.modal h2 { margin: 15px 0 7px; font-size: 17px; }
.modal p { margin: 0; color: #7e808a; font-size: 10px; line-height: 1.6; }
.modal-preview { max-height: 120px; overflow: auto; margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: #555762; background: #fafafd; font-size: 9px; line-height: 1.55; }
.review-response-group { display: grid; gap: 3px; margin: 0 0 10px; padding: 9px 11px; border: 1px solid #ddd8ff; border-radius: 10px; background: #f7f5ff; }
.review-response-group span { color: #8b84ad; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.review-response-group strong { color: #5146c8; font-size: 10px; }
.review-response-group small { color: #777383; font-size: 8px; }
.recommendation-status { display: inline-flex; width: fit-content; padding: 3px 7px; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 800; }
.recommendation-status.manual { color: #a34f12; background: #fff0df; }
.recommendation-status.verified { color: #08795e; background: #e4f7f0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal-actions button { font-size: 9px; }
.channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 17px; }
.channel-grid button { display: grid; grid-template-columns: 30px 1fr; gap: 2px 9px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: white; cursor: pointer; text-align: left; }
.channel-grid button:hover { border-color: #cfc9f7; background: #fbfaff; }
.channel-grid .source-dot { grid-row: 1 / 3; width: 30px; height: 30px; }
.channel-grid strong { font-size: 9px; }
.channel-grid small { color: #999ba3; font-size: 7px; }

@media (max-width: 1260px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .content-grid { grid-template-columns: var(--dialog-pane-width, 300px) 8px minmax(0, 1fr); }
  .filter-chip { padding: 0 8px; }
  .search-box { width: 260px; }
}

/* Readability pass: the inbox is a working screen, not a compact dashboard. */
.list-heading span:first-child { font-size: 13px; }
.list-heading span:last-child { font-size: 10px; }

.conversation-item {
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding-top: 17px;
  padding-bottom: 16px;
}
.conversation-avatar { width: 38px; height: 38px; font-size: 12px; }
.conversation-head strong { font-size: 13px; }
.conversation-time { font-size: 10px; }
.conversation-subject { margin-top: 6px; font-size: 11px; }
.conversation-preview { margin-top: 6px; font-size: 11px; }
.conversation-meta { margin-top: 10px; }
.status-badge { padding: 4px 8px; font-size: 9px; }

.client-block .conversation-avatar { width: 42px; height: 42px; }
.client-block h2 { font-size: 16px; }
.client-block p { margin-top: 5px; font-size: 10px; }

.context-strip { padding: 13px; }
.product-thumb { width: 42px; height: 42px; }
.context-copy small { font-size: 9px; }
.context-copy strong { font-size: 12px; }
.context-copy span { font-size: 10px; }
.external-link { font-size: 10px; }
.wb-question-publish-copy strong { font-size: 12px; }
.wb-question-publish-copy small { font-size: 10px; }
.wb-question-publish-actions .secondary-button { font-size: 10px; }

.message-day { font-size: 10px; }
.question-label { margin-bottom: 8px; font-size: 10px; }
.message { max-width: 94%; }
.bubble { padding: 15px 17px; font-size: 15px; line-height: 1.6; }
.message-info { margin-top: 7px; font-size: 10px; }

.answer-heading h3 { font-size: 14px; }
.answer-heading small { margin-top: 4px; font-size: 10px; }
.ai-label { padding: 5px 8px; font-size: 9px; }
.draft-box textarea { min-height: 190px; padding: 14px; font-size: 14px; line-height: 1.65; }
.char-count { font-size: 9px; }
.draft-actions button { font-size: 11px; }
.safety-note { padding: 12px; font-size: 10px; line-height: 1.55; }
.activity h4 { margin-bottom: 13px; font-size: 12px; }
.activity-copy { font-size: 10px; line-height: 1.55; }
.activity-icon { width: 25px; height: 25px; font-size: 9px; }
.activity-item { grid-template-columns: 26px 1fr; gap: 9px; }
/* Authentication and administration */
[hidden] { display: none !important; }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 32px; background: radial-gradient(circle at 20% 20%, #ece9ff 0, transparent 36%), radial-gradient(circle at 85% 80%, #e7f7f1 0, transparent 34%), #f4f5f9; }
.login-card { width: min(460px, 100%); background: #fff; border: 1px solid #e3e5ee; border-radius: 28px; padding: 38px; box-shadow: 0 28px 80px rgba(39, 35, 70, .14); }
.login-brand { display: flex; align-items: center; gap: 12px; font-size: 24px; margin-bottom: 42px; }
.login-copy > span, .dialog-eyebrow, .admin-header span, .credential-card > span { color: #6758e8; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.login-copy h1 { margin: 8px 0 12px; font-size: 30px; letter-spacing: -.04em; }
.login-copy p { margin: 0 0 28px; color: #747787; line-height: 1.55; }
.login-form, .profile-card, .admin-form { display: grid; gap: 18px; }
.login-form label, .profile-card label, .admin-form label, .credential-card label { display: grid; gap: 8px; color: #555968; font-size: 13px; font-weight: 700; }
.login-form input, .profile-card input, .admin-form input, .admin-form select { width: 100%; border: 1px solid #dfe2ec; border-radius: 12px; padding: 13px 14px; background: #fff; color: #171923; font: inherit; outline: 0; }
.login-form input:focus, .profile-card input:focus, .admin-form input:focus, .admin-form select:focus { border-color: #7768ed; box-shadow: 0 0 0 3px rgba(119, 104, 237, .12); }
.login-button { width: 100%; justify-content: center; min-height: 48px; margin-top: 4px; }
.login-security { display: block; margin-top: 22px; color: #9799a7; text-align: center; line-height: 1.45; }
.form-error { min-height: 18px; color: #cf3d50; font-size: 12px; line-height: 1.45; }

.admin-dialog, .profile-dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
.admin-dialog::backdrop, .profile-dialog::backdrop { background: rgba(21, 22, 32, .62); backdrop-filter: blur(5px); }
.admin-dialog { width: min(1180px, calc(100vw - 48px)); height: min(820px, calc(100vh - 48px)); }
.admin-shell { height: 100%; display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; background: #f7f8fb; border-radius: 24px; box-shadow: 0 30px 100px rgba(0, 0, 0, .28); }
.admin-header { display: flex; justify-content: space-between; align-items: center; padding: 26px 30px 20px; background: #fff; border-bottom: 1px solid #e7e8ee; }
.admin-header h2 { margin: 5px 0 0; font-size: 25px; }
.admin-close { border: 0; background: #f0f1f5; width: 38px; height: 38px; border-radius: 11px; font-size: 24px; cursor: pointer; }
.admin-tabs { display: flex; gap: 8px; padding: 14px 30px; background: #fff; border-bottom: 1px solid #e7e8ee; }
.admin-tabs button { border: 0; background: transparent; color: #797c8a; padding: 10px 15px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.admin-tabs button.active { background: #eeeaff; color: #5f50dc; }
.admin-content { overflow: auto; padding: 28px 30px 40px; }
.admin-loading, .admin-error, .admin-empty { padding: 60px 20px; color: #777b8c; text-align: center; }
.admin-error { color: #c43b4d; }
.admin-toolbar, .editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.admin-toolbar h3, .editor-heading h3 { margin: 0 0 4px; font-size: 21px; }
.admin-toolbar p, .editor-heading p { margin: 0; color: #858897; font-size: 13px; }
.admin-list { display: grid; gap: 10px; }
.admin-row { display: grid; grid-template-columns: 44px minmax(190px, 1fr) auto 150px auto; gap: 16px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid #e5e7ef; border-radius: 15px; }
.admin-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #ece9ff; color: #6253df; font-weight: 800; }
.admin-main { display: grid; gap: 4px; }
.admin-main span, .admin-last { color: #848795; font-size: 12px; }
.status-badge { padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.status-badge.active { color: #197859; background: #e3f7ef; }
.status-badge.blocked { color: #b53849; background: #ffe8ec; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.row-actions button, .back-button { border: 1px solid #dedfea; background: #fff; border-radius: 9px; padding: 8px 10px; color: #5f6270; font-size: 11px; font-weight: 700; cursor: pointer; }
.row-actions button.danger { color: #c03c4e; }
.admin-form { max-width: 660px; background: #fff; border: 1px solid #e5e7ef; border-radius: 18px; padding: 24px; }
.admin-form.wide { max-width: 920px; }
.admin-form label small { color: #999caa; font-weight: 500; }
.switch-line { display: flex !important; grid-template-columns: auto 1fr; align-items: center; }
.switch-line input { width: auto; }
.admin-note { padding: 14px; color: #5f50d8; background: #f0edff; border-radius: 11px; font-size: 13px; }
.bitrix-account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.bitrix-account-form { max-width: 760px; gap: 12px; padding: 20px; }
.bitrix-account-form label { gap: 6px; }
.bitrix-account-hint { margin: 0; color: #737889; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.bitrix-role-preview { font-size: 13px; color: #555968; }
.bitrix-role-preview summary { cursor: pointer; font-weight: 700; }
.bitrix-role-preview ul { margin: 10px 0 0; padding-left: 20px; line-height: 1.7; }
.bitrix-delivery { display: grid; gap: 14px; overflow-wrap: anywhere; }
.bitrix-delivery h4, .bitrix-delivery p { margin: 0; }
.bitrix-delivery p { line-height: 1.6; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.role-card { min-height: 180px; padding: 21px; text-align: left; border: 1px solid #e1e3ec; background: #fff; border-radius: 17px; cursor: pointer; }
.role-card:hover { border-color: #796bec; transform: translateY(-1px); }
.role-card > span { color: #7770d7; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.role-card strong { display: block; margin: 13px 0 7px; font-size: 18px; }
.role-card p { min-height: 38px; margin: 0 0 18px; color: #7b7e8c; line-height: 1.4; }
.role-card small { color: #979aa7; }
.permissions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 16px; border: 1px solid #e1e3eb; border-radius: 14px; }
.permissions-grid legend { padding: 0 7px; color: #676a79; font-weight: 800; }
.permissions-grid label { grid-template-columns: auto 1fr; align-items: start; padding: 12px; background: #f7f7fa; border-radius: 10px; }
.permissions-grid input { width: auto; margin-top: 2px; }
.permissions-grid span { display: grid; gap: 3px; }
.permissions-grid small { color: #9a9ca8; font-family: monospace; }
.editor-actions, .credential-actions { display: flex; gap: 10px; }
.danger-button, .logout-button { border: 1px solid #f0bdc5; background: #fff2f4; color: #b83245; border-radius: 11px; padding: 11px 15px; font-weight: 800; cursor: pointer; }
.credential-card { max-width: 570px; margin: 30px auto; padding: 30px; background: #fff; border: 1px solid #e3e5ed; border-radius: 20px; }
.credential-card h3 { margin: 7px 0 8px; font-size: 23px; }
.credential-card p { color: #777b89; line-height: 1.5; }
.credential-value { padding: 13px 14px; border: 1px dashed #b9b2ef; background: #f7f5ff; border-radius: 10px; color: #4035a4; font-family: monospace; font-size: 15px; user-select: all; }
.audit-list { display: grid; gap: 1px; background: #e5e6ed; border: 1px solid #e5e6ed; border-radius: 15px; overflow: hidden; }
.audit-row { display: grid; grid-template-columns: 12px minmax(230px, 1fr) minmax(170px, auto) 130px; gap: 14px; align-items: center; padding: 14px 17px; background: #fff; }
.audit-dot { width: 8px; height: 8px; border-radius: 50%; background: #7566ea; }
.audit-row div { display: grid; gap: 3px; }
.audit-row div span, .audit-row small { color: #8c8f9b; font-size: 11px; }
.audit-row code { color: #656876; font-size: 11px; }

.profile-dialog { width: min(500px, calc(100vw - 32px)); }
.profile-card { position: relative; max-height: calc(100vh - 48px); overflow: auto; padding: 30px; background: #fff; border-radius: 22px; box-shadow: 0 30px 90px rgba(0, 0, 0, .25); }
.profile-card .admin-close { position: absolute; top: 20px; right: 20px; }
.profile-card h2 { margin: 5px 0 10px; }
.profile-card h3 { margin: 0; }
.profile-divider { height: 1px; background: #e7e8ed; margin: 4px 0; }
.logout-button { margin-top: 4px; }

@media (max-width: 900px) {
  .wb-question-publish-state { grid-template-columns: auto minmax(0,1fr); }
  .wb-question-publish-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .admin-dialog { width: 100vw; height: 100vh; }
  .admin-shell { border-radius: 0; }
  .admin-row { grid-template-columns: 42px 1fr auto; }
  .admin-last { display: none; }
  .row-actions { grid-column: 2 / -1; justify-content: flex-start; }
  .permissions-grid { grid-template-columns: 1fr; }
  .audit-row { grid-template-columns: 12px 1fr; }
  .audit-row code, .audit-row > small { grid-column: 2; }
}

/* Analytics and team workspaces */
.dashboard-view { padding-bottom: 36px; }
.analytics-period { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.analytics-period button { padding: 7px 12px; border: 1px solid var(--line); border-radius: 9px; color: #6f7080; background: #fff; font-weight: 700; cursor: pointer; }
.analytics-period button.active { color: #5e4bd0; border-color: #cfc8fa; background: #eeebff; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.dashboard-metrics > article { display: flex; align-items: flex-start; gap: 15px; min-height: 128px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 8px 24px rgba(36, 30, 71, .04); }
.dashboard-metrics article > div { display: grid; gap: 4px; }
.dashboard-metrics small { color: #7c7f8d; font-size: 12px; }
.dashboard-metrics strong { color: #171821; font-size: 28px; line-height: 1.1; }
.dashboard-metrics p { margin: 3px 0 0; color: #9a9ca8; font-size: 11px; line-height: 1.35; }
.dashboard-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; font-weight: 900; }
.dashboard-icon.purple { color: #6554df; background: #eeeaff; }
.dashboard-icon.green { color: #14835f; background: #e1f6ed; }
.dashboard-icon.red { color: #c34656; background: #fde8eb; }
.dashboard-icon.orange { color: #c87824; background: #fff0df; }
.dashboard-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.dashboard-card { position: relative; min-height: 300px; padding: 23px; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.card-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 23px; }
.card-heading h3 { margin: 0 0 5px; font-size: 17px; }
.card-heading p { margin: 0; color: #8b8e9c; font-size: 12px; }
.card-heading > span { padding: 5px 8px; border-radius: 999px; color: #23825f; background: #e5f7f0; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.channel-bar { display: grid; grid-template-columns: 38px 1fr 34px; gap: 11px; align-items: center; margin-bottom: 18px; }
.channel-bar > div { display: grid; gap: 7px; }
.channel-bar strong { font-size: 12px; }
.channel-bar b { text-align: right; font-size: 14px; }
.bar-track { height: 8px; overflow: hidden; background: #eff0f4; border-radius: 999px; }
.bar-track i { display: block; height: 100%; background: linear-gradient(90deg, #7565eb, #a69bf5); border-radius: inherit; }
.status-breakdown { display: grid; gap: 13px; width: 54%; }
.status-breakdown > div { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid #f0f1f5; }
.status-breakdown span { display: flex; align-items: center; gap: 8px; color: #686b78; font-size: 12px; }
.status-breakdown i { width: 8px; height: 8px; border-radius: 50%; }
.sla-ring { --value: 100; position: absolute; right: 30px; bottom: 46px; display: grid; place-items: center; width: 130px; height: 130px; border-radius: 50%; background: conic-gradient(#6c5ce7 calc(var(--value) * 1%), #ececf2 0); }
.sla-ring::before { content: ''; position: absolute; width: 94px; height: 94px; background: #fff; border-radius: 50%; }
.sla-ring > div { position: relative; display: grid; text-align: center; }
.sla-ring strong { font-size: 23px; }
.sla-ring span { color: #9294a0; font-size: 10px; font-weight: 800; }
.chart-bars { display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; height: 205px; padding-top: 22px; border-bottom: 1px solid #e8e9ef; }
.chart-bars > div { display: grid; grid-template-rows: 18px 1fr 20px; align-items: end; justify-items: center; height: 100%; flex: 1; }
.chart-bars span { color: #777a88; font-size: 10px; }
.chart-bars i { width: min(34px, 70%); min-height: 6px; background: linear-gradient(180deg, #7969ed, #b7aff7); border-radius: 8px 8px 2px 2px; }
.chart-bars small { padding-top: 6px; color: #8e919e; text-transform: capitalize; }
.insight-card ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.insight-card li { display: grid; gap: 5px; padding: 14px 15px 14px 42px; background: #f7f7fa; border-radius: 12px; }
.insight-card li::before { content: '•'; position: absolute; margin-left: -25px; color: #7770e5; font-size: 24px; line-height: 15px; }
.insight-card li.warning { background: #fff2f3; }
.insight-card li.warning::before { color: #d34c5d; }
.insight-card li.good { background: #ecf8f3; }
.insight-card li.good::before { color: #23916b; }
.insight-card li strong { font-size: 12px; }
.insight-card li span { color: #838692; font-size: 11px; }
.team-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 24px 26px; color: #fff; background: linear-gradient(125deg, #252331, #3d3766); border-radius: 19px; }
.team-summary span { color: #bdb5ff; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.team-summary h2 { margin: 6px 0; font-size: 23px; }
.team-summary p { margin: 0; color: #c7c4d3; font-size: 12px; }
.team-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.team-data-coverage { margin: 12px 0; padding: 12px 14px; border: 1px solid #d9d3ff; border-radius: 11px; background: #f8f7ff; color: #4d4a67; font-size: 13px; }
.team-performance-table-wrap { overflow-x: auto; margin: 14px 0 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.team-performance-table { width: 100%; border-collapse: collapse; min-width: 820px; font-size: 12px; }
.team-performance-table th, .team-performance-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eff0f4; white-space: nowrap; }
.team-performance-table th { color: #55566a; background: #f8f8fc; }
.team-performance-table tr:last-child td { border-bottom: 0; }
.team-finance { margin: 20px 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.team-finance h3 { margin: 0 0 8px; font-size: 16px; }
.team-finance p { margin: 0; color: #65677c; font-size: 13px; }
.team-card { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 17px; }
.team-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.team-avatar { display: grid; place-items: center; width: 48px; height: 48px; color: #6251d8; background: #ece9ff; border-radius: 15px; font-weight: 900; }
.team-card h3 { margin: 17px 0 4px; font-size: 16px; }
.team-card > p { min-height: 17px; margin: 0; color: #898c99; font-size: 12px; }
.team-role { display: inline-block; margin: 13px 0; padding: 6px 9px; color: #5f54b9; background: #f0edff; border-radius: 8px; font-size: 10px; font-weight: 800; }
.team-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; padding: 13px 0; border-top: 1px solid #eff0f4; border-bottom: 1px solid #eff0f4; }
.team-stats span { color: #8b8e9a; font-size: 10px; }
.team-stats strong { color: #272833; font-size: 14px; }
.team-card > small { display: block; margin-top: 13px; color: #a0a2ad; font-size: 10px; }
.dashboard-loading { display: grid; place-items: center; min-height: 360px; color: #888b99; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.dashboard-loading.wb-history-state { display: flex; justify-content: center; gap: 10px; min-height: 0; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: #faf9ff; font-size: 9px; line-height: 1.4; }

.message-direction-fix {
  margin-left: auto;
  padding: 5px 9px;
  color: #6557c8;
  background: #f1efff;
  border: 1px solid #ded9ff;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.message-direction-fix:hover { color: #fff; background: #6959dc; border-color: #6959dc; }
.message-direction-fix:disabled { opacity: .55; cursor: wait; }

.workflow-control { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ececf3; }
.workflow-control label { display: grid; gap: 5px; color: #737684; font-size: 10px; font-weight: 800; }
.workflow-control select { width: 100%; min-width: 190px; padding: 9px 10px; color: #252631; background: #fff; border: 1px solid #dcdee8; border-radius: 9px; font: inherit; }
.workflow-control select:focus { outline: 2px solid #dcd7ff; border-color: #7565e8; }
.workflow-control select:disabled { opacity: .6; cursor: wait; }

@media (max-width: 1100px) {
  .dashboard-metrics { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .dashboard-metrics, .team-metrics { grid-template-columns: 1fr; }
  .team-summary { align-items: flex-start; flex-direction: column; }
  .status-breakdown { width: 100%; padding-bottom: 150px; }
}
.wb-operator-controls { display: grid; gap: 6px; padding: 10px; margin-top: 9px; min-width: 0; border: 1px solid #e3dff2; border-radius: 10px; background: #fff; }
.wb-operator-controls[hidden], .filter-group[hidden], .wb-kind-tabs button[hidden] { display: none; }
.wb-kind-tabs:has(button[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-operator-controls > label { font-size: 11px; font-weight: 700; color: var(--muted, #74758a); }
.wb-operator-controls > select { width: 100%; min-width: 0; padding: 7px; border: 1px solid #dedbef; border-radius: 7px; background: #faf9ff; color: #252435; font-size: 11px; }
.wb-chat-status-filter { display: flex; flex-wrap: wrap; gap: 5px; }
.wb-chat-status-filter button { flex: 1 1 auto; padding: 7px 9px; border: 1px solid #dedbef; border-radius: 8px; background: #fff; color: #626076; font-size: 11px; line-height: 1.4; cursor: pointer; }
.wb-chat-status-filter button.active { color: #5940d7; background: #eeebff; border-color: #bcb0ff; font-weight: 700; }
.wb-scope .wb-status-primary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-scope .wb-chat-status-filter button { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; }
.wb-scope .wb-status-primary button { display: grid; gap: 2px; padding: 6px 3px; font-size: 10px; }
.wb-status-primary .wb-status-count { font-size: 13px; font-weight: 750; }
.wb-scope .wb-status-secondary button { padding: 5px 7px; font-size: 10px; text-align: left; }
.wb-status-secondary .wb-status-count { margin-left: 5px; font-weight: 750; }
.wb-operator-controls > p, .wb-chat-count-help { margin: 0; font-size: 10px; line-height: 1.5; color: #777489; }
.wb-chat-count-help summary { cursor: pointer; }
.wb-chat-count-help p { margin: 6px 0 0; }
.metric-card[data-wb-chat-metric] { cursor: pointer; }
.metric-card[data-wb-chat-metric]:focus-visible { outline: 2px solid #7761e8; outline-offset: 2px; }
.wb-attention-tabs { display: flex; gap: 8px; padding: 0 24px 12px; }
.wb-attention-tabs[hidden], .wb-sent-archive[hidden], #inbox-view > .inbox-panel[hidden] { display: none; }
.wb-attention-tabs button { border: 1px solid #ddd8f5; border-radius: 9px; padding: 9px 14px; color: #625b80; background: #fff; cursor: pointer; }
.wb-attention-tabs button.active { color: #5940d7; border-color: #bdb0ff; background: #eeeaff; font-weight: 700; }
.wb-sent-archive { background: #fff; border: 1px solid #e5e1f2; border-radius: 16px; margin: 16px 24px; padding: 20px; min-width: 0; }
.wb-archive-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wb-archive-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.wb-archive-heading h2 { margin: 0 0 6px; font-size: 18px; }
.wb-archive-heading p { margin: 4px 0; font-size: 12px; color: #777489; line-height: 1.5; }
.wb-archive-controls { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 10px; margin: 18px 0 10px; }
.wb-archive-controls label { display: grid; gap: 5px; color: #625b77; font-size: 12px; font-weight: 600; min-width: 0; }
.wb-archive-controls input, .wb-archive-controls select { width: 100%; min-width: 0; border: 1px solid #dedbef; background: #fff; border-radius: 9px; padding: 9px 10px; color: #252435; }
.wb-archive-controls .wb-archive-search { grid-column: 1 / -1; }
.wb-archive-status-line, .wb-archive-unknown { font-size: 12px; color: #787286; line-height: 1.5; }
.wb-archive-reconcile-scope, .wb-archive-reconcile-status { font-size: 12px; color: #787286; line-height: 1.5; margin: 6px 0; }
.wb-archive-reconcile-status { padding: 9px 11px; border-radius: 8px; background: #f3f0ff; color: #554980; }
.wb-archive-reconcile-status.is-error { background: #fff3e9; color: #875228; }
.wb-archive-unknown:empty { display: none; }
.wb-archive-grid { display: grid; grid-template-columns: minmax(230px, 0.75fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.wb-archive-list-column { max-height: 70vh; overflow-y: auto; min-width: 0; }
.wb-archive-row { display: grid; gap: 7px; width: 100%; padding: 13px; margin: 0 0 7px; text-align: left; background: #fff; border: 1px solid #e3dff1; border-radius: 10px; cursor: pointer; overflow-wrap: anywhere; }
.wb-archive-row.active { background: #f2efff; border-color: #ad9df7; }
.wb-archive-row strong { color: #292535; font-size: 13px; }
.wb-archive-row span { color: #6254a0; font-size: 12px; }
.wb-archive-row small { color: #8a8394; font-size: 11px; line-height: 1.5; }
.wb-archive-card { min-width: 0; padding: 18px; border: 1px solid #e3dff1; border-radius: 12px; overflow-wrap: anywhere; }
.wb-archive-card header { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.wb-archive-status { padding: 5px 8px; background: #efebff; border-radius: 6px; color: #6452af; font-size: 12px; }
.wb-archive-readonly { font-size: 11px; color: #797382; }
.wb-archive-card h2 { font-size: 18px; margin: 15px 0 6px; }
.wb-archive-card h3 { font-size: 13px; margin: 18px 0 8px; }
.wb-archive-meta, .wb-archive-notice { font-size: 12px; color: #807888; line-height: 1.5; }
.wb-archive-notice { background: #fff6df; padding: 10px; border-radius: 8px; color: #78623d; }
.wb-archive-message { white-space: pre-wrap; font-size: 14px; line-height: 1.6; padding: 14px; background: #f5f4f8; border-radius: 10px; }
.wb-archive-answer { background: #f1edff; }
.wb-archive-dates { display: grid; gap: 9px; margin: 18px 0; font-size: 12px; }
.wb-archive-dates div { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1fr); gap: 10px; }
.wb-archive-dates dt { color: #847b8a; }
.wb-archive-dates dd { margin: 0; color: #474050; }
.wb-archive-empty { padding: 18px; color: #847b8a; font-size: 13px; line-height: 1.5; }
@media (max-width: 800px) { .wb-sent-archive { padding: 12px; margin: 12px; } .wb-archive-grid { grid-template-columns: 1fr; } .wb-archive-list-column { max-height: 36vh; } .wb-archive-controls { grid-template-columns: 1fr; } .wb-archive-heading { flex-wrap: wrap; } .wb-archive-actions { width: 100%; } }
.release-version {
  display: block;
  padding: 0 20px 8px;
  color: #a7a7b8;
  font-size: 11px;
  letter-spacing: .02em;
}
.release-notice {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(580px, calc(100vw - 40px));
  padding: 14px 16px;
  border: 1px solid #bcb0ff;
  border-radius: 14px;
  background: #fff;
  color: #252435;
  box-shadow: 0 16px 42px #221c4a2b;
  font-size: 13px;
  line-height: 1.4;
}
.release-notice[hidden] { display: none; }
.release-notice button {
  flex: none;
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  background: #6450d9;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 640px) {
  .release-notice { left: 12px; right: 12px; bottom: 12px; display: grid; max-width: none; }
}

/* Finance configuration is read-only for viewers; mutation forms are permission-gated in JS and API. */
.finance-settings { margin: 18px 0; padding: 18px; border: 1px solid #e2def0; border-radius: 14px; background: #fff; color: #292538; }
.finance-settings[hidden], .finance-settings [hidden] { display: none !important; }
.finance-settings > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.finance-settings h3, .finance-settings h4 { margin: 0 0 8px; }
.finance-settings h4 { font-size: 14px; }
.finance-settings p { margin: 6px 0 11px; color: #655e72; font-size: 12px; line-height: 1.5; }
.finance-settings button { border: 1px solid #c8bdfa; border-radius: 9px; padding: 9px 12px; background: #f6f3ff; color: #4e3ab8; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.finance-settings button:disabled { opacity: .55; cursor: not-allowed; }
.finance-controls, .finance-fields, .finance-tariff-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.finance-controls { margin: 14px 0; }
.finance-settings label { display: grid; gap: 5px; min-width: 0; color: #625b77; font-size: 12px; font-weight: 600; }
.finance-settings input, .finance-settings select { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #dedbef; border-radius: 8px; padding: 9px 10px; background: #fff; color: #252435; font: inherit; font-size: 12px; }
.finance-message { min-height: 18px; color: #36715a !important; }
.finance-message.is-error, .finance-settings .is-error { color: #9a4539 !important; }
.finance-forms { display: grid; gap: 12px; margin: 14px 0; }
.finance-forms form, .finance-shift-detail { padding: 14px; border: 1px solid #e7e2f5; border-radius: 12px; background: #fdfcff; }
.finance-forms form > button { margin-top: 10px; margin-right: 7px; }
.finance-tariff-row { padding: 10px; margin-top: 8px; border: 1px dashed #d6cdf5; border-radius: 9px; }
.finance-shift-row { display: flex; justify-content: space-between; gap: 10px; width: 100%; margin: 6px 0; text-align: left; }
.finance-shift-row span { color: #756d84; font-weight: 400; }
.finance-shift-detail { margin-top: 12px; overflow-wrap: anywhere; }
.finance-shift-detail table { width: 100%; border-collapse: collapse; font-size: 12px; }
.finance-shift-detail th, .finance-shift-detail td { padding: 8px; border-bottom: 1px solid #e7e2f5; text-align: left; }
.finance-shift-detail form { margin: 10px 0; padding: 10px; border: 1px solid #e2def0; border-radius: 8px; }
.finance-shift-detail form button { margin-top: 8px; }
.finance-export { display: flex; align-items: end; gap: 12px; margin-top: 16px; }
.finance-export label { min-width: 170px; }
@media (max-width: 760px) { .finance-settings > header, .finance-export, .finance-shift-row { display: grid; } .finance-settings { padding: 12px; } .finance-shift-detail { overflow-x: auto; } }