@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-heading: "Inter", "Segoe UI", sans-serif;

  --bg-body: #0b1120;
  --bg-surface: #111827;
  --bg-card: #1a2332;
  --bg-input: #1e293b;
  --bg-hover: #1e293b;

  --border-color: #1e293b;
  --border-light: #253044;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --brand-500: #2563eb;
  --brand-600: #1d4ed8;
  --success-500: #10b981;
  --warning-500: #f59e0b;
  --danger-500: #ef4444;

  --sidebar-bg: #0f172a;
  --sidebar-border: #1e293b;
  --sidebar-text: #94a3b8;
  --sidebar-active: #1e293b;
  --sidebar-hover: rgba(255,255,255,0.05);

  --shadow-card: 0 1px 3px rgba(0,0,0,0.3);
}

[data-theme="light"] {
  --bg-body: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #f8fafc;

  --border-color: #e2e8f0;
  --border-light: #cbd5e1;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --sidebar-bg: #ffffff;
  --sidebar-border: #e2e8f0;
  --sidebar-text: #64748b;
  --sidebar-active: #f1f5f9;
  --sidebar-hover: rgba(0,0,0,0.03);

  --shadow-card: 0 1px 3px rgba(0,0,0,0.1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-primary);
}

/* Auth pages */
.auth-body {
  min-height: 100vh;
  background: var(--bg-body);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
}

.auth-card .form-control {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 0.5rem;
}

.auth-card .form-control:focus {
  background: var(--bg-input);
  border-color: var(--brand-500);
  color: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

.auth-card .btn-primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
}

/* Dashboard layout */
.dashboard-body {
  min-height: 100vh;
  background: var(--bg-body);
}

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

.sidebar-panel {
  width: 240px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 1.2rem;
  border-bottom: 1px solid var(--sidebar-border);
}

.brand-mark {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.6rem;
  display: grid;
  place-items: center;
  background: var(--brand-500);
  color: white;
  font-size: 1rem;
}

.brand-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.brand-subtitle {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.sidebar-nav {
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.sidebar-settings-slot {
  padding: 0.55rem 0.5rem;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-settings-slot .sidebar-link {
  width: 100%;
}

.sidebar-link {
  border: 0;
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  text-align: left;
  color: var(--sidebar-text);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.15s ease;
  text-decoration: none;
  cursor: pointer;
}

.sidebar-link:hover {
  background: var(--sidebar-hover);
  color: var(--text-primary);
}

.sidebar-link.is-active,
.sidebar-link.active {
  background: var(--sidebar-active);
  color: var(--text-primary);
}

.sidebar-link i {
  width: 1.1rem;
  font-size: 0.9rem;
  text-align: center;
}

.sidebar-group-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 0.75rem 0.3rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: default;
}

.sidebar-submenu {
  display: grid;
  gap: 0.1rem;
}

.sidebar-group-label.is-active {
  color: var(--text-primary);
}

.sidebar-sublink {
  padding-left: 1.35rem;
  font-size: 0.81rem;
}

.conversation-nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--danger-500);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
}

.sidebar-footer {
  margin-top: 0;
  padding: 0.75rem 0.85rem;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-footer .small {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-footer .fw-semibold {
  font-size: 0.8rem;
  color: var(--text-secondary);
  word-break: break-all;
}

.sidebar-user-avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-500) 17%, transparent);
  color: var(--brand-500);
  font-size: 0.75rem;
  font-weight: 800;
}

.sidebar-user-copy { min-width: 0; display: grid; flex: 1; }
.sidebar-user-copy strong { overflow: hidden; color: var(--text-primary); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-copy span { overflow: hidden; color: var(--text-muted); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-chevron { color: var(--text-muted); font-size: 0.65rem; }

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 1035;
}

/* Main panel */
.main-panel {
  flex: 1;
  margin-left: 240px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}

.topbar-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.topbar-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Content */
.content-panel {
  padding: 1.25rem 1.5rem;
  flex: 1;
}

/* Footer */
.page-section-footer {
  margin-top: auto;
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.page-section-footer .footer-brand {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.page-section-footer .footer-brand i {
  color: var(--brand-500);
}

.page-section-footer .footer-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Page sections */
.page-section {
  display: none;
}

.page-section.is-active {
  display: block;
  animation: fadeInSlide 0.2s ease;
}

/* Keep the conversations shell fixed; only its lists may scroll. */
.dashboard-body.conversations-mode {
  overflow: hidden;
}

.dashboard-body.conversations-mode .main-panel {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

.dashboard-body.conversations-mode .content-panel {
  min-height: 0;
  height: calc(100vh - 62px);
  overflow: hidden;
}

.dashboard-body.conversations-mode .page-section-footer {
  display: none;
}

@keyframes fadeInSlide {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-card);
}

.card-body {
  color: var(--text-secondary);
}

/* Metric cards */
.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.metric-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-500);
  border-radius: 0.75rem 0 0 0.75rem;
}

.metric-card.success::after { background: var(--success-500); }
.metric-card.warning::after { background: var(--warning-500); }

.metric-icon {
  font-size: 1.1rem;
  color: var(--brand-500);
  margin-bottom: 0.5rem;
}

.metric-card.success .metric-icon { color: var(--success-500); }
.metric-card.warning .metric-icon { color: var(--warning-500); }

.metric-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.metric-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  margin-top: 0.25rem;
}

/* Tables */
.table {
  color: var(--text-secondary);
}

.table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
}

.table td {
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.table-hover tbody tr:hover {
  background: var(--bg-hover);
}

/* Forms */
.form-control, .form-select {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 0.5rem;
}

.form-control:focus, .form-select:focus {
  background: var(--bg-input);
  border-color: var(--brand-500);
  color: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}

.form-control::placeholder { color: var(--text-muted); }

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.form-text {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.form-check-input {
  background-color: var(--bg-input);
  border-color: var(--border-light);
}

.form-check-input:checked {
  background-color: var(--brand-500);
  border-color: var(--brand-500);
}

.form-check-input:focus {
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* Buttons */
.btn-primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
}

.btn-primary:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
}

.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border-light);
}

.btn-outline-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-light);
}

.btn-outline-danger {
  color: var(--danger-500);
  border-color: var(--danger-500);
}

.btn-outline-danger:hover {
  background: var(--danger-500);
  color: white;
}

.btn-outline-primary {
  color: var(--brand-500);
  border-color: var(--brand-500);
}

.btn-outline-primary:hover {
  background: var(--brand-500);
  color: white;
}

.btn-success {
  background: var(--success-500);
  border-color: var(--success-500);
}

/* Badges */
.badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
}

/* Modals */
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  color: var(--text-primary);
}

.modal-header {
  border-bottom: 1px solid var(--border-color);
}

.modal-header .btn-close {
  filter: invert(1);
}

.modal-footer {
  border-top: 1px solid var(--border-color);
}

.modal-backdrop {
  background: rgba(0,0,0,0.6);
}

/* Bootstrap modal shell. NeXIA also defines .modal for its own dialogs, so
   reset only Bootstrap's .fade modals to the full viewport. */
.modal.fade {
  position: fixed;
  inset: 0;
  z-index: 1055;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.modal.fade .modal-dialog {
  width: auto;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  transform: none;
}

.modal.fade .modal-dialog-centered {
  min-height: calc(100% - var(--bs-modal-margin, 1rem) * 2);
}

body > .modal-backdrop.show {
  visibility: visible;
  opacity: 0.55;
}

/* Dropdowns */
.dropdown-menu {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
}

.dropdown-item {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* NeXIA opens menus with .open; Bootstrap uses .show. Support both states. */
.dropdown-menu.show,
.dropdown-menu.open {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Switches */
.form-check.form-switch .form-check-input {
  width: 2.5rem;
  height: 1.3rem;
}

/* Instance cards */
.instances-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.instance-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.instance-head h3 {
  font-size: 0.88rem;
  color: var(--text-primary);
}

.instance-head p {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.instance-status {
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}

.instance-status.status-online {
  color: var(--success-500);
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
}

.instance-status.status-offline {
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
}

.instance-risk {
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
}

.instance-risk.risk-low {
  color: var(--success-500);
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
}

.instance-risk.risk-medium {
  color: var(--warning-500);
  background: rgba(245,158,11,0.15);
  border: 1px solid rgba(245,158,11,0.3);
}

.instance-risk.risk-high {
  color: #f97316;
  background: rgba(249,115,22,0.15);
  border: 1px solid rgba(249,115,22,0.3);
}

.instance-risk.risk-critical {
  color: var(--danger-500);
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
}

.instance-meta span {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.instance-meta strong {
  font-size: 0.72rem;
  color: var(--text-primary);
}

.instance-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
}

.instance-kpi {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.3rem 0.35rem;
  background: var(--bg-surface);
}

.instance-kpi span {
  display: block;
  font-size: 0.6rem;
  color: var(--text-muted);
}

.instance-kpi strong {
  display: block;
  font-size: 0.8rem;
  color: var(--text-primary);
}

.instance-kpi.warn strong {
  color: var(--warning-500);
}

.instance-progress-wrap .progress {
  height: 0.4rem;
  border-radius: 999px;
  background: var(--bg-input);
}

.instance-card .dropdown-menu {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
}

.instance-card .dropdown-item {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.instance-card .dropdown-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Overview KPIs */
.overview-mini-kpi {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-surface);
  padding: 0.5rem 0.6rem;
}

.overview-mini-kpi .label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.overview-mini-kpi .value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* QR Code modal */
.connect-qr-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.connect-qr-frame {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}

.connect-help-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
}

.connect-help-card h6 { color: var(--text-primary); }
.connect-help-card ol { color: var(--text-secondary); }
.connect-help-card li { margin-bottom: 0.15rem; }

.connect-qr-dialog { max-width: 470px; }

.connect-qr-header {
  border-bottom: 1px solid var(--border-color);
  padding: 0.85rem 1rem;
}

.connect-qr-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.connect-qr-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 0.8rem;
}

.connect-qr-subtitle strong { color: var(--text-primary); }

.connect-qr-frame {
  width: min(100%, 318px);
  margin: 0 auto;
  border-radius: 0.75rem;
  min-height: 318px;
  display: grid;
  place-items: center;
  padding: 0.7rem;
}

.connect-qr-image { display: block; width: 100%; border-radius: 0.4rem; }

.connect-qr-placeholder {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.qr-code-text {
  color: var(--text-muted);
  min-height: 1.2rem;
}

.connect-pairing-text {
  color: var(--success-500);
  font-size: 0.78rem;
  font-weight: 700;
  min-height: 1.2rem;
}

.connect-qr-footer {
  border-top: 1px solid var(--border-color);
  padding: 0.75rem 1rem 0.9rem;
  display: flex;
  gap: 0.5rem;
}

.btn-connect-refresh {
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
}

.btn-connect-refresh:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--brand-500);
}

.btn-connect-close {
  width: 2.4rem;
  min-width: 2.4rem;
  border: 1px solid var(--border-light);
  border-radius: 0.5rem;
  background: var(--bg-card);
  color: var(--text-muted);
  padding: 0.4rem;
}

.btn-connect-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Input group */
.input-group-text {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
}

/* List group */
.list-group-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

/* Event toggles */
.event-toggle-grid {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-surface);
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.4rem;
}

.event-toggle-item {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-card);
  padding: 0.4rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.event-toggle-item.is-checked {
  border-color: var(--brand-500);
  background: rgba(37,99,235,0.1);
  color: var(--text-primary);
}

/* Advanced switch */
.adv-switch {
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-surface);
  padding: 0.6rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.adv-switch strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-primary);
}

.adv-switch small {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
}

.adv-switch .form-check-input {
  width: 2.5rem;
  height: 1.3rem;
}

/* Groups */
.groups-search { width: min(100%, 420px); }
.group-name-cell { min-width: 200px; }
.group-name-cell strong, .group-name-cell small { display: block; }
.group-id-code { user-select: all; }

/* Webhook config */
.webhook-config-item.is-disabled,
.advanced-webhook-config.is-disabled {
  opacity: 0.5;
}

/* Lookup */
.lookup-instance-card {
  border: 1px solid var(--border-color) !important;
  background: var(--bg-surface);
  transition: all 0.15s ease;
}

.lookup-instance-card.is-selected {
  border-color: var(--brand-500) !important;
  background: rgba(37,99,235,0.1);
  box-shadow: 0 0 0 1px rgba(37,99,235,0.2);
}

.lookup-instance-panel {
  background: var(--bg-surface);
  border-color: var(--border-color) !important;
}

.lookup-manual-box {
  background: var(--bg-surface);
  border-color: var(--border-color) !important;
}

/* Queue */
.queue-error-cell {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Code */
code {
  background: var(--bg-input);
  color: var(--brand-500);
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
}

pre {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color);
}

/* Responsive */
@media (max-width: 991.98px) {
  .sidebar-panel {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    width: 240px;
  }

  body.sidebar-open .sidebar-panel {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }

  .main-panel {
    margin-left: 0;
  }

  .instances-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .metric-value { font-size: 1.4rem; }
  .instances-grid { grid-template-columns: 1fr; }
  .instance-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-panel { width: min(84vw, 240px); }
}

/* SweetAlert dark override */
.swal2-popup {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}

.swal2-title { color: var(--text-primary) !important; }
.swal2-html-container { color: var(--text-secondary) !important; }

/* Text utilities */
.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--success-500) !important; }
.text-danger { color: var(--danger-500) !important; }
.text-warning { color: var(--warning-500) !important; }
.text-primary { color: var(--text-primary) !important; }
.bg-surface { background: var(--bg-surface) !important; }

/* Bootstrap dark overrides */
.alert { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); }
.alert-info { background: rgba(37,99,235,0.15); color: var(--text-primary); border-color: rgba(37,99,235,0.3); }
.alert-success { background: rgba(16,185,129,0.15); color: var(--text-primary); border-color: rgba(16,185,129,0.3); }
.alert-warning { background: rgba(245,158,11,0.15); color: var(--text-primary); border-color: rgba(245,158,11,0.3); }
.alert-danger { background: rgba(239,68,68,0.15); color: var(--text-primary); border-color: rgba(239,68,68,0.3); }
.form-label { color: var(--text-secondary); }
.form-text { color: var(--text-muted); }
.btn-close { filter: invert(0.8); }
.btn-outline-secondary { color: var(--text-primary); border-color: var(--border-color); }
.btn-outline-secondary:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }

/* Conversations workspace */
.conversations-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
}

.conversations-sidebar {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--border-color);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.conversations-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.conversations-list {
  flex: 1 1 auto;
  min-height: 0;
  height: 0;
  overflow-y: auto;
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
}

.conversation-list-item {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  color: var(--text-primary);
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.conversation-list-item:hover,
.conversation-list-item.is-active {
  background: var(--sidebar-active);
  border-color: var(--border-color);
}

.conversation-view-btn.is-active,
.conversation-status-btn.is-active {
  color: #fff;
  background: var(--brand-500);
  border-color: var(--brand-500);
}

.conversation-list-avatar,
.conversation-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  font-weight: 700;
}

.conversation-list-avatar img,
.conversation-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.conversation-message-row.is-unread-message .conversation-bubble {
  border-left: 3px solid var(--brand-500);
}

.conversation-list-preview {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-list-time {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.conversation-list-item.has-delivery-status .conversation-list-preview {
  padding-right: 1.65rem;
}

.conversation-list-delivery {
  position: absolute;
  right: 0.75rem;
  bottom: 0.65rem;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
}

.conversation-list-delivery.is-read {
  color: var(--brand-500);
}

.conversation-list-delivery.is-failed {
  color: var(--danger-500, #dc3545);
  font-size: 0.82rem;
}

.conversation-unread {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--success-500);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.conversation-global-toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1090;
  width: min(22rem, calc(100vw - 2rem));
  min-height: 4.25rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 0.85rem;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--nexia-shadow-lg, 0 18px 45px rgba(15, 23, 42, 0.22));
  text-align: left;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.conversation-global-toast.is-visible { opacity: 1; transform: translateY(0); }
.conversation-global-toast:hover { border-color: var(--brand-500); }
.conversation-global-toast > span:nth-child(2) { min-width: 0; }
.conversation-global-toast strong,
.conversation-global-toast small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-global-toast small { margin-top: 0.15rem; color: var(--text-muted); }
.conversation-global-toast-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-500);
  color: #fff;
}

.conversation-panel {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 0;
   min-width: 0;
  min-height: 0;
  overflow: hidden;
   background: var(--bg-body);
   transition: grid-template-columns 0.22s ease;
}

.conversation-open.info-open { grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); }
.conversation-open.info-open > *:not(.conversation-messages):not(.conversation-info-panel) { grid-column: 1 / -1; }
.conversation-open.info-open .conversation-messages { grid-column: 1; grid-row: 2; }
.conversation-info-panel { display: none; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-card); border-left: 1px solid var(--border-color); }
.conversation-open.info-open .conversation-info-panel { display: flex; flex-direction: column; grid-column: 2; grid-row: 2; }
.conversation-info-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 4.25rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); }
.conversation-info-header h5 { margin: 0; font-size: 1rem; color: var(--text-primary); }
.conversation-info-body { min-height: 0; overflow-y: auto; padding: 1.25rem; }
.conversation-info-body dt { color: var(--text-secondary); font-size: 0.78rem; margin-bottom: 0.8rem; }
.conversation-info-body dd { color: var(--text-primary); font-size: 0.82rem; margin-bottom: 0.8rem; }

.conversation-empty,
.conversation-open {
  height: 100%;
}

.conversation-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--text-secondary);
  text-align: center;
}

.conversation-empty i {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.5rem;
  border-radius: 1rem;
  background: var(--sidebar-active);
  color: var(--brand-500);
  font-size: 1.75rem;
}

.conversation-empty h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.1rem;
}

.conversation-empty p { margin: 0; }

.conversation-open {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}

.conversation-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}

.conversation-bot-toggle { display: inline-flex; margin: 0; cursor: pointer; user-select: none; }
.conversation-bot-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.conversation-bot-toggle-track { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; min-height: var(--control-height-sm, 2rem); padding: 0.35rem 2.65rem 0.35rem 0.65rem; border: 1px solid color-mix(in srgb, var(--success-500) 42%, var(--border-color)); border-radius: 0.55rem; background: color-mix(in srgb, var(--success-500) 11%, var(--bg-card)); color: var(--success-500); font-size: 0.74rem; white-space: nowrap; transition: 0.18s ease; }
.conversation-bot-toggle-track::after { content: ''; position: absolute; right: 0.55rem; width: 1.55rem; height: 0.9rem; border-radius: 999px; background: var(--success-500); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--success-500) 75%, #000); }
.conversation-bot-toggle-track::before { content: ''; position: absolute; right: 0.69rem; z-index: 1; width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #fff; transition: transform 0.18s ease; }
.conversation-bot-toggle { position: relative; }
.conversation-bot-toggle.is-paused .conversation-bot-toggle-track { border-color: color-mix(in srgb, var(--warning-500) 48%, var(--border-color)); background: color-mix(in srgb, var(--warning-500) 12%, var(--bg-card)); color: var(--warning-500); }
.conversation-bot-toggle.is-paused .conversation-bot-toggle-track::after { background: var(--text-muted); box-shadow: none; }
.conversation-bot-toggle.is-paused .conversation-bot-toggle-track::before { transform: translateX(-0.62rem); }
.conversation-bot-toggle input:focus-visible + .conversation-bot-toggle-track { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.conversation-bot-toggle input:disabled + .conversation-bot-toggle-track { opacity: 0.55; cursor: wait; }

.conversation-messages {
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
  background-color: var(--bg-body);
  background-image: linear-gradient(rgba(100,116,139,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(100,116,139,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.conversation-day-group {
  position: relative;
  min-height: 1px;
}

.conversation-day {
  position: sticky;
  top: 0.55rem;
  z-index: 4;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 0.2rem 0.65rem rgba(2, 8, 23, 0.2);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.conversation-message-row {
  display: flex;
  margin-bottom: 0.65rem;
}

.conversation-message-row.is-outgoing { justify-content: flex-end; }

.conversation-bubble {
  max-width: min(76%, 620px);
  padding: 0.65rem 0.8rem 0.45rem;
  border: 1px solid var(--border-color);
  border-radius: 0.85rem;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.conversation-message-row.is-outgoing .conversation-bubble {
  background: rgba(37,99,235,0.18);
  border-color: rgba(37,99,235,0.35);
}

.conversation-message-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lead-conversation { display: grid; gap: 0.45rem; max-height: 520px; overflow-y: auto; padding: 0.25rem; background: color-mix(in srgb, var(--bg-card) 92%, var(--bg-hover)); border-radius: 0.65rem; }
.lead-message { width: fit-content; max-width: min(84%, 620px); padding: 0.55rem 0.7rem; border: 1px solid var(--border-color); border-radius: 0.7rem 0.7rem 0.7rem 0.2rem; background: var(--bg-card); }
.lead-message.is-outgoing { margin-left: auto; border-color: rgba(37,99,235,0.35); border-radius: 0.7rem 0.7rem 0.2rem 0.7rem; background: rgba(37,99,235,0.14); }
.lead-message time { display: block; margin-top: 0.25rem; color: var(--text-muted); font-size: 0.68rem; }
.lead-delivery { display: inline-block; margin-left: 0.18rem; font-weight: 700; line-height: 1; }
.lead-delivery.is-sent { color: var(--text-muted); }
.lead-delivery.is-delivered { color: #64748b; }
.lead-delivery.is-read { color: #38bdf8; }
.lead-delivery.is-failed { color: var(--danger-500); }
.lead-chart-panel { border: 1px solid var(--border-color); border-radius: 0.75rem; padding: 1rem; background: color-mix(in srgb, var(--bg-card) 94%, var(--bg-hover)); }
.lead-chart-visual { position: relative; width: min(100%, 42rem); height: 17rem; margin: 0 auto; }
.lead-chart-visual canvas { width: 100% !important; height: 100% !important; }
.lead-chart-center { position: absolute; left: 50%; bottom: 2.5rem; display: grid; transform: translateX(-50%); text-align: center; pointer-events: none; }
.lead-chart-center strong { color: var(--text-primary); font-size: 1.7rem; line-height: 1; }
.lead-chart-center span { margin-top: 0.25rem; color: var(--text-muted); font-size: 0.72rem; }
.lead-funnel-row { display: grid; grid-template-columns: minmax(8rem, 17%) 1fr 4rem; align-items: center; gap: 0.75rem; }
.lead-funnel-label { font-size: 0.82rem; color: var(--text-muted); }
.lead-funnel-track { height: 1.15rem; overflow: hidden; border-radius: 999px; background: var(--bg-hover); }
.lead-funnel-bar { height: 100%; min-width: 0.25rem; border-radius: inherit; background: linear-gradient(90deg, var(--brand-500), #7c3aed); transition: width 0.3s ease; }
.lead-funnel-value { font-size: 0.82rem; font-weight: 700; text-align: right; }
@media (max-width: 576px) { .lead-chart-visual { height: 15rem; } .lead-funnel-row { grid-template-columns: 6.5rem 1fr 3rem; gap: 0.45rem; } .lead-funnel-label,.lead-funnel-value { font-size: 0.72rem; } }

.conversation-interactive-buttons,
.conversation-interactive-list { margin: 0.55rem -0.8rem -0.15rem; border-top: 1px solid color-mix(in srgb, var(--brand-500) 24%, var(--border-color)); }
.conversation-interactive-button { display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; min-height: 2.5rem; padding: 0.5rem 0.75rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--brand-500) 18%, var(--border-color)); background: transparent; color: var(--brand-500); font: inherit; font-size: 0.82rem; font-weight: 700; text-align: center; cursor: pointer; }
.conversation-interactive-button:last-child { border-bottom: 0; }
.conversation-interactive-button i { font-size: 0.75rem; opacity: 0.8; }
.conversation-interactive-list > summary { display: flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 2.6rem; padding: 0.55rem 0.8rem; color: var(--brand-500); font-size: 0.82rem; font-weight: 700; cursor: pointer; list-style: none; }
.conversation-interactive-list > summary::-webkit-details-marker { display: none; }
.conversation-interactive-list > summary .fa-chevron-down { margin-left: auto; font-size: 0.65rem; transition: transform 0.18s ease; }
.conversation-interactive-list[open] > summary .fa-chevron-down { transform: rotate(180deg); }
.conversation-interactive-list-items { display: grid; padding: 0.35rem; border-top: 1px solid var(--border-color); background: color-mix(in srgb, var(--bg-card) 88%, var(--bg-hover)); }
.conversation-interactive-list-items > strong { padding: 0.4rem 0.55rem; color: var(--text-muted); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; }
.conversation-interactive-list-row { width: 100%; padding: 0.55rem 0.65rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.conversation-interactive-button:hover, .conversation-interactive-list-row:hover { background: color-mix(in srgb, var(--brand-500) 10%, transparent); }
.conversation-interactive-list-row + .conversation-interactive-list-row { border-top: 1px solid var(--border-color); }
.conversation-interactive-list-row span { display: grid; gap: 0.12rem; }
.conversation-interactive-list-row b { font-size: 0.78rem; }
.conversation-interactive-list-row small { color: var(--text-muted); font-size: 0.7rem; }

.conversation-media-image,
.conversation-media-video {
  display: block;
  max-width: min(100%, 360px);
  max-height: 320px;
  border-radius: 0.55rem;
  margin-bottom: 0.35rem;
}

.conversation-media-open {
  display: block;
  max-width: 100%;
  margin: 0 0 0.35rem;
  padding: 0;
  border: 0;
  border-radius: 0.55rem;
  color: inherit;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}

.conversation-media-open:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

.conversation-media-sticker {
  display: block;
  width: auto;
  max-width: min(210px, 52vw);
  max-height: 210px;
  object-fit: contain;
}

.conversation-message-row.has-sticker .conversation-bubble {
  padding: 0.25rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.conversation-message-row.has-sticker .conversation-message-meta {
  width: fit-content;
  margin-left: auto;
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
}

.conversation-message-row.has-emoji-only .conversation-message-text {
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 2.5rem;
  line-height: 1.15;
}

.conversation-audio-player {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: min(350px, 72vw);
  min-height: 4rem;
  margin-bottom: 0.15rem;
}

.conversation-audio-play {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--text-primary);
  background: transparent;
}

.conversation-audio-play:hover { color: var(--brand-500); }

.conversation-audio-content {
  min-width: 0;
  flex: 1;
}

.conversation-audio-waveform {
  --audio-progress: 0%;
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.conversation-audio-waveform::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(4px, var(--audio-progress), calc(100% - 4px));
  width: 8px;
  height: 8px;
  border: 2px solid color-mix(in srgb, var(--bg-card) 75%, transparent);
  border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 24%, transparent);
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: left 0.08s linear, opacity 0.12s ease;
  pointer-events: none;
}

.conversation-audio-waveform.has-progress::after { opacity: 1; }

.conversation-audio-waveform span {
  flex: 1 1 2px;
  min-width: 2px;
  height: var(--wave-height, 50%);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--brand-500) 0 var(--bar-progress, 0%),
    color-mix(in srgb, var(--text-muted) 72%, transparent) var(--bar-progress, 0%) 100%
  );
}

.conversation-audio-times {
  display: flex;
  justify-content: space-between;
  margin-top: 0.05rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.conversation-audio-avatar {
  display: inline-flex;
  flex: 0 0 2.45rem;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  border: 2px solid color-mix(in srgb, var(--brand-500) 75%, white);
  border-radius: 50%;
  color: white;
  background: var(--brand-600);
  font-size: 0.7rem;
  font-weight: 700;
}

.conversation-media-audio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.conversation-media-document {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--brand-500);
  text-decoration: none;
  margin-bottom: 0.35rem;
}

.conversation-media-document:hover { text-decoration: underline; }

.conversation-media-unavailable {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 180px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.35rem;
  border: 1px dashed var(--border-color);
  border-radius: 0.55rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
}

.conversation-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  color: #fff;
  background: rgba(3, 8, 18, 0.94);
  backdrop-filter: blur(10px);
}

.conversation-lightbox.is-open { display: block; }

.conversation-lightbox-toolbar {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 0.65rem;
  background: rgba(15,23,42,0.82);
  box-shadow: 0 0.6rem 1.5rem rgba(0,0,0,0.3);
}

.conversation-lightbox-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.45rem;
  color: #fff;
  background: transparent;
}

.conversation-lightbox-toolbar button:hover { background: rgba(255,255,255,0.12); }
.conversation-lightbox-toolbar span { min-width: 3.5rem; text-align: center; font-size: 0.78rem; }

.conversation-lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 4.75rem 2rem 2rem;
  overflow: auto;
}

.conversation-lightbox-stage img {
  display: block;
  max-width: min(92vw, 1400px);
  max-height: calc(100vh - 7rem);
  object-fit: contain;
  transform-origin: center;
  transition: transform 0.15s ease;
  user-select: none;
}

body.conversation-lightbox-open { overflow: hidden; }

.conversation-message-meta {
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  text-align: right;
}

.conversation-status { color: var(--text-muted); }
.conversation-status.is-read { color: #38bdf8; }
.conversation-status.is-failed { color: var(--danger-500); }
.conversation-message-error { color: var(--danger-500); font-size: .78rem; margin-top: .25rem; }

.conversation-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.25rem 0.5rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
}

.conversation-composer textarea {
  resize: none;
  max-height: 140px;
}

.conversation-composer .btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}

.conversation-emoji-wrap { position: relative; flex: 0 0 auto; }
.conversation-emoji-picker {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 0.5rem);
  left: 0;
  display: grid;
  grid-template-columns: repeat(6, 2.35rem);
  gap: 0.2rem;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.65rem;
  background: var(--bg-card);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, .18);
}
.conversation-emoji-picker button {
  width: 2.35rem;
  height: 2.35rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
}
.conversation-emoji-picker button:hover,
.conversation-emoji-picker button:focus-visible { background: var(--bg-hover); }
.conversation-react-btn { width: auto !important; height: auto !important; padding: 0 .2rem; border: 0; color: var(--text-secondary); background: transparent; cursor: pointer; font-size: .82rem; }
.conversation-react-btn:hover, .conversation-react-btn:focus-visible { color: var(--brand-500); }
.conversation-message-reaction { display: inline-flex; align-items: center; justify-content: center; min-width: 1.8rem; height: 1.8rem; margin: .2rem 0 -.2rem; padding: .15rem .35rem; border: 1px solid var(--border-color); border-radius: 1rem; background: var(--bg-card); font-size: 1.15rem; box-shadow: 0 .15rem .4rem rgba(0, 0, 0, .12); }
.conversation-reaction-actions { display: flex; gap: .15rem; margin-top: .35rem; padding: .2rem; width: max-content; border: 1px solid var(--border-color); border-radius: 1rem; background: var(--bg-card); box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .12); }
.conversation-reaction-actions button { width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 1.05rem; }
.conversation-reaction-actions button:hover { background: var(--bg-hover); }
.conversation-context-reactions { position: fixed; z-index: 1000; display: flex; gap: .15rem; padding: .3rem; border: 1px solid var(--border-color); border-radius: 1.2rem; background: var(--bg-card); box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .2); }
.conversation-context-reactions button { width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 1.15rem; }
.conversation-context-reactions button:hover { background: var(--bg-hover); }

.conversation-attachment-preview {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 1.25rem 0.65rem;
  background: var(--bg-card);
  color: var(--text-secondary);
}

.conversation-attachment-preview img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 0.45rem;
}

.conversation-attachment-preview .btn { margin-left: auto; }

.conversation-composer-info {
  background: var(--bg-card);
}

@media (max-width: 767.98px) {
  .conversations-workspace { grid-template-columns: 1fr; height: 100%; min-height: 0; }
  .conversations-sidebar { max-height: 42vh; border-right: 0; border-bottom: 1px solid var(--border-color); }
  .conversation-panel { min-height: 58vh; }
  .conversation-bubble { max-width: 88%; }
}

@media (max-width: 991.98px) {
  .conversation-bot-toggle-track { width: 2.65rem; padding: 0.35rem; justify-content: flex-start; }
  .conversation-bot-toggle-track b { display: none; }
  .conversation-bot-toggle-track::after { right: 0.35rem; }
  .conversation-bot-toggle-track::before { right: 0.49rem; }
}

/* NeXIA integration layer --------------------------------------------------
   The application keeps Bootstrap's layout API while consuming NeXIA's
   surface, spacing, motion and theme conventions. */
:root {
  --nexia-surface: var(--bg-card);
  --nexia-surface-soft: var(--bg-surface);
  --nexia-border: var(--border-color);
  --nexia-radius: 0.875rem;
  --nexia-shadow: 0 8px 24px rgba(2, 8, 23, 0.16);
  --nexia-shadow-hover: 0 14px 36px rgba(2, 8, 23, 0.22);
}

[data-theme="light"] {
  --nexia-shadow: 0 6px 22px rgba(15, 23, 42, 0.07);
  --nexia-shadow-hover: 0 14px 36px rgba(15, 23, 42, 0.11);
}

body {
  transition: background-color 180ms ease, color 180ms ease;
}

.card,
.metric-card,
.instance-card,
.modal-content,
.topbar,
.sidebar-panel,
.form-control,
.form-select,
.dropdown-menu {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.card {
  border-radius: var(--nexia-radius);
  box-shadow: var(--nexia-shadow);
}

.card:hover {
  box-shadow: var(--nexia-shadow-hover);
}

.theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 0.65rem;
}

/* Bootstrap and DataTables receive the same theme tokens. */
.table {
  --bs-table-color: var(--text-secondary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-color: var(--text-secondary);
  --bs-table-striped-bg: var(--bg-hover);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-hover-bg: var(--bg-hover);
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  color: inherit;
  background-color: transparent;
  box-shadow: none;
}

div.dt-container .dt-search input,
div.dt-container .dt-length select {
  color: var(--text-primary);
  background: var(--bg-input);
  border-color: var(--border-color);
}

div.dt-container .dt-info,
div.dt-container .dt-length,
div.dt-container .dt-search {
  color: var(--text-secondary);
}

div.dt-container .pagination .page-link {
  color: var(--text-secondary);
  background: var(--bg-card);
  border-color: var(--border-color);
}

div.dt-container .pagination .active > .page-link {
  color: #fff;
  background: var(--brand-500);
  border-color: var(--brand-500);
}

/* DataTables may be initialized inside a hidden dashboard route. Always let
   the wrapper and its table consume the complete card width after reveal. */
.table-responsive,
div.dt-container,
div.dt-container div.dt-layout-row,
div.dt-container div.dt-layout-table,
div.dt-container div.dt-layout-table > div,
div.dt-container .dt-layout-cell {
  width: 100%;
  max-width: 100%;
}

div.dt-container div.dt-layout-table > div.dt-layout-cell {
  display: block;
}

table.table,
table.dataTable,
div.dt-container table.dataTable {
  width: 100% !important;
  min-width: 100%;
}

div.dt-container .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.dataTable tbody tr.selected > *,
table.dataTable tbody tr.selected:hover > * {
  color: var(--text-primary) !important;
  background: rgba(37, 99, 235, 0.12) !important;
  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.04) !important;
}

.table-primary {
  --bs-table-color: var(--text-primary);
  --bs-table-bg: rgba(37, 99, 235, 0.12);
  --bs-table-border-color: var(--border-color);
  --bs-table-striped-bg: rgba(37, 99, 235, 0.15);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: rgba(37, 99, 235, 0.18);
  --bs-table-hover-color: var(--text-primary);
  color: var(--text-primary);
}

[data-theme="light"] .modal-header .btn-close,
[data-theme="light"] .btn-close {
  filter: none;
}

[data-theme="dark"] .modal-header .btn-close,
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(1);
}

/* Instance management cards */
.instances-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 1rem;
}

.instance-card {
  min-width: 0;
  padding: 1rem;
  gap: 0.875rem;
  border-radius: var(--nexia-radius);
  box-shadow: var(--nexia-shadow);
  position: relative;
  overflow: visible;
}

.instance-card::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 4px;
  border-radius: var(--nexia-radius) 0 0 var(--nexia-radius);
  background: var(--text-muted);
}

.instance-card.is-online::before { background: var(--success-500); }
.instance-card:hover { transform: translateY(-2px); box-shadow: var(--nexia-shadow-hover); }
.instance-card:focus-within { z-index: 20; }

.instance-head,
.instance-identity,
.instance-head-actions {
  display: flex;
  align-items: center;
}

.instance-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.instance-identity { gap: 0.7rem; min-width: 0; }
.instance-title-wrap { min-width: 0; }
.instance-head-actions { justify-content: flex-end; flex-wrap: wrap; gap: 0.35rem; }

.instance-avatar {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  color: var(--brand-500);
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.instance-head h3 {
  max-width: 100%;
  margin: 0 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.instance-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: 0.7rem;
  background: var(--bg-surface);
}

.instance-meta > div { min-width: 0; }
.instance-meta span,
.instance-meta strong { display: block; }
.instance-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.instance-kpis { gap: 0.5rem; }
.instance-kpi { padding: 0.55rem; border-radius: 0.65rem; }
.instance-kpi span { min-height: 2em; line-height: 1.15; }
.instance-kpi strong { margin-top: 0.2rem; font-size: 1rem; }

.instance-progress-wrap {
  padding-top: 0.15rem;
  color: var(--text-secondary);
}

.instance-extra {
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border-color);
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.btn-instance-menu {
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 0.55rem;
}

.btn-instance-menu:hover,
.btn-instance-menu.show {
  color: var(--text-primary);
  background: var(--bg-hover);
  border-color: var(--brand-500);
}

/* Cloud API cards: remove fixed dark surfaces so both themes work. */
.cloud-page-header {
  overflow: hidden;
  position: relative;
}

.cloud-page-header::after {
  content: "";
  position: absolute;
  width: 15rem;
  height: 15rem;
  right: -7rem;
  top: -9rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12), transparent 68%);
  pointer-events: none;
}

.cloud-page-header-icon {
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 0.65rem;
  color: #1686f8;
  background: rgba(22, 134, 248, 0.12);
  border: 1px solid rgba(22, 134, 248, 0.22);
}

.cloud-page-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.cloud-tenant-input { width: 8rem; }

#connectionsGrid .bg-dark,
#templateList .bg-dark,
.template-list-item,
.theme-surface {
  color: var(--text-primary) !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color);
}

#connectionsGrid .card-body > .d-flex:first-child { gap: 0.75rem; }
#connectionsGrid .card h5 { color: var(--text-primary); }
#connectionsGrid .bg-dark { min-height: 62px; }

.cloud-connection-card {
  box-shadow: var(--nexia-shadow);
}

.cloud-connection-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--nexia-shadow-hover);
}

.cloud-connection-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
}

.cloud-connection-head,
.cloud-connection-identity,
.cloud-card-actions {
  display: flex;
  align-items: center;
}

.cloud-connection-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.cloud-connection-identity {
  gap: 0.7rem;
  min-width: 0;
}

.cloud-connection-icon {
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  color: #1686f8;
  background: linear-gradient(145deg, rgba(22, 134, 248, 0.18), rgba(37, 99, 235, 0.08));
  border: 1px solid rgba(22, 134, 248, 0.24);
  font-size: 1.25rem;
}

.cloud-connection-title { min-width: 0; }

.cloud-connection-title h5 {
  margin: 0 0 0.2rem;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 700;
}

.cloud-connection-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  color: var(--text-muted);
  font-size: 0.68rem;
}

.cloud-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.cloud-meta-item {
  min-width: 0;
  padding: 0.5rem 0.6rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 0.6rem;
}

.cloud-meta-item span,
.cloud-meta-item strong { display: block; }

.cloud-meta-item span {
  margin-bottom: 0.12rem;
  color: var(--text-muted);
  font-size: 0.65rem;
}

.cloud-meta-item strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.76rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloud-card-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

.cloud-card-actions .btn { font-size: 0.72rem; }

.cloud-diagnostic { display: flex; min-height: 0; height: auto; flex-direction: column; padding: 0.65rem !important; color: var(--text-primary); background: var(--bg-surface) !important; border: 1px solid var(--border-color); overflow: visible; }
.cloud-diagnostic .badge { font-size: 0.65rem; }
.cloud-diagnostic .badge.bg-success { color: #166534 !important; background: #dcfce7 !important; border: 1px solid #86efac; }
.cloud-diagnostic .badge.bg-warning { color: #854d0e !important; background: #fef3c7 !important; border: 1px solid #fcd34d; }
.cloud-diagnostic .badge.bg-danger { color: #991b1b !important; background: #fee2e2 !important; border: 1px solid #fca5a5; }
.cloud-diagnostic .badge.bg-info { color: #075985 !important; background: #e0f2fe !important; border: 1px solid #7dd3fc; }
.cloud-diagnostic .badge.bg-secondary { color: #374151 !important; background: #e5e7eb !important; border: 1px solid #cbd5e1; }
.cloud-diagnostic .alert-success { color: #166534 !important; background: #dcfce7 !important; border-color: #86efac; }
.cloud-diagnostic .alert-warning { color: #854d0e !important; background: #fef3c7 !important; border-color: #fcd34d; }
.cloud-diagnostic-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.45rem; }
.cloud-diagnostic-stat { display: flex; min-height: 58px; flex-direction: column; align-items: center; justify-content: center; padding: 0.4rem; color: #263241; background: #e2e6eb; border-radius: 0.45rem; text-align: center; }
.cloud-diagnostic-stat strong { font-size: 1.15rem; line-height: 1.1; }
.cloud-diagnostic-stat span { margin-top: 0.25rem; font-size: 0.68rem; line-height: 1.15; }
.cloud-diagnostic-stat.is-limit { background: #cfe1ff; }
.cloud-diagnostic-stat.is-failure { background: #f8d6da; }
.cloud-message-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.6rem; }
.cloud-message-total { display: flex; min-height: 68px; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 0.55rem; text-align: center; }
.cloud-message-total strong { color: #172033; font-size: 1.55rem; line-height: 1; }
.cloud-message-total span { margin-top: 0.3rem; color: #334155; font-size: 0.7rem; font-weight: 600; }
.cloud-message-total.is-sent { background: #ccefdc; border: 1px solid #86d7a5; }
.cloud-message-total.is-received { background: #dbeafe; border: 1px solid #93c5fd; }
.cloud-diagnostic-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.55rem; }
.cloud-diagnostic-details > div { min-width: 0; padding: 0.4rem 0.5rem; background: var(--bg-surface-raised, #f8fafc); border: 1px solid var(--border-color); border-radius: 0.4rem; }
.cloud-diagnostic-details span, .cloud-diagnostic-details strong { display: block; }
.cloud-diagnostic-details span { color: var(--text-muted); font-size: 0.63rem; }
.cloud-diagnostic-details strong { margin-top: 0.18rem; color: var(--text-primary); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-diagnostic-error { margin-top: 0.55rem; padding: 0.45rem 0.55rem; color: #842029; background: #f8d7da; border-left: 3px solid #dc3545; border-radius: 0.35rem; font-size: 0.68rem; line-height: 1.25; }
.cloud-diagnostic-error strong { color: #842029; }
.cloud-diagnostic-error span { display: block; margin-top: 0.18rem; color: #842029; }
.cloud-diagnostic-error-link { width: 100%; margin-top: 0.55rem; padding: 0.25rem 0; color: #842029; background: transparent; border: 0; font-size: 0.68rem; line-height: 1.25; text-decoration: underline; cursor: pointer; }
.cloud-diagnostic-error-link span { display: inline; margin-top: 0; color: inherit; }
.instance-flow-binding { min-height: 105px; flex-shrink: 0; }

@media (max-width: 575.98px) {
  .cloud-diagnostic-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.template-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem;
  margin-bottom: 0.5rem;
  border-radius: 0.7rem;
  overflow: hidden;
}

.conversation-list-item > .flex-grow-1 {
  width: 0;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  overflow: hidden;
}

.conversation-list-item > .flex-grow-1 > span,
.conversation-list-item .text-truncate {
  min-width: 0;
  max-width: 100%;
}

.conversation-list-item strong.text-truncate {
  display: block;
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-list-item .small.text-muted,
.conversation-list-preview {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-send-summary,
.template-variable-box,
.template-json-details {
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 0.7rem;
}

.template-send-summary { padding: 0.8rem; }

.template-send-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
}

.template-send-summary-head strong { color: var(--text-primary); font-size: 0.85rem; }

.template-send-preview {
  padding: 0.7rem;
  color: var(--text-primary);
  background: var(--bg-input);
  border-radius: 0.55rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

.template-preview-buttons {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.45rem;
}

.template-preview-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  color: var(--accent-color, #0d6efd);
  background: var(--bg-input);
  border-radius: 0.45rem;
  font-size: 0.8rem;
}

.template-preview-button small {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-variable-box { padding: 0.85rem; }

#sendTemplateVariables .alert {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.78rem;
}

.template-json-details { overflow: hidden; }

.template-json-details summary {
  padding: 0.75rem 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}

.template-json-help {
  margin: 0 0.85rem 0.65rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.template-json-details textarea {
  margin: 0 0.85rem 0.85rem;
  width: calc(100% - 1.7rem);
}

/* Bootstrap also owns .modal; scope the original NeXIA modal behavior to
   dynamically-created NeXIA dialogs so both libraries remain functional. */
[id^="nexia-"].modal-backdrop {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(2, 6, 23, 0.58);
  backdrop-filter: blur(4px);
}

[id^="nexia-"].modal-backdrop > .modal {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  max-width: 32rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--nexia-radius);
  box-shadow: var(--nexia-shadow-hover);
}

[id^="nexia-"].modal-backdrop > .modal.modal-sm { max-width: 24rem; }
[id^="nexia-"].modal-backdrop > .modal.modal-lg { max-width: 48rem; }
[id^="nexia-"].modal-backdrop > .modal.modal-xl { max-width: 64rem; }

@media (max-width: 767.98px) {
  .topbar { padding: 0.7rem 1rem; }
  .content-panel { padding: 1rem; }
  .instance-head { flex-direction: column; }
  .instance-head-actions { width: 100%; justify-content: flex-start; }
  #connectionsGrid .card-body { padding: 1rem !important; }
  .cloud-page-header .card-body { padding: 1rem !important; }
  .cloud-page-actions { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .instance-meta,
  .instance-kpis { grid-template-columns: 1fr 1fr; }
  .topbar > .d-flex:last-child { gap: 0.35rem !important; }
  .cloud-connection-head { flex-direction: column; }
  .cloud-card-actions { justify-content: stretch; }
  .cloud-card-actions .btn { flex: 1 1 auto; }
}

/* Global interface sizing ------------------------------------------------
   One scale for headers, footers, controls and actions across every page. */
:root {
  --app-header-height: 5.125rem;
  --app-footer-height: 4rem;
  --control-height: 2.375rem;
  --control-height-sm: 2rem;
  --control-height-lg: 2.75rem;
}

.sidebar-brand,
.topbar {
  height: var(--app-header-height);
  min-height: var(--app-header-height);
  max-height: var(--app-header-height);
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.sidebar-brand {
  padding: 0 1rem;
}

.topbar {
  top: 0;
  padding: 0 1.5rem;
  background: var(--bg-surface);
  border: 0;
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sidebar-footer,
.page-section-footer {
  height: var(--app-footer-height);
  min-height: var(--app-footer-height);
  max-height: var(--app-footer-height);
  margin-top: auto;
  border-top: 1px solid var(--border-color);
}

.sidebar-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  justify-content: center;
  padding: 0 0.85rem;
}

.page-section-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

.page-section-footer .footer-meta { margin-top: 0.15rem; }

.btn {
  min-height: var(--control-height);
  padding: 0.45rem 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.btn i { line-height: 1; }

.btn-sm,
.btn-group-sm > .btn {
  min-height: var(--control-height-sm);
  padding: 0.35rem 0.65rem;
  border-radius: 0.45rem;
  font-size: 0.75rem;
}

.btn-lg,
.btn-group-lg > .btn {
  min-height: var(--control-height-lg);
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
}

/* Preserve every edge in grouped actions. Bootstrap collapses adjacent
   borders; with mixed colors and disabled states that made edges disappear. */
.btn-group {
  isolation: isolate;
  border-radius: 0.5rem;
}

.btn-group > .btn,
.btn-group > .btn-group > .btn {
  position: relative;
  margin-left: 0 !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 0 !important;
}

.btn-group > .btn + .btn,
.btn-group > .btn-group + .btn,
.btn-group > .btn + .btn-group {
  margin-left: -1px !important;
}

.btn-group > .btn:first-child,
.btn-group > .btn-group:first-child > .btn {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}

.btn-group > .btn:last-child,
.btn-group > .btn-group:last-child > .btn {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active {
  z-index: 2;
}

.btn-group > .btn:disabled,
.btn-group > .btn.disabled {
  z-index: 0;
  color: var(--text-muted) !important;
  background: var(--bg-surface) !important;
  border-color: var(--border-light) !important;
  opacity: 0.62;
}

.form-control,
.form-select,
.input-group-text {
  min-height: var(--control-height);
  font-size: 0.8125rem;
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  min-height: var(--control-height-sm);
  font-size: 0.75rem;
}

.theme-toggle {
  width: var(--control-height-sm);
  min-width: var(--control-height-sm);
  height: var(--control-height-sm);
  min-height: var(--control-height-sm);
  padding: 0;
}

.modal-footer .btn,
.card .btn,
.topbar .btn {
  vertical-align: middle;
}

@media (max-width: 767.98px) {
  :root { --app-header-height: 4.5rem; }
  .topbar { padding: 0 1rem; }
  .sidebar-brand { padding: 0 0.85rem; }
}

/* Lookup instance rotation ------------------------------------------------ */
.lookup-instance-panel {
  padding: 1rem;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--nexia-radius);
}

.lookup-instance-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

.lookup-instance-panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 700;
}

.lookup-instance-panel-title i { color: var(--brand-500); }

.lookup-instance-panel-subtitle {
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.lookup-instance-panel-controls {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  white-space: nowrap;
}

.lookup-selection-count {
  padding: 0.25rem 0.55rem;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
}

.lookup-instance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.lookup-instance-card {
  min-width: 0;
  min-height: 4.5rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-color) !important;
  border-radius: 0.7rem;
  cursor: pointer;
  user-select: none;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.lookup-instance-card:hover {
  border-color: var(--border-light) !important;
  transform: translateY(-1px);
}

.lookup-instance-card.is-selected {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.65) !important;
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.lookup-instance-card.is-disconnected {
  opacity: 0.52;
  cursor: not-allowed;
}

.lookup-instance-card-main,
.lookup-instance-card-control {
  min-width: 0;
  display: flex;
  align-items: center;
}

.lookup-instance-card-main { gap: 0.6rem; }
.lookup-instance-card-control { justify-content: flex-end; gap: 0.55rem; }

.lookup-instance-card-icon {
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 2.15rem;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 0.6rem;
}

.lookup-instance-card.is-selected .lookup-instance-card-icon {
  color: var(--brand-500);
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.2);
}

.lookup-instance-card-copy { min-width: 0; }

.lookup-instance-card-copy strong {
  display: block;
  max-width: 10rem;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lookup-instance-status {
  margin-top: 0.18rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-muted);
  font-size: 0.65rem;
}

.lookup-instance-status i {
  width: 0.4rem;
  height: 0.4rem;
  display: block;
  background: var(--text-muted);
  border-radius: 50%;
}

.lookup-instance-status.is-online { color: var(--success-500); }
.lookup-instance-status.is-online i { background: var(--success-500); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }

.lookup-rotation-state {
  color: var(--text-muted);
  font-size: 0.62rem;
  white-space: nowrap;
}

.lookup-instance-card.is-selected .lookup-rotation-state {
  color: var(--brand-500);
  font-weight: 600;
}

.lookup-instance-card-control .form-check-input { margin: 0; flex: 0 0 auto; }

.lookup-instance-empty {
  grid-column: 1 / -1;
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-muted);
  border: 1px dashed var(--border-color);
  border-radius: 0.7rem;
  font-size: 0.75rem;
}

@media (max-width: 1199.98px) {
  .lookup-instance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .lookup-instance-panel-head { align-items: flex-start; flex-direction: column; }
  .lookup-instance-panel-controls { width: 100%; justify-content: space-between; }
  .lookup-instance-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .lookup-instance-card { align-items: flex-start; flex-direction: column; }
  .lookup-instance-card-control { width: 100%; justify-content: space-between; }
}

/* Conversations layout --------------------------------------------------- */
.dashboard-body.conversations-mode .main-panel {
  height: 100dvh;
  min-height: 100dvh;
}

.dashboard-body.conversations-mode .content-panel {
  height: auto;
  min-height: 0;
  padding: 1rem 1.5rem;
  display: flex;
  overflow: hidden;
}

#conversationsSection.is-active {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
}

#conversationsSection .conversations-workspace {
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: minmax(19rem, 22rem) minmax(0, 1fr);
  background: var(--bg-card);
  border-radius: var(--nexia-radius);
  box-shadow: var(--nexia-shadow);
}

.conversations-sidebar {
  padding: 1rem;
  background: var(--bg-card);
}

.conversations-sidebar-head {
  min-height: 2.75rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

.conversation-count {
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  display: inline-grid;
  place-items: center;
  color: var(--brand-500);
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
}

.conversations-refresh {
  width: var(--control-height-sm);
  min-width: var(--control-height-sm);
  padding: 0;
}

.conversations-refresh.is-loading i { animation: conversation-spin 700ms linear infinite; }

@keyframes conversation-spin { to { transform: rotate(360deg); } }

.conversations-sidebar .input-group,
.conversations-sidebar .form-select {
  margin-bottom: 0.65rem !important;
}

.conversations-list {
  margin: 0 -0.35rem;
  padding: 0.15rem 0.35rem 0;
  scrollbar-gutter: stable;
}

.conversation-list-more,
.conversation-list-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: center;
}

/* Settings / quick replies */
.settings-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.settings-subnav {
  position: sticky;
  top: calc(var(--app-header-height, 64px) + 1rem);
  padding: 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: 0.9rem;
  background: var(--bg-card);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.settings-subnav-label {
  margin: 0.65rem 0 0.35rem;
  padding: 0.75rem 0.55rem 0.4rem;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-subnav > .settings-subnav-label:first-of-type { margin-top: 0.15rem; }

.settings-subnav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.83rem;
  text-align: left;
}

.settings-subnav-item.is-active {
  border-color: color-mix(in srgb, var(--brand-500) 30%, transparent);
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  color: var(--brand-500);
}

.settings-subnav-item i { width: 1.1rem; color: var(--text-muted); text-align: center; }
.settings-subnav-item.is-active i { color: var(--brand-500); }

.settings-content { min-width: 0; }
.ai-provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 1rem; }
.ai-provider-card { overflow: hidden; }
.ai-provider-card .card-body { display: flex; flex-direction: column; min-height: 100%; }
.ai-provider-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.25rem; }
.ai-provider-head h4 { margin: 0 0 0.2rem; color: var(--text-primary); font-size: 1rem; }
.ai-provider-icon { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; flex: 0 0 2.65rem; border-radius: 0.75rem; background: color-mix(in srgb, var(--brand-500) 13%, transparent); color: var(--brand-500); }
.ai-provider-status { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-muted); font-size: 0.72rem; }
.ai-provider-status.is-ready { color: var(--success-500); }
.flow-ai-card .flow-ai-section > strong,
.flow-ai-card .flow-ai-section > small { display: block; }
.flow-ai-card .flow-ai-section > small { margin-top: 0.15rem; color: var(--text-muted); font-size: 0.72rem; }
.flow-ai-fallback { padding: 0.8rem; border: 1px dashed var(--border-color); border-radius: 0.7rem; background: color-mix(in srgb, var(--bg-card) 70%, transparent); }
#flowAssistantFields { transition: opacity 0.18s ease; }
#flowAssistantFields.is-disabled { opacity: 0.5; pointer-events: none; }
.quick-reply-form-card { overflow: visible; }
.quick-reply-search { width: min(100%, 310px); }
.quick-reply-list { display: grid; gap: 0.65rem; }

.quick-reply-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  background: var(--bg-surface);
}

.quick-reply-item-main { min-width: 0; flex: 1; }
.quick-reply-item code,
.conversation-quick-reply-item code {
  color: var(--brand-500);
  font-size: 0.75rem;
  font-weight: 700;
}

.quick-reply-category,
.quick-reply-global {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.67rem;
}

.quick-reply-global {
  background: color-mix(in srgb, var(--success-500) 14%, transparent);
  color: var(--success-500);
}

.quick-reply-content {
  max-height: 3.2em;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.quick-reply-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.quick-reply-actions .btn { width: 2.2rem; min-width: 2.2rem; padding: 0; }
.quick-reply-empty { min-height: 11rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; color: var(--text-muted); text-align: center; }
.quick-reply-empty i { font-size: 1.5rem; color: var(--brand-500); }

.conversation-composer { position: relative; }
.conversation-quick-replies {
  position: absolute;
  z-index: 20;
  left: 4rem;
  right: 7.8rem;
  bottom: calc(100% + 0.25rem);
  max-height: 320px;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: 0.8rem;
  background: var(--bg-card);
  box-shadow: 0 14px 34px rgba(2, 8, 23, 0.24);
}

.conversation-quick-reply-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.conversation-quick-reply-item:hover,
.conversation-quick-reply-item.is-active { background: var(--sidebar-active); }
.conversation-quick-reply-item > span { min-width: 0; display: grid; gap: 0.15rem; }
.conversation-quick-reply-item small { display: block; overflow: hidden; color: var(--text-muted); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767.98px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-subnav { position: static; }
  .quick-reply-item { align-items: flex-start; }
  .conversation-quick-replies { left: 0.65rem; right: 0.65rem; }
}

.conversation-list-item {
  position: relative;
  margin-bottom: 0.3rem;
  padding: 0.7rem;
  align-items: center;
  gap: 0.65rem;
  border-radius: 0.7rem;
}

.conversation-list-item:hover { transform: translateX(2px); }

.conversation-list-item.is-active {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.conversation-list-avatar {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.75rem;
  background: linear-gradient(145deg, var(--brand-500), var(--brand-600));
}

.conversation-panel {
  position: relative;
  background: var(--bg-body);
}

.conversation-empty {
  min-height: 100%;
  background: radial-gradient(circle at center, rgba(37, 99, 235, 0.06), transparent 35%);
}

.conversation-empty-icon {
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 0.4rem;
  display: grid;
  place-items: center;
  color: var(--brand-500);
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 1.2rem;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.1);
}

.conversation-empty .conversation-empty-icon i {
  width: auto;
  height: auto;
  margin: 0;
  display: inline-block;
  color: inherit;
  background: none;
  border-radius: 0;
  font-size: 1.65rem;
}

.conversation-empty p { max-width: 25rem; font-size: 0.82rem; }

.conversation-open { min-height: 0; }

.conversation-header {
  min-height: 4.5rem;
  padding: 0.75rem 1rem;
}

.conversation-avatar {
  width: 2.65rem;
  height: 2.65rem;
  font-size: 0.78rem;
}

.conversation-back { display: none; width: var(--control-height-sm); padding: 0; }

.conversation-messages {
  padding: 1.15rem clamp(1rem, 3vw, 2.5rem);
  background-size: 32px 32px;
}

.conversation-bubble {
  padding: 0.7rem 0.85rem 0.45rem;
  border-radius: 0.9rem 0.9rem 0.9rem 0.25rem;
}

.conversation-message-row.is-outgoing .conversation-bubble {
  border-radius: 0.9rem 0.9rem 0.25rem 0.9rem;
}

.conversation-composer {
  padding: 0.75rem 1rem 0.45rem;
  align-items: center;
}

.conversation-composer textarea {
  min-height: 2.65rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.conversation-composer .btn {
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
  min-height: 2.65rem;
  padding: 0;
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
}

.conversation-composer .btn:hover,
.conversation-composer .btn:focus-visible { color: var(--text-primary); background: var(--bg-hover); border-color: transparent; }
#conversationSendBtn { color: #fff; background: var(--brand-500); }
#conversationSendBtn:hover { color: #fff; background: var(--brand-600); }

.conversation-attach-wrap { position: relative; flex: 0 0 auto; }
.conversation-attach-menu {
  position: absolute;
  z-index: 45;
  left: -0.35rem;
  bottom: calc(100% + 0.7rem);
  width: 11.25rem;
  padding: 0.45rem;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-card) 96%, #000);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: 0 14px 38px rgba(2, 8, 23, 0.3);
}
.conversation-attach-menu::after { position: absolute; bottom: -0.35rem; left: 1.55rem; width: 0.7rem; height: 0.7rem; background: inherit; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); content: ""; transform: rotate(45deg); }
.conversation-attach-menu button { position: relative; z-index: 1; width: 100%; min-height: 2.55rem; padding: 0.4rem 0.55rem; display: flex; align-items: center; gap: 0.7rem; color: var(--text-primary); background: transparent; border: 0; border-radius: 0.65rem; font-size: 0.78rem; font-weight: 600; text-align: left; }
.conversation-attach-menu button:hover,
.conversation-attach-menu button:focus-visible { outline: 0; background: var(--bg-hover); }
.conversation-attach-menu button > span { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-size: 0.76rem; }
.conversation-attach-menu .is-document { color: #a78bfa; background: color-mix(in srgb, #8b5cf6 15%, transparent); }
.conversation-attach-menu .is-media { color: #38bdf8; background: color-mix(in srgb, #0ea5e9 15%, transparent); }
.conversation-attach-menu .is-camera { color: #fb3b84; background: color-mix(in srgb, #ec4899 15%, transparent); }
.conversation-attach-menu .is-audio { color: #fb923c; background: color-mix(in srgb, #f97316 15%, transparent); }

.conversation-composer.is-recording { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.conversation-composer.is-recording > .conversation-attach-wrap,
.conversation-composer.is-recording > .conversation-emoji-wrap,
.conversation-composer.is-recording > #conversationMessageInput,
.conversation-composer.is-recording > #conversationSendBtn,
.conversation-composer.is-recording > #conversationAudioBtn { display: none !important; }
.conversation-composer.is-recording + #conversationComposerInfo { display: none; }
.conversation-recorder { width: 100%; min-width: 0; min-height: 3.25rem; padding: 0.35rem 0.45rem 0.35rem 0.65rem; display: flex; align-items: center; gap: 0.65rem; color: var(--text-primary); background: color-mix(in srgb, var(--bg-card) 92%, var(--bg-hover)); border: 1px solid var(--border-color); border-radius: 1.65rem; box-shadow: 0 4px 16px rgba(2, 8, 23, 0.12); }
.conversation-recorder-action,
.conversation-recorder-send { width: 2.35rem; height: 2.35rem; padding: 0; display: grid; place-items: center; flex: 0 0 auto; color: var(--text-primary); background: transparent; border: 0; border-radius: 50%; }
.conversation-recorder-action:hover { background: var(--bg-hover); }
.conversation-recorder-action.is-delete { color: var(--text-secondary); }
.conversation-recorder-action.is-delete:hover { color: var(--danger-500); }
.conversation-recorder-send { width: 2.65rem; height: 2.65rem; color: #07140e; background: #20c96b; font-size: 1rem; box-shadow: 0 5px 14px rgba(32, 201, 107, 0.27); }
.conversation-recorder-send:hover { background: #18b960; transform: scale(1.03); }
.conversation-recorder-send:disabled { opacity: 0.55; transform: none; }
.conversation-recorder-dot { width: 0.6rem; height: 0.6rem; flex: 0 0 auto; border-radius: 50%; background: #ff7f91; box-shadow: 0 0 0 3px color-mix(in srgb, #ff7f91 13%, transparent); animation: conversationRecordingPulse 1.25s ease-in-out infinite; }
.conversation-recorder.is-paused .conversation-recorder-dot { animation: none; opacity: 0.45; }
.conversation-recorder time { min-width: 2.6rem; font-size: 0.91rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.conversation-recorder-wave { min-width: 4rem; height: 2rem; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.conversation-recorder-wave span { width: 2px; min-width: 2px; height: var(--recording-wave-height, 18%); border-radius: 999px; background: color-mix(in srgb, var(--text-secondary) 80%, transparent); transition: height 80ms linear, background 120ms ease; }
.conversation-recorder:not(.is-paused) .conversation-recorder-wave span.is-live { background: var(--brand-500); }
.conversation-recorder.is-processing .conversation-recorder-wave { opacity: 0.45; }
.conversation-recorder.is-processing .conversation-recorder-dot { animation: conversationRecordingPulse .7s ease-in-out infinite; background: var(--brand-500); }
@keyframes conversationRecordingPulse { 0%,100% { transform: scale(.78); opacity: .65; } 50% { transform: scale(1); opacity: 1; } }

#conversationComposerInfo {
  padding: 0 1rem 0.7rem !important;
  background: var(--bg-card);
  font-size: 0.67rem;
}

.conversation-list-empty,
.conversation-list-loading {
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.74rem;
}

.conversation-list-empty i { color: var(--brand-500); font-size: 1.25rem; }

@media (max-width: 767.98px) {
  .dashboard-body.conversations-mode .content-panel { padding: 0.65rem; }
  #conversationsSection .conversations-workspace { display: block; }
  .conversations-sidebar { width: 100%; height: 100%; max-height: none; border: 0; }
  .conversation-panel { display: none; width: 100%; height: 100%; min-height: 0; }
  .conversations-workspace.has-selection .conversations-sidebar { display: none; }
  .conversations-workspace.has-selection .conversation-panel { display: block; }
  .conversation-back { display: inline-flex; }
  .conversation-header { min-height: 4rem; padding: 0.6rem 0.7rem; }
  .conversation-messages { padding: 0.85rem 0.65rem; }
  .conversation-bubble { max-width: 90%; }
  .conversation-composer { padding: 0.65rem; }
  .conversation-attach-menu { position: fixed; left: 0.65rem; right: auto; bottom: 4.75rem; width: min(12rem, calc(100vw - 1.3rem)); }
  .conversation-attach-menu::after { display: none; }
  .conversation-recorder { gap: 0.42rem; padding-left: 0.45rem; }
  .conversation-recorder-wave { gap: 1px; }
  .conversation-recorder-wave span:nth-child(-n+10) { display: none; }
  #conversationComposerInfo { padding: 0 0.65rem 0.55rem !important; }
}

/* Flow builder */
#flowBuilderView { max-width: 100%; }

.flow-builder-toolbar {
  min-height: 4.25rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0.85rem;
  box-shadow: var(--shadow-card);
}

.flow-builder-heading { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.flow-builder-heading > div { min-width: 0; }
.flow-builder-heading h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.flow-builder-layout {
  display: grid;
  grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.flow-builder-sidebar { display: grid; gap: 1rem; min-width: 0; }
.flow-builder-sidebar > .flow-library-card { order: -1; }
.flow-builder-sidebar > .card,
.flow-sequence-card { border-color: var(--border-color); border-radius: 0.9rem; box-shadow: var(--shadow-card); overflow: hidden; }
.flow-builder-sidebar .card-body { padding: 1rem; }

.flow-panel-title { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; }
.flow-panel-title h3 { margin: 0; font-size: 0.9rem; font-weight: 750; }
.flow-panel-title small { display: block; margin-top: 0.1rem; color: var(--text-muted); font-size: 0.69rem; }
.flow-panel-icon { width: 2rem; height: 2rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 0.55rem; color: var(--brand-500); background: rgba(37, 99, 235, 0.1); }

.flow-settings-card .form-label,
.flow-step-editor .form-label { margin-bottom: 0.32rem; color: var(--text-secondary); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; }
.flow-settings-card .form-control,
.flow-settings-card .form-select,
.flow-step-editor .form-control,
.flow-step-editor .form-select { min-height: 2.55rem; border-radius: 0.55rem; }
.flow-step-editor textarea.form-control { min-height: 5.25rem; }
.flow-config-card { border-color: var(--border-color); border-radius: 0.75rem; background: var(--bg-card); box-shadow: none; }
.flow-config-card .card-body { padding: 0.85rem !important; }
.flow-config-card .flow-subsection-title { border-top: 0; padding-top: 0; }
.api-docs-search { max-width: 22rem; }
.api-doc-card { border-color: var(--border-color); border-radius: 0.75rem; }
.api-doc-curl { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.8rem; border: 1px solid var(--border-color); border-radius: 0.6rem; background: var(--bg-hover); }
.api-doc-curl code { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary); font-size: 0.72rem; line-height: 1.5; }
.api-doc-curl .btn { flex: 0 0 auto; }

.flow-active-box { margin: 0.4rem 0 1rem; padding: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--border-color); border-radius: 0.65rem; background: var(--bg-hover); }
.flow-active-box strong { display: block; font-size: 0.78rem; }
.flow-active-box small { display: block; color: var(--text-muted); font-size: 0.65rem; }
.flow-subsection-title { margin-top: 0.25rem; padding-top: 0.8rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-color); }
.flow-subsection-title > span { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); }
.flow-subsection-title .btn { min-height: auto; padding: 0.25rem; text-decoration: none; font-size: 0.7rem; }

.flow-variable-help { margin: 0.65rem 0 0.85rem; padding: 0.7rem; display: flex; align-items: flex-start; gap: 0.5rem; color: var(--text-secondary); background: color-mix(in srgb, var(--brand-500) 7%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--brand-500) 20%, var(--border-color)); border-radius: 0.65rem; font-size: 0.66rem; line-height: 1.45; }
.flow-variable-help > i { margin-top: 0.12rem; color: var(--brand-500); }
.flow-variable-help code { color: var(--brand-500); }
.flow-variable-group { margin-top: 0.85rem; }
.flow-variable-group-title { margin-bottom: 0.45rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.flow-variable-group-title > div:first-child { min-width: 0; }
.flow-variable-group-title span { display: block; color: var(--text-primary); font-size: 0.7rem; font-weight: 750; }
.flow-variable-group-title small { display: block; margin-top: 0.08rem; color: var(--text-muted); font-size: 0.59rem; }
.flow-variable-group-title .btn { min-height: 1.85rem; padding: 0.25rem 0.45rem; border-radius: 0.45rem; font-size: 0.61rem; }
.flow-variable-catalog { display: grid; gap: 0.4rem; }
.flow-variable-token { width: 100%; min-width: 0; padding: 0.48rem 0.55rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.42rem; text-align: left; color: var(--text-primary); background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: 0.55rem; }
.flow-variable-token:hover { border-color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 6%, var(--bg-card)); }
.flow-variable-token code { padding: 0.15rem 0.28rem; color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 10%, transparent); border-radius: 0.3rem; font-size: 0.61rem; white-space: nowrap; }
.flow-variable-token span { min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: 0.61rem; text-overflow: ellipsis; white-space: nowrap; }
.flow-variable-token small { color: var(--text-muted); font-size: 0.55rem; white-space: nowrap; }
.flow-variable-token > i { color: var(--brand-500); font-size: 0.57rem; }
.flow-variable-token > b { color: #f59e0b; font-size: 0.62rem; }
.flow-variable-token.has-duplicate { border-color: color-mix(in srgb, #f59e0b 48%, var(--border-color)); }
.flow-variable-token.is-system { grid-template-columns: auto minmax(0, 1fr) auto; }
.flow-variable-empty { padding: 0.65rem; color: var(--text-muted); background: var(--bg-hover); border: 1px dashed var(--border-color); border-radius: 0.55rem; font-size: 0.62rem; line-height: 1.4; }
.flow-variable-fixed { overflow: hidden; border: 1px solid var(--border-color); border-radius: 0.65rem; background: var(--bg-hover); }
.flow-variable-fixed-fields { padding: 0.55rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; }
.flow-variable-fixed-fields label { min-width: 0; margin: 0; color: var(--text-muted); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; }
.flow-variable-fixed-fields label:nth-child(1) { grid-column: 1; grid-row: 1; }
.flow-variable-fixed-fields label:nth-child(2) { grid-column: 1; grid-row: 2; }
.flow-variable-fixed-fields .form-control { width: 100%; min-width: 0; margin-top: 0.25rem; text-transform: none; }
.flow-variable-fixed-fields .btn { grid-column: 2; grid-row: 1 / span 2; width: 2.2rem; height: 2.2rem; padding: 0; }
.flow-variable-use { width: 100%; padding: 0.42rem 0.58rem; display: flex; align-items: center; gap: 0.4rem; color: var(--text-secondary); background: var(--bg-card); border: 0; border-top: 1px solid var(--border-color); font-size: 0.6rem; }
.flow-variable-use:hover { color: var(--brand-500); }
.flow-variable-use code { color: var(--brand-500); }
.flow-variable-use i { margin-left: auto; }

.flow-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.flow-library-item { min-width: 0; min-height: 4rem; padding: 0.7rem; display: flex; align-items: flex-start; gap: 0.6rem; text-align: left; color: var(--text-primary); background: var(--bg-body); border: 1px solid var(--border-color); border-radius: 0.65rem; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.flow-library-item:hover { border-color: var(--brand-500); background: var(--bg-hover); transform: translateY(-1px); }
.flow-library-item > i { width: 1rem; margin-top: 0.12rem; color: var(--brand-500); text-align: center; }
.flow-library-item span { min-width: 0; }
.flow-library-item strong { display: block; font-size: 0.72rem; line-height: 1.2; }
.flow-library-item small { display: block; margin-top: 0.18rem; color: var(--text-muted); font-size: 0.6rem; line-height: 1.25; }

.flow-sequence-card { min-height: 42rem; background: var(--bg-card); }
.flow-sequence-head { min-height: 4.75rem; padding: 0.9rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border-color); }
.flow-sequence-head .badge { margin-left: 0.25rem; color: var(--brand-500); background: rgba(37, 99, 235, 0.12); }
.flow-drag-status { flex: 0 0 auto; padding: 0.45rem 0.7rem; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 999px; font-size: 0.68rem; }
.flow-drag-status i { margin-right: 0.3rem; color: var(--brand-500); }
.flow-sequence-canvas { min-height: 37rem; padding: 1.5rem clamp(0.75rem, 2.5vw, 2rem) 3rem; background-color: var(--bg-body); background-image: radial-gradient(circle, var(--border-light) 1px, transparent 1.15px); background-size: 22px 22px; overflow: hidden; }
#flowStepsList { width: min(100%, 62rem); margin: 0 auto; }

.flow-empty-state { min-height: 23rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; color: var(--text-muted); text-align: center; }
.flow-empty-state i { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; margin-bottom: 0.25rem; color: var(--brand-500); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0.9rem; box-shadow: var(--shadow-card); font-size: 1.2rem; }
.flow-empty-state strong { color: var(--text-primary); font-size: 0.9rem; }
.flow-empty-state span { font-size: 0.72rem; }

.flow-timeline { position: relative; padding-left: 3.25rem; }
.flow-timeline::before { content: ""; position: absolute; top: 1.5rem; bottom: 1.5rem; left: 1.45rem; width: 2px; background: var(--border-light); }
.flow-step-card { position: relative; margin-bottom: 1rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0.85rem; box-shadow: var(--shadow-card); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.flow-step-card:hover { border-color: var(--border-light); }
.flow-step-card.is-selected { border-color: rgba(37, 99, 235, 0.55); box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12); }
.flow-step-card.is-dragging { opacity: .45; transform: scale(.99); }
.flow-step-card.is-drag-over { border-color: var(--brand-500); transform: translateY(3px); }
.flow-step-node { position: absolute; z-index: 1; top: 1rem; left: -3.25rem; width: 2.9rem; height: 2.9rem; display: grid; place-items: center; color: #fff; background: #0f172a; border: 4px solid var(--bg-body); border-radius: 0.8rem; font-size: 0.78rem; }
.flow-step-head { min-height: 4.65rem; padding: 0.8rem; display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.flow-step-grip { align-self: stretch; width: 1rem; display: grid; place-items: center; color: var(--text-muted); cursor: grab; }
.flow-step-grip:active { cursor: grabbing; }
.flow-step-heading { flex: 1 1 auto; min-width: 0; }
.flow-step-heading > div { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.22rem; }
.flow-type-pill { padding: 0.22rem 0.45rem; color: var(--brand-500); background: rgba(37, 99, 235, 0.1); border-radius: 0.35rem; font-size: 0.58rem; font-weight: 800; text-transform: uppercase; }
.flow-block-number { color: var(--text-muted); font-size: 0.63rem; }
.flow-step-heading strong { display: block; overflow: hidden; color: var(--text-primary); font-size: 0.82rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.flow-step-heading small { display: block; margin-top: 0.18rem; color: var(--text-muted); font-size: 0.62rem; }
.flow-step-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.15rem; }
.flow-step-actions button { width: 2rem; height: 2rem; padding: 0; display: grid; place-items: center; color: var(--text-secondary); background: transparent; border: 0; border-radius: 0.45rem; font-size: 0.7rem; }
.flow-step-actions button:hover:not(:disabled) { color: var(--brand-500); background: rgba(37, 99, 235, 0.1); }
.flow-step-actions button.is-danger:hover { color: var(--danger-500); background: rgba(239, 68, 68, 0.1); }
.flow-step-actions button:disabled { opacity: .28; }
.flow-step-editor { padding: 1rem 1.1rem 1.15rem; border-top: 1px solid var(--border-color); background: var(--bg-hover); border-radius: 0 0 0.85rem 0.85rem; }
.flow-step-editor .border.rounded { border-color: var(--border-color) !important; background: var(--bg-card); }
.flow-choice-head { grid-template-columns: 3fr 3fr 4fr 2fr; gap: 0.5rem; padding: 0 0.55rem 0.35rem; color: var(--text-muted); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.035em; text-transform: uppercase; }
.flow-editor-tip { padding: 0.75rem; display: flex; align-items: flex-start; gap: 0.55rem; color: var(--text-secondary); background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.18); border-radius: 0.6rem; font-size: 0.68rem; line-height: 1.5; }
.flow-editor-tip i { margin-top: 0.12rem; color: var(--brand-500); }

/* AI flow generator modal */
.flow-ai-modal-content { overflow: hidden; border-radius: 1rem; }
.flow-ai-modal-content .modal-header { padding: 1rem 1.15rem; }
.flow-ai-modal-content .modal-body { padding: 1.15rem; }
.flow-ai-modal-icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); border-radius: 0.75rem; box-shadow: 0 8px 20px rgba(37, 99, 235, .22); }
.flow-ai-modal-content textarea { min-height: 10rem; padding: 0.85rem; resize: vertical; border-radius: 0.7rem; line-height: 1.55; }
.flow-ai-guide { margin-top: 1rem; padding: 0.9rem; background: rgba(37, 99, 235, .07); border: 1px solid rgba(37, 99, 235, .17); border-radius: 0.75rem; }
.flow-ai-guide h6 { margin: 0 0 0.7rem; font-size: 0.78rem; }
.flow-ai-guide h6 i { margin-right: 0.35rem; color: #f59e0b; }
.flow-ai-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.flow-ai-guide-grid span { color: var(--text-secondary); font-size: 0.66rem; line-height: 1.4; }
.flow-ai-guide-grid strong { display: block; margin-bottom: 0.18rem; color: var(--text-primary); font-size: 0.69rem; }
.flow-ai-examples { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.flow-ai-examples button { min-height: 2.25rem; padding: 0.42rem 0.65rem; color: var(--text-secondary); background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: 999px; font-size: 0.68rem; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.flow-ai-examples button:hover { color: var(--brand-500); border-color: var(--brand-500); background: rgba(37, 99, 235, .08); }
.flow-ai-examples button i { margin-right: 0.3rem; }
.flow-ai-progress { min-height: 20rem; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; text-align: center; }
.flow-ai-progress-icon { width: 4.25rem; height: 4.25rem; display: grid; place-items: center; margin-bottom: 1rem; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); border-radius: 1.25rem; box-shadow: 0 12px 34px rgba(37, 99, 235, .24); font-size: 1.45rem; animation: flowAiPulse 1.8s ease-in-out infinite; }
.flow-ai-progress h6 { margin-bottom: 0.35rem; font-size: 1rem; }
.flow-ai-progress p { margin-bottom: 1.15rem; color: var(--text-secondary); font-size: 0.78rem; }
.flow-ai-progress .progress { width: min(100%, 31rem); height: 1rem; margin-bottom: 0.7rem; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 999px; }
.flow-ai-progress .progress-bar { min-width: 2.2rem; border-radius: 999px; font-size: 0.6rem; font-weight: 700; transition: width .45s ease; }
.flow-ai-progress > small { color: var(--text-muted); font-size: 0.66rem; }
@keyframes flowAiPulse { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.04); } }

.instance-flow-binding { margin: 0.85rem 0; padding: 0.8rem; background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: 0.7rem; }
.instance-flow-binding label { display: block; margin-bottom: 0.42rem; color: var(--text-secondary); font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .025em; }
.instance-flow-binding label i { margin-right: 0.35rem; color: var(--brand-500); }
.instance-flow-binding .form-select { min-height: 2.55rem; border-radius: 0.55rem; }
.instance-flow-binding small { display: block; margin-top: 0.38rem; color: var(--text-muted); font-size: 0.62rem; }

@media (max-width: 1199.98px) {
  .flow-builder-layout { grid-template-columns: 1fr; }
  .flow-builder-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .flow-builder-toolbar { align-items: flex-start; }
  .flow-builder-heading .small { display: none; }
  .flow-builder-sidebar { grid-template-columns: 1fr; }
  .flow-sequence-head { align-items: flex-start; }
  .flow-drag-status { display: none; }
  .flow-sequence-canvas { padding: 1rem 0.55rem 2rem; }
  .flow-timeline { padding-left: 2.65rem; }
  .flow-timeline::before { left: 1.15rem; }
  .flow-step-node { left: -2.65rem; width: 2.3rem; height: 2.3rem; border-width: 3px; border-radius: 0.65rem; }
  .flow-step-head { align-items: flex-start; padding: 0.7rem; }
  .flow-step-grip { display: none; }
  .flow-step-actions button[data-step-move] { display: none; }
  .flow-step-heading strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .flow-step-editor { padding: 0.85rem; }
  .flow-ai-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-ai-examples { display: grid; grid-template-columns: 1fr; }
  .flow-ai-examples button { border-radius: 0.6rem; text-align: left; }
}
.flow-step-timing{padding:14px;border:1px solid var(--border-color);border-radius:12px;background:color-mix(in srgb,var(--bg-card) 82%,var(--bg-hover))}
.flow-timing-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}.flow-timing-toggle span{display:flex;min-width:0;flex-direction:column}.flow-timing-toggle small{color:var(--text-muted,#718096);font-size:.75rem}.flow-timing-toggle .form-check-input{flex:0 0 auto;margin:0}
.input-group.flow-reset-time-group>.flow-reset-time-unit{width:8.5rem;min-width:8.5rem;max-width:8.5rem;flex:0 0 8.5rem;padding-right:2.25rem;background-color:var(--bg-input);color:var(--text-primary)}
@media(max-width:420px){.input-group.flow-reset-time-group>.flow-reset-time-unit{width:7.25rem;min-width:7.25rem;max-width:7.25rem;flex-basis:7.25rem}}
.flow-polish-loading{padding:2.5rem 1rem;text-align:center}.flow-polish-loading .flow-ai-progress-icon{margin:0 auto 1rem}.flow-polish-loading .progress{max-width:36rem;margin:1rem auto 0}
.flow-polish-changes{display:grid;gap:1rem}.flow-polish-change{overflow:hidden;border:1px solid var(--border-color);border-radius:.8rem;background:var(--bg-card)}.flow-polish-change header{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--border-color);background:var(--bg-hover)}.flow-polish-change header small{margin-left:auto;color:var(--text-muted)}.flow-polish-compare{display:grid;grid-template-columns:1fr 1fr}.flow-polish-compare>div{min-width:0;padding:.9rem}.flow-polish-compare>div+div{border-left:1px solid var(--border-color)}.flow-polish-compare span{display:block;margin-bottom:.45rem;color:var(--text-muted);font-size:.72rem;font-weight:700;text-transform:uppercase}.flow-polish-compare p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.flow-polish-compare .is-after{background:color-mix(in srgb,var(--success-500) 7%,var(--bg-card))}
.flow-polish-edit{min-height:7.25rem;resize:vertical;line-height:1.55;background:var(--bg-input);color:var(--text-primary)}
.flow-persona-box{padding:.85rem;border:1px solid color-mix(in srgb,var(--brand-500) 28%,var(--border-color));border-radius:.75rem;background:color-mix(in srgb,var(--brand-500) 7%,var(--bg-card))}.flow-persona-box>div:first-child{color:var(--brand-500)}
@media(max-width:767px){.flow-polish-compare{grid-template-columns:1fr}.flow-polish-compare>div+div{border-top:1px solid var(--border-color);border-left:0}}
.pwa-notification-btn{position:relative}.pwa-notification-btn .pwa-notification-dot{position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:#94a3b8;border:1px solid var(--bs-body-bg)}.pwa-notification-btn.is-enabled{color:#2563eb;border-color:#2563eb}.pwa-notification-btn.is-enabled .pwa-notification-dot{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.14)}

/* Responsive system layer -------------------------------------------------
   This block intentionally comes last. It consolidates the page-specific
   rules above and prevents cards, tables and the conversation workspace from
   competing for viewport width on tablets and phones. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

.main-panel,
.content-panel,
.page-section,
.card,
.card-body,
.row > *,
.topbar > *,
.settings-content {
  min-width: 0;
}

.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.table-responsive > table { margin-bottom: 0; }
.card-header,
.card-footer { min-width: 0; }
.card-header > .d-flex,
.card-footer > .d-flex { min-width: 0; flex-wrap: wrap; }
.form-control,
.form-select,
.input-group { max-width: 100%; }
.dropdown-menu { max-width: calc(100vw - 1rem); }
.pagination { flex-wrap: wrap; }
.leads-pagination-controls { flex-wrap: nowrap; margin-left: auto; }
#leadsPerPage { width: 11.5rem; }
#leadsPagination { flex-wrap: nowrap; margin: 0; }
#leadsPagination .page-item { flex: 0 0 auto; }
#leadsPagination .page-link { min-width: 2rem; text-align: center; }

@media (max-width: 575.98px) {
  .leads-pagination-controls { width: 100%; justify-content: space-between; margin-left: 0; }
  #leadsPerPage { width: 10rem; }
}

@media (max-width: 1199.98px) {
  .content-panel { padding: 1rem; }
  .conversations-workspace { grid-template-columns: minmax(17.5rem, 20rem) minmax(0, 1fr); }
  .conversation-header { gap: 0.5rem; padding-inline: 0.8rem; }
  .conversation-header > .min-w-0 { flex: 1 1 10rem; }
  #conversationInstanceLabel { display: none; }
  .flow-builder-toolbar { flex-wrap: wrap; }
  .flow-builder-toolbar > .d-flex { flex-wrap: wrap; }
}

@media (max-width: 991.98px) {
  body.sidebar-open { overflow: hidden; }
  .sidebar-panel {
    width: min(19rem, 86vw);
    height: 100dvh;
    overscroll-behavior: contain;
    box-shadow: 0 1rem 3rem rgba(2, 8, 23, 0.28);
  }
  .main-panel { width: 100%; min-height: 100dvh; }
  .topbar { padding-inline: 1rem; }
  .topbar > .d-flex:first-child { flex: 1 1 auto; min-width: 0; }
  .topbar > .d-flex:last-child { flex: 0 0 auto; }
  .topbar-title,
  .topbar-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .instances-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conversation-bubble { max-width: min(84%, 38rem); }
  .settings-layout { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1rem; }
  .flow-ai-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  :root { --app-header-height: 4.25rem; }

  .topbar {
    min-height: var(--app-header-height);
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
  }
  .topbar > .d-flex:first-child { gap: 0.55rem !important; }
  .topbar > .d-flex:last-child { gap: 0.3rem !important; }
  .topbar-title { font-size: 0.88rem; }
  .topbar-subtitle { max-width: 46vw; font-size: 0.68rem; }
  .topbar .btn,
  .topbar .theme-toggle { flex: 0 0 var(--control-height-sm); padding-inline: 0; }

  .content-panel { padding: 0.75rem; }
  .page-section-footer { padding: 1rem 0.75rem; }
  .card-body.p-4 { padding: 1rem !important; }
  .card-header,
  .card-footer { padding-inline: 1rem; }

  .instances-grid { grid-template-columns: 1fr; }
  .instance-head,
  .cloud-connection-head,
  .lookup-instance-panel-head,
  .settings-page-head { align-items: stretch; flex-direction: column; }
  .instance-head-actions,
  .cloud-page-actions,
  .cloud-card-actions { width: 100%; flex-wrap: wrap; }
  .instance-head-actions .btn,
  .cloud-page-actions .btn,
  .cloud-card-actions .btn { flex: 1 1 auto; }
  .instance-meta,
  .instance-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .table-responsive > table { min-width: 44rem; }
  .table-responsive > table.table-sm { min-width: 40rem; }
  .dataTables_wrapper .row { row-gap: 0.65rem; }
  .dataTables_wrapper [class*="col-"] { width: 100%; text-align: left !important; }
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length { float: none; text-align: left; }
  .dataTables_wrapper .dataTables_filter input { width: min(100%, 16rem); margin-left: 0.35rem; }
  .dataTables_wrapper .dataTables_paginate { display: flex; justify-content: flex-start; overflow-x: auto; }
  .btn-group { max-width: 100%; }
  td .btn-group { flex-wrap: nowrap; white-space: nowrap; }

  .modal-dialog,
  .modal-dialog.modal-sm,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    width: auto;
    max-width: none;
    margin: 0.5rem;
  }
  .modal-content { max-height: calc(100dvh - 1rem); border-radius: 0.8rem; }
  .modal-header,
  .modal-footer { padding: 0.75rem; }
  .modal-body { padding: 0.9rem; overflow-y: auto; overscroll-behavior: contain; }
  .modal-footer { flex-wrap: wrap; gap: 0.45rem; }
  [id^="nexia-"].modal-backdrop { padding: 0.5rem; }
  [id^="nexia-"].modal-backdrop > .modal,
  [id^="nexia-"].modal-backdrop > .modal.modal-sm,
  [id^="nexia-"].modal-backdrop > .modal.modal-lg,
  [id^="nexia-"].modal-backdrop > .modal.modal-xl {
    max-width: 100%;
    max-height: calc(100dvh - 1rem);
  }

  .settings-layout { grid-template-columns: 1fr; gap: 0.75rem; }
  .settings-subnav {
    position: static;
    display: flex;
    gap: 0.4rem;
    margin-inline: -0.75rem;
    padding: 0.25rem 0.75rem 0.65rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    border-radius: 0.8rem;
  }
  .settings-subnav-label {
    display: flex;
    align-items: center;
    min-height: 2.35rem;
    margin: 0 0.2rem 0 0;
    padding: 0 0.7rem 0 0.25rem;
    border-top: 0;
    border-right: 1px solid var(--border-color);
    font-size: 0.62rem;
    white-space: nowrap;
  }
  .settings-subnav-item {
    width: auto;
    min-width: max-content;
    flex: 0 0 auto;
    padding-inline: 0.75rem;
    background: var(--bg-card);
    border-color: var(--border-color);
  }
  .quick-reply-search { width: 100%; }
  .quick-reply-item { align-items: flex-start; flex-wrap: wrap; gap: 0.65rem; }
  .quick-reply-actions { width: 100%; justify-content: flex-end; }
  .ai-provider-grid { grid-template-columns: 1fr; }

  .flow-builder-toolbar { align-items: stretch; flex-direction: column; }
  .flow-builder-toolbar > .d-flex { width: 100%; }
  .flow-builder-toolbar > .d-flex .btn { flex: 1 1 auto; }
  .flow-builder-heading { width: 100%; }
  .flow-builder-heading h2 { white-space: normal; }
  .flow-sequence-head { min-height: auto; padding: 0.8rem; }
  .flow-panel-title { min-width: 0; }
  .flow-panel-title > div { min-width: 0; }
  .flow-choice-head { display: none !important; }
  .flow-ai-modal-content textarea { min-height: 8rem; }
  .flow-polish-change header { align-items: flex-start; flex-wrap: wrap; }
  .flow-polish-change header small { width: 100%; margin-left: 0; }

  /* Conversations behave as a native two-screen mobile workspace. */
  .dashboard-body.conversations-mode { height: 100dvh; min-height: 100dvh; overflow: hidden; }
  .dashboard-body.conversations-mode .app-shell,
  .dashboard-body.conversations-mode .main-panel { height: 100dvh; min-height: 0; }
  .dashboard-body.conversations-mode .topbar { flex: 0 0 var(--app-header-height); }
  .dashboard-body.conversations-mode .content-panel {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    padding: 0.45rem;
    overflow: hidden;
  }
  #conversationsSection,
  #conversationsSection .conversations-workspace { width: 100%; height: 100%; min-height: 0; }
  #conversationsSection .conversations-workspace { display: block; border-radius: 0.65rem; }
  .conversations-sidebar { width: 100%; height: 100%; max-height: none; padding: 0.75rem; border: 0; }
  .conversations-sidebar-head { margin-bottom: 0.7rem; }
  .conversations-list { height: 0; min-height: 0; }
  .conversation-list-item { padding: 0.65rem; }
  .conversation-panel { display: none; width: 100%; height: 100%; min-height: 0; }
  .conversations-workspace.has-selection .conversations-sidebar { display: none; }
  .conversations-workspace.has-selection .conversation-panel { display: block; }
  .conversation-open { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
  .conversation-header {
    min-height: auto;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem;
  }
  .conversation-back { display: inline-flex; }
  .conversation-avatar { width: 2.35rem; height: 2.35rem; }
  .conversation-header > .min-w-0 { flex: 1 1 calc(100% - 7.5rem); }
  .conversation-header > .btn,
  .conversation-header .conversation-bot-toggle { flex: 0 0 auto; margin-left: 0 !important; }
  #conversationLoadOlderBtn { margin-left: 0 !important; }
  #conversationInstanceLabel { display: none; }
  .conversation-messages { padding: 0.75rem 0.5rem; scroll-padding-top: 2.7rem; }
  .conversation-message-row { margin-bottom: 0.5rem; }
  .conversation-bubble { max-width: 94%; padding: 0.58rem 0.68rem 0.4rem; }
  .conversation-media-image,
  .conversation-media-video { width: auto; max-width: 100%; height: auto; max-height: 56dvh; object-fit: contain; }
  .conversation-media-sticker { max-width: min(11rem, 52vw); }
  .conversation-audio-player { width: min(19rem, 78vw); max-width: 100%; gap: 0.4rem; }
  .conversation-media-unavailable { min-width: 0; max-width: 100%; }
  .conversation-composer { gap: 0.35rem; padding: 0.5rem; }
  .conversation-composer textarea { min-width: 0; padding-inline: 0.7rem; }
  .conversation-composer .btn { width: 2.55rem; height: 2.55rem; }
  .conversation-quick-replies { left: 0.5rem; right: 0.5rem; max-height: min(20rem, 48dvh); }
  .conversation-attachment-preview { padding: 0.4rem 0.55rem; }
  .conversation-attachment-preview > :not(.btn) { min-width: 0; overflow-wrap: anywhere; }
  .conversation-attach-menu { left: 0.5rem; bottom: 4.1rem; width: min(13rem, calc(100vw - 1rem)); }
  .conversation-recorder { min-width: 0; }
  .conversation-recorder-wave { min-width: 3rem; }
  #conversationComposerInfo { padding: 0 0.55rem 0.45rem !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conversation-global-toast { right: 0.65rem; bottom: 0.65rem; width: calc(100vw - 1.3rem); }
  .conversation-lightbox-toolbar { top: 0.5rem; right: 0.5rem; max-width: calc(100vw - 1rem); }
  .conversation-lightbox-stage { padding: 4.25rem 0.5rem 0.5rem; }
  .conversation-lightbox-stage img { max-width: 100%; max-height: calc(100dvh - 5rem); }
}

@media (max-width: 575.98px) {
  .content-panel { padding: 0.6rem; }
  .card { border-radius: 0.72rem; }
  .card-body { overflow-wrap: anywhere; }
  .card-body.p-3,
  .card-body.p-4 { padding: 0.85rem !important; }
  .metric-card { min-height: auto; }
  .instance-meta,
  .instance-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-library-grid { grid-template-columns: 1fr; }
  .flow-timeline { padding-left: 0; }
  .flow-timeline::before,
  .flow-step-node { display: none; }
  .flow-step-head { min-height: auto; flex-wrap: wrap; }
  .flow-step-heading { flex-basis: calc(100% - 4rem); }
  .flow-step-actions { margin-left: auto; }
  .flow-step-editor { padding: 0.7rem; }
  .flow-ai-guide-grid { grid-template-columns: 1fr; }
  .flow-variable-fixed-fields { grid-template-columns: minmax(0, 1fr) auto; }
  .flow-persona-box .d-flex.justify-content-between { align-items: stretch !important; flex-direction: column; }
  .flow-persona-box .btn { width: 100%; }
  .settings-page-head { gap: 0.65rem; }
  .settings-page-head > .d-flex { width: 100%; flex-wrap: wrap; }
  .settings-page-head .btn { flex: 1 1 auto; }
  .modal-footer .btn { flex: 1 1 auto; }
  .table-responsive > table { min-width: 38rem; }
  .conversation-audio-avatar { width: 2.1rem; height: 2.1rem; flex-basis: 2.1rem; }
  .conversation-message-text { font-size: 0.9rem; }
}

@media (max-width: 420px) {
  .topbar { padding-inline: 0.5rem; }
  .topbar-subtitle { display: none; }
  .content-panel { padding: 0.5rem; }
  .instance-kpis { grid-template-columns: 1fr 1fr; }
  .conversation-header { padding: 0.4rem; }
  .conversation-header > .min-w-0 { flex-basis: calc(100% - 6.8rem); }
  .conversation-header > .btn { width: 2.1rem; min-width: 2.1rem; padding: 0; }
  .conversation-bot-toggle-track { width: 2.35rem; min-height: 2rem; }
  .conversation-messages { padding-inline: 0.35rem; }
  .conversation-bubble { max-width: 96%; }
  .conversation-audio-player { width: min(17rem, 82vw); }
  .conversation-audio-avatar { display: none; }
  .conversation-recorder-wave span:nth-child(-n+18) { display: none; }
  .conversation-global-toast { grid-template-columns: auto minmax(0, 1fr); }
  .conversation-global-toast > :last-child { display: none; }
  .quick-reply-actions .btn { flex: 1 1 auto; width: auto; }
}

/* Installed/mobile devices: account for notches and keep touch targets usable. */
@supports (padding: max(0px)) {
  .sidebar-panel {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .topbar {
    padding-top: max(0.55rem, env(safe-area-inset-top));
    padding-right: max(0.7rem, env(safe-area-inset-right));
    padding-left: max(0.7rem, env(safe-area-inset-left));
  }
  @media (max-width: 767.98px) {
    .conversation-composer {
      padding-right: max(0.5rem, env(safe-area-inset-right));
      padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
      padding-left: max(0.5rem, env(safe-area-inset-left));
    }
  }
}

@media (pointer: coarse) {
  button,
  .btn,
  .sidebar-link,
  .settings-subnav-item,
  .form-control,
  .form-select {
    min-height: 2.625rem;
  }
  .btn-sm,
  .form-control-sm,
  .form-select-sm,
  .input-group-sm > .form-control,
  .input-group-sm > .form-select,
  .input-group-sm > .btn {
    min-height: 2.5rem;
  }
}

/* Multi SMS -------------------------------------------------------------- */
#smsSection,
#smsSettingsPanel {
  --sms-blue: #2563eb;
  --sms-blue-dark: #1d4ed8;
  --sms-cyan: #06b6d4;
  --sms-soft: color-mix(in srgb, var(--sms-blue) 9%, var(--bg-card));
}

.sms-shell { width: 100%; max-width: 96rem; margin: 0 auto; }
.sms-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 11rem;
  padding: 2rem 2.25rem;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% -40%, rgba(34,211,238,.42), transparent 42%),
    linear-gradient(125deg, #172554 0%, #1d4ed8 58%, #0e7490 120%);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 1.15rem;
  box-shadow: 0 1.2rem 3rem rgba(15, 23, 42, .18);
}
.sms-hero::after {
  content: "";
  position: absolute;
  right: 21%;
  bottom: -6rem;
  width: 17rem;
  height: 17rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 2.8rem rgba(255,255,255,.035), 0 0 0 5.6rem rgba(255,255,255,.025);
}
.sms-hero-copy { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.sms-product-mark { display: grid; width: 4.25rem; height: 4.25rem; flex: 0 0 4.25rem; place-items: center; font-size: 1.65rem; color: #fff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); border-radius: 1.15rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.sms-eyebrow { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; color: #bfdbfe; font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.sms-eyebrow span { width: .42rem; height: .42rem; background: #67e8f9; border-radius: 50%; box-shadow: 0 0 0 .25rem rgba(103,232,249,.13); }
.sms-hero h2 { margin: 0 0 .35rem; color: #fff; font-size: clamp(1.55rem, 2.1vw, 2.2rem); font-weight: 800; letter-spacing: -.045em; }
.sms-hero p { max-width: 42rem; margin: 0; color: rgba(239,246,255,.76); font-size: .9rem; line-height: 1.55; }
.sms-hero-actions { position: relative; z-index: 1; display: flex; gap: .65rem; }
.sms-action-button { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: 0 .9rem; color: rgba(255,255,255,.84); background: rgba(15,23,42,.2); border: 1px solid rgba(255,255,255,.18); border-radius: .7rem; font-size: .78rem; font-weight: 700; backdrop-filter: blur(8px); transition: .18s ease; }
.sms-action-button:hover, .sms-action-button.is-active { color: #fff; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.32); transform: translateY(-1px); }

.sms-view-nav { display: inline-flex; gap: .35rem; margin: 1rem 0 1.25rem; padding: .35rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .85rem; box-shadow: var(--shadow-card); }
.sms-view-tab { display: flex; align-items: center; gap: .5rem; min-height: 2.55rem; padding: 0 1rem; color: var(--text-muted); background: transparent; border: 0; border-radius: .62rem; font-size: .78rem; font-weight: 700; transition: .18s ease; }
.sms-view-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.sms-view-tab.is-active { color: #fff; background: var(--sms-blue); box-shadow: 0 .35rem .85rem rgba(37,99,235,.22); }
.sms-view-tab i { font-size: .8rem; }
.sms-workspace { min-height: 25rem; }

.sms-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.1rem; }
.sms-section-heading h3 { margin: .18rem 0 .25rem; font-size: clamp(1.2rem, 1.7vw, 1.55rem); font-weight: 750; letter-spacing: -.03em; }
.sms-section-heading p { margin: 0; color: var(--text-muted); font-size: .82rem; }
.sms-step-label { color: var(--sms-blue); font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.sms-limit-pill, .sms-provider-status { display: inline-flex; align-items: center; gap: .5rem; padding: .48rem .7rem; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 999px; font-size: .7rem; font-weight: 650; white-space: nowrap; }
.sms-provider-status i { width: .45rem; height: .45rem; background: var(--warning-500); border-radius: 50%; }
.sms-provider-status.is-connected i { background: var(--success-500); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--success-500) 15%, transparent); }

.sms-compose-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); gap: 1rem; align-items: stretch; }
.sms-panel { position: relative; padding: 1.4rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 1rem; box-shadow: var(--shadow-card); }
.sms-composer-panel { display: flex; flex-direction: column; }
.sms-panel-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.25rem; }
.sms-panel-head > div:nth-child(2), .sms-panel-head > div:first-child:not(.sms-panel-icon) { min-width: 0; }
.sms-panel-head h4, .sms-library-head h4, .sms-history-head h4, .sms-webhook-panel h4 { margin: 0 0 .2rem; color: var(--text-primary); font-size: .95rem; font-weight: 750; }
.sms-panel-head p, .sms-library-head p, .sms-history-head p { margin: 0; color: var(--text-muted); font-size: .72rem; }
.sms-panel-icon { display: grid; width: 2.45rem; height: 2.45rem; flex: 0 0 2.45rem; place-items: center; color: var(--sms-blue); background: var(--sms-soft); border: 1px solid color-mix(in srgb, var(--sms-blue) 15%, var(--border-color)); border-radius: .72rem; }
.sms-panel-number { position: absolute; top: 1.2rem; right: 1.25rem; color: color-mix(in srgb, var(--text-muted) 34%, transparent); font-size: 1.8rem; font-weight: 800; letter-spacing: -.06em; }

.sms-field { margin-bottom: 1rem; }
.sms-field label { display: block; margin-bottom: .42rem; color: var(--text-secondary); font-size: .72rem; font-weight: 700; }
.sms-field label b { color: #ef4444; }
.sms-field small { display: block; margin-top: .35rem; color: var(--text-muted); font-size: .66rem; }
.sms-field .form-control, .sms-field .form-select, .sms-secret-input .form-control { min-height: 2.85rem; padding: .65rem .8rem; background: var(--bg-input); border-color: var(--border-color); border-radius: .68rem; color: var(--text-primary); font-size: .8rem; }
.sms-field .form-control:focus, .sms-field .form-select:focus, .sms-secret-input .form-control:focus { border-color: color-mix(in srgb, var(--sms-blue) 70%, white); box-shadow: 0 0 0 .2rem rgba(37,99,235,.1); }
.sms-message-input { resize: vertical; line-height: 1.55; }
.sms-input-with-icon { position: relative; }
.sms-input-with-icon > i { position: absolute; z-index: 1; top: 50%; left: .85rem; color: var(--text-muted); font-size: .85rem; transform: translateY(-50%); }
.sms-input-with-icon .form-control { padding-left: 2.35rem; }
.sms-label-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sms-label-row span { color: var(--text-muted); font-size: .65rem; font-variant-numeric: tabular-nums; }
.sms-schedule-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.sms-primary-button { display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 2.9rem; margin-top: auto; color: #fff; background: var(--sms-blue); border: 1px solid var(--sms-blue); border-radius: .7rem; font-size: .78rem; font-weight: 750; box-shadow: 0 .45rem 1rem rgba(37,99,235,.18); }
.sms-primary-button:hover { color: #fff; background: var(--sms-blue-dark); border-color: var(--sms-blue-dark); transform: translateY(-1px); }
.sms-secondary-button { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.8rem; color: var(--sms-blue); background: var(--sms-soft); border: 1px solid color-mix(in srgb, var(--sms-blue) 20%, var(--border-color)); border-radius: .7rem; font-size: .77rem; font-weight: 750; }
.sms-secondary-button:hover { color: #fff; background: var(--sms-blue); }

.sms-preview-panel { display: flex; flex-direction: column; align-items: center; min-height: 31rem; padding: 1.25rem; background: color-mix(in srgb, var(--bg-card) 72%, var(--bg-body)); border: 1px solid var(--border-color); border-radius: 1rem; overflow: hidden; }
.sms-preview-label { align-self: flex-start; display: flex; align-items: center; gap: .45rem; color: var(--text-muted); font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.sms-phone-frame { width: min(14rem, 86%); margin: 1.2rem auto; padding: .38rem; background: #111827; border: 1px solid #334155; border-radius: 1.8rem; box-shadow: 0 1.2rem 2.2rem rgba(2,6,23,.23); }
.sms-phone-speaker { width: 3.5rem; height: .28rem; margin: .35rem auto .28rem; background: #334155; border-radius: 999px; }
.sms-phone-screen { min-height: 23rem; padding: .65rem .7rem; color: #172033; background: #edf4fb; border-radius: 1.35rem; }
.sms-phone-top { display: flex; justify-content: space-between; padding: 0 .15rem .65rem; font-size: .55rem; font-weight: 700; }
.sms-phone-contact { display: flex; align-items: center; gap: .5rem; margin: 0 -.7rem 1rem; padding: .55rem .75rem; background: rgba(255,255,255,.86); border-bottom: 1px solid #dbe4ee; }
.sms-phone-contact > div { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; color: #fff; background: var(--sms-blue); border-radius: 50%; }
.sms-phone-contact span { display: flex; flex-direction: column; }
.sms-phone-contact strong { font-size: .65rem; }
.sms-phone-contact small { color: #718096; font-size: .5rem; }
.sms-preview-bubble { max-width: 90%; padding: .65rem .7rem; overflow-wrap: anywhere; white-space: pre-wrap; background: #fff; border-radius: .78rem .78rem .78rem .2rem; box-shadow: 0 .12rem .35rem rgba(15,23,42,.08); font-size: .65rem; line-height: 1.45; }
.sms-preview-time { margin: .28rem 0 0 .25rem; color: #94a3b8; font-size: .48rem; }
.sms-preview-note { display: flex; align-items: flex-start; gap: .5rem; max-width: 18rem; margin-top: auto; color: var(--text-muted); font-size: .63rem; line-height: 1.45; }
.sms-preview-note i { margin-top: .08rem; color: var(--sms-blue); }

.sms-mass-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sms-file-drop { display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 12rem; margin-bottom: .9rem; padding: 1rem; text-align: center; background: color-mix(in srgb, var(--sms-blue) 3%, var(--bg-input)); border: 1.5px dashed color-mix(in srgb, var(--sms-blue) 35%, var(--border-color)); border-radius: .85rem; cursor: pointer; transition: .18s ease; }
.sms-file-drop:hover, .sms-file-drop.has-file { background: var(--sms-soft); border-color: var(--sms-blue); }
.sms-file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sms-file-icon { display: grid; width: 2.8rem; height: 2.8rem; margin-bottom: .6rem; place-items: center; color: var(--sms-blue); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .8rem; font-size: 1rem; }
.sms-file-drop strong { color: var(--text-primary); font-size: .8rem; }
.sms-file-drop small { max-width: 24rem; margin: .25rem 0 .7rem; color: var(--text-muted); font-size: .64rem; }
.sms-file-button { padding: .38rem .7rem; color: var(--sms-blue); background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--sms-blue) 25%, var(--border-color)); border-radius: .5rem; font-size: .68rem; font-weight: 700; }
.sms-or-divider { display: flex; align-items: center; gap: .75rem; margin: .7rem 0; color: var(--text-muted); font-size: .62rem; text-transform: uppercase; }
.sms-or-divider::before, .sms-or-divider::after { content: ""; height: 1px; flex: 1; background: var(--border-color); }
.sms-batch-result { margin-top: 1rem; }
.sms-validation-card { padding: 1.2rem; background: var(--bg-card); border: 1px solid var(--border-color); border-left: 3px solid var(--danger-500); border-radius: .9rem; }
.sms-validation-card.is-valid { border-left-color: var(--success-500); }
.sms-validation-card { display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(20rem, 1.2fr) auto; gap: 1rem; align-items: center; }
.sms-validation-summary { display: flex; align-items: center; gap: .7rem; }
.sms-validation-icon { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; color: var(--danger-500); background: color-mix(in srgb, var(--danger-500) 10%, var(--bg-card)); border-radius: .7rem; }
.is-valid .sms-validation-icon { color: var(--success-500); background: color-mix(in srgb, var(--success-500) 10%, var(--bg-card)); }
.sms-validation-summary span { color: var(--text-muted); font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.sms-validation-summary h4 { margin: .12rem 0 0; font-size: .85rem; }
.sms-validation-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.sms-validation-metrics div { padding: .55rem; text-align: center; background: var(--bg-hover); border-radius: .55rem; }
.sms-validation-metrics strong, .sms-validation-metrics span { display: block; }
.sms-validation-metrics strong { color: var(--text-primary); font-size: .95rem; }
.sms-validation-metrics span { color: var(--text-muted); font-size: .58rem; }
.sms-number-preview { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding-top: .8rem; border-top: 1px solid var(--border-color); }
.sms-number-preview > span { margin-right: .25rem; color: var(--text-muted); font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.sms-number-preview code { padding: .25rem .4rem; color: var(--text-secondary); background: var(--bg-hover); border-radius: .35rem; font-size: .62rem; }
.sms-number-preview small { color: var(--sms-blue); font-weight: 700; }
.sms-confirm-batch { min-width: 11rem; margin: 0; }

.sms-api-flow { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .65rem; font-weight: 700; }
.sms-api-flow span { padding: .38rem .55rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .5rem; }
.sms-api-flow i { color: var(--sms-blue); font-size: .58rem; }
.sms-api-layout { display: grid; grid-template-columns: minmax(19rem, .72fr) minmax(0, 1.28fr); gap: 1rem; align-items: start; }
.sms-api-form-panel { position: sticky; top: 1rem; }
.sms-panel-head .sms-icon-button { margin-left: auto; }
.sms-icon-button, .sms-more-button { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; color: var(--text-muted); background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: .62rem; font-size: .72rem; }
.sms-icon-button:hover, .sms-more-button:hover { color: var(--sms-blue); border-color: color-mix(in srgb, var(--sms-blue) 35%, var(--border-color)); }
.sms-fixed-content-note { display: flex; align-items: flex-start; gap: .55rem; margin: -.2rem 0 1rem; padding: .7rem; color: var(--text-muted); background: var(--bg-hover); border-radius: .62rem; font-size: .64rem; line-height: 1.45; }
.sms-fixed-content-note i { margin-top: .1rem; color: var(--sms-blue); }
.sms-api-library { min-width: 0; }
.sms-library-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.sms-api-list { display: grid; gap: .7rem; }
.sms-api-card { padding: 1rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .88rem; box-shadow: var(--shadow-card); transition: .18s ease; }
.sms-api-card:hover { border-color: color-mix(in srgb, var(--sms-blue) 22%, var(--border-color)); transform: translateY(-1px); }
.sms-api-card-top { display: flex; align-items: flex-start; gap: .7rem; }
.sms-api-card-icon { display: grid; width: 2.45rem; height: 2.45rem; flex: 0 0 2.45rem; place-items: center; color: var(--sms-blue); background: var(--sms-soft); border-radius: .68rem; }
.sms-api-card-title { min-width: 0; flex: 1; }
.sms-api-card-title > div { display: flex; align-items: center; gap: .55rem; }
.sms-api-card-title h5 { max-width: 70%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.sms-api-card-title p { display: -webkit-box; margin: .3rem 0 0; overflow: hidden; color: var(--text-muted); font-size: .68rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sms-status { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .4rem; border-radius: 999px; font-size: .56rem; font-weight: 750; }
.sms-status i, .sms-table-status i { width: .35rem; height: .35rem; border-radius: 50%; }
.sms-status.is-active { color: #059669; background: rgba(16,185,129,.1); }.sms-status.is-active i { background: #10b981; }
.sms-status.is-paused { color: #d97706; background: rgba(245,158,11,.1); }.sms-status.is-paused i { background: #f59e0b; }
.sms-status.is-draft { color: var(--text-muted); background: var(--bg-hover); }.sms-status.is-draft i { background: var(--text-muted); }
.sms-api-card-meta { display: flex; flex-wrap: wrap; gap: .75rem; margin: .8rem 0; padding: .6rem 0; color: var(--text-muted); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); font-size: .61rem; }
.sms-api-card-meta span { display: flex; align-items: center; gap: .3rem; }.sms-api-card-meta strong { color: var(--text-secondary); }.sms-api-card-meta .has-error { color: var(--danger-500); }
.sms-endpoint-row { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; background: color-mix(in srgb, var(--bg-body) 55%, var(--bg-input)); border: 1px solid var(--border-color); border-radius: .58rem; }
.sms-endpoint-row > div { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; }
.sms-endpoint-row span { padding: .18rem .32rem; color: #fff; background: var(--sms-blue); border-radius: .3rem; font-size: .52rem; font-weight: 800; }
.sms-endpoint-row code { overflow: hidden; color: var(--text-secondary); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.sms-endpoint-row button { flex: 0 0 auto; color: var(--text-muted); background: transparent; border: 0; }
.sms-api-card-actions { display: flex; gap: .5rem; margin-top: .65rem; }
.sms-api-card-actions button { padding: .3rem 0; color: var(--text-muted); background: transparent; border: 0; font-size: .62rem; font-weight: 650; }
.sms-api-card-actions button:hover { color: var(--sms-blue); }
.sms-api-card-actions button + button { margin-left: auto; }
.sms-credential-card { margin-bottom: .8rem; padding: 1rem; color: #ecfeff; background: linear-gradient(140deg, #083344, #164e63); border: 1px solid rgba(103,232,249,.2); border-radius: .9rem; box-shadow: 0 .8rem 1.8rem rgba(8,51,68,.18); }
.sms-credential-head { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .8rem; }
.sms-credential-success { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; color: #083344; background: #67e8f9; border-radius: .65rem; }
.sms-credential-head > div:nth-child(2) { flex: 1; }.sms-credential-head span { color: #67e8f9; font-size: .58rem; font-weight: 800; text-transform: uppercase; }.sms-credential-head h4 { margin: .1rem 0; color: #fff; font-size: .85rem; }.sms-credential-head p { margin: 0; color: rgba(236,254,255,.62); font-size: .62rem; }.sms-credential-head .sms-icon-button { color: #a5f3fc; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.sms-credential-field { margin-top: .55rem; }.sms-credential-field label { display: block; margin-bottom: .25rem; color: rgba(236,254,255,.56); font-size: .56rem; font-weight: 700; text-transform: uppercase; }.sms-credential-field > div { display: flex; align-items: center; padding: .45rem .55rem; background: rgba(2,6,23,.28); border: 1px solid rgba(255,255,255,.1); border-radius: .5rem; }.sms-credential-field code { min-width: 0; flex: 1; overflow: hidden; color: #cffafe; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }.sms-credential-field button { color: #67e8f9; background: transparent; border: 0; }
.sms-code-example { display: grid; grid-template-columns: 8rem 1fr; gap: .6rem; margin-top: .65rem; padding: .55rem; background: #020617; border-radius: .55rem; }.sms-code-example > div { display: flex; flex-direction: column; gap: .25rem; }.sms-code-example span { align-self: flex-start; padding: .18rem .35rem; color: #fff; background: var(--sms-blue); border-radius: .3rem; font-size: .52rem; font-weight: 800; }.sms-code-example small { color: #64748b; font-size: .56rem; }.sms-code-example pre { margin: 0; color: #67e8f9; font-size: .6rem; }

.sms-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.sms-stat-card { display: flex; align-items: center; gap: .75rem; min-height: 6.2rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .85rem; box-shadow: var(--shadow-card); }
.sms-stat-icon { display: grid; width: 2.55rem; height: 2.55rem; flex: 0 0 2.55rem; place-items: center; border-radius: .72rem; }.sms-stat-icon.is-blue { color: #2563eb; background: rgba(37,99,235,.1); }.sms-stat-icon.is-green { color: #10b981; background: rgba(16,185,129,.1); }.sms-stat-icon.is-amber { color: #f59e0b; background: rgba(245,158,11,.1); }.sms-stat-icon.is-red { color: #ef4444; background: rgba(239,68,68,.1); }
.sms-stat-card small, .sms-stat-card strong, .sms-stat-card div > span { display: block; }.sms-stat-card small { color: var(--text-muted); font-size: .62rem; font-weight: 700; }.sms-stat-card strong { margin: .1rem 0; color: var(--text-primary); font-size: 1.35rem; line-height: 1; }.sms-stat-card div > span { color: var(--text-muted); font-size: .58rem; }
.sms-refresh-button, .sms-back-button { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.35rem; padding: 0 .7rem; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .6rem; font-size: .68rem; font-weight: 700; }
.sms-back-button { margin-bottom: .55rem; }
.sms-history-panel { overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .9rem; box-shadow: var(--shadow-card); }
.sms-history-head { padding: 1rem 1.1rem; border-bottom: 1px solid var(--border-color); }
.sms-history-table { margin: 0; color: var(--text-secondary); font-size: .69rem; }
.sms-history-table thead th { padding: .7rem .8rem; color: var(--text-muted); background: color-mix(in srgb, var(--bg-hover) 58%, var(--bg-card)); border-bottom-color: var(--border-color); font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.sms-history-table tbody td { padding: .78rem .8rem; border-bottom-color: var(--border-color); vertical-align: middle; }
.sms-history-table tbody tr:last-child td { border-bottom: 0; }.sms-history-table td > strong, .sms-history-table td > small { display: block; }.sms-history-table td > strong { color: var(--text-primary); font-size: .7rem; }.sms-history-table td > small { margin-top: .15rem; color: var(--text-muted); font-size: .57rem; }
.sms-table-status { display: inline-flex; align-items: center; gap: .32rem; padding: .28rem .45rem; color: var(--text-muted); background: var(--bg-hover); border-radius: 999px; font-size: .58rem; font-weight: 700; white-space: nowrap; }.sms-table-status i { background: currentColor; }.sms-table-status.is-delivered { color: #059669; background: rgba(16,185,129,.1); }.sms-table-status.is-failed { color: #dc2626; background: rgba(239,68,68,.1); }.sms-table-status.is-scheduled { color: #d97706; background: rgba(245,158,11,.1); }.sms-table-status.is-sent, .sms-table-status.is-processing { color: var(--sms-blue); background: rgba(37,99,235,.1); }
.sms-table-action { display: inline-flex; align-items: center; gap: .35rem; color: var(--sms-blue); background: transparent; border: 0; font-size: .62rem; font-weight: 700; white-space: nowrap; }
.sms-empty-table { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 2rem; color: var(--text-muted); }
#smsSingleHistory { margin-top: 1rem; }
.sms-history-message { display: -webkit-box; max-width: 34rem; overflow: hidden; color: var(--text-secondary); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.sms-provider-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .72fr); gap: 1rem; }
.sms-secret-input { position: relative; }.sms-secret-input .form-control { padding-right: 2.7rem; }.sms-secret-input button { position: absolute; top: 50%; right: .55rem; color: var(--text-muted); background: transparent; border: 0; transform: translateY(-50%); }
.sms-webhook-panel { position: relative; padding: 1.5rem; overflow: hidden; background: color-mix(in srgb, var(--sms-blue) 5%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--sms-blue) 16%, var(--border-color)); border-radius: 1rem; }
.sms-webhook-panel > p { color: var(--text-muted); font-size: .72rem; line-height: 1.55; }.sms-webhook-visual { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.2rem; }.sms-webhook-visual > div { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; color: #fff; background: var(--sms-blue); border-radius: .9rem; font-size: 1.1rem; box-shadow: 0 .65rem 1.2rem rgba(37,99,235,.2); }.sms-webhook-visual > span { color: color-mix(in srgb, var(--sms-blue) 55%, var(--text-muted)); transform: rotate(-90deg); }
.sms-webhook-url { display: flex; align-items: center; gap: .5rem; margin: 1rem 0; padding: .65rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .65rem; }.sms-webhook-url code { min-width: 0; flex: 1; overflow: hidden; color: var(--sms-blue); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }.sms-webhook-url button { color: var(--sms-blue); background: transparent; border: 0; }
.sms-webhook-panel ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: .67rem; }.sms-webhook-panel li { display: flex; align-items: center; gap: .45rem; }.sms-webhook-panel li i { color: var(--success-500); }
.sms-loading, .sms-error-state, .sms-empty-state { display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 15rem; padding: 2rem; color: var(--text-muted); text-align: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: .9rem; }.sms-loading p, .sms-error-state p, .sms-empty-state p { max-width: 26rem; margin: .65rem 0 0; font-size: .7rem; }.sms-error-state > i { color: var(--danger-500); font-size: 1.5rem; }.sms-error-state h4, .sms-empty-state h5 { margin: .7rem 0 0; font-size: .9rem; }.sms-empty-state > div { display: grid; width: 3rem; height: 3rem; place-items: center; color: var(--sms-blue); background: var(--sms-soft); border-radius: .85rem; }

@media (max-width: 1199.98px) {
  .sms-compose-grid { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr); }
  .sms-validation-card { grid-template-columns: 1fr 1.2fr; }
  .sms-confirm-batch { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 991.98px) {
  .sms-hero { min-height: 9.5rem; padding: 1.5rem; }
  .sms-compose-grid, .sms-api-layout, .sms-provider-grid { grid-template-columns: 1fr; }
  .sms-preview-panel { min-height: auto; }
  .sms-phone-frame { width: 13rem; }
  .sms-api-form-panel { position: static; }
  .sms-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  #smsSection { margin: -.15rem; }
  .sms-hero { align-items: flex-start; flex-direction: column; gap: 1.1rem; padding: 1.25rem; border-radius: .9rem; }
  .sms-product-mark { width: 3.4rem; height: 3.4rem; flex-basis: 3.4rem; border-radius: .9rem; }
  .sms-hero-actions { width: 100%; }.sms-action-button { flex: 1; justify-content: center; }
  .sms-view-nav { display: flex; width: 100%; margin: .75rem 0 1rem; overflow-x: auto; }.sms-view-tab { min-width: max-content; flex: 1 0 auto; justify-content: center; padding: 0 .75rem; }
  .sms-section-heading { align-items: flex-start; flex-direction: column; gap: .7rem; }
  .sms-mass-grid { grid-template-columns: 1fr; }
  .sms-schedule-row { grid-template-columns: 1fr; }
  .sms-validation-card { grid-template-columns: 1fr; }.sms-validation-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }.sms-number-preview, .sms-confirm-batch { grid-column: auto; }
  .sms-api-flow { width: 100%; overflow-x: auto; }.sms-api-flow span { min-width: max-content; }
  .sms-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }.sms-stat-card { min-height: 5.2rem; padding: .75rem; }.sms-stat-icon { width: 2.2rem; height: 2.2rem; flex-basis: 2.2rem; }
  .sms-history-panel .table-responsive > table { min-width: 44rem; }
  .sms-code-example { grid-template-columns: 1fr; }
}

@media (max-width: 479.98px) {
  .sms-hero-copy { align-items: flex-start; }.sms-hero p { font-size: .76rem; }
  .sms-panel { padding: 1rem; }.sms-preview-panel { padding: 1rem; }
  .sms-validation-metrics { grid-template-columns: repeat(2, 1fr); }
  .sms-stat-grid { grid-template-columns: 1fr; }.sms-stat-card { min-height: auto; }
  .sms-api-card-title > div { align-items: flex-start; flex-direction: column; gap: .3rem; }.sms-api-card-title h5 { max-width: 100%; }.sms-api-card-meta { gap: .5rem; }.sms-api-card-actions { flex-direction: column; align-items: flex-start; }.sms-api-card-actions button + button { margin-left: 0; }
}