.ai-prompt-box {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 9998;
}
/* Mobile: lift the floating AI button well above the bottom navigation bar
   AND compact it to a perfect circle (icon only — no "MyExcise AI" text)
   so it no longer overlaps the right-most nav item horizontally or vertically.
   The text label is hidden on mobile here so the toggle becomes a 56px FAB. */
@media (max-width: 768px) {
    .ai-prompt-box {
        bottom: calc(96px + env(safe-area-inset-bottom, 0));
        right: 16px;
    }
    .ai-prompt-toggle {
        width: 56px;
        height: 56px;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center;
        font-size: 22px;
    }
    /* Hide the inline "MyExcise AI" text labels on mobile — the circular
       FAB shows only the robot icon. */
    .ai-prompt-toggle > span { display: none !important; }
    /* Keep the prompts-remaining badge visible, positioned on the corner. */
    .ai-prompt-toggle .ai-badge {
        display: inline-block !important;
        position: absolute;
        top: -4px;
        right: -4px;
    }
    /* 2026-10-04 (P1.5): reserve space at the bottom of every mobile
       page so the final card is not swallowed by the FAB + nav. The
       nav alone needs 64px (mobile_bottom_nav sets padding-bottom:
       64px today); add another 64px for the FAB floor. */
    body { padding-bottom: 128px !important; }
    /* 2026-10-04 (P1.5): when the PWA install banner is actually visible
       (JS adds .pwa-banner-visible to <body>), bump the FAB above the
       banner so the install prompt's "Not now / Install" buttons are
       tappable. The banner's own top edge sits around bottom:76px +
       its ~56px height. Lifting the FAB to 168px clears it. */
    body.pwa-banner-visible .ai-prompt-box {
        bottom: calc(168px + env(safe-area-inset-bottom, 0));
    }
}
/* 2026-10-04 (P1.5): hide the FAB inside the TWA entirely so the
   bottom-nav "Ask Excise" tab is the single AI entry point there.
   The .mx-twa class is added to <body> inside the inTwa IIFE in
   book.blade.php. */
body.mx-twa .ai-prompt-box { display: none !important; }
/* Fullscreen mode */
.ai-prompt-box.ai-fullscreen {
    inset: 0;
    bottom: 0;
    right: 0;
    z-index: 10000;
}
.ai-prompt-box.ai-fullscreen .ai-prompt-toggle {
    display: none;
}
.ai-prompt-box.ai-fullscreen .ai-prompt-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
}
.ai-prompt-box.ai-fullscreen .ai-answer {
    max-height: none;
    overflow: visible;
}
.ai-prompt-box.ai-fullscreen .ai-panel-body {
    padding: 10px 12px;   /* 2026-07-31: was 20px — reduced side padding so
                             the answer area fills the viewport width */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ai-prompt-box.ai-fullscreen #aiResponse {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    min-height: 0;
}
.ai-prompt-box.ai-fullscreen .ai-input-area {
    flex-shrink: 0;
    padding-top: 10px;
}
.ai-prompt-box.ai-fullscreen .ai-footer {
    flex-shrink: 0;
}
.ai-prompt-box.ai-fullscreen .ai-input-area textarea {
    font-size: 16px;
}
.ai-prompt-toggle {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: white;
    padding: 14px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    animation: ai-pulse 3s ease-in-out infinite;
}
.ai-prompt-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(124, 58, 237, 0.5);
}
@keyframes ai-pulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4); }
    50% { box-shadow: 0 4px 25px rgba(124, 58, 237, 0.7); }
}
.ai-badge {
    background: #fbbf24;
    color: #1d2939;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 50px;
    margin-left: 8px;
}
.ai-prompt-panel {
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 420px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 140px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ai-panel-header {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: white;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.ai-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-panel-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.ai-input-area {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
/* Sticky balance chip — floats top-right of the input area, visible at all
   times even when the footer counter scrolls off on mobile. Tap = recharge. */
.ai-balance-sticky {
    position: absolute;
    top: -11px;
    right: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #4338ca;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    z-index: 3;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: transform .12s;
}
.ai-balance-sticky:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.ai-balance-sticky.low      { color: #b45309; border-color: #fcd34d; background: #fffbeb; }
.ai-balance-sticky.critical { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.ai-input-area textarea {
    flex: 1;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    resize: none;
    line-height: 1.5;
    min-height: 72px;
    max-height: 140px;
    overflow-y: auto;
    transition: border-color 0.2s;
}
.ai-input-area textarea:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
.ai-submit-btn {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.ai-submit-btn:hover {
    transform: scale(1.05);
}
.ai-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ai-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12px;
    color: #98a2b3;
}
.ai-trial-note {
    background: #fef3c7;
    color: #d97706;
    padding: 1px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.ai-answer {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.7;
    max-height: calc(100vh - 380px);
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    color: #1d2939;
}
.ai-answer .ai-gate-response {
    text-align: center;
    padding: 10px 0;
}
.ai-answer .ai-gate-response i.ai-gate-icon {
    font-size: 32px;
    margin-bottom: 10px;
    display: block;
}
.ai-answer .ai-gate-response h6 {
    font-size: 15px;
    font-weight: 700;
    color: #1d2939;
    margin-bottom: 6px;
}
.ai-answer .ai-gate-response p {
    font-size: 13px;
    color: #667085;
    margin-bottom: 12px;
}
.ai-answer .ai-gate-btn {
    display: inline-block;
    padding: 10px 22px;
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: white !important;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 8px;
}
.ai-answer .ai-gate-btn:hover {
    transform: translateY(-1px);
    color: white !important;
}
.ai-answer .ai-gate-link {
    display: block;
    color: #667085;
    font-size: 12px;
    text-decoration: none;
}
.ai-loading {
    text-align: center;
    padding: 20px;
    color: #7c3aed;
}
.ai-loading-steps {
    text-align: left;
    margin-top: 12px;
    font-size: 12px;
    color: #6b7280;
}
.ai-loading-steps .step {
    padding: 4px 0;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
.ai-loading-steps .step.active {
    opacity: 1;
    color: #7c3aed;
    font-weight: 600;
}
.ai-loading-steps .step.done {
    opacity: 0.7;
    color: #10b981;
}
.ai-loading-steps .step i {
    width: 16px;
    text-align: center;
    margin-right: 6px;
}
.ai-answer strong {
    color: #5b21b6;
    font-weight: 700;
}
.ai-table-wrapper {
    overflow-x: auto;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #d8b4fe;
}
.ai-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
    background: #fff;
}
.ai-table th {
    background: #ede9fe;
    color: #5b21b6;
    padding: 8px 14px;
    text-align: left;
    border-bottom: 2px solid #d8b4fe;
    border-right: 1px solid #d8b4fe;
    font-weight: 600;
    white-space: nowrap;
}
.ai-table th:last-child { border-right: none; }
.ai-table td {
    padding: 7px 14px;
    border-bottom: 1px solid #f0e7ff;
    border-right: 1px solid #f0e7ff;
    vertical-align: top;
}
.ai-table td:last-child { border-right: none; }
.ai-table tr:last-child td { border-bottom: none; }
.ai-table tr:nth-child(even) td { background: #faf7ff; }
.ai-answer .ai-list-item {
    padding: 2px 0 2px 12px;
    position: relative;
}
/* Stage 3: Section headers from GPT response format (## Direct Answer, ## Source, etc.) */
.ai-section-header {
    font-weight: 700;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1a365d;
    margin: 12px 0 4px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid #dde4f0;
    display: block;
}
.ai-section-header:first-child { margin-top: 2px; }
.ai-answer .ai-bullet {
    color: #7c3aed;
    font-weight: bold;
    margin-right: 4px;
}
.ai-answer .ai-list-num {
    color: #7c3aed;
    font-weight: 600;
    margin-right: 4px;
}
.ai-sources {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}
.ai-sources-header {
    font-size: 12px;
    font-weight: 700;
    color: #5b21b6;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-sources-header .ai-sources-count {
    background: #ede9fe;
    color: #5b21b6;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
}
/* ── Citation Cards ────────────────────────────────────────────── */
.ai-cite-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}
.ai-cite-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    position: relative;
    cursor: pointer;
}
.ai-cite-card:hover {
    border-color: #c4b5fd;
    box-shadow: 0 3px 10px rgba(124, 58, 237, .08);
    transform: translateY(-1px);
}
.ai-cite-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #fff;
    margin-right: 6px;
    vertical-align: middle;
}
.ai-cite-status {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 600;
    vertical-align: middle;
}
.ai-cite-status-current   { background: #dbeafe; color: #1e40af; }
.ai-cite-status-amended   { background: #fef3c7; color: #92400e; }
.ai-cite-status-superseded{ background: #ffedd5; color: #9a3412; }
.ai-cite-status-repealed  { background: #fee2e2; color: #991b1b; }
.ai-cite-status-needsverify { background: #f1f5f9; color: #475569; }
.ai-cite-status-verified  { background: #dcfce7; color: #166534; }
.ai-cite-relevance {
    float: right;
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* 2026-07-31: title + snippet colors bumped to dark blue for readability.
   Title was slate-800 (#1e293b) which looked muted against the card bg;
   snippet was slate-500 (#64748b) which was too light for the small italic
   type. Founder — 'make font in dark blue color to be clearly readable'. */
.ai-cite-title {
    font-size: 13px;
    color: #1e3a8a;               /* blue-900, dark + clearly readable */
    font-weight: 600;
    line-height: 1.35;
    margin-top: 4px;
    word-break: break-word;
}
.ai-cite-snippet {
    font-size: 11.5px;
    color: #1e40af;               /* blue-800, one shade lighter for hierarchy */
    line-height: 1.45;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: italic;
}
.ai-cite-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.ai-cite-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    transition: all .12s ease;
}
.ai-cite-btn:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.ai-cite-btn-pdf:hover { background: #dc2626; border-color: #dc2626; }
.ai-cite-btn-copy { cursor: pointer; font-family: inherit; }
.ai-cite-btn-copy:hover { background: #4338ca; border-color: #4338ca; }
.ai-cite-btn-copied,
.ai-cite-btn-copied:hover {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}
.ai-cite-more-btn {
    background: transparent;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    width: 100%;
    transition: all .12s ease;
}
.ai-cite-more-btn:hover { background: #f1f5f9; color: #1e293b; }
@media (max-width: 480px) {
    .ai-cite-grid { grid-template-columns: 1fr; }
}
.ai-sources-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ai-source-item {
    font-size: 11px;
    color: #667085;
    background: #f3f0ff;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1.4;
}
.ai-source-item i {
    color: #7c3aed;
    font-size: 10px;
    margin-right: 3px;
}
.ai-source-clickable {
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.ai-source-clickable:hover {
    background: #e8e0ff;
    color: #5b21b6;
    border-color: #c4b5fd;
}
.ai-processing-note {
    text-align: center;
    font-size: 11px;
    color: #98a2b3;
    margin-top: 6px;
}
/* Clarification question UI */
.ai-clarify-box {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border: 1px solid #c4b5fd;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}
.ai-clarify-icon {
    font-size: 24px;
    color: #7c3aed;
    margin-bottom: 8px;
}
.ai-clarify-question {
    font-size: 14px;
    font-weight: 600;
    color: #1d2939;
    margin-bottom: 12px;
    line-height: 1.5;
}
.ai-clarify-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ai-choice-btn {
    background: white;
    border: 1.5px solid #c4b5fd;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
}
.ai-choice-btn:hover {
    background: #7c3aed;
    color: white;
    border-color: #7c3aed;
    transform: translateX(4px);
}
.ai-choice-btn .ai-choice-num {
    background: #ede9fe;
    color: #7c3aed;
    font-weight: 700;
    font-size: 11px;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-choice-btn:hover .ai-choice-num {
    background: rgba(255,255,255,0.25);
    color: white;
}
/* Clickable page link (View) for rules/sections/regulations in sources */
.ai-page-link {
    display: inline-block;
    background: #0066FB;
    color: white !important;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    text-decoration: none;
    margin-left: 4px;
    vertical-align: middle;
}
.ai-page-link:hover {
    background: #0052cc;
    color: white !important;
    text-decoration: none;
}
/* Clickable PDF link in sources */
.ai-pdf-link {
    display: inline-block;
    background: #dc3545;
    color: white !important;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    text-decoration: none;
    margin-left: 4px;
    vertical-align: middle;
}
.ai-pdf-link:hover {
    background: #b02a37;
    color: white !important;
    text-decoration: none;
}

/* #6: Clickable citation links in AI response text (inline deep links) */
.ai-citation-link {
    color: #0066FB !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: all 0.2s ease;
    cursor: pointer;
}
.ai-citation-link:hover {
    color: #0052cc !important;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    background: rgba(0, 102, 251, 0.08);
    border-radius: 3px;
    padding: 0 2px;
}
/* Icon after external citation links */
.ai-citation-link::after {
    content: '\f35d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    margin-left: 3px;
    opacity: 0.6;
    vertical-align: super;
}

/* Unverified (backfilled) citation — found in DB but NOT in RAG context */
.ai-citation-ref {
    color: #6c757d !important;
    font-weight: 500;
    text-decoration-color: #adb5bd;
}
.ai-citation-ref:hover {
    color: #495057 !important;
    background: rgba(108, 117, 125, 0.08);
}
.ai-citation-ref::after {
    content: '\f059';  /* question-circle icon */
    opacity: 0.5;
}

/* #11: Confidence indicator styling */
.ai-confidence-container {
    margin: 15px 0;
    padding: 12px 15px;
    border-radius: 8px;
    border-left: 4px solid;
    background: #f8f9fa;
}
.ai-confidence-container.confidence-high {
    border-color: #28a745;
    background: linear-gradient(to right, rgba(40, 167, 69, 0.05), rgba(40, 167, 69, 0));
}
.ai-confidence-container.confidence-medium {
    border-color: #ffc107;
    background: linear-gradient(to right, rgba(255, 193, 7, 0.05), rgba(255, 193, 7, 0));
}
.ai-confidence-container.confidence-low {
    border-color: #dc3545;
    background: linear-gradient(to right, rgba(220, 53, 69, 0.05), rgba(220, 53, 69, 0));
}
.ai-confidence-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}
.confidence-icon {
    font-size: 18px;
}
.confidence-label {
    color: #333;
}
.confidence-score {
    color: #6c757d;
    font-size: 13px;
    font-weight: 500;
}
.ai-confidence-breakdown {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
}
.ai-confidence-warning {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
    font-size: 12px;
    color: #721c24;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Voice Input / Output ── */
.ai-mic-btn {
    background: #f3f0ff;
    color: #7c3aed;
    border: 2px solid #e2e8f0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    font-size: 16px;
}
.ai-mic-btn:hover { background: #ede9fe; border-color: #c4b5fd; }
.ai-mic-btn.recording {
    background: #fee2e2;
    color: #dc2626;
    border-color: #dc2626;
    animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}
/* 2026-06-15: was display:none — left users on iOS Safari / WhatsApp in-app
   browser staring at a missing button with no idea voice input was a thing.
   Now keep the button visible but faded; click handler explains why. */
.ai-mic-btn.unsupported {
    opacity: 0.45;
    background: #f1f5f9;
    border-style: dashed;
    cursor: help;
}
.ai-voice-lang {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.ai-lang-btn {
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    padding: 3px 10px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    color: #64748b;
    transition: all 0.15s;
}
.ai-lang-btn.active {
    background: #7c3aed;
    color: white;
    border-color: #7c3aed;
}
.ai-voice-status {
    font-size: 11px;
    color: #98a2b3;
    margin-left: auto;
    /* 2026-06-15: was getting clipped on mobile when showing the longer
       permission-blocked instruction. Let it wrap, take a new line if
       needed, and stand out enough to be readable. */
    flex: 1 1 100%;
    max-width: 100%;
    word-break: break-word;
    line-height: 1.4;
    margin-top: 4px;
}
.ai-voice-status.listening { color: #dc2626; font-weight: 600; font-size: 12px; }
.ai-speak-btn {
    background: none;
    border: 1px solid #e9ecef;
    color: #7c3aed;
    cursor: pointer;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}
.ai-speak-btn:hover { color: #fff; background: #7c3aed; border-color: #7c3aed; }
.ai-speak-btn.speaking { color: #fff; background: #7c3aed; border-color: #7c3aed; animation: speak-pulse 0.8s ease-in-out infinite; }
@keyframes speak-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Streaming cursor animation */
.ai-answer.streaming::after {
    content: '\u258C';
    animation: ai-blink 0.7s step-end infinite;
    color: #7c3aed;
    font-weight: bold;
}
@keyframes ai-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Source Detail Modal */
.ai-source-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ai-source-modal-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ai-source-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.ai-source-modal-header h6 {
    margin: 0;
    font-size: 14px;
    color: #5b21b6;
    font-weight: 700;
    line-height: 1.4;
}
.ai-source-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #667085;
    line-height: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-source-modal-close:hover {
    color: #dc3545;
}
.ai-source-modal-body {
    padding: 20px;
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior: contain;
    font-size: 14px;
    line-height: 1.7;
    color: #1d2939;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ── #16 Chat History Container ── */
.ai-chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
/* Welcome message */
.ai-welcome-msg {
    text-align: center;
    padding: 18px 10px 8px;
    color: #667085;
}
.ai-welcome-icon {
    font-size: 28px;
    color: #0066FB;
    display: block;
    margin-bottom: 8px;
}
.ai-welcome-msg p { font-size: 13px; margin-bottom: 10px; }
.ai-welcome-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ai-chip {
    background: #f0f6ff;
    border: 1px solid #cce0ff;
    border-radius: 20px;
    color: #0066FB;
    font-size: 11px;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.ai-chip:hover { background: #0066FB; color: white; }

/* Message rows */
.ai-msg-row { display: flex; margin-bottom: 2px; }
.ai-msg-user-row { justify-content: flex-end; }
.ai-msg-ai-row { justify-content: flex-start; }

/* Message bubbles.
   2026-07-31: max-width bumped 90% → 98% so the answer area uses nearly
   the full container width instead of leaving 10% wasted on the right. */
.ai-msg-bubble {
    max-width: 98%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.65;
    word-break: break-word;
}
.ai-msg-user {
    background: linear-gradient(135deg, #0066FB, #0052cc);
    color: white;
    border-radius: 16px 16px 4px 16px;
}
.ai-msg-ai {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #1d2939;
    border-radius: 16px 16px 16px 4px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.ai-msg-ai.streaming::after {
    content: '▌';
    animation: blink 0.7s step-end infinite;
}
/* Typing dots for loading state */
.ai-typing-dots { display: flex; gap: 4px; padding: 4px 0; }
.ai-typing-dots span {
    width: 7px; height: 7px;
    background: #9198a1;
    border-radius: 50%;
    animation: bounce 1.2s infinite;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40% { transform: scale(1.2); opacity: 1; }
}

/* ── 2026-05-29 — Day 1 intent-visibility progress timeline ──
   Renders BEFORE the LLM answer streams. Each .ai-progress-item is one
   stage. Bilingual mode shows both English + Marathi lines stacked.
   When the answer begins streaming, .ai-progress-timeline.completed
   collapses to a more compact appearance below the answer.            */
.ai-progress-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
    border-left: 2px solid #c7d2fe;
    padding-left: 12px;
    margin-bottom: 8px;
}
.ai-progress-item {
    font-size: 13px;
    color: #374151;
    line-height: 1.45;
    white-space: pre-wrap;
    animation: progressFadeIn 0.35s ease-out;
}
.ai-progress-line.ai-progress-en { color: #1e3a8a; }
.ai-progress-line.ai-progress-mr {
    color: #5b21b6;
    font-size: 12.5px;
    margin-top: 2px;
}
.ai-progress-phase-understanding .ai-progress-line { font-weight: 600; }
.ai-progress-phase-drafting     .ai-progress-line { font-style: italic; color: #6b7280; }

/* Active state — persistent pulse while Sonnet generates (5-15s TTFT).
   Removed when first answer token arrives. */
.ai-progress-item.ai-progress-active .ai-progress-line {
    position: relative;
}
.ai-progress-item.ai-progress-active .ai-progress-line::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-radius: 50%;
    background: #2563eb;
    vertical-align: middle;
    animation: progressActivePulse 1.1s ease-in-out infinite;
}
@keyframes progressActivePulse {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.25); }
}

/* Rotating sub-status text under the active item. Cycles every 3.5s
   through reassuring micro-messages so the UI doesn't go dead. */
.ai-progress-substatus {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #9ca3af;
    font-style: italic;
    transition: opacity 0.3s ease;
}
.ai-progress-substatus-mr {
    color: #a78bfa;
}
.ai-progress-substatus-en {
    color: #94a3b8;
}

.ai-progress-timeline.completed {
    border-left-color: #d1d5db;
    opacity: 0.78;
    margin-bottom: 12px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #e5e7eb;
}
.ai-progress-timeline.completed .ai-progress-item {
    font-size: 11.5px;
    line-height: 1.35;
    color: #6b7280;
}
.ai-progress-timeline.completed .ai-progress-line.ai-progress-mr { font-size: 11px; }

.ai-progress-answer { margin-top: 4px; }

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

@media (max-width: 480px) {
    .ai-progress-timeline { padding-left: 10px; }
    .ai-progress-item     { font-size: 12px; }

    /* 2026-07-31: mobile-only — widen the answer bubble to match /manual
       page-body width. Founder feedback: left/right margins on the AI
       response were too wide, making the bubble unnecessarily narrow. */
    .ai-msg-bubble        { max-width: 100%; padding: 10px 8px; }
    .ai-msg-bubble.ai-msg-ai { max-width: 100%; padding: 12px 10px; }
    .ai-chat-history      { padding: 10px 6px; }
}

/* 2026-07-31: keyboard-safe layout — use dynamic viewport height (`dvh`)
   so the chat panel shrinks correctly when the mobile keyboard rises,
   keeping the last AI answer visible above the input bar. Browsers that
   don't support dvh fall back to vh (identical behaviour on desktop). */
@supports (height: 100dvh) {
    .ai-prompt-box.ai-fullscreen {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
    .ai-chat-history {
        max-height: calc(100dvh - 200px);
    }
}

/* ── 2026-05-29 — Memo-format Layer 2: lawyer-grade typography ─────────
   Existing AI answers used GitHub-README defaults — fine for code, wrong
   for legal output. These rules transform the same Markdown→HTML render
   into a "legal memo" aesthetic: serif-ish hierarchy, blockquote with
   left border (replaces raw >), citation pills, clean tables, generous
   whitespace, monochrome-print compatibility.                           */

/* Body answer container — anchors readability constraints.
   2026-07-31: max-width bumped 72ch → 100% so the AI bubble uses the
   full width of the .ai-msg-bubble slot instead of capping at ~600px
   on wide desktop screens (which left huge empty space to the right). */
.ai-msg-bubble.ai-msg-ai .ai-progress-answer,
.ai-msg-bubble.ai-msg-ai {
    font-size: 14.5px;
    line-height: 1.68;
    color: #1f2937;
    max-width: 100%;
}
.ai-msg-bubble.ai-msg-ai p {
    margin: 0 0 0.9em 0;
}

/* H2 section headers (Answer, Source, Limitations etc.) — promoted to
   memo-grade with bottom border and generous top space. The existing
   .ai-section-header is reused; we override its baseline styling. */
.ai-section-header {
    font-size: 15px;
    font-weight: 700;
    color: #1e3a8a;
    margin: 22px 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #e0e7ff;
    letter-spacing: 0.02em;
}
.ai-section-header:first-child {
    margin-top: 4px;
}

/* H3 sub-headers — small caps, no border, used for sub-sections inside
   the Answer (e.g. "Renewal Procedure", "Effective Date"). */
.ai-memo-h3 {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    margin: 16px 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: inherit;
}

/* Blockquote — verbatim quotations from base law / notifications.
   Replaces the raw "> " Markdown syntax with an indented italics block
   that reads like a printed citation in a brief. */
.ai-memo-quote {
    margin: 14px 0;
    padding: 10px 16px;
    border-left: 3px solid #93c5fd;
    background: #f8fafc;
    color: #334155;
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.65;
    border-radius: 0 4px 4px 0;
}
.ai-memo-quote strong { color: #1e293b; font-style: normal; }

/* Horizontal rule — when LLM uses ---. Subtle dashed line, never a thick bar. */
.ai-memo-rule {
    border: 0;
    border-top: 1px dashed #cbd5e1;
    margin: 18px 0;
    height: 0;
}

/* Citation pills — [#1] [#2] become small superscript chips that are
   visually distinct without breaking inline flow. Click-to-scroll handled
   in the answer-bubble JS layer (existing). */
.ai-cite-pill {
    display: inline-block;
    vertical-align: super;
    font-size: 10.5px;
    line-height: 1;
    padding: 2px 6px;
    margin: 0 1px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ai-cite-pill:hover { background: #dbeafe; }

/* 2026-06-07 (CG1 Phase 4): superseded-citation staleness banner. Renders
   inside a citation card when the underlying atom (rule / notification) was
   amended after the citation was created. Yellow accent so it's noticeable
   without screaming — accurate "verify before acting" framing matches the
   counsel-grade trust posture. */
.ai-cite-card-stale {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 2px rgba(251,191,36,0.18);
}
.ai-cite-stale-banner {
    background: #fef3c7;
    color: #92400e;
    border-bottom: 1px solid #fde68a;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.45;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    margin: -12px -12px 10px;
    font-weight: 500;
}
.ai-cite-stale-banner i {
    color: #d97706;
    margin-right: 4px;
}
/* 2026-06-10 (CG2 Phase 2): Marathi line of the bilingual stale banner.
   Slightly lighter weight + small top margin so the EN line reads first
   while the MR line stays accessible for Marathi-primary users. */
.ai-cite-stale-banner-mr {
    margin-top: 4px;
    font-weight: 400;
    font-size: 11.5px;
    color: #92400e;
    border-top: 1px dashed #fde68a;
    padding-top: 4px;
}

/* 2026-06-10 (CG2 Phase 2): verified-stamp footer rendered at the end of
   every fresh AI answer. Small, calm — meant as a quiet trust signal
   rather than a banner. */
.ai-verified-stamp {
    margin-top: 12px;
    padding: 6px 10px;
    background: #f0fdf4;
    border-top: 1px solid #bbf7d0;
    color: #166534;
    font-size: 11.5px;
    line-height: 1.4;
    border-radius: 0 0 8px 8px;
}
.ai-verified-stamp i { color: #16a34a; margin-right: 4px; }
.ai-verified-stamp-mr {
    margin-top: 2px;
    color: #166534;
    font-size: 11px;
    font-weight: 400;
}

/* 2026-06-06 (CG3 Phase 1): originally inflated chips on mobile via
   padding:8px 8px + font-size:12px + negative margin, to help tap accuracy.
   2026-07-31 (founder): those inflated chips overshadowed the surrounding
   text, making the line hard to read. Reverted to something close to
   desktop dimensions — still tappable but not visually oversized. */
@media (max-width: 768px) {
    .ai-cite-pill {
        padding: 2px 5px;
        margin: 0 1px;
        font-size: 10px;
    }
}

/* Flash highlight applied briefly to the matching .ai-cite-card when a
   [#N] chip is tapped, so the user sees which card the chip referred to. */
@keyframes ai-cite-card-flash-kf {
    0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0); background: transparent; }
    20%  { box-shadow: 0 0 0 6px rgba(59,130,246,0.35); background: #eff6ff; }
    100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); background: transparent; }
}
.ai-cite-card-flash {
    animation: ai-cite-card-flash-kf 1.6s ease-out;
}

/* Tables — memo-grade. Clean borders, alternating row tint, right-align
   numeric columns (heuristic: TD whose only content matches ₹/digits). */
.ai-msg-bubble.ai-msg-ai table {
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13.5px;
    width: 100%;
    background: #ffffff;
}
.ai-msg-bubble.ai-msg-ai th {
    background: #f1f5f9;
    color: #0f172a;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 2px solid #cbd5e1;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.ai-msg-bubble.ai-msg-ai td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}
.ai-msg-bubble.ai-msg-ai tr:nth-child(even) td { background: #fafbff; }

/* Lists — tighter spacing, bolder numbers. .ai-list-item is set by
   formatAnswer for both numbered and bulleted. */
.ai-list-item {
    margin: 5px 0;
    padding-left: 4px;
    line-height: 1.6;
}
.ai-list-num {
    display: inline-block;
    min-width: 22px;
    color: #1e3a8a;
    font-weight: 700;
    margin-right: 4px;
}
.ai-bullet {
    display: inline-block;
    min-width: 18px;
    color: #6366f1;
    font-weight: 700;
    margin-right: 4px;
}

/* Inline links — PDF/source chips instead of raw underlined hyperlinks. */
.ai-msg-bubble.ai-msg-ai a[href*=".pdf"],
.ai-msg-bubble.ai-msg-ai a[href*="/view?"] {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 12px;
    font-size: 12.5px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.15s ease;
}
.ai-msg-bubble.ai-msg-ai a[href*=".pdf"]:hover,
.ai-msg-bubble.ai-msg-ai a[href*="/view?"]:hover {
    background: #fef9c3;
}
.ai-msg-bubble.ai-msg-ai a[href*=".pdf"]::before,
.ai-msg-bubble.ai-msg-ai a[href*="/view?"]::before {
    content: '\f1c1';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 4px;
    font-size: 11px;
}

/* Mobile tightening */
@media (max-width: 480px) {
    .ai-msg-bubble.ai-msg-ai      { font-size: 13.5px; }
    .ai-section-header            { font-size: 14px; margin-top: 18px; }
    .ai-memo-h3                   { font-size: 12px; }
    .ai-memo-quote                { font-size: 12.5px; padding: 8px 12px; }
    .ai-msg-bubble.ai-msg-ai th,
    .ai-msg-bubble.ai-msg-ai td   { padding: 6px 8px; font-size: 12px; }
}

/* ── @media print — monochrome memo for "print to PDF" workflow ─────── */
@media print {
    /* Hide all interactive chrome */
    .ai-progress-timeline,
    .ai-progress-substatus,
    .ai-typing-dots,
    .ai-feedback-wrap,
    .ai-followups,
    .ai-suggest-chips,
    .ai-cta-row,
    nav, header, footer,
    .qa-bottom-nav,
    .qa-fab,
    .ai-prompt-input-row,
    .ai-mode-row,
    .ai-balance-sticky,
    button { display: none !important; }

    /* Reset page chrome to print-friendly */
    body {
        background: #ffffff !important;
        color: #000000 !important;
        font-family: 'Georgia', 'Times New Roman', serif;
        font-size: 11pt;
        line-height: 1.55;
        max-width: 7in;
        margin: 0 auto;
    }
    .ai-msg-bubble.ai-msg-ai {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0;
        max-width: 100%;
        font-size: 11pt;
        color: #000000;
    }
    .ai-section-header {
        color: #000000;
        border-bottom: 1px solid #000000;
        page-break-after: avoid;
        margin-top: 18pt;
    }
    .ai-memo-h3 { color: #000000; }
    .ai-memo-quote {
        border-left: 2px solid #000000;
        background: transparent;
        color: #000000;
        page-break-inside: avoid;
    }
    .ai-cite-pill {
        background: transparent;
        color: #000000;
        border: 1px solid #000000;
    }
    .ai-msg-bubble.ai-msg-ai a[href*=".pdf"],
    .ai-msg-bubble.ai-msg-ai a[href*="/view?"] {
        background: transparent;
        color: #000000;
        border: 1px dashed #000000;
    }
    .ai-msg-bubble.ai-msg-ai table { page-break-inside: avoid; }
    .ai-msg-bubble.ai-msg-ai tr:nth-child(even) td { background: transparent; }
    /* Force prose to flow naturally on paper */
    .ai-msg-row, .ai-msg-bubble { display: block !important; }
    @page {
        margin: 0.75in;
        size: A4;
    }
}



/* ── #17 Feedback + Actions Wrapper ── */
.ai-feedback-wrap {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}
.ai-feedback-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #9198a1;
    margin-bottom: 6px;
}
.ai-actions-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ai-fb-btn {
    background: none;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 2px 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.4;
}
.ai-fb-btn:hover { border-color: #0066FB; background: #f0f6ff; }
.ai-fb-btn.active { background: #e8f5e9; border-color: #28a745; }

/* 2026-08-02 TWA-Tier1 — copy / native-share / regenerate icon buttons.
   Slightly smaller than 👍👎 emoji buttons so they read as "utility"
   next to the primary feedback controls. */
.ai-fb-btn.ai-fb-copy,
.ai-fb-btn.ai-fb-share,
.ai-fb-btn.ai-fb-regen {
    padding: 3px 9px;
    color: #64748b;
    font-size: 12px;
}
.ai-fb-btn.ai-fb-copy:hover,
.ai-fb-btn.ai-fb-share:hover,
.ai-fb-btn.ai-fb-regen:hover {
    color: #0066FB;
}
.ai-fb-sep {
    color: #cbd5e1;
    font-size: 12px;
    margin: 0 2px;
    user-select: none;
}

/* ── Share buttons ── */
.ai-share-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: #9198a1;
}
.ai-share-btn {
    background: none;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.3;
    color: #555;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ai-share-btn:hover { border-color: #25d366; background: #f0fff4; }
.ai-share-btn.wa { color: #25d366; }
.ai-share-btn.wa:hover { background: #25d366; color: #fff; }
.ai-share-btn.tg { color: #0088cc; }
.ai-share-btn.tg:hover { background: #0088cc; color: #fff; }
.ai-share-btn.cp:hover { background: #6c63ff; color: #fff; border-color: #6c63ff; }
.ai-share-toast {
    display: none;
    font-size: 11px;
    color: #28a745;
    animation: fadeIn 0.2s;
}

/* ── #18 Suggestion Chips ── */
.ai-suggestions {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}
.ai-suggestions-label {
    font-size: 10px;
    color: #9198a1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.ai-suggestions .ai-chip { font-size: 11px; }

/* ─────────────────────────────────────────────────────────────
   Atomic Progressive Render (2026-09-16)
   Cards + explore-further chips rendered under an AI answer.
   Deliberately subtle chrome — the answer is the hero; the cards
   are supporting sources the user can peek at without a re-query.
   ───────────────────────────────────────────────────────────── */
.mx-explorable-container {
    margin: 6px 0 14px 0;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #1f2937;
}
.mx-explorable-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 8px;
}
.mx-explorable-header i { margin-right: 6px; color: #7c3aed; }
.mx-explorable-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mx-atom-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #cbd5e1;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
/* Sharper role differentiation — thicker left border + role-tinted
   card background so the card's authority level is instantly
   readable at a glance. */
.mx-atom-card.role-current      { border-left-color: #059669; background: linear-gradient(90deg, #ecfdf5 0%, #ffffff 60%); }
.mx-atom-card.role-historical   { border-left-color: #d97706; background: linear-gradient(90deg, #fffbeb 0%, #ffffff 60%); }
.mx-atom-card.role-interpretive { border-left-color: #4f46e5; background: linear-gradient(90deg, #eef2ff 0%, #ffffff 60%); }
.mx-atom-card.role-supporting   { border-left-color: #64748b; background: linear-gradient(90deg, #f1f5f9 0%, #ffffff 60%); }
.mx-atom-card[open] {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    border-color: #cbd5e1;
}
.mx-atom-card > summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.mx-atom-card > summary::-webkit-details-marker { display: none; }
/* Bolder pill — role colour as solid background, white text, larger. */
.mx-atom-pill {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    background: #64748b;
    padding: 3px 10px;
    border-radius: 12px;
    flex: 0 0 auto;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10);
}
.mx-atom-card.role-current      .mx-atom-pill { background: #059669; }
.mx-atom-card.role-historical   .mx-atom-pill { background: #d97706; }
.mx-atom-card.role-interpretive .mx-atom-pill { background: #4f46e5; }
.mx-atom-card.role-supporting   .mx-atom-pill { background: #64748b; }
.mx-atom-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 13.5px;
    line-height: 1.35;
    flex: 1 1 auto;
    min-width: 200px;
}
.mx-atom-note {
    color: #475569;
    font-size: 11.5px;
    font-style: italic;
    flex: 1 1 100%;
    padding-top: 2px;
}
.mx-atom-chev {
    margin-left: auto;
    color: #94a3b8;
    font-size: 12px;
    transition: transform 0.2s ease;
    flex: 0 0 auto;
}
.mx-atom-card[open] .mx-atom-chev { transform: rotate(180deg); }
.mx-atom-body {
    padding: 4px 12px 10px 12px;
    border-top: 1px dashed #e5e7eb;
    background: #fafafa;
}
.mx-atom-preview {
    font-size: 12px;
    color: #374151;
    white-space: pre-wrap;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 0;
    line-height: 1.5;
}
/* Pre-warmed AI summary block — sits above the raw statutory text
   preview inside every atom card. Zero LLM cost — comes from
   ai_analyses.plain_summary generated by the daily ai:pre-warm cron. */
.mx-atom-summary {
    background: #fefce8;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    padding: 8px 10px 8px 12px;
    margin-top: 8px;
    margin-bottom: 6px;
}
.mx-atom-summary-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #b45309;
    margin-bottom: 4px;
}
.mx-atom-summary-label i { margin-right: 6px; }
.mx-atom-summary-body {
    font-size: 12px;
    color: #374151;
    line-height: 1.55;
    white-space: normal;
}
/* Linkage groups — GRs, Amendments, Forms, Judgments, Related, GOs.
   Each group is a collapsible <details> with a coloured left border. */
.mx-linkgrp {
    margin-top: 8px;
    border-left: 3px solid #cbd5e1;
    background: #f8fafc;
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
}
.mx-linkgrp-grs                { border-left-color: #7c3aed; }
.mx-linkgrp-amendments         { border-left-color: #f97316; }
.mx-linkgrp-ruleset_amendments { border-left-color: #eab308; background: #fefce8; }
.mx-linkgrp-forms              { border-left-color: #2563eb; }
.mx-linkgrp-judgments          { border-left-color: #6366f1; }
.mx-linkgrp-related            { border-left-color: #14b8a6; }
.mx-linkgrp-gos                { border-left-color: #dc2626; }
.mx-linkgrp-ruleset_amendments > summary .mx-linkgrp-count { background: #fef3c7; color: #92400e; }
.mx-linkgrp > summary {
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    font-size: 12px;
    color: #1f2937;
    user-select: none;
}
.mx-linkgrp > summary::-webkit-details-marker { display: none; }
.mx-linkgrp-label { font-weight: 700; }
.mx-linkgrp-count {
    margin-left: auto;
    background: #e2e8f0;
    color: #475569;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.mx-linkgrp-body {
    padding: 4px 10px 8px 10px;
    background: #ffffff;
}
.mx-linkitem {
    margin: 6px 0;
    padding: 8px 10px 10px 10px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mx-linkitem:hover {
    border-color: #cbd5e1;
    background: #fafbfc;
}
.mx-linkitem-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    margin-bottom: 2px;
}
.mx-linkitem-title-link {
    color: #4338ca;
    text-decoration: none;
    cursor: pointer;
}
.mx-linkitem-title-link:hover {
    color: #3730a3;
    text-decoration: underline;
}
.mx-linkitem-openicon {
    font-size: 10px;
    margin-left: 4px;
    color: #6366f1;
    opacity: 0.7;
}
.mx-linkitem-meta {
    font-size: 10.5px;
    color: #64748b;
    line-height: 1.35;
    margin-bottom: 4px;
}
.mx-linkitem-summary {
    font-size: 12px;
    color: #374151;
    line-height: 1.5;
    padding: 4px 0 0 0;
}
.mx-linkitem-summary i { color: #f59e0b; margin-right: 6px; }
.mx-linkgrp-more {
    margin-top: 6px;
    padding: 4px 8px;
    background: #f1f5f9;
    border-radius: 4px;
    font-size: 11.5px;
}
.mx-linkgrp-more > summary {
    cursor: pointer;
    color: #4338ca;
    font-weight: 600;
    list-style: none;
}
.mx-linkgrp-more > summary::-webkit-details-marker { display: none; }
.mx-linkgrp-more > summary i { margin-right: 6px; }
.mx-atom-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.mx-atom-ask {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
    border: 0;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2);
    transition: filter 0.15s ease;
}
.mx-atom-ask:hover { filter: brightness(1.08); }
.mx-atom-ask i { font-size: 10px; }
.mx-atom-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #4338ca;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    background: #eef2ff;
}
.mx-atom-open:hover { background: #e0e7ff; text-decoration: none; }
/* Secondary — "Deeper research" chips are the expensive path.
   Muted so they don't compete visually with the free per-atom chips. */
.mx-explore-further {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
    opacity: 0.85;
}
.mx-explore-further-label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 6px;
}
.mx-explore-further-label i { margin-right: 6px; color: #9ca3af; font-size: 9px; }
.mx-explore-chip {
    font-size: 11px;
    margin: 3px 3px 3px 0;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
.mx-explore-chip:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Header actions */
.ai-header-actions { display: flex; align-items: center; gap: 6px; }
.ai-new-chat-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    color: white;
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.8;
}
.ai-new-chat-btn:hover { opacity: 1; background: rgba(255,255,255,0.15); }

/* Role Selector */
#aiRoleSelector { margin-top: 10px; }
.ai-role-q { font-size: 12px; color: #6b7280; margin-bottom: 8px; }
.ai-role-q span { font-size: 10px; opacity: 0.7; }
.ai-role-btns { display: flex; gap: 8px; justify-content: center; }
.ai-role-btn {
    flex: 1; max-width: 100px; padding: 10px 6px; border: 1.5px solid #e5e7eb;
    border-radius: 10px; background: #fff; color: #374151; font-size: 11px;
    line-height: 1.4; cursor: pointer; transition: all 0.15s; text-align: center;
}
.ai-role-btn:hover, .ai-role-btn.active {
    border-color: #7c3aed; background: #f5f3ff; color: #7c3aed; font-weight: 600;
}
.ai-role-btn i { font-size: 16px; display: block; margin-bottom: 4px; }
/* Role indicator in footer */
#aiRoleIndicator {
    font-size: 10px; background: #f5f3ff; color: #7c3aed; border-radius: 10px;
    padding: 2px 8px; border: 1px solid #ddd8fe; margin-left: 6px;
}
#aiRoleIndicator:hover { background: #ede9fe; }

/* 2026-08-26: also-matched list — atoms RAG retrieved but LLM didn't cite.
   Visually subordinate to the cited-sources block above but still scannable.
   Grey (not green) accents to keep the "not AI-endorsed" signal clear. */
.ai-also-matched {
    margin-top: 14px; padding: 10px 14px;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
    font-size: 13px;
}
.ai-am-summary {
    cursor: pointer; list-style: none; outline: none;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    color: #475569; padding: 2px 0;
}
.ai-am-summary::-webkit-details-marker { display: none; }
.ai-am-summary i.fa-paperclip { color: #94a3b8; font-size: 12px; }
.ai-am-summary strong { color: #334155; font-weight: 700; font-size: 13px; }
.ai-am-hint {
    font-size: 11px; color: #64748b; font-style: italic;
    padding: 2px 8px; background: #e2e8f0; border-radius: 8px;
}
.ai-am-groups {
    font-size: 11px; color: #64748b; margin-left: auto;
    font-family: system-ui, -apple-system, sans-serif;
}
.ai-also-matched[open] .ai-am-summary { margin-bottom: 10px; border-bottom: 1px dashed #cbd5e1; padding-bottom: 8px; }
.ai-am-list { display: flex; flex-direction: column; gap: 8px; }
.ai-am-item {
    padding: 8px 10px; background: #ffffff;
    border: 1px solid #e2e8f0; border-left: 3px solid #94a3b8;
    border-radius: 6px;
}
.ai-am-item-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
    flex-wrap: wrap;
}
.ai-am-badge {
    font-size: 10.5px; font-weight: 700; color: #475569;
    background: #e2e8f0; padding: 1px 8px; border-radius: 10px;
    text-transform: uppercase; letter-spacing: 0.02em;
}
.ai-am-rank { font-size: 10.5px; color: #94a3b8; font-family: system-ui, sans-serif; }
.ai-am-open {
    margin-left: auto; font-size: 11.5px; color: #2563eb;
    text-decoration: none; font-weight: 600;
    padding: 3px 10px; border: 1px solid #bfdbfe;
    background: #eff6ff; border-radius: 999px;
}
.ai-am-open:hover { background: #dbeafe; color: #1e40af; }
.ai-am-ref {
    font-size: 12.5px; font-weight: 600; color: #1e293b;
    line-height: 1.4; margin-bottom: 4px;
}
.ai-am-snippet {
    font-size: 12px; color: #475569; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ai-am-more {
    margin-top: 8px; padding: 6px 14px;
    background: #ffffff; border: 1px solid #cbd5e1; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; color: #475569; cursor: pointer;
}
.ai-am-more:hover { background: #f1f5f9; color: #1e40af; border-color: #94a3b8; }

/* 2026-08-30: "Best keyword matches" section — sits ABOVE the grey
   also-matched block. Green accent to signal "these literally contain
   what you searched" vs the grey semantic list below. Always expanded
   so users don't have to click to see the strongest matches. */
.ai-keyword-matches {
    margin-top: 14px; padding: 12px 14px 10px;
    background: #f0fdf4; border: 1px solid #86efac;
    border-left: 4px solid #16a34a; border-radius: 10px;
    font-size: 13px;
}
.ai-km-summary {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    color: #14532d; padding: 0 0 8px 0;
    border-bottom: 1px dashed #86efac; margin-bottom: 10px;
}
.ai-km-summary i.fa-bullseye { color: #16a34a; font-size: 13px; }
.ai-km-summary strong { color: #14532d; font-weight: 700; font-size: 13.5px; }
.ai-km-count {
    font-size: 11px; color: #166534;
    padding: 2px 8px; background: #dcfce7; border-radius: 8px;
    font-family: system-ui, -apple-system, sans-serif;
}
.ai-km-list { display: flex; flex-direction: column; gap: 8px; }

/* KM item variant — reuse .ai-am-item base but override border colour
   so it reads as part of the green section. */
.ai-am-item-km {
    border: 1px solid #bbf7d0;
    border-left: 3px solid #16a34a;
    background: #ffffff;
}

/* Highlighted matched-token span. Bright yellow so it's obvious what
   matched, without shouting louder than the ref text itself. */
mark.ai-am-hl {
    background: #fde68a; color: #78350f;
    padding: 0 2px; border-radius: 3px;
    font-weight: 600; box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

@media (max-width: 640px) {
    .ai-am-groups { display: none; }
    .ai-am-hint { font-size: 10.5px; }
    .ai-am-item { padding: 6px 8px; }
    .ai-am-ref { font-size: 12px; }
    .ai-am-snippet { -webkit-line-clamp: 2; }
    .ai-keyword-matches { padding: 10px 12px 8px; }
    .ai-km-summary strong { font-size: 12.5px; }
    .ai-km-count { font-size: 10px; }
}