/*
 * Arleyn WhatsApp theme 0.15.0
 * ------------------------------------------------------------
 * This file is the ONLY final visual theme layer.
 * styles.css keeps structural/layout history for compatibility.
 * All neutral UI surfaces are normalized here.
 * Strong colors are reserved for semantic states only.
 */

.professional-ui {
  --wa0: #101010;
  --wa1: #161717;
  --wa2: #1d1f1f;
  --wa3: #202222;
  --wa4: #292b2b;
  --wa5: #2e2f2f;
  --wa6: #383a3a;
  --wa-line: rgba(255,255,255,.075);
  --wa-line-strong: rgba(255,255,255,.13);
  --wa-text: #f0f2f5;
  --wa-soft: #d5d7d8;
  --wa-muted: #9a9c9e;
  --wa-faint: #707274;
  --wa-green: #00d756;
  --wa-action: #00a884;
  --wa-outgoing: #005c4b;
  --wa-danger: #e56b75;
  --wa-warning: #d8b34c;
  --wa-info: #53bdeb;

  /* legacy tokens consumed by old structural rules */
  --ui-bg: var(--wa1) !important;
  --ui-bg-elevated: var(--wa1) !important;
  --ui-surface: var(--wa3) !important;
  --ui-surface-2: var(--wa5) !important;
  --ui-surface-3: var(--wa5) !important;
  --ui-border: var(--wa-line) !important;
  --ui-border-strong: var(--wa-line-strong) !important;
  --ui-text: var(--wa-text) !important;
  --ui-text-soft: var(--wa-soft) !important;
  --ui-muted: var(--wa-muted) !important;
  --ui-faint: var(--wa-faint) !important;
  --ui-accent: var(--wa-action) !important;
  --ui-accent-strong: #008f72 !important;
  --ui-accent-soft: rgba(0,168,132,.10) !important;
}

/* ---------- universal neutral focus ---------- */
.professional-ui button:focus-visible,
.professional-ui input:focus-visible,
.professional-ui textarea:focus-visible,
.professional-ui select:focus-visible {
  outline: 1px solid rgba(255,255,255,.34) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

html, body, .professional-ui, .professional-ui .app {
  background: var(--wa0) !important;
  color: var(--wa-text) !important;
}

/* ---------- rail ---------- */
.professional-ui .workspace-rail {
  background: var(--wa2) !important;
  border-color: var(--wa-line) !important;
}
.professional-ui .workspace-rail-btn {
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #b8babb !important;
  box-shadow: none !important;
}
.professional-ui .workspace-rail-btn:hover,
.professional-ui .workspace-rail-btn.active {
  background: #343636 !important;
  color: #fff !important;
}
.professional-ui .workspace-rail-btn.active::before { display:none !important; }
.professional-ui #railUnreadBtn { display:none !important; }
.professional-ui .workspace-rail-badge,
.professional-ui .sidebar-unread-badge,
.professional-ui .conversation .badge,
.professional-ui .conversation-archived-entry-side.has-unread {
  background: var(--wa-green) !important;
  color: #07150f !important;
  border-color: var(--wa2) !important;
  box-shadow: none !important;
  font-weight: 900 !important;
}
.professional-ui #railInboxBtn .workspace-rail-badge,
.professional-ui #railArchivedBtn .workspace-rail-badge {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  font-size: calc(10.5px * var(--app-small-text-scale)) !important;
}
.professional-ui .workspace-rail-activity-dot { background: var(--wa-green) !important; }

/* ---------- sidebar / inbox ---------- */
.professional-ui .sidebar,
.professional-ui .sidebar-header,
.professional-ui .search-wrap,
.professional-ui .conversation-filter-shell,
.professional-ui .label-filter-bar,
.professional-ui .conversation-list {
  background: var(--wa1) !important;
  border-color: var(--wa-line) !important;
  box-shadow: none !important;
}
.professional-ui .sidebar-header { border-bottom:0 !important; }
.professional-ui .workspace-mark { display:none !important; }
.professional-ui .sidebar-brand-copy > strong,
.professional-ui .sidebar-brand-title-row > strong { color:var(--wa-text) !important; }
.professional-ui #connectionState[data-status="online"] { background:var(--wa-green) !important; }
.professional-ui .search-wrap input {
  border:0 !important;
  border-radius:8px !important;
  background:var(--wa5) !important;
  color:var(--wa-text) !important;
  box-shadow:none !important;
}
.professional-ui .search-wrap input:focus,
.professional-ui .search-wrap input:focus-visible { outline:0 !important; box-shadow:none !important; }
.professional-ui .conversation-filter,
.professional-ui .conversation-filter-more {
  background:transparent !important;
  border-color:rgba(255,255,255,.11) !important;
  color:var(--wa-soft) !important;
}
.professional-ui .conversation-filter:hover,
.professional-ui .conversation-filter.active,
.professional-ui .conversation-filter-more:hover {
  background:var(--wa5) !important;
  color:#fff !important;
}
.professional-ui .conversation,
.professional-ui .conversation.control-human,
.professional-ui .conversation.control-bot,
.professional-ui .conversation.control-blocked {
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.professional-ui .conversation:hover,
.professional-ui .conversation.active,
.professional-ui .conversation.control-human:hover,
.professional-ui .conversation.control-human.active,
.professional-ui .conversation.control-bot:hover,
.professional-ui .conversation.control-bot.active,
.professional-ui .conversation.control-blocked:hover,
.professional-ui .conversation.control-blocked.active { background:var(--wa5) !important; }
.professional-ui .conv-main { border-bottom-color:var(--wa-line) !important; }
.professional-ui .conv-row strong { color:var(--wa-text) !important; }
.professional-ui .conv-time, .professional-ui .conv-preview { color:var(--wa-muted) !important; }
.professional-ui .conv-account-row,
.professional-ui .conv-control-status,
.professional-ui .conv-service-window,
.professional-ui .conv-account-chip,
.professional-ui .conv-archived-chip,
.professional-ui .conv-label-mini { background:transparent !important; box-shadow:none !important; }

/* ---------- empty chat + header ---------- */
.professional-ui .chat,
.professional-ui .chat.empty,
.professional-ui .chat.empty .messages,
.professional-ui .empty-state { background:var(--wa0) !important; }
.professional-ui .chat-header,
.professional-ui .selection-header { background:var(--wa1) !important; border-color:var(--wa-line) !important; box-shadow:none !important; }
.professional-ui .chat-title > strong { color:var(--wa-text) !important; }
.professional-ui .chat-title small, .professional-ui .chat-control-status { color:var(--wa-muted) !important; }
.professional-ui .header-action,
.professional-ui .retention-btn,
.professional-ui .chat-header .icon-btn { background:transparent !important; border:0 !important; color:#c5c7c8 !important; box-shadow:none !important; }
.professional-ui .header-action:hover:not(:disabled),
.professional-ui .retention-btn:hover:not(:disabled),
.professional-ui .chat-header .icon-btn:hover:not(:disabled) { background:var(--wa5) !important; color:#fff !important; }
.professional-ui .empty-state-visual { background:var(--wa3) !important; border:0 !important; color:#bfc1c1 !important; box-shadow:none !important; }
.professional-ui .empty-state h2 { color:var(--wa-text) !important; }
.professional-ui .empty-state p, .professional-ui .empty-state-features { color:var(--wa-muted) !important; }
.professional-ui .empty-state-features i,
.professional-ui .empty-state-features span::before { color:var(--wa-muted) !important; }

/* ---------- messages / replies / reactions ---------- */
.professional-ui .messages { background-color:transparent !important; }
.professional-ui .message { border:0 !important; box-shadow:0 1px .5px rgba(0,0,0,.25) !important; }
.professional-ui .message.inbound { background:var(--wa3) !important; color:var(--wa-text) !important; }
.professional-ui .message.outbound { background:var(--wa-outgoing) !important; color:var(--wa-text) !important; }
.professional-ui .message-meta { color:rgba(225,228,230,.60) !important; }
.professional-ui .message-reply-quote,
.professional-ui .message-reply-bar,
.professional-ui .message-reply-content { border-color:var(--wa-line) !important; background:rgba(0,0,0,.13) !important; }
.professional-ui .message-row.reply-highlight .message { box-shadow:0 0 0 1px rgba(255,255,255,.22),0 1px .5px rgba(0,0,0,.25) !important; }
.professional-ui .message-reaction-chip,
.professional-ui .message-reactions-pill { border-color:var(--wa-line-strong) !important; background:var(--wa4) !important; color:var(--wa-soft) !important; }
.professional-ui .message-reaction-chip.mine,
.professional-ui .message-reactions-pill.mine { border-color:rgba(0,168,132,.35) !important; background:#24423a !important; color:#dff7ef !important; }
.professional-ui .reaction-picker { border-color:var(--wa-line-strong) !important; background:var(--wa4) !important; box-shadow:0 8px 24px rgba(0,0,0,.45) !important; }
.professional-ui .reaction-picker button { background:transparent !important; color:var(--wa-text) !important; }
.professional-ui .reaction-picker button:hover { background:var(--wa6) !important; }

/* ---------- composer + auxiliary bars ---------- */
.professional-ui .composer-shell { background:transparent !important; border:0 !important; }
.professional-ui .composer,
.professional-ui .composer-shell .composer { background:var(--wa3) !important; border:0 !important; box-shadow:0 1px 4px rgba(0,0,0,.34) !important; }
.professional-ui .composer:focus-within,
.professional-ui .composer-shell .composer:focus-within,
.professional-ui .composer textarea:focus,
.professional-ui .composer textarea:focus-visible { outline:0 !important; border:0 !important; box-shadow:none !important; }
.professional-ui .composer textarea { background:transparent !important; color:var(--wa-text) !important; border:0 !important; }
.professional-ui .attach-btn,
.professional-ui .emoji-btn,
.professional-ui #sendBtn,
.professional-ui #sendBtn:not(:disabled) { background:transparent !important; border:0 !important; color:#c6c8c9 !important; box-shadow:none !important; }
.professional-ui .attach-btn:hover:not(:disabled),
.professional-ui .emoji-btn:hover:not(:disabled),
.professional-ui #sendBtn:hover:not(:disabled) { background:var(--wa5) !important; color:#fff !important; }
.professional-ui .reply-composer-bar,
.professional-ui .attachment-tray,
.professional-ui .send-account-bar { border-color:var(--wa-line) !important; background:var(--wa3) !important; box-shadow:none !important; }
.professional-ui .reply-composer-accent { background:var(--wa-action) !important; }
.professional-ui .reply-cancel-btn { background:transparent !important; color:var(--wa-muted) !important; }
.professional-ui .reply-cancel-btn:hover { background:var(--wa5) !important; color:#fff !important; }
.professional-ui .scroll-bottom-btn { border-color:var(--wa-line) !important; background:var(--wa3) !important; color:#c3c5c6 !important; box-shadow:0 3px 10px rgba(0,0,0,.35) !important; }
.professional-ui .scroll-bottom-btn:hover { background:var(--wa5) !important; color:#fff !important; }
.professional-ui .scroll-bottom-btn.has-new .new-message-badge { background:var(--wa-green) !important; }

/* ---------- 24h banner ---------- */
.professional-ui .service-window-banner,
.professional-ui .service-window-banner.open,
.professional-ui .service-window-banner.closed { border-color:var(--wa-line) !important; background:rgba(31,31,31,.97) !important; box-shadow:0 1px 4px rgba(0,0,0,.24) !important; }
.professional-ui .service-window-copy strong { color:var(--wa-text) !important; }
.professional-ui .service-window-copy small { color:var(--wa-muted) !important; }
.professional-ui .service-window-banner.closed .service-window-icon { color:var(--wa-warning) !important; }
.professional-ui .service-window-banner.open .service-window-icon { color:var(--wa-muted) !important; }
.professional-ui .service-window-template-btn { border-color:var(--wa-line-strong) !important; background:var(--wa4) !important; color:var(--wa-text) !important; box-shadow:none !important; }
.professional-ui .service-window-template-btn:hover { background:var(--wa6) !important; }

/* ---------- emoji ---------- */
.professional-ui .emoji-picker { border-color:var(--wa-line-strong) !important; background:var(--wa4) !important; box-shadow:0 10px 30px rgba(0,0,0,.5) !important; }
.professional-ui .emoji-picker-header { border-color:var(--wa-line) !important; background:var(--wa3) !important; color:var(--wa-text) !important; }
.professional-ui .emoji-picker-close { background:transparent !important; color:var(--wa-muted) !important; }
.professional-ui .emoji-picker-close:hover { background:var(--wa6) !important; color:#fff !important; }
.professional-ui .emoji-picker button:not(.emoji-picker-close) { background:transparent !important; }
.professional-ui .emoji-picker button:not(.emoji-picker-close):hover { background:var(--wa6) !important; }

/* ---------- contact / labels ---------- */
.professional-ui .contact-drawer,
.professional-ui .contact-drawer-content { background:var(--wa1) !important; border-color:var(--wa-line) !important; }
.professional-ui .contact-drawer-header,
.professional-ui .contact-profile-summary,
.professional-ui .contact-editor-section,
.professional-ui .contact-photo-editor,
.professional-ui .label-catalog-manager,
.professional-ui .label-create-block,
.professional-ui .label-picker-row { border-color:var(--wa-line) !important; background:var(--wa3) !important; box-shadow:none !important; }
.professional-ui .label-manager-row { border-color:var(--wa-line) !important; background:transparent !important; }
.professional-ui .label-manager-row:hover { background:var(--wa5) !important; }
.professional-ui .label-manager-row.editing { border-color:rgba(255,255,255,.22) !important; background:var(--wa5) !important; box-shadow:none !important; }
.professional-ui .label-manager-action { border-color:var(--wa-line) !important; background:var(--wa4) !important; color:var(--wa-soft) !important; }
.professional-ui .label-manager-action:hover { background:var(--wa6) !important; color:#fff !important; }
.professional-ui .label-manager-action.danger { color:#ef8b92 !important; }

/* ---------- image viewer ---------- */
.professional-ui .image-viewer { background:rgba(10,10,10,.96) !important; color:var(--wa-text) !important; }
.professional-ui .image-viewer-header { border-color:var(--wa-line) !important; background:rgba(22,23,23,.98) !important; }
.professional-ui .image-viewer-title strong { color:var(--wa-text) !important; }
.professional-ui .image-viewer-title small { color:var(--wa-muted) !important; }
.professional-ui .image-viewer-stage { background:#0d0d0d !important; }
.professional-ui .image-viewer-icon-btn,
.professional-ui .image-viewer-nav { border-color:var(--wa-line) !important; background:rgba(41,43,43,.92) !important; color:var(--wa-text) !important; box-shadow:none !important; }
.professional-ui .image-viewer-icon-btn:hover,
.professional-ui .image-viewer-nav:hover { background:var(--wa6) !important; }
.professional-ui .image-viewer-zoom-controls { border-color:var(--wa-line) !important; background:rgba(22,23,23,.95) !important; }
.professional-ui .image-viewer-zoom-value { color:var(--wa-soft) !important; }

/* ---------- media gallery ---------- */
.professional-ui .media-modal-card,
.professional-ui .media-modal-toolbar,
.professional-ui .media-tabs,
.professional-ui .media-grid { background:var(--wa1) !important; border-color:var(--wa-line) !important; }
.professional-ui .media-tab { background:transparent !important; color:var(--wa-muted) !important; border-color:transparent !important; }
.professional-ui .media-tab:hover { background:var(--wa5) !important; color:#fff !important; }
.professional-ui .media-tab.active { background:var(--wa5) !important; color:var(--wa-text) !important; border-color:transparent !important; }
.professional-ui .media-item { border-color:var(--wa-line) !important; background:var(--wa3) !important; box-shadow:none !important; }
.professional-ui .media-item:hover { background:var(--wa5) !important; }

/* ---------- settings / all modals ---------- */
.professional-ui .modal { background:rgba(0,0,0,.75) !important; }
.professional-ui .modal-card,
.professional-ui .settings-hub-card,
.professional-ui .appearance-settings-card,
.professional-ui .bot-config-card,
.professional-ui .template-manager-card,
.professional-ui .new-chat-card,
.professional-ui .blocked-modal-card,
.professional-ui .business-profile-card,
.professional-ui .confirm-action-card,
.professional-ui .link-safety-card,
.professional-ui .login-card { border-color:var(--wa-line) !important; background:var(--wa1) !important; color:var(--wa-text) !important; box-shadow:0 18px 55px rgba(0,0,0,.50) !important; }
.professional-ui .modal-header,
.professional-ui .settings-hub-header,
.professional-ui .template-manager-toolbar,
.professional-ui .media-modal-toolbar,
.professional-ui .bot-config-footer,
.professional-ui .new-chat-actions,
.professional-ui .business-profile-actions,
.professional-ui .appearance-settings-actions { border-color:var(--wa-line) !important; background:var(--wa1) !important; }
.professional-ui .settings-hub-body,
.professional-ui .appearance-settings-body,
.professional-ui .bot-config-body,
.professional-ui .new-chat-content,
.professional-ui .business-profile-content,
.professional-ui .blocked-contacts-list,
.professional-ui .template-manager-layout,
.professional-ui .template-manager-list-panel,
.professional-ui .template-editor-panel,
.professional-ui .template-editor-form { background:var(--wa1) !important; border-color:var(--wa-line) !important; }
.professional-ui .settings-category-heading strong { color:var(--wa-soft) !important; }
.professional-ui .settings-menu-row { border-color:transparent !important; background:transparent !important; box-shadow:none !important; }
.professional-ui .settings-menu-row:hover,
.professional-ui .settings-menu-row:focus-visible { background:var(--wa5) !important; }
.professional-ui .settings-menu-icon { border:0 !important; background:var(--wa4) !important; color:#c6c8c9 !important; }
.professional-ui .settings-menu-copy { border-bottom-color:var(--wa-line) !important; }
.professional-ui .settings-menu-copy strong { color:var(--wa-text) !important; }
.professional-ui .settings-menu-copy small,
.professional-ui .settings-menu-arrow,
.professional-ui .settings-category-heading small { color:var(--wa-muted) !important; }
.professional-ui .secondary-action { border-color:var(--wa-line-strong) !important; background:var(--wa4) !important; color:var(--wa-text) !important; }
.professional-ui .secondary-action:hover:not(:disabled) { background:var(--wa6) !important; }
.professional-ui .primary-action { border-color:var(--wa-action) !important; background:var(--wa-action) !important; color:#061711 !important; }

/* inputs across settings */
.professional-ui .modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.professional-ui .modal-card textarea,
.professional-ui .modal-card select,
.professional-ui .contact-drawer input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.professional-ui .contact-drawer textarea,
.professional-ui .contact-drawer select { border:1px solid var(--wa-line-strong) !important; background:var(--wa5) !important; color:var(--wa-text) !important; box-shadow:none !important; }
.professional-ui .modal-card input:focus,
.professional-ui .modal-card textarea:focus,
.professional-ui .modal-card select:focus,
.professional-ui .contact-drawer input:focus,
.professional-ui .contact-drawer textarea:focus,
.professional-ui .contact-drawer select:focus { border-color:rgba(255,255,255,.25) !important; outline:0 !important; box-shadow:none !important; }

/* ---------- appearance ---------- */
.professional-ui .appearance-setting-block,
.professional-ui .appearance-preview-card,
.professional-ui .chat-wallpaper-preview { border-color:var(--wa-line) !important; background:var(--wa3) !important; box-shadow:none !important; }
.professional-ui .appearance-preview-message.inbound { background:var(--wa3) !important; color:var(--wa-text) !important; }
.professional-ui .appearance-preview-message.outbound { background:var(--wa-outgoing) !important; color:var(--wa-text) !important; }
.professional-ui .appearance-value { background:var(--wa5) !important; color:var(--wa-soft) !important; }

/* ---------- business profile / schedule ---------- */
.professional-ui .business-profile-section { border-color:var(--wa-line) !important; background:transparent !important; box-shadow:none !important; }
.professional-ui .business-schedule-rows { border-color:var(--wa-line) !important; }
.professional-ui .business-schedule-row { border-color:var(--wa-line) !important; background:transparent !important; box-shadow:none !important; }
.professional-ui .business-schedule-row input[type="time"] { border-color:var(--wa-line-strong) !important; background:var(--wa5) !important; color:var(--wa-text) !important; }
.professional-ui .business-schedule-row input[type="time"]:disabled { background:#222 !important; color:#777 !important; }
.professional-ui .business-readonly-row,
.professional-ui .business-description-preview { border-color:var(--wa-line) !important; background:var(--wa3) !important; color:var(--wa-soft) !important; }

/* ---------- bot configuration / rules ---------- */
.professional-ui .bot-config-section,
.professional-ui .bot-teach-section,
.professional-ui .bot-rule-card,
.professional-ui .bot-knowledge-card,
.professional-ui .bot-knowledge-empty,
.professional-ui .bot-rules-empty,
.professional-ui .bot-knowledge-editor { border-color:var(--wa-line) !important; background:var(--wa3) !important; box-shadow:none !important; }
.professional-ui .bot-rule-delete { border-color:var(--wa-line-strong) !important; background:var(--wa4) !important; color:#e58a91 !important; }
.professional-ui .bot-rule-delete:hover { background:var(--wa6) !important; }
.professional-ui .bot-setting-switch i,
.professional-ui .bot-toggle i,
.professional-ui .conversation-bot-switch i { background:#555858 !important; }
.professional-ui .bot-setting-switch input:checked + i,
.professional-ui .bot-toggle input:checked + i,
.professional-ui .conversation-bot-switch.enabled i { background:var(--wa-action) !important; }

/* moved from runtime-injected JS */
.professional-ui .bot-feedback-controls { display:flex; align-items:center; gap:6px; margin-top:6px; opacity:.88; }
.professional-ui .bot-feedback-controls button { border:1px solid var(--wa-line-strong); background:var(--wa4); color:inherit; border-radius:999px; padding:3px 8px; font:inherit; font-size:calc(11px * var(--app-small-text-scale)); line-height:1.2; cursor:pointer; }
.professional-ui .bot-feedback-controls button:hover { background:var(--wa6); }
.professional-ui .bot-feedback-controls button.is-selected { border-color:rgba(255,255,255,.30); background:var(--wa5); opacity:1; }
.professional-ui .bot-feedback-controls button:disabled { cursor:wait; opacity:.55; }
.professional-ui .bot-feedback-learned { font-size:calc(10px * var(--app-small-text-scale)); color:var(--wa-muted); white-space:nowrap; }
.professional-ui .bot-intelligence-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.professional-ui .bot-intelligence-controls label { display:flex; flex-direction:column; gap:5px; font-size:calc(12px * var(--app-text-scale)); }
.professional-ui .bot-intelligence-controls input,
.professional-ui .bot-intelligence-controls select { min-width:0; }
.professional-ui .bot-intel-overlay { position:fixed; inset:0; z-index:12000; background:rgba(0,0,0,.76); display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden; box-sizing:border-box; }
.professional-ui .bot-intel-card { width:min(780px,96vw); max-height:88vh; overflow:auto; background:var(--wa1); color:var(--wa-text); border:1px solid var(--wa-line-strong); border-radius:12px; box-shadow:0 18px 55px rgba(0,0,0,.52); padding:18px; }
.professional-ui .bot-intel-card h3 { margin:0 0 12px; }
.professional-ui .bot-intel-card pre { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--wa0); border:1px solid var(--wa-line); border-radius:8px; padding:12px; font-size:calc(12px * var(--app-text-scale)); }
.professional-ui .bot-intel-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.professional-ui .bot-intel-actions button,
.professional-ui .bot-diagnostic-btn { cursor:pointer; border:1px solid var(--wa-line-strong); background:var(--wa4); color:var(--wa-text); border-radius:7px; padding:7px 10px; }
.professional-ui .bot-intel-actions button:hover,
.professional-ui .bot-diagnostic-btn:hover { background:var(--wa6); }
.professional-ui .bot-simulate-text { width:100%; min-height:100px; resize:vertical; }
.professional-ui .bot-test-card { width:min(1040px,98vw); height:min(760px,calc(100dvh - 40px)); max-height:calc(100dvh - 40px); min-height:0; display:grid; grid-template-columns:220px minmax(0,1fr); padding:0; overflow:hidden; box-sizing:border-box; }
.professional-ui .bot-test-sidebar { min-height:0; border-right:1px solid var(--wa-line); padding:14px; overflow:auto; overscroll-behavior:contain; background:var(--wa0); }
.professional-ui .bot-test-main { min-width:0; min-height:0; height:100%; overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; }
.professional-ui .bot-test-header { position:relative; z-index:2; padding:12px 14px; border-bottom:1px solid var(--wa-line); display:flex; gap:8px; align-items:center; flex-wrap:wrap; background:var(--wa1); }
.professional-ui .bot-test-messages { min-height:0; overflow:auto; overscroll-behavior:contain; padding:18px; background:var(--wa0); }
.professional-ui .bot-test-row { display:flex; margin:7px 0; }
.professional-ui .bot-test-row.inbound { justify-content:flex-end; }
.professional-ui .bot-test-row.outbound,
.professional-ui .bot-test-row.system { justify-content:flex-start; }
.professional-ui .bot-test-bubble { max-width:min(680px,84%); padding:8px 10px; border-radius:8px; background:var(--wa3); box-shadow:0 1px 1px rgba(0,0,0,.25); overflow-wrap:anywhere; }
.professional-ui .bot-test-row.inbound .bot-test-bubble { background:var(--wa-outgoing); }
.professional-ui .bot-test-meta { margin-top:5px; font-size:calc(11px * var(--app-small-text-scale)); color:var(--wa-muted); display:flex; gap:7px; flex-wrap:wrap; }
.professional-ui .bot-test-compose { position:relative; z-index:2; display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--wa-line); background:var(--wa1); }
.professional-ui .bot-test-diagnostic { max-height:180px; overflow:auto; border-top:1px solid var(--wa-line); padding:8px 12px; font-size:calc(12px * var(--app-text-scale)); display:none; background:var(--wa0); }
.professional-ui .bot-test-session { display:block; width:100%; text-align:left; margin:5px 0; border:1px solid var(--wa-line); background:var(--wa3); color:var(--wa-text); border-radius:7px; padding:7px; }
.professional-ui .bot-test-session:hover { background:var(--wa5); }
.professional-ui .commercial-data-table { width:100%; border-collapse:collapse; font-size:calc(12px * var(--app-text-scale)); }
.professional-ui .commercial-data-table th,
.professional-ui .commercial-data-table td { border-bottom:1px solid var(--wa-line); padding:6px; vertical-align:top; text-align:left; }

/* classes replacing old inline styles */
.professional-ui .bot-message-format-controls { margin-top:16px; padding:14px; border:1px solid var(--wa-line); border-radius:10px; background:var(--wa3); }
.professional-ui .bot-message-format-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.professional-ui .bot-message-format-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:14px; }
.professional-ui .bot-message-format-panel { padding:12px; border:1px solid var(--wa-line); border-radius:8px; background:var(--wa1); }
.professional-ui .bot-format-toggle-gap { margin-top:12px; }
.professional-ui .bot-format-field-gap { margin-top:8px; }
.professional-ui .bot-format-help { margin-top:10px; color:var(--wa-muted); }
.professional-ui .bot-test-session-list { margin-top:10px; }
.professional-ui .bot-test-availability-toggle { margin-left:auto; }
.professional-ui .bot-test-empty-state { opacity:.72; text-align:center; margin-top:70px; color:var(--wa-muted); }
.professional-ui .bot-intel-health-card,
.professional-ui .bot-intel-shadow-card { padding:10px; border:1px solid var(--wa-line); border-radius:8px; background:var(--wa3); }
.professional-ui .bot-intel-health-card { margin-bottom:12px; }
.professional-ui .bot-intel-shadow-card { margin:12px 0; }
.professional-ui .bot-intel-table-scroll { overflow:auto; max-height:330px; }
.professional-ui .bot-teaching-preview-card { max-width:820px; }
.professional-ui .bot-teaching-preview-pre { white-space:pre-wrap; max-height:55vh; overflow:auto; background:var(--wa0) !important; padding:12px; border-radius:8px; }
.professional-ui .blocked-empty-icon { font-size:calc(36px * var(--app-text-scale)); }
.professional-ui .settings-full-width-gap { display:block; width:100%; margin-top:8px; }
.professional-ui .settings-top-gap { margin-top:10px; }

/* ---------- templates / new chat ---------- */
.professional-ui .template-manager-card,
.professional-ui .template-manager-list-panel,
.professional-ui .template-editor-panel,
.professional-ui .template-editor-form,
.professional-ui .template-buttons-section,
.professional-ui .template-arleyn-variables,
.professional-ui .template-header-section,
.professional-ui .template-header-sample,
.professional-ui .template-variable-examples,
.professional-ui .template-format-toolbar,
.professional-ui .new-chat-template-preview,
.professional-ui .new-chat-template-media,
.professional-ui .new-chat-template-media-item { border-color:var(--wa-line) !important; background:var(--wa3) !important; box-shadow:none !important; }
.professional-ui .template-manager-item { background:transparent !important; color:var(--wa-text) !important; }
.professional-ui .template-manager-item:hover,
.professional-ui .template-manager-item.active { background:var(--wa5) !important; border-color:var(--wa-line) !important; }
.professional-ui .template-manager-preview-message { background:var(--wa3) !important; color:var(--wa-text) !important; box-shadow:0 1px 2px rgba(0,0,0,.25) !important; }
.professional-ui .template-preview-footer,
.professional-ui .template-manager-auto-note,
.professional-ui .new-chat-template-auto-vars { color:var(--wa-muted) !important; }
.professional-ui .template-format-toolbar button,
.professional-ui .template-arleyn-variable-chips button,
.professional-ui .new-chat-template-media-item button { border-color:var(--wa-line) !important; background:var(--wa4) !important; color:var(--wa-soft) !important; }
.professional-ui .template-format-toolbar button:hover,
.professional-ui .template-arleyn-variable-chips button:hover,
.professional-ui .new-chat-template-media-item button:hover { background:var(--wa6) !important; color:#fff !important; }
/* status badge colors are semantic; keep only their container neutral */
.professional-ui .template-status-badge { box-shadow:none !important; }
.professional-ui .new-chat-template-send-mode > label:not(.bot-field) { border-color:var(--wa-line) !important; background:var(--wa3) !important; color:var(--wa-text) !important; }
.professional-ui .new-chat-template-send-mode > label:not(.bot-field):has(input:checked) { border-color:var(--wa-line-strong) !important; background:var(--wa5) !important; }

/* ---------- blocked ---------- */
.professional-ui .blocked-contacts-list { background:var(--wa1) !important; }
.professional-ui .blocked-contact-row { border-color:var(--wa-line) !important; background:var(--wa3) !important; box-shadow:none !important; }
.professional-ui .blocked-contact-row:hover { background:var(--wa5) !important; }
.professional-ui .blocked-status { background:var(--wa4) !important; border-color:var(--wa-line) !important; color:var(--wa-muted) !important; }

/* ---------- link safety / confirmation ---------- */
.professional-ui .confirm-action-card,
.professional-ui .link-safety-card { background:var(--wa1) !important; border-color:var(--wa-line) !important; }
.professional-ui .link-safety-url,
.professional-ui .link-safety-detail { background:var(--wa3) !important; border-color:var(--wa-line) !important; }
/* safe/warning/danger accents remain semantic */

/* ---------- toasts: neutral by default; error remains semantic ---------- */
.professional-ui .toast { background:var(--wa4) !important; border-color:var(--wa-line-strong) !important; color:var(--wa-text) !important; box-shadow:0 8px 24px rgba(0,0,0,.45) !important; }
.professional-ui .toast.error { border-color:rgba(229,107,117,.4) !important; color:#ffc3c8 !important; }

/* ---------- login ---------- */
.professional-ui .login-screen,
.login-screen { background:var(--wa0) !important; }
.professional-ui .login-card,
.login-card { background:var(--wa1) !important; border-color:var(--wa-line) !important; }

/* ---------- scrollbars ---------- */
.professional-ui *,
.professional-ui .bot-config-body,
.professional-ui .template-editor-form,
.professional-ui .template-manager-list { scrollbar-color:#555858 transparent !important; }
.professional-ui *::-webkit-scrollbar-thumb { background:#555858 !important; }

@media (max-width:760px) {
  .professional-ui .bot-intel-overlay { padding:8px; }
  .professional-ui .bot-test-card { width:100%; height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .professional-ui .bot-test-sidebar { display:none; }
  .professional-ui .bot-test-header { padding:9px 10px; }
  .professional-ui .bot-test-availability-toggle { margin-left:0; }
  .professional-ui .bot-test-messages { padding:12px; }
}