/* ============================================================
   ui-refactor.css — Supplementary UI improvements
   Loaded after app.css. Only enhances, never breaks existing logic.
   ============================================================ */

/* ── Design Tokens (supplementary) ──────────────────── */
:root {
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow-card: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.03);
  --shadow-card-hover: 0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;
  --focus-ring: 0 0 0 3px rgba(14,116,109,0.18);
}

/* Codex v70 final shell fix: keep desktop pages out from under the rail. */
@media (min-width: 861px) {
  .app-html .app-shell {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-areas: "rail content" !important;
    overflow: hidden !important;
    gap: 0 !important;
  }

  .app-html .app-shell > .icon-rail {
    grid-area: rail !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 100dvh !important;
    z-index: 20 !important;
  }

  .app-html body[data-view="chat"] .app-shell {
    grid-template-columns: 64px 220px minmax(0, 1fr) !important;
    grid-template-areas: "rail filter content" !important;
  }

  .app-html body[data-view="chat"] .app-shell > .filter-column {
    grid-area: filter !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 220px !important;
    min-width: 0 !important;
    height: 100dvh !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
  }

  .app-html body[data-view="chat"] .app-shell > #chat-view {
    grid-area: content !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    display: flex !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .app-html body[data-view="chat"] #chat-view > .chat-page {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    grid-template-columns: 340px minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  .app-html body:not([data-view="chat"]) .app-shell > .page-wrap,
  .app-html body:not([data-view="chat"]) .app-shell > .view,
  .app-html body:not([data-view="chat"]) .app-shell > .content-area {
    grid-area: content !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  .app-html body[data-view="admin"] .admin-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
    margin: 14px 0 !important;
    border: 1px solid #e1e5dd !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
  }

  .app-html body[data-view="admin"] .admin-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
    border: 1px solid #d9dfd7 !important;
    background: #fff !important;
    color: #26332d !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .app-html body[data-view="admin"] .admin-tab.active {
    border-color: #0f8f68 !important;
    background: #0f8f68 !important;
    color: #fff !important;
  }
}

/* ── Scrollbar Polish ───────────────────────────────── */
.app-shell ::-webkit-scrollbar { width: 6px; height: 6px; }
.app-shell ::-webkit-scrollbar-track { background: transparent; }
.app-shell ::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,0.25);
  border-radius: 3px;
}
.app-shell ::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.4); }

/* ── Card Enhancements ──────────────────────────────── */
.card {
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-card-hover); }

.card-head {
  border-bottom: 1px solid var(--line-2);
}

/* ── Page Head Polish ───────────────────────────────── */
.page-head h1 {
  letter-spacing: -0.01em;
}
.page-head small {
  color: var(--brand);
  opacity: 0.7;
}

/* ── Button Polish ──────────────────────────────────── */
.outline-button {
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  border-color: var(--line-2);
}
.outline-button:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.outline-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Primary buttons in forms */
.account-form button[type="submit"],
.broadcast-form button[type="submit"],
.template-form button[type="submit"],
.user-form button[type="submit"],
.tool-controls button:not(.outline-button) {
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.account-form button[type="submit"]:hover,
.broadcast-form button[type="submit"]:hover,
.template-form button[type="submit"]:hover,
.user-form button[type="submit"]:hover,
.tool-controls button:not(.outline-button):hover {
  opacity: 0.92;
  box-shadow: 0 4px 12px rgba(14,116,109,0.25);
}
.account-form button[type="submit"]:active,
.broadcast-form button[type="submit"]:active,
.template-form button[type="submit"]:active,
.user-form button[type="submit"]:active,
.tool-controls button:not(.outline-button):active {
  transform: scale(0.98);
}

/* ── Form Input Polish ──────────────────────────────── */
.account-form input,
.broadcast-form input,
.broadcast-form select,
.broadcast-form textarea,
.template-form input,
.template-form textarea,
.user-form input,
.user-form select,
.user-form textarea,
.contact-import textarea,
.contact-import select,
.tool-controls select,
.campaign-compose input,
.campaign-compose textarea,
.campaign-compose select,
.license-gen-form input,
.license-gen-form select {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.account-form input:focus,
.broadcast-form input:focus,
.broadcast-form select:focus,
.broadcast-form textarea:focus,
.template-form input:focus,
.template-form textarea:focus,
.user-form input:focus,
.user-form select:focus,
.user-form textarea:focus,
.contact-import textarea:focus,
.contact-import select:focus,
.tool-controls select:focus,
.campaign-compose input:focus,
.campaign-compose textarea:focus,
.campaign-compose select:focus,
.license-gen-form input:focus,
.license-gen-form select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

/* ── Device Grid Cards ──────────────────────────────── */
.device-grid .device-card,
.device-grid > div {
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.device-grid .device-card:hover,
.device-grid > div:hover {
  transform: translateY(-1px);
}

/* ── Admin Tab Polish ───────────────────────────────── */
.admin-tab {
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.admin-tab.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  border-radius: 1px;
}

/* ── Empty State Polish ─────────────────────────────── */
.empty-state,
.tool-group-list .empty {
  color: var(--muted);
  text-align: center;
  padding: 32px 16px;
}
.empty-state p {
  font-size: 13px;
  opacity: 0.7;
}

/* ── Auth Page Polish ───────────────────────────────── */
.auth-site-page .site-header {
  transition: box-shadow var(--transition-base);
}
.auth-site-page .login-card-pro {
  box-shadow: 0 4px 24px rgba(15,23,42,0.06), 0 1px 4px rgba(15,23,42,0.04);
  transition: box-shadow var(--transition-base);
}
.auth-site-page .login-card-pro:hover {
  box-shadow: 0 8px 32px rgba(15,23,42,0.08), 0 2px 8px rgba(15,23,42,0.04);
}
.auth-site-page .auth-form input {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-site-page .auth-form input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.auth-site-page .auth-form button[type="submit"] {
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-site-page .auth-form button[type="submit"]:hover {
  opacity: 0.92;
  box-shadow: 0 4px 12px rgba(14,116,109,0.3);
}

/* ── Landing Page Polish ────────────────────────────── */
.landing-body .onepage-header {
  transition: box-shadow var(--transition-base), background var(--transition-base);
}
.landing-body .service-cards article {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.landing-body .service-cards article:hover {
  transform: translateY(-2px);
}
.landing-body .pricing-cards article {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.landing-body .pricing-cards article:hover {
  transform: translateY(-2px);
}
.landing-body .pricing-cards .featured {
  position: relative;
}
.landing-body .pricing-cards .featured::before {
  content: "POPULAR";
  position: absolute;
  top: -8px;
  right: 16px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--brand);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
}

/* ── Reload Button Polish ───────────────────────────── */
.reload-btn {
  transition: transform 0.3s ease, color var(--transition-fast);
}
.reload-btn:hover {
  transform: rotate(180deg);
  color: var(--brand);
}

/* ── Broadcast Mode Tabs ────────────────────────────── */
.broadcast-mode-tabs label {
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.broadcast-mode-tabs label.active {
  border-color: var(--brand);
  background: rgba(14,116,109,0.04);
}

/* ── License Filter Buttons ─────────────────────────── */
.license-filter-btn {
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.license-filter-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ── Conversation List Items ────────────────────────── */
#conversation-list > * {
  transition: background var(--transition-fast);
}

/* ── Rail Panel Transitions ─────────────────────────── */
.rail-panel {
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.rail-panel[hidden] {
  display: none !important;
}

/* ── Responsive: Non-chat pages on smaller screens ── */
@media (max-width: 768px) {
  .app-html body:not([data-view="chat"]) .page-wrap {
    padding: 12px;
  }

  .app-html body:not([data-view="chat"]) .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .app-html body:not([data-view="chat"]) .page-head h1 {
    font-size: 18px;
  }

  .broadcast-studio {
    grid-template-columns: 1fr !important;
  }

  .admin-grid-two {
    grid-template-columns: 1fr !important;
  }

  .tools-grid,
  .device-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Strategy Grid Improvements ─────────────────────── */
.strategy-grid {
  gap: 10px;
}
.strategy-grid label {
  transition: background var(--transition-fast);
}
.strategy-grid label:focus-within {
  background: rgba(14,116,109,0.03);
}

/* ── Contact Import Polish ──────────────────────────── */
.contact-import textarea {
  resize: vertical;
  min-height: 80px;
}

/* ── Template Helper Text ───────────────────────────── */
.template-helper code {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11px;
  color: var(--brand-dark);
}

/* ── Login Error ────────────────────────────────────── */
.login-error {
  animation: shake 0.3s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── Form Success/Error Messages ────────────────────── */
.form-success {
  animation: fadeIn 0.3s ease;
}
.form-error {
  animation: shake 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Selection Color ────────────────────────────────── */
::selection {
  background: rgba(14,116,109,0.15);
  color: var(--ink);
}

/* ── Focus Visible for All Interactive Elements ────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Smooth Scrolling ───────────────────────────────── */
.page-wrap,
.messages,
#conversation-list,
#tool-group-list {
  scroll-behavior: smooth;
}

/* ============================================================
   SHARED COMPONENTS — Modals, Toasts, Badges, Tables
   ============================================================ */

/* ── Modal Overlay ──────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
  animation: modalFadeIn 0.15s ease;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-overlay[hidden] { display: none !important; }

.modal-box {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(15,23,42,0.25);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideUp 0.2s ease;
}
@keyframes modalSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 16px; font-weight: 700; margin: 0; color: var(--ink); }
.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

/* ── Toast Notifications ────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--brand);
  box-shadow: 0 4px 12px rgba(15,23,42,0.2);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 360px;
}
.toast.toast-show { transform: translateY(0); opacity: 1; }
.toast.toast-error { background: var(--danger); }
.toast.toast-success { background: var(--ok); }

/* ── Badges ─────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
.badge-ok { background: #dcfce7; color: #166534; }
.badge-warn { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-info { background: #dbeafe; color: #1e40af; }

/* ── Data Tables ────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }

/* ── Form Fields ────────────────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.form-field > span em { color: var(--danger); font-style: normal; }
.form-field input,
.form-field textarea,
.form-field select {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.form-error {
  color: var(--danger);
  font-size: 12px;
  padding: 6px 10px;
  background: #fef2f2;
  border-radius: var(--r-sm);
}

/* ── Buttons (shared) ───────────────────────────────── */
.btn { padding: 8px 16px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; border: none; cursor: pointer; transition: all var(--transition-fast); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--muted); }
.btn-danger-outline { background: var(--surface); border: 1px solid #fecaca; color: var(--danger); }
.btn-danger-outline:hover { background: #fef2f2; }

/* ── Card Body / Foot ───────────────────────────────── */
.card-body { padding: 16px; }
.card-foot { padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); display: flex; gap: 8px; }
.card-desc { font-size: 12px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }

/* ── Empty State ────────────────────────────────────── */
.empty-state { text-align: center; padding: 32px 20px; color: var(--muted); }
.empty-state p { font-size: 13px; margin: 0; }

/* ── Page Sub Head ──────────────────────────────────── */
.page-sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.page-sub-head h2 { font-size: 16px; font-weight: 700; margin: 0; color: var(--ink); }
.page-sub-head p { font-size: 12px; color: var(--muted); margin: 2px 0 0; }

/* ── License Activate Form ──────────────────────────── */
.license-activate-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.license-activate-form input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.license-result {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 12px;
  line-height: 1.5;
}
.license-success { background: #dcfce7; color: #166534; }
.license-error { background: #fee2e2; color: #991b1b; }

/* ── Account Section ────────────────────────────────── */
.account-section { margin-top: 8px; }

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */
.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.account-profile-card .card-body { padding: 20px; }
.account-profile-body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}
.account-profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.account-profile-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.account-profile-row label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.account-profile-row span {
  font-size: 13px;
  color: var(--ink);
  word-break: break-all;
}

/* Plan Card */
.account-plan-card .card-body { padding: 20px; }
.account-plan-body {
  display: flex;
  gap: 16px;
  align-items: center;
}
.plan-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: #ecfdf5;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.plan-icon-wrap svg { width: 24px; height: 24px; }
.plan-info-main { flex: 1; min-width: 0; }
.plan-name-display {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.plan-expiry-row {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
}
.plan-expiry-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.plan-expiry-item small {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.plan-expiry-item span {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}

/* Team Seats Info */
.team-seats-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.seats-badge {
  font-weight: 700;
  color: var(--brand);
  font-size: 15px;
}

/* ============================================================
   SETTINGS PAGE
   ============================================================ */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}

.settings-body { padding: 16px 20px; }

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}
.setting-row-label strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.setting-row-label small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.setting-row-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.setting-select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12px;
  background: var(--surface);
  color: var(--ink);
  min-width: 120px;
}
.setting-divider {
  height: 1px;
  background: var(--line-2);
  margin: 4px 0;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-save-bar {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}

.settings-form .btn { align-self: flex-start; }

/* Status Rows */
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-2);
}
.status-row:last-of-type { border-bottom: none; }
.status-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.status-value {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.settings-renew-btn { margin-top: 12px; }

/* Toggle Switch */
.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 20px;
  transition: 0.2s;
}
.toggle-slider:before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--brand); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px); }

/* ============================================================
   PRICING PAGE
   ============================================================ */
.pricing-page { max-width: 1200px; margin: 0 auto; }

.pricing-current-badge { display: flex; align-items: center; gap: 8px; }
.pricing-current-badge strong { color: var(--brand); }

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-card);
}
.pricing-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.pricing-card-featured {
  border-color: var(--brand);
  border-width: 2px;
  background: linear-gradient(180deg, #f0fdfa 0%, var(--surface) 30%);
}
.pricing-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 12px;
  border-radius: 100px;
  white-space: nowrap;
}

.pricing-card-head h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}
.pricing-card-head p {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}

.pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 16px 0 12px;
}
.price-currency { font-size: 16px; font-weight: 600; color: var(--ink); }
.price-amount { font-size: 36px; font-weight: 800; color: var(--ink); line-height: 1; }
.price-period { font-size: 12px; color: var(--muted); margin-left: 4px; }

.pricing-card-features ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pricing-card-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink);
}
.pricing-card-features li svg {
  width: 14px;
  height: 14px;
  color: var(--ok);
  flex-shrink: 0;
}

.pricing-card-price-per-day {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 6px 0;
  margin-bottom: 12px;
  border-top: 1px dashed var(--line);
}

.pricing-buy-btn { width: 100%; }

.pricing-section { margin-bottom: 16px; }

/* Payment Instructions */
.payment-instructions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.payment-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.payment-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.payment-step strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.payment-step p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* Order Summary */
.order-summary {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.order-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.order-summary-row span { color: var(--muted); }
.order-summary-row strong { color: var(--ink); }

.order-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #fef3c7;
  border-radius: var(--r-sm);
  font-size: 12px;
  color: #92400e;
  line-height: 1.4;
}
.order-notice svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   RAIL USER MENU LINKS
   ============================================================ */
a.rail-user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}
a.rail-user-menu-item:hover {
  background: var(--surface-2);
  text-decoration: none;
}
a.rail-user-menu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 760px) {
  .account-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .pricing-cards {
    grid-template-columns: 1fr;
  }
  .payment-instructions {
    grid-template-columns: 1fr;
  }
  .account-profile-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .account-profile-row { align-items: center; }
  .plan-expiry-row { flex-direction: column; gap: 8px; }
}


/* === Chat page grid fix — override v54 CSS that incorrectly uses 2-column grid ===
   The v54 block at end of app.css sets .app-shell to "rail content" for chat view,
   expecting a .content-area wrapper that doesn't exist in the HTML.
   filter-column and chat-page are DIRECT children of .app-shell, so we need 3 columns. */
.app-html body[data-view="chat"] .app-shell {
  grid-template-columns: 64px 220px minmax(0, 1fr) !important;
  grid-template-areas: "rail filter content" !important;
}
.app-html body[data-view="chat"] .filter-column {
  grid-area: filter !important;
  display: flex !important;
}
.app-html body[data-view="chat"] .chat-page {
  grid-area: content !important;
}

/* Hide stray rz-handles that get appended to .app-shell and break the grid */
.app-shell > .rz-handle { display: none !important; }

/* ── Rail user menu positioning fix ──
   The icon-rail has overflow:hidden, which would clip the menu opened to the right.
   Make the .icon-rail a positioning context and allow overflow for menus. */
.icon-rail {
  position: relative !important;
  overflow: visible !important;
}
.rail-user-menu {
  z-index: 1000;
}

/* === v57 final workspace polish: split-page layout + cleaner admin/tools === */
.app-html body {
  background: #f4f1ea !important;
}

.app-html body[data-view="chat"] .app-shell {
  grid-template-columns: 64px 220px minmax(0, 1fr) !important;
  grid-template-areas: "rail filter content" !important;
}

.app-html body[data-view="chat"] .filter-column {
  grid-area: filter !important;
  display: flex !important;
}

.app-html body[data-view="chat"] .chat-page {
  grid-area: content !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.app-html body[data-view="chat"] .chat-page.rh-visible {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(300px, 340px) !important;
}

.app-html body[data-view="chat"] .list-column,
.app-html body[data-view="chat"] .chat-column {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
}

.app-html body[data-view="chat"] .chat-column {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  background: #f7f4ee !important;
}

.app-html body[data-view="chat"] .thread-head,
.app-html body[data-view="chat"] .composer {
  background: #fff !important;
  border-color: #ece7dd !important;
}

/* v83 — live WhatsApp status and in-chat QR reconnect */
.thread-account-connection {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 6px 5px 10px;
  border: 1px solid #e8e1d5;
  border-radius: 999px;
  background: #fbfaf7;
  color: #6f746f;
  white-space: nowrap;
}
.thread-account-connection[hidden] { display: none !important; }
.thread-account-connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2a132;
  box-shadow: 0 0 0 4px rgba(226,161,50,.12);
}
.thread-account-connection strong { font-size: 11px; font-weight: 750; }
.thread-account-connection.is-online { color: #197742; border-color: #cfe9d8; background: #f2fbf5; }
.thread-account-connection.is-online .thread-account-connection-dot { background: #24b866; box-shadow: 0 0 0 4px rgba(36,184,102,.12); }
.thread-account-connection.is-offline { color: #a84035; border-color: #f0cbc5; background: #fff5f3; }
.thread-account-connection.is-offline .thread-account-connection-dot { background: #dc4c3f; box-shadow: 0 0 0 4px rgba(220,76,63,.12); }
.thread-account-connection.is-checking .thread-account-connection-dot { animation: thread-status-pulse 1s ease-in-out infinite; }
.thread-account-connection button {
  border: 0;
  border-radius: 999px;
  padding: 5px 9px;
  background: #d9483b;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.thread-phone-sync {
  border-color: #cfe2d5 !important;
  background: #f4fbf6 !important;
  color: #236440 !important;
}
.thread-phone-sync:hover { border-color: #78bd91 !important; background: #ebf8ef !important; }
.thread-phone-sync.is-syncing svg { animation: spin .8s linear infinite; }
@keyframes thread-status-pulse { 50% { opacity: .35; transform: scale(.8); } }

.thread-reconnect-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; }
.thread-reconnect-modal[hidden] { display: none !important; }
.thread-reconnect-backdrop { position: absolute; inset: 0; background: rgba(8,18,13,.68); backdrop-filter: blur(8px); }
.thread-reconnect-dialog {
  position: relative;
  width: min(720px, 100%);
  overflow: hidden;
  border: 1px solid rgba(37,211,102,.22);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 34px 100px rgba(5,20,11,.34);
}
.thread-reconnect-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  color: #ebfff2;
  background: linear-gradient(125deg,#0a2115,#123a24);
}
.thread-reconnect-dialog header small { color: #75dda0; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.thread-reconnect-dialog header h2 { margin: 3px 0 0; font-size: 22px; letter-spacing: -.03em; }
.thread-reconnect-close { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(255,255,255,.07); color: #fff; font-size: 22px; cursor: pointer; }
.thread-reconnect-body { display: grid; grid-template-columns: 1fr 300px; min-height: 350px; }
.thread-reconnect-instructions { padding: 36px 30px; }
.thread-reconnect-step { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #e7f8ed; color: #168248; font-size: 11px; font-weight: 900; }
.thread-reconnect-instructions h3 { margin: 20px 0 8px; color: #14251a; font-size: 24px; letter-spacing: -.04em; }
.thread-reconnect-instructions p { color: #6d776f; font-size: 13px; line-height: 1.7; }
.thread-reconnect-account { margin-top: 24px; padding: 14px; border: 1px solid #e5ebe7; border-radius: 14px; background: #f8faf8; }
.thread-reconnect-account span,.thread-reconnect-account small { display: block; color: #89928c; font-size: 10px; }
.thread-reconnect-account strong { display: block; margin: 3px 0; color: #17281d; }
.thread-reconnect-error { color: #b73c32 !important; }
.thread-reconnect-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; background: #f2f7f3; border-left: 1px solid #e2eae4; text-align: center; }
.thread-reconnect-qr img { width: 220px; height: 220px; padding: 10px; border: 1px solid #dce7df; border-radius: 16px; background: #fff; object-fit: contain; }
.thread-reconnect-qr pre { max-width: 220px; overflow: auto; white-space: pre-wrap; font-size: 10px; }
.thread-reconnect-qr small { color: #7c8980; font-size: 10px; line-height: 1.5; }
.thread-reconnect-qr button { border: 1px solid #ccd9d0; border-radius: 10px; padding: 8px 12px; background: #fff; color: #31543e; font-size: 11px; font-weight: 750; cursor: pointer; }
.thread-reconnect-loading,.thread-reconnect-success { display: grid; place-items: center; align-content: center; min-height: 300px; text-align: center; color: #51705d; }
.thread-reconnect-loading i { width: 32px; height: 32px; margin-bottom: 14px; border: 3px solid #d8e8de; border-top-color: #25b967; border-radius: 50%; animation: spin .8s linear infinite; }
.thread-reconnect-success { grid-column: 1 / -1; padding: 45px; }
.thread-reconnect-success i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #25c76d; color: #fff; font-size: 30px; font-style: normal; }
.thread-reconnect-success h3 { margin: 15px 0 4px; color: #153421; font-size: 25px; }
.thread-reconnect-success p { color: #6c7a70; }
@media (max-width: 760px) {
  .thread-account-connection strong { display: none; }
  .thread-account-connection { padding-left: 8px; }
  .thread-reconnect-modal { padding: 12px; }
  .thread-reconnect-body { grid-template-columns: 1fr; }
  .thread-reconnect-instructions { padding: 24px; }
  .thread-reconnect-qr { border-left: 0; border-top: 1px solid #e2eae4; }
}

.app-html body[data-view="chat"] .messages {
  background: #f7f4ee !important;
}

.app-html body[data-view="chat"] .rh-panel {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  height: 100% !important;
  min-width: 0 !important;
  background: #fff !important;
  border-left: 1px solid #e7e2d8 !important;
  box-shadow: none !important;
}

.app-html body[data-view="chat"] .rh-panel.is-hidden {
  display: none !important;
}

.app-html body[data-view="chat"] .rh-panel-head {
  min-height: 48px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #ece7dd !important;
  background: #fbfaf7 !important;
}

.app-html body[data-view="chat"] .rh-panel-head h2 {
  font-size: 14px !important;
  color: #111827 !important;
}

.app-html body[data-view="chat"] .rh-tabs {
  display: flex !important;
  overflow-x: auto !important;
  gap: 4px !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid #ece7dd !important;
  background: #fff !important;
}

.app-html body[data-view="chat"] .rh-tab {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #667085 !important;
  padding: 0 10px !important;
}

.app-html body[data-view="chat"] .rh-tab.active {
  background: rgba(14, 116, 109, 0.08) !important;
  border-color: rgba(14, 116, 109, 0.16) !important;
  color: #0e746d !important;
}

.app-html body[data-view="chat"] .rh-tab-body {
  min-height: 0 !important;
  overflow: auto !important;
  padding: 12px !important;
  background: #fff !important;
}

.app-html body[data-view="devices"] .view,
.app-html body[data-view="tools"] .view,
.app-html body[data-view="admin"] .view {
  grid-area: content !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}

.app-html body[data-view="devices"] .page-wrap,
.app-html body[data-view="tools"] .page-wrap,
.app-html body[data-view="admin"] .page-wrap {
  height: 100% !important;
  overflow: auto !important;
  padding: 18px 22px 30px !important;
  background: #f4f1ea !important;
  gap: 18px !important;
}

.app-html .page-head {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 12px !important;
  align-items: flex-end !important;
}

.app-html .page-head h1 {
  font-size: 23px !important;
  line-height: 1.15 !important;
  margin: 3px 0 4px !important;
  color: #101828 !important;
  letter-spacing: 0 !important;
}

.app-html .page-head small {
  color: #0e746d !important;
  background: rgba(14, 116, 109, 0.08) !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  letter-spacing: 0.06em !important;
}

.app-html .page-head p {
  color: #667085 !important;
  font-size: 13px !important;
  margin: 0 !important;
}

.app-html .page-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-html .card,
.app-html .tool-card,
.app-html .users-card {
  background: #fff !important;
  border: 1px solid #e7e2d8 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.app-html .card-head {
  min-height: 54px;
  padding: 14px 18px !important;
  border-bottom: 1px solid #ece7dd !important;
  background: #fbfaf7 !important;
}

.app-html .card-head h2 {
  font-size: 15px !important;
  color: #111827 !important;
}

.app-html .card-head span {
  color: #7a8aa0 !important;
  background: transparent !important;
  border: 0 !important;
}

.app-html button,
.app-html .outline-button,
.app-html input,
.app-html select,
.app-html textarea {
  border-radius: 7px !important;
}

.app-html button:not(.rail-btn):not(.modal-close-btn):not(.rail-panel-close):not(.tpl-modal-close) {
  min-height: 34px;
  border: 1px solid #d8dfe7;
  background: #fff;
  color: #1f2937;
  padding: 0 12px;
  font-weight: 600;
}

.app-html button:not(.rail-btn):not(.modal-close-btn):hover {
  border-color: #0e746d;
  color: #0e746d;
}

.app-html button[type="submit"],
.app-html #open-user-modal,
.app-html #export-tool-groups,
.app-html #generate-license-keys,
.app-html #send-campaign {
  background: #0e746d !important;
  border-color: #0e746d !important;
  color: #fff !important;
}

.app-html .danger-button {
  border-color: #f1c5c2 !important;
  color: #b42318 !important;
  background: #fff !important;
}

.app-html body[data-view="tools"] .tools-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

.app-html body[data-view="tools"] .tool-card {
  max-width: none !important;
}

.app-html body[data-view="tools"] .tool-controls {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) auto auto !important;
  gap: 10px !important;
  align-items: end !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #ece7dd !important;
  background: #fff !important;
}

.app-html body[data-view="tools"] .tool-controls label {
  display: grid !important;
  gap: 6px !important;
  color: #53657a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.app-html body[data-view="tools"] .tool-controls select {
  height: 38px !important;
  border: 1px solid #d8dfe7 !important;
  background: #fff !important;
  color: #111827 !important;
  padding: 0 10px !important;
}

.app-html body[data-view="tools"] .tool-group-list {
  display: block !important;
  padding: 16px 18px 20px !important;
  max-height: none !important;
  overflow: visible !important;
}

.app-html body[data-view="tools"] .tool-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.app-html body[data-view="tools"] .tool-table-head {
  display: grid !important;
  grid-template-columns: 36px minmax(220px, 2fr) 60px 90px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid #e7e2d8 !important;
  color: #53657a !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.app-html body[data-view="tools"] .tool-table-head > label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  grid-column: 1 / span 2 !important;
}

.app-html body[data-view="tools"] .tool-group-row {
  display: grid !important;
  grid-template-columns: 36px minmax(220px, 2fr) 60px 90px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #f0ede6 !important;
  background: #fff !important;
  color: #111827 !important;
  transition: background-color .12s ease !important;
}

.app-html body[data-view="tools"] .tool-group-row:hover {
  background: #faf9f6 !important;
}

.app-html body[data-view="tools"] .tool-group-row.disabled {
  opacity: 0.55;
}

.app-html body[data-view="tools"] .tool-group-main {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
  grid-column: 1 / span 2 !important;
}

.app-html body[data-view="tools"] .tool-group-main input {
  flex: 0 0 auto !important;
  margin-top: 3px !important;
}

.app-html body[data-view="tools"] .tool-group-info {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.app-html body[data-view="tools"] .tool-group-name {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #111827 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.app-html body[data-view="tools"] .tool-group-id {
  display: block !important;
  font-size: 11px !important;
  color: #667085 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.app-html body[data-view="tools"] .tool-group-members {
  display: flex !important;
  justify-content: flex-start !important;
}

.app-html body[data-view="tools"] .member-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: #eef6f5 !important;
  color: #0e746d !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.app-html body[data-view="tools"] .member-badge::after {
  content: "" !important;
}

.app-html body[data-view="tools"] .tool-group-status {
  display: flex !important;
  justify-content: flex-start !important;
}

.app-html body[data-view="tools"] .status-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.app-html body[data-view="tools"] .status-badge.ready {
  background: #e6f4ea !important;
  color: #137333 !important;
}

.app-html body[data-view="tools"] .status-badge.unavailable {
  background: #fce8e6 !important;
  color: #b42318 !important;
}

.app-html .admin-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding: 8px 0 12px !important;
  margin: -2px 0 10px !important;
  background: #f4f1ea !important;
  border: 0 !important;
  scrollbar-width: thin;
}

.app-html .admin-tab {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  border: 1px solid #e0ddd4 !important;
  background: #fff !important;
  color: #53657a !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
}

.app-html .admin-tab.active {
  background: #0e746d !important;
  border-color: #0e746d !important;
  color: #fff !important;
}

.app-html .admin-tab-content {
  min-width: 0 !important;
}

.app-html body[data-view="admin"] .admin-grid,
.app-html body[data-view="admin"] .admin-grid-two {
  display: block !important;
}

.app-html .users-card .user-list {
  display: grid !important;
  gap: 10px !important;
  padding: 14px 16px 18px !important;
  max-height: none !important;
  overflow: visible !important;
}

.app-html .user-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border: 1px solid #e7e2d8 !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.app-html .user-row strong {
  font-size: 14px !important;
  color: #111827 !important;
}

.app-html .user-row small,
.app-html .user-row p {
  color: #667085 !important;
}

.app-html .user-stat-row span {
  background: #f5f7f8 !important;
  border: 1px solid #edf0f2 !important;
  color: #344054 !important;
}

.app-html .admin-user-modal[hidden] {
  display: none !important;
}

.app-html .admin-user-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  background: rgba(16, 24, 40, 0.38) !important;
}

.app-html .admin-user-dialog {
  width: min(860px, calc(100vw - 32px)) !important;
  max-height: min(86dvh, 760px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  background: #fff !important;
  border: 1px solid #e7e2d8 !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.22) !important;
  overflow: hidden !important;
}

.app-html .admin-user-dialog-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid #ece7dd !important;
  background: #fbfaf7 !important;
}

.app-html .admin-user-dialog-head small {
  color: #667085 !important;
  font-size: 12px !important;
}

.app-html .admin-user-dialog-head h2 {
  margin: 2px 0 0 !important;
  font-size: 18px !important;
  color: #111827 !important;
}

.app-html .modal-close-btn {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #d8dfe7 !important;
  background: #fff !important;
  color: #344054 !important;
  padding: 0 !important;
}

.app-html .admin-user-dialog .user-form {
  overflow: auto !important;
  padding: 18px !important;
  display: grid !important;
  gap: 14px !important;
}

.app-html .admin-user-dialog .form-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.app-html .permission-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.app-html .permission-row label,
.app-html .permission-chip {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid #e7e2d8 !important;
  background: #fff !important;
  border-radius: 8px !important;
  padding: 9px 10px !important;
}

.app-html .permission-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 8px !important;
  max-height: 220px !important;
  overflow: auto !important;
  padding: 8px !important;
  background: #fbfaf7 !important;
  border: 1px solid #ece7dd !important;
  border-radius: 8px !important;
}

.app-html input[type="checkbox"] {
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: grid !important;
  place-items: center !important;
  border: 1.5px solid #b8c2cc !important;
  border-radius: 5px !important;
  background: #fff !important;
  margin: 0 !important;
}

.app-html input[type="checkbox"]:checked {
  border-color: #0e746d !important;
  background: #0e746d !important;
}

.app-html input[type="checkbox"]:checked::after {
  content: "" !important;
  width: 9px !important;
  height: 5px !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(-45deg) translate(1px, -1px) !important;
}

@media (max-width: 900px) {
  .app-html body[data-view="chat"] .app-shell {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-areas: "rail content" !important;
  }

  .app-html body[data-view="chat"] .filter-column {
    display: none !important;
  }
}

/* === v59 chat desktop default: fully expanded workspace === */
@media (min-width: 901px) {
  .app-html body[data-view="chat"] .app-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    grid-template-columns: 64px 220px minmax(0, 1fr) !important;
    grid-template-areas: "rail filter content" !important;
  }

  .app-html body[data-view="chat"] .filter-column {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 260px !important;
    display: flex !important;
  }

  .app-html body[data-view="chat"] .chat-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    grid-template-columns: minmax(340px, 380px) minmax(0, 1fr) !important;
  }

  .app-html body[data-view="chat"] .chat-page.rh-visible {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) minmax(300px, 340px) !important;
  }

  .app-html body[data-view="chat"] .list-column,
  .app-html body[data-view="chat"] .chat-column,
  .app-html body[data-view="chat"] .rh-panel {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

@media (max-width: 760px) {
  .app-html .icon-rail,
  .app-html body[data-view="chat"] .icon-rail {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  .app-html .rail-nav,
  .app-html .rail-bottom {
    display: contents !important;
  }

  .app-html .rail-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    justify-self: center !important;
  }

  .app-html .rail-btn.active::before {
    display: none !important;
  }

  .app-html .rail-btn.active {
    box-shadow: none !important;
  }

  .app-html body[data-view="devices"] .page-wrap,
  .app-html body[data-view="tools"] .page-wrap,
  .app-html body[data-view="admin"] .page-wrap {
    padding: 14px 12px 84px !important;
  }

  .app-html .page-head {
    align-items: stretch !important;
  }

  .app-html .page-head-actions,
  .app-html body[data-view="tools"] .tool-controls,
  .app-html .admin-user-dialog .form-row,
  .app-html .user-row {
    grid-template-columns: 1fr !important;
  }

  .app-html .page-head-actions {
    display: grid !important;
  }

  .app-html body[data-view="tools"] .tool-group-list {
    grid-template-columns: 1fr !important;
  }

  .app-html .admin-user-modal {
    padding: 10px !important;
  }

  .app-html .admin-user-dialog {
    width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 86px) !important;
  }

  .app-html body[data-view="chat"] .chat-page,
  .app-html body[data-view="chat"] .chat-page.rh-visible {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  .app-html body[data-view="chat"] .rh-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: auto !important;
    height: min(48dvh, 430px) !important;
    z-index: 80 !important;
    border: 1px solid #e7e2d8 !important;
    border-radius: 10px 10px 0 0 !important;
    box-shadow: 0 -18px 45px rgba(16, 24, 40, 0.18) !important;
    overflow: hidden !important;
  }

  .app-html body[data-view="chat"] .rh-panel.is-hidden {
    display: none !important;
  }

  .app-html body[data-view="chat"] .rh-user-card {
    display: none !important;
  }

  .app-html body[data-view="chat"] .rh-tab-body {
    padding: 10px !important;
  }
}

/* === v60 rail overlays: one reliable menu layer for desktop and mobile === */
.app-html .rail-panel,
.app-html .rail-user-menu {
  z-index: 3000 !important;
}

.app-html .reload-btn.is-loading,
.app-html .list-icon-btn.is-loading {
  opacity: 0.68 !important;
  pointer-events: none !important;
}

.app-html .reload-btn.is-loading,
.app-html .list-icon-btn.is-loading {
  animation: wp-refresh-spin 0.8s linear infinite;
}

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

.app-html .rail-panel[hidden],
.app-html .rail-user-menu[hidden] {
  display: none !important;
}

@media (min-width: 761px) {
  .app-html .rail-panel {
    position: fixed !important;
    left: 72px !important;
    right: auto !important;
    top: auto !important;
    bottom: 16px !important;
    width: min(340px, calc(100vw - 96px)) !important;
    max-height: calc(100dvh - 32px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #e3dfd7 !important;
    border-radius: 12px !important;
    box-shadow: 0 22px 60px rgba(16, 24, 40, 0.18) !important;
  }

  .app-html .rail-user-menu {
    position: fixed !important;
    left: 72px !important;
    right: auto !important;
    top: auto !important;
    bottom: 16px !important;
    width: 240px !important;
    display: block !important;
    padding: 8px !important;
    background: #111827 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 22px 60px rgba(16, 24, 40, 0.28) !important;
  }
}

@media (max-width: 760px) {
  .app-html .rail-panel,
  .app-html .rail-user-menu {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: auto !important;
    bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72dvh, 560px) !important;
    overflow: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 -18px 45px rgba(16, 24, 40, 0.18) !important;
  }

  .app-html .rail-panel {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
  }

  .app-html .rail-user-menu {
    display: block !important;
  }
}

/* === v62 chat shell final override: current template has direct children, no content-area === */
@media (min-width: 761px) {
  .app-html body[data-view="chat"] .app-shell {
    display: grid !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    grid-template-columns: 64px 220px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "rail filter content" !important;
    overflow: hidden !important;
  }

  .app-html body[data-view="chat"] .app-shell > .icon-rail {
    grid-area: rail !important;
  }

  .app-html body[data-view="chat"] .app-shell > .filter-column {
    grid-area: filter !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-html body[data-view="chat"] .app-shell > #chat-view.chat-page,
  .app-html body[data-view="chat"] .app-shell > .chat-page {
    grid-area: content !important;
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #f7f4ee !important;
  }

  .app-html body[data-view="chat"] .app-shell > #chat-view.chat-page {
    grid-template-columns: minmax(340px, 380px) minmax(0, 1fr) !important;
  }

  .app-html body[data-view="chat"] .app-shell > #chat-view.chat-page.rh-visible {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) minmax(300px, 340px) !important;
  }

  .app-html body[data-view="chat"] .chat-page > .list-column {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .app-html body[data-view="chat"] .chat-page > .chat-column {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .app-html body[data-view="chat"] .chat-page > .rh-panel {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .app-html body[data-view="chat"] .chat-page > .rh-panel.is-hidden {
    display: none !important;
  }

  .app-html body[data-view="chat"] .app-shell > .tpl-modal-mask[hidden] {
    display: none !important;
  }
}

/* === v63 desktop hard layout: pin chat columns to viewport, bypass stale grid rules === */
@media (min-width: 761px) {
  .app-html body[data-view="chat"] {
    overflow: hidden !important;
  }

  .app-html body[data-view="chat"] .app-shell {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #f4f1ea !important;
  }

  .app-html body[data-view="chat"] .icon-rail {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 64px !important;
    height: 100dvh !important;
    z-index: 30 !important;
  }

  .app-html body[data-view="chat"] .filter-column,
  .app-html body[data-view="chat"] .content-area > .filter-column {
    position: fixed !important;
    left: 64px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 220px !important;
    height: 100dvh !important;
    min-width: 220px !important;
    max-width: 220px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 20 !important;
  }

  .app-html body[data-view="chat"] .content-area {
    position: fixed !important;
    left: 284px !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: auto !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    z-index: 10 !important;
  }

  .app-html body[data-view="chat"] #chat-view,
  .app-html body[data-view="chat"] #chat-view.view,
  .app-html body[data-view="chat"] #chat-view.view.active {
    position: fixed !important;
    left: 284px !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: block !important;
    width: auto !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
  }

  .app-html body[data-view="chat"] .chat-page,
  .app-html body[data-view="chat"] #chat-view.chat-page,
  .app-html body[data-view="chat"] #chat-view .chat-page {
    position: fixed !important;
    left: 284px !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: grid !important;
    width: auto !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
    grid-template-columns: minmax(340px, 380px) minmax(0, 1fr) !important;
  }

  .app-html body[data-view="chat"] .chat-page.rh-visible,
  .app-html body[data-view="chat"] #chat-view.chat-page.rh-visible,
  .app-html body[data-view="chat"] #chat-view .chat-page.rh-visible {
    grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) minmax(300px, 340px) !important;
  }

  .app-html body[data-view="chat"] .chat-page > .list-column,
  .app-html body[data-view="chat"] #chat-view .chat-page > .list-column {
    display: grid !important;
    height: 100dvh !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .app-html body[data-view="chat"] .chat-page > .chat-column,
  .app-html body[data-view="chat"] #chat-view .chat-page > .chat-column {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    height: 100dvh !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .app-html body[data-view="chat"] .chat-page > .rh-panel,
  .app-html body[data-view="chat"] #chat-view .chat-page > .rh-panel {
    display: flex !important;
    height: 100dvh !important;
    max-height: none !important;
  }

  .app-html body[data-view="chat"] .chat-page > .rh-panel.is-hidden,
  .app-html body[data-view="chat"] #chat-view .chat-page > .rh-panel.is-hidden {
    display: none !important;
  }
}

/* === v64 no draggable splitters on chat: fixed expanded workspace === */
.app-html body[data-view="chat"] .rz-handle,
.app-html body[data-view="chat"].rz-dragging .rz-handle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* === v65 mobile restore: desktop fixed layout must never apply below 761px === */
@media (max-width: 760px) {
  .app-html body[data-view="chat"] .app-shell {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "content"
      "rail" !important;
    overflow: hidden !important;
  }

  .app-html body[data-view="chat"] .icon-rail {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 58px !important;
    z-index: 90 !important;
  }

  .app-html body[data-view="chat"] .filter-column {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 58px !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    display: none !important;
    z-index: 70 !important;
  }

  .app-html body[data-view="chat"] .filter-column.is-open {
    display: flex !important;
  }

  .app-html body[data-view="chat"] #chat-view,
  .app-html body[data-view="chat"] .chat-page {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - 58px) !important;
    max-height: calc(100dvh - 58px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .app-html body[data-view="chat"]:not([data-mobile-chat="active"]) .chat-column {
    display: none !important;
  }

  .app-html body[data-view="chat"]:not([data-mobile-chat="active"]) .list-column {
    display: grid !important;
  }

  .app-html body[data-view="chat"][data-mobile-chat="active"] .list-column {
    display: none !important;
  }

  .app-html body[data-view="chat"][data-mobile-chat="active"] .chat-column {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .app-html body[data-view="chat"] .rh-panel {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(64px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: auto !important;
    height: min(48dvh, 430px) !important;
  }
}

/* Codex v70 final shell fix: repeated at EOF because this file loads last. */
@media (min-width: 861px) {
  .app-html .app-shell {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-areas: "rail content" !important;
    overflow: hidden !important;
    gap: 0 !important;
  }

  .app-html .app-shell > .icon-rail {
    grid-area: rail !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 100dvh !important;
    z-index: 20 !important;
  }

  .app-html body[data-view="chat"] .app-shell {
    grid-template-columns: 64px 220px minmax(0, 1fr) !important;
    grid-template-areas: "rail filter content" !important;
  }

  .app-html body[data-view="chat"] .app-shell > .filter-column {
    grid-area: filter !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 220px !important;
    min-width: 0 !important;
    height: 100dvh !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
  }

  .app-html body[data-view="chat"] .app-shell > #chat-view {
    grid-area: content !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    display: flex !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .app-html body[data-view="chat"] #chat-view > .chat-page {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    grid-template-columns: 340px minmax(0, 1fr) !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  .app-html body:not([data-view="chat"]) .app-shell > .page-wrap,
  .app-html body:not([data-view="chat"]) .app-shell > .view,
  .app-html body:not([data-view="chat"]) .app-shell > .content-area {
    grid-area: content !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  .app-html body[data-view="admin"] .admin-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
    margin: 14px 0 !important;
    border: 1px solid #e1e5dd !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
  }

  .app-html body[data-view="admin"] .admin-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
    border: 1px solid #d9dfd7 !important;
    background: #fff !important;
    color: #26332d !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  .app-html body[data-view="admin"] .admin-tab.active {
    border-color: #0f8f68 !important;
    background: #0f8f68 !important;
    color: #fff !important;
  }
}

/* ====================================================================
   MERGED from codex-final.css — override layer (highest priority)
   ==================================================================== */

/* Codex final overrides. Loaded after legacy UI files. */
@media (min-width: 861px) {
  .app-html body[data-view="chat"] .app-shell {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-columns: 64px 220px minmax(0, 1fr) !important;
    grid-template-areas: "rail filter content" !important;
    overflow: hidden !important;
    gap: 0 !important;
    background: #f3f2ec !important;
  }

  .app-html body[data-view="chat"] .app-shell > .icon-rail {
    grid-area: rail !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 100dvh !important;
  }

  .app-html body[data-view="chat"] .app-shell > .filter-column {
    grid-area: filter !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 220px !important;
    min-width: 0 !important;
    max-width: 220px !important;
    height: 100dvh !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .app-html body[data-view="chat"] .app-shell > #chat-view {
    grid-area: content !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .app-html body[data-view="chat"] .app-shell > #chat-view > .chat-page {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    grid-template-columns: 340px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .app-html body[data-view="chat"] .list-column,
  .app-html body[data-view="chat"] .chat-column {
    height: 100% !important;
    min-width: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-html body:not([data-view="chat"]) .app-shell {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "rail content" !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-html body:not([data-view="chat"]) .app-shell > .icon-rail {
    grid-area: rail !important;
    position: relative !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 100dvh !important;
  }

  .app-html body:not([data-view="chat"]) .app-shell > .page-wrap,
  .app-html body:not([data-view="chat"]) .app-shell > .view,
  .app-html body:not([data-view="chat"]) .app-shell > .content-area {
    grid-area: content !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  .app-html body[data-view="admin"] .admin-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    margin: 14px 0 !important;
    height: auto !important;
    min-height: 56px !important;
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid #e1e5dd !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
  }

  .app-html body[data-view="admin"] .admin-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: auto !important;
    height: 36px !important;
    min-width: 92px !important;
    min-height: 36px !important;
    max-height: none !important;
    padding: 0 14px !important;
    border-radius: 7px !important;
    border: 1px solid #d9dfd7 !important;
    background: #fff !important;
    color: #26332d !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .app-html body[data-view="admin"] .admin-tab svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
  }

  .app-html body[data-view="admin"] .admin-tab.active {
    border-color: #0f8f68 !important;
    background: #0f8f68 !important;
    color: #fff !important;
  }
}

/* Codex v77: Cargo/CRM magnetic right panel */
.rh-provider-switch {
  display: inline-flex;
  gap: 4px;
  margin-top: 6px;
  padding: 3px;
  border: 1px solid #dfe9e4;
  border-radius: 999px;
  background: #f6faf8;
}

.rh-provider-tab {
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #60736b;
  font-size: 12px;
  font-weight: 800;
}

.rh-provider-tab.active {
  background: #0e746d;
  color: #fff;
  box-shadow: 0 8px 18px rgba(14, 116, 109, .18);
}

.crm-info-view {
  display: grid;
  gap: 12px;
}

.crm-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.crm-stat-card {
  padding: 12px;
  border: 1px solid #e2ebe6;
  border-radius: 10px;
  background: #10231e;
  color: #fff;
}

.crm-stat-card small {
  display: block;
  color: #9ab0a7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.crm-stat-card strong {
  display: block;
  margin-top: 4px;
  color: #fda4af;
  font-size: 20px;
  line-height: 1.15;
}

.crm-stat-card span {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: #c7d5cf;
  font-size: 11px;
}

.crm-order-list {
  display: grid;
  gap: 9px;
}

.crm-order-card {
  padding: 12px;
  border: 1px solid #e3ebe6;
  border-radius: 10px;
  background: #fff;
}

.crm-order-card header,
.crm-money-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.crm-order-card header strong {
  min-width: 0;
  color: #15231f;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.crm-order-card p {
  margin: 8px 0;
  color: #53665e;
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crm-money-row {
  color: #26372f;
  font-size: 12px;
}

.crm-money-row b {
  color: #e11d48;
}

.crm-order-card > small {
  display: block;
  margin-top: 5px;
  color: #8a9992;
  font-size: 11px;
}

.crm-status {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-status.paid {
  background: #ecfdf5;
  color: #059669;
}

.crm-status.unpaid,
.crm-status.waiting-payment {
  background: #fff1f2;
  color: #e11d48;
}

.crm-status.partial,
.crm-status.partially-paid {
  background: #fffbeb;
  color: #d97706;
}

@media (max-width: 760px) {
  .rh-provider-switch {
    margin-top: 4px;
  }

  .crm-stat-grid {
    grid-template-columns: 1fr;
  }

  .crm-order-card header,
  .crm-money-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

/* Codex v76: profile menu and admin customer history modal polish */
.app-html .rail-user-menu {
  background: #ffffff !important;
  color: #12221d !important;
  border: 1px solid rgba(14, 116, 109, .16) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .18) !important;
}

.app-html .rail-user-menu-header {
  color: #12221d !important;
  border-bottom: 1px solid #eef2ef !important;
}

.app-html .rail-user-menu-item,
.app-html .rail-user-menu-lang select {
  color: #17231f !important;
  background: #f8faf9 !important;
  border: 1px solid #e2e8e4 !important;
  border-radius: 8px !important;
}

.app-html .rail-user-menu-item:hover {
  background: #edf8f3 !important;
  color: #0e746d !important;
}

.customer-history-modal[hidden] {
  display: none !important;
}

.customer-history-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .46);
}

.customer-history-dialog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(980px, 96vw);
  height: min(760px, 92dvh);
  overflow: hidden;
  border-radius: 12px;
  background: #fbfcfb;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .26);
}

.customer-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #e6ece8;
  background: #fff;
}

.customer-history-head small {
  color: #0e746d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.customer-history-head h3 {
  margin: 2px 0 0;
  color: #13231e;
  font-size: 18px;
}

.customer-history-close {
  width: 36px;
  height: 36px;
  border: 1px solid #dfe8e2;
  border-radius: 8px;
  background: #fff;
  color: #17231f;
  font-size: 22px;
}

.customer-history-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  border-bottom: 1px solid #e6ece8;
  background: #f4f8f6;
}

.customer-history-tab {
  flex: 0 0 190px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid #dce7e2;
  border-radius: 8px;
  background: #fff;
  color: #17231f;
  text-align: left;
}

.customer-history-tab.active {
  border-color: #0e746d;
  background: #eaf8f1;
}

.customer-history-tab strong,
.customer-history-tab span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-history-tab strong {
  font-size: 12px;
}

.customer-history-tab span {
  margin-top: 2px;
  color: #64756e;
  font-size: 11px;
}

.customer-history-body {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.customer-history-summary {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid #e4ece7;
  border-radius: 8px;
  background: #fff;
}

.customer-history-summary strong {
  color: #13231e;
}

.customer-history-summary span,
.customer-history-summary small {
  color: #62746d;
  font-size: 12px;
}

.customer-history-messages {
  display: grid;
  gap: 8px;
}

.customer-history-message {
  max-width: 78%;
  padding: 9px 11px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e4ece7;
}

.customer-history-message.outbound {
  justify-self: end;
  background: #e9f8ef;
  border-color: #d0efdc;
}

.customer-history-message header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #697a73;
  font-size: 11px;
}

.customer-history-message p {
  margin: 5px 0 0;
  color: #16231f;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .customer-history-modal {
    padding: 8px;
  }

  .customer-history-dialog {
    width: 100%;
    height: calc(100dvh - 74px);
    align-self: start;
    border-radius: 10px;
  }

  .customer-history-tabs {
    padding: 8px;
  }

  .customer-history-tab {
    flex-basis: 154px;
  }

  .customer-history-message {
    max-width: 94%;
  }
}

/* Codex v73 EOF: final mobile rail fix for non-chat pages.
   This file loads last, so this block must stay at EOF. */
@media (max-width: 760px) {
  .app-html .app-shell,
  .app-html body:not([data-view="chat"]) .app-shell,
  .app-html body[data-view="chat"] .app-shell {
    position: relative !important;
    display: grid !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "content"
      "rail" !important;
    overflow: hidden !important;
  }

  .app-html .app-shell > .icon-rail,
  .app-html body:not([data-view="chat"]) .app-shell > .icon-rail,
  .app-html body[data-view="chat"] .app-shell > .icon-rail {
    grid-area: rail !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 60 !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-template-rows: 58px !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(148, 163, 184, .25) !important;
    border-right: 0 !important;
    overflow: visible !important;
  }

  .app-html .icon-rail .rail-nav,
  .app-html .icon-rail .rail-bottom {
    display: contents !important;
  }

  .app-html .rail-brand,
  .app-html .rail-spacer {
    display: none !important;
  }

  .app-html .icon-rail .rail-btn {
    justify-self: center !important;
    align-self: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  .app-html .icon-rail .rail-btn.active {
    background: #14b870 !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(20, 184, 112, .28) !important;
  }

  .app-html .icon-rail .rail-btn.active::before {
    display: none !important;
  }

  .app-html body:not([data-view="chat"]) .app-shell > .page-wrap,
  .app-html body:not([data-view="chat"]) .app-shell > .view,
  .app-html body:not([data-view="chat"]) .app-shell > .content-area,
  .app-html body[data-view="chat"] .app-shell > #chat-view,
  .app-html body[data-view="chat"] .app-shell > .content-area {
    grid-area: content !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  .app-html .rail-panel,
  .app-html .rail-user-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }

  .app-html body[data-view="tools"] .tool-group-list {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px !important;
  }

  .app-html body[data-view="tools"] .tool-table {
    min-width: 0 !important;
    width: 100% !important;
  }

  .app-html body[data-view="tools"] .tool-table-head {
    display: none !important;
  }

  .app-html body[data-view="tools"] .tool-group-row {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "check info members"
      "check id status" !important;
    gap: 6px 10px !important;
    align-items: start !important;
    min-height: 76px !important;
    padding: 12px !important;
    margin: 0 0 10px !important;
    border: 1px solid #e7e2d8 !important;
    border-radius: 10px !important;
    background: #fff !important;
  }

  .app-html body[data-view="tools"] .tool-group-main {
    grid-area: info !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .app-html body[data-view="tools"] .tool-group-main > input {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
  }

  .app-html body[data-view="tools"] .tool-group-info {
    min-width: 0 !important;
  }

  .app-html body[data-view="tools"] .tool-group-id {
    grid-area: id !important;
    margin-left: 38px !important;
    color: #66756f !important;
    font-size: 11px !important;
    overflow-wrap: anywhere !important;
  }

  .app-html body[data-view="tools"] .tool-group-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: #14241f !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .app-html body[data-view="tools"] .tool-group-members {
    grid-area: members !important;
    justify-self: end !important;
  }

  .app-html body[data-view="tools"] .tool-group-status {
    grid-area: status !important;
    justify-self: end !important;
  }
}

/* Codex v73: final mobile rail fix for non-chat pages.
   Keep tools/devices/broadcast/admin using the same bottom menu as chat. */
@media (max-width: 760px) {
  .app-html .app-shell,
  .app-html body:not([data-view="chat"]) .app-shell,
  .app-html body[data-view="chat"] .app-shell {
    position: relative !important;
    display: grid !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) 58px !important;
    grid-template-areas:
      "content"
      "rail" !important;
    overflow: hidden !important;
  }

  .app-html .app-shell > .icon-rail,
  .app-html body:not([data-view="chat"]) .app-shell > .icon-rail,
  .app-html body[data-view="chat"] .app-shell > .icon-rail {
    grid-area: rail !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 60 !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-template-rows: 58px !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(148, 163, 184, .25) !important;
    border-right: 0 !important;
    overflow: visible !important;
  }

  .app-html .icon-rail .rail-nav,
  .app-html .icon-rail .rail-bottom {
    display: contents !important;
  }

  .app-html .rail-brand,
  .app-html .rail-spacer {
    display: none !important;
  }

  .app-html .icon-rail .rail-btn {
    justify-self: center !important;
    align-self: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }

  .app-html .icon-rail .rail-btn.active {
    background: #14b870 !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(20, 184, 112, .28) !important;
  }

  .app-html .icon-rail .rail-btn.active::before {
    display: none !important;
  }

  .app-html body:not([data-view="chat"]) .app-shell > .page-wrap,
  .app-html body:not([data-view="chat"]) .app-shell > .view,
  .app-html body:not([data-view="chat"]) .app-shell > .content-area,
  .app-html body[data-view="chat"] .app-shell > #chat-view,
  .app-html body[data-view="chat"] .app-shell > .content-area {
    grid-area: content !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  .app-html .rail-panel,
  .app-html .rail-user-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }
}
.shop-customer-drawer{position:fixed;z-index:90;top:0;right:0;width:min(430px,100vw);height:100vh;background:#f8faf9;border-left:1px solid #dce6e2;box-shadow:-24px 0 60px rgba(16,39,34,.16);display:flex;flex-direction:column}
.shop-customer-drawer[hidden]{display:none}.shop-drawer-head{padding:22px 24px 16px;background:#123b35;color:#fff;display:flex;align-items:center;justify-content:space-between}.shop-drawer-head small{color:#83d4b0;font-size:10px;letter-spacing:.18em}.shop-drawer-head h2{font:700 20px/1.2 Georgia,serif;margin:4px 0}.shop-drawer-head button{border:0;background:transparent;color:#fff;font-size:28px}.shop-buyer-card{padding:18px 22px;background:#fff;border-bottom:1px solid #e2ebe7}.shop-buyer-main{display:flex;gap:12px;align-items:center}.shop-buyer-avatar{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#187864,#72c49d);color:#fff;display:grid;place-items:center;font-weight:800}.shop-buyer-main strong,.shop-buyer-main span{display:block}.shop-buyer-main span{color:#71817b;font-size:13px;margin-top:3px}.shop-drawer-tabs{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-bottom:1px solid #dce6e2;padding:0 12px}.shop-drawer-tabs button{border:0;background:none;padding:14px 4px;color:#68766f;font-weight:650;font-size:12px;border-bottom:2px solid transparent}.shop-drawer-tabs button.active{color:#08705b;border-color:#0d8b6f}.shop-drawer-body{overflow:auto;padding:16px 18px;flex:1}.shop-drawer-item{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px;background:#fff;border:1px solid #e0e9e5;border-radius:14px;margin-bottom:10px}.shop-drawer-item img{width:56px;height:56px;object-fit:cover;border-radius:10px;background:#eef3f1}.shop-drawer-item strong{display:block;font-size:14px}.shop-drawer-item small{color:#74837c}.shop-share-btn,.shop-manual-btn{border:0;border-radius:10px;background:#0a7b63;color:white;padding:9px 11px;font-weight:700;font-size:12px}.shop-manual-box{background:#fff;border:1px solid #dce6e2;padding:14px;border-radius:14px;margin-bottom:14px}.shop-manual-box input{width:100%;box-sizing:border-box;border:1px solid #dce6e2;border-radius:9px;padding:9px;margin:4px 0}

/* Chat CRM customer workspace */
.thread-crm-btn{background:#eefaf5!important;color:#08705b!important;border-color:#bfe5d5!important}.crm-chat-drawer{position:fixed;z-index:110;right:0;top:0;width:min(460px,100vw);height:100vh;background:#f5f7f4;border-left:1px solid #dce5df;box-shadow:-24px 0 64px rgba(19,46,38,.18);display:flex;flex-direction:column}.crm-chat-drawer[hidden]{display:none}.crm-chat-head{padding:22px 24px;background:linear-gradient(135deg,#123b35,#176c59);color:#fff;display:flex;align-items:center;justify-content:space-between}.crm-chat-head small{font-size:10px;letter-spacing:.18em;color:#9de0c2}.crm-chat-head h2{font-size:22px;margin:4px 0 0}.crm-chat-head button{border:0;background:none;color:#fff;font-size:30px;cursor:pointer}.crm-chat-profile{padding:18px 22px;background:#fff;display:flex;gap:13px;align-items:center;border-bottom:1px solid #e0e7e3}.crm-chat-profile>div:last-child{min-width:0}.crm-chat-profile strong,.crm-chat-profile span,.crm-chat-profile small{display:block}.crm-chat-profile strong{font-size:17px}.crm-chat-profile span,.crm-chat-profile small{color:#687870;margin-top:3px}.crm-chat-profile small{font-size:12px}.crm-chat-avatar{width:48px;height:48px;flex:none;border-radius:15px;background:linear-gradient(145deg,#0a8066,#60bf92);display:grid!important;place-items:center;color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em}.crm-chat-tabs{display:grid;grid-template-columns:repeat(4,1fr);padding:0 10px;background:#fff;border-bottom:1px solid #dce5df}.crm-chat-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:14px 2px;font-size:12px;color:#69776f;font-weight:700;cursor:pointer}.crm-chat-tabs button.active{color:#08705b;border-color:#0c8b6d}.crm-chat-body{padding:18px;overflow:auto;flex:1}.crm-chat-loading,.crm-chat-empty{text-align:center;padding:64px 24px;color:#718078}.crm-chat-empty span{display:inline-block;padding:5px 10px;border-radius:99px;background:#e9f5ef;color:#08705b;font-size:12px;font-weight:700}.crm-chat-empty h3{font-size:20px;color:#172720;margin:18px 0 8px}.crm-chat-empty p{line-height:1.65}.crm-chat-primary,.crm-chat-form button{border:0;border-radius:11px;background:#08755e;color:#fff;padding:12px 16px;font-weight:750;cursor:pointer}.crm-chat-primary{margin-top:16px;width:100%}.crm-chat-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.crm-chat-section-title span{color:#79877f;font-size:12px}.crm-timeline-item{position:relative;display:grid;grid-template-columns:14px 1fr;gap:10px;padding:3px 0 20px}.crm-timeline-item:before{content:"";position:absolute;left:5px;top:14px;bottom:-2px;border-left:1px solid #cddbd4}.crm-timeline-item:last-child:before{display:none}.crm-timeline-item i{width:11px;height:11px;border-radius:50%;background:#17a477;margin-top:4px;box-shadow:0 0 0 4px #dff3ea;z-index:1}.crm-timeline-item strong,.crm-timeline-item span{display:block}.crm-timeline-item strong{font-size:14px;color:#20332b}.crm-timeline-item span{font-size:12px;color:#77857e;margin-top:5px}.crm-chat-form,.crm-record-card{background:#fff;border:1px solid #dde7e1;border-radius:15px;padding:14px;margin-bottom:13px}.crm-chat-form{display:grid;gap:10px}.crm-chat-form label{display:grid;gap:5px;font-size:12px;color:#63736b}.crm-chat-form input,.crm-chat-form textarea,.crm-chat-form select{box-sizing:border-box;width:100%;border:1px solid #d6e1db;border-radius:9px;background:#fbfcfb;padding:10px;color:#20302a;font:inherit}.crm-chat-form textarea{min-height:82px;resize:vertical}.crm-record-card strong,.crm-record-card span{display:block}.crm-record-card span,.crm-record-card small{color:#77857e;font-size:12px}.crm-record-card p{white-space:pre-wrap;line-height:1.55}.crm-order-card{display:grid;grid-template-columns:1fr auto;gap:6px 12px}.crm-order-card small{grid-column:1/-1}.crm-order-card b{color:#08705b}.crm-chat-open .chat-column{padding-right:min(460px,100vw)}
@media(max-width:900px){.crm-chat-open .chat-column{padding-right:0}.crm-chat-drawer{width:100vw}}
.crm-chat-phone-input{box-sizing:border-box;width:100%;margin-top:14px;padding:12px;border:1px solid #cfded7;border-radius:11px;background:#fff;font:inherit}

/* server1 精简中文后台 */
.legacy-group-nav,.legacy-template-nav,.legacy-rail-template{display:none!important}
.icon-rail{background:linear-gradient(180deg,#092b29 0%,#071b26 100%)!important;border-right:1px solid rgba(255,255,255,.08)}
.rail-btn{border-radius:14px!important}.rail-btn.active,.rail-settings-link:hover{background:#18a77c!important;color:#fff!important;box-shadow:0 10px 28px rgba(24,167,124,.25)}
.page-wrap{background:radial-gradient(circle at 90% 0,rgba(24,167,124,.08),transparent 32%),#f5f2eb!important}
.page-head h1{font-family:"Noto Serif SC","Songti SC",serif!important;letter-spacing:-.03em}
.device-card,.broadcast-grid .card,.settings-card{border:1px solid #dce5df!important;border-radius:22px!important;box-shadow:0 12px 34px rgba(18,49,43,.07)!important;background:rgba(255,255,255,.94)!important}
.device-card footer button,.broadcast-form>button,.settings-actions>button:first-child{background:#087a62!important;color:#fff!important;border-radius:12px!important}
.settings-template-card{grid-column:1/-1}.settings-template-workspace{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(340px,1.2fr);gap:28px}.template-list-heading{display:flex;justify-content:space-between;margin-bottom:14px}
@media(max-width:900px){.settings-template-workspace{grid-template-columns:1fr}}

/* API integration console — structured like a compact developer workspace. */
.api-console{overflow:hidden;border-color:#cfe1da!important;background:#fbfdfc!important}
.api-console-head{padding:24px 28px!important;background:linear-gradient(120deg,#082d2b 0%,#0d4741 68%,#126258 100%);color:#fff;border:0!important}
.api-console-head small{display:block;margin-bottom:8px;color:#83dac5;font-size:10px;font-weight:800;letter-spacing:.18em}
.api-console-head h2{margin:0 0 5px!important;color:#fff!important;font-size:24px!important}.api-console-head span{color:#b7d8d1}
.api-state-pill{align-self:center;padding:7px 12px;border:1px solid rgba(141,233,210,.36);border-radius:999px;background:rgba(8,31,29,.4);color:#a9efdd!important;font-size:12px;font-weight:800}
.api-console-grid{display:grid!important;grid-template-columns:minmax(280px,.72fr) minmax(460px,1.28fr);gap:0!important;padding:0!important}
.api-config-panel,.api-request-panel{padding:26px 28px}.api-config-panel{border-right:1px solid #dce9e4;background:#f4f8f6}
.api-panel-title{display:flex;align-items:center;gap:12px;margin-bottom:22px}.api-panel-title>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#dff2ec;color:#087663;font-size:11px;font-weight:900}.api-panel-title div{display:grid;gap:2px}.api-panel-title strong{font-size:15px;color:#152923}.api-panel-title small{font-size:12px;color:#72827c}
.api-token-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.api-token-row input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.api-request-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.api-field-wide{grid-column:1/-1}
.api-code-tabs{display:flex;gap:5px;margin-top:20px;padding:4px;border:1px solid #dbe7e2;border-radius:12px;background:#f0f5f3;width:max-content}.api-code-tabs button{border:0;border-radius:8px;padding:7px 12px;background:transparent;color:#65766f;font-size:12px;font-weight:700;cursor:pointer}.api-code-tabs button.active{background:#fff;color:#087763;box-shadow:0 2px 8px rgba(20,60,52,.1)}
.api-code-output{width:100%;margin-top:10px;padding:16px!important;border:0!important;border-radius:14px!important;background:#092724!important;color:#b9eadf!important;font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace!important;resize:vertical}.api-code-output[hidden]{display:none!important}
.api-code-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:11px;color:#72827c;font-size:11px}
.settings-page>.page-head{margin-bottom:18px}.settings-grid{align-items:start}
@media(max-width:980px){.api-console-grid{grid-template-columns:1fr}.api-config-panel{border-right:0;border-bottom:1px solid #dce9e4}}
@media(max-width:640px){.api-console-head,.api-config-panel,.api-request-panel{padding:20px!important}.api-request-fields{grid-template-columns:1fr}.api-field-wide{grid-column:auto}.api-token-row{grid-template-columns:1fr}.api-code-actions{align-items:flex-start;flex-direction:column}}
.crm-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.crm-metrics article{padding:18px 20px;border:1px solid #dce8e3;border-radius:18px;background:#fff}.crm-metrics span{display:block;color:#76847f;font-size:12px}.crm-metrics strong{display:block;margin-top:4px;color:#12342e;font-size:28px}.crm-toolbar{display:flex;gap:10px;margin-bottom:12px}.crm-toolbar input,.crm-toolbar select{border:1px solid #d7e4df;border-radius:12px;background:#fff;padding:11px 13px}.crm-toolbar input{flex:1}.crm-tabs{display:flex;gap:6px;margin-bottom:12px}.crm-tabs button{padding:9px 15px;border:1px solid #d7e4df;border-radius:11px;background:#fff;color:#52645e;font-weight:700}.crm-tabs button.active{background:#0b6255;color:#fff}.crm-workspace{display:grid;grid-template-columns:minmax(420px,1.4fr) minmax(280px,.6fr);min-height:480px;overflow:hidden}.crm-workspace>div{padding:12px}.crm-workspace aside{padding:28px;border-left:1px solid #e0e9e5;background:#f7faf8}.crm-row,.employee-row{display:flex;align-items:center;gap:14px;padding:15px;border-bottom:1px solid #e7eeeb}.crm-row>div,.employee-row>div{min-width:0;flex:1}.crm-row strong,.employee-row strong{display:block;color:#172d27}.crm-row small,.employee-row small{display:block;margin-top:4px;color:#75847e}.crm-row p{margin:7px 0 0}.crm-editor-actions{display:flex;gap:8px;margin:20px 0}.crm-editor-actions button{border:0;border-radius:10px;padding:9px 12px;background:#0b6b5c;color:#fff}.crm-customer-hero{padding-bottom:18px;border-bottom:1px solid #dce7e2}.crm-customer-hero>small{display:inline-block;padding:4px 9px;border-radius:99px;background:#dff3eb;color:#08705b;font-weight:700}.crm-mini-timeline article{display:grid;grid-template-columns:10px 1fr;gap:10px;margin:14px 0}.crm-mini-timeline i{width:9px;height:9px;margin-top:4px;border-radius:50%;background:#12a278}.crm-mini-timeline strong,.crm-mini-timeline small{display:block}.crm-mini-timeline strong{font-size:13px}.crm-mini-timeline small{margin-top:4px;color:#76857e}.employee-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#dff3ec;color:#087261;font-weight:900}.employee-row>button{border:0;background:#fff0f0;color:#b33a3a;padding:7px 10px;border-radius:8px}.developer-hero{padding:42px;border-radius:28px;background:linear-gradient(125deg,#062b28,#0d554d);color:#fff}.developer-hero small{color:#75d9c2;letter-spacing:.18em}.developer-hero h1{max-width:720px;margin:12px 0;font-size:42px}.developer-hero p{max-width:700px;color:#bfdbd5;font-size:17px}.developer-hero>div{display:flex;align-items:center;gap:18px;margin-top:24px}.developer-hero code{color:#9de8d7}.developer-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.developer-card{padding:28px}.developer-card>span,.integration-brief small{color:#07816d;font-size:10px;font-weight:900;letter-spacing:.14em}.developer-card h2{margin:10px 0}.developer-card a{color:#08715f;font-weight:800}.integration-brief{display:grid;grid-template-columns:.7fr 1.3fr;gap:40px;padding:34px}.integration-brief h2{font-size:28px}.integration-brief #integration-result.success{color:#08715f}.integration-brief #integration-result.error{color:#b23b3b}.modal-card{max-width:520px}.modal-x{float:right;border:0;background:transparent;font-size:24px}@media(max-width:800px){.crm-metrics,.developer-grid{grid-template-columns:1fr 1fr}.crm-workspace,.integration-brief{grid-template-columns:1fr}.crm-workspace aside{border-left:0;border-top:1px solid #e0e9e5}.developer-hero{padding:28px}.developer-hero h1{font-size:31px}.crm-toolbar{flex-direction:column}}@media(max-width:520px){.crm-metrics{grid-template-columns:1fr}}
.thread-avatar-text,.message-avatar-text{display:none!important}.thread-avatar,.message-avatar{background:#e7f2ed!important}.thread-avatar:after,.message-avatar:after{content:"";width:45%;height:45%;border-radius:50%;background:#8db7a7;box-shadow:0 9px 0 -3px #8db7a7}
.message-more{position:relative;margin-left:auto}.message-more-btn{border:0!important;background:transparent!important;color:#73837d!important;padding:0 6px!important;letter-spacing:1px}.message-more-menu{position:absolute;z-index:30;right:0;top:25px;min-width:130px;padding:7px;background:#fff;border:1px solid #dce6e1;border-radius:12px;box-shadow:0 16px 40px rgba(10,43,35,.16)}.message-more-menu button{display:block;width:100%;padding:9px 11px;border:0;background:transparent;text-align:left;border-radius:8px;color:#183b34}.message-more-menu button:hover{background:#edf6f2}.message-reaction{display:inline-flex;margin-top:7px;padding:3px 8px;border-radius:999px;background:#fff;border:1px solid #d8e5df;font-size:16px}
.media-unavailable{display:flex;align-items:center;gap:10px;min-width:230px;margin-top:8px;padding:14px;border:1px dashed #b9cbc3;border-radius:12px;background:rgba(255,255,255,.55);color:#64746d}.media-unavailable>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#e1eee8;color:#197a64;font-size:22px}.media-unavailable strong,.media-unavailable small{display:block}.media-unavailable strong{font-size:13px;color:#30443c}.media-unavailable small{margin-top:3px;font-size:11px}

/* Refined conversation list: calm hierarchy, fixed time lane, compact account identity. */
.app-html body[data-view="chat"] .conversation{grid-template-columns:48px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;min-height:82px!important;padding:12px 16px 12px 14px!important}.app-html body[data-view="chat"] .conversation .avatar{width:44px!important;height:44px!important;box-shadow:0 3px 10px rgba(23,52,43,.1)!important}.app-html body[data-view="chat"] .conversation-copy{display:grid;gap:4px;overflow:visible!important}.conversation-title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0}.conversation-title-row strong{display:block!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px!important;font-weight:720!important;line-height:1.25!important;color:#15221e!important}.conversation-title-row time{justify-self:end;white-space:nowrap;color:#7b8983;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums}.conversation.active .conversation-title-row time{color:#07805f}.conversation-account-row{display:flex;align-items:center;gap:7px;min-width:0}.conversation-account-chip{display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 8px);padding:2px 7px;border-radius:999px;background:#edf3f0;color:#5d7068;font-size:10px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-account-chip i{width:6px;height:6px;flex:none;border-radius:50%;background:#17a778;box-shadow:0 0 0 2px rgba(23,167,120,.12)}.conversation-kind-text{padding-left:7px;border-left:1px solid #d7e1dc;color:#73817b;font-size:10px;white-space:nowrap}.app-html body[data-view="chat"] .conversation-copy p{max-width:calc(100% - 8px);margin:0!important;color:#72817a!important;font-size:11.5px!important;line-height:1.35!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-unread{position:absolute;right:15px;bottom:13px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#0ea875;color:#fff;font-size:9px;box-shadow:0 2px 7px rgba(14,168,117,.25)}.app-html body[data-view="chat"] .conversation.active{background:linear-gradient(90deg,rgba(12,151,105,.12),rgba(12,151,105,.035))!important}.app-html body[data-view="chat"] .conversation:hover{background:#f3f8f5!important}