/* Extracted from Views/AIIntent/Chat.cshtml inline <style> blocks to relieve
   the CS8103 user-string ceiling. Razor @ escapes converted back to @. */

        /* LinkedIn Connect Modal Styles */
        .linkedin-connect-container, .email-connect-container {
            background: var(--surface-color, #fff);
            border-radius: 16px;
            width: 90%;
            max-width: 520px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
        }

        .linkedin-connect-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            background: linear-gradient(135deg, #0077b5 0%, #005582 100%);
            color: white;
        }

        .email-connect-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            background: linear-gradient(135deg, #00b3c9 0%, #0090a3 100%);
            color: white;
        }

        .linkedin-connect-header h2, .email-connect-header h2 {
            margin: 0;
            font-size: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .linkedin-connect-body, .email-connect-body {
            padding: 24px;
        }

        .linkedin-connect-body > p, .email-connect-body > p {
            color: var(--text-secondary, #64748b);
            margin-bottom: 20px;
            line-height: 1.5;
            text-align: center;
        }

        /* Connection Options Cards */
        .linkedin-connection-options, .email-provider-options {
            display: flex;
            gap: 16px;
            margin-bottom: 20px;
        }

        .linkedin-option-card, .email-option-card {
            flex: 1;
            background: var(--bg-color, #f8fafc);
            border: 2px solid var(--border-color, #e2e8f0);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .linkedin-option-card:hover, .email-option-card:hover {
            border-color: #00b3c9;
            background: rgba(0, 179, 201, 0.05);
            transform: translateY(-2px);
        }

        .option-icon, .provider-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-size: 28px;
        }

        .option-icon.personal { background: #e3f2fd; color: #1976d2; }
        .option-icon.company { background: #fff3e0; color: #f57c00; }
        .provider-icon.microsoft { background: #e3f2fd; color: #0078d4; }
        .provider-icon.google { background: #fce4ec; color: #ea4335; }

        .linkedin-option-card h4, .email-option-card h4 {
            margin: 0 0 8px;
            font-size: 16px;
            color: var(--text-primary, #1a1a1a);
        }

        .linkedin-option-card p, .email-option-card p {
            margin: 0 0 16px;
            font-size: 13px;
            color: var(--text-secondary, #64748b);
        }

        .premium-badge {
            background: #fef3c7;
            color: #92400e;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            margin-left: 4px;
        }

        .option-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 10px 16px;
            background: #0077b5;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }

        .linkedin-option-card:nth-child(2) .option-btn {
            background: #f57c00;
        }

        .linkedin-connect-note {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-top: 16px;
            padding: 12px;
            background: var(--bg-color, #f8fafc);
            border-radius: 8px;
            font-size: 12px;
            color: var(--text-secondary, #64748b);
        }

        .linkedin-connect-note .material-icons {
            font-size: 16px;
            color: #00b3c9;
            flex-shrink: 0;
        }

        [data-theme="dark"] .linkedin-connect-container {
            background: #1e293b;
        }

        [data-theme="dark"] .linkedin-connect-note {
            background: #0f172a;
        }

        /* Email Connect Form Styles */
        .email-provider-selection {
            margin-bottom: 20px;
        }

        .email-provider-selection > label {
            display: block;
            font-weight: 500;
            margin-bottom: 12px;
            color: var(--text-primary, #1a1a2e);
        }

        .email-provider-options {
            display: flex;
            gap: 12px;
        }

        .email-provider-option {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px;
            background: var(--bg-color, #f8fafc);
            border: 2px solid var(--border-color, #e2e8f0);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .email-provider-option:hover {
            border-color: #00b3c9;
        }

        .email-provider-option.selected {
            border-color: #00b3c9;
            background: rgba(0, 179, 201, 0.1);
        }

        .email-provider-option .provider-icon {
            width: 48px;
            height: 48px;
            margin: 0;
            font-size: 22px;
        }

        .email-provider-option span {
            font-weight: 500;
            color: var(--text-primary, #1a1a2e);
        }

        .email-form-field {
            margin-bottom: 16px;
        }

        .email-form-field label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            margin-bottom: 8px;
            color: var(--text-primary, #1a1a2e);
        }

        .email-form-field label .material-icons {
            font-size: 18px;
            color: #00b3c9;
        }

        .email-form-field input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--border-color, #e2e8f0);
            border-radius: 8px;
            font-size: 14px;
            background: var(--input-bg, #fff);
            color: var(--text-primary, #1a1a2e);
        }

        .email-form-field input:focus {
            outline: none;
            border-color: #00b3c9;
            box-shadow: 0 0 0 3px rgba(0, 179, 201, 0.1);
        }

        .email-form-field small {
            display: block;
            margin-top: 4px;
            font-size: 12px;
            color: var(--text-secondary, #64748b);
        }

        .email-form-checkbox {
            margin: 20px 0;
        }

        .email-form-checkbox label {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            color: var(--text-primary, #1a1a2e);
        }

        .email-form-checkbox input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #00b3c9;
        }

        .email-form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color, #e2e8f0);
        }

        .email-form-actions .btn-secondary {
            padding: 10px 20px;
            background: transparent;
            color: var(--text-secondary, #64748b);
            border: 1px solid var(--border-color, #e2e8f0);
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
        }

        .email-form-actions .btn-primary {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: #00b3c9;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }

        .email-form-actions .btn-primary:hover {
            background: #0090a3;
        }

        /* Dark mode styles for email connect modal */
        [data-theme="dark"] .email-connect-container {
            background: #1e293b;
        }

        [data-theme="dark"] .email-provider-option {
            background: #0f172a;
            border-color: #334155;
        }

        [data-theme="dark"] .email-provider-option:hover {
            border-color: #00b3c9;
        }

        [data-theme="dark"] .email-provider-option.selected {
            border-color: #00b3c9;
            background: rgba(0, 179, 201, 0.2);
        }

        [data-theme="dark"] .email-provider-option span {
            color: #e2e8f0;
        }

        [data-theme="dark"] .email-provider-selection label {
            color: #e2e8f0;
        }

        [data-theme="dark"] .email-form-field label {
            color: #e2e8f0;
        }

        [data-theme="dark"] .email-form-field input {
            background: #0f172a;
            border-color: #334155;
            color: #e2e8f0;
        }

        [data-theme="dark"] .email-form-field input::placeholder {
            color: #64748b;
        }

        [data-theme="dark"] .email-form-field small {
            color: #94a3b8;
        }

        [data-theme="dark"] .email-form-checkbox label span {
            color: #e2e8f0;
        }

        /* Historical LinkedIn Post Styles */
        .linkedin-chat-container.historical {
            border: 1px solid var(--border-color, #e2e8f0);
            border-radius: 12px;
            overflow: hidden;
        }

        .linkedin-chat-container.historical .linkedin-container-header {
            background: linear-gradient(135deg, #0077b5 0%, #005582 100%);
            padding: 12px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .linkedin-historical-label {
            color: white;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .linkedin-recreate-btn {
            background: rgba(255,255,255,0.2);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 6px 12px;
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .linkedin-recreate-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        .linkedin-historical-content {
            padding: 16px;
            background: var(--surface-color, #fff);
        }

        .linkedin-historical-content .linkedin-feed-post {
            margin: 0;
            padding: 0;
            border: none;
            box-shadow: none;
        }

        .linkedin-historical-content .linkedin-post-text {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-primary, #1a1a2e);
            white-space: pre-wrap;
        }

        .linkedin-historical-content .linkedin-image-preview {
            margin-bottom: 12px;
        }

        .linkedin-historical-content .linkedin-post-image {
            max-width: 100%;
            border-radius: 8px;
        }

        [data-theme="dark"] .linkedin-historical-content {
            background: #1e293b;
        }

        [data-theme="dark"] .linkedin-historical-content .linkedin-post-text {
            color: #e2e8f0;
        }

        /* Organization Settings Modal Styles */
        .org-settings-container {
            background: var(--surface-color, #fff);
            border-radius: 16px;
            width: 90%;
            max-width: 520px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
        }

        .org-settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            background: linear-gradient(135deg, #00b3c9 0%, #0090a3 100%);
            color: white;
        }

        .org-settings-header h2 {
            margin: 0;
            font-size: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .org-settings-body {
            padding: 24px;
            max-height: 70vh;
            overflow-y: auto;
        }

        .org-settings-intro {
            margin: 0 0 20px 0;
            color: var(--text-secondary, #64748b);
            font-size: 14px;
        }

        .org-settings-field {
            margin-bottom: 20px;
        }

        .org-settings-field label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            margin-bottom: 8px;
            color: var(--text-primary, #1a1a2e);
        }

        .org-settings-field label .material-icons {
            font-size: 18px;
            color: #00b3c9;
        }

        .org-settings-field input,
        .org-settings-field textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--border-color, #e2e8f0);
            border-radius: 8px;
            font-size: 14px;
            background: var(--input-bg, #fff);
            color: var(--text-primary, #1a1a2e);
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .org-settings-field input:focus,
        .org-settings-field textarea:focus {
            outline: none;
            border-color: #00b3c9;
            box-shadow: 0 0 0 3px rgba(0, 179, 201, 0.1);
        }

        .org-settings-field textarea {
            resize: vertical;
            min-height: 80px;
        }

        .org-field-hint {
            display: block;
            margin-top: 6px;
            font-size: 12px;
            color: var(--text-secondary, #64748b);
        }

        [data-theme="dark"] .org-field-hint {
            color: #94a3b8;
        }

        .org-settings-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color, #e2e8f0);
        }

        .org-settings-btn-secondary {
            padding: 10px 20px;
            background: transparent;
            color: var(--text-secondary, #64748b);
            border: 1px solid var(--border-color, #e2e8f0);
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }

        .org-settings-btn-secondary:hover {
            background: var(--hover-bg, #f1f5f9);
        }

        .org-settings-btn-primary {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: #00b3c9;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }

        .org-settings-btn-primary:hover {
            background: #0090a3;
        }

        .org-settings-btn-primary .material-icons {
            font-size: 18px;
        }

        [data-theme="dark"] .org-settings-container {
            background: #2f2f2f;
        }

        [data-theme="dark"] .org-settings-intro {
            color: #c5c5d2;
        }

        [data-theme="dark"] .org-settings-field label {
            color: #ececf1;
        }

        [data-theme="dark"] .org-settings-field input,
        [data-theme="dark"] .org-settings-field textarea {
            background: #212121;
            border-color: #3e3e4e;
            color: #ececf1;
        }

        [data-theme="dark"] .org-settings-field input::placeholder,
        [data-theme="dark"] .org-settings-field textarea::placeholder {
            color: #8e8ea0;
        }

        [data-theme="dark"] .org-field-hint {
            color: #8e8ea0;
        }

        [data-theme="dark"] .org-settings-actions {
            border-top-color: #3e3e4e;
        }

        /* Personalization modal - extends .org-settings-container with tabs.
           Wider so the LinkedIn About textarea has room to breathe. */
        .personalization-container { max-width: 640px; }
        .pers-tabs {
            display: flex;
            gap: 4px;
            margin: 4px 0 16px;
            padding: 4px;
            background: #f1f5f9;
            border-radius: 10px;
        }
        .pers-tab {
            flex: 1;
            padding: 8px 10px;
            font-size: 13px;
            font-weight: 500;
            color: #64748b;
            background: transparent;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color .12s, color .12s;
        }
        .pers-tab:hover { color: #0f172a; }
        .pers-tab.active {
            background: #fff;
            color: #00b3c9;
            box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
        }
        .pers-pane { display: none; }
        .pers-pane.active { display: block; }
        .pers-field-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .pers-field-row > div { display: flex; flex-direction: column; }
        .pers-hint {
            font-size: 11px;
            font-weight: 400;
            color: #94a3b8;
            margin-left: 4px;
        }
        .pers-empty {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 14px;
            background: #f8fafc;
            border: 1px dashed #cbd5e1;
            border-radius: 10px;
            color: #64748b;
            font-size: 13px;
        }
        .pers-readonly-note {
            margin: 12px 0 0;
            font-size: 12px;
            color: #94a3b8;
            line-height: 1.5;
        }
        [data-theme="dark"] .pers-tabs { background: #2a2a36; }
        [data-theme="dark"] .pers-tab { color: #94a3b8; }
        [data-theme="dark"] .pers-tab.active { background: #1e1e2a; color: #00b3c9; }
        [data-theme="dark"] .pers-empty { background: #1e1e2a; border-color: #3e3e4e; color: #94a3b8; }
        [data-theme="dark"] .pers-readonly-note { color: #6b7684; }

        /* Add Lead modal - reuses .org-settings-container + .pers-tabs.
           Small extras: a hint text under inputs and the QR scan button
           (only rendered on browsers that support BarcodeDetector). */
        .add-lead-container { max-width: 540px; }
        .add-lead-hint {
            display: block;
            margin-top: 4px;
            font-size: 12px;
            color: #94a3b8;
            line-height: 1.4;
        }
        .add-lead-qr-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 10px;
            padding: 8px 12px;
            font-size: 13px;
            font-weight: 500;
            color: var(--primary, #00b3c9);
            background: rgba(0, 179, 201, 0.08);
            border: 1px dashed rgba(0, 179, 201, 0.4);
            border-radius: 8px;
            cursor: pointer;
            transition: background-color .12s, border-color .12s;
        }
        .add-lead-qr-btn:hover {
            background: rgba(0, 179, 201, 0.14);
            border-color: rgba(0, 179, 201, 0.6);
        }
        .add-lead-qr-btn .material-icons { font-size: 16px; }
        [data-theme="dark"] .add-lead-hint { color: #6b7684; }

        /* Fullscreen camera overlay used by scanQRForAddLead. */
        .add-lead-qr-overlay {
            position: fixed; inset: 0; z-index: 10000;
            background: rgba(0,0,0,0.92);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 16px;
        }
        .add-lead-qr-overlay video {
            width: 92%; max-width: 480px; max-height: 70vh;
            border-radius: 12px; background: #000;
        }
        .add-lead-qr-cancel {
            padding: 10px 20px; font-size: 14px; font-weight: 600;
            color: #fff; background: var(--primary, #0d9488);
            border: none; border-radius: 8px; cursor: pointer;
        }

        /* In-modal success state - shown after a successful Quick Add so
           the user can choose between viewing the lead or scanning the
           next person at a conference, instead of being yanked off-page. */
        .add-lead-success { padding: 8px 0 4px; text-align: center; }
        .add-lead-success-icon {
            font-size: 56px; line-height: 1; color: var(--primary, #0d9488);
            margin: 8px 0 12px;
        }
        .add-lead-success-icon .material-icons { font-size: 56px; }
        .add-lead-success-icon.dup { color: #f59e0b; }
        .add-lead-success-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
        .add-lead-success-sub { margin: 0 0 18px; font-size: 13.5px; color: #475569; }
        .add-lead-success .org-settings-actions { justify-content: center; }
        a.org-settings-btn-primary { text-decoration: none; }

        /* Small icon button in the sidebar nav-section header - used
           today for "Add a lead" next to the Contacts heading. Lives
           alongside the chevron and stops propagation so clicking it
           opens the modal without toggling the section. */
        .nav-section-header-actions {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .nav-section-add-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            padding: 0;
            border: none;
            background: transparent;
            color: var(--text-secondary, #64748b);
            border-radius: 6px;
            cursor: pointer;
            transition: background-color .12s, color .12s;
        }
        .nav-section-add-btn .material-icons { font-size: 16px; }
        .nav-section-add-btn:hover {
            background: rgba(0, 179, 201, 0.12);
            color: var(--primary, #00b3c9);
        }
        [data-theme="dark"] .nav-section-add-btn { color: #94a3b8; }
        [data-theme="dark"] .nav-section-add-btn:hover {
            background: rgba(0, 212, 230, 0.14);
            color: var(--primary, #00d4e6);
        }

        /* QR scan overlay - fullscreen, centered video, single cancel
           button. Lives outside the modal so it can take over the
           viewport while the modal stays open underneath. */
        .add-lead-qr-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.92);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }
        .add-lead-qr-overlay video {
            width: 92%;
            max-width: 480px;
            max-height: 70vh;
            border-radius: 12px;
            background: #000;
        }
        .add-lead-qr-cancel {
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            background: var(--primary, #00b3c9);
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
        .add-lead-qr-cancel:hover {
            background: #0090a3;
        }

        /* Stack the two-column ICP / LinkedIn rows on phones so labels and
           inputs don't get squeezed. */
        @media (max-width: 480px) {
            .pers-field-row { grid-template-columns: 1fr; gap: 0; }
            .pers-tab { font-size: 12px; padding: 8px 6px; }
            .personalization-container { width: 96%; }
        }

        /* Unified mobile sizing for every modal on the chat page so the
           personalization, add-lead, settings, team, upgrade, etc.
           overlays all behave the same on a phone instead of each having
           its own broken layout. Uses dvh to keep modal content inside
           the viewport even with iOS Safari's URL bar visible. */
        @media (max-width: 576px) {
            .modal-overlay,
            .settings-modal-overlay {
                /* iOS sometimes reserves room for the URL bar when using
                   100vh, leaving the modal cropped. svh/dvh fix this. */
                height: 100dvh;
                min-height: 100dvh;
            }
            .modal,
            .org-settings-container,
            .linkedin-connect-container,
            .add-lead-container,
            .personalization-container {
                width: 96vw !important;
                max-width: 96vw !important;
                max-height: 90dvh !important;
                display: flex;
                flex-direction: column;
            }
            .modal-body,
            .org-settings-body {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .modal-header,
            .org-settings-header {
                padding: 14px 16px;
            }
            .modal-header h2,
            .org-settings-header h2 {
                font-size: 16px;
            }
            /* Stacked footer buttons on phone - full-width with primary
               on top so the most-likely action is the easiest tap. */
            .org-settings-actions,
            .modal-footer {
                flex-direction: column-reverse;
                gap: 8px;
            }
            .org-settings-actions > *,
            .modal-footer > * {
                width: 100%;
                margin: 0 !important;
            }
        }

        [data-theme="dark"] .org-settings-btn-secondary {
            color: #c5c5d2;
            border-color: #3e3e4e;
        }

        [data-theme="dark"] .org-settings-btn-secondary:hover {
            background: #3e3e4e;
        }

        .tapi-sel{position:relative;display:inline-flex;align-items:center;margin:0 4px;flex-shrink:0}

        /* AI disclaimer below the chat input - small, muted, dark-mode aware. */
        .chat-disclaimer {
            margin: 6px auto 0;
            padding: 0 12px;
            font-size: 11.5px;
            line-height: 1.4;
            color: #94a3b8;
            text-align: center;
        }
        [data-theme="dark"] .chat-disclaimer { color: #6b7684; }

        /* Sidebar brand row - logo on the left, theme toggle pinned to
           the right, both vertically centered on the same line. Works
           the same on mobile because the sidebar drawer reuses the
           same .sidebar-header. */
        .sidebar-brand-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 12px;
        }
        .sidebar-brand-row .logo-link {
            display: inline-flex;
            align-items: center;
            min-width: 0;
            flex: 1;
        }

        .sidebar-theme-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            padding: 0;
            flex-shrink: 0;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--text-secondary, #64748b);
            cursor: pointer;
            transition: background-color .12s, color .12s;
        }
        .sidebar-theme-btn .material-icons { font-size: 18px; line-height: 1; }
        .sidebar-theme-btn:hover {
            background: rgba(148, 163, 184, 0.14);
            color: var(--primary, #00b3c9);
        }
        [data-theme="dark"] .sidebar-theme-btn { color: #94a3b8; }
        [data-theme="dark"] .sidebar-theme-btn:hover {
            background: rgba(148, 163, 184, 0.18);
            color: var(--primary, #00b3c9);
        }
        .tapi-btn{display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border:none;background:transparent;color:#b0b0b0;font-size:11px;font-weight:400;cursor:pointer;border-radius:4px;transition:color .15s;letter-spacing:0.2px}
        .tapi-btn:hover{color:#888}
        .tapi-caret{font-size:7px;margin-left:2px;line-height:1}
        .tapi-menu{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:5px;z-index:1000;width:244px;max-width:84vw}
        .tapi-menu.open{display:block}
        .tapi-menu-head{padding:5px 8px 4px;font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#9ca3af}
        .tapi-item{display:block;padding:6px 9px;cursor:pointer;border-radius:7px;text-align:left;white-space:nowrap}
        .tapi-item:hover{background:#f3f4f6}
        .tapi-item-row{display:flex;align-items:center;gap:6px}
        .tapi-item-title{font-size:12.5px;font-weight:600;color:#1f2937}
        .tapi-item-tag{font-size:9.5px;font-weight:600;letter-spacing:.2px;color:#6b7280;background:#eef0f2;padding:1px 6px;border-radius:999px}
        .tapi-item-sub{display:block;margin-top:1px;font-size:11px;line-height:1.3;color:#6b7280;font-weight:400;overflow:hidden;text-overflow:ellipsis}
        .tapi-item.active{background:#ecfdfd}
        .tapi-item.active .tapi-item-title{color:#0090a3}
        .tapi-item.active .tapi-item-tag{color:#0090a3;background:#cdf3f7}
        [data-theme="dark"] .tapi-btn,.dark-mode .tapi-btn{color:#555}
        [data-theme="dark"] .tapi-btn:hover,.dark-mode .tapi-btn:hover{color:#888}
        [data-theme="dark"] .tapi-menu,.dark-mode .tapi-menu{background:#1e293b;border-color:#334155;box-shadow:0 8px 24px rgba(0,0,0,.5)}
        [data-theme="dark"] .tapi-menu-head,.dark-mode .tapi-menu-head{color:#64748b}
        [data-theme="dark"] .tapi-item:hover,.dark-mode .tapi-item:hover{background:#334155}
        [data-theme="dark"] .tapi-item-title,.dark-mode .tapi-item-title{color:#e2e8f0}
        [data-theme="dark"] .tapi-item-tag,.dark-mode .tapi-item-tag{color:#94a3b8;background:#334155}
        [data-theme="dark"] .tapi-item-sub,.dark-mode .tapi-item-sub{color:#94a3b8}
        [data-theme="dark"] .tapi-item.active,.dark-mode .tapi-item.active{background:#0e3a40}
        [data-theme="dark"] .tapi-item.active .tapi-item-title,.dark-mode .tapi-item.active .tapi-item-title{color:#22d3ee}
        [data-theme="dark"] .tapi-item.active .tapi-item-tag,.dark-mode .tapi-item.active .tapi-item-tag{color:#22d3ee;background:#155e6b}