/* Eximious Tech website-aligned design system
   Shared by the inbox, chat workspace, staff tools, forms, and drawers.
   This layer is intentionally visual-only: it does not change application behaviour. */

:root {
  color-scheme: light;
  --brand-primary: #0b4fc7;
  --brand-primary-strong: #051094;
  --brand-primary-hover: #083b9a;
  --brand-primary-soft: #eaf1ff;
  --brand-accent: #75c9ff;
  --navy: #07111f;
  --navy-2: #172844;
  --blue: var(--brand-primary);
  --blue-strong: var(--brand-primary-strong);
  --blue-soft: var(--brand-primary-soft);
  --cyan: var(--brand-accent);
  --ink: #182336;
  --muted: #67758a;
  --line: #e4e8ef;
  --surface: #ffffff;
  --canvas: #f7f6f1;
  --green: #16835f;
  --amber: #a86508;
  --danger: #b93842;
  --shadow: 0 22px 60px rgba(7, 17, 31, 0.07);
  --soft-shadow: 0 8px 24px rgba(7, 17, 31, 0.045);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --body-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading-font: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --prod-bg: var(--canvas);
  --prod-panel: var(--surface);
  --prod-panel-soft: #f9fafc;
  --prod-text: var(--ink);
  --prod-muted: var(--muted);
  --prod-border: var(--line);
  --prod-blue: var(--brand-primary);
  --prod-blue-strong: var(--brand-primary-strong);
  --prod-shadow: var(--shadow);
}

* { -webkit-tap-highlight-color: transparent; }

html, body, button, input, select, textarea {
  font-family: var(--body-font);
}

html { background: var(--canvas); }
body {
  color: var(--ink);
  background: var(--canvas);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.panel-heading h1, .chat-heading h2, .details-panel h2,
.tools-header h2, .production-drawer h2, .outreach-dialog h2,
.auth-card h1, .tool-card-head h3 {
  font-family: var(--heading-font);
  font-weight: 800;
  letter-spacing: -0.035em;
}

h1 { font-size: clamp(20px, 1.55vw, 25px); line-height: 1.2; }
h2 { font-size: 17px; line-height: 1.3; }
h3 { font-size: 14px; line-height: 1.35; }

.app-shell {
  gap: 14px;
  padding: 16px;
  background: transparent;
}

.rail, .inbox-panel, .chat-panel, .details-panel,
.auth-card, .tools-dialog, .outreach-dialog, .production-drawer {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--soft-shadow);
}

.rail {
  background: var(--surface);
  color: var(--ink);
}

.rail-header {
  min-height: 74px;
  border-bottom-color: var(--line);
}

.rail-brand-copy strong {
  font-family: var(--heading-font);
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .045em;
}

.rail-brand-copy span {
  font-family: var(--body-font);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}

.brand-mark {
  border-radius: 13px;
  background: var(--brand-primary);
  box-shadow: 0 7px 18px rgba(11, 79, 199, .18);
}

.rail-toggle, .rail-mobile-close, .sidebar-mobile-trigger {
  border-radius: 11px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.rail-content { padding: 16px 11px; }
.rail-section { margin-bottom: 20px; }
.rail-section-title {
  color: #8a96a8;
  font-family: var(--body-font);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.rail-chat-button {
  min-height: 42px;
  border-radius: 12px;
  color: var(--ink);
  background: var(--surface);
  font-size: 11px;
  font-weight: 750;
}

.rail-chat-button:hover, .rail-chat-button[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--line));
  color: var(--brand-primary-strong);
  background: var(--brand-primary-soft);
}

.rail-nav { gap: 4px; }
.rail-nav-item {
  min-height: 42px;
  border-radius: 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.rail-nav-item:hover {
  color: var(--brand-primary-strong);
  background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface));
}

.rail-nav-item.active {
  color: #fff;
  background: var(--brand-primary-strong);
  box-shadow: 0 8px 18px rgba(5, 16, 148, .17);
}

.rail-nav-item:not(.active) svg { color: #778398; }
.rail-nav-item.active svg { color: #fff; }

.rail-badge {
  color: var(--brand-primary-strong);
  background: var(--brand-primary-soft);
  font-family: var(--body-font);
}

.rail-footer { border-top-color: var(--line); }
.rail-theme-button {
  border-radius: 11px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.rail-theme-button:hover { color: var(--brand-primary-strong); background: var(--brand-primary-soft); }
.rail-theme-state { color: var(--brand-primary); }
.rail-status { border: 1px solid rgba(22, 131, 95, .12); border-radius: 12px; }

.inbox-panel, .details-panel {
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.inbox-panel { gap: 0; overflow: hidden; }
.details-panel { overflow-x: hidden; overflow-y: auto; }
.panel-heading, .details-panel > header {
  min-height: 82px;
  padding: 18px 18px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.panel-heading h1, .details-panel h2 { color: var(--navy); }
.eyebrow {
  color: var(--brand-primary);
  font-family: var(--body-font);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.live-indicator { font-size: 11px; font-weight: 700; }
.live-indicator i { box-shadow: 0 0 0 4px rgba(22, 131, 95, .10); }

.stats {
  gap: 8px;
  margin: 12px 14px 10px;
}

.stats > div {
  min-height: 76px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
}

.stats > div:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--line));
  box-shadow: 0 8px 22px rgba(7, 17, 31, .06);
}

.stats > div > span { color: var(--navy); font-family: var(--heading-font); font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.stats > div > small { color: var(--muted); font-family: var(--body-font); font-size: 10px; font-weight: 600; }

.search-row {
  padding: 8px 14px 12px;
  gap: 8px;
  align-items: stretch;
}

.search-box {
  min-width: 0;
  min-height: 42px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfbf9;
  box-shadow: none;
}

.search-box:focus-within {
  border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.search-box input, .search-row select {
  min-width: 0;
  height: 38px;
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 11px;
}

.search-row select {
  width: 100%;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  background-color: var(--surface);
}

.conversation-list {
  gap: 8px;
  padding: 8px 12px 14px;
}

.conversation-item {
  grid-template-columns: 43px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.conversation-item:hover {
  transform: translateY(-1px);
  border-color: var(--line);
  background: #fbfbf9;
  box-shadow: none;
}

.conversation-item.active {
  border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, var(--line));
  border-left: 3px solid var(--brand-primary-strong);
  background: var(--brand-primary-soft);
  box-shadow: none;
}

.conversation-item .avatar {
  width: 43px;
  height: 43px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-accent) 22%, var(--surface));
  color: var(--brand-primary-strong);
  font-family: var(--heading-font);
  font-size: 12px;
  font-weight: 800;
}

.conversation-copy strong { color: var(--navy); font-family: var(--heading-font); font-size: 11px; font-weight: 750; }
.conversation-copy p { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.conversation-time { color: #8e9aab; font-size: 10px; }

.chat-panel {
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--soft-shadow);
}

.chat-heading {
  min-height: 72px;
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.chat-heading .avatar, #chatAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-accent) 24%, var(--surface));
  color: var(--brand-primary-strong);
  font-family: var(--heading-font);
  font-weight: 800;
}

.chat-identity h2 { color: var(--navy); font-size: 14px; font-weight: 800; }
.chat-identity p { color: var(--muted); font-size: 11px; }

.assignment-badge {
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
}

.assignment-badge.ai { color: var(--brand-primary-strong); background: var(--brand-primary-soft); }
.assignment-button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--brand-primary-strong);
  background: var(--surface);
  font-size: 11px;
  font-weight: 750;
}
.assignment-button:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }

.messages {
  gap: 10px;
  padding: 20px;
  background-color: #f9faf8;
  background-image: radial-gradient(rgba(11, 79, 199, .055) .7px, transparent .7px);
  background-size: 18px 18px;
}

.message-row { margin-bottom: 0; }
.bubble {
  max-width: min(78%, 560px);
  padding: 11px 13px 9px;
  border: 1px solid var(--line);
  border-radius: 17px 17px 17px 5px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 3px 12px rgba(7, 17, 31, .035);
}

.bubble p {
  font-family: var(--body-font);
  font-size: 13px;
  line-height: 1.55;
}

.outbound .bubble {
  border-color: var(--brand-primary);
  border-radius: 17px 17px 5px 17px;
  color: #fff;
  background: var(--brand-primary-strong);
  box-shadow: 0 6px 16px rgba(5, 16, 148, .12);
}

.bubble footer { gap: 7px; color: #8793a3; font-size: 10px; }
.outbound .bubble footer { color: rgba(255,255,255,.78); }
.sender-label { font-size: 9px; font-weight: 800; }

.composer {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.composer-notice { color: var(--muted); font-size: 10px; }
.composer-row { gap: 9px; }
.composer textarea {
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: #fbfbf9;
  font-size: 13px;
  line-height: 1.45;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.composer textarea:focus {
  border-color: color-mix(in srgb, var(--brand-primary) 60%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 11%, transparent);
}

.send-button {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--brand-primary-strong);
  box-shadow: 0 8px 20px rgba(5, 16, 148, .16);
}

.composer-tools-trigger {
  border-color: var(--line);
  border-radius: 11px;
  color: var(--muted);
  background: var(--surface);
}

.composer-tools-trigger:hover, .composer-tools-trigger.open {
  border-color: var(--brand-primary);
  color: var(--brand-primary-strong);
  background: var(--brand-primary-soft);
}

.composer-tools-menu {
  border-color: var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(7, 17, 31, .16);
}

.composer-tools-menu button { color: var(--ink); border-radius: 11px; }
.composer-tools-menu button:hover { background: var(--brand-primary-soft); }
.composer-tools-menu button > span:first-child { color: var(--brand-primary-strong); background: var(--brand-primary-soft); }

.details-panel > header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}

.details-panel .profile-card,
.order-card, .tool-card, .sidebar-human-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: none;
}

.details-panel .profile-card { margin: 14px; padding: 15px; }
.order-details { padding: 14px; }
.order-status-row {
  border-bottom: 1px solid var(--line);
  background: var(--brand-primary-soft);
}
.order-status-row select { max-width: 60%; }
.detail-row { padding: 12px 13px; border-top-color: var(--line); }
.detail-row label { color: var(--muted); font-family: var(--body-font); font-size: 9px; letter-spacing: .1em; font-weight: 800; }
.detail-row p { color: var(--ink); font-size: 12px; }
.empty-state { color: var(--muted); font-size: 12px; }

.auth-overlay {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(117, 201, 255, .28), transparent 35%),
    linear-gradient(135deg, #07111f 0%, #0b2556 56%, #051094 100%);
}

.auth-card {
  width: min(100%, 440px);
  padding: clamp(24px, 4vw, 34px);
  border-color: rgba(255, 255, 255, .42);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .28);
}

.auth-card h1 { color: var(--navy); font-size: 28px; text-align: center; }
.auth-card > p:not(.eyebrow):not(.form-error) { color: var(--muted); font-size: 12px; line-height: 1.65; }
.auth-card .eyebrow { font-size: 10px; text-align: center; }
.auth-card label { margin: 16px 0 6px; color: var(--ink); font-size: 11px; font-weight: 700; }
.auth-card input {
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--surface);
  font-size: 13px;
}
.auth-card input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 12%, transparent); }
.primary, .btn-primary, .new-conversation-button, .btn-new-chat,
.outreach-send, .side-template-send, .tool-primary, .template-send-button {
  min-height: 40px;
  border: 1px solid var(--brand-primary-strong);
  border-radius: 12px;
  color: #fff;
  background: var(--brand-primary-strong);
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 7px 17px rgba(5, 16, 148, .12);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.primary { padding: 11px 15px; }
.new-conversation-button, .btn-new-chat, .outreach-send, .side-template-send, .tool-primary, .template-send-button { padding: 9px 14px; }
.primary:hover, .btn-primary:hover, .new-conversation-button:hover, .btn-new-chat:hover,
.outreach-send:hover, .side-template-send:hover, .tool-primary:hover, .template-send-button:hover {
  border-color: var(--brand-primary-hover);
  background: var(--brand-primary-hover);
  box-shadow: 0 9px 22px rgba(5, 16, 148, .18);
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-primary) 32%, transparent);
  outline-offset: 2px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  border-radius: 11px;
}

button { font-family: var(--body-font); }
button:disabled { cursor: not-allowed; opacity: .58; transform: none !important; }

.conversation-actions { gap: 7px; }
.conversation-actions button, .tool-actions button,
.tool-form-actions button, .outreach-small-button, .tools-close {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--surface);
  font-size: 10px;
  font-weight: 700;
  box-shadow: none;
}

.conversation-actions button:hover, .tool-actions button:hover,
.tool-form-actions button:hover, .outreach-small-button:hover, .tools-close:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--line));
  color: var(--brand-primary-strong);
  background: var(--brand-primary-soft);
}

.danger-action, .conversation-actions .danger-action {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
}

.tools-overlay, .outreach-modal {
  background: rgba(7, 17, 31, .58);
  backdrop-filter: blur(8px);
}

.tools-dialog, .outreach-dialog {
  border-color: var(--line);
  border-radius: 21px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.tools-header, .outreach-dialog-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.tools-header h2, .outreach-dialog-header h2 { color: var(--navy); }
.tools-tabs { gap: 5px; padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.tools-tabs button {
  min-height: 35px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}
.tools-tabs button.active {
  border-color: color-mix(in srgb, var(--brand-primary) 16%, var(--line));
  color: var(--brand-primary-strong);
  background: var(--brand-primary-soft);
}
.tools-body { background: var(--canvas); }
.tool-form, .erp-status-card, .tool-empty, .erp-link, .side-template-preview,
.template-preview, .tool-result, .template-rule, .csv-import-card {
  border-radius: 12px;
}
.tool-form, .erp-status-card, .tool-empty, .erp-link { border-color: var(--line); }
.tool-form input, .tool-form textarea, .tool-form select,
.template-field select, .template-field input,
.outreach-tools input, .outreach-form-grid input,
.outreach-form-grid textarea, .outreach-mode-row select,
.outreach-template-row select, .template-variable input,
.outreach-text-message {
  border-color: var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 12px;
}
.tool-form input:focus, .tool-form textarea:focus, .tool-form select:focus,
.template-field select:focus, .template-field input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 11%, transparent);
}
.tool-form label, .template-field label, .outreach-field label, .template-variable label {
  color: var(--muted);
  font-family: var(--body-font);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .025em;
}
.erp-link { color: var(--brand-primary-strong); font-weight: 750; }
.erp-link:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.side-template-send { min-height: 38px; }
.template-preview { border-color: rgba(22, 131, 95, .2); background: #f0faf5; }
.tool-result { background: var(--brand-primary-soft); color: var(--ink); }
.outreach-contacts { background: color-mix(in srgb, var(--canvas) 72%, var(--surface)); }
.outreach-dialog-header p { color: var(--muted); }
.contact-result { border-radius: 12px; }
.contact-result:hover, .contact-result.active {
  border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--line));
  background: var(--surface);
}
.contact-result-avatar { background: var(--brand-primary-strong); }
.outreach-text-message { min-height: 130px; }

.production-drawer { border-radius: 22px 0 0 22px; background: var(--surface); color: var(--ink); }
.production-drawer > header { border-bottom-color: var(--line); }
.production-drawer-content { background: var(--canvas); }
.production-stat, .production-lead-row, .integration-grid article {
  border-color: var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: none;
}
.production-stat span, .production-stat small, .production-lead-row small { color: var(--muted); }
.production-stat strong, .integration-grid article strong { color: var(--navy); font-family: var(--heading-font); }
.production-lead-score { background: var(--brand-primary-soft); color: var(--brand-primary-strong); }
.back-to-erp { border-color: var(--line); border-radius: 10px; color: var(--brand-primary-strong); }
.back-to-erp:hover { background: var(--brand-primary-soft); }

.toast {
  right: 20px;
  bottom: 20px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 13px;
  background: var(--brand-primary-strong);
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 650;
  box-shadow: var(--shadow);
}

.blank-chat { background: var(--surface); }
.blank-icon {
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--line));
  border-radius: 18px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-strong);
}
.blank-chat h2 { color: var(--navy); }
.blank-chat p { max-width: 340px; margin: 8px auto 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.human-takeover-banner {
  border-color: rgba(11, 79, 199, .18);
  border-radius: 12px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary-strong);
}
.human-takeover-banner.urgent { border-color: #f0d19a; background: #fff7e7; color: #71480a; }
.handoff-note { border-radius: 11px; }
.new-messages-button {
  border: 1px solid var(--brand-primary);
  border-radius: 999px;
  color: #fff;
  background: var(--brand-primary-strong);
}

html, body { scrollbar-color: #c8d0dd transparent; scrollbar-width: thin; }
body.dark { scrollbar-color: #35435a transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #c8d0dd; background-clip: padding-box; }
body.dark *::-webkit-scrollbar-thumb { background: #35435a; background-clip: padding-box; }

@media (max-width: 1280px) {
  .app-shell { gap: 11px; padding: 12px; }
  .panel-heading { padding-inline: 15px; }
}

@media (max-width: 980px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div { min-height: 68px; }
  .search-row { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
  #statusFilter { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { font-size: 13px; }
  .app-shell { gap: 0; padding: 0; }
  .rail, .inbox-panel, .chat-panel, .details-panel { border-radius: 0; }
  .inbox-panel { border: 0; }
  .panel-heading { min-height: 76px; padding: 12px 14px 12px 64px; }
  .panel-heading h1 { font-size: 20px; }
  .stats { gap: 8px; margin: 10px 12px 8px; }
  .stats > div { min-height: 64px; padding: 9px 10px; border-radius: 12px; }
  .stats > div > span { font-size: 18px; }
  .search-row { padding: 8px 12px 10px; gap: 7px; }
  .search-box { min-height: 40px; border-radius: 11px; }
  .search-row select { height: 40px; border-radius: 11px; }
  .conversation-list { padding: 7px 10px 16px; }
  .conversation-item { padding: 9px; border-radius: 13px; }
  .chat-panel { border-radius: 0; }
  .chat-heading { min-height: 64px; padding: 10px 12px; gap: 8px; }
  .chat-heading .avatar { display: grid; width: 36px; height: 36px; }
  .chat-identity h2 { font-size: 13px; }
  .assignment-badge { display: none; }
  .assignment-button { min-height: 34px; padding: 6px 8px; font-size: 10px; }
  .messages { padding: 15px 12px; }
  .bubble { max-width: 90%; padding: 10px 12px; }
  .bubble p { font-size: 13px; }
  .composer { padding: 10px 11px 12px; }
  .composer textarea { min-height: 44px; font-size: 13px; }
  .send-button { width: 44px; height: 44px; }
  .tools-dialog, .outreach-dialog { border-radius: 0; }
  .production-drawer { border-radius: 0; }
  .toast { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}

/* Dark mode follows the same brand identity with deeper surfaces and soft-blue interaction states. */
body.dark {
  color-scheme: dark;
  --brand-primary: #75aaff;
  --brand-primary-strong: #3979ec;
  --brand-primary-hover: #2f69d1;
  --brand-primary-soft: rgba(68, 131, 239, .16);
  --brand-accent: #72c7ff;
  --navy: #f4f7fd;
  --navy-2: #dbe7fa;
  --blue: var(--brand-primary);
  --blue-strong: var(--brand-primary-strong);
  --blue-soft: var(--brand-primary-soft);
  --cyan: var(--brand-accent);
  --ink: #e6edf8;
  --muted: #9cabc0;
  --line: #24334a;
  --surface: #101b2d;
  --canvas: #07111f;
  --green: #48d4a0;
  --amber: #f1bd63;
  --danger: #ff828a;
  --shadow: 0 22px 60px rgba(0, 0, 0, .34);
  --soft-shadow: 0 10px 28px rgba(0, 0, 0, .20);
  --prod-bg: var(--canvas);
  --prod-panel: var(--surface);
  --prod-panel-soft: #142238;
  --prod-text: var(--ink);
  --prod-muted: var(--muted);
  --prod-border: var(--line);
  --prod-blue: var(--brand-primary);
  --prod-blue-strong: var(--brand-primary-strong);
  --prod-shadow: var(--shadow);
}

body.dark .rail, body.dark .inbox-panel, body.dark .chat-panel,
body.dark .details-panel, body.dark .auth-card, body.dark .tools-dialog,
body.dark .outreach-dialog, body.dark .production-drawer,
body.dark .panel-heading, body.dark .chat-heading, body.dark .details-panel > header,
body.dark .composer, body.dark .tools-header, body.dark .tools-tabs {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

body.dark .rail-brand-copy strong, body.dark .rail-nav-item:hover,
body.dark .rail-theme-button:hover, body.dark .panel-heading h1,
body.dark .details-panel h2, body.dark .chat-identity h2,
body.dark .conversation-copy strong, body.dark .blank-chat h2,
body.dark .auth-card h1, body.dark .tools-header h2,
body.dark .outreach-dialog-header h2, body.dark .production-stat strong,
body.dark .integration-grid article strong {
  color: var(--navy);
}

body.dark .rail-chat-button, body.dark .rail-chat-menu,
body.dark .search-box, body.dark .search-row select,
body.dark .composer textarea, body.dark .auth-card input,
body.dark .tool-form, body.dark .tool-form input,
body.dark .tool-form textarea, body.dark .tool-form select,
body.dark .template-field select, body.dark .template-field input,
body.dark .outreach-tools input, body.dark .outreach-form-grid input,
body.dark .outreach-form-grid textarea, body.dark .outreach-mode-row select,
body.dark .outreach-template-row select, body.dark .template-variable input,
body.dark .outreach-text-message {
  color: var(--ink);
  border-color: var(--line);
  background: var(--prod-panel-soft);
}

body.dark .rail-nav-item { color: var(--muted); }
body.dark .rail-nav-item:not(.active) svg { color: #8ea0ba; }
body.dark .rail-nav-item.active { color: #fff; background: #245dc6; }
body.dark .rail-nav-item.active svg { color: #fff; }
body.dark .rail-status { background: rgba(72, 212, 160, .08); border-color: rgba(72, 212, 160, .15); }
body.dark .conversation-item, body.dark .conversation-item:hover {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
body.dark .conversation-item.active {
  border-color: rgba(117, 170, 255, .45);
  border-left-color: var(--brand-primary);
  background: rgba(57, 121, 236, .15);
}
body.dark .conversation-item .avatar, body.dark .chat-heading .avatar, body.dark #chatAvatar {
  border-color: var(--line);
  background: rgba(114, 199, 255, .12);
  color: var(--brand-primary);
}
body.dark .messages { background-color: #0b1727; background-image: radial-gradient(rgba(114, 199, 255, .055) .7px, transparent .7px); }
body.dark .bubble {
  border-color: var(--line);
  color: var(--ink);
  background: #14243a;
  box-shadow: none;
}
body.dark .outbound .bubble { color: #fff; border-color: #3979ec; background: #245fc7; }
body.dark .bubble footer { color: #a7b4c8; }
body.dark .outbound .bubble footer { color: rgba(255,255,255,.82); }
body.dark .tool-card, body.dark .order-card, body.dark .sidebar-human-card,
body.dark .tool-form, body.dark .erp-status-card, body.dark .tool-empty,
body.dark .erp-link, body.dark .production-stat, body.dark .production-lead-row,
body.dark .integration-grid article, body.dark .side-template-preview {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
body.dark .tool-form label, body.dark .template-field label,
body.dark .outreach-field label, body.dark .template-variable label,
body.dark .production-stat span, body.dark .production-stat small,
body.dark .production-lead-row small, body.dark .detail-row label {
  color: var(--muted);
}
body.dark .tool-empty { border-color: var(--line); background: var(--surface); }
body.dark .tool-form-actions button, body.dark .conversation-actions button,
body.dark .tool-actions button, body.dark .outreach-small-button,
body.dark .tools-close, body.dark .assignment-button {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
body.dark .tool-form-actions button:hover, body.dark .conversation-actions button:hover,
body.dark .tool-actions button:hover, body.dark .outreach-small-button:hover,
body.dark .tools-close:hover, body.dark .assignment-button:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--brand-primary-soft);
}
body.dark .tool-form input, body.dark .tool-form textarea, body.dark .tool-form select,
body.dark .template-field select, body.dark .template-field input,
body.dark .outreach-tools input, body.dark .outreach-form-grid input,
body.dark .outreach-form-grid textarea, body.dark .outreach-mode-row select,
body.dark .outreach-template-row select, body.dark .template-variable input,
body.dark .outreach-text-message { color: var(--ink); background: var(--prod-panel-soft); }
body.dark .side-template-send, body.dark .primary, body.dark .new-conversation-button,
body.dark .btn-new-chat, body.dark .outreach-send, body.dark .tool-primary,
body.dark .template-send-button, body.dark .send-button { color: #fff; }
body.dark .production-drawer-content, body.dark .tools-body { background: var(--canvas); }
body.dark .production-lead-score { color: var(--brand-primary); background: rgba(117, 170, 255, .15); }
body.dark .tool-result { color: var(--ink); background: rgba(117, 170, 255, .13); }
body.dark .template-preview { color: #b6f2d5; border-color: rgba(72, 212, 160, .22); background: rgba(16, 111, 78, .18); }
body.dark .outreach-contacts { background: #0c1727; }
body.dark .contact-result:hover, body.dark .contact-result.active { background: var(--surface); }
body.dark .back-to-erp { color: var(--brand-primary); background: transparent; border-color: var(--line); }
body.dark .auth-overlay { background: radial-gradient(ellipse at 12% 0%, rgba(55, 100, 170, .3), transparent 38%), #050b15; }
body.dark .blank-chat, body.dark .blank-icon { background-color: var(--surface); }
body.dark .blank-icon { color: var(--brand-primary); background: rgba(117, 170, 255, .12); }
body.dark .human-takeover-banner { color: #b8d6ff; background: rgba(57, 121, 236, .12); border-color: rgba(117, 170, 255, .22); }
body.dark .human-takeover-banner.urgent { color: #f1bd63; background: rgba(168, 101, 8, .14); border-color: rgba(241, 189, 99, .25); }
body.dark .toast { color: #fff; background: #245dc6; }
body.dark .composer-tools-menu { background: var(--surface); border-color: var(--line); }
body.dark .composer-tools-menu button { color: var(--ink); }
body.dark .composer-tools-menu button:hover { background: var(--brand-primary-soft); }
body.dark .stats > div { border-color: var(--line); background: var(--surface); box-shadow: none; }
body.dark .stats > div > span { color: var(--navy); }
body.dark .stats > div > small { color: var(--muted); }
body.dark .rail .brand-mark { box-shadow: none; }

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