/* Dark mode only — light-mode stripped 2026-06-12.
           Cursor: default override dropped so text is naturally selectable. */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        input, textarea, select, [contenteditable] { cursor: text; caret-color: auto; }
        a, button, [onclick], label, .clickable { cursor: pointer; }

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

        /* -- Top Bar -- */
        .topbar {
            background: #161b22;
            border-bottom: 1px solid #21262d;
            padding: 16px 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .topbar-left { display: flex; align-items: center; gap: 16px; }

        .topbar h1 {
            font-size: 20px;
            font-weight: 700;
            color: var(--remly-blue);
        }

        .topbar .lead-count {
            font-size: 13px;
            color: #8b949e;
            font-weight: 400;
        }

        /* 2026-06-17 — flex:1 so the right group claims all remaining
           horizontal space after the company-name h1 on the left. Without
           this, .topbar-right hugs its content and the inner flex:1 on the
           search input has nothing to grow into. */
        .topbar-right { display: flex; align-items: center; gap: 12px; flex: 1; }

        /* -- Search -- */
        .search-box {
            border: 1px solid #21262d;
            border-radius: 8px;
            padding: 8px 14px;
            font-size: 14px;
            width: 240px;
            font-family: inherit;
            background: #0d1117;
            color: #e1e4e8;
            transition: border-color 0.2s;
        }

        /* 2026-06-17 — search input stretches to fill the open gap on the
           left of the topbar-right group. Channel-filter select keeps its
           natural content width. Pill-rounded (border-radius:24px) for a
           sleeker WhatsApp-Web feel. */
        input.search-box {
            flex: 1;
            width: auto;
            min-width: 200px;
            border-radius: 24px;
            padding: 9px 18px;
            background: #1c2128;
            border-color: transparent;
        }
        input.search-box:focus {
            background: #0d1117;
            border-color: var(--remly-blue);
        }

        .search-box::placeholder { color: #484f58; }

        .search-box:focus {
            outline: none;
            border-color: var(--remly-blue);
            background: #0d1117;
        }

        /* -- View Toggle (segmented control 2026-06-17) --
           Three sections (Table / Board / Unanswered) inside a single
           rounded container. Only the active section fills with Remly
           blue; inactive sections are transparent grey text. Cleaner than
           three independent buttons. Inbox is OUTSIDE this container —
           it's a link, not a view switch. */
        .view-toggle {
            display: flex;
            background: #21262d;
            border-radius: 8px;
            padding: 3px;
            gap: 0;
        }

        .view-btn {
            padding: 6px 14px;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            background: transparent;
            color: #8b949e;
            font-family: inherit;
            transition: background 0.15s, color 0.15s;
        }

        .view-btn:hover { color: #e1e4e8; }

        .view-btn.active {
            background: var(--remly-blue);
            color: #ffffff;
            box-shadow: 0 1px 2px rgba(0,0,0,0.25);
        }

        /* 2026-06-16 — desktop Inbox CTA: Remly-blue pill with chat icon +
           arrow, matching mobile pill styling but inline in the action row
           (no absolute positioning). Mobile @media still wins on phone
           viewports because its `.topbar-right a[href*="inbox"]` selector is
           more specific. */
        .view-btn[href*="inbox"] {
            background: var(--remly-blue);
            color: #fff !important;
            padding: 8px 14px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
            font-weight: 600;
        }
        .view-btn[href*="inbox"]:hover {
            background: var(--remly-blue-hover, #1d4ed8);
        }
        .view-btn[href*="inbox"]::before {
            content: '';
            width: 16px;
            height: 16px;
            background: url('/static/icons/chat.svg') center/contain no-repeat;
            filter: brightness(0) invert(1);
        }
        .view-btn[href*="inbox"]::after {
            content: '→';
            font-size: 14px;
            margin-left: 2px;
            font-weight: 700;
        }
        .view-btn[href*="inbox"] span {
            background: rgba(255,255,255,0.25);
            color: #fff;
            padding: 1px 6px;
            border-radius: 10px;
            font-size: 11px;
            margin-left: 4px;
        }
        .view-btn-emoji { display: none; }

        .btn-refresh {
            background: none;
            border: 1px solid #21262d;
            border-radius: 8px;
            padding: 7px 12px;
            cursor: pointer;
            font-size: 14px;
            color: #8b949e;
            transition: all 0.2s;
        }

        .btn-refresh:hover { background: #21262d; color: #e1e4e8; }

        /* -- Main Content -- */
        .main { padding: 24px 32px; max-width: 1500px; margin: 0 auto; }

        /* -- Stats Row -- */
        .stats {
            display: flex;
            gap: 12px;
            margin-bottom: 24px;
            overflow-x: auto;
        }

        .stat {
            background: #161b22;
            border: 1px solid #21262d;
            border-radius: 10px;
            padding: 16px 20px;
            min-width: 120px;
            flex: 1;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
        }

        .stat:hover { border-color: #30363d; background: #1c2333; }
        .stat.active-filter { border-color: var(--remly-blue); background: rgba(56,139,253,0.08); }

        .stat-label {
            font-size: 11px;
            color: #8b949e;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
        }

        .stat-value {
            font-size: 28px;
            font-weight: 700;
            margin-top: 4px;
            line-height: 1;
        }

        /* -- Table View -- */
        .table-wrap {
            background: #161b22;
            border: 1px solid #21262d;
            border-radius: 12px;
            overflow: hidden;
        }

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

        th {
            text-align: left;
            padding: 12px 16px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #8b949e;
            font-weight: 600;
            background: #0d1117;
            border-bottom: 1px solid #21262d;
            white-space: nowrap;
        }

        td {
            padding: 14px 16px;
            font-size: 14px;
            border-bottom: 1px solid #484f58;
            vertical-align: top;
            color: #e1e4e8;
        }

        tr:last-child td { border-bottom: none; }
        /* Zebra striping for visual scan-ability — every other row gets a
           slightly brighter background. Status-tinted rows still win via
           their stronger color washes below. */
        tbody tr:nth-child(even) td { background: rgba(255,255,255,0.035); }
        tr:hover td { background: #1c2333 !important; }

        /* Row status tint — subtle left border + background wash */
        tr.row-urgent td:first-child { border-left: 3px solid #dc2626; }
        tr.row-new td:first-child { border-left: 3px solid #58a6ff; }
        tr.row-contacted td:first-child { border-left: 3px solid #39d2c0; }
        tr.row-quoted td:first-child { border-left: 3px solid #d29922; }
        tr.row-scheduled td:first-child { border-left: 3px solid #bc8cff; }
        tr.row-closed td:first-child { border-left: 3px solid #3fb950; }
        tr.row-collections td:first-child { border-left: 3px solid #db6d28; }
        tr.row-lost td:first-child { border-left: 3px solid #f85149; }
        tr.row-garbage td:first-child { border-left: 3px solid #484f58; }

        tr.row-urgent { background: rgba(220,38,38,0.06); }
        tr.row-new { background: rgba(56,139,253,0.04); }
        tr.row-contacted { background: rgba(57,210,192,0.04); }
        tr.row-quoted { background: rgba(210,153,34,0.04); }
        tr.row-scheduled { background: rgba(188,140,255,0.04); }
        tr.row-closed { background: rgba(46,160,67,0.04); }
        tr.row-collections { background: rgba(219,109,40,0.04); }
        tr.row-lost { background: rgba(248,81,73,0.04); }
        tr.row-garbage { background: rgba(72,79,88,0.04); }

        .lead-ticket {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            color: #8b949e;
            background: rgba(139,148,158,0.12);
            padding: 1px 6px;
            border-radius: 4px;
            margin-right: 6px;
            vertical-align: middle;
        }
        .lead-name {
            font-weight: 600;
            font-size: 14px;
            color: #e1e4e8;
            max-width: 220px;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .lead-company {
            font-size: 12px;
            color: #8b949e;
            margin-top: 2px;
        }

        .lead-phone a, .lead-email a {
            color: #e1e4e8;
            text-decoration: none;
        }

        .lead-phone a:hover, .lead-email a:hover {
            color: var(--remly-blue);
        }

        /* -- Status Badges -- */
        .status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            font-family: inherit;
        }

        .status-urgent { background: rgba(220,38,38,0.2); color: #f87171; }
        .urgent-tag {
            display: inline-block;
            background: #dc2626;
            color: white;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 4px;
            margin-left: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            /* 2026-06-16 — animation removed per Sruly. Urgent is still
               visually distinct (red) but no longer flashes. */
        }
        tr.row-urgent { background: rgba(220,38,38,0.06); }
        /* Out-of-area flag — orange, distinct from urgent (red). Set by the
           engine's out-of-area detector when the lead address state mismatches
           the configured service_area. Owner decides whether to follow up. */
        .out-of-area-tag {
            display: inline-block;
            background: #f0883e;
            color: white;
            font-size: 10px;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 4px;
            margin-left: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .status-new { background: rgba(56,139,253,0.15); color: #58a6ff; }
        .status-contacted { background: rgba(57,210,192,0.15); color: #39d2c0; }
        .status-quoted { background: rgba(210,153,34,0.15); color: #d29922; }
        .status-scheduled { background: rgba(188,140,255,0.15); color: #bc8cff; }
        .status-closed { background: rgba(46,160,67,0.15); color: #3fb950; }
        .status-collections { background: rgba(219,109,40,0.15); color: #db6d28; }
        .status-lost { background: rgba(248,81,73,0.15); color: #f85149; }
        .status-garbage { background: rgba(72,79,88,0.15); color: #484f58; }

        /* -- Source Badges -- */
        .source-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        /* source = flow type (after the channel/source split).
           Channel-named source values (web/whatsapp/sms) were migrated to
           ai_chat in db.py — no rows have those values anymore, so the
           legacy .source-web/.source-whatsapp/.source-sms rules were removed.
           sourceLabel() in JS still has defensive fallbacks for those values. */
        .source-ai_chat { background: rgba(56,139,253,0.15); color: #58a6ff; }
        .source-quick_form { background: rgba(20,184,166,0.15); color: #2dd4bf; }
        .source-support { background: rgba(163,113,247,0.15); color: #a371f7; }
        .source-missed_call { background: rgba(248,81,73,0.15); color: #f85149; }

        /* Channel badge — separate dimension from source. Outline style so
           it's visually distinct from the filled source badges. */
        .channel-badge {
            display: inline-block;
            font-size: 10px;
            font-weight: 600;
            padding: 1px 7px;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            background: transparent;
            border: 1px solid currentColor;
            margin-right: 4px;
        }
        .channel-web { color: #58a6ff; }
        .channel-whatsapp { color: #3fb950; }
        .channel-sms { color: #db6d28; }
        .channel-missed_call { color: #f85149; }

        /* -- Notes -- */
        .notes-input {
            width: 100%;
            border: 1px solid transparent;
            border-radius: 6px;
            padding: 6px 8px;
            font-size: 13px;
            font-family: inherit;
            resize: vertical;
            min-height: 32px;
            background: #0d1117;
            transition: all 0.2s;
            color: #8b949e;
        }

        .notes-input:hover { border-color: #21262d; }

        .notes-input:focus {
            outline: none;
            border-color: var(--remly-blue);
            background: #0d1117;
            color: #e1e4e8;
        }

        .notes-saved {
            font-size: 10px;
            color: #3fb950;
            opacity: 0;
            transition: opacity 0.3s;
            margin-top: 2px;
        }

        .notes-saved.show { opacity: 1; }

        .detail-cell {
            max-width: 180px;
            font-size: 12px;
            color: #8b949e;
            line-height: 1.5;
        }

        /* Phase 14 — clamp the service_type cell so a 500-char form
           "problem" doesn't stretch the whole table. max-width on <td>
           is ignored under table-layout:auto, so the constraint lives on
           an inner <div>. word-break handles the no-space worst case. */
        .col-service { max-width: 260px; }
        .col-service-inner {
            max-width: 260px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-wrap: anywhere;
            word-break: break-all;
        }

        /* -- Board View -- */
        .board-container { display: none; }
        .board-container.active { display: block; }

        .board {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 16px;
            min-height: 400px;
        }

        .board-column {
            background: #161b22;
            border: 1px solid #21262d;
            border-radius: 12px;
            padding: 12px;
            min-height: 200px;
            min-width: 0;
        }

        .column-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding: 6px 4px;
        }

        /* Keyboard-only focus indication — invisible on mouse click,
           visible on Tab navigation. Accessibility win without UI clutter. */
        button:focus-visible,
        .view-btn:focus-visible,
        .stat:focus-visible,
        .board-card:focus-visible,
        .btn-send-quote:focus-visible,
        .btn-cancel:focus-visible,
        .btn-send:focus-visible,
        .mobile-card-action:focus-visible {
            outline: 2px solid var(--remly-blue);
            outline-offset: 2px;
        }

        .column-title {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #8b949e;
        }

        .column-count {
            font-size: 11px;
            font-weight: 700;
            color: #8b949e;
            background: rgba(255,255,255,0.06);
            padding: 2px 8px;
            border-radius: 10px;
        }

        /* Column color accents */
        .col-new { border-top: 3px solid #58a6ff; }
        .col-contacted { border-top: 3px solid #39d2c0; }
        .col-quoted { border-top: 3px solid #d29922; }
        .col-scheduled { border-top: 3px solid #bc8cff; }
        .col-closed { border-top: 3px solid #3fb950; }
        .col-collections { border-top: 3px solid #db6d28; }
        .col-lost { border-top: 3px solid #f85149; }

        .col-urgent .column-title { color: #f87171; }
        .col-new .column-title { color: #58a6ff; }
        .col-contacted .column-title { color: #39d2c0; }
        .col-quoted .column-title { color: #d29922; }
        .col-scheduled .column-title { color: #bc8cff; }
        .col-closed .column-title { color: #3fb950; }
        .col-collections .column-title { color: #db6d28; }
        .col-lost .column-title { color: #f85149; }

        /* -- Board Cards -- */
        .board-card {
            background: #0d1117;
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            cursor: grab;
            transition: all 0.2s;
            border: 1px solid #21262d;
        }

        .board-card:active { cursor: grabbing; }
        .board-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); border-color: #30363d; }

        /* Card tint per column */
        /* 2026-06-16 — urgent card pulse removed per Sruly. Red left border
           is enough to mark urgent leads. */
        .col-urgent .board-card { border-left: 3px solid #dc2626; }
        .col-new .board-card { border-left: 3px solid #58a6ff; }
        .col-contacted .board-card { border-left: 3px solid #39d2c0; }
        .col-quoted .board-card { border-left: 3px solid #d29922; }
        .col-scheduled .board-card { border-left: 3px solid #bc8cff; }
        .col-closed .board-card { border-left: 3px solid #3fb950; }
        .col-collections .board-card { border-left: 3px solid #db6d28; }
        .col-lost .board-card { border-left: 3px solid #f85149; }
        .board-card.dragging { opacity: 0.4; transform: rotate(1deg); }

        .board-column.drag-over {
            background: #1c2333;
            outline: 2px dashed var(--remly-blue);
            outline-offset: -2px;
        }

        .card-name {
            font-size: 14px;
            font-weight: 600;
            color: #e1e4e8;
            margin-bottom: 2px;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .card-service {
            font-size: 12px;
            color: var(--remly-blue);
            font-weight: 500;
            margin-bottom: 10px;
            /* Phase 14 — clamp board-card service_type for long form
               "problem" text. Card width-constrains naturally; just need
               line-clamp so a 500-char value doesn't blow the card height. */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .card-contact {
            font-size: 12px;
            color: #8b949e;
            line-height: 1.6;
            overflow-wrap: anywhere;
        }

        .card-contact a { color: #8b949e; text-decoration: none; }
        .card-contact a:hover { color: var(--remly-blue); }

        .card-notes {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #21262d;
        }

        .card-notes-input {
            width: 100%;
            border: 1px solid transparent;
            border-radius: 6px;
            padding: 5px 7px;
            font-size: 12px;
            font-family: inherit;
            resize: none;
            min-height: 28px;
            background: #161b22;
            transition: all 0.2s;
            color: #8b949e;
        }

        .card-notes-input:hover { border-color: #21262d; }
        .card-notes-input:focus { outline: none; border-color: var(--remly-blue); background: #0d1117; color: #e1e4e8; }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            gap: 6px;
        }

        .card-badges {
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
            flex-wrap: wrap;
        }

        .card-date { font-size: 11px; color: #484f58; white-space: nowrap; flex-shrink: 0; }

        .card-saved {
            font-size: 10px;
            color: #3fb950;
            opacity: 0;
            transition: opacity 0.3s;
            margin-top: 2px;
        }

        .card-saved.show { opacity: 1; }

        .board-empty {
            text-align: center;
            color: #484f58;
            font-size: 12px;
            padding: 24px 8px;
        }

        /* -- Payment Reminder Button -- */
        .btn-reminder {
            display: block;
            width: 100%;
            margin-top: 8px;
            padding: 7px 0;
            background: rgba(219,109,40,0.1);
            color: #db6d28;
            border: 1px solid rgba(219,109,40,0.3);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-reminder:hover { background: rgba(219,109,40,0.2); border-color: rgba(219,109,40,0.5); }

        /* -- Send Quote Button -- */
        .btn-quote {
            display: block;
            width: 100%;
            margin-top: 8px;
            padding: 7px 0;
            background: rgba(57,210,192,0.1);
            color: #39d2c0;
            border: 1px solid rgba(57,210,192,0.3);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-quote:hover { background: rgba(57,210,192,0.2); border-color: rgba(57,210,192,0.5); }

        .btn-send-quote {
            padding: 8px 20px;
            border: none;
            border-radius: 8px;
            background: #39d2c0;
            color: white;
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .btn-send-quote:hover { background: #2cb5a4; }

        /* -- Payment Reminder Modal -- */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.6);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay.show { display: flex; }

        .modal {
            background: #161b22;
            border: 1px solid #21262d;
            border-radius: 16px;
            padding: 28px;
            width: 440px;
            max-width: 95%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }

        .modal h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 6px;
            color: #e1e4e8;
        }

        .modal p { font-size: 13px; color: #8b949e; margin-bottom: 16px; }

        .modal textarea {
            width: 100%;
            min-height: 100px;
            border: 1px solid #21262d;
            border-radius: 8px;
            padding: 12px;
            font-size: 14px;
            font-family: inherit;
            resize: vertical;
            line-height: 1.5;
            background: #0d1117;
            color: #e1e4e8;
        }

        .modal textarea:focus { outline: none; border-color: var(--remly-blue); }

        .modal-actions {
            display: flex;
            gap: 10px;
            margin-top: 16px;
            justify-content: flex-end;
        }

        .btn-cancel {
            padding: 8px 20px;
            border: 1px solid #21262d;
            border-radius: 8px;
            background: #161b22;
            color: #8b949e;
            font-size: 14px;
            font-family: inherit;
            cursor: pointer;
        }

        .btn-cancel:hover { background: #21262d; color: #e1e4e8; }

        .btn-send {
            padding: 8px 20px;
            border: none;
            border-radius: 8px;
            background: #db6d28;
            color: white;
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
        }

        .btn-send:hover { background: #c45d1e; }

        /* -- Empty State -- */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #484f58;
        }

        .empty-state .icon { font-size: 40px; margin-bottom: 12px; }
        .empty-state p { font-size: 14px; }

        /* -- Slide-out Panel -- */
        .panel-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 500;
        }

        .panel-overlay.show { display: block; }

        .detail-panel {
            position: fixed;
            top: 0;
            right: -480px;
            width: 480px;
            height: 100%;
            background: #161b22;
            border-left: 1px solid #21262d;
            z-index: 501;
            transition: right 0.3s ease;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .detail-panel.show { right: 0; }

        .panel-header {
            padding: 20px 24px;
            border-bottom: 1px solid #21262d;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        /* 2026-06-16 — name is centered in the header (back-arrow on the
           left, edit + kebab on the right). The ticket pill moves down
           into the body — see .panel-ticket-* below. */
        .panel-header h2 {
            font-size: 18px;
            font-weight: 700;
            color: #e1e4e8;
            flex: 1;
            min-width: 0;
            text-align: center;
            margin: 0 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .panel-ticket-row {
            display: flex;
            justify-content: center;
            margin-bottom: 16px;
        }
        .panel-ticket-pill {
            display: inline-block;
            background: #1c2128;
            color: #8b949e;
            font-size: 12px;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 10px;
            border: 1px solid #30363d;
            letter-spacing: 0.3px;
        }
        /* 2026-06-16 — new panel header actions: [Edit] + [⋮ kebab] + [✕] */
        .panel-header-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }
        .panel-edit-btn {
            background: transparent;
            color: var(--remly-blue);
            border: 1px solid var(--remly-blue);
            padding: 5px 12px;
            border-radius: 14px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
        }
        .panel-edit-btn:hover { background: rgba(37, 99, 235, 0.10); }
        .panel-edit-btn.editing {
            background: var(--remly-blue);
            color: #fff;
        }
        /* Session 22a (2026-06-18) — editable lead fields.
           Inputs render always (so owner can add missing fields too) but
           wear `readonly` outside edit mode so they look + behave like
           plain text. Click Edit → JS removes readonly → CSS gives them
           visible input borders, font shifts to indicate editability.
           Blur saves regardless of readonly state — but readonly inputs
           can't be focused/edited, so save only fires when in edit mode. */
        .panel-field-input {
            border: none;
            background: transparent;
            color: #c9d1d9;
            font-family: inherit;
            font-size: 13px;
            padding: 0;
            margin: 0;
            width: 100%;
            outline: none;
        }
        .panel-field-input[readonly] {
            cursor: default;
            user-select: text;
        }
        .panel-field-input:not([readonly]) {
            background: #0d1117;
            border: 1px solid #30363d;
            border-radius: 6px;
            padding: 6px 10px;
            color: #e1e4e8;
        }
        .panel-field-input:not([readonly]):focus {
            border-color: var(--remly-blue);
            background: #161b22;
        }
        textarea.panel-field-input {
            resize: vertical;
            min-height: 38px;
            line-height: 1.4;
        }
        /* Save check indicator next to each field (mirrors notes-saved pattern) */
        .panel-field-saved {
            display: inline-block;
            font-size: 11px;
            color: #3fb950;
            margin-left: 6px;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        .panel-field-saved.is-on { opacity: 1; }
        /* When in edit mode, give each editable row a bit more breathing
           room so the input fields don't crowd. */
        .panel-edit-mode .panel-field {
            margin-bottom: 8px;
        }
        .panel-kebab-wrap { position: relative; }
        .panel-kebab {
            background: transparent;
            border: none;
            color: #8b949e;
            font-size: 22px;
            cursor: pointer;
            padding: 0 6px;
            line-height: 1;
        }
        .panel-kebab:hover { color: #e1e4e8; }
        .panel-kebab-menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 6px;
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 10px;
            padding: 4px 0;
            min-width: 200px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
            z-index: 1010;
        }
        .panel-kebab-menu.open { display: block; }
        .panel-kebab-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            color: #e1e4e8;
            font-size: 14px;
            cursor: pointer;
            background: transparent;
            border: none;
            width: 100%;
            font-family: inherit;
            text-align: left;
        }
        .panel-kebab-item:hover { background: #21262d; }
        .panel-kebab-item .panel-kebab-icon {
            width: 16px;
            height: 16px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            opacity: 0.85;
            flex-shrink: 0;
        }

        /* 2026-06-16 — back button (was ✕, now ← arrow) matches inbox style:
           38px dark grey circle with the back.svg arrow centered. Sits to
           the LEFT of the title for visual consistency. */
        .panel-close {
            background: #1c2128 url('/static/icons/back.svg') center/22px no-repeat;
            border: none;
            color: transparent;
            font-size: 0;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            cursor: pointer;
            padding: 0;
            flex-shrink: 0;
        }
        .panel-close:hover { background-color: #21262d; }

        .panel-close:hover { color: #e1e4e8; }

        /* 2026-06-16 — ported from mobile @media. Status pill in the detail
           panel — translucent outline, matches the inbox aesthetic. The
           <select> sits behind the pill (opacity:0) so the browser's native
           picker opens on click. Available on desktop + mobile. */
        .panel-status-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        .panel-status-label {
            font-size: 11px;
            color: #8b949e;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .panel-status-pill {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 14px;
            border-radius: 16px;
            border: 1px solid transparent;
            font-size: 13px;
            font-weight: 600;
        }
        .panel-status-select {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            font-size: 14px;
            border: none;
            background: transparent;
        }
        .panel-status-pill-urgent      { background: rgba(220,38,38,0.10);   color: #f87171; border-color: rgba(220,38,38,0.35); }
        .panel-status-pill-new         { background: rgba(56,139,253,0.10);  color: #58a6ff; border-color: rgba(56,139,253,0.35); }
        .panel-status-pill-contacted   { background: rgba(57,210,192,0.10);  color: #39d2c0; border-color: rgba(57,210,192,0.35); }
        .panel-status-pill-quoted      { background: rgba(210,153,34,0.10);  color: #d29922; border-color: rgba(210,153,34,0.35); }
        .panel-status-pill-scheduled   { background: rgba(188,140,255,0.10); color: #bc8cff; border-color: rgba(188,140,255,0.35); }
        .panel-status-pill-closed      { background: rgba(63,185,80,0.10);   color: #3fb950; border-color: rgba(63,185,80,0.35); }
        .panel-status-pill-collections { background: rgba(219,109,40,0.10);  color: #db6d28; border-color: rgba(219,109,40,0.35); }
        .panel-status-pill-lost        { background: rgba(139,148,158,0.08); color: #8b949e; border-color: rgba(139,148,158,0.32); }
        .panel-status-pill-garbage     { background: rgba(139,148,158,0.08); color: #8b949e; border-color: rgba(139,148,158,0.32); }

        /* 2026-06-16 — ported from mobile @media. Notes textarea in the panel
           reads as a real writable field (border + padding + min-height) on
           all viewports. !important defeats the base .notes-input rule which
           the same element also carries. */
        .panel-notes-input {
            background: #0d1117 !important;
            border: 1px solid #30363d !important;
            border-radius: 10px !important;
            padding: 12px 14px !important;
            min-height: 100px !important;
            font-size: 14px !important;
            line-height: 1.4;
            color: #e1e4e8 !important;
            width: 100%;
            resize: vertical;
            font-family: inherit;
        }
        .panel-notes-input::placeholder { color: #484f58; }
        .panel-notes-input:focus {
            border-color: var(--remly-blue) !important;
            outline: none;
        }

        /* 2026-06-16 — ported from mobile @media. Source/channel badges in
           the detail panel use the outline style (both WEB + CHATBOT), so
           they read consistently with the panel's translucent aesthetic.
           Scoped to .panel-section only — table/board/mobile-list badges
           keep their existing solid styling. */
        .panel-section .channel-badge,
        .panel-section .source-badge {
            display: inline-block;
            padding: 3px 9px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.4px;
            background: transparent !important;
            border: 1px solid currentColor;
            margin-right: 6px;
        }

        .panel-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px 24px;
        }

        .panel-section {
            margin-bottom: 24px;
        }

        /* 2026-06-16 — section titles slightly larger + heavier weight so
           they read as proper headings. Still all-caps, still muted, but
           more present than the previous 11px gray. */
        .panel-section-title {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #8b949e;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .panel-field {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            font-size: 14px;
            gap: 12px;
        }

        .panel-field-label { color: #8b949e; flex-shrink: 0; }
        .panel-field-value { color: #e1e4e8; font-weight: 500; text-align: right; word-break: break-word; min-width: 0; }
        .panel-field-value a { color: var(--remly-blue); text-decoration: none; }
        .panel-field-value a:hover { text-decoration: underline; }

        .transcript-msg {
            padding: 8px 12px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.5;
            margin-bottom: 8px;
            max-width: 85%;
        }

        .transcript-msg.bot {
            background: #1c2333;
            color: #e1e4e8;
            align-self: flex-start;
            border-bottom-left-radius: 4px;
        }

        .transcript-msg.user {
            background: var(--remly-blue);
            color: white;
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }

        .transcript-msg.owner {
            background: #238636;
            color: white;
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }

        .transcript-container {
            display: flex;
            flex-direction: column;
        }

        /* 2026-06-16 — status-history timeline: more breathing room +
           readable text colors. */
        .timeline-item {
            display: flex;
            gap: 12px;
            padding: 10px 0;
            font-size: 13px;
            border-bottom: 1px solid rgba(48, 54, 61, 0.5);
        }
        .timeline-item:last-child { border-bottom: none; }

        .timeline-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-top: 6px;
            flex-shrink: 0;
            box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
        }

        .timeline-text { color: #c9d1d9; font-weight: 500; }
        .timeline-date { color: #6e7681; font-size: 11px; margin-top: 2px; }

        @media (max-width: 600px) {
            .detail-panel { width: 100%; right: -100%; }
        }

        /* -- Unanswered Questions -- */
        .uq-item {
            padding: 14px 20px;
            border-bottom: 1px solid #21262d;
            transition: background 0.2s;
        }

        .uq-item:last-child { border-bottom: none; }
        .uq-item:hover { background: #1c2333; }

        .uq-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .uq-question {
            font-size: 14px;
            color: #e1e4e8;
            flex: 1;
        }

        .uq-meta {
            font-size: 12px;
            color: #484f58;
            margin-top: 4px;
        }

        .uq-actions {
            display: flex;
            gap: 8px;
            margin-left: 16px;
            flex-shrink: 0;
        }

        .uq-btn {
            background: none;
            border: 1px solid #21262d;
            border-radius: 6px;
            padding: 4px 10px;
            font-size: 12px;
            color: #8b949e;
            cursor: pointer;
            font-family: inherit;
        }

        .uq-btn:hover { background: #21262d; color: #e1e4e8; }
        .uq-btn-faq { border-color: rgba(63,185,80,0.3); color: #3fb950; }
        .uq-btn-faq:hover { background: rgba(63,185,80,0.1); color: #3fb950; }

        .uq-form {
            display: none;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #21262d;
        }
        .uq-form.open { display: block; }
        .uq-form label {
            font-size: 12px;
            color: #8b949e;
            display: block;
            margin-bottom: 4px;
        }
        .uq-form input, .uq-form textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #21262d;
            border-radius: 8px;
            background: #0d1117;
            color: #e1e4e8;
            font-size: 14px;
            font-family: inherit;
            box-sizing: border-box;
        }
        .uq-form textarea {
            min-height: 80px;
            resize: vertical;
            line-height: 1.5;
        }
        .uq-form-row { margin-bottom: 10px; }
        .uq-form-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            margin-top: 10px;
        }
        .uq-save-btn {
            background: #3fb950;
            color: #0d1117;
            border: none;
            border-radius: 6px;
            padding: 6px 16px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
        }
        .uq-save-btn:hover { background: #2ea043; }
        .uq-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .uq-toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            background: #238636;
            color: #fff;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 9999;
            pointer-events: none;
        }
        .uq-toast.visible { opacity: 1; }

        /* -- Responsive -- */
        @media (max-width: 1200px) {
            .board { grid-template-columns: repeat(4, 1fr); }
        }

        @media (max-width: 900px) {
            .board { grid-template-columns: repeat(3, 1fr); }
        }

        /* ───────────────────────────────────────────────────────────
           MOBILE-FIRST REBUILD (Phase 14 R3)
           Below 768px, the table + board views are hidden and replaced
           with a sticky-header vertical scroll grouped by status,
           plus a sticky chip strip at the top for jumping.
           ─────────────────────────────────────────────────────────── */
        @media (max-width: 768px) {
            /* Universal mobile inputs — prevent iOS Safari zoom-on-focus
               (Safari auto-zooms when input font-size < 16px). Using
               !important to defeat the desktop `.search-box { font-size:14px }`
               selector which has higher specificity than bare `input`. */
            input, textarea, select { font-size: 16px !important; }

            /* WhatsApp activation banner — compact on mobile so it doesn't
               eat 200px of vertical space above the lead list. Buttons share
               one row instead of stacking. */
            #waBanner {
                padding: 12px 14px !important;
                gap: 10px !important;
                margin-bottom: 14px !important;
            }
            #waBanner button {
                padding: 8px 12px !important;
                font-size: 13px !important;
                flex: 1;
                min-width: 0;
            }

            /* 2026-06-16 v3 — mobile topbar restructured to match the inbox:
               big "Brand" title at the top, action row of circular icon
               buttons + small text labels, search + filter row below.
               Padding-top uses a HARD MIN of 56px (iOS notch + breathing room)
               so the title clears the status bar even if env(safe-area-inset-top)
               returns 0 (which happens in Safari non-PWA mode). */
            .topbar {
                flex-direction: column;
                align-items: stretch;
                /* 2026-06-16 v4 — env() fallback raised to 60px (was 0).
                   max() wasn't enforcing the 56px min on Sruly's setup, leaving
                   the title under the status bar. Hard fallback fixes that. */
                padding-top: calc(12px + env(safe-area-inset-top, 60px));
                padding-right: 16px;
                padding-bottom: 8px;
                padding-left: 16px;
                background: #0d1117;
                border-bottom: none;
                gap: 0;
            }
            /* Neutralize the desktop .view-toggle pill on mobile — it was
               wrapping Unanswered + Inbox in a single rounded background. */
            .view-toggle {
                background: transparent !important;
                border: none !important;
                padding: 0 !important;
                gap: 4px !important;
                display: inline-flex !important;
            }
            .topbar-left {
                width: 100%;
                order: 1;
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                padding-top: 8px;
            }
            .topbar h1 {
                font-size: 30px !important;
                font-weight: 800 !important;
                color: #ffffff !important;
                letter-spacing: -0.5px;
                /* 2026-06-16 v2 — Inbox pill moved to BELOW the kebab
                   (vertical stack at top-right), so the title only needs
                   to reserve ~62px = kebab (38px) + gap. Long names still
                   get ellipsis as a final safety net. */
                max-width: calc(100% - 62px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .lead-count {
                display: block !important;
                color: #6e7681;
                font-size: 13px;
                margin-top: 2px;
                font-weight: 500;
            }
            /* 2026-06-16 v5 — action row collapsed into a kebab menu at the
               top-right + a highlighted Inbox CTA underneath. Pending and
               Support live inside the kebab dropdown so the topbar doesn't
               show 3 icon-buttons fighting for attention with the title. */
            .topbar-kebab-wrap {
                /* 2026-06-18 Phase 1 — `display: flex` (was `block`) so the
                   new Settings gear + existing kebab sit inline side-by-side.
                   gap+align-items set by inline style on the element. */
                display: flex !important;
                position: absolute !important;
                top: calc(12px + env(safe-area-inset-top, 60px));
                right: 12px;
                z-index: 60;
            }
            .topbar-right {
                /* 2026-06-16 v7 — NORMAL inline column for the search bar +
                   source filter. The Inbox link inside gets its own absolute
                   position (rule below).
                   2026-06-16 v8 — padding-top raised from 4px to 56px so
                   the search bar starts BELOW the stacked kebab+pill at
                   top-right. Pill is absolutely-positioned (out of flex
                   flow), so we need explicit reserved space to avoid the
                   pill overlapping the search input. */
                position: static;
                width: 100%;
                order: 2;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
                padding: 56px 0 0;
                z-index: auto;
            }
            /* (Inbox link styling consolidated into the rule further down —
               see "Inbox link → highlighted Remly-blue pill with arrow". This
               placeholder kept as a marker; do not re-add absolute here, it
               loses to the later rule. */
            /* 2026-06-16 v6 fix: search + source filter were accidentally
               hidden during the kebab restructure. Bring them back as a
               full-width row UNDER the title, ABOVE the stats grid. */
            .topbar-right .btn-refresh { display: none !important; }
            /* Search box: full-width pill row, ORDERED to appear after the
               title regardless of the .topbar-right absolute position above.
               2026-06-16: font-size 16px (was 15px) so iOS Safari doesn't
               zoom on focus — 16px is the no-zoom threshold. */
            .topbar-right .search-box {
                display: block !important;
                position: static !important;
                width: 100% !important;
                padding: 11px 14px 11px 38px !important;
                background: #1c2128 !important;
                border: 1px solid transparent !important;
                border-radius: 24px;
                font-size: 16px !important;
                margin-top: 8px;
            }
            .topbar-right #sourceFilter.search-box {
                padding-left: 14px !important;
                padding-right: 30px !important;
            }
            /* Reset topbar-right so it's NOT absolutely positioned anymore —
               it sits inline as a column row with search + filter. The kebab
               + inbox remain absolutely positioned and overlay this. */
            /* .view-toggle uses display:contents so its children act as
               direct children of .topbar-right. That lets us hide / position
               them individually. Pending + Table + Board are hidden; Inbox
               link survives (absolutely positioned per rule above). */
            .topbar-right .view-toggle { display: contents; }
            .topbar-right .view-btn[onclick*="unanswered"],
            .topbar-right .view-btn[onclick*="'table'"],
            .topbar-right .view-btn[onclick*="'board'"],
            .topbar-right a[href*="mailto"],
            #voicemailBadge {
                display: none !important;
            }
            /* 2026-06-16 v2 — Inbox pill stacks BELOW the kebab at top-right
               (was: to the LEFT of kebab, which overlapped long company
               names like "Remly Demo"). top = kebab top + kebab height +
               gap ≈ calc(58px + safe-area). right = same as kebab so they
               align vertically. */
            .topbar-right a[href*="inbox"] {
                background: var(--remly-blue) !important;
                border: none !important;
                color: #fff !important;
                font-size: 13px !important;
                font-weight: 600 !important;
                padding: 8px 14px !important;
                border-radius: 18px !important;
                display: inline-flex !important;
                align-items: center;
                gap: 6px;
                text-decoration: none !important;
                position: absolute !important;
                top: calc(58px + env(safe-area-inset-top, 60px));
                right: 12px;
                z-index: 50;
                box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
            }
            .topbar-right a[href*="inbox"]::before {
                content: '';
                width: 16px;
                height: 16px;
                background: url('/static/icons/chat.svg') center/contain no-repeat;
                filter: brightness(0) invert(1);
            }
            .topbar-right a[href*="inbox"]::after {
                content: '→';
                font-size: 14px;
                margin-left: 2px;
                font-weight: 700;
            }
            .topbar-right .view-btn-emoji { display: none !important; }
            .topbar-right a[href*="inbox"] span {
                background: rgba(255,255,255,0.25) !important;
                color: #fff !important;
                padding: 1px 6px !important;
                border-radius: 10px !important;
                font-size: 11px !important;
                margin-left: 4px !important;
            }
            /* Kebab button (3 vertical dots) — sits above the Inbox CTA */
            .topbar-kebab {
                background: #1c2128;
                border: none;
                width: 38px;
                height: 38px;
                border-radius: 50%;
                color: #c9d1d9;
                cursor: pointer;
                font-size: 22px;
                line-height: 1;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                position: relative;
            }
            .topbar-kebab:hover { background: #21262d; }
            .topbar-kebab-menu {
                position: absolute;
                top: 100%;
                right: 0;
                margin-top: 8px;
                background: #161b22;
                border: 1px solid #30363d;
                border-radius: 10px;
                padding: 6px 0;
                min-width: 180px;
                box-shadow: 0 8px 24px rgba(0,0,0,0.5);
                display: none;
                z-index: 60;
            }
            .topbar-kebab-menu.open { display: block; }
            .topbar-kebab-menu .topbar-kebab-item {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 10px 14px;
                color: #e1e4e8;
                font-size: 14px;
                cursor: pointer;
                text-decoration: none;
                background: transparent;
                border: none;
                width: 100%;
                font-family: inherit;
                text-align: left;
            }
            .topbar-kebab-menu .topbar-kebab-item:hover { background: #21262d; }
            .topbar-kebab-menu .topbar-kebab-item .kebab-item-icon {
                width: 18px;
                height: 18px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                opacity: 0.85;
                flex-shrink: 0;
            }
            .topbar-kebab-menu .kebab-item-pending .kebab-item-icon {
                background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23c9d1d9%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><polyline points=%2212 6 12 12 16 14%22/></svg>');
            }
            .topbar-kebab-menu .kebab-item-support .kebab-item-icon {
                background-image: url('/static/icons/email.svg');
            }
            .topbar-kebab-menu .kebab-item-badge {
                margin-left: auto;
                background: #f85149;
                color: #fff;
                font-size: 10px;
                font-weight: 700;
                padding: 1px 6px;
                border-radius: 9px;
            }
            /* Sort section inside the kebab */
            .topbar-kebab-menu .kebab-section-divider {
                height: 1px;
                background: #30363d;
                margin: 4px 0;
            }
            .topbar-kebab-menu .kebab-section-label {
                padding: 8px 14px 4px;
                font-size: 10px;
                font-weight: 700;
                color: #8b949e;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            .topbar-kebab-menu .kebab-sort-item .kebab-sort-check {
                width: 14px;
                color: var(--remly-blue);
                font-weight: 700;
                visibility: hidden;
                font-size: 13px;
            }
            .topbar-kebab-menu .kebab-sort-item.kebab-sort-active .kebab-sort-check {
                visibility: visible;
            }
            .topbar-kebab-menu .kebab-sort-item.kebab-sort-active {
                color: #fff;
            }
            /* 2026-06-16 v2 — voicemail dropped from dashboard topbar;
               already accessible via Inbox. Keeps the action row tighter. */
            #voicemailBadge { display: none !important; }
            /* 2026-06-18 Phase 6 fix — desktop gear (#settingsGear) bleeds
               into topbar-right on mobile and shows above the search bar.
               Hide it; the mobile gear in .topbar-kebab-wrap (left of the
               kebab dots) is the one that should show on mobile. */
            #settingsGear { display: none !important; }
            /* 2026-06-16 v5 — old "circular icon button + text label below"
               styling removed. Replaced by the kebab + inbox-pill layout
               above. Only the Inbox link's pill styling (defined further up)
               applies; Refresh/Pending/Support are hidden on mobile (kebab
               picks them up). */
            /* Hide Table + Board buttons; only Unanswered + Inbox visible
               (already the case for table/board — keeping the rule). */
            .view-btn[onclick*="'table'"],
            .view-btn[onclick*="'board'"] { display: none !important; }
            /* Search + filter — full row below the action buttons */
            .search-box {
                width: 100%;
                order: 3;
                padding: 11px 14px 11px 38px;
                background: #1c2128 !important;
                border: 1px solid transparent !important;
                border-radius: 24px;
                font-size: 15px;
            }
            .search-box:focus { border-color: var(--remly-blue) !important; }
            #sourceFilter.search-box {
                padding-left: 14px !important;
                padding-right: 30px !important;
            }
            /* Hide the inline emojis inside action buttons on mobile —
               we render SVG via ::before. The emoji text is preserved in
               source for screen readers + desktop fallback. */
            .topbar-right .view-btn-emoji {
                font-size: 0 !important;
                display: none;
            }

            .main { padding: 12px; }

            /* Stats — 3 across, compact */
            .stats { gap: 6px; flex-wrap: wrap; }
            .stat { min-width: 0; flex: 1 1 28%; padding: 8px 10px; }
            .stat-label { font-size: 9px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .stat-value { font-size: 18px; }

            /* Hide desktop lead-list views — mobile list takes over.
               Be specific: target the main #tableView only, NOT every
               `.table-wrap` (which is also used inside #unansweredView). */
            #tableView { display: none !important; }
            .board-container { display: none; }

            /* Mobile list view */
            #mobileListView { display: block; }
            /* 2026-06-16 — mobile chip strip hidden per Sruly. The big stat
               cards above the lead list already serve the same filter purpose
               (tap to filter by status). Two parallel filter UIs was noise. */
            .mobile-chip-strip-wrap { display: none !important; }
            /* (legacy styles below kept for reference; the strip itself is
               hidden via the rule above.) */
            .mobile-chip-strip-wrap.__legacy {
                position: sticky;
                top: 0;
                z-index: 20;
                background: #0d1117;
                margin: 0 -12px 8px;
                border-bottom: 1px solid #21262d;
            }
            .mobile-chip-strip-wrap::after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 1px;
                width: 24px;
                background: linear-gradient(to right, rgba(13,17,23,0), #0d1117);
                pointer-events: none;
            }
            .mobile-chip-strip {
                padding: 8px 4px;
                display: flex;
                gap: 6px;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .mobile-chip-strip::-webkit-scrollbar { display: none; }
            .mobile-chip {
                flex-shrink: 0;
                padding: 6px 10px;
                background: #161b22;
                border: 1px solid #21262d;
                border-radius: 16px;
                color: #e1e4e8;
                font-size: 12px;
                font-weight: 600;
                cursor: pointer;
                font-family: inherit;
                white-space: nowrap;
            }
            .mobile-chip:hover, .mobile-chip:active { background: #21262d; }
            .mobile-chip-empty { opacity: 0.4; }
            /* Finding O 2026-05-27 — active state when chip filter applied */
            .mobile-chip-active {
                background: #1f6feb;
                border-color: #1f6feb;
                color: #ffffff;
            }
            .mobile-chip-active .mobile-chip-count { color: #ffffff; }
            .mobile-chip-count {
                display: inline-block;
                margin-left: 4px;
                font-size: 11px;
                font-weight: 700;
                color: #8b949e;
            }
            .mobile-chip-urgent { border-color: rgba(220,38,38,0.35); color: #f87171; }
            .mobile-chip-new { border-color: rgba(56,139,253,0.35); color: #58a6ff; }
            .mobile-chip-contacted { border-color: rgba(57,210,192,0.35); color: #39d2c0; }
            .mobile-chip-quoted { border-color: rgba(210,153,34,0.35); color: #d29922; }
            .mobile-chip-scheduled { border-color: rgba(188,140,255,0.35); color: #bc8cff; }
            .mobile-chip-closed { border-color: rgba(63,185,80,0.35); color: #3fb950; }
            .mobile-chip-collections { border-color: rgba(219,109,40,0.35); color: #db6d28; }
            .mobile-chip-lost, .mobile-chip-garbage { border-color: #21262d; color: #8b949e; }

            .mobile-list {
                background: #0d1117;
                -webkit-overflow-scrolling: touch;
            }
            /* Section cards — flat layout */
            .mobile-status-section {
                margin: 22px 0 0;
                background: transparent;
                /* scroll-margin-top ensures chip-jump targets land BELOW
                   the sticky chip strip (which is ~48px tall) instead of
                   overshooting under it. */
                scroll-margin-top: 60px;
            }
            /* 2026-06-16 — section headers softened to match inbox aesthetic:
               translucent fill + outlined border instead of bright pills. */
            .mobile-section-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 8px 14px;
                font-size: 12px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.6px;
                margin-bottom: 10px;
                border-radius: 10px;
                border: 1px solid transparent;
                background: transparent;
            }
            .mobile-section-header-urgent { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.32); }
            .mobile-section-header-urgent .mobile-section-label { color: #f87171; }
            .mobile-section-header-new { background: rgba(56,139,253,0.08); border-color: rgba(56,139,253,0.32); }
            .mobile-section-header-new .mobile-section-label { color: #58a6ff; }
            .mobile-section-header-contacted { background: rgba(57,210,192,0.08); border-color: rgba(57,210,192,0.32); }
            .mobile-section-header-contacted .mobile-section-label { color: #39d2c0; }
            .mobile-section-header-quoted { background: rgba(210,153,34,0.08); border-color: rgba(210,153,34,0.32); }
            .mobile-section-header-quoted .mobile-section-label { color: #d29922; }
            .mobile-section-header-scheduled { background: rgba(188,140,255,0.08); border-color: rgba(188,140,255,0.32); }
            .mobile-section-header-scheduled .mobile-section-label { color: #bc8cff; }
            .mobile-section-header-closed { background: rgba(63,185,80,0.08); border-color: rgba(63,185,80,0.32); }
            .mobile-section-header-closed .mobile-section-label { color: #3fb950; }
            .mobile-section-header-collections { background: rgba(219,109,40,0.08); border-color: rgba(219,109,40,0.32); }
            .mobile-section-header-collections .mobile-section-label { color: #db6d28; }
            .mobile-section-header-lost { background: rgba(139,148,158,0.05); border-color: rgba(139,148,158,0.25); }
            .mobile-section-header-lost .mobile-section-label { color: #8b949e; }
            .mobile-section-header-garbage { background: rgba(139,148,158,0.05); border-color: rgba(139,148,158,0.25); }
            .mobile-section-header-garbage .mobile-section-label { color: #8b949e; }
            .mobile-section-count {
                font-size: 11px;
                font-weight: 700;
                color: #8b949e;
                background: rgba(139,148,158,0.12);
                padding: 2px 8px;
                border-radius: 10px;
            }
            /* Each lead is its own card — clean separation, no overflow trickery.
               Status-colored left border mirrors the desktop tr.row-* pattern
               so an owner can identify a card's status at a glance. */
            .mobile-lead-item {
                background: #161b22;
                border: 1px solid #21262d;
                border-left: 3px solid #21262d;
                border-radius: 8px;
                padding: 12px 14px;
                margin-bottom: 8px;
                cursor: pointer;
                min-height: 44px;
            }
            .mobile-lead-item:active { background: #1c2333; }
            .mobile-lead-urgent { border-left-color: #dc2626; background: rgba(220,38,38,0.04); }
            .mobile-lead-new { border-left-color: #58a6ff; }
            .mobile-lead-contacted { border-left-color: #39d2c0; }
            .mobile-lead-quoted { border-left-color: #d29922; }
            .mobile-lead-scheduled { border-left-color: #bc8cff; }
            .mobile-lead-closed { border-left-color: #3fb950; }
            .mobile-lead-collections { border-left-color: #db6d28; background: rgba(219,109,40,0.04); }
            .mobile-lead-lost { border-left-color: #484f58; opacity: 0.85; }
            .mobile-lead-garbage { border-left-color: #484f58; opacity: 0.75; }

            /* In-card action button (mobile only) — appears on Contacted and
               Collections leads so owners can trigger Send Quote / Send
               Payment Reminder directly from the list (these are normally
               only reachable via the desktop Kanban card buttons). */
            .mobile-card-action {
                display: block;
                width: 100%;
                margin-top: 10px;
                padding: 10px 12px;
                border-radius: 8px;
                font-size: 13px;
                font-weight: 600;
                font-family: inherit;
                cursor: pointer;
                border: 1px solid transparent;
                background: transparent;
                min-height: 40px;
                transition: background 0.15s ease;
            }
            .mobile-card-action.btn-quote {
                color: #39d2c0;
                background: rgba(57,210,192,0.10);
                border-color: rgba(57,210,192,0.35);
            }
            .mobile-card-action.btn-quote:active { background: rgba(57,210,192,0.20); }
            .mobile-card-action.btn-reminder {
                color: #db6d28;
                background: rgba(219,109,40,0.10);
                border-color: rgba(219,109,40,0.35);
            }
            .mobile-card-action.btn-reminder:active { background: rgba(219,109,40,0.20); }
            .mobile-lead-name {
                font-size: 14px;
                font-weight: 600;
                color: #e1e4e8;
                overflow-wrap: anywhere;
            }
            .mobile-lead-meta {
                display: flex;
                gap: 6px;
                flex-wrap: wrap;
                align-items: center;
                margin-top: 6px;
            }
            .mobile-lead-service {
                font-size: 12px;
                color: #8b949e;
                margin-top: 6px;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow-wrap: anywhere;
            }
            .mobile-lead-contact {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 8px;
                font-size: 12px;
            }
            .mobile-lead-contact a {
                color: #58a6ff;
                text-decoration: none;
                font-weight: 500;
            }
            .mobile-lead-date { color: #484f58; font-size: 11px; }
            .mobile-show-more {
                display: block;
                width: 100%;
                padding: 10px 14px;
                background: transparent;
                border: none;
                border-top: 1px solid #21262d;
                color: #58a6ff;
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                font-family: inherit;
            }
            .mobile-show-more:active { background: #21262d; }

            /* Detail panel — full screen on mobile (extend existing 600px rule to 768px) */
            .detail-panel { width: 100%; right: -100%; }
            .panel-body { -webkit-overflow-scrolling: touch; padding: 16px 14px 32px; }

            /* 2026-06-16 — flex layout already pins the header to the top of
               the panel; `position: sticky` was redundant AND triggering an
               iOS Safari bug where sticky children inside an element with
               `-webkit-overflow-scrolling: touch` (.panel-body) intermittently
               stop repainting on scroll — the scrollbar moves, content stays
               frozen. Removed sticky; flex-shrink:0 (from desktop rule) keeps
               the header at the top. Safe-area padding retained. */
            .panel-header {
                background: #161b22;
                padding-top: calc(14px + env(safe-area-inset-top, 60px));
                padding-right: 14px;
                padding-bottom: 12px;
                padding-left: 14px;
            }
            /* 2026-06-16 v2 — iOS WebKit can get the panel's composited layer
               "stuck" after the slide-in transition: touch events register
               (scrollbar moves), but the layer never repaints. Three things
               help fix this:
               1. Drop `overflow: hidden` on the panel parent — was making the
                  panel a clipping container that iOS treats as a separate
                  composited layer, prone to the stuck-paint bug.
               2. translate3d (not translateZ) on the body — more reliably
                  forces GPU layer + ongoing paint updates.
               3. overscroll-behavior: contain — stops iOS from rubber-banding
                  the parent (which can also cause the freeze pattern). */
            .detail-panel { overflow: visible !important; }
            .panel-body {
                -webkit-overflow-scrolling: touch;
                transform: translate3d(0, 0, 0);
                overscroll-behavior: contain;
            }

            /* 2026-06-16 — translucent outline status pill (matches inbox). */
            .panel-status-row {
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 16px;
            }
            .panel-status-label {
                font-size: 11px;
                color: #8b949e;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            .panel-status-pill {
                position: relative;
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 7px 14px;
                border-radius: 16px;
                border: 1px solid transparent;
                font-size: 13px;
                font-weight: 600;
            }
            .panel-status-select {
                position: absolute;
                inset: 0;
                opacity: 0;
                cursor: pointer;
                font-size: 16px;
                border: none;
                background: transparent;
            }
            .panel-status-pill-urgent      { background: rgba(220,38,38,0.10);   color: #f87171; border-color: rgba(220,38,38,0.35); }
            .panel-status-pill-new         { background: rgba(56,139,253,0.10);  color: #58a6ff; border-color: rgba(56,139,253,0.35); }
            .panel-status-pill-contacted   { background: rgba(57,210,192,0.10);  color: #39d2c0; border-color: rgba(57,210,192,0.35); }
            .panel-status-pill-quoted      { background: rgba(210,153,34,0.10);  color: #d29922; border-color: rgba(210,153,34,0.35); }
            .panel-status-pill-scheduled   { background: rgba(188,140,255,0.10); color: #bc8cff; border-color: rgba(188,140,255,0.35); }
            .panel-status-pill-closed      { background: rgba(63,185,80,0.10);   color: #3fb950; border-color: rgba(63,185,80,0.35); }
            .panel-status-pill-collections { background: rgba(219,109,40,0.10);  color: #db6d28; border-color: rgba(219,109,40,0.35); }
            .panel-status-pill-lost        { background: rgba(139,148,158,0.08); color: #8b949e; border-color: rgba(139,148,158,0.32); }
            .panel-status-pill-garbage     { background: rgba(139,148,158,0.08); color: #8b949e; border-color: rgba(139,148,158,0.32); }

            /* Unified source/channel badges — both outline style (was: WEB
               outline + CHATBOT solid, mismatched). */
            .panel-section .channel-badge,
            .panel-section .source-badge {
                display: inline-block;
                padding: 3px 9px;
                border-radius: 10px;
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.4px;
                background: transparent !important;
                border: 1px solid currentColor;
                margin-right: 6px;
            }

            /* 2026-06-16 — Notes textarea — proper height + border + padding so
               it reads as a real writable field, not a dead rectangle.
               font-size 16px so iOS doesn't auto-zoom on focus. */
            .panel-notes-input {
                background: #0d1117 !important;
                border: 1px solid #30363d !important;
                border-radius: 10px !important;
                padding: 12px 14px !important;
                min-height: 100px !important;
                font-size: 16px !important;
                line-height: 1.4;
                color: #e1e4e8 !important;
                width: 100%;
                resize: vertical;
                font-family: inherit;
            }
            .panel-notes-input::placeholder { color: #484f58; }
            .panel-notes-input:focus {
                border-color: var(--remly-blue) !important;
                outline: none;
            }

            /* Conversation action button (Open captured web chat / Open in
               inbox) — match Remly identity, drop the loud green fill. */
            .panel-section a[href*="/admin/inbox/"] {
                background: var(--remly-blue) !important;
                box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
            }
            .panel-header h2 {
                font-size: 16px;
                overflow-wrap: anywhere;
                margin-right: 12px;
            }
            /* Close button — ≥44px tap target per iOS HIG */
            .panel-close {
                padding: 10px 14px;
                font-size: 22px;
                min-width: 44px;
                min-height: 44px;
                line-height: 1;
            }

            /* Stack panel field rows vertically — label on top, value below,
               more readable on narrow screens than flex space-between with
               right-aligned value. */
            .panel-field {
                flex-direction: column;
                align-items: stretch;
                gap: 4px;
                padding: 8px 0;
            }
            .panel-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
            .panel-field-value { text-align: left; font-size: 14px; }

            .panel-section { margin-bottom: 20px; }
            .panel-section-title { font-size: 11px; }

            /* Reply UI — larger touch targets, full-width controls */
            #replySection-undefined,
            [id^="replySection-"] textarea {
                width: 100% !important;
                min-height: 100px !important;
                padding: 12px !important;
            }
            [id^="sendReplyBtn-"] {
                padding: 12px 20px !important;
                font-size: 15px !important;
                font-weight: 600 !important;
                width: 100%;
                margin-top: 4px;
            }
            [id^="replyChannels-"] {
                gap: 8px !important;
                margin-bottom: 12px !important;
            }
            /* Status dropdown in panel — bigger tap target */
            .panel-body select.status-badge {
                padding: 8px 12px !important;
                min-height: 40px;
            }

            /* Modals — fit phone width, tap-friendly buttons */
            .modal {
                width: 92%;
                max-height: 90vh;
                padding: 20px;
                overflow-y: auto;
            }
            .modal h3 { font-size: 16px; }
            .modal textarea { min-height: 90px; }
            .modal-actions {
                flex-direction: column-reverse;
                gap: 8px;
            }
            .modal-actions > button {
                width: 100%;
                padding: 12px 20px !important;
                min-height: 44px;
                font-size: 15px !important;
            }

            /* Unanswered Questions view — its internal `.table-wrap` was hit
               by my `#tableView` hide above (now scoped), but the section
               itself still needs its own mobile padding so it doesn't sit
               flush against viewport edges. */
            #unansweredView .table-wrap { padding: 0; }
        }

        @media (max-width: 480px) {
            /* Extra-compact phone adjustments — keep labels visible
               (just "0 1 0" without labels is meaningless to the owner).
               2026-06-16: the .topbar { padding } + h1 { font-size } shorthands
               were wiping the safe-area padding-top + big-title styling from
               the 768px breakpoint above. Removed — restructured topbar takes
               care of mobile sizing properly. */
            .stat-label {
                display: block;
                font-size: 9px;
                letter-spacing: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .stat-value { font-size: 16px; }
            .main { padding: 10px; }
        }

        /* -- Business Details Section -- */
        .biz-details-section {
            background: #161b22;
            border: 1px solid #21262d;
            border-radius: 12px;
            margin-top: 20px;
            overflow: hidden;
        }

        .biz-details-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            cursor: pointer;
            user-select: none;
            transition: background 0.15s;
        }

        .biz-details-header:hover { background: #1c2128; }

        .biz-details-header h2 {
            font-size: 16px;
            font-weight: 700;
            color: #e1e4e8;
        }

        .biz-details-header .biz-details-chevron {
            font-size: 12px;
            color: #8b949e;
            transition: transform 0.2s, background 0.15s;
            /* 2026-06-16 — bigger hit area + visible affordance so the
               chevron reads as the dedicated collapse control. */
            padding: 8px 10px;
            margin: -8px -10px;
            border-radius: 6px;
            cursor: pointer;
        }
        .biz-details-header.open .biz-details-chevron:hover {
            background: #2d333b;
            color: #e1e4e8;
        }

        .biz-details-header.open .biz-details-chevron {
            transform: rotate(180deg);
        }
        /* When a section is open, the header itself stops looking clickable —
           only the chevron is the close affordance. Prevents accidental
           collapse from tapping near the content. */
        .biz-details-header.open { cursor: default; }
        .biz-details-header.open:hover { background: transparent; }

        .biz-details-body {
            display: none;
            padding: 16px 20px 20px;
            border-top: 1px solid #21262d;
        }

        .biz-details-body.open { display: block; }

        .biz-field-group {
            margin-top: 16px;
        }

        .biz-field-label {
            font-size: 12px;
            color: #8b949e;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
            display: block;
        }

        .biz-field-input {
            width: 100%;
            padding: 9px 12px;
            border: 1px solid #21262d;
            border-radius: 8px;
            background: #0d1117;
            color: #e1e4e8;
            font-size: 14px;
            font-family: inherit;
            transition: border-color 0.2s;
        }

        .biz-field-input:focus {
            outline: none;
            border-color: var(--remly-blue);
        }

        .biz-field-input::placeholder { color: #484f58; }

        .biz-field-textarea {
            width: 100%;
            padding: 9px 12px;
            border: 1px solid #21262d;
            border-radius: 8px;
            background: #0d1117;
            color: #e1e4e8;
            font-size: 14px;
            font-family: inherit;
            resize: vertical;
            min-height: 80px;
            line-height: 1.5;
            transition: border-color 0.2s;
        }

        .biz-field-textarea:focus {
            outline: none;
            border-color: var(--remly-blue);
        }

        .biz-field-textarea::placeholder { color: #484f58; }

        .biz-details-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 20px;
        }

        .biz-save-btn {
            padding: 8px 22px;
            border: none;
            border-radius: 8px;
            background: var(--remly-blue);
            color: white;
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .biz-save-btn:hover { opacity: 0.85; }
        .biz-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }

        .biz-save-toast {
            font-size: 13px;
            color: #3fb950;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .biz-save-toast.visible { opacity: 1; }

        /* -- Settings Toggle Switch -- */
        .settings-toggle {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 22px;
            flex-shrink: 0;
        }
        .settings-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .settings-toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #21262d;
            border-radius: 22px;
            transition: background 0.2s;
        }
        .settings-toggle-slider::before {
            content: "";
            position: absolute;
            height: 16px;
            width: 16px;
            left: 3px;
            bottom: 3px;
            background: #8b949e;
            border-radius: 50%;
            transition: transform 0.2s, background 0.2s;
        }
        .settings-toggle input:checked + .settings-toggle-slider {
            background: var(--remly-blue);
        }
        .settings-toggle input:checked + .settings-toggle-slider::before {
            transform: translateX(18px);
            background: #ffffff;
        }
        /* 2026-06-16 — Settings polish: shared classes for the section
           titles, toggle rows, integration cards. Consolidates ~5 inline
           clones into a single pattern. */
        .settings-group-title {
            margin-top: 24px;
            margin-bottom: 8px;
            font-size: 11px;
            font-weight: 700;
            color: #8b949e;
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }
        .settings-group-title:first-child { margin-top: 0; }
        .settings-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 8px;
            margin-bottom: 8px;
            cursor: pointer;
        }
        .settings-row:hover { border-color: #30363d; }
        .settings-row-text {
            flex: 1;
            min-width: 0;
        }
        .settings-row-label {
            font-size: 14px;
            color: #e1e4e8;
            font-weight: 500;
        }
        .settings-row-desc {
            font-size: 12px;
            color: #8b949e;
            margin-top: 2px;
            line-height: 1.4;
        }
        .settings-integration {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 14px 16px;
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 8px;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }
        .settings-integration-text {
            flex: 1;
            min-width: 200px;
        }
        .settings-integration-name {
            font-size: 14px;
            font-weight: 600;
            color: #e1e4e8;
        }
        .settings-integration-desc {
            font-size: 12px;
            color: #8b949e;
            margin-top: 2px;
            line-height: 1.4;
        }
        .settings-integration-action {
            display: inline-flex;
            align-items: center;
            background: var(--remly-blue);
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            text-decoration: none;
            padding: 8px 14px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-family: inherit;
        }
        .settings-integration-action:hover { background: var(--remly-blue-hover); }
        .settings-integration-action.is-connected {
            background: transparent;
            border: 1px solid #30363d;
            color: #3fb950;
        }
        .settings-danger-btn {
            background: transparent;
            color: #f85149;
            border: 1px solid rgba(248,81,73,0.4);
            padding: 7px 14px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
        }
        .settings-danger-btn:hover { background: rgba(248,81,73,0.1); }
        .settings-primary-btn {
            background: var(--remly-blue);
            color: #fff;
            border: none;
            padding: 8px 18px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
        }
        .settings-primary-btn:hover { background: var(--remly-blue-hover); }
        /* 19b: secondary action — Cancel buttons, low-emphasis actions
           in the WhatsApp Templates request form. */
        .settings-secondary-btn {
            background: transparent;
            color: #c9d1d9;
            border: 1px solid #30363d;
            padding: 8px 18px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            font-family: inherit;
        }
        .settings-secondary-btn:hover { background: #21262d; }
        /* 19b.2 (2026-06-18): inline placeholder rendering. Owner sees the
           message body as a regular sentence with placeholder labels
           styled distinctly but without curly braces or square brackets
           — hides the templating mechanics entirely. */
        .ph-inline {
            font-style: italic;
            color: #58a6ff;
            font-weight: 500;
        }

        /* -- Billing Section -- */
        .billing-plans {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 16px;
            margin-top: 16px;
        }

        .billing-card {
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 12px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .billing-card:hover {
            border-color: #30363d;
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        }

        .billing-card.current-plan {
            border-color: var(--remly-blue);
            box-shadow: 0 0 0 1px var(--remly-blue);
        }

        .billing-card-name {
            font-size: 18px;
            font-weight: 700;
            color: #e1e4e8;
            margin-bottom: 4px;
        }

        .billing-card-price {
            font-size: 32px;
            font-weight: 800;
            color: var(--remly-blue);
            margin-bottom: 4px;
        }

        .billing-card-price span {
            font-size: 14px;
            font-weight: 400;
            color: #8b949e;
        }

        .billing-card-features {
            list-style: none;
            padding: 0;
            margin: 16px 0;
            flex: 1;
        }

        .billing-card-features li {
            font-size: 13px;
            color: #8b949e;
            padding: 5px 0;
            padding-left: 20px;
            position: relative;
        }

        .billing-card-features li::before {
            content: "\2713";
            position: absolute;
            left: 0;
            color: #3fb950;
            font-weight: 700;
        }

        .billing-subscribe-btn {
            width: 100%;
            padding: 10px 0;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--remly-blue);
            color: #fff;
            margin-top: 8px;
        }

        .billing-subscribe-btn:hover {
            opacity: 0.9;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }

        .billing-subscribe-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .billing-manage-btn {
            width: 100%;
            padding: 10px 0;
            border: 1px solid #21262d;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.2s;
            background: #161b22;
            color: #e1e4e8;
            margin-top: 16px;
        }

        .billing-manage-btn:hover {
            background: #21262d;
            border-color: #30363d;
        }

        .billing-status-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 16px;
            padding: 14px 18px;
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 10px;
        }

        .billing-status-label {
            font-size: 14px;
            color: #8b949e;
        }

        .billing-status-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        .billing-badge-active { background: rgba(46,160,67,0.15); color: #3fb950; }
        .billing-badge-past_due { background: rgba(210,153,34,0.15); color: #d29922; }
        .billing-badge-canceled { background: rgba(248,81,73,0.15); color: #f85149; }
        .billing-badge-none { background: rgba(72,79,88,0.15); color: #484f58; }

        .analytics-range-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: -8px 0 14px;
        }
        .analytics-range-subtitle {
            font-size: 13px;
            color: #c9d1d9;
            font-weight: 600;
            min-width: 160px;
            text-align: center;
        }
        .analytics-range-arrow {
            background: #161b22;
            color: #c9d1d9;
            border: 1px solid #30363d;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            font-family: inherit;
            padding: 0;
        }
        .analytics-range-arrow:hover:not(:disabled) { background: #21262d; }
        .analytics-range-arrow:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }
        /* "All" range and missing subtitle: hide arrows. */
        .analytics-range-nav.analytics-range-nav-static .analytics-range-arrow { display: none; }
        /* 2026-06-16 — analytics range selector (Week / Month / Year / All). */
        .analytics-range-strip {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .analytics-range-pill {
            background: #161b22;
            color: #c9d1d9;
            border: 1px solid #30363d;
            border-radius: 16px;
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
        }
        .analytics-range-pill:hover { background: #21262d; }
        .analytics-range-pill.analytics-range-active {
            background: var(--remly-blue);
            border-color: var(--remly-blue);
            color: #fff;
        }

        /* -- Analytics Section -- */
        .analytics-cards {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 16px;
        }
        .analytics-card {
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 10px;
            padding: 16px 20px;
            flex: 1;
            min-width: 140px;
        }
        .analytics-card-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--remly-blue);
            line-height: 1.2;
        }
        .analytics-card-label {
            font-size: 12px;
            color: #8b949e;
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .analytics-card-delta {
            font-size: 12px;
            margin-top: 2px;
        }
        .analytics-card-delta.up { color: #3fb950; }
        .analytics-card-delta.down { color: #f85149; }
        .analytics-card-delta.flat { color: #8b949e; }
        .analytics-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 20px;
        }
        .analytics-group {
            flex: 1;
            min-width: 200px;
        }
        .analytics-group-title {
            font-size: 13px;
            font-weight: 600;
            color: #8b949e;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 10px;
        }
        .analytics-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .analytics-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 13px;
            color: #e1e4e8;
        }
        .analytics-badge-count {
            font-weight: 700;
            color: var(--remly-blue);
        }
        /* 2026-06-16 — Leads by Status: bar list instead of pills. Each row
           shows a proportional fill in the status color (left aligned),
           with label + count + % overlaid. Sorted by count desc. */
        .analytics-status-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .analytics-status-row {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 8px 12px;
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 8px;
            overflow: hidden;
        }
        .analytics-status-row-fill {
            position: absolute;
            top: 0; left: 0; bottom: 0;
            background: var(--status-color);
            opacity: 0.14;
            transition: width 0.3s ease;
        }
        .analytics-status-row-label,
        .analytics-status-row-meta {
            position: relative; /* sit above the fill */
        }
        .analytics-status-row-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #e6edf3;
            font-weight: 500;
            text-transform: capitalize;
        }
        .analytics-status-row-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--status-color);
            flex-shrink: 0;
        }
        .analytics-status-row-meta {
            font-size: 12px;
            color: #8b949e;
            font-weight: 600;
            white-space: nowrap;
        }
        .analytics-status-row-meta strong {
            color: #e6edf3;
            font-weight: 700;
            margin-right: 4px;
        }
        /* 2026-06-16 — Shared empty state for analytics bar lists + chart. */
        .analytics-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 20px 12px;
            color: #6e7681;
            text-align: center;
            background: #0d1117;
            border: 1px dashed #21262d;
            border-radius: 8px;
        }
        .analytics-empty svg {
            width: 24px;
            height: 24px;
            opacity: 0.55;
        }
        .analytics-empty span {
            font-size: 12px;
            font-weight: 500;
        }
        .analytics-chart.analytics-empty-chart {
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: none;
        }
        /* 2026-06-16 — chart polish. Gradient bars, "now" highlight, date
           labels, hover brighten so the trend reads better. */
        .analytics-chart {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            height: 120px;
            padding: 8px 0 4px;
            border-bottom: 1px solid #21262d;
        }
        .analytics-bar-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
            min-width: 0;
            height: 100%;
            cursor: default;
        }
        .analytics-bar {
            width: 100%;
            max-width: 36px;
            border-radius: 4px 4px 0 0;
            background: linear-gradient(180deg, var(--remly-blue) 0%, rgba(37,99,235,0.55) 100%);
            min-height: 2px;
            transition: filter 0.15s, transform 0.15s;
        }
        .analytics-bar-col:hover .analytics-bar {
            filter: brightness(1.25);
            transform: translateY(-2px);
        }
        /* Current week (weeks_ago === 0) — accent color so "now" pops. */
        .analytics-bar-col.is-now .analytics-bar {
            background: linear-gradient(180deg, #6ea8ff 0%, rgba(110,168,255,0.55) 100%);
            box-shadow: 0 0 0 1px rgba(110,168,255,0.35);
        }
        .analytics-bar-label {
            font-size: 10px;
            color: #8b949e;
            white-space: nowrap;
            font-weight: 500;
        }
        .analytics-bar-col.is-now .analytics-bar-label {
            color: #c9d1d9;
            font-weight: 700;
        }
        .analytics-bar-count {
            font-size: 11px;
            color: #e1e4e8;
            font-weight: 600;
            min-height: 14px;
        }

        /* -- Appointments Section -- */
        /* 2026-06-16 — Appointments preset chips above the date toolbar. */
        .appt-presets {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }
        .appt-preset {
            background: #161b22;
            color: #c9d1d9;
            border: 1px solid #30363d;
            border-radius: 16px;
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
        }
        .appt-preset:hover { background: #21262d; }
        .appt-preset.is-active {
            background: var(--remly-blue);
            border-color: var(--remly-blue);
            color: #fff;
        }
        .appt-toolbar {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .appt-toolbar input[type="date"] {
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 6px;
            color: #e1e4e8;
            padding: 6px 10px;
            font-size: 13px;
            font-family: inherit;
        }
        .appt-toolbar button {
            background: var(--remly-blue);
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 7px 14px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: inherit;
        }
        .appt-toolbar button:hover { opacity: 0.85; }
        .appt-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
        .appt-table th {
            text-align: left;
            padding: 10px 12px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #8b949e;
            font-weight: 600;
            background: #0d1117;
            border-bottom: 1px solid #21262d;
        }
        .appt-table td {
            padding: 10px 12px;
            font-size: 13px;
            border-bottom: 1px solid #21262d;
            color: #e1e4e8;
        }
        .appt-table tr:last-child td { border-bottom: none; }
        .appt-table tr:hover { background: #1c2333; }
        .appt-status {
            display: inline-block;
            padding: 3px 9px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            font-family: inherit;
        }
        .appt-status-pending { background: rgba(210,153,34,0.15); color: #d29922; }
        .appt-status-confirmed { background: rgba(46,160,67,0.15); color: #3fb950; }
        .appt-status-completed { background: rgba(56,139,253,0.15); color: #58a6ff; }
        .appt-status-cancelled { background: rgba(248,81,73,0.15); color: #f85149; }
        .appt-status-menu {
            position: absolute;
            background: #21262d;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 4px 0;
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .appt-status-menu button {
            display: block;
            width: 100%;
            text-align: left;
            padding: 6px 16px;
            border: none;
            background: none;
            color: #e1e4e8;
            font-size: 13px;
            cursor: pointer;
            font-family: inherit;
        }
        .appt-status-menu button:hover { background: #30363d; }
        .appt-empty {
            text-align: center;
            padding: 32px 16px;
            color: #8b949e;
            font-size: 14px;
        }

        /* -- Bot Settings Section -- */
        .bot-cfg-list-item {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            margin-bottom: 8px;
        }
        .bot-cfg-list-item .biz-field-input,
        .bot-cfg-list-item .biz-field-textarea { flex: 1; }
        .bot-cfg-remove-btn {
            padding: 8px 10px;
            border: 1px solid #da3633;
            border-radius: 8px;
            background: transparent;
            color: #da3633;
            font-size: 12px;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .bot-cfg-remove-btn:hover { background: #da363322; }
        .bot-cfg-add-btn {
            padding: 6px 14px;
            border: 1px dashed #30363d;
            border-radius: 8px;
            background: transparent;
            color: #8b949e;
            font-size: 13px;
            cursor: pointer;
            transition: border-color 0.2s, color 0.2s;
        }
        .bot-cfg-add-btn:hover { border-color: var(--remly-blue); color: var(--remly-blue); }
        .bot-cfg-service-card {
            background: #0d1117;
            border: 1px solid #21262d;
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 10px;
            position: relative;
        }
        .bot-cfg-service-card .bot-cfg-remove-btn {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        .bot-cfg-service-card .biz-field-group { margin-top: 10px; }
        .bot-cfg-service-card .biz-field-group:first-child { margin-top: 0; }

        /* 2026-06-16 — Phase 1 Bot Settings redesign. Each sub-section
           (Basic Settings / Greeting / Services / FAQs / Confirmation /
           Quick Form) is its own mini-collapsable. All collapsed by
           default except Basic Settings — owner opens what they need
           instead of scrolling past 5 screens of forms. */
        .bot-subsection {
            border-top: 1px solid #21262d;
            margin: 0 -20px;
            padding: 0 20px;
        }
        .bot-subsection:first-child { border-top: none; }
        .bot-subsection-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 0;
            cursor: pointer;
            user-select: none;
        }
        .bot-subsection-header:hover { color: #e1e4e8; }
        .bot-subsection-title {
            font-size: 13px;
            font-weight: 700;
            color: #c9d1d9;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .bot-subsection-chevron {
            font-size: 10px;
            color: #8b949e;
            transition: transform 0.2s;
            padding: 4px 8px;
        }
        .bot-subsection-header.open .bot-subsection-chevron {
            transform: rotate(180deg);
            color: #e1e4e8;
        }
        .bot-subsection-body {
            display: none;
            padding-bottom: 18px;
        }
        .bot-subsection-body.open { display: block; }
        .bot-subsection-help {
            font-size: 12px;
            color: #8b949e;
            margin-bottom: 12px;
            line-height: 1.5;
        }

        /* Service / FAQ items as collapsable cards. Header shows the
           item's name + chevron; full form expands inside. Newly-added
           items auto-expand so the owner can fill in the name without
           an extra click. */
        .bot-cfg-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 14px;
            cursor: pointer;
            user-select: none;
        }
        .bot-cfg-item-title {
            font-size: 14px;
            font-weight: 600;
            color: #e1e4e8;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            min-width: 0;
            margin-right: 12px;
        }
        .bot-cfg-item-title.is-placeholder { color: #6e7681; font-weight: 500; font-style: italic; }
        .bot-cfg-item-chevron {
            font-size: 10px;
            color: #8b949e;
            transition: transform 0.2s;
            padding: 4px 6px;
            flex-shrink: 0;
        }
        .bot-cfg-item-header.open .bot-cfg-item-chevron {
            transform: rotate(180deg);
        }
        .bot-cfg-item-body {
            display: none;
            padding: 0 14px 14px;
            border-top: 1px solid #21262d;
            margin-top: 4px;
        }
        .bot-cfg-item-body.open { display: block; }
        /* Service/FAQ card resets so the collapsable header sits flush
           with the card edge. */
        .bot-cfg-service-card.bot-cfg-item-collapsable { padding: 0; }
        .bot-cfg-service-card.bot-cfg-item-collapsable .bot-cfg-remove-btn {
            position: static;
            margin-top: 12px;
        }
        .bot-cfg-service-card.bot-cfg-item-collapsable .biz-field-group:first-child {
            margin-top: 14px;
        }

        /* Phase 2 — visual polish for Bot Settings sub-sections. */
        .bot-subsection-body.open {
            border-left: 2px solid var(--remly-blue);
            padding-left: 12px;
            margin-left: -14px;
        }
        .bot-subsection-header.open .bot-subsection-title {
            color: #ffffff;
        }
        /* Small color preview swatch in the collapsable header — owner
           can see the current color without expanding the picker. */
        .bot-cfg-header-preview-swatch {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            border: 1px solid #30363d;
            flex-shrink: 0;
            margin-right: 8px;
        }
        /* Current avatar emoji shown in the collapsable header. */
        .bot-cfg-header-preview-emoji {
            font-size: 22px;
            line-height: 1;
            margin-right: 8px;
            flex-shrink: 0;
        }
        /* 2026-06-17 — small uppercase label rendered ABOVE a collapsable
           card. Used for Business Details cards where preview values are
           long and would crowd out an inline title. Pair with
           .bot-cfg-item-collapsable.has-external-label so the inner title
           is hidden and the preview takes the full header width. */
        .biz-field-mini-label {
            font-size: 11px;
            font-weight: 700;
            color: #8b949e;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 6px;
            padding-left: 4px;
        }
        .bot-cfg-item-collapsable.has-external-label .bot-cfg-item-title {
            display: none;
        }
        .bot-cfg-item-collapsable.has-external-label .bot-cfg-header-preview-text {
            text-align: left;
            color: #e1e4e8;
            font-weight: 500;
            font-size: 14px;
            flex: 1;
        }
        .bot-cfg-item-collapsable.has-external-label .bot-cfg-header-preview-text.is-placeholder {
            color: #6e7681;
            font-style: italic;
        }

        /* Current field value shown in the collapsable header (text fields:
           Business Name, Notification Email, etc). Right-aligned, ellipsis
           on overflow so long values don't push the chevron off-screen. */
        .bot-cfg-header-preview-text {
            font-size: 13px;
            color: #8b949e;
            margin-right: 8px;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
            flex-shrink: 1;
        }
        .bot-cfg-header-preview-text.is-placeholder { color: #6e7681; font-style: italic; }
        /* Brand color picker — larger swatch + preset palette. */
        .bot-cfg-color-swatch {
            width: 56px;
            height: 56px;
            border: 1px solid #30363d;
            border-radius: 10px;
            background: #0d1117;
            cursor: pointer;
            padding: 4px;
        }
        .bot-cfg-color-presets {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            flex-wrap: wrap;
        }
        .bot-cfg-color-preset {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 2px solid transparent;
            cursor: pointer;
            padding: 0;
            transition: transform 0.1s, border-color 0.2s;
        }
        .bot-cfg-color-preset:hover { transform: scale(1.08); }
        .bot-cfg-color-preset.is-selected {
            border-color: #ffffff;
            box-shadow: 0 0 0 1px #0d1117 inset;
        }
        /* Avatar picker — preset emoji grid + free-text fallback. */
        .bot-cfg-avatar-presets {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 8px;
            margin-bottom: 10px;
            max-width: 360px;
        }
        @media (max-width: 768px) {
            .bot-cfg-avatar-presets { grid-template-columns: repeat(4, 1fr); }
        }
        .bot-cfg-avatar-preset {
            aspect-ratio: 1;
            border: 1px solid #30363d;
            border-radius: 8px;
            background: #0d1117;
            font-size: 22px;
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.2s, transform 0.1s;
        }
        .bot-cfg-avatar-preset:hover { transform: scale(1.06); border-color: #484f58; }
        .bot-cfg-avatar-preset.is-selected {
            border-color: var(--remly-blue);
            box-shadow: 0 0 0 1px var(--remly-blue) inset;
            background: rgba(37, 99, 235, 0.10);
        }
        .bot-cfg-avatar-custom-label {
            font-size: 11px;
            color: #6e7681;
            margin-bottom: 6px;
        }

        /* Tune two-column row gap for laptop. */
        @media (min-width: 769px) {
            .bot-cfg-row { gap: 20px; }
        }

        /* 2026-06-17 — grid items default to min-width:auto which is the
           intrinsic min-content size. With long preview text inside a
           collapsable card, that pushes the card past the column width,
           past the section's overflow:hidden boundary, and the chevron
           gets clipped at the section edge. Forcing min-width:0 lets the
           card respect the column width so inner text ellipsises properly
           and the chevron stays visible. */
        .bot-cfg-row > * { min-width: 0; }

        /* Sticky Save Bot Settings bar on mobile — always visible at the
           bottom of the viewport when the Bot Settings panel is open. No
           scroll-to-save annoyance with long forms. */
        @media (max-width: 768px) {
            #botCfgBody.open .biz-details-footer,
            #bizDetailsBody.open .biz-details-footer {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                margin: 0;
                padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
                background: #161b22;
                border-top: 1px solid #30363d;
                box-shadow: 0 -4px 12px rgba(0,0,0,0.4);
                z-index: 100;
            }
            #botCfgBody.open,
            #bizDetailsBody.open { padding-bottom: 80px; }
        }
        .bot-cfg-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        @media (max-width: 600px) {
            .bot-cfg-row { grid-template-columns: 1fr; }
        }

        /* -- Theme toggle button -- */
        .theme-toggle {
            background: none;
            border: 1px solid #21262d;
            border-radius: 8px;
            padding: 7px 12px;
            cursor: pointer;
            font-size: 13px;
            color: #8b949e;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }
        .theme-toggle:hover { background: #21262d; color: #e1e4e8; }
        .theme-toggle svg { width: 14px; height: 14px; }

        /* -- Light theme override.
           Cosmetic option for business owners. Persisted per-client in
           localStorage. Accent colors (urgent red, contacted teal, etc.)
           stay the same in both modes — only the page chrome flips. -- */

        /* Topbar */

        /* Form controls */

        /* View toggle + refresh + theme toggle */

        /* Stats row */

        /* Table */

        /* Kanban board */

        /* Detail panel (slide-in from right when clicking a lead) */

        /* Generic surfaces */

        /* Unanswered Questions list */

        /* Mobile light-theme tweaks — these only kick in below 768px and
           layer on top of the May 12 mobile rebuild. Same color targets as
           desktop, but the mobile-specific class names need their own rules. */
        @media (max-width: 768px) {
        }