* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f5f7fa;
  color: #333;
  min-height: 100vh;
}

/* --- Navigation --- */
.navbar {
  background: #fff;
  border-bottom: 1px solid #e1e5eb;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-brand {
  font-size: 18px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  margin-right: 40px;
  white-space: nowrap;
}

.navbar-nav {
  display: flex;
  list-style: none;
  gap: 4px;
}

.navbar-nav a {
  text-decoration: none;
  color: #6b7280;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
  white-space: nowrap;
}

.navbar-nav a:hover {
  background: #f0f4ff;
  color: #2563eb;
}

.navbar-nav a.active {
  background: #eff6ff;
  color: #2563eb;
}

/* --- Main content --- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #111;
}

/* --- Stat cards --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 24px;
  border: 1px solid #e5e7eb;
}

.stat-card .label {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 4px;
}

.stat-card .value {
  font-size: 32px;
  font-weight: 700;
  color: #111;
}

.stat-card .sub {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}

.stat-card.accent {
  background: #2563eb;
  border-color: #2563eb;
}

.stat-card.accent .label,
.stat-card.accent .value,
.stat-card.accent .sub {
  color: #fff;
}

/* --- Tables --- */
.card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  margin-bottom: 24px;
}

.card-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 16px;
  font-weight: 600;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e5e7eb;
  background: #fafbfc;
}

td {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover {
  background: #fafbfc;
}

tr.clickable {
  cursor: pointer;
}

tr.clickable:hover {
  background: #f0f4ff;
}

/* --- Badges --- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.badge-active { background: #dcfce7; color: #166534; }
.badge-closed { background: #f3f4f6; color: #6b7280; }
.badge-operator { background: #fef3c7; color: #92400e; }

/* Lead statuses */
.badge-new { background: #dbeafe; color: #1e40af; }
.badge-processed { background: #ffedd5; color: #9a3412; }
.badge-confirmed { background: #dcfce7; color: #166534; }
.badge-arrived { background: #f3f4f6; color: #6b7280; }
.badge-no_show { background: #fee2e2; color: #991b1b; }

/* Sentiment badges */
.badge-positive { background: #dcfce7; color: #166534; }
.badge-negative { background: #fee2e2; color: #991b1b; }
.badge-neutral { background: #f3f4f6; color: #6b7280; }

/* --- Chat view --- */
.chat-container {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  max-width: 700px;
}

.chat-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header h2 {
  font-size: 16px;
  font-weight: 600;
}

.chat-messages {
  padding: 24px;
  max-height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}

.message-user {
  align-self: flex-end;
  background: #2563eb;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.message-assistant {
  align-self: flex-start;
  background: #f3f4f6;
  color: #333;
  border-bottom-left-radius: 4px;
}

.message-operator {
  align-self: flex-start;
  background: #fef3c7;
  color: #333;
  border-bottom-left-radius: 4px;
}

.message-time {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
}

.message-user .message-time {
  color: rgba(255,255,255,0.7);
}

/* --- Chat input --- */
.chat-input {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 8px;
}

.chat-input input,
.chat-input textarea {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  resize: none;
}

.chat-input input:focus,
.chat-input textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* --- Buttons --- */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.btn-primary {
  background: #2563eb;
  color: #fff;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
}

.btn-success {
  background: #16a34a;
  color: #fff;
}

.btn-success:hover {
  background: #15803d;
}

.btn-warning {
  background: #ea580c;
  color: #fff;
}

.btn-warning:hover {
  background: #c2410c;
}

.btn-danger {
  background: #dc2626;
  color: #fff;
}

.btn-danger:hover {
  background: #b91c1c;
}

.btn-gray {
  background: #6b7280;
  color: #fff;
}

.btn-gray:hover {
  background: #4b5563;
}

.btn-outline {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #333;
}

.btn-outline:hover {
  background: #f9fafb;
}

.btn-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* --- Back link --- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6b7280;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 16px;
}

.back-link:hover {
  color: #2563eb;
}

/* --- Empty state --- */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: #9ca3af;
  font-size: 14px;
}

/* --- Test chat --- */
.test-chat-container {
  max-width: 500px;
}

.test-chat-messages {
  min-height: 300px;
}

/* --- Settings form --- */
.settings-section {
  margin-bottom: 24px;
}

.settings-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* --- Operator icon --- */
.icon-operator {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
  vertical-align: middle;
  margin-left: 4px;
}

/* --- Top services list --- */
.top-services {
  list-style: none;
  padding: 0;
}

.top-services li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.top-services li:last-child {
  border-bottom: none;
}

.top-services .count {
  color: #6b7280;
  font-weight: 600;
}

/* --- Calendar --- */
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.calendar-header h2 {
  font-size: 18px;
  font-weight: 600;
}

.calendar-header button {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
}

.calendar-header button:hover {
  background: #f3f4f6;
}

.calendar .day-name {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  padding: 8px 0;
  text-transform: uppercase;
}

.calendar .day {
  position: relative;
  text-align: center;
  padding: 12px 4px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  min-height: 52px;
  transition: all 0.15s;
}

.calendar .day:hover {
  background: #f0f4ff;
}

.calendar .day.other-month {
  color: #d1d5db;
}

.calendar .day.today {
  background: #eff6ff;
  font-weight: 700;
  color: #2563eb;
  border: 2px solid #2563eb;
}

.calendar .day.selected {
  background: #2563eb;
  color: #fff;
}

.calendar .day .dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  position: absolute;
  top: 2px;
  right: 2px;
}

.calendar .day.today .dot {
  background: #1d4ed8;
}

.calendar .day.selected .dot {
  background: #fff;
  color: #2563eb;
}

.day-detail {
  margin-top: 24px;
}

/* --- Doctors table --- */
.doctor-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 24px;
  margin-bottom: 16px;
}

.doctor-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.doctor-card .specialty {
  color: #2563eb;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.doctor-card .meta {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 12px;
}

.doctor-card .services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.doctor-card .service-tag {
  background: #eff6ff;
  color: #2563eb;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

/* --- Layout helpers --- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .navbar {
    padding: 0 12px;
  }
  .container {
    padding: 16px;
  }
  .navbar-nav a {
    padding: 8px 8px;
    font-size: 13px;
  }
}

/* ============================================================
   Timeline v2 — labelled roles, take-over controls, filter
   ============================================================ */

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.chat-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.chat-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.chat-meta-item {
  font-size: 12px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 3px 10px;
  border-radius: 8px;
}

.chat-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #4b5563;
  user-select: none;
  cursor: pointer;
}

.filter-toggle input { cursor: pointer; }

.btn-takeover {
  background: #f59e0b;
  color: #fff;
  font-weight: 600;
  padding: 8px 16px;
}
.btn-takeover:hover { background: #d97706; }

.btn-return {
  background: #10b981;
  color: #fff;
  font-weight: 600;
  padding: 8px 16px;
}
.btn-return:hover { background: #059669; }

/* Role label inside each message bubble */
.message-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-bottom: 4px;
}

.message-body {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Operator (admin) message — clearly distinct from AI */
.message-operator {
  align-self: flex-start;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #1f2937;
  border-bottom-left-radius: 4px;
  position: relative;
}

.message-operator .message-role {
  color: #c2410c;
}

/* AI-agent message — soft blue/grey */
.message-assistant {
  align-self: flex-start;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #1f2937;
  border-bottom-left-radius: 4px;
}

.message-assistant .message-role {
  color: #2563eb;
}

/* Patient message — solid blue, right */
.message-user {
  align-self: flex-end;
  background: #2563eb;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.message-user .message-role { color: rgba(255,255,255,0.7); }

/* Updated status badges with new terminology */
.badge-active     { background: #dcfce7; color: #166534; }
.badge-operator   { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.badge-closed     { background: #f3f4f6; color: #6b7280; }

/* === Rules screen === */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.page-subtitle {
  color: #6b7280;
  font-size: 14px;
  margin-top: 6px;
  max-width: 700px;
  line-height: 1.5;
}

.rules-group {
  margin-bottom: 32px;
}

.rules-group-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 12px;
}

.rules-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rule-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  transition: opacity 0.2s ease;
}

.rule-card.rule-off {
  opacity: 0.55;
  background: #fafafa;
}

.rule-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin-top: 4px;
}
.rule-toggle input { opacity: 0; width: 0; height: 0; }
.rule-toggle-slider {
  position: absolute; inset: 0;
  background-color: #d1d5db;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.rule-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.rule-toggle input:checked + .rule-toggle-slider { background-color: #10b981; }
.rule-toggle input:checked + .rule-toggle-slider::before { transform: translateX(20px); }

.rule-body { display: flex; flex-direction: column; gap: 10px; }

.rule-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.rule-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.rule-edit {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #4b5563;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.rule-edit:hover { background: #f3f4f6; }

.rule-rows { display: flex; flex-direction: column; gap: 6px; }

.rule-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.rule-row-label {
  color: #6b7280;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 2px;
}

.rule-row-text { color: #1f2937; }

.rule-stats {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
}

.rule-stat {
  font-size: 12px;
  color: #6b7280;
}

.rule-stat strong { color: #111827; font-size: 13px; }

.rule-stat-good strong { color: #059669; }

@media (max-width: 640px) {
  .rule-card { grid-template-columns: 1fr; }
  .rule-row { grid-template-columns: 1fr; gap: 2px; }
}

/* === Toolbar / Search / Lead numbering === */
.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 280px;
  max-width: 520px;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.toolbar-count {
  color: #6b7280;
  font-size: 13px;
  white-space: nowrap;
}

.lead-number {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-cancelled {
  background: #fee2e2;
  color: #b91c1c;
}

/* === Inbox screen === */
.inbox-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.inbox-tab {
  border:1px solid #e5e7eb; background:#fff; color:#4b5563;
  padding:8px 14px; border-radius:10px; font-size:14px; cursor:pointer;
  display:flex; align-items:center; gap:8px; transition:all .15s;
}
.inbox-tab:hover { background:#f9fafb; }
.inbox-tab.active { background:#2563eb; color:#fff; border-color:#2563eb; }
.inbox-tab-count {
  font-size:12px; background:rgba(0,0,0,0.08); padding:1px 7px; border-radius:8px; font-weight:600;
}
.inbox-tab.active .inbox-tab-count { background:rgba(255,255,255,0.25); }
.inbox-tab-danger { border-color:#fca5a5; color:#b91c1c; }
.inbox-tab-danger .inbox-tab-count { background:#fee2e2; color:#b91c1c; }
.inbox-tab-danger.active { background:#b91c1c; color:#fff; border-color:#b91c1c; }

.channel-chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip {
  border:1px solid #e5e7eb; background:#fff; color:#6b7280;
  padding:5px 12px; border-radius:100px; font-size:13px; cursor:pointer; transition:all .15s;
}
.chip:hover { background:#f3f4f6; }
.chip.chip-on { background:#1f2937; color:#fff; border-color:#1f2937; }

.inbox-feed { display:flex; flex-direction:column; gap:8px; }

.inbox-item {
  background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;
}
.inbox-item > summary {
  display:grid;
  grid-template-columns:120px 110px 160px 1fr auto auto;
  gap:12px; align-items:center;
  padding:12px 16px; cursor:pointer; list-style:none; font-size:13px;
}
.inbox-item > summary::-webkit-details-marker { display:none; }
.inbox-item > summary:hover { background:#f9fafb; }
.inbox-item[open] > summary { border-bottom:1px solid #f3f4f6; background:#f9fafb; }

/* Пропущенный звонок — лёгкая красная подсветка слева */
.inbox-st-missed { border-left:3px solid #b91c1c; }

.inbox-time { color:#9ca3af; font-size:12px; white-space:nowrap; }
.inbox-contact { font-weight:600; color:#1f2937; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-preview { color:#4b5563; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-dur { color:#9ca3af; font-size:12px; }

.ch-badge {
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:6px;
  text-align:center; white-space:nowrap;
}
.ch-calls        { background:#fef3c7; color:#92400e; }
.ch-telegram     { background:#dbeafe; color:#1e40af; }
.ch-website      { background:#f3e8ff; color:#6b21a8; }
.ch-phone_widget { background:#fae8ff; color:#86198f; }
.ch-prodoctorov  { background:#d1fae5; color:#065f46; }
.ch-sberzdorovie { background:#ccfbf1; color:#115e59; }
.ch-yandex_uslugi{ background:#fef9c3; color:#854d0e; }
.ch-manual       { background:#f3f4f6; color:#4b5563; }

.status-pill {
  font-size:11px; font-weight:600; padding:3px 10px; border-radius:100px; white-space:nowrap;
}
.st-new         { background:#e0e7ff; color:#3730a3; }
.st-in_progress { background:#fef3c7; color:#92400e; }
.st-answered    { background:#dcfce7; color:#166534; }
.st-missed      { background:#fee2e2; color:#b91c1c; }
.st-escalated   { background:#fce7f3; color:#9d174d; }
.st-archived    { background:#f3f4f6; color:#6b7280; }

.inbox-detail { padding:16px; display:flex; flex-direction:column; gap:14px; }
.inbox-meta {
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px 24px;
  font-size:13px; color:#4b5563;
}
.inbox-meta b { color:#1f2937; font-weight:600; }
.inbox-actions { display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width: 900px) {
  .inbox-item > summary {
    grid-template-columns:auto auto 1fr; grid-auto-rows:auto; gap:6px 10px;
  }
  .inbox-preview { grid-column:1 / -1; white-space:normal; }
  .inbox-meta { grid-template-columns:1fr; }
}

/* === Inbox dashboard widget === */
.inbox-widget {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:#fff; border:1px solid #e5e7eb; border-left:4px solid #2563eb;
  border-radius:12px; padding:16px 22px; margin-bottom:24px;
  text-decoration:none; color:inherit; transition:box-shadow .15s;
}
.inbox-widget:hover { box-shadow:0 8px 24px rgba(31,41,55,0.08); }
.inbox-widget-main { display:flex; align-items:baseline; gap:10px; }
.inbox-widget-label { font-size:15px; color:#6b7280; }
.inbox-widget-count {
  font-size:28px; font-weight:800; color:#1f2937; letter-spacing:-0.02em;
}
.inbox-widget-cta {
  margin-left:auto; color:#2563eb; font-weight:600; font-size:14px; white-space:nowrap;
}
.inbox-widget-missed {
  display:flex; align-items:center; gap:10px;
  background:#fef2f2; border:1px solid #fecaca; color:#b91c1c;
  padding:8px 14px; border-radius:10px; font-size:14px; font-weight:600;
}
.pulse-dot {
  width:12px; height:12px; border-radius:50%;
  background:#b91c1c; flex-shrink:0;
  animation:pulse-red 1.6s ease-in-out infinite;
}
@keyframes pulse-red {
  0%, 100% { transform:scale(1); box-shadow:0 0 0 0 rgba(185,28,28,0.4); }
  50%      { transform:scale(1.15); box-shadow:0 0 0 8px rgba(185,28,28,0); }
}
@media (max-width: 768px) {
  .inbox-widget { gap:12px; padding:14px 16px; }
  .inbox-widget-cta { margin-left:0; width:100%; }
}

/* === Inbox sources screen === */
.src-bigblock {
  background:#fff; border:1px solid #e5e7eb; border-left:4px solid #f59e0b;
  border-radius:14px; padding:24px; margin-bottom:28px;
}
.src-bigblock-head { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.src-bigblock-head h2 { font-size:20px; font-weight:700; color:#1f2937; margin:0; }
.src-stat-inline { font-size:13px; color:#6b7280; }
.src-bigblock-sub { color:#6b7280; font-size:14px; margin:8px 0 18px; line-height:1.5; }
.src-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.src-point {
  background:#f9fafb; border:1px solid #f3f4f6; border-radius:10px; padding:16px;
}
.src-point h4 { font-size:14px; font-weight:700; color:#1f2937; margin:0 0 6px; }
.src-point p { font-size:13px; color:#4b5563; line-height:1.5; margin:0; }
.src-point code {
  background:#eef2ff; color:#3730a3; padding:1px 5px; border-radius:4px; font-size:12px;
}

.src-group-title {
  font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  color:#6b7280; margin:24px 0 12px;
}
.src-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:8px;
}
.src-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:20px;
  display:flex; flex-direction:column; gap:8px;
}
.src-card-icon {
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; margin-bottom:4px;
}
.src-card h3 { font-size:16px; font-weight:700; color:#1f2937; margin:0; }
.src-card > p { font-size:13px; color:#4b5563; line-height:1.5; margin:0; flex:1; }
.src-card-stat {
  font-size:12px; color:#6b7280; background:#f3f4f6;
  padding:6px 10px; border-radius:8px; margin-top:4px;
}
.src-how { margin-top:6px; }
.src-how summary {
  cursor:pointer; font-size:13px; color:#2563eb; font-weight:600; list-style:none;
}
.src-how summary::-webkit-details-marker { display:none; }
.src-how summary::before { content:'▸ '; }
.src-how[open] summary::before { content:'▾ '; }
.src-how p {
  font-size:13px; color:#4b5563; line-height:1.5; margin:8px 0 0;
  padding:10px 12px; background:#f9fafb; border-radius:8px;
}
.src-how b { color:#b45309; }

@media (max-width: 1024px) {
  .src-cards { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px) {
  .src-cards, .src-grid-2 { grid-template-columns:1fr; }
}

/* === Theme toggle === */
.navbar { gap: 12px; }
.navbar-nav { flex: 1; }
.theme-toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border-default, rgba(31,41,55,0.12));
  color: inherit;
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.theme-toggle:hover { background: rgba(127,127,127,0.10); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle { border-color: rgba(232,230,225,0.18); }

/* === Mobile adaptation === */
/* Таблицы — горизонтальный скролл внутри карточки на узких экранах */
@media (max-width: 1024px) {
  .card { overflow-x: auto; }
  .card > table { min-width: 640px; }
}

/* Планшет: сетки 4→2, 3→2 */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .container { padding: 16px 12px; }
  .navbar { padding: 0 12px; height: auto; min-height: 56px; flex-wrap: nowrap; }

  /* Верхнее меню — горизонтальный скролл */
  .navbar-nav {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    gap: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .navbar-nav::-webkit-scrollbar { display: none; }
  .navbar-nav a { padding: 8px 10px; font-size: 13px; flex-shrink: 0; }

  /* Сетки в один столбец */
  .stats-grid { grid-template-columns: 1fr; gap: 12px; }
  .grid-2 { grid-template-columns: 1fr; gap: 16px; }
  .src-cards, .src-grid-2 { grid-template-columns: 1fr; }
  .rule-card { grid-template-columns: 1fr; }

  /* Заголовки/шапки страниц переносятся */
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .chat-header { flex-direction: column; align-items: stretch; }
  .chat-actions { flex-wrap: wrap; }

  /* Тулбар поиска вертикально */
  .toolbar { flex-direction: column; align-items: stretch; }
  .search-input { max-width: 100%; min-width: 0; width: 100%; }
  .channel-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }

  /* Чат — на всю ширину, крупные кнопки */
  .chat-container { border-radius: 0; margin: 0 -12px; }
  .chat-messages { max-height: 60vh; }
  .message { max-width: 90%; }
  .btn-takeover, .btn-return { width: 100%; }

  /* Inbox-виджет вертикально */
  .inbox-widget { flex-direction: column; align-items: flex-start; }
  .inbox-widget-cta { margin-left: 0; }

  /* Inbox-лента: строка в столбец */
  .inbox-item > summary {
    grid-template-columns: auto 1fr; gap: 6px 10px;
  }
  .inbox-preview { grid-column: 1 / -1; white-space: normal; }
  .inbox-actions .btn { flex: 1 1 auto; }

  /* Таблица заявок — действия переносятся */
  .btn-group { flex-wrap: wrap; }
}

/* iOS: инпут < 16px вызывает зум страницы */
@media (max-width: 768px) {
  input, select, textarea, .search-input { font-size: 16px; }
}

/* Тач-таргеты не меньше 44px (Apple HIG) */
@media (pointer: coarse) {
  .btn, .navbar-nav a, .back-link, .theme-toggle,
  .inbox-tab, .chip, .rule-edit, .src-how summary {
    min-height: 44px;
  }
  .btn, .theme-toggle { min-width: 44px; }
  .btn-sm { min-height: 38px; }
}

/* === Role switcher === */
/* Гейтинг меню по роли (без мигания — data-role ставится early-script) */
:root[data-role="admin"]   .navbar-nav li:not(.nav-admin)   { display:none; }
:root[data-role="manager"] .navbar-nav li:not(.nav-manager) { display:none; }
:root[data-role="owner"]   .navbar-nav li:not(.nav-owner)   { display:none; }

.role-switch { position:relative; flex-shrink:0; }
.role-btn {
  display:flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--border-default, rgba(31,41,55,0.12));
  color:inherit; padding:6px 12px; border-radius:10px; cursor:pointer;
  font-size:13px; font-weight:500; transition:background .15s;
}
.role-btn:hover { background:rgba(127,127,127,0.10); }
.role-ava {
  width:24px; height:24px; border-radius:50%;
  background:var(--accent-primary,#7a1f2b); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
}
.role-label { white-space:nowrap; max-width:230px; overflow:hidden; text-overflow:ellipsis; }
.role-caret { opacity:.6; font-size:11px; }
.role-menu {
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--bg-card,#fff); border:1px solid var(--border-default,rgba(31,41,55,0.12));
  border-radius:12px; box-shadow:var(--shadow-card-hover,0 12px 28px rgba(31,41,55,0.12));
  padding:8px; min-width:280px; z-index:200;
}
.role-menu[hidden] { display:none; }
.role-menu-title {
  font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-dim,#6b7280); padding:6px 10px 8px;
}
.role-opt {
  display:flex; flex-direction:column; gap:2px; width:100%; text-align:left;
  background:transparent; border:0; cursor:pointer; padding:9px 10px;
  border-radius:8px; color:inherit; transition:background .12s;
}
.role-opt:hover { background:rgba(127,127,127,0.08); }
.role-opt b { font-size:14px; font-weight:600; }
.role-opt small { font-size:12px; color:var(--text-dim,#6b7280); }
.role-opt-on { background:var(--accent-soft,#f4eeed); }
.role-opt-on b { color:var(--accent-primary,#7a1f2b); }

.role-scope-banner {
  background:var(--accent-soft,#f4eeed);
  border:1px solid var(--accent-soft-border,#e8dcd9);
  color:var(--accent-primary,#7a1f2b);
  padding:10px 16px; border-radius:10px; font-size:13px; font-weight:600;
  margin-bottom:18px;
}
:root[data-theme="dark"] .role-menu { background:#181f26; border-color:rgba(232,230,225,0.12); }
:root[data-theme="dark"] .role-opt-on { background:rgba(200,155,92,0.14); }
:root[data-theme="dark"] .role-opt-on b { color:#c89b5c; }
:root[data-theme="dark"] .role-scope-banner {
  background:rgba(200,155,92,0.12); border-color:rgba(200,155,92,0.3); color:#d5ac72;
}
@media (max-width:768px){
  .role-label { max-width:120px; }
  .role-menu { min-width:240px; }
}

/* === Channel pills === */
.chn-pill { display:inline-block; font-size:11px; font-weight:600; padding:3px 9px;
  border-radius:6px; white-space:nowrap; }
.chn-bot  { background:#dbeafe; color:#1e40af; }
.chn-biz  { background:#ede9fe; color:#6d28d9; }
.chn-web  { background:#f3f4f6; color:#4b5563; }
.chn-call { background:#ffedd5; color:#9a3412; }
.chn-acc  { color:var(--text-dim,#6b7280); font-size:11px; }
.chat-channel-badge { margin-left:10px; vertical-align:middle; }
:root[data-theme="dark"] .chn-bot  { background:rgba(59,130,246,0.18); color:#93c5fd; }
:root[data-theme="dark"] .chn-biz  { background:rgba(139,92,246,0.20); color:#c4b5fd; }
:root[data-theme="dark"] .chn-web  { background:rgba(156,163,175,0.18); color:#cbd5e1; }
:root[data-theme="dark"] .chn-call { background:rgba(234,88,12,0.18); color:#fdba74; }

/* === AI work mode === */
.ai-mode-card { padding:24px; }
.ai-mode-title { font-size:18px; font-weight:700; margin:0 0 16px; }
.ai-mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ai-mode-opt {
  text-align:left; background:var(--bg-card,#fff);
  border:2px solid var(--border-default,rgba(31,41,55,0.12));
  border-radius:12px; padding:16px; cursor:pointer; position:relative;
  transition:border-color .15s, background .15s;
}
.ai-mode-opt:hover { border-color:var(--accent-primary,#7a1f2b); }
.ai-mode-h { font-size:15px; font-weight:700; margin-bottom:8px; }
.ai-mode-opt p { font-size:13px; color:var(--text-dim,#6b7280); line-height:1.5; margin:0 0 28px; }
.ai-mode-radio {
  position:absolute; left:16px; bottom:14px; width:16px; height:16px;
  border-radius:50%; border:2px solid var(--border-strong,rgba(31,41,55,0.3));
}
.ai-mode-opt.ai-mode-on {
  border-color:var(--accent-primary,#7a1f2b);
  background:var(--accent-soft,#f4eeed);
}
.ai-mode-opt.ai-mode-on .ai-mode-radio {
  border-color:var(--accent-primary,#7a1f2b);
  background:var(--accent-primary,#7a1f2b);
  box-shadow:inset 0 0 0 3px var(--accent-soft,#f4eeed);
}
.ai-mode-opt.ai-mode-on .ai-mode-h { color:var(--accent-primary,#7a1f2b); }
.ai-mode-hint { font-size:13px; color:var(--text-dim,#6b7280); line-height:1.6; margin:16px 0 0; }
.ai-toast {
  position:fixed; right:24px; bottom:24px; z-index:300;
  background:#15803d; color:#fff; padding:12px 20px; border-radius:10px;
  font-size:14px; font-weight:600; box-shadow:0 12px 28px rgba(0,0,0,0.2);
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s;
}
.ai-toast.show { opacity:1; transform:translateY(0); }
.ai-mode-badge { margin-left:10px; font-size:12px; font-weight:600;
  padding:3px 10px; border-radius:100px; vertical-align:middle; }
.aim-auto { background:#dbeafe; color:#1e40af; }
.aim-semi { background:#fef3c7; color:#92400e; }
.aim-sugg { background:#ffedd5; color:#9a3412; }
:root[data-theme="dark"] .ai-mode-opt { background:#181f26; }
:root[data-theme="dark"] .ai-mode-opt.ai-mode-on { background:rgba(200,155,92,0.14); border-color:#c89b5c; }
:root[data-theme="dark"] .ai-mode-opt.ai-mode-on .ai-mode-h { color:#c89b5c; }
:root[data-theme="dark"] .aim-auto { background:rgba(59,130,246,0.18); color:#93c5fd; }
:root[data-theme="dark"] .aim-semi { background:rgba(245,158,11,0.18); color:#fbbf24; }
:root[data-theme="dark"] .aim-sugg { background:rgba(234,88,12,0.18); color:#fdba74; }
@media (max-width:768px){ .ai-mode-grid { grid-template-columns:1fr; } }

/* === Leads status select === */
.status-select {
  padding:6px 10px; border:1px solid var(--border-default,rgba(31,41,55,0.15));
  border-radius:8px; font-size:13px; background:var(--bg-card,#fff);
  color:inherit; cursor:pointer;
}
.status-select:focus { outline:none; border-color:var(--accent-primary,#7a1f2b); }
.status-final { color:var(--text-dim,#9ca3af); }
:root[data-theme="dark"] .status-select { background:#1c232b; border-color:rgba(232,230,225,0.18); }

/* === FINAL mobile/tablet (authoritative) === */
/* ---------- Планшет (<=1024px) ---------- */
@media (max-width: 1024px) {
  .container { padding: 20px 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .src-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .ai-mode-grid { grid-template-columns: 1fr !important; }
  .card { overflow-x: auto; }
  .card > table { min-width: 620px; }
}

/* ---------- Телефон (<=768px) ---------- */
@media (max-width: 768px) {
  /* Навбар: бренд+роль+тема сверху, меню — второй строкой со скроллом */
  .navbar {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 12px;
    gap: 8px;
    align-items: center;
  }
  .navbar-brand { font-size: 18px; flex: 0 0 auto; }
  .role-switch { order: 2; margin-left: auto; }
  .theme-toggle { order: 3; margin-left: 0; }
  .role-btn { padding: 6px 8px; }
  .role-label { max-width: 90px; }
  .navbar-nav {
    order: 4;
    width: 100%;
    flex: 1 1 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 4px 0 2px;
    scrollbar-width: none;
  }
  .navbar-nav::-webkit-scrollbar { display: none; }
  .navbar-nav li { flex: 0 0 auto; }
  .navbar-nav a { padding: 8px 12px; font-size: 13px; display: block; }

  /* Роль-меню — широкое, не обрезается */
  .role-menu {
    position: fixed;
    left: 12px; right: 12px; top: 64px;
    min-width: 0; width: auto;
  }

  /* Контейнеры и сетки в один столбец */
  .container { padding: 16px 12px; }
  .stats-grid,
  .grid-2,
  .src-cards,
  .src-grid-2,
  .ai-mode-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .rule-card { grid-template-columns: 1fr !important; }

  /* Заголовки/шапки страниц вертикально */
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .chat-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .chat-actions { flex-wrap: wrap; }
  .ai-mode-card { padding: 16px; }

  /* Тулбары поиска вертикально */
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .search-input { width: 100%; max-width: 100%; min-width: 0; }
  .channel-chips,
  .inbox-tabs {
    overflow-x: auto; flex-wrap: nowrap; white-space: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .channel-chips::-webkit-scrollbar,
  .inbox-tabs::-webkit-scrollbar { display: none; }
  .inbox-tab, .chip { flex: 0 0 auto; }

  /* Все таблицы — горизонтальный скролл внутри карточки */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card > table { min-width: 640px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Inbox-лента: строка событий в столбец */
  .inbox-item > summary {
    grid-template-columns: auto 1fr !important;
    gap: 6px 10px;
  }
  .inbox-preview { grid-column: 1 / -1 !important; white-space: normal; }
  .inbox-actions { flex-wrap: wrap; }
  .inbox-actions .btn { flex: 1 1 auto; }
  .inbox-meta { grid-template-columns: 1fr !important; }

  /* Чат на всю ширину, крупные кнопки */
  .chat-container { border-radius: 0; margin: 0 -12px; }
  .chat-messages { max-height: 58vh; }
  .message { max-width: 92%; }
  .btn-takeover, .btn-return { width: 100%; }
  .filter-toggle { width: 100%; }

  /* Заявки: dropdown статусов на всю ширину */
  .status-select { width: 100%; }
  .btn-group { flex-wrap: wrap; }

  /* Inbox-виджет вертикально */
  .inbox-widget { flex-direction: column; align-items: flex-start; gap: 12px; }
  .inbox-widget-cta { margin-left: 0; }

  /* iOS: инпут < 16px вызывает зум страницы */
  input, select, textarea, .search-input, .status-select { font-size: 16px !important; }
}

/* ---------- Узкий телефон (<=420px) ---------- */
@media (max-width: 420px) {
  .role-label { display: none; }              /* оставляем только аватар-кружок */
  .navbar-brand { font-size: 16px; }
  .stat-card .value { font-size: 24px; }
  .page-title { font-size: 22px; }
}

/* ---------- Тач-таргеты ---------- */
@media (pointer: coarse) {
  .btn, .navbar-nav a, .back-link, .theme-toggle, .role-btn,
  .inbox-tab, .chip, .rule-edit, .src-how summary,
  .ai-mode-opt, .role-opt, .status-select {
    min-height: 44px;
  }
  .btn, .theme-toggle { min-width: 44px; }
  .btn-sm { min-height: 38px; }
  .navbar-nav a { display: flex; align-items: center; }
}

/* === Mobile v2 (navbar + new screens) === */
/* Планшет: финанс/команда/сетки 2 кол; широкие таблицы — скролл */
@media (max-width: 1024px) {
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card > table { min-width: 760px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-mode-grid { grid-template-columns: 1fr; }
}

/* Телефон: двухрядный навбар + одноколоночные сетки */
@media (max-width: 768px) {
  .navbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 52px;
    padding: 8px 12px;
    gap: 8px 10px;
  }
  .navbar-brand { flex: 0 0 auto; font-size: 18px; }
  .role-switch { order: 2; margin-left: auto; }
  .theme-toggle { order: 3; margin-left: 0; }
  .navbar-nav {
    order: 4;
    flex: 1 0 100%;
    width: 100%;
    margin-top: 4px;
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    gap: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .navbar-nav::-webkit-scrollbar { display: none; }
  .navbar-nav a { padding: 8px 10px; font-size: 13px; flex-shrink: 0; }

  .role-btn { padding: 6px 10px; }
  .role-label { max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
  .role-menu {
    position: fixed;
    left: 12px; right: 12px; top: 64px;
    min-width: 0; width: auto;
  }
  .role-scope-banner { font-size: 12px; padding: 8px 12px; }

  /* Все мультиколонки → одна колонка */
  .stats-grid,
  .grid-2,
  .src-cards,
  .src-grid-2,
  .rule-card,
  .ai-mode-grid { grid-template-columns: 1fr !important; gap: 12px; }

  /* Шапки/тулбары */
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .chat-header { flex-direction: column; align-items: stretch; }
  .chat-actions { flex-wrap: wrap; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .search-input { max-width: 100%; min-width: 0; width: 100%; }

  /* Inbox — вкладки и чипы скроллятся, лента в столбец */
  .inbox-tabs {
    overflow-x: auto; flex-wrap: nowrap; white-space: nowrap;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  .inbox-tabs::-webkit-scrollbar { display: none; }
  .inbox-tab { flex-shrink: 0; }
  .channel-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .inbox-item > summary { grid-template-columns: auto 1fr; gap: 6px 10px; }
  .inbox-preview { grid-column: 1 / -1; white-space: normal; }
  .inbox-actions .btn { flex: 1 1 auto; }
  .inbox-widget { flex-direction: column; align-items: flex-start; }
  .inbox-widget-cta { margin-left: 0; }

  /* Чат на всю ширину */
  .chat-container { border-radius: 0; margin: 0 -12px; }
  .chat-messages { max-height: 58vh; }
  .message { max-width: 92%; }
  .btn-takeover, .btn-return { width: 100%; }
  #chat-channel-badge, #ai-mode-badge,
  .chat-channel-badge { display: inline-block; margin: 4px 6px 0 0; }

  /* Заявки — действия переносятся, дропдаун на ширину */
  .btn-group { flex-wrap: wrap; }
  .status-select { width: 100%; }

  /* Тост режима AI — на всю ширину снизу */
  .ai-toast { left: 12px; right: 12px; bottom: 12px; text-align: center; }

  .container { padding: 16px 12px; }
}

/* Узкий телефон: прячем длинный лейбл роли (оставляем аватар+caret) */
@media (max-width: 480px) {
  .role-label { display: none; }
  .navbar-brand { font-size: 16px; }
  .page-title { font-size: 22px; }
}

/* iOS не зумит если шрифт инпута ≥16px */
@media (max-width: 768px) {
  input, select, textarea, .search-input { font-size: 16px; }
}

/* Тач-таргеты ≥44px (Apple HIG) */
@media (pointer: coarse) {
  .btn, .navbar-nav a, .back-link, .theme-toggle, .role-btn,
  .inbox-tab, .chip, .rule-edit, .src-how summary, .ai-mode-opt,
  .status-select, .role-opt { min-height: 44px; }
  .btn-sm { min-height: 38px; }
}

/* === Lead detail card === */
table.kv { width:100%; border-collapse:collapse; }
table.kv td { padding:9px 0; border-bottom:1px solid var(--border-default,rgba(31,41,55,0.08)); font-size:14px; vertical-align:top; }
table.kv tr:last-child td { border-bottom:0; }
.kv-k { color:var(--text-dim,#6b7280); width:42%; }
.kv-v { color:var(--text-primary,#1f2937); font-weight:500; }
.hist-item {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:8px 0; border-bottom:1px solid var(--border-default,rgba(31,41,55,0.06)); font-size:13px;
}
.hist-item:last-child { border-bottom:0; }
.hist-item a { font-family:ui-monospace,Menlo,monospace; font-weight:600; }
.hist-item span:nth-child(2){ flex:1; min-width:120px; }
.files-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.file-card { position:relative; border:1px solid var(--border-default,rgba(31,41,55,0.10)); border-radius:10px; overflow:hidden; background:var(--bg-card,#fff); }
.file-thumb { display:block; aspect-ratio:4/3; background:var(--bg-card-soft,#f0ede6); }
.file-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.file-doc { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#b91c1c; font-size:20px; letter-spacing:.04em; }
.file-meta { padding:8px 10px; font-size:12px; color:var(--text-dim,#6b7280); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-del { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(0,0,0,0.55); color:#fff; cursor:pointer; font-size:13px; line-height:1; }
.file-del:hover { background:#b91c1c; }
tr.lead-row { cursor:pointer; }
tr.lead-row:hover { background:var(--accent-soft,#f4eeed); }
:root[data-theme="dark"] tr.lead-row:hover { background:rgba(200,155,92,0.10); }
@media (max-width:768px){ .files-grid { grid-template-columns:repeat(2,1fr); } }

/* === Lead edit + items === */
.kv-sub { font-size:13px;font-weight:600;color:var(--text-dim,#6b7280);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px; }
.kv-in { width:100%; padding:7px 10px; border:1px solid var(--border-default,rgba(31,41,55,0.18));
  border-radius:8px; font-size:14px; background:var(--bg-input,#fff); color:inherit; }
.kv-in:focus { outline:none; border-color:var(--accent-primary,#7a1f2b); }
.items-table { width:100%; border-collapse:collapse; }
.items-table th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-dim,#6b7280); padding:8px 10px; border-bottom:1px solid var(--border-default,rgba(31,41,55,0.12)); }
.items-table td { padding:10px; border-bottom:1px solid var(--border-default,rgba(31,41,55,0.06)); font-size:14px; }
.items-table tfoot td { border-bottom:0; border-top:2px solid var(--border-default,rgba(31,41,55,0.15)); }
.item-add { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.item-add input { padding:8px 12px; border:1px solid var(--border-default,rgba(31,41,55,0.18));
  border-radius:8px; font-size:14px; background:var(--bg-input,#fff); color:inherit; }
.item-add input#it-name { flex:1; min-width:200px; }
.modal-ov { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:400;
  display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-ov[hidden] { display:none; }
.modal-box { background:var(--bg-card,#fff); border-radius:14px; padding:24px; width:100%; max-width:460px;
  box-shadow:0 24px 48px rgba(0,0,0,0.25); }
.modal-box h3 { margin:0 0 16px; font-size:18px; }
.modal-box label { display:block; font-size:13px; color:var(--text-dim,#6b7280); margin:10px 0 4px; }
.modal-box input, .modal-box select { width:100%; padding:9px 12px; border:1px solid var(--border-default,rgba(31,41,55,0.18));
  border-radius:8px; font-size:15px; background:var(--bg-input,#fff); color:inherit; }
.modal-actions { display:flex; gap:10px; margin-top:20px; }
.modal-actions .btn { flex:1; }
:root[data-theme="dark"] .modal-box { background:#181f26; }
@media (max-width:768px){ .item-add input#it-name { min-width:140px; } }

/* === Inbox clickable contact === */
.inbox-contact-link { color:var(--accent-primary,#7a1f2b); text-decoration:none; font-weight:600; }
.inbox-contact-link:hover { text-decoration:underline; }
:root[data-theme="dark"] .inbox-contact-link { color:#d5ac72; }