/* ===========================================
   Admin Dashboard Styles
   Tokens from design-system.css
   =========================================== */

/* ==================== BASE ==================== */
body {
    background: var(--gray-50);
    font-family: var(--font-he);
    min-height: 100vh;
}

/* ==================== AUTH SPLASH ==================== */
.auth-splash {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    z-index: 9999;
    transition: opacity 200ms ease-out;
}

.auth-splash.hidden {
    opacity: 0;
    pointer-events: none;
}

.auth-splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-6);
}

.auth-splash-content .site-logo {
    max-width: 220px;
    height: auto;
}

.auth-splash-content .loader-dots {
    display: flex;
    gap: 6px;
}

.auth-splash-content .loader-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-400);
    animation: dotBounce 0.6s ease-in-out infinite;
}

.auth-splash-content .loader-dot:nth-child(2) { animation-delay: 0.15s; }
.auth-splash-content .loader-dot:nth-child(3) { animation-delay: 0.3s; }

/* ==================== LOGIN SCREEN ==================== */
.login-screen {
    min-height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
}

.login-screen.visible {
    display: flex;
}

.login-box .loader-dots {
    display: flex;
    gap: 6px;
}

.login-box .loader-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    animation: dotBounce 0.6s ease-in-out infinite;
}

.login-box .loader-dot:nth-child(2) { animation-delay: 0.15s; }
.login-box .loader-dot:nth-child(3) { animation-delay: 0.3s; }

.login-box {
    background: white;
    padding: var(--sp-8);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
    max-width: 380px;
    width: 90%;
}

@media (max-width: 480px) {
    .login-box {
        padding: var(--sp-5);
        border-radius: var(--radius-lg);
        width: 100%;
    }
}

.login-icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-4);
    color: var(--brand-500);
}

.login-box h1 {
    color: var(--gray-800);
    margin-bottom: var(--sp-2);
    font-size: var(--text-2xl);
}

.login-box p {
    color: var(--gray-500);
    margin-bottom: var(--sp-6);
    font-size: var(--text-sm);
}

.login-box input[type="password"] {
    text-align: center;
    margin-bottom: var(--sp-3);
}

.login-error {
    color: var(--danger-500);
    font-size: var(--text-sm);
    margin-bottom: var(--sp-3);
    display: none;
}

/* ==================== MAIN APP ==================== */
.app {
    display: none;
}

.app.visible {
    display: block;
}

/* ==================== ADMIN NAVBAR ==================== */
.admin-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    border-bottom: 1px solid var(--gray-200);
}

.admin-navbar {
    padding: 0 var(--sp-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
}

.nav-brand {
    display: flex;
    align-items: center;
    line-height: 0;
}

.nav-actions {
    display: flex;
    gap: var(--sp-2);
}

/* ==================== CONTENT ==================== */
.content {
    padding: var(--sp-6);
    max-width: 1400px;
    margin: 0 auto;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ==================== STATS GRID ==================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.stat-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-2);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border-inline-start: 3px solid var(--brand-500);
    transition: box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
    cursor: pointer;
    position: relative;
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
}

.stat-card.stage-1 { border-inline-start-color: #2563eb; }
.stat-card.stage-2 { border-inline-start-color: var(--warning-500); }
.stat-card.stage-3 { border-inline-start-color: #F59E0B; }
.stat-card.stage-4 { border-inline-start-color: var(--info-500); }
.stat-card.stage-5 { border-inline-start-color: #8B5CF6; }
.stat-card.stage-6 { border-inline-start-color: #0D9488; }
.stat-card.stage-7 { border-inline-start-color: #C2410C; }
.stat-card.stage-8 { border-inline-start-color: var(--success-500); }

/* Stage 3 attention bounce — only applied via JS when count > 0 */
@keyframes stage3-bounce {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-6px); }
}

.stat-card.stage-3.needs-attention,
.stat-card.stage-1.needs-attention {
  animation: stage3-bounce 1s ease-in-out infinite;
}

.stat-card.stage-3.needs-attention .stat-number {
  color: #D97706;
  font-weight: 800;
}

.stat-card.stage-1.needs-attention .stat-number {
  color: #2563eb;
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .stat-card.stage-3.needs-attention {
    animation: none;
    box-shadow: 0 0 0 2px #F59E0B;
  }
  .stat-card.stage-1.needs-attention {
    animation: none;
    box-shadow: 0 0 0 2px #2563eb;
  }
}

.stat-card.active {
    box-shadow: var(--shadow-md);
    border-inline-start-width: 4px;
    background: var(--gray-50);
}

.stat-card.active::after {
    content: '';
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    width: 8px;
    height: 8px;
    background: var(--brand-500);
    border-radius: 50%;
}

.stat-number {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: var(--sp-1);
}

.stat-pct {
    font-size: 0.45em;
    font-weight: 500;
    color: var(--gray-600);
    margin-inline-start: 8px;
    vertical-align: 0.35em;
    letter-spacing: 0.02em;
}

.stat-label {
    font-size: var(--text-xs);
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
}

/* ==================== CARD OVERRIDES ==================== */
.card {
    margin-bottom: var(--sp-5);
}

.card-header h2 {
    font-size: var(--text-lg);
}

.header-actions {
    display: flex;
    gap: var(--sp-2);
}

/* Collapsible card (details/summary) */
.card-collapsible {
    overflow: visible;
}

.card-toggle {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.card-toggle::-webkit-details-marker {
    display: none;
}

.card-toggle h2 {
    color: var(--gray-500);
    font-size: var(--text-base);
}

.card-toggle-badge {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--gray-400);
    margin-inline-start: var(--sp-2);
}

.card-toggle-chevron {
    color: var(--gray-400);
    transition: transform var(--transition-base);
}

.card-collapsible[open] > .card-toggle .card-toggle-chevron {
    transform: rotate(180deg);
}

.card-collapsible[open] > .card-toggle h2 {
    color: var(--gray-800);
    font-size: var(--text-lg);
}

.card-collapsible[open] > .card-toggle {
    border-bottom: 1px solid var(--gray-200);
}

.card-collapsible:not([open]) > .card-toggle {
    border-bottom: none;
}

/* ==================== FILTERS ==================== */
.filters {
    display: flex;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
    align-items: center;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.filter-group label {
    font-weight: 600;
    color: var(--gray-500);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.filter-group select,
.filter-group input[type="text"] {
    min-width: 180px;
}

/* ==================== SCROLLABLE TABLE CONTAINERS ==================== */
.table-scroll-container {
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}

.table-scroll-container:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 2px;
}

.table-scroll-container table {
    border-collapse: separate;
    border-spacing: 0;
}

.table-scroll-container thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--gray-50);
}

/* Reminder accordion tables: shorter since they share vertical space */
.reminder-section-body .table-scroll-container {
    max-height: calc(100vh - 400px);
}

/* Fix: .card overflow:hidden kills sticky — override when scroll container inside */
.card:has(.table-scroll-container) {
    overflow: visible;
}

/* ==================== TABLE OVERRIDES ==================== */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: var(--sp-3) var(--sp-4);
    text-align: right;
    border-bottom: 1px solid var(--gray-200);
    font-size: var(--text-sm);
}

th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-600);
}

tr:hover {
    background: var(--gray-50);
}

tr.error {
    background: var(--danger-50);
}

tr.duplicate {
    background: var(--warning-50);
}

/* ==================== STAGE BADGES ==================== */
.stage-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    min-width: 130px;
}

.stage-badge svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    flex-shrink: 0;
}

.stage-badge.stage-1 {
    background: var(--gray-100);
    color: var(--gray-600);
}

.stage-badge.stage-2 {
    background: var(--warning-100);
    color: var(--warning-700);
}

.stage-badge.stage-3 {
    background: #FEF3C7;
    color: #92400E;
}

.stage-badge.stage-4 {
    background: var(--info-100);
    color: var(--info-700);
}

.stage-badge.stage-5 {
    background: #EDE9FE;
    color: #5B21B6;
}

.stage-badge.stage-6 {
    background: #CCFBF1;
    color: #0F766E;
}

.stage-badge.stage-7 {
    background: #FFF7ED;
    color: #C2410C;
}

.stage-badge.stage-8 {
    background: var(--success-100);
    color: var(--success-700);
}

/* ==================== SORTABLE HEADERS ==================== */
.th-sort-btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    cursor: pointer;
    font-weight: 600;
    color: var(--gray-600);
    font-size: var(--text-sm);
    font-family: inherit;
    transition: color var(--transition-fast);
    user-select: none;
    box-sizing: border-box;
}

.th-sort-btn:hover {
    color: var(--gray-800);
}

.th-sort-btn:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.sort-arrows {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-size: 8px;
    opacity: 0.25;
    transition: opacity var(--transition-fast);
}

.th-sort-btn:hover .sort-arrows {
    opacity: 0.5;
}

.sort-asc,
.sort-desc {
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.th-sort-btn[aria-sort="ascending"] .sort-arrows,
.th-sort-btn[aria-sort="descending"] .sort-arrows {
    opacity: 1;
}

.th-sort-btn[aria-sort="ascending"] .sort-asc {
    color: var(--brand-500);
}

.th-sort-btn[aria-sort="ascending"] .sort-desc {
    opacity: 0.15;
}

.th-sort-btn[aria-sort="descending"] .sort-desc {
    color: var(--brand-500);
}

.th-sort-btn[aria-sort="descending"] .sort-asc {
    opacity: 0.15;
}

.th-sort-btn[aria-sort="ascending"],
.th-sort-btn[aria-sort="descending"] {
    color: var(--brand-700);
}

/* ==================== CLICKABLE STAGE BADGES ==================== */
.stage-badge.clickable {
    cursor: pointer;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.stage-badge.clickable:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.stage-badge.clickable:active {
    transform: translateY(0);
    box-shadow: none;
}

.stage-caret {
    font-size: 10px;
    opacity: 0.4;
    transition: opacity var(--transition-fast);
    margin-inline-start: var(--sp-1);
}

.stage-badge.clickable:hover .stage-caret {
    opacity: 0.8;
}

/* ==================== STAGE DROPDOWN ==================== */
.stage-dropdown {
    position: fixed;
    z-index: 1001;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-2);
    min-width: 190px;
}

.stage-dropdown[data-side="bottom"] { animation: floatInDown 120ms ease-out; }
.stage-dropdown[data-side="top"]    { animation: floatInUp 120ms ease-out; }

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

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

.stage-dropdown-option {
    all: unset;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    font-family: inherit;
    color: var(--gray-700);
    transition: background var(--transition-fast);
    box-sizing: border-box;
}

.stage-dropdown-option:hover {
    background: var(--gray-50);
}

.stage-dropdown-option.active {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 600;
    cursor: default;
}

.stage-dropdown-option.warning {
    color: var(--warning-700);
}

.stage-dropdown-option.warning:hover {
    background: var(--warning-50);
}

.stage-dropdown-option:disabled {
    cursor: default;
}

.stage-dropdown-option svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.backward-badge {
    font-size: var(--text-xs);
    color: var(--warning-500);
    margin-inline-start: auto;
    font-weight: 400;
}

/* ==================== STATUS BADGES ==================== */
.status-badge {
    display: inline-block;
    padding: 2px var(--sp-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}

.status-badge.valid {
    background: var(--success-100);
    color: var(--success-700);
}

.status-badge.error {
    background: var(--danger-100);
    color: var(--danger-700);
}

.status-badge.duplicate {
    background: var(--warning-100);
    color: var(--warning-700);
}

/* ==================== PROGRESS BAR ==================== */
.progress-bar {
    background: var(--gray-200);
    border-radius: var(--radius-full);
    height: 8px;
    overflow: hidden;
    width: 120px;
}

.progress-fill {
    background: var(--success-500);
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

/* ==================== ACTION BUTTONS ==================== */
.action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.action-btn:hover {
    transform: translateY(-1px);
}

.action-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

.action-btn.view {
    background: var(--brand-50);
    color: var(--brand-600);
}

.action-btn.view:hover {
    background: var(--brand-100);
}

.action-btn.send {
    background: var(--success-50);
    color: var(--success-700);
}

.action-btn.send:hover {
    background: var(--success-100);
}

/* ==================== UPLOAD ZONE ==================== */
.upload-zone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--sp-12) var(--sp-8);
    text-align: center;
    background: var(--gray-50);
    cursor: pointer;
    transition: all var(--transition-base);
}

.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--brand-500);
    background: var(--brand-50);
}

.upload-zone-icon {
    margin-bottom: var(--sp-4);
    color: var(--gray-400);
    display: flex;
    justify-content: center;
}

.upload-zone h3 {
    font-size: var(--text-xl);
    color: var(--gray-800);
    margin-bottom: var(--sp-2);
}

.upload-zone p {
    color: var(--gray-500);
    margin-bottom: var(--sp-4);
    font-size: var(--text-sm);
}

.upload-zone input[type="file"] {
    display: none;
}

/* ==================== MANUAL SECTION ==================== */
.manual-section {
    display: none;
    padding: var(--sp-5);
}

.manual-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 500px;
    margin: 0 auto;
    gap: var(--sp-5);
}

.form-field {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.form-field input,
.form-field select {
    width: 100%;
}

/* ==================== Existing Client Banner (DL-228) ==================== */
.existing-client-banner {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 200ms ease, opacity 200ms ease, margin 200ms ease;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md, 6px);
    padding: 0;
    margin-top: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.existing-client-banner.visible {
    max-height: 200px;
    opacity: 1;
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    margin-top: var(--sp-2, 8px);
}

.existing-client-banner .banner-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.existing-client-banner .banner-detail {
    color: var(--neutral-600, #4b5563);
    font-size: 0.8rem;
}

.existing-client-banner .banner-actions {
    display: flex;
    gap: var(--sp-2, 8px);
    margin-top: var(--sp-2, 8px);
}

.existing-client-banner .banner-actions button {
    padding: 4px 12px;
    border-radius: var(--radius-sm, 4px);
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
}

.existing-client-banner .btn-fill {
    background: var(--brand-600, #2563eb);
    color: white;
}

.existing-client-banner .btn-fill:hover {
    background: var(--brand-700, #1d4ed8);
}

.existing-client-banner .btn-dismiss {
    background: transparent;
    color: var(--neutral-500, #6b7280);
}

.existing-client-banner .btn-dismiss:hover {
    color: var(--neutral-700, #374151);
}

/* Pre-filled field visual tint */
input.field-prefilled,
select.field-prefilled {
    background: #fefce8 !important;
    border-color: #fde68a !important;
    transition: background 300ms ease, border-color 300ms ease;
}

/* ==================== IMPORT OPTIONS ==================== */
.import-options {
    background: var(--info-50);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-top: var(--sp-5);
    border: 1px solid var(--info-100);
}

.import-options h4 {
    color: var(--gray-800);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.import-options p {
    color: var(--gray-600);
    font-size: var(--text-sm);
}

.option-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.option-row:last-child {
    margin-bottom: 0;
}

.option-row label {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

/* ==================== PREVIEW SECTION ==================== */
.preview-section {
    display: none;
    margin-top: var(--sp-6);
}

.preview-section.visible {
    display: block;
}

.preview-header {
    margin-bottom: var(--sp-5);
}

.preview-header h2 {
    font-size: var(--text-lg);
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.preview-stats {
    display: flex;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.preview-stat {
    background: var(--info-50);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-md);
    border-inline-start: 3px solid var(--brand-500);
}

.preview-stat.error {
    background: var(--danger-50);
    border-inline-start-color: var(--danger-500);
}

.preview-stat.warning {
    background: var(--warning-50);
    border-inline-start-color: var(--warning-500);
}

.preview-stat strong {
    font-size: var(--text-2xl);
    color: var(--gray-800);
}

.preview-actions {
    margin-top: var(--sp-6);
    display: flex;
    gap: var(--sp-4);
    justify-content: center;
}

/* ==================== SEND ACTIONS ==================== */
.send-actions {
    display: none;
    margin-top: var(--sp-6);
    text-align: center;
}

.send-actions .btn {
    margin: 0 var(--sp-2);
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
    text-align: center;
    padding: var(--sp-12) var(--sp-5);
    color: var(--gray-500);
}

.empty-state-icon {
    margin-bottom: var(--sp-4);
    color: var(--gray-300);
    display: flex;
    justify-content: center;
}

.empty-state p {
    font-size: var(--text-base);
}

/* ==================== LOADING OVERLAY ==================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.loading-overlay.visible {
    display: flex;
}

.loading-box {
    background: white;
    padding: var(--sp-8) var(--sp-12);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.loading-box .spinner {
    margin: 0 auto var(--sp-5);
}

/* DL-265: Tab refresh — bouncing dots loader overlay */
.tab-content.tab-refreshing {
    position: relative;
    pointer-events: none;
}

.tab-refresh-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 140px;
    gap: var(--sp-4);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    z-index: 10;
    animation: loaderFadeIn 0.15s ease;
}

@keyframes loaderFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tab-refresh-loader .loader-text {
    font-size: var(--text-sm);
    color: var(--gray-500);
    font-weight: 500;
    animation: loaderTextIn 0.25s ease both;
}

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

.tab-refresh-loader .loader-dots {
    display: flex;
    gap: 6px;
}

.tab-refresh-loader .loader-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-600);
    animation: dotBounce 0.6s ease-in-out infinite;
}

.tab-refresh-loader .loader-dot:nth-child(2) { animation-delay: 0.15s; }
.tab-refresh-loader .loader-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes dotBounce {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(-8px); opacity: 1; }
}

@media (max-width: 768px) {
    .tab-refresh-loader {
        padding-top: 80px;
    }
}

/* DL-247: Refresh button spin animation */
.is-refreshing svg {
    animation: spin 0.8s linear infinite;
}

.loading-box p {
    color: var(--gray-600);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Client Detail Modal Loading States */
.client-detail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) 0;
    gap: var(--sp-3);
}

.client-detail-loading p {
    color: var(--gray-600);
    font-size: var(--text-sm);
    font-weight: 500;
    margin: 0;
}

.client-detail-saving-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    border-radius: var(--radius-lg);
    z-index: 2;
}

.client-detail-saving-overlay .spinner {
    width: 24px;
    height: 24px;
}

.client-detail-saving-overlay span {
    color: var(--gray-600);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* ==================== RESULT MODAL ==================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal.visible {
    display: flex;
}

.modal-content {
    position: relative;
    background: white;
    padding: var(--sp-8);
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: modalSlideUp 200ms ease-out;
}

.modal-close-btn {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    background: none;
    border: none;
    font-size: var(--text-2xl);
    color: var(--gray-400);
    cursor: pointer;
    line-height: 1;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-md);
    transition: color 150ms, background 150ms;
}

.modal-close-btn:hover {
    color: var(--gray-600);
    background: var(--gray-100);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-icon {
    margin-bottom: var(--sp-4);
    color: var(--success-500);
    display: flex;
    justify-content: center;
}

.modal-icon.error {
    color: var(--danger-500);
}

.modal-icon.warning {
    color: var(--warning-500);
}

.modal-title {
    font-size: var(--text-2xl);
    color: var(--gray-800);
    margin-bottom: var(--sp-3);
}

.modal-body {
    color: var(--gray-500);
    margin-bottom: var(--sp-6);
    line-height: var(--leading-he);
    font-size: var(--text-sm);
}

.modal-stats {
    display: flex;
    justify-content: center;
    gap: var(--sp-8);
    margin-bottom: var(--sp-6);
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: var(--sp-3);
}

.modal-stat {
    text-align: center;
}

.modal-stat-number {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--success-500);
}

.modal-stat-label {
    font-size: var(--text-sm);
    color: var(--gray-500);
}

/* ==================== ACCORDION ==================== */
.accordion {
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.accordion-header {
    background: var(--gray-50);
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    user-select: none;
}

.accordion-header:hover {
    background: var(--gray-100);
}

.accordion.open .accordion-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    background: var(--brand-600);
    color: white;
}

.accordion-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-base);
    font-weight: 600;
}

.accordion-title .emoji {
    font-size: var(--text-xl);
}

.accordion-count {
    font-size: var(--text-xs);
    font-weight: 400;
    opacity: 0.7;
}

.accordion-icon {
    font-size: var(--text-sm);
    transition: transform var(--transition-base);
}

.accordion.open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
    background: white;
    border: 1px solid var(--gray-200);
    border-top: none;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.accordion.open .accordion-body {
    max-height: 5000px;
    transition: max-height 0.5s ease-in;
}

.accordion-content {
    padding: var(--sp-4) var(--sp-5);
}

.accordion-actions {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

/* ==================== CLIENT LINK ==================== */
.client-link {
    cursor: pointer;
    color: var(--brand-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.client-link:hover {
    color: var(--brand-700);
}

/* ==================== REVIEW TAB ==================== */
.review-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
    border: 1px solid #C4B5FD;
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-4);
}

.review-header-info h2 {
    font-size: var(--text-lg);
    color: #5B21B6;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
}

.review-header-count {
    font-size: var(--text-sm);
    color: #7C3AED;
    font-weight: 500;
}

.review-fifo-hint {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-bottom: var(--sp-5);
}

.fifo-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #7C3AED;
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.waiting-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--success-100);
    color: var(--success-700);
}

.waiting-badge.waiting-warn {
    background: var(--warning-100);
    color: var(--warning-700);
}

.waiting-badge.waiting-urgent {
    background: var(--danger-100);
    color: var(--danger-700);
}

.review-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: var(--radius-full);
    background: var(--danger-500);
    color: white;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    margin-inline-start: var(--sp-2);
}

.ai-review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--warning-500);
    color: white;
    font-size: 10px;
    font-weight: 700;
    margin-inline-start: var(--sp-1);
}

.action-btn.complete {
    background: var(--success-50);
    color: var(--success-700);
}

.action-btn.complete:hover {
    background: var(--success-100);
}

/* ==================== CLIENT NAME CELL ==================== */
.client-name-cell {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.client-view-link {
    color: var(--gray-400);
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

tr:hover .client-view-link {
    opacity: 1;
}

.client-view-link:hover {
    color: var(--brand-600);
}

.icon-xs {
    width: 14px;
    height: 14px;
}

/* ==================== DOCS PROGRESS CELL ==================== */
.docs-progress-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.clickable-docs {
    cursor: pointer;
    border-radius: var(--radius-md);
    padding: 4px 8px;
    margin: -4px -8px;
    transition: background var(--transition-fast);
}

.clickable-docs:hover {
    background: var(--brand-50);
}

.docs-progress-cell.clickable-docs:hover .docs-count {
    color: var(--brand-700);
}

.docs-count {
    font-size: var(--text-xs);
    white-space: nowrap;
}

/* ==================== MISSING COUNT ==================== */
.missing-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--sp-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
}

.missing-count.not-applicable {
    background: var(--gray-100);
    color: var(--gray-400);
    cursor: default;
}

.missing-count.has-missing {
    background: var(--danger-100);
    color: var(--danger-700);
}

.missing-count.all-done {
    background: var(--success-100);
    color: var(--success-700);
}

/* ==================== AI REVIEW TAB ==================== */

/* Tab Badge */
.ai-review-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--danger-500);
    color: white;
    font-size: 11px;
    font-weight: 700;
    margin-inline-start: var(--sp-2);
}

.ai-review-tab-badge.ai-badge-loading {
    background: var(--gray-300);
    animation: badgePulse 1s ease-in-out infinite;
    font-size: 9px;
    letter-spacing: 1px;
}

@keyframes badgePulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Stats Bar */
.ai-stats-bar {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.ai-stat-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xs);
    min-width: 130px;
}

.ai-stat-item .ai-stat-value {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--gray-800);
}

.ai-stat-item .ai-stat-label {
    font-size: var(--text-xs);
    color: var(--gray-500);
    font-weight: 500;
}

.ai-stat-item.ai-stat-pending { border-inline-start: 3px solid var(--brand-500); }
.ai-stat-item.ai-stat-pending .icon-sm { color: var(--brand-500); }
.ai-stat-item.ai-stat-matched { border-inline-start: 3px solid var(--success-500); }
.ai-stat-item.ai-stat-matched .icon-sm { color: var(--success-500); }
.ai-stat-item.ai-stat-unmatched { border-inline-start: 3px solid var(--danger-500); }
.ai-stat-item.ai-stat-unmatched .icon-sm { color: var(--danger-500); }
.ai-stat-item.ai-stat-high-conf { border-inline-start: 3px solid var(--info-500); }
.ai-stat-item.ai-stat-high-conf .icon-sm { color: var(--info-500); }

/* Filter Bar */
.ai-filter-bar {
    display: flex;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
    align-items: center;
    background: white;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xs);
}

/* AI Accordion */
.ai-accordion {
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    animation: aiSlideUp 300ms ease-out;
}

@keyframes aiSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ai-accordion-header {
    background: var(--gray-50);
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    user-select: none;
    gap: var(--sp-3);
}

.ai-accordion-header:hover {
    background: var(--gray-100);
}

.ai-accordion.open .ai-accordion-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    background: var(--brand-600);
    color: white;
}

.ai-accordion-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-base);
    font-weight: 600;
}

.ai-accordion-stats {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 500;
}

.ai-accordion-stat {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap;
}

.ai-accordion-stat .stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.stat-dot.pending { background: var(--brand-500); }
.stat-dot.matched { background: var(--success-500); }
.stat-dot.unmatched { background: var(--danger-500); }

.ai-accordion.open .ai-accordion-stats {
    opacity: 0.85;
}

.ai-doc-manager-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-600);
    text-decoration: none;
    padding: 4px;
    border-radius: 4px;
    transition: background var(--transition-base);
    flex-shrink: 0;
}

.ai-doc-manager-link:hover {
    background: rgba(0, 0, 0, 0.08);
}

.ai-accordion.open .ai-doc-manager-link {
    color: white;
}

.ai-accordion.open .ai-doc-manager-link:hover {
    background: rgba(255, 255, 255, 0.15);
}

.ai-accordion-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.ai-accordion-icon {
    font-size: var(--text-sm);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.ai-accordion.open .ai-accordion-icon {
    transform: rotate(180deg);
}

.ai-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
    background: white;
    border: 1px solid var(--gray-200);
    border-top: none;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.ai-accordion.open .ai-accordion-body {
    max-height: 5000px;
    transition: max-height 0.5s ease-in;
}

.ai-accordion-content {
    padding: var(--sp-4) var(--sp-5);
    max-height: calc(100vh - 350px);
    overflow-y: auto;
}

/* Review Cards */
.ai-review-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-3);
    transition: all var(--transition-base);
    max-width: 600px;
    margin-inline: auto;
    overflow: hidden;
}

.ai-review-card:hover {
    box-shadow: var(--shadow-md);
}


.ai-review-card.removing {
    opacity: 0;
    transform: translateX(40px);
    max-height: 0;
    margin-bottom: 0;
    padding: 0;
    border-width: 0;
    overflow: hidden;
    transition: all 350ms ease-out;
}

.ai-review-card.ai-loading {
    position: relative;
    pointer-events: none;
}

.ai-review-card.ai-loading .ai-card-actions {
    opacity: 0.3;
}

.ai-card-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    z-index: 2;
    border-radius: var(--radius-lg);
}

.ai-card-loading-overlay .spinner {
    width: 20px;
    height: 20px;
}

.ai-card-loading-overlay span {
    font-size: var(--fs-sm);
    color: var(--gray-600);
}

.ai-review-card.match-full,
.ai-review-card.match-fuzzy {
    border-inline-start: 3px solid var(--success-500);
}

.ai-review-card.match-issuer-mismatch,
.ai-review-card.match-unmatched {
    border-inline-start: 3px solid var(--warning-500);
}

.ai-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--gray-100);
    gap: var(--sp-3);
}

.ai-file-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    row-gap: var(--sp-1);
    min-width: 0;
    flex: 1;
}

.ai-file-source-label {
    font-size: var(--text-xs);
    color: var(--gray-500);
    font-weight: 500;
    flex-shrink: 0;
}

.ai-file-name {
    font-weight: 600;
    color: var(--gray-800);
    font-size: var(--text-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-duplicate-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--sp-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--warning-50, #fff7ed);
    color: var(--warning-700, #c2410c);
    border: 1px solid var(--warning-200, #fed7aa);
    flex-shrink: 0;
}

.ai-unrequested-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--sp-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--info-50, #eff6ff);
    color: var(--info-700, #1d4ed8);
    border: 1px solid var(--info-200, #bfdbfe);
    flex-shrink: 0;
}

/* DL-315: Pre-questionnaire classification badge — warning tone since confidence is structural */
.ai-pre-questionnaire-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--sp-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--warning-50, #fffbeb);
    color: var(--warning-700, #b45309);
    border: 1px solid var(--warning-200, #fde68a);
    flex-shrink: 0;
}

/* DL-379: Encrypted-PDF lock badge — amber tone, matches warning palette */
.ai-encrypted-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px var(--sp-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--warning-50, #fff7ed);
    color: var(--warning-800, #9a3412);
    border: 1px solid var(--warning-300, #fdba74);
    flex-shrink: 0;
}

.ai-review-card.is-encrypted {
    border-color: var(--warning-300, #fdba74);
    box-shadow: 0 0 0 1px var(--warning-200, #fed7aa) inset;
}

/* DL-379: Desktop thin-row encrypted indicator (DL-334 layout) */
.ai-doc-row.is-encrypted {
    background: var(--warning-50, #fff7ed);
}
.ai-doc-row.is-encrypted .ai-doc-row__filename {
    color: var(--warning-800, #9a3412);
    font-weight: 600;
}
.ai-doc-row__lock {
    display: inline-flex;
    align-items: center;
    color: var(--warning-700, #c2410c);
    flex-shrink: 0;
    margin-inline-end: 4px;
}

/* DL-239: Filing type toggle inside combobox dropdown */
.doc-combobox-ft-toggle {
    display: flex;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--neutral-100, #f3f4f6);
    background: white;
    position: sticky;
    top: 0;
    z-index: 2;
}
.doc-combobox-ft-btn {
    flex: 1;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-full);
    border: 1px solid var(--neutral-200, #e5e7eb);
    background: var(--neutral-50, #f9fafb);
    color: var(--neutral-500, #6b7280);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.doc-combobox-ft-btn:hover {
    background: var(--neutral-100, #f3f4f6);
}
.doc-combobox-ft-btn.active {
    background: var(--primary-50, #eff6ff);
    color: var(--primary-700, #1d4ed8);
    border-color: var(--primary-300, #93c5fd);
    font-weight: 600;
}

/* DL-238: Filing type badge */
.ai-filing-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--sp-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    flex-shrink: 0;
}
.ai-ft-annual_report {
    background: var(--primary-50, #eff6ff);
    color: var(--primary-700, #1d4ed8);
    border: 1px solid var(--primary-200, #bfdbfe);
}
.ai-ft-capital_statement {
    background: #f5f3ff;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

.ai-card-body {
    padding: var(--sp-4) var(--sp-5);
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.ai-verdict-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: var(--sp-2);
    letter-spacing: 0.02em;
}

.ai-classification-result {
    margin-bottom: var(--sp-3);
}

.ai-classification-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.ai-confidence-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.ai-confidence-high {
    background: var(--success-100);
    color: var(--success-700);
}

.ai-confidence-medium {
    background: var(--warning-100);
    color: var(--warning-700);
}

.ai-confidence-low {
    background: var(--danger-100);
    color: var(--danger-700);
}

.ai-template-match {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--gray-800);
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.ai-template-unmatched {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--warning-700);
}

/* DL-320: .ai-evidence-trigger (AI robot "?" icon) removed — noise per NN/G tooltip guidelines.
   .ai-evidence-tooltip kept: the delegated tooltip IIFE is harmless with zero triggers,
   and the class name is still referenced in JS scope. */

/* Floating tooltip (appended to body via JS) */
.ai-evidence-tooltip {
    position: fixed;
    z-index: 9999;
    width: 300px;
    max-width: 90vw;
    padding: var(--sp-3);
    background: var(--gray-800);
    color: var(--gray-50);
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 1.6;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}

.ai-evidence-tooltip.visible {
    opacity: 1;
}

/* Confidence prefix label */
.ai-confidence-prefix {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--gray-500);
    margin-inline-end: var(--sp-1);
}

/* Issuer received line (verdict area) */
.ai-issuer-received {
    width: 100%;
    font-size: var(--text-xs);
    color: var(--gray-500);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.ai-issuer-received .ai-issuer-value {
    font-weight: 700;
    color: var(--gray-800);
}

/* Classification type inline group */
.ai-classification-type {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

/* Validation area — lightweight list radio options */
.ai-validation-area {
    width: 100%;
    margin-top: var(--sp-3);
}

.ai-validation-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: var(--sp-1);
}

.ai-validation-options {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ai-comparison-radio {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: var(--text-sm);
    color: var(--gray-600);
    line-height: 1.5;
}
.ai-comparison-radio b { color: var(--gray-800); font-weight: 600; }

.ai-comparison-radio + .ai-comparison-radio {
    border-top: 1px solid var(--gray-100);
}

.ai-comparison-radio:hover {
    background: var(--gray-50);
    color: var(--brand-600);
}

.ai-comparison-radio.selected,
.ai-comparison-radio:has(input:checked) {
    color: var(--brand-700);
    background: var(--brand-50);
}

.ai-comparison-radio input[type="radio"] {
    accent-color: var(--brand-600);
    margin: 0;
    flex-shrink: 0;
}

/* AI reason inline (unmatched cards) */
.ai-reason-inline {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-top: var(--sp-2);
    line-height: 1.6;
    background: var(--gray-50);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    border-inline-start: 2px solid var(--gray-300);
    overflow-wrap: break-word;
    word-break: break-word;
}


/* DL-199: Client communication notes in AI review accordion */
.ai-cn-section {
    margin-top: var(--sp-2);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    border-inline-start: 2px solid var(--info-300, #93c5fd);
}
.ai-cn-header {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: var(--sp-2);
}
.ai-cn-entry {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: var(--text-xs);
    padding: 4px 2px;
    border-radius: var(--radius-sm);
    cursor: default;
    transition: background 0.15s;
}
.ai-cn-entry:hover { background: var(--gray-50); }
.ai-cn-entry + .ai-cn-entry {
    border-top: 1px solid var(--gray-100);
    margin-top: 2px;
}
.cn-icon--email { color: var(--info-500); }
.cn-icon--manual { color: var(--warning-500); }
.ai-cn-date {
    color: var(--gray-500);
    white-space: nowrap;
    min-width: 60px;
}
.ai-cn-summary {
    color: var(--gray-700);
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: default;
    transition: all 0.2s;
}
.ai-cn-entry:hover .ai-cn-summary,
.ai-cn-entry.expanded .ai-cn-summary {
    -webkit-line-clamp: unset;
    overflow: visible;
}
.ai-cn-action-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    color: var(--gray-400);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    line-height: 1;
}
.ai-cn-entry:hover .ai-cn-action-btn { opacity: 1; }
.ai-cn-action-btn:hover {
    color: var(--blue-600);
    background: var(--blue-50);
}
.ai-cn-entry .msg-reply-zone {
    width: 100%;
    margin-top: var(--sp-2);
}
.ai-cn-entry .cn-office-reply {
    width: 100%;
    margin-top: var(--sp-1);
    margin-right: var(--sp-6);
    padding: 6px 10px;
    background: var(--blue-50, #eff6ff);
    border-radius: var(--radius-sm);
    border-right: 3px solid var(--brand-500, #3b82f6);
}
.ai-cn-entry .cn-reply-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--brand-600, #2563eb);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}
.ai-cn-entry .cn-reply-text {
    font-size: 0.78rem;
    color: var(--gray-700);
    line-height: 1.4;
}
.ai-cn-entry .cn-reply-date {
    font-size: 0.68rem;
    color: var(--gray-400);
    margin-top: 2px;
}
.ai-cn-toggle {
    display: inline-block;
    margin-top: var(--sp-2);
    font-size: var(--text-xs);
    color: var(--brand-600);
    cursor: pointer;
}
.ai-cn-toggle:hover {
    text-decoration: underline;
}
.ai-cn-expanded {
    display: none;
}
.ai-cn-entries-scroll {
    max-height: 300px;
    overflow-y: auto;
}

/* Accordion stat badges */
.ai-accordion-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.ai-accordion-stat-badge.badge-matched {
    background: var(--success-100);
    color: var(--success-700);
}

.ai-accordion-stat-badge.badge-mismatch {
    background: var(--warning-100);
    color: var(--warning-700);
}

.ai-accordion-stat-badge.badge-unmatched {
    background: var(--danger-100);
    color: var(--danger-700);
}

.ai-accordion-stat-badge.badge-success {
    background: var(--success-100);
    color: var(--success-700);
}

/* DL-335: held / waiting for reply state */
.ai-accordion-stat-badge.badge-warning {
    background: var(--warning-100);
    color: var(--warning-700);
}

/* DL-210 + DL-348: Review done prompt — compact single-line header,
   inline flow rows, header-inline OR footer-row primary placement. */
.ai-review-done-prompt {
    background: var(--success-50);
    border: 1px solid var(--success-200);
    border-radius: var(--radius-lg);
    margin: var(--sp-3) var(--sp-4);
    padding: 10px 12px;
    animation: slideDown 300ms ease-out;
}

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

.ai-review-done-content {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
    /* DL-348: nowrap is the intent — but allow wrap as a hard fallback so the
       stats string never gets ellipsised (per user: data > 1-line guarantee). */
    flex-wrap: wrap;
}

.ai-review-done-icon {
    color: var(--success-600);
    flex-shrink: 0;
}

.ai-review-done-text {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip; /* clip rather than ellipsis — wrap is preferred fallback */
}

.ai-review-done-text strong {
    font-size: 13px;
    font-weight: 500;
    color: var(--success-800);
}

.ai-review-done-stats {
    font-size: 11px;
    color: var(--text-secondary, var(--gray-600));
    /* Wrap underneath title (rather than ellipsis) when the row is too narrow. */
    white-space: normal;
}

/* DL-348: inline flow rows — direct children of .ai-review-done-prompt, no
   nested white card. */
.ai-review-flows-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 6px;
    direction: rtl;
}
.ai-review-flow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    flex-wrap: wrap;
}
.ai-review-flow-row__context {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--text-primary, var(--gray-800));
}
.ai-review-flow-row__send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--success-700);
    border: 1px solid var(--success-500);
    border-radius: var(--radius-md);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.ai-review-flow-row__send-btn:hover { background: var(--success-50); }
.ai-review-flow-row__send-btn:active { background: var(--success-100); }
.ai-review-flow-row__send-btn:focus-visible {
    outline: 2px solid var(--success-500);
    outline-offset: 2px;
}

.ai-review-flow-row__link {
    background: transparent;
    border: none;
    padding: 0 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary, var(--gray-600));
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.ai-review-flow-row__link:hover {
    text-decoration: underline;
    color: var(--gray-800);
}
.ai-review-flow-row__link:focus-visible {
    outline: 2px solid var(--gray-400);
    outline-offset: 2px;
    border-radius: 2px;
}

/* DL-348: footer row holds the primary when any flow row is rendered above.
   When no flow rows render, the primary is inlined into .ai-review-done-content
   instead, collapsing the banner to a single ~40px row. */
.ai-review-done-footer {
    display: flex;
    margin-top: 6px;
    direction: rtl;
}
.ai-review-done-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--success-500);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease;
    flex-shrink: 0;
    white-space: nowrap;
}
.ai-review-done-primary:hover { background: var(--success-600, #059669); }
.ai-review-done-primary:active { background: var(--success-700, #047857); }
.ai-review-done-primary:focus-visible {
    outline: 2px solid var(--success-700);
    outline-offset: 2px;
}
/* When the primary is inlined into .ai-review-done-content (neither-flow case),
   push it to the end of the row so header reads [icon][text … flex:1][primary]. */
.ai-review-done-content > .ai-review-done-primary {
    margin-inline-start: auto;
}

/* Accordion removing animation */
.ai-accordion.removing {
    opacity: 0;
    max-height: 0 !important;
    margin-bottom: 0;
    overflow: hidden;
    transition: all 350ms ease-out;
}

/* Stat item mismatch variant */
.ai-stat-item.ai-stat-mismatch {
    border-inline-start: 3px solid var(--warning-500);
}

.ai-stat-item.ai-stat-mismatch .icon-sm {
    color: var(--warning-500);
}

/* Approve-anyway ghost button */
.btn-ghost-warning {
    color: var(--warning-700);
    background: transparent;
    border: 1px solid var(--warning-300);
}

.btn-ghost-warning:hover {
    background: var(--warning-50);
}

/* Missing docs collapsible container */
.ai-missing-docs-group {
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.ai-missing-docs-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    color: var(--gray-500);
    transition: color var(--transition-fast);
}

.ai-missing-docs-toggle:hover {
    color: var(--gray-700);
}

.ai-missing-docs-toggle .toggle-arrow {
    font-size: 10px;
    transition: transform var(--transition-fast);
}

.ai-missing-docs-group.open .ai-missing-docs-toggle .toggle-arrow {
    /* DL-330: rotate 90° clockwise so right-pointing ▸ becomes down-pointing ▾ when expanded (was 180°, which pointed left and read as collapsed) */
    transform: rotate(90deg);
}

/* DL-339 Fix C: legacy max-height collapse was sized for the old fat-card mobile
   path; on desktop DL-334 rows the animation timing caused "stuck-collapsed" bugs
   where the body measured 0 during initial render. Switch to display toggle.
   Mobile path uses `.ai-missing-docs-group.open` (toggleMissingDocs); desktop
   reuses the same hook plus a second selector for the thin-rows section header. */
.ai-missing-docs-body {
    padding: 0 var(--sp-4);
    display: none;
}

.ai-missing-docs-group.open .ai-missing-docs-body,
.ai-review-docs .ai-section-header.open + .ai-missing-docs-body {
    display: block;
    padding: 0 var(--sp-4) var(--sp-3);
    /* DL-350: cap height so 50+ chip lists don't push the doc list off-screen */
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Category sub-header */
.ai-missing-category {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-600);
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-1);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.ai-missing-category:first-child {
    margin-top: 0;
}

/* Tags container per category */
.ai-missing-category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-bottom: var(--sp-1);
}

.ai-missing-doc-tag,
.ai-doc-tag-waived,
.ai-doc-tag-received,
.ai-doc-tag-requires-fix {
    display: inline-block;
    padding: 1px var(--sp-2);
    border-radius: var(--radius-sm);
    margin: 1px;
    font-size: 11px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.ai-missing-doc-tag {
    background: var(--gray-100);
    color: var(--gray-600);
}

.ai-missing-doc-tag:hover { background: var(--gray-200); color: var(--gray-700); }

.ai-doc-tag-waived {
    background: var(--gray-100);
    color: var(--gray-400);
    opacity: 0.6;
    text-decoration: line-through;
}

.ai-doc-tag-waived:hover { opacity: 0.85; background: var(--gray-200); }

/* DL-386: trailing "+ הוסף מסמך" chip in the AI review מסמכים נדרשים section */
.ai-missing-add-doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px var(--sp-2);
    border-radius: var(--radius-sm);
    margin: 1px;
    font-size: 11px;
    cursor: pointer;
    background: transparent;
    color: var(--primary-600, #4f46e5);
    border: 1px dashed var(--primary-300, #a5b4fc);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    user-select: none;
}
.ai-missing-add-doc-chip:hover {
    background: var(--primary-50, #eef2ff);
    color: var(--primary-700, #4338ca);
    border-color: var(--primary-500, #6366f1);
}
.ai-missing-add-doc-chip:focus-visible {
    outline: 2px solid var(--primary-500, #6366f1);
    outline-offset: 1px;
}
.ai-missing-add-doc-chip .icon-xs { width: 12px; height: 12px; }

/* DL-386: inline prompt anchored to the freshly-added chip */
.ai-inline-assign-prompt {
    z-index: 9999;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--primary-300, #a5b4fc);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-md, 8px);
    padding: 0;
    direction: rtl;
    animation: ai-inline-assign-prompt-in 140ms ease-out;
    max-width: 360px;
}
.ai-inline-assign-prompt__body {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}
.ai-inline-assign-prompt__msg {
    font-size: 13px;
    color: var(--text-primary, #111827);
    white-space: nowrap;
}
.ai-inline-assign-prompt__btn {
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.ai-inline-assign-prompt__btn--primary {
    background: var(--primary-600, #4f46e5);
    color: #fff;
    font-weight: 500;
}
.ai-inline-assign-prompt__btn--primary:hover {
    background: var(--primary-700, #4338ca);
}
.ai-inline-assign-prompt__btn--ghost {
    background: transparent;
    color: var(--gray-600, #4b5563);
    padding: 4px 8px;
}
.ai-inline-assign-prompt__btn--ghost:hover {
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-900, #111827);
}
.ai-inline-assign-prompt__arrow {
    position: absolute;
    top: -6px;
    right: 24px;
    width: 12px;
    height: 12px;
    background: var(--bg-primary, #fff);
    border-left: 1px solid var(--primary-300, #a5b4fc);
    border-top: 1px solid var(--primary-300, #a5b4fc);
    transform: rotate(45deg);
}
@keyframes ai-inline-assign-prompt-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* DL-386: brief flash to draw the eye to the just-added chip */
.ai-doc-tag--flash {
    animation: ai-doc-tag-flash 1.6s ease-out;
}
@keyframes ai-doc-tag-flash {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6); }
    50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

.ai-doc-tag-received {
    background: var(--success-50);
    color: var(--success-700);
}

.ai-doc-tag-received:hover { background: var(--success-100); }

.ai-doc-tag-requires-fix {
    background: var(--warning-50, #fffbeb);
    color: var(--warning-700, #b45309);
}

.ai-doc-tag-requires-fix:hover { background: var(--warning-100, #fef3c7); }

.ai-doc-tag-active {
    outline: 2px solid var(--primary-400);
    outline-offset: 1px;
}

/* DL-227: Tag status menu */
.ai-doc-tag-menu {
    z-index: 1000;
    background: var(--white, #fff);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: var(--sp-1) 0;
    min-width: 120px;
}

.ai-doc-tag-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-1) var(--sp-3);
    border: none;
    background: none;
    font-size: 12px;
    color: var(--gray-700);
    cursor: pointer;
    text-align: start;
    white-space: nowrap;
}

.ai-doc-tag-menu-item:hover {
    background: var(--gray-50);
}

.ai-doc-tag-menu-icon {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* DL-351: divider separating status options from edit/delete actions */
.ai-doc-tag-menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: var(--sp-1) 0;
}

/* DL-351: inline-rename input that replaces tag inner content */
.ai-doc-tag-rename-input {
    font: inherit;
    font-size: 12px;
    padding: 0 4px;
    margin: 0;
    border: 1px solid var(--gray-400);
    border-radius: 3px;
    background: var(--white, #fff);
    color: var(--gray-900);
    min-width: 120px;
    max-width: 240px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

.ai-doc-tag-rename-input:focus {
    border-color: var(--primary-500, #2563EB);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.ai-card-actions {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
    align-items: center;
    flex-wrap: wrap;
}

.ai-card-actions .btn {
    flex-shrink: 0;
}

.ai-card-actions .ai-assign-section {
    flex-basis: 100%;
}

.ai-card-actions .btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.ai-card-actions .btn[aria-disabled="true"]:hover {
    opacity: 0.45;
    background: inherit;
    border-color: inherit;
    box-shadow: none;
}

/* DL-328: saved-question badge shown above action row on pending/reviewed cards */
.batch-q-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--primary-600, #4f46e5);
    background: var(--primary-50, #eef2ff);
    border-radius: 4px;
    padding: 2px 8px;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-assign-section {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
}

.ai-assign-section select {
    min-width: 200px;
    flex: 1;
    font-size: var(--text-xs);
    padding: var(--sp-1) var(--sp-3);
}

.ai-assign-section .ai-assign-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-600);
}

/* AI Empty State */
.ai-empty-done {
    text-align: center;
    padding: var(--sp-16) var(--sp-6);
}

.ai-empty-done-icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-5);
    color: var(--success-500);
}

.ai-empty-done h2 {
    font-size: var(--text-xl);
    color: var(--gray-800);
    margin-bottom: var(--sp-2);
}

.ai-empty-done p {
    font-size: var(--text-sm);
    color: var(--gray-500);
}

/* AI Reassign Modal */
.ai-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

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

.ai-modal-panel {
    background: white;
    border-radius: var(--radius-xl);
    max-width: 560px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modalSlideUp 200ms ease-out;
}

.ai-modal-panel-header {
    padding: var(--sp-6) var(--sp-6) 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--gray-800);
}

.ai-modal-panel-body {
    padding: var(--sp-5) var(--sp-6);
    color: var(--gray-600);
    line-height: 1.7;
}

.ai-modal-panel-footer {
    padding: 0 var(--sp-6) var(--sp-6);
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
}

.ai-reassign-file-info {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-sm);
    color: var(--gray-700);
    font-weight: 500;
    border: 1px solid var(--gray-200);
}

.ai-reassign-select {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--gray-800);
    background: white;
    cursor: pointer;
}

.ai-reassign-select:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* AI Toast */
.ai-toast {
    position: fixed;
    top: var(--sp-5);
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    opacity: 0;
    pointer-events: none;
    background: var(--gray-800);
    color: white;
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    transition: transform var(--transition-base), opacity var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.ai-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.ai-toast.ai-toast-success { background: var(--success-700); }
.ai-toast.ai-toast-danger  { background: var(--danger-700); }

.ai-toast-action {
    margin-right: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--radius-md);
    background: transparent;
    color: white;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-base), border-color var(--transition-base);
}
.ai-toast-action:hover {
    background: rgba(255,255,255,0.15);
    border-color: white;
}

.ai-toast-close {
    margin-right: var(--sp-1);
    padding: 0 var(--sp-2);
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-size: var(--text-lg);
    cursor: pointer;
    line-height: 1;
    transition: color var(--transition-base);
}
.ai-toast-close:hover {
    color: white;
}

/* ==================== DASHBOARD SPLIT LAYOUT (DL-261) ==================== */

.dashboard-split {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 360px);
    gap: var(--sp-5);
    align-items: start;
}

.dashboard-main {
    min-width: 0;
}

.dashboard-side-panel {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.side-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
}

.side-panel-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.side-panel-body {
    overflow-y: auto;
    padding: var(--sp-3);
    flex: 1;
}

/* DL-273: Compact search input in messages panel */
.msg-search-wrap {
    width: 100%;
    margin-top: var(--sp-2);
    position: relative;
}
.msg-search-input {
    width: 100%;
    padding: var(--sp-1) var(--sp-2);
    padding-left: 28px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color var(--transition-base);
}
.msg-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.msg-search-input::placeholder {
    color: var(--gray-400);
}
.msg-search-clear {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 2px;
    line-height: 0;
}
.msg-search-clear:hover {
    color: var(--gray-600);
}

/* DL-406: aging-color stripe on the start (RTL: right) edge of each row
   and on the multi-message group container. Fresh = no stripe (default
   state shouldn't scream); progressively warmer as the message ages. */
.msg-row.aging-fresh,
.msg-group.aging-fresh { border-inline-start: 3px solid transparent; }
.msg-row.aging-day1,
.msg-group.aging-day1 { border-inline-start: 3px solid var(--warning-400, #fbbf24); }
.msg-row.aging-aging,
.msg-group.aging-aging { border-inline-start: 3px solid var(--danger-400, #f87171); }
.msg-row.aging-stale,
.msg-group.aging-stale { border-inline-start: 3px solid var(--gray-700, #374151); background: var(--gray-50); }

.msg-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    transition: background 0.15s;
    border-bottom: 1px solid var(--gray-100);
    align-items: flex-start;
}

.msg-row:last-child {
    border-bottom: none;
}

.msg-row:hover {
    background: var(--gray-50);
}

.msg-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue-50, #eff6ff);
    color: var(--blue-600, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg-content {
    flex: 1;
    min-width: 0;
}

.msg-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
    margin-bottom: 2px;
}

.msg-client {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-date {
    font-size: 0.75rem;
    color: var(--gray-500);
    white-space: nowrap;
    flex-shrink: 0;
}

.msg-summary {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: default;
    transition: all 0.2s;
}

.msg-row:hover .msg-summary {
    -webkit-line-clamp: unset;
    display: block;
}

.msg-row.expanded .msg-summary {
    -webkit-line-clamp: unset;
    display: block;
}


.msg-summary-label {
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--blue-600, #2563eb);
}

.msg-actions {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    margin-top: 2px;
}

.msg-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    color: var(--gray-400);
    transition: color 0.15s, background 0.15s;
}

.msg-action-btn:hover {
    color: var(--blue-600, #2563eb);
    background: var(--blue-50, #eff6ff);
}

.msg-action-btn--danger:hover {
    color: var(--red-600, #dc2626);
    background: var(--red-50, #fef2f2);
}

.msg-inline-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--sp-1) 0;
}

.msg-inline-actions .btn-sm {
    font-size: 0.78rem;
    padding: 4px 10px;
}

/* DL-266: Office reply shown inside message card */
.msg-office-reply {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--blue-50, #eff6ff);
    border-radius: var(--radius-sm);
    border-right: 3px solid var(--brand-500, #3b82f6);
}

.msg-reply-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--brand-600, #2563eb);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.msg-reply-text {
    font-size: 0.8rem;
    color: var(--gray-700);
    line-height: 1.4;
}

.msg-reply-date {
    font-size: 0.7rem;
    color: var(--gray-400);
    margin-top: 2px;
}

/* DL-266: Inline reply zone */
.msg-reply-zone {
    width: 100%;
    padding: var(--sp-2) 0 0;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 200px; }
}

.msg-reply-textarea {
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--sp-2);
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.4;
    resize: vertical;
    min-height: 48px;
    max-height: 120px;
    direction: rtl;
    color: var(--gray-800);
    background: var(--white, #fff);
    transition: border-color 0.15s;
}

.msg-reply-textarea:focus {
    outline: none;
    border-color: var(--brand-500, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.msg-reply-textarea::placeholder {
    color: var(--gray-400);
}

.msg-reply-buttons {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-start;
    margin-top: var(--sp-2);
}

.msg-reply-send {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
}

.msg-reply-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.msg-reply-cancel {
    font-size: 0.78rem;
}

.msg-empty {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    color: var(--gray-400);
}

.msg-empty i {
    display: block;
    margin: 0 auto var(--sp-2);
}

/* DL-271: Load more link */
.msg-load-more {
    text-align: center;
    padding: var(--sp-3);
    color: var(--primary);
    cursor: pointer;
    font-size: var(--text-sm);
    border-top: 1px solid var(--gray-100);
}
.msg-load-more:hover {
    text-decoration: underline;
}

/* ==================== DL-288: Recent Messages Enhancements ==================== */

/* DL-288: Mark-as-handled button (replaces danger trash) */
/* DL-348 follow-up: small CTA nudge — green at rest with a faint tinted bg
   so the primary "mark as handled" action reads as such without dominating. */
.msg-action-btn--success {
    color: var(--green-600, #16a34a);
    background: var(--green-50, #f0fdf4);
}
.msg-action-btn--success:hover {
    color: var(--green-700, #15803d);
    background: var(--green-100, #dcfce7);
}

/* DL-288: Thread wrapper for 2+ stacked office replies */
.msg-thread-replies {
    margin-top: var(--sp-2);
    padding-right: var(--sp-3);
    border-right: 2px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.msg-thread-replies .msg-office-reply {
    margin-top: 0; /* gap handles spacing */
}

/* DL-396 + follow-up: Group-by-client wrapper for multi-message clients in the dashboard panel.
   Pattern: iOS WWDC18 grouped notifications (latest + meta in header, older behind toggle)
   crossed with PatternFly notification drawer (group header IS the action surface).
   Single-message groups bypass this and render the bare .msg-row (zero visual delta). */
.msg-group {
    border-bottom: 1px solid var(--gray-100);
    position: relative;
}
.msg-group:last-child {
    border-bottom: none;
}
/* Stack-peek ghost (iOS): hints "more under here" when collapsed.
   Hidden on hover (header takes over) and when expanded. */
.msg-group::before {
    content: '';
    position: absolute;
    inset: 4px 4px auto 4px;
    height: 6px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    transform: translateY(-3px) scaleX(0.94);
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.msg-group.expanded::before,
.msg-group:hover::before {
    opacity: 0;
}
.msg-group-header {
    position: relative;
    z-index: 1;
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    transition: background 0.15s;
    background: #fff;
}
.msg-group-header:hover {
    background: var(--gray-50);
}
.msg-group-header-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
}
.msg-group-header-row .msg-client {
    font-weight: 700;
    color: var(--gray-800);
    font-size: 0.92rem;
}
.msg-group-header-row .msg-date {
    font-size: 0.72rem;
    color: var(--gray-500);
    font-weight: 400;
    margin-inline-start: auto;
}
/* Counter pill: soft, low-attention (Smashing 2025 — counters are low-attention UI). */
.msg-group-counter {
    background: transparent;
    color: var(--gray-500);
    font-size: 0.65rem;
    font-weight: 500;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    line-height: 1.5;
    white-space: nowrap;
}
/* Chevron: trailing edge, larger, hover cues expandability (LogRocket accordion best practices). */
.msg-group-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--gray-400);
    transition: transform 0.2s ease, color 0.15s;
    margin-inline-start: var(--sp-1);
}
.msg-group-header:hover .msg-group-chevron {
    color: var(--brand-500, #3b82f6);
}
.msg-group.expanded .msg-group-chevron {
    transform: rotate(180deg);
}
.msg-group-preview {
    margin-top: var(--sp-1);
    color: var(--gray-600);
    font-size: 0.85rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Header-level actions (group ✓ all + reply latest + open doc-manager).
   Pattern: PatternFly notification drawer — group header IS the action surface. */
.msg-group-actions {
    display: flex;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
    justify-content: flex-end;
}
.msg-group-older {
    display: none;
    padding-inline-start: var(--sp-3);
    border-inline-start: 1px solid var(--gray-100);
    margin-inline-start: var(--sp-4);
    margin-top: var(--sp-1);
    margin-bottom: var(--sp-2);
}
.msg-group.expanded .msg-group-older {
    display: block;
}
/* Older rows: dimmer, smaller, tighter — clear visual hierarchy below the parent.
   Client name hidden (parent header already says it). */
.msg-group-older .msg-row {
    border-bottom: 1px dashed var(--gray-100);
    padding: var(--sp-2) var(--sp-2);
    opacity: 0.85;
}
.msg-group-older .msg-row:last-child {
    border-bottom: none;
}
.msg-group-older .msg-client {
    display: none;
}
.msg-group-older .msg-summary {
    font-size: 0.78rem;
    color: var(--gray-600);
}
.msg-group-older .msg-date {
    font-size: 0.7rem;
}

/* DL-288: Gmail-style expand button on reply textarea */
.msg-reply-expand-btn {
    position: absolute;
    top: 4px;
    left: 4px; /* RTL: visually the top-right since direction=rtl */
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--gray-200);
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    line-height: 0;
    z-index: 1;
    transition: color 0.15s, background 0.15s;
}
.msg-reply-expand-btn:hover {
    color: var(--brand-500, #3b82f6);
    background: #fff;
}
.msg-reply-textarea-wrap {
    position: relative;
}

/* DL-288: Inline post-reply "mark as handled?" prompt */
.msg-post-reply-prompt {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--green-50, #f0fdf4);
    border: 1px solid var(--green-200, #bbf7d0);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--gray-700);
}
.msg-post-reply-prompt .msg-prompt-text {
    flex: 1;
    font-weight: 500;
}
.msg-post-reply-prompt .msg-prompt-actions {
    display: flex;
    gap: var(--sp-2);
}

/* DL-288: Expand-compose modal — Gmail-style with live preview */
.ai-modal-panel.msg-compose-modal {
    width: min(1100px, 95vw);
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.msg-compose-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}
.msg-compose-header .msg-compose-title {
    font-weight: 600;
    color: var(--gray-700);
}
.msg-compose-collapse-btn {
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    line-height: 0;
    transition: color 0.15s, background 0.15s;
}
.msg-compose-collapse-btn:hover {
    color: var(--brand-500, #3b82f6);
    background: var(--gray-100);
}
.msg-compose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.msg-compose-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: var(--sp-2);
}
.msg-compose-pane-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.msg-compose-textarea {
    flex: 1;
    min-height: 280px;
    padding: var(--sp-3);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: none;
}
.msg-compose-textarea:focus {
    outline: none;
    border-color: var(--brand-500, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.msg-compose-preview-wrap {
    flex: 1;
    min-height: 280px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
    background: var(--gray-50);
    position: relative;
}
.msg-preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    display: block;
}
.msg-preview-loading {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    font-size: 0.72rem;
    color: var(--gray-400);
    background: rgba(255,255,255,0.9);
    padding: 2px 8px;
    border-radius: 4px;
    pointer-events: none;
}
.msg-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--gray-400);
    font-size: 0.9rem;
    text-align: center;
    padding: var(--sp-4);
}
.msg-compose-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* Mobile: stack textarea above preview */
@media (max-width: 900px) {
    .msg-compose-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .msg-compose-textarea,
    .msg-compose-preview-wrap {
        min-height: 200px;
    }
    .ai-modal-panel.msg-compose-modal {
        max-height: 95vh;
        width: 95vw;
    }
}

/* ==================== AI REVIEW 3-PANE (DL-330) ==================== */

/* DL-330: legacy .ai-filter-bar + #aiSummaryBar are removed/hidden — search + summary moved into the clients pane toolbar (.ai-clients-toolbar below) */
#tab-ai-review > #aiSummaryBar { display: none !important; }


/* Break out of the .content max-width:1400px cap so all 3 panes can stretch full-viewport (Outlook-style full-screen usage).
   RTL-safe: viewport-breakout with negative left/right. Restore horizontal padding to match the rest of the layout. */
#tab-ai-review.active {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    padding-inline: var(--sp-4);
    box-sizing: border-box;
}

.ai-review-split {
    display: grid;
    /* Preview capped near PDF native render width (~600px) — extra horizontal space goes to the middle docs pane instead of wasted whitespace around the PDF. */
    grid-template-columns: 300px 1fr minmax(520px, 620px);
    grid-template-rows: 1fr auto;
    gap: var(--sp-3);
    align-items: start;
    height: calc(100vh - 180px);
    overflow: hidden;
    overscroll-behavior: none;
}

.ai-review-clients,
.ai-review-docs,
.ai-review-detail {
    grid-row: 1;
}

.ai-review-pagination {
    grid-row: 2;
    grid-column: 1;
    padding: var(--sp-2) var(--sp-1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-review-pagination:empty { display: none; }

.ai-review-clients,
.ai-review-docs,
.ai-review-detail {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    background: white;
}

.ai-review-clients,
.ai-review-docs {
    min-height: 0;
    min-width: 0;
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

/* Pane 1 becomes flex column: toolbar (summary + search) stays pinned at top, list scrolls below */
.ai-review-clients {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ai-clients-toolbar {
    flex-shrink: 0;
    padding: var(--sp-3);
    border-bottom: 1px solid var(--gray-100);
    background: white;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.ai-clients-summary {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.ai-clients-summary:empty { display: none; }

.ai-summary-primary {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.25;
}

.ai-summary-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-summary-progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--text-xs);
    line-height: 1.1;
}
.ai-summary-progress-text {
    color: var(--gray-500);
    font-weight: 500;
}
.ai-summary-progress-pct {
    color: var(--brand-600);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ai-summary-progress-track {
    height: 6px;
    background: var(--gray-100);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.ai-summary-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-500) 0%, var(--brand-400) 100%);
    border-radius: 999px;
    transition: width 0.3s ease-out;
    min-width: 2px;
}

.ai-clients-search {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    background: white;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ai-clients-search:focus-within {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.ai-clients-search label {
    color: var(--gray-400);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.ai-clients-search input[type="text"] {
    border: none !important;
    outline: none;
    background: transparent;
    padding: 0 !important;
    width: 100%;
    min-width: 0 !important;
    font-size: var(--text-sm);
}

.ai-clients-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ai-review-docs {
    /* DL-339 v1.1: inner .ai-doc-list owns the vertical scroll.
       Outer clips so we don't get a second scrollbar on top of the list's own. */
    overflow: hidden;
    overscroll-behavior: contain;
}

.ai-review-clients::-webkit-scrollbar,
.ai-review-docs::-webkit-scrollbar { width: 6px; }
.ai-review-clients::-webkit-scrollbar-thumb,
.ai-review-docs::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}
.ai-review-clients::-webkit-scrollbar-thumb:hover,
.ai-review-docs::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

.ai-review-docs {
    padding: var(--sp-3);
}

.ai-review-docs .ai-review-card {
    max-width: none;
    margin-inline: 0;
}

/* DL-330: kill nested scroll inside pane 2 — the outer .ai-review-docs is the only scroll container on desktop.
   .ai-accordion-content defaults to max-height/overflow-y which creates an inner scroll; reset for desktop 3-pane. */
.ai-review-docs .ai-accordion {
    margin-bottom: 0;
    box-shadow: none;
    animation: none;
}
.ai-review-docs .ai-accordion-body {
    max-height: none !important;
    overflow: visible;
    border: none;
    border-radius: 0;
}
.ai-review-docs .ai-accordion-content {
    max-height: none;
    overflow: visible;
    padding: var(--sp-3) var(--sp-2);
}
/* DL-330 redesign: slim the docs-pane client header (was loud purple banner).
   Mobile uses the same .ai-accordion but inside #aiClientsPane — not overridden here. */
.ai-review-docs .ai-accordion-header,
.ai-review-docs .ai-accordion.open .ai-accordion-header {
    background: white !important;
    color: var(--gray-900) !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--gray-200);
    padding: var(--sp-2) var(--sp-3);
    cursor: default;
}
.ai-review-docs .ai-accordion-header .ai-accordion-title {
    font-weight: 600;
    color: var(--gray-900);
}
.ai-review-docs .ai-accordion.open .ai-accordion-stats {
    opacity: 1;
}
.ai-review-docs .ai-accordion.open .ai-doc-manager-link {
    color: var(--brand-600);
}
.ai-review-docs .ai-accordion.open .ai-doc-manager-link:hover {
    background: var(--brand-50);
}
/* Hide the expand/collapse chevron in docs pane — the accordion is always open there */
.ai-review-docs .ai-accordion-icon { display: none; }

/* Client row — reuses .ai-accordion-header styling, adds .active highlight */
.ai-client-row {
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.12s ease;
    /* Density override: reduce padding from .ai-accordion-header's sp-4/sp-5 */
    padding: var(--sp-2) var(--sp-3);
    min-height: 0;
    /* flex/align-items/gap already provided by .ai-accordion-header */
}
.ai-client-row:last-child { border-bottom: none; }
.ai-client-row:hover { background: var(--gray-50); }
.ai-client-row.active {
    background: var(--brand-50);
    border-inline-start: 3px solid var(--brand-500);
}
.ai-client-row .ai-accordion-icon { display: none; }

.ai-client-progress {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-top: 2px;
}
.ai-client-row.active .ai-client-progress {
    color: var(--gray-600);
}

.ai-client-pending-num {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--warning-500);
    white-space: nowrap;
    padding-inline: var(--sp-2);
}
.ai-client-row.active .ai-client-pending-num {
    color: var(--gray-700);
}

/* DL-341: 100%-reviewed client visual treatment */
.ai-client-row.is-complete .ai-accordion-title > div > div:first-child,
.ai-client-row.is-complete .ai-client-progress {
    color: var(--gray-500);
}
.ai-client-complete-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--success-100, #d1fae5);
    color: var(--success-600, #059669);
    flex-shrink: 0;
}
.ai-client-complete-chip svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}
.ai-client-row.active .ai-client-complete-chip {
    background: var(--success-200, #a7f3d0);
}

.ai-docs-placeholder {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    gap: var(--sp-3);
    padding: var(--sp-5);
    text-align: center;
}

.ai-docs-header {
    padding: var(--sp-3) var(--sp-2);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}
.ai-docs-header h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--gray-800);
}
.ai-docs-header .ai-docs-header-meta {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

@media (max-width: 1600px) {
    .ai-review-split { grid-template-columns: 280px 1fr minmax(500px, 580px); gap: var(--sp-2); }
}

@media (max-width: 1300px) {
    .ai-review-split { grid-template-columns: 250px 1fr minmax(460px, 540px); gap: var(--sp-2); }
}

@media (max-width: 1100px) {
    .ai-review-split { grid-template-columns: 220px 1fr 460px; gap: var(--sp-2); }
}

/* Mobile breakpoint for 3-pane is handled by the existing mobile block below (line ~4617) — unchanged behavior per DL-330 scope */

.ai-review-detail {
    height: 100%;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
}

/* DL-340: Reviewed-state border accent on preview frame */
.ai-preview-frame.preview-reviewed-approved   { border-inline-start: 3px solid var(--success-500); }
.ai-preview-frame.preview-reviewed-rejected   { border-inline-start: 3px solid var(--danger-500); }
.ai-preview-frame.preview-reviewed-reassigned { border-inline-start: 3px solid var(--info-500); }

/* DL-340: Start-side grouping wrapper — badge sits before filename; action buttons stay at end */
.preview-header-start {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    flex: 1;
}

/* DL-340: Status badge */
.preview-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 3px;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}
.preview-status-badge.badge-approved   { background: var(--success-50); color: var(--success-700); }
.preview-status-badge.badge-rejected   { background: var(--danger-50);  color: var(--danger-700); }
.preview-status-badge.badge-reassigned { background: var(--info-50);    color: var(--info-700); }

/* DL-340: Corner stamp — classic rubber-stamp look over the preview iframe area */
.preview-review-stamp {
    position: absolute;
    top: 56px;
    inset-inline-start: 24px;
    padding: 8px 18px;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1;
    border: 3px solid currentColor;
    border-radius: 4px;
    background: transparent;
    transform: rotate(-8deg);
    opacity: 0.78;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 40%, transparent);
    text-shadow: 0 1px 0 color-mix(in srgb, currentColor 15%, transparent);
    white-space: nowrap;
}
.preview-review-stamp.stamp-approved   { color: var(--success-500); }
.preview-review-stamp.stamp-rejected   { color: var(--danger-500); }
.preview-review-stamp.stamp-reassigned { color: var(--info-500); }

.preview-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
    flex-shrink: 0;
    gap: var(--sp-3);
}

.preview-file-name {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.preview-iframe {
    flex: 1;
    width: 100%;
    border: none;
    display: block;
    min-height: 0; /* v3.1: allow flex:1 to shrink below intrinsic iframe height */
}

.preview-placeholder,
.preview-loading,
.preview-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    gap: var(--sp-3);
    padding: var(--sp-5);
    text-align: center;
}

.preview-error {
    color: var(--danger-500);
}

/* v3.2: Skeleton loading state — replaces the blank-pane moment while the iframe
   fetches + bootstraps. Filename of the doc being loaded gives immediate
   acknowledgment of the click; spinner signals active work. */
.preview-skeleton {
    background: var(--gray-50);
    gap: 12px;
}
.preview-skeleton__filename {
    font-size: 12px;
    color: var(--gray-600);
    max-width: 80%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: isolate;
}

.ai-review-card.preview-active {
    border-color: var(--brand-500);
    box-shadow: var(--shadow-md);
}

/* Preview button active state */
.ai-review-card.preview-active .ai-preview-btn {
    color: var(--brand-600);
    background: var(--brand-50);
}

/* ==================== REMINDERS TAB ==================== */

/* Tab Badge */
.reminder-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--brand-500);
    color: white;
    font-size: 11px;
    font-weight: 700;
    margin-inline-start: var(--sp-2);
}

/* Stats Bar */
.reminder-stats-bar {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}

.reminder-stat-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xs);
    min-width: 130px;
}

.reminder-stat-item .reminder-stat-value {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--gray-800);
}

.reminder-stat-item .reminder-stat-label {
    font-size: var(--text-xs);
    color: var(--gray-500);
    font-weight: 500;
}

.reminder-stat-item {
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.reminder-stat-item:hover { background: var(--gray-50); }
.reminder-stat-item:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.reminder-stat-item.reminder-stat-scheduled { border-inline-start: 3px solid var(--brand-500); }
.reminder-stat-item.reminder-stat-scheduled .icon-sm { color: var(--brand-500); }
.reminder-stat-item.reminder-stat-due { border-inline-start: 3px solid var(--warning-500); }
.reminder-stat-item.reminder-stat-due .icon-sm { color: var(--warning-500); }
.reminder-stat-item.reminder-stat-suppressed { border-inline-start: 3px solid var(--gray-400); }
.reminder-stat-item.reminder-stat-suppressed .icon-sm { color: var(--gray-400); }
.reminder-stat-item.reminder-stat-exhausted { border-inline-start: 3px solid var(--danger-500); }
.reminder-stat-item.reminder-stat-exhausted .icon-sm { color: var(--danger-500); }
.reminder-stat-item.reminder-stat-pending { border-inline-start: 3px solid var(--warning-500); }
.reminder-stat-item.reminder-stat-pending .icon-sm { color: var(--warning-500); }

/* Active card filter states */
.reminder-stat-item.reminder-stat-active.reminder-stat-scheduled {
    background: color-mix(in srgb, var(--brand-500) 8%, white);
    border: 2px solid var(--brand-500);
    border-inline-start-width: 3px;
}
.reminder-stat-item.reminder-stat-active.reminder-stat-due {
    background: color-mix(in srgb, var(--warning-500) 8%, white);
    border: 2px solid var(--warning-500);
    border-inline-start-width: 3px;
}
.reminder-stat-item.reminder-stat-active.reminder-stat-suppressed {
    background: color-mix(in srgb, var(--gray-400) 10%, white);
    border: 2px solid var(--gray-400);
    border-inline-start-width: 3px;
}
.reminder-stat-item.reminder-stat-active.reminder-stat-exhausted {
    background: color-mix(in srgb, var(--danger-500) 8%, white);
    border: 2px solid var(--danger-500);
    border-inline-start-width: 3px;
}
.reminder-stat-item.reminder-stat-active.reminder-stat-pending {
    background: color-mix(in srgb, var(--warning-500) 8%, white);
    border: 2px solid var(--warning-500);
    border-inline-start-width: 3px;
}

/* Filter Bar */
.reminder-filter-bar {
    display: flex;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
    align-items: center;
    background: white;
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xs);
}

.reminder-settings-btn {
    margin-inline-start: auto;
}

/* Section Headers (Type A / Type B) */
.reminder-section {
    margin-bottom: var(--sp-6);
}

.reminder-section:last-child {
    margin-bottom: 0;
}

.reminder-section-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius-lg);
    cursor: pointer;
    user-select: none;
    transition: border-radius 0.2s;
}

.reminder-section.open .reminder-section-header {
    margin-bottom: var(--sp-3);
}

.reminder-section-select-all {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.reminder-section-body {
    display: none;
}

.reminder-section.open .reminder-section-body {
    display: block;
}

.reminder-chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
}

.reminder-section.open .reminder-chevron {
    transform: rotate(-90deg);
}

.reminder-section-header h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
}

.reminder-section-header .icon-sm {
    flex-shrink: 0;
}

.reminder-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--sp-2);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
}

.reminder-section-a {
    background: var(--warning-50);
    border: 1px solid var(--warning-200);
}

.reminder-section-a .icon-sm {
    color: var(--warning-600);
}

.reminder-section-a h3 {
    color: var(--warning-800);
}

.reminder-section-a .reminder-section-count {
    background: var(--warning-200);
    color: var(--warning-800);
}

.reminder-section-b {
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
}

.reminder-section-b .icon-sm {
    color: var(--brand-600);
}

.reminder-section-b h3 {
    color: var(--brand-800);
}

.reminder-section-b .reminder-section-count {
    background: var(--brand-200);
    color: var(--brand-800);
}

.reminder-section-empty {
    text-align: center;
    padding: var(--sp-6);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Bulk Actions */
.reminder-bulk-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-4);
}

.reminder-bulk-count {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand-700);
    margin-inline-end: var(--sp-2);
}


/* Status Badge / Dropdown */
.reminder-status-dropdown {
    position: relative;
    display: inline-block;
}

.reminder-status-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    background: inherit;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.reminder-status-btn:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.reminder-status-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.reminder-status {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.reminder-status-active {
    background: var(--success-100);
    color: var(--success-700);
}

.reminder-status-suppressed {
    background: var(--gray-100);
    color: var(--gray-600);
}

tr.reminder-row-suppressed {
    background: var(--gray-50);
}

tr.reminder-row-suppressed td {
    color: var(--gray-400);
}

tr.reminder-row-suppressed td:nth-child(2),
tr.reminder-row-suppressed td:nth-child(7) {
    color: inherit;
    opacity: 1;
}

.reminder-bulk-muted-warning {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-full);
    background: var(--warning-50, #fffbeb);
    color: var(--warning-700, #b45309);
    border: 1px solid var(--warning-200, #fde68a);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.reminder-bulk-muted-warning:hover {
    background: var(--warning-100);
}

.reminder-status-pending {
    background: var(--warning-100);
    color: var(--warning-700);
}

.reminder-status-exhausted {
    background: var(--danger-100);
    color: var(--danger-700);
}

/* Date Styling */
.reminder-date-due {
    font-weight: 700;
    color: var(--danger-600);
}

.reminder-date-soon {
    font-weight: 600;
    color: var(--warning-600);
}

/* Row Loading (card-level loading for table rows) */
tr.reminder-loading {
    position: relative;
    pointer-events: none;
}

tr.reminder-loading td {
    opacity: 0.3;
}

tr.reminder-loading td:last-child {
    opacity: 1;
}

.reminder-row-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    z-index: 2;
}

.reminder-row-loading-overlay .spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.reminder-row-loading-overlay span {
    font-size: var(--text-sm);
    color: var(--gray-600);
}

/* Row Actions */
.reminder-row-actions {
    display: flex;
    gap: var(--sp-1);
}

.reminder-suppress-dropdown {
    position: relative;
}

.action-btn.reminder-suppress-btn {
    background: var(--warning-50);
    color: var(--warning-700);
}

.action-btn.reminder-suppress-btn:hover {
    background: var(--warning-100);
}

.suppress-menu {
    display: none;
    position: fixed;
    z-index: 1001;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    padding: var(--sp-2);
}

.suppress-menu[data-side="bottom"] { animation: floatInDown 120ms ease-out; }
.suppress-menu[data-side="top"]    { animation: floatInUp 120ms ease-out; }

.suppress-menu.open { display: block; }

.suppress-menu button {
    all: unset;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
    font-family: inherit;
    color: var(--gray-700);
    white-space: nowrap;
    box-sizing: border-box;
    transition: background var(--transition-fast);
}

.suppress-menu button:hover { background: var(--gray-50); }
.suppress-menu button.danger { color: var(--danger-600); }
.suppress-menu button.danger:hover { background: var(--danger-50); }

/* ==================== Row Overflow Menu (3-dot) ==================== */
.row-menu {
    display: none;
    position: fixed;
    z-index: 1001;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 160px;
    padding: var(--sp-1) 0;
}

.row-menu[data-side="bottom"] { animation: floatInDown 120ms ease-out; }
.row-menu[data-side="top"]    { animation: floatInUp 120ms ease-out; }

.row-menu.open { display: block; }

.row-menu hr {
    margin: var(--sp-1) 0;
    border: none;
    border-top: 1px solid var(--gray-100);
}

.row-menu button {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: none;
    background: none;
    text-align: start;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--gray-700);
    white-space: nowrap;
}

.row-menu button:hover { background: var(--gray-50); }
.row-menu button.danger { color: var(--danger-600); }
.row-menu button.danger:hover { background: var(--danger-50); }
.row-menu button svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Row overflow dropdown wrapper */
.row-overflow-dropdown {
    position: relative;
    display: inline-flex;
}

.action-btn.overflow {
    background: var(--neutral-50);
    color: var(--neutral-600);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
}

.action-btn.overflow:hover {
    background: var(--neutral-100);
}

/* Context menu inherits row-menu */
.context-menu.open { display: block; }

/* ==================== Client Bulk Actions ==================== */
.client-bulk-actions {
    display: none;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-4);
}

.client-bulk-actions.visible {
    display: flex;
}

/* ==================== Floating Bulk Bar ==================== */
.floating-bulk-bar {
    position: fixed;
    bottom: var(--sp-4);
    left: var(--sp-6);
    right: var(--sp-6);
    max-width: 1400px;
    margin: 0 auto;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgb(0 0 0 / 12%), 0 1px 3px rgb(0 0 0 / 8%);
    animation: bulkBarSlideUp 300ms cubic-bezier(0.05, 0.7, 0.1, 1) both;
}

@keyframes bulkBarSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.send-actions.floating-bulk-bar {
    display: flex;
    margin-top: 0;
}

.bulk-bar-close {
    padding-inline: var(--sp-2);
}

/* Padding protection when bulk bar floats over table containers */
.client-bulk-actions.floating-bulk-bar ~ #clientsTableContainer,
.reminder-bulk-actions.floating-bulk-bar ~ #reminderTableContainer {
    padding-bottom: 72px;
}

.client-bulk-count {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand-700);
    margin-inline-end: var(--sp-2);
}

/* ==================== Header More Dropdown ==================== */
.header-more-wrapper {
    position: relative;
}

/* ==================== Archive Banner ==================== */
.archive-banner {
    display: none;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--warning-50);
    border: 1px solid var(--warning-100);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-4);
    color: var(--warning-700);
    font-size: var(--text-sm);
    font-weight: 500;
}

.archive-banner.visible {
    display: flex;
}

.archive-banner i, .archive-banner svg { flex-shrink: 0; }

.archive-banner .btn {
    margin-inline-start: auto;
}

/* ==================== Outline Success Button ==================== */
.btn-outline-success {
    background: white;
    border: 1px solid var(--success-100);
    color: var(--success-500);
}

.btn-outline-success:hover {
    background: var(--success-50);
}

/* Dashboard checkbox column */
.dashboard-client-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--brand-500);
}

.dashboard-select-all {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--brand-500);
}

.action-btn.reminder-date-btn {
    background: var(--info-50);
    color: var(--info-700);
}

.action-btn.reminder-date-btn:hover {
    background: var(--info-100);
}

.action-btn.reminder-set-btn {
    background: var(--primary-50);
    color: var(--primary-600);
}

.action-btn.reminder-set-btn:hover {
    background: var(--primary-100);
}

.action-btn.deactivate {
    background: var(--danger-50);
    color: var(--danger-700);
}

.action-btn.deactivate:hover {
    background: var(--danger-100);
}

.action-btn.reactivate {
    background: var(--success-50);
    color: var(--success-700);
}

.action-btn.reactivate:hover {
    background: var(--success-100);
}

/* Archive Toggle Button */
.archive-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-50);
    color: var(--neutral-600);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.archive-toggle-btn:hover {
    border-color: var(--neutral-300);
    background: var(--neutral-100);
}

.archive-toggle-btn.active {
    background: var(--warning-50);
    border-color: var(--warning-300);
    color: var(--warning-700);
}

.archive-toggle-btn.active:hover {
    background: var(--warning-100);
}

/* Reminder Settings Modal Form Helpers */
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--sp-1);
}

.form-help {
    display: block;
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-top: var(--sp-1);
}

.form-field + .form-field {
    margin-top: var(--sp-4);
}

.form-field input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.form-field input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Reminder Max Cell — Clickable Inline Edit */
.reminder-max-cell {
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 13px;
}

.reminder-max-cell:hover {
    filter: brightness(0.95);
}

.reminder-max-default {
    color: var(--text-secondary);
    background: var(--neutral-100);
    font-weight: 500;
}

.reminder-max-custom {
    color: var(--primary-700);
    background: var(--primary-50);
    font-weight: 700;
    border: 1px solid var(--primary-200);
}

.reminder-max-unlimited {
    color: var(--success-700);
    background: var(--success-50);
    font-weight: 500;
    border: 1px solid var(--success-200);
    font-size: 12px;
}

.reminder-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: var(--primary-100);
    color: var(--primary-600);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    transition: background 0.15s;
}

.reminder-reset-btn:hover {
    background: var(--primary-200);
}

.reminder-max-editor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.reminder-max-input {
    width: 64px;
    padding: 3px 8px;
    border: 1px solid var(--primary-300);
    border-radius: var(--radius-md);
    font-size: 13px;
    background: var(--surface-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-100);
    text-align: center;
    direction: ltr;
    -moz-appearance: textfield;
}

.reminder-max-input::-webkit-inner-spin-button,
.reminder-max-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.reminder-max-save,
.reminder-max-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-secondary);
    line-height: 1;
}

.reminder-max-save {
    color: var(--success-600, #16a34a);
    border-color: var(--success-200, #bbf7d0);
    background: var(--success-50, #f0fdf4);
}

.reminder-max-save:hover {
    background: var(--success-100, #dcfce7);
    border-color: var(--success-400, #4ade80);
}

.reminder-max-cancel:hover {
    background: var(--surface-secondary);
    border-color: var(--border-secondary);
}

.reminder-max-save:disabled {
    opacity: 0.6;
    cursor: default;
}

.reminder-max-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--success-200, #bbf7d0);
    border-top-color: var(--success-600, #16a34a);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Reminder Date Cell — Clickable Inline Edit */
.reminder-date-cell {
    cursor: pointer;
    padding: 4px 10px;
    position: relative;
}

.reminder-date-cell.editable-date:hover {
    background: var(--primary-50, #eff6ff);
    border-radius: 6px;
}

.reminder-date-cell.editable-date .reminder-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.reminder-date-cell.editable-date .edit-pencil {
    opacity: 0;
    transition: opacity 0.15s;
    width: 13px;
    height: 13px;
    color: var(--gray-400);
    flex-shrink: 0;
}

.reminder-date-cell.editable-date:hover .edit-pencil {
    opacity: 1;
}

/* Date Editor Popover */
.date-editor-popover {
    width: 240px;
    padding: var(--sp-4);
}

.date-editor-popover .date-editor-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: var(--sp-3);
}

.date-editor-popover .date-editor-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--surface-primary);
    outline: none;
    direction: ltr;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.date-editor-popover .date-editor-input:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.date-editor-popover .date-quick-picks {
    display: flex;
    gap: 6px;
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}

.date-editor-popover .date-quick-pick {
    flex: 1;
    min-width: 0;
    padding: 5px 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-secondary);
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
    color: var(--text-primary);
}

.date-editor-popover .date-quick-pick:hover {
    background: var(--primary-50, #eff6ff);
    border-color: var(--primary-300);
}

.date-editor-popover .date-editor-actions {
    display: flex;
    gap: 8px;
    margin-top: var(--sp-3);
}

.date-editor-popover .date-editor-actions .btn {
    flex: 1;
    padding: 6px 0;
    font-size: 13px;
}

.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--gray-500);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding-inline: var(--sp-2);
}
.btn-link:hover:not(:disabled) {
    color: var(--gray-700);
    background: transparent;
}

.btn-ghost {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.btn-ghost:hover {
    background: var(--neutral-100);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1024px) {
    .ai-review-split {
        grid-template-columns: minmax(320px, 480px) 1fr;
    }
}

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

    .dashboard-split {
        grid-template-columns: 1fr;
    }

    .dashboard-side-panel {
        position: static;
        max-height: none;
        order: -1; /* Panel above table on mobile */
    }
}

@media (max-width: 768px) {
    .admin-navbar {
        padding: 0 var(--sp-4);
    }

    .tabs-nav {
        overflow-x: auto;
    }

    .tab-item {
        white-space: nowrap;
    }

    .content {
        padding: var(--sp-4);
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group select,
    .filter-group input[type="text"] {
        min-width: unset;
        width: 100%;
    }

    .preview-stats {
        flex-direction: column;
    }

    th,
    td {
        padding: var(--sp-2) var(--sp-2);
        font-size: var(--text-xs);
    }

    .th-sort-btn {
        font-size: var(--text-xs);
        gap: var(--sp-1);
    }

    .sort-arrows {
        font-size: 7px;
    }

    .stage-caret {
        display: none;
    }

    .stage-dropdown {
        min-width: min(190px, calc(100vw - 32px));
    }

    .preview-actions {
        flex-direction: column;
    }

    .send-actions {
        flex-direction: column;
        display: flex;
        gap: var(--sp-3);
    }

    /* Prevent iOS auto-zoom on input focus */
    select,
    input[type="text"],
    input[type="password"],
    textarea {
        font-size: 16px;
    }

    /* Reminders responsive */
    .reminder-stats-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
    }

    .reminder-stat-item {
        min-width: unset;
    }

    .reminder-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-3);
    }

    .reminder-bulk-actions,
    .client-bulk-actions {
        flex-wrap: wrap;
        gap: var(--sp-2);
    }

    .floating-bulk-bar {
        left: var(--sp-3);
        right: var(--sp-3);
    }

    .reminder-row-actions {
        flex-direction: column;
    }

    /* AI Review responsive — mobile behavior unchanged from pre-DL-330 (single column, accordions render into #aiClientsPane, mobile preview modal unchanged) */
    .ai-review-split {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    .ai-review-docs,
    .ai-review-detail {
        display: none;
    }

    .ai-review-clients {
        height: auto;
        overflow: visible;
        border: none;
        box-shadow: none;
        background: transparent;
    }

    .ai-review-clients .ai-review-card {
        max-width: 600px;
        margin-inline: auto;
    }

    .ai-stats-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
    }

    .ai-stat-item {
        min-width: unset;
    }

    .ai-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-3);
    }

    .ai-card-top {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }

    .ai-file-info {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .ai-file-name {
        white-space: normal;
        word-break: break-all;
    }

    .ai-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-card-actions .btn {
        width: 100%;
    }

    .ai-assign-section {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-assign-section select {
        min-width: unset;
        max-width: unset;
        width: 100%;
    }

    .ai-inline-confirm .btn {
        width: auto;
    }

    .ai-accordion-stats {
        display: none;
    }

    .ai-comparison-radio {
        font-size: var(--text-xs);
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-2);
    }

    .stat-card {
        padding: var(--sp-2) var(--sp-1);
    }

    .admin-navbar {
        padding: 0 var(--sp-3);
        height: 48px;
    }

    .content {
        padding: var(--sp-3);
    }

    .tab-item {
        padding: var(--sp-3) var(--sp-3);
        font-size: var(--text-xs);
    }

    .filters {
        gap: var(--sp-2);
    }

    .stage-dropdown {
        min-width: min(170px, calc(100vw - 24px));
    }

    .ai-modal-panel {
        width: 95%;
    }

    .ai-modal-panel-header {
        padding: var(--sp-4) var(--sp-4) 0;
        font-size: var(--text-lg);
    }

    .ai-modal-panel-body {
        padding: var(--sp-4);
    }

    .ai-modal-panel-footer {
        padding: 0 var(--sp-4) var(--sp-4);
        flex-direction: column;
    }

    .ai-modal-panel-footer .btn {
        width: 100%;
    }

}

/* ==================== INLINE CONFIRM (AI Review cards) ==================== */

.ai-inline-confirm {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    animation: aiInlineConfirmIn 150ms ease-out;
}

@keyframes aiInlineConfirmIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ai-inline-confirm-msg {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--gray-700);
}

.ai-inline-confirm.danger .ai-inline-confirm-msg {
    color: var(--danger-600);
}

/* ==================== CONFIRM DIALOG ==================== */

#confirmDialog {
    z-index: 1100; /* Must stack above other .ai-modal-overlay (z-index:1000) */
}

.confirm-dialog-panel {
    max-width: 380px !important;
}

.confirm-dialog-panel .ai-modal-panel-body p {
    font-size: var(--text-base);
    color: var(--gray-700);
    margin: 0;
}

.confirm-dialog-panel .ai-modal-panel-footer {
    justify-content: flex-end;
}

.confirm-dialog-panel .btn-primary {
    background: var(--brand-600, #4F46E5);
    color: white;
    border: none;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
}

.confirm-dialog-panel .btn-primary:hover {
    background: var(--brand-700, #4338CA);
}

.confirm-btn-danger {
    background: var(--danger-500, #EF4444);
    color: white;
    border: none;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
}

.confirm-btn-danger:hover {
    background: var(--danger-700, #B91C1C);
}

/* ==================== DOC SEARCH COMBOBOX ==================== */
.doc-combobox {
    position: relative;
    width: 100%;
}

.doc-combobox-input {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm);
    background: white;
    color: var(--gray-800);
    direction: rtl;
    text-align: right;
    cursor: pointer;
    transition: border-color 150ms, box-shadow 150ms;
    box-sizing: border-box;
}

.doc-combobox-input::placeholder {
    color: var(--gray-400);
}

.doc-combobox-input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.doc-combobox-input.has-value {
    font-weight: 500;
    color: var(--gray-800);
}

.doc-combobox-dropdown {
    display: none;
    position: fixed;
    max-height: 280px;
    width: 420px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    direction: rtl;
}

.doc-combobox.open .doc-combobox-dropdown {
    display: block;
}

.doc-combobox-category {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
    position: sticky;
    top: 0;
    z-index: 1;
}

.doc-combobox-option {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-sm);
    color: var(--gray-700);
    cursor: pointer;
    transition: background 100ms;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    border-bottom: 1px solid var(--gray-100);
}

.doc-combobox-option:hover {
    background: var(--brand-50, #EEF2FF);
}

.doc-combobox-option.current-match {
    background: var(--warning-50, #FFFBEB);
    border-right: 3px solid var(--warning-500, #F59E0B);
}

.doc-combobox-option .current-badge {
    font-size: var(--text-xs);
    color: var(--warning-600, #D97706);
    font-weight: 600;
    white-space: nowrap;
}

/* DL-224: Received docs in dropdown */
.doc-combobox-option.doc-received {
    opacity: 0.6;
}
.doc-combobox-option.doc-received:hover {
    opacity: 0.85;
}
.doc-combobox-option .received-badge {
    font-size: var(--text-xs);
    white-space: nowrap;
}

.doc-combobox-empty {
    padding: var(--sp-4);
    text-align: center;
    color: var(--gray-400);
    font-size: var(--text-sm);
}

/* Create new doc button in dropdown */
.doc-combobox-create-btn {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand-600, #4F46E5);
    cursor: pointer;
    border-bottom: 1px solid var(--gray-200);
    transition: background 100ms;
}

.doc-combobox-create-btn:hover {
    background: var(--brand-50, #EEF2FF);
}

/* Back link shown in create mode */
.doc-combobox-back-link {
    display: block;
    font-size: var(--text-xs);
    color: var(--gray-500);
    text-decoration: none;
    margin-top: var(--sp-1);
    direction: rtl;
}

.doc-combobox-back-link:hover {
    color: var(--brand-500);
}

/* Input border change in create mode */
.doc-combobox-input.create-mode {
    border-color: var(--brand-400, #818CF8);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Inline combobox in card actions */
.ai-assign-section .doc-combobox-container {
    flex: 1;
    min-width: 180px;
}

.ai-assign-section .doc-combobox-input {
    font-size: var(--text-xs);
    padding: var(--sp-1) var(--sp-3);
}

/* Allow dropdown to escape card overflow */
.ai-card-actions {
    overflow: visible;
}

/* Modal combobox */
.ai-modal-panel-body .doc-combobox-input {
    padding: var(--sp-3) var(--sp-4);
}

/* ==================== REJECTION NOTES PANEL ==================== */

.ai-reject-notes-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) 0;
}

.ai-reject-reason-select {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-he);
    direction: rtl;
    background: white;
    color: var(--gray-700);
    cursor: pointer;
}

.ai-reject-reason-select:focus {
    outline: none;
    border-color: var(--danger-400);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.ai-reject-notes-text {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-he);
    direction: rtl;
    resize: vertical;
    min-height: 48px;
    color: var(--gray-700);
}

.ai-reject-notes-text:focus {
    outline: none;
    border-color: var(--danger-400);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.ai-reject-notes-actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-start;
}

/* ==================== DL-086: REVIEWED CARD STATES ==================== */

/* Reviewed card backgrounds */
.ai-review-card.reviewed-approved {
    background: #f0f7ff;
    border-color: var(--info-300, #93c5fd) !important;
    opacity: 0.92;
}

.ai-review-card.reviewed-rejected {
    background: #fffbeb;
    border-color: var(--warning-300, #fcd34d) !important;
    opacity: 0.92;
}

.ai-review-card.reviewed-reassigned {
    background: #f0f7ff;
    border-color: var(--info-300, #93c5fd) !important;
    opacity: 0.92;
}

/* Review status lozenge */
.ai-review-lozenge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-full);
    line-height: 1.4;
}

.ai-review-lozenge.lozenge-approved,
.ai-review-lozenge.lozenge-reassigned {
    background: var(--info-100, #dbeafe);
    color: var(--info-700, #1d4ed8);
}

.ai-review-lozenge.lozenge-rejected {
    background: var(--warning-100, #fef3c7);
    color: var(--warning-700, #b45309);
}

/* DL-335: on_hold — amber tone (distinct from rejected which is also warning-toned) */
.ai-review-lozenge.lozenge-on-hold {
    background: var(--warning-200, #fde68a);
    color: var(--warning-800, #92400e);
}

.ai-review-card.reviewed-on-hold {
    background: var(--warning-50, #fffbeb);
    border-color: var(--warning-400, #fbbf24) !important;
    opacity: 1;
}

/* Held question display block (DL-335) */
.ai-held-question {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--warning-50, #fffbeb);
    border: 1px solid var(--warning-200, #fde68a);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--gray-700);
}
.ai-held-question .ai-held-question-label {
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--warning-700, #b45309);
    margin-bottom: var(--sp-1);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.ai-held-reply {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--info-50, #eff6ff);
    border: 1px solid var(--info-200, #bfdbfe);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--gray-700);
}
.ai-held-reply-label {
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--info-700, #1d4ed8);
    margin-bottom: var(--sp-1);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.ai-held-reply-text {
    white-space: pre-wrap;
}

/* Rejection details under lozenge */
.ai-reviewed-rejection-info {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-top: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    background: var(--warning-50, #fffbeb);
    border-radius: var(--radius-sm);
}

/* Change decision ghost button */
.ai-change-decision-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--gray-500);
    background: transparent;
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 150ms ease;
    font-family: var(--font-he);
}

.ai-change-decision-btn:hover {
    color: var(--gray-700);
    border-color: var(--gray-400);
    background: var(--gray-50);
}

/* ==================== DOCS POPOVER ==================== */
.docs-popover {
    position: fixed;
    z-index: 1001;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-4);
    min-width: 260px;
    max-width: 360px;
    overflow-y: auto;
}

.docs-popover[data-side="bottom"] { animation: floatInDown 120ms ease-out; }
.docs-popover[data-side="top"]    { animation: floatInUp 120ms ease-out; }

.docs-popover-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--gray-200);
}

.docs-popover-group {
    margin-bottom: var(--sp-3);
}

.docs-popover-group:last-child {
    margin-bottom: 0;
}

.docs-popover-group-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    margin-bottom: var(--sp-1);
}

.docs-popover-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 3px 0;
    font-size: var(--text-sm);
    color: var(--gray-700);
}

.docs-popover-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.docs-popover-icon.received { color: var(--success-500); }
.docs-popover-icon.missing { color: var(--danger-500); }
.docs-popover-icon.fix { color: var(--warning-500); }
.docs-popover-icon.waived { color: var(--gray-400); }

.docs-popover-loading {
    text-align: center;
    padding: var(--sp-4);
    color: var(--gray-400);
    font-size: var(--text-sm);
}

/* Clickable count styles */
.clickable-count {
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    border-radius: var(--radius-sm);
    padding: 1px 4px;
    margin: -1px -4px;
}

.clickable-count:hover {
    background: var(--brand-50);
    color: var(--brand-700);
}

.docs-count.clickable-count:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.missing-count.clickable-count {
    cursor: pointer;
}

.missing-count.clickable-count:hover {
    transform: scale(1.1);
    transition: transform var(--transition-fast);
}

/* ==================== EMAIL CELL ==================== */
.email-cell {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.email-link {
    color: var(--brand-600);
    text-decoration: none;
    font-size: var(--text-sm);
}

.email-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--brand-700);
}

.copy-email-btn {
    opacity: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 2px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.copy-email-btn:hover {
    color: var(--brand-600);
}

tr:hover .copy-email-btn {
    opacity: 1;
}

/* ==================== AI FILE NAME CLICKABLE ==================== */
.ai-file-name.clickable-preview {
    cursor: pointer;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--transition-fast);
}

.ai-file-name.clickable-preview:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--brand-500);
    color: var(--brand-700);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ai-assign-section .doc-combobox-container {
        min-width: unset;
        max-width: unset;
        width: 100%;
    }

    .doc-combobox-dropdown {
        width: calc(100vw - 40px);
    }

}

/* ==================== CLIENT EDIT LINK ==================== */
.client-edit-link {
    color: var(--gray-400);
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

tr:hover .client-edit-link {
    opacity: 1;
}

.client-edit-link:hover {
    color: var(--brand-600);
}

/* ==================== CLIENT DETAIL FORM ==================== */
/* Legacy static-HTML form (dead fallback, kept for reference) */
.client-detail-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.client-detail-form input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.client-detail-form input[type="text"]:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Field icon inside label (DL-371) */
.client-detail-field-icon {
    width: 14px;
    height: 14px;
    stroke: var(--gray-500);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}


/* ==================== QUESTIONNAIRE TAB ==================== */

/* Stats Bar */
.questionnaire-stats-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-3) var(--sp-5);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    flex-wrap: wrap;
}

.questionnaire-stat-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--gray-600);
}

.questionnaire-stat-value {
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--gray-800);
}

.questionnaire-stat-label {
    font-size: var(--text-sm);
    color: var(--gray-500);
}

.questionnaire-stat-item select {
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    background: white;
    cursor: pointer;
}

/* Filter Bar */
.questionnaire-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--gray-200);
    background: white;
}

/* Tab Badge */
.questionnaire-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--brand-500);
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Bulk Actions Bar */
.questionnaire-bulk-actions {
    display: none;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-4);
}

.questionnaire-bulk-actions.visible {
    display: flex;
}

.questionnaire-bulk-count {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand-700);
    margin-inline-end: var(--sp-2);
}

/* Padding when bulk bar floats over table */
.questionnaire-bulk-actions.floating-bulk-bar ~ #questionnaireTableContainer {
    padding-bottom: 72px;
}

/* Questionnaire Table */
#questionnaireTableContainer table {
    width: 100%;
}

#questionnaireTableContainer th {
    background: var(--gray-50);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--gray-600);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--gray-200);
    text-align: right;
    white-space: nowrap;
}

#questionnaireTableContainer td {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-sm);
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

#questionnaireTableContainer tr:hover td {
    background: var(--gray-50);
}

.qa-row-clickable {
    cursor: pointer;
}

/* DL-122: Sticky client name row when detail is expanded */
.qa-main-row-sticky td {
    position: sticky;
    top: 41px; /* below thead */
    z-index: 1;
    background: var(--white, #fff);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

/* Clickable client name link */
.qa-client-link {
    cursor: pointer;
    color: var(--gray-800);
    transition: color var(--transition-fast);
}

.qa-client-link:hover {
    color: var(--brand-600);
    text-decoration: underline;
}

/* Actions cell — inner wrapper for flex layout */
.qa-actions-inner {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    justify-content: center;
}

/* Expand toggle */
.expand-toggle {
    cursor: pointer;
    color: var(--gray-400);
    transition: transform 200ms ease, color 200ms ease;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
}

.expand-toggle:hover {
    color: var(--brand-600);
    background: var(--brand-50);
}

.expand-toggle.expanded {
    transform: rotate(90deg);
    color: var(--brand-600);
}

/* Expanded Q&A detail row */
.qa-detail-row td {
    padding: 0 !important;
    background: var(--gray-50) !important;
}

.qa-detail-content {
    padding: var(--sp-4) var(--sp-5);
    border-top: 2px solid var(--brand-200);
}

/* Q&A summary box */
.qa-summary-box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-4);
    font-size: var(--text-sm);
}

.qa-summary-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.qa-summary-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.qa-summary-value {
    font-weight: 600;
    color: var(--gray-800);
}

/* Q&A zebra table */
.qa-zebra-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin-bottom: var(--sp-3);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

.qa-zebra-table th {
    background: var(--gray-100) !important;
    font-weight: 700;
    font-size: var(--text-xs);
    color: var(--gray-600) !important;
    padding: var(--sp-2) var(--sp-3) !important;
    border-bottom: 2px solid var(--gray-200) !important;
    text-align: right;
}

.qa-zebra-table td {
    padding: var(--sp-2) var(--sp-3) !important;
    border-bottom: 1px solid var(--gray-100) !important;
    vertical-align: top;
    background: none !important;
}

.qa-zebra-table tr:nth-child(odd) td {
    background: #ffffff !important;
}

.qa-zebra-table tr:nth-child(even) td {
    background: #f9fafb !important;
}

.qa-zebra-table tr:last-child td {
    border-bottom: none !important;
}

.qa-question-col {
    font-weight: 600;
    color: var(--gray-700);
    width: 40%;
    line-height: 1.4;
}

.qa-answer-col {
    color: var(--gray-600);
    line-height: 1.6;
    direction: rtl;
}

/* Client questions (DL-110) section */
.qa-client-questions {
    margin-top: var(--sp-3);
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-md);
    padding: var(--sp-3) var(--sp-4);
}

.qa-client-questions-title {
    font-size: var(--text-xs);
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-2);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.qa-client-question-item {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid #fde68a;
    font-size: var(--text-sm);
    color: #78350f;
}

.qa-client-question-item:last-child {
    border-bottom: none;
}

/* DL-122: Client question answer display */
.qa-cq-question { display:flex; align-items:baseline; gap:var(--sp-1); }
.qa-cq-status { width:8px; height:8px; border-radius:50%; flex-shrink:0; display:inline-block; }
.qa-cq-answered { background:#10b981; }
.qa-cq-unanswered { background:#f59e0b; border:1px solid #d97706; }
.qa-cq-answer { margin-top:var(--sp-1); padding-right:var(--sp-4); color:var(--gray-600); font-size:var(--text-sm); }
.qa-cq-no-answer { color:var(--gray-400); font-style:italic; }

/* Responsive */
@media (max-width: 768px) {
    .questionnaire-bulk-actions {
        flex-wrap: wrap;
        gap: var(--sp-2);
    }
    .questionnaire-stats-bar {
        gap: var(--sp-3);
    }
}

/* ==================== TAB DROPDOWN (DL-125) ==================== */

.tab-dropdown-wrapper {
    position: relative;
    display: flex;
}

.tab-caret {
    font-size: 0.7em;
    color: var(--gray-400);
    margin-inline-start: var(--sp-1);
}

.tab-dropdown-menu {
    display: none;
    position: fixed;
    z-index: 1001;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    padding: var(--sp-1) 0;
    transform-origin: top center;
}

.tab-dropdown-menu.open {
    display: block;
    animation: tabDropdownIn 180ms cubic-bezier(.2, .8, .2, 1) both;
}

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

@media (prefers-reduced-motion: reduce) {
    .tab-dropdown-menu.open {
        animation-duration: 80ms;
    }
    @keyframes tabDropdownIn {
        from { opacity: 0; transform: none; }
        to   { opacity: 1; transform: none; }
    }
}

.tab-dropdown-menu button {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: none;
    background: none;
    text-align: start;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--gray-700);
    white-space: nowrap;
    font-family: inherit;
}

.tab-dropdown-menu button:hover {
    background: var(--gray-50);
}

.tab-dropdown-menu button svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ===== Notes Column ===== */
.notes-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--gray-600);
}
.notes-cell:hover {
    background: var(--gray-50);
}
.notes-text:empty::after {
    content: '+ הערה';
    color: var(--gray-300);
    font-size: var(--text-xs, 11px);
}
.notes-editor {
    width: 100%;
    min-height: 48px;
    padding: 6px 8px;
    font-size: var(--text-sm);
    font-family: inherit;
    border: 1px solid var(--brand-300);
    border-radius: 6px;
    resize: vertical;
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

/* ===========================================
   CHAT WIDGET (DL-179)
   =========================================== */

/* --- FAB (Floating Action Button) --- */
.chat-fab {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-600);
    color: white;
    z-index: 960;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}
.chat-fab:hover {
    transform: scale(1.05);
}
.chat-fab:active {
    transform: scale(0.95);
}
.chat-fab-hidden {
    transform: scale(0);
    pointer-events: none;
}

/* --- Chat Panel --- */
.chat-panel {
    position: fixed;
    bottom: 90px;
    left: 24px;
    width: 400px;
    max-height: min(600px, calc(100vh - 120px));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    z-index: 960;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 250ms ease-out, transform 250ms ease-out, visibility 250ms;
}
.chat-panel.chat-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

/* --- Header --- */
.chat-header {
    background: var(--brand-600);
    color: white;
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    flex-shrink: 0;
}
.chat-header-title {
    font-weight: 600;
    font-size: 15px;
}
.chat-close-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Messages Area --- */
.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* --- Message Bubbles --- */
.chat-msg {
    max-width: 85%;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: 1.5;
    word-wrap: break-word;
}
.chat-msg-user {
    align-self: flex-start;
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    color: var(--gray-800);
}
.chat-msg-assistant {
    align-self: flex-end;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    color: var(--gray-800);
}
.chat-msg-error {
    background: var(--red-50);
    border-color: var(--red-200);
    color: var(--red-600);
}
.streaming-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--brand-600);
    margin-inline-start: 2px;
    vertical-align: text-bottom;
    animation: cursor-blink 0.7s steps(1) infinite;
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.chat-msg:has(table) {
    max-width: 100%;
}
.chat-msg table {
    width: 100%;
    margin: 8px 0;
}
.chat-msg [dir="rtl"] {
    overflow-x: auto;
}

/* --- Approval Cards --- */
.chat-approval-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-right: 3px solid var(--orange-500);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    margin: var(--sp-2) 0;
}
.chat-approval-label {
    font-size: var(--text-sm);
    margin-bottom: var(--sp-2);
    color: var(--gray-700);
}
.chat-approval-buttons {
    display: flex;
    gap: var(--sp-2);
}
.chat-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: var(--text-sm);
    border: none;
    cursor: pointer;
    font-weight: 500;
}
.chat-btn-approve {
    background: var(--green-50, #f0fdf4);
    color: var(--green-600, #16a34a);
    border: 1px solid var(--green-200, #bbf7d0);
}
.chat-btn-deny {
    background: var(--red-50);
    color: var(--red-600);
    border: 1px solid var(--red-200);
}
.chat-btn:hover {
    filter: brightness(0.95);
}
.chat-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.chat-approved .chat-approval-label {
    color: var(--green-600, #16a34a);
}
.chat-denied .chat-approval-label {
    color: var(--gray-400);
    text-decoration: line-through;
}
.chat-status-approved {
    color: var(--green-600, #16a34a);
    font-size: var(--text-sm);
}
.chat-status-denied {
    color: var(--red-600);
    font-size: var(--text-sm);
}

/* --- Batch Card --- */
.chat-batch-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    margin: var(--sp-2) 0;
}
.chat-batch-header {
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: var(--sp-2);
}
.chat-batch-list {
    list-style: disc;
    padding-right: 20px;
    font-size: var(--text-xs, 12px);
    margin-bottom: var(--sp-3);
    color: var(--gray-600);
}
.chat-batch-list li {
    margin-bottom: 4px;
}

/* --- Suggestion Chips --- */
.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--sp-2) 0;
}
.chat-chip {
    background: var(--brand-50);
    color: var(--brand-700, #4338ca);
    border: 1px solid var(--brand-200);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: var(--text-xs, 12px);
    cursor: pointer;
    transition: background 0.15s;
}
.chat-chip:hover {
    background: var(--brand-100, #e0e7ff);
}

/* --- Typing Indicator --- */
.chat-loading {
    display: flex;
    align-items: center;
    padding: 0 var(--sp-3) var(--sp-2);
}
.chat-loading-dots {
    display: flex;
    gap: 4px;
}
.chat-loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gray-400);
    animation: chatBounce 1.2s ease-in-out infinite;
}
.chat-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.chat-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes chatBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-6px); }
}

/* --- Input Area --- */
.chat-input-row {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--gray-200);
    align-items: flex-end;
    flex-shrink: 0;
}
.chat-input {
    flex: 1;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: var(--text-sm);
    font-family: inherit;
    resize: none;
    max-height: 80px;
    outline: none;
    line-height: 1.4;
}
.chat-input:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}
.chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--brand-600);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-send-btn:hover {
    background: var(--brand-700, #4338ca);
}
.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* --- Client Links (in chat messages) --- */
.client-link {
    color: var(--brand-600);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
}
.client-link:hover {
    color: var(--brand-700, #4338ca);
}

/* --- Mobile chat overhaul (DL-215) --- */
@media (max-width: 768px) {
    /* FAB above bottom nav: 60px nav + 16px gap + safe area */
    .chat-fab {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        inset-inline-start: 16px;
        left: auto;
        right: auto;
        width: 52px;
        height: 52px;
    }

    /* Full-screen takeover */
    .chat-panel.chat-open {
        position: fixed;
        inset: 0;
        width: 100%;
        max-height: none;
        height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        z-index: 9999;
    }

    /* Header: remove desktop border-radius, safe area padding */
    .chat-panel .chat-header {
        padding-top: max(12px, env(safe-area-inset-top, 0px));
        min-height: 48px;
        border-radius: 0;
    }

    /* Messages fill all remaining space */
    .chat-panel .chat-messages {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Input row: safe area + touch targets */
    .chat-panel .chat-input-row {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }
    .chat-panel .chat-input-row textarea,
    .chat-panel .chat-input-row button {
        min-height: 44px;
    }

    /* Hide bottom nav when chat is full-screen */
    body.chat-fullscreen .bottom-nav,
    body.chat-fullscreen .bottom-nav-backdrop {
        display: none !important;
    }
}

/* ==================== MOBILE BOTTOM NAV ==================== */
.bottom-nav,
.bottom-nav-backdrop {
    display: none;
}

/* DL-280 v2: explicit FOUC-defense class. Initial markup has .fouc-hidden;
   JS removes it on auth and adds .visible. Class-based gate replaces the v1
   inline style="display:none" that lost specificity battles with .visible. */
.bottom-nav.fouc-hidden {
    display: none;
}

@media (max-width: 768px) {
    /* Hide top tabs on mobile */
    .tabs-nav {
        display: none !important;
    }

    /* Bottom nav bar — only show after auth (controlled via JS .visible class).
       :not(.fouc-hidden) is a fail-safe: if JS forgets to remove .fouc-hidden,
       nav stays hidden (safe default) instead of flashing pre-auth UI.
       height: calc(60px + env(safe-area-inset-bottom)) ensures the CONTENT area
       stays 60px even with box-sizing:border-box (padding does not eat into icons).
       On devices with gesture nav (Android ~34px, iOS ~34px), env() adds extra space
       below the icons so they're never clipped when safe-area-inset changes on scroll. */
    .bottom-nav.visible:not(.fouc-hidden) {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        background: white;
        border-top: 1px solid var(--gray-200);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
        z-index: 950;
        align-items: stretch;
        justify-content: space-around;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: var(--gray-600);
        cursor: pointer;
        position: relative;
        transition: color var(--transition-fast);
        padding: var(--sp-1) 0;
        -webkit-tap-highlight-color: transparent;
        font-family: inherit;
    }

    .bottom-nav-item svg {
        width: 22px;
        height: 22px;
    }

    .bottom-nav-item > span:not(.bottom-nav-badge) {
        font-size: 10px;
        line-height: 1.2;
        font-weight: 500;
    }

    .bottom-nav-item.active {
        color: var(--brand-600);
    }

    .bottom-nav-badge {
        position: absolute;
        top: 4px;
        right: calc(50% - 14px);
        width: 8px;
        height: 8px;
        min-width: 0;
        padding: 0;
        border-radius: var(--radius-full);
        background: var(--danger-500);
        font-size: 0;
        color: transparent;
        line-height: 0;
        display: inline-block;
    }

    /* Upward popovers */
    .bottom-nav-popover {
        display: none;
        position: absolute;
        bottom: 64px;
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        min-width: 180px;
        padding: var(--sp-1) 0;
        z-index: 951;
        animation: floatInUp 120ms ease-out;
    }

    .bottom-nav-popover.open {
        display: block;
    }

    .bottom-nav-popover button {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        width: 100%;
        padding: var(--sp-3) var(--sp-4);
        border: none;
        background: none;
        text-align: start;
        cursor: pointer;
        font-size: var(--text-sm);
        color: var(--gray-700);
        white-space: nowrap;
        font-family: inherit;
        position: relative;
    }

    .bottom-nav-popover button:active {
        background: var(--gray-50);
    }

    .bottom-nav-popover-badge {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: var(--radius-full);
        background: var(--danger-500);
        color: white;
        font-size: 10px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-inline-start: auto;
    }

    @keyframes floatInUp {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Backdrop for popovers */
    .bottom-nav-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 949;
        background: transparent;
    }

    /* Content padding to avoid bottom nav overlap.
       Must account for full nav height: 60px content + safe-area-inset + 12px gap. */
    .content {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Floating bulk bar moves above bottom nav */
    .floating-bulk-bar {
        bottom: calc(60px + var(--sp-3) + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ==================== MOBILE PREVIEW MODAL ==================== */
.mobile-preview-panel {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mobile-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 600;
    border-bottom: 1px solid var(--gray-200);
    flex-shrink: 0;
    gap: var(--sp-2);
    min-height: 48px;
}

.mobile-preview-header .preview-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.mobile-preview-actions {
    display: flex;
    gap: var(--sp-1);
    align-items: center;
    flex-shrink: 0;
}

.mobile-preview-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    flex-shrink: 0;
}

.mobile-preview-nav .btn {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-preview-nav .btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.mobile-preview-counter {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-600);
    min-width: 60px;
    text-align: center;
}

.mobile-preview-body {
    flex: 1;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mobile-preview-body .preview-iframe {
    flex: 1;
    width: 100%;
    border: none;
}

.mobile-preview-body .preview-loading,
.mobile-preview-body .preview-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    color: var(--gray-500);
    padding: var(--sp-5);
}

.mobile-preview-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--gray-200);
    padding: var(--sp-3) var(--sp-4);
    background: var(--gray-50);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-height: 40vh;
    overflow-y: auto;
}

.mobile-preview-client {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-800);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--sp-2);
}

.mobile-preview-footer .ai-classification-result {
    font-size: var(--text-sm);
}

.mobile-preview-footer .ai-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.mobile-preview-footer .ai-card-actions .btn {
    width: 100%;
}

.mobile-preview-footer .ai-assign-section {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.mobile-preview-footer .ai-assign-section select,
.mobile-preview-footer .ai-assign-section .doc-combobox-container {
    width: 100%;
}

.mobile-preview-footer .ai-validation-area {
    margin-bottom: var(--sp-2);
}

.mobile-preview-footer .ai-validation-options {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.mobile-preview-footer .ai-comparison-radio {
    font-size: var(--text-sm);
}

/* ========================================================================
   DL-214: Mobile Table → Card Layout
   ======================================================================== */

/* --- Card list (hidden on desktop, shown at ≤768px) --- */
.mobile-card-list {
    display: none;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-2);
}

.mobile-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.mobile-card-primary {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3) var(--sp-2);
}

.mobile-card-primary .mobile-card-checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-card-primary .mobile-card-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.mobile-card-primary .mobile-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.mobile-card-primary .mobile-card-name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--gray-900);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.mobile-card-primary .mobile-card-name:hover {
    color: var(--brand-600);
}

.mobile-card-primary .stage-badge {
    font-size: var(--text-xs);
    flex-shrink: 0;
}

.mobile-card-primary .waiting-badge {
    font-size: var(--text-xs);
    flex-shrink: 0;
}

.mobile-card-primary .fifo-number {
    font-weight: 700;
    color: var(--gray-500);
    font-size: var(--text-xs);
    flex-shrink: 0;
}

.mobile-card-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: 0 var(--sp-3) var(--sp-2);
    font-size: var(--text-xs);
    color: var(--gray-600);
}

.mobile-card-secondary .docs-progress-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.mobile-card-secondary .docs-progress-cell .progress-bar {
    width: 48px;
    height: 6px;
}

.mobile-card-secondary .email-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.mobile-card-secondary .email-link {
    font-size: var(--text-xs);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-card-secondary .mobile-card-detail {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

.mobile-card-secondary .mobile-card-detail .label {
    color: var(--gray-600);
}

.mobile-card-secondary .notes-text {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: italic;
    color: var(--gray-500);
}

.mobile-card-secondary .reminder-date {
    font-size: var(--text-xs);
}

.mobile-card-secondary .reminder-date-due {
    color: var(--red-600);
    font-weight: 600;
}

.mobile-card-secondary .reminder-date-soon {
    color: var(--orange-600);
    font-weight: 600;
}

.mobile-card-secondary .reminder-max-cell {
    font-size: var(--text-xs);
}

.mobile-card-secondary .reminder-status-btn {
    font-size: var(--text-xs);
    padding: var(--sp-1) var(--sp-2);
}

.mobile-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.mobile-card-actions .action-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-card-actions .row-overflow-dropdown {
    position: relative;
}

.mobile-card-actions .reminder-status-dropdown {
    position: relative;
}

/* Questionnaire detail expansion inside card */
.mobile-card .qa-card-detail {
    display: none;
    padding: var(--sp-3);
    border-top: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.mobile-card .qa-card-detail.open {
    display: block;
}

/* Suppressed reminder card */
.mobile-card.reminder-card-suppressed {
    opacity: 0.6;
}

/* --- Collapsible filter bar (mobile only) --- */
.filters-mobile-bar {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: var(--sp-2);
}

.filters-mobile-bar .filter-bar-icon {
    color: var(--gray-500);
}

.filters-mobile-bar .filter-bar-label {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--gray-600);
}

.filters-mobile-bar .filter-bar-count {
    background: var(--brand-600);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.filters-mobile-bar .filter-bar-count:empty {
    display: none;
}

.filters-mobile-bar .filter-bar-chevron {
    color: var(--gray-400);
    transition: transform 0.2s ease;
}

.filters-mobile-bar.expanded .filter-bar-chevron {
    transform: rotate(180deg);
}

/* --- Media queries: toggle table ↔ cards at 768px --- */
@media (max-width: 768px) {
    /* Show card lists, hide tables inside scroll containers */
    .table-scroll-container > table {
        display: none;
    }

    .mobile-card-list {
        display: flex;
    }

    /* Show mobile filter bar, hide desktop filters */
    .filters-mobile-bar {
        display: flex;
    }

    .filters.filters-mobile-hidden {
        display: none;
    }

    /* When filters are expanded on mobile */
    .filters.filters-mobile-visible {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: var(--sp-2);
    }
}

@media (min-width: 769px) {
    /* Ensure desktop always shows tables and hides cards */
    .mobile-card-list {
        display: none !important;
    }

    .filters-mobile-bar {
        display: none !important;
    }

    .filters.filters-mobile-hidden {
        display: flex !important;
    }
}

/* Hide chat widget until authenticated (it lives outside #app).
   DL-280 v2: migrated from `.app.visible ~ #chatWidget` sibling combinator to
   explicit `.visible` class for consistency with bottom nav and to remove
   implicit DOM-ordering dependency (DL-257 flagged this pattern as fragile). */
#chatWidget {
    display: none;
}

#chatWidget.visible {
    display: block;
}

/* ==================== ENTITY TABS ==================== */
.entity-tabs {
    display: flex;
    gap: var(--sp-1);
}

.entity-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1-5, 6px);
    padding: 4px var(--sp-2);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gray-500);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    font-family: inherit;
}

.entity-tab.active {
    background: var(--brand-50);
    color: var(--brand-700);
}

.entity-tab:not(.active):hover {
    color: var(--gray-700);
    background: var(--gray-100);
}

/* Mobile entity segmented control */
.entity-toggle-mobile {
    display: none;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    width: 100%;
}

.entity-toggle-btn {
    flex: 1;
    padding: var(--sp-2) var(--sp-3);
    border: none;
    background: white;
    color: var(--gray-600);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    transition: all 0.15s ease;
    font-family: inherit;
}

.entity-toggle-btn.active {
    background: var(--brand-600);
    color: white;
}

.entity-toggle-btn:not(.active):hover {
    background: var(--gray-50);
}

/* Navbar entity toggle (mobile only) */
.entity-toggle-navbar {
    display: none;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.entity-nav-btn {
    padding: var(--sp-1) var(--sp-3);
    border: none;
    background: white;
    color: var(--gray-500);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
}

.entity-nav-btn.active {
    background: var(--brand-600);
    color: white;
}

.entity-nav-btn:not(.active):hover {
    background: var(--gray-50);
}

/* Desktop: show entity-tabs, hide mobile toggles */
@media (min-width: 769px) {
    .entity-toggle-mobile {
        display: none !important;
    }
    .entity-toggle-navbar {
        display: none !important;
    }
}

/* Mobile: hide entity-tabs, show mobile toggles */
@media (max-width: 768px) {
    .entity-tabs {
        display: none !important;
    }

    .entity-toggle-mobile {
        display: flex;
        margin-bottom: var(--sp-2);
    }

    .entity-toggle-navbar {
        display: flex;
    }
}

/* ---- PDF Split Modal (DL-237) ---- */

#aiSplitModal .ai-modal-panel {
    max-width: 800px;
}

.split-page-info {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary, #6b7280);
    margin-right: 8px;
}

.split-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.split-mode-tab {
    padding: 8px 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--bg-secondary, #f9fafb);
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.15s;
}

.split-mode-tab.active {
    background: var(--brand-color, #4f46e5);
    color: #fff;
    border-color: var(--brand-color, #4f46e5);
}

.split-mode-tab:hover:not(.active) {
    border-color: var(--brand-color, #4f46e5);
}

.split-manual-input {
    margin-bottom: 16px;
}

.split-manual-input .form-control {
    font-family: 'Inter', monospace;
    direction: ltr;
    text-align: left;
}

.split-thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.split-thumb-wrapper {
    position: relative;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    padding: 4px;
    transition: all 0.15s;
    text-align: center;
    background: #fff;
}

.split-thumb-wrapper img {
    display: block;
    margin: 0 auto;
    border-radius: 3px;
}

.split-thumb-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-top: 4px;
}

.split-thumb-group-label {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.split-result-preview {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--bg-secondary, #f0fdf4);
    border-radius: 6px;
    text-align: center;
}

.split-preview-count {
    font-weight: 600;
    color: var(--success-color, #16a34a);
}

.split-loading,
.split-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary, #6b7280);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.split-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200, #e5e7eb);
    border-top-color: var(--brand-color, #4f46e5);
    border-radius: 50%;
    animation: split-spin 0.8s linear infinite;
}

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

.split-error {
    color: var(--danger-color, #dc2626);
}

/* DL-250: Split progress UI */
.split-progress-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.split-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--gray-200, #e5e7eb);
    border-radius: 999px;
    overflow: hidden;
}
.split-progress-fill {
    height: 100%;
    background: var(--brand-color, #4f46e5);
    border-radius: 999px;
    transition: width 0.4s ease;
    width: 0%;
}
.split-progress-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap;
}
.split-progress-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.split-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
}
.split-step.active {
    background: var(--brand-50, #eef2ff);
    border-color: var(--brand-200, #c7d2fe);
}
.split-step.done {
    background: var(--bg-secondary, #f0fdf4);
    border-color: var(--success-200, #bbf7d0);
}
.split-step.failed {
    background: #fef2f2;
    border-color: #fecaca;
}
.split-step-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.split-step-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--gray-200, #e5e7eb);
    border-top-color: var(--brand-color, #4f46e5);
    border-radius: 50%;
    animation: split-spin 0.8s linear infinite;
}
.split-step-name {
    flex: 1;
    font-weight: 500;
}
.split-step-detail {
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
}

.ai-split-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-5);
    background: transparent;
    border-top: none;
    font-size: 13px;
}

.ai-split-btn {
    border-color: var(--brand-color, #4f46e5) !important;
    color: var(--brand-color, #4f46e5) !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.ai-split-btn:hover {
    background: var(--brand-color, #4f46e5) !important;
    color: #fff !important;
}

/* ==================== PARTIAL CONTRACT PERIOD BANNER (DL-268) ==================== */

.ai-contract-period-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-5);
    background: #fffbeb;
    border-top: 1px solid #f59e0b33;
    font-size: 13px;
    color: #92400e;
}
.ai-contract-period-banner .period-label {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap;
    flex-shrink: 0;
}
.ai-contract-period-banner .btn {
    white-space: nowrap;
    flex-shrink: 0;
    border-color: #f59e0b !important;
    color: #92400e !important;
}
.ai-contract-period-banner .btn:hover {
    background: #f59e0b !important;
    color: #fff !important;
}
.ai-contract-period-banner .btn:disabled {
    opacity: 0.6;
    pointer-events: none;
}
.contract-date-editable {
    cursor: pointer;
    border-bottom: 1px dashed #92400e;
    padding: 0 2px;
    font-weight: 600;
    transition: background 0.15s;
}
.contract-date-editable:hover {
    background: #fef3c7;
    border-radius: 2px;
}
.contract-date-input {
    width: 130px;
    font-size: 12px;
    padding: 1px 4px;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    background: #fff;
    color: #92400e;
    font-family: inherit;
}

/* ==================== SPLIT PAGE PREVIEW LIGHTBOX (DL-246) ==================== */

/* Overlay — sits above split modal */
.split-preview-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
}

.split-preview-overlay.show {
    display: flex;
}

/* Container */
.split-preview-container {
    display: flex;
    flex-direction: column;
    max-width: 90vw;
    max-height: 90vh;
    width: 100%;
    gap: 12px;
}

/* Header */
.split-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    color: #fff;
    font-size: 15px;
}

.split-preview-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}

.split-preview-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Body — nav arrows + image */
.split-preview-body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.split-preview-nav {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 12px 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.split-preview-nav:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Image container — overflow hidden for zoom/pan */
.split-preview-img-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    min-height: 300px;
    max-height: calc(90vh - 120px);
    cursor: grab;
    position: relative;
}

.split-preview-img-container.dragging {
    cursor: grabbing;
}

.split-preview-img-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.15s ease;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
}

/* Zoom controls */
.split-preview-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 0;
}

.split-preview-controls button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}

.split-preview-controls button:hover {
    background: rgba(255, 255, 255, 0.25);
}

#splitPreviewZoomLevel {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    min-width: 48px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Thumbnail hover magnify icon */
.split-thumb-wrapper {
    cursor: zoom-in;
}

.split-thumb-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.split-thumb-zoom svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.split-thumb-wrapper:hover .split-thumb-zoom {
    opacity: 1;
}

/* ==================== REJECTED UPLOADS ARCHIVE (ru-) ==================== */
.rejected-uploads-list {
    padding: var(--sp-2) 0;
}
.ru-empty {
    font-size: var(--text-sm);
    color: var(--gray-400);
    padding: var(--sp-3) 0;
    text-align: center;
}
.ru-entry {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    font-size: var(--text-sm);
}
.ru-entry + .ru-entry {
    border-top: 1px solid var(--gray-100);
}
.ru-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--danger-400, #f87171);
}
.ru-body {
    flex: 1;
    min-width: 0;
}
.ru-meta {
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
.ru-filename {
    font-weight: 600;
    color: var(--gray-800);
    word-break: break-all;
}
.ru-date {
    font-size: var(--text-xs);
    color: var(--gray-500);
    white-space: nowrap;
}
.ru-detail {
    font-size: var(--text-xs);
    color: var(--gray-600);
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.ru-reason {
    font-style: italic;
}
.ru-notes {
    color: var(--gray-500);
}
.ru-actions {
    flex-shrink: 0;
    display: flex;
    gap: var(--sp-1);
    opacity: 0;
    transition: opacity 0.15s;
}
.ru-entry:hover .ru-actions {
    opacity: 1;
}
.ru-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-400);
    padding: 2px;
    border-radius: var(--radius-sm);
    transition: color 0.15s;
}
.ru-delete:hover {
    color: var(--danger-600, #dc2626);
}

/* DL-306: Pre-uploaded docs info banner (info variant of rejected-uploads callout) */
.preuploaded-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    background: var(--info-50, #eff6ff);
    border-inline-start: 3px solid var(--info-500, #2563eb);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--info-700, #1d4ed8);
}
.preuploaded-banner [data-lucide="info"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--info-500, #2563eb);
}
.preuploaded-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.preuploaded-banner__text strong {
    color: var(--info-700, #1d4ed8);
    font-weight: 600;
}
.preuploaded-banner__text span {
    font-size: var(--text-xs);
    color: var(--gray-600);
}
.preuploaded-banner__btn {
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* DL-256: Pagination bar */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.pagination-info {
    font-size: 0.85rem;
    color: var(--gray-500);
    white-space: nowrap;
}
.pagination-buttons {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
}
.pagination-btn {
    padding: 4px 10px;
    border: 1px solid var(--gray-200);
    background: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--gray-700);
    transition: all 0.15s;
    min-width: 32px;
    text-align: center;
}
.pagination-btn:hover:not([disabled]):not(.active) {
    background: var(--gray-100);
    border-color: var(--gray-300);
}
.pagination-btn.active {
    background: var(--primary-600, #2563eb);
    color: #fff;
    border-color: var(--primary-600, #2563eb);
    font-weight: 600;
}
.pagination-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.pagination-ellipsis {
    padding: 4px 6px;
    color: var(--gray-400);
    font-size: 0.85rem;
}
@media (max-width: 640px) {
    .pagination-bar { flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); }
    .pagination-buttons { justify-content: center; }
}

/* DL-255: Skip rendering off-screen table rows (browser-native optimization) */
#clientsTableContainer tbody tr,
#questionnaireTableContainer tbody tr,
#reminderTableContainer tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: 0 48px;
}

/* ============================================================
   DL-292: Review & Approve Queue Tab — .pa-* styles
   ============================================================ */

/* Card variant — amber stage-3 accent border */
.pa-card {
    border-inline-start: 3px solid #F59E0B;
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.pa-card:hover {
    border-inline-start-color: #D97706;
}

.pa-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.pa-card__name {
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--gray-900);
}

.pa-card__meta {
    display: flex;
    gap: var(--sp-2);
    font-size: var(--text-xs);
    color: var(--gray-400);
    flex-shrink: 0;
}

.pa-card__chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
}

.pa-card__notes {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-bottom: var(--sp-2);
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.pa-card__prior-year {
    font-size: var(--text-xs);
    color: var(--gray-400);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: 4px;
}

.pa-card__actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}

/* Chips */
.pa-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.pa-chip--answer {
    background: var(--info-50, #EFF6FF);
    color: var(--info-700, #1D4ED8);
}

.pa-chip--doc {
    background: var(--gray-100);
    color: var(--gray-700);
}

.pa-chip--more {
    background: var(--gray-200);
    color: var(--gray-500);
}

.pa-chip--placeholder {
    background: var(--gray-100);
    color: var(--gray-400);
}

/* DL-293: AI issuer-name suggestion chip on pa-card */
.pa-card__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
}
.pa-suggest-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--primary-300, #93C5FD);
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #EEF4FF 0%, #F5F0FF 100%);
    color: var(--primary-800, #1E40AF);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
    white-space: nowrap;
}
.pa-suggest-chip:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.18);
}
.pa-suggest-chip strong {
    font-weight: 700;
}
.pa-suggest-chip__check {
    font-weight: 700;
    color: var(--success-700, #15803D);
    margin-inline-start: 2px;
}
.pa-suggest-chip--applying {
    opacity: 0.6;
    cursor: progress;
}
.pa-suggest-chip--accepted {
    opacity: 0;
    transform: scale(0.9);
}
.pa-suggest-all {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: none;
    background: transparent;
    color: var(--primary-700, #1D4ED8);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.pa-suggest-all:hover { color: var(--primary-900, #1E3A8A); }

.pa-chip--status-received {
    background: var(--success-50, #F0FDF4);
    color: var(--success-700, #15803D);
}

.pa-chip--status-required_missing,
.pa-chip--status-required-missing {
    background: var(--danger-50, #FEF2F2);
    color: var(--danger-700, #B91C1C);
}

.pa-chip--status-requires_fix,
.pa-chip--status-requires-fix {
    background: var(--warning-50, #FFFBEB);
    color: var(--warning-700, #B45309);
}

/* Questions badge on card button */
.pa-questions-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-500, #6366F1);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    padding: 0 4px;
    margin-inline-start: 4px;
}

/* Approve button */
.pa-btn-approve {
    background: var(--success-500, #22C55E);
    color: white;
    border: none;
}

.pa-btn-approve:hover {
    background: var(--success-600, #16A34A);
}

/* Questions button */
.pa-btn-questions {
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
}

.pa-btn-questions:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

/* Card slide-out on approve — DL-304 follow-up: transition-based (not keyframe)
   so we can lock the card's actual height via inline maxHeight first, matching
   the AI-review pattern. Works for expanded cards that exceed a fixed keyframe. */
.pa-card {
    transition: opacity 300ms ease, transform 300ms ease,
                max-height 350ms ease, margin 350ms ease, padding 350ms ease;
}
.pa-card--sending {
    opacity: 0;
    transform: translateX(-40px);
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    pointer-events: none;
}

/* ---- Preview panel: header + scroll body + sticky footer (DL-294) ---- */

.pa-preview-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: white;
}

/* Header — sticky-feeling anchor with client identity + stats */
.pa-preview-header {
    flex-shrink: 0;
    padding: var(--sp-4) var(--sp-5) var(--sp-3);
    border-bottom: 1px solid var(--gray-100);
    background: linear-gradient(to bottom, var(--gray-50), white);
}

.pa-preview-header-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: 4px;
}

.pa-preview-client-name {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa-preview-client-id {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.pa-preview-header-meta {
    font-size: var(--text-xs);
    color: var(--gray-500);
    margin-bottom: var(--sp-3);
}

.pa-preview-stats {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.pa-preview-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-700);
    background: var(--gray-100);
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

.pa-preview-stat--empty {
    opacity: 0.4;
}

/* Scroll region — the middle of the panel */
.pa-preview-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-5);
}

/* Sticky footer with primary CTAs */
.pa-preview-sticky-footer {
    flex-shrink: 0;
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--gray-100);
    background: white;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.03);
}

.pa-preview-sticky-footer .pa-btn-approve {
    flex: 2;
    justify-content: center;
    font-weight: 600;
}

.pa-preview-sticky-footer .pa-btn-questions {
    flex: 1;
    justify-content: center;
}

/* DL-295: 2-column split (Q&A | Docs) on desktop, stacked on narrow viewports */
.pa-preview-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: start;
    margin-bottom: var(--sp-4);
}
.pa-preview-col { min-width: 0; }
.pa-preview-col .pa-preview-section { margin-bottom: var(--sp-4); }
@media (max-width: 1023px) {
    .pa-preview-cols { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* DL-295: master card priority age badge */
.pa-card__priority {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
/* DL-406: unified aging palette (replaces DL-295 --med / --high modifiers).
   aging-fresh: badge hidden by JS; aging-day1: yellow; aging-aging: red;
   aging-stale: dark slate. Day count text remains for screen readers. */
.pa-card__priority.aging-day1 {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.pa-card__priority.aging-aging {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.pa-card__priority.aging-stale {
    background: #1f2937;
    color: #f9fafb;
    border: 1px solid #374151;
}

/* DL-406: AI Review card aging — subtle bg tint that doesn't conflict with the
   match-quality border-inline-start signal already used on .match-full /
   .match-fuzzy / .match-issuer-mismatch / .match-unmatched. */
.ai-review-card.aging-day1 { background: #fefce8; }
.ai-review-card.aging-aging { background: #fef2f2; }
.ai-review-card.aging-stale { background: #f3f4f6; box-shadow: inset 3px 0 0 var(--gray-700, #374151); }

/* DL-295: clickable doc-name in PA preview */
.pa-doc-tag-clickable {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background 0.12s ease;
}
.pa-doc-tag-clickable:hover {
    background: var(--gray-100, #f3f4f6);
}
.pa-doc-tag-clickable.ai-doc-tag-active {
    background: var(--gray-200, #e5e7eb);
}

/* Sections inside the scroll region */
.pa-preview-section {
    margin-bottom: var(--sp-6);
}

.pa-preview-section-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--gray-100);
}

.pa-preview-subsection {
    margin-bottom: var(--sp-3);
}

.pa-preview-subtitle {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: var(--sp-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Yes-answer chips grid — dense visual of "yes" answers */
.pa-yes-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pa-yes-chip {
    display: inline-block;
    background: var(--success-50, #F0FDF4);
    color: var(--success-700, #15803D);
    border: 1px solid var(--success-100, #DCFCE7);
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
}

.pa-yes-chip--no {
    background: var(--gray-50);
    color: var(--gray-500);
    border-color: var(--gray-200);
}

/* "Show No answers" toggle */
.pa-preview-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--gray-500);
    font-size: var(--text-xs);
    cursor: pointer;
    padding: 4px 0;
}

.pa-preview-toggle:hover {
    color: var(--gray-700);
}

/* Q&A free-text rows */
.pa-preview-qa {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pa-preview-qa-row {
    display: flex;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    padding: 6px 0;
    border-bottom: 1px solid var(--gray-50);
}

.pa-preview-qa-row:last-child {
    border-bottom: none;
}

.pa-preview-qa-label {
    font-weight: 500;
    color: var(--gray-600);
    min-width: 160px;
    flex-shrink: 0;
}

.pa-preview-qa-value {
    color: var(--gray-900);
    flex: 1;
    white-space: pre-wrap; /* DL-299 followup: preserve client-entered newlines (multi-employer list) */
    word-break: break-word;
}

/* Doc list — per-person / per-category tree */
.pa-preview-person-section {
    margin-bottom: var(--sp-4);
}

.pa-preview-person-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--sp-2);
    padding: 4px 0;
}

.pa-preview-category {
    margin-bottom: var(--sp-3);
    padding-inline-start: var(--sp-3);
    border-inline-start: 2px solid var(--gray-100);
}

.pa-preview-category-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.pa-preview-doc-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--gray-700);
    padding: 3px 0;
}

.pa-preview-doc-name {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    white-space: normal; /* DL-299 followup: wrap long template names instead of truncating */
}

.pa-preview-doc-name b {
    color: var(--gray-900);
    font-weight: 600;
}

/* Notes card */
.pa-preview-notes {
    font-size: var(--text-sm);
    color: var(--gray-700);
    white-space: pre-wrap;
    background: var(--gray-50);
    border-inline-start: 3px solid var(--brand-400, #818CF8);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    line-height: 1.5;
}

/* Questions for client */
.pa-preview-question {
    display: flex;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    margin-bottom: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

.pa-preview-qnum {
    font-weight: 700;
    color: var(--brand-500, #6366F1);
    flex-shrink: 0;
}

.pa-preview-answer {
    color: var(--gray-500);
    font-style: italic;
    margin-top: 4px;
    font-size: var(--text-xs);
}

.pa-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--gray-400);
    padding: var(--sp-6);
}

/* Questions modal items */
.pa-question-item {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--gray-100);
}

.pa-question-item:last-of-type {
    border-bottom: none;
}

.pa-question-num {
    font-weight: 700;
    color: var(--gray-500);
    font-size: var(--text-sm);
    padding-top: 6px;
    flex-shrink: 0;
    min-width: 18px;
}

.pa-question-input {
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-sm);
    resize: vertical;
    font-family: inherit;
}

.pa-question-answer {
    font-size: var(--text-xs);
    color: var(--gray-400);
    font-style: italic;
    margin-top: 4px;
}

/* ============================================================
   DL-298: Stacked full-width PA cards (replaces master/preview split)
   ============================================================ */
.pa-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
}
.pa-stack-pagination {
    padding: var(--sp-3) 0;
}
.pa-card--stack {
    background: white;
    border: 1px solid var(--gray-200);
    border-inline-start: 3px solid #F59E0B;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    padding: var(--sp-3) var(--sp-4);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
    max-width: none;
    margin: 0;
    cursor: default;
}
.pa-card--stack:hover {
    border-inline-start-color: #D97706;
}
.pa-card--stack .pa-card__header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: 0;
    cursor: pointer;
    padding: 4px 0;
}
/* DL-299 followup: pin the card header just below the admin navbar (56px) while scrolling a tall expanded body */
.pa-card--expanded .pa-card__header {
    padding-block: var(--sp-2);
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: var(--sp-3);
    position: sticky;
    top: 56px;
    background: white;
    z-index: 20;
}
@media (max-width: 768px) {
    .pa-card--expanded .pa-card__header {
        top: 48px; /* compact navbar on mobile */
    }
}
.pa-card__header-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-3);
}
.pa-card__header-badges {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.pa-card__header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}
.pa-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.pa-count-badge--suggest {
    background: #fef3c7;
    color: #92400e;
}
.pa-card__chevron {
    background: transparent;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: background var(--transition-base);
}
.pa-card__chevron:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}
.pa-card__body {
    animation: pa-card-fade-in 160ms ease-out;
}
@keyframes pa-card-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Inside a stacked card, the 2-col Q&A | Docs grid (DL-295) is reused as-is */
.pa-card__body .pa-preview-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
    align-items: start;
}
@media (max-width: 1023px) {
    .pa-card__body .pa-preview-cols {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }
}

/* Inline ✨ issuer suggestion chip, placed at the end of a doc row */
.pa-doc-row__suggest {
    margin-inline-start: var(--sp-2);
    vertical-align: middle;
}

/* Mobile header: stack main row above badges/actions */
@media (max-width: 640px) {
    .pa-card--stack {
        padding: var(--sp-3);
    }
    .pa-card--stack .pa-card__header {
        flex-wrap: wrap;
    }
    .pa-card__header-main {
        flex: 1 1 100%;
    }
    .pa-card__header-badges {
        flex: 1 1 auto;
    }
}

/* ============================================================
   DL-299: Per-doc issuer edit, note popover, questionnaire print
   ============================================================ */

/* Doc row actions (pencil + note icon) — hover-reveal on desktop, always visible on mobile */
.pa-doc-row__actions {
    display: inline-flex;
    gap: 4px;
    margin-inline-start: auto;
    align-items: center;
}
.pa-preview-doc-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.pa-doc-row__edit,
.pa-doc-row__note {
    background: transparent;
    border: 1px solid transparent;
    color: var(--gray-400);
    cursor: pointer;
    padding: 3px 5px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: opacity 120ms, background 120ms, color 120ms, border-color 120ms;
}
.pa-preview-doc-row:hover .pa-doc-row__edit,
.pa-preview-doc-row:hover .pa-doc-row__note,
.pa-preview-doc-row:focus-within .pa-doc-row__edit,
.pa-preview-doc-row:focus-within .pa-doc-row__note {
    opacity: 1;
}
.pa-doc-row__edit:hover,
.pa-doc-row__note:hover {
    background: var(--gray-100);
    color: var(--gray-800);
    border-color: var(--gray-200);
}
.pa-doc-row__note--has-content {
    opacity: 1 !important;
    color: #d97706;
}
.pa-doc-row__note--has-content:hover {
    color: #b45309;
}
@media (max-width: 768px) {
    .pa-doc-row__edit,
    .pa-doc-row__note {
        opacity: 1;
    }
}

/* Inline issuer edit row */
.pa-issuer-edit-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    flex: 1;
}
.pa-issuer-edit-input {
    flex: 1;
    min-width: 120px;
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-family: inherit;
    direction: auto;
    /* DL-304 follow-up: long doc names must wrap, not scroll */
    resize: vertical;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
}
.pa-issuer-edit-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.pa-issuer-edit-save,
.pa-issuer-edit-cancel,
.pa-issuer-swap-toggle {
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 4px 6px;
    font-size: var(--text-xs);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pa-issuer-edit-save {
    background: var(--success-500, #10b981);
    color: white;
    border-color: var(--success-500, #10b981);
}
.pa-issuer-edit-save:hover { background: #059669; }
.pa-issuer-edit-cancel:hover { background: var(--gray-100); }
.pa-issuer-swap-toggle:hover { background: var(--gray-100); color: var(--gray-800); }

/* Issuer swap combobox */
.pa-issuer-swap-combo {
    margin-top: 6px;
    padding: 6px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    width: 100%;
}
.pa-issuer-swap-filter {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    margin-bottom: 6px;
    direction: rtl;
}
.pa-issuer-swap-list {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pa-issuer-swap-option {
    background: transparent;
    border: none;
    text-align: start;
    padding: 4px 8px;
    font-size: var(--text-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--gray-700);
}
.pa-issuer-swap-option:hover {
    background: var(--primary-50, #eef2ff);
    color: var(--primary-700, #4338ca);
}
.pa-issuer-swap-empty {
    font-size: var(--text-xs);
    color: var(--gray-400);
    padding: 6px;
    text-align: center;
}

/* Note popover */
.pa-note-popover {
    position: fixed;
    width: 300px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    padding: var(--sp-3);
    z-index: 1100;
}
.pa-note-popover textarea {
    width: 100%;
    min-height: 100px;
    padding: 6px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    resize: vertical;
    direction: rtl;
}
.pa-note-popover textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.pa-note-popover-hint {
    font-size: 10px;
    color: var(--gray-400);
    margin-top: 4px;
    text-align: start;
}

/* DL-301: PA card add-doc row + popover */
.pa-preview-doc-row--add {
    border: 1px dashed var(--gray-300);
    background: transparent;
    color: var(--gray-500);
    font-size: 12px;
    margin-top: var(--sp-2);
    cursor: pointer;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border-radius: var(--radius-sm);
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.pa-preview-doc-row--add:hover,
.pa-preview-doc-row--add:focus-visible {
    background: var(--gray-50);
    color: var(--primary-600);
    border-color: var(--primary-300);
    outline: none;
}
.pa-add-doc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid currentColor;
}
.pa-add-doc-label {
    font-weight: 500;
}

.pa-add-doc-popover {
    position: absolute;
    direction: rtl;
    text-align: right;
    width: 340px;
    max-height: 480px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.12), 0 4px 6px -4px rgba(0,0,0,0.1);
    padding: var(--sp-3);
    padding-top: 32px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.pa-add-doc-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}
.pa-add-doc-close {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.pa-add-doc-close:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}
.pa-add-doc-close:focus-visible {
    outline: 2px solid var(--primary-400, #818cf8);
    outline-offset: 1px;
}
.pa-add-doc-popover .pa-add-doc-loading,
.pa-add-doc-popover .pa-add-doc-error,
.pa-add-doc-popover .pa-add-doc-empty {
    color: var(--gray-500);
    font-size: var(--text-sm);
    padding: var(--sp-3);
    text-align: center;
}
.pa-add-doc-popover .pa-add-doc-error { color: var(--danger-600); }

.pa-add-doc-person {
    display: flex;
    gap: 4px;
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid var(--gray-100);
}
.pa-add-doc-person-btn {
    flex: 1;
    padding: 4px 8px;
    font-size: 11px;
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-600);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pa-add-doc-person-btn.active {
    background: var(--primary-50, #eef2ff);
    color: var(--primary-700, #4338ca);
    border-color: var(--primary-300, #a5b4fc);
}

.pa-add-doc-search {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    direction: rtl;
}
.pa-add-doc-search:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.pa-add-doc-list {
    flex: 1 1 auto;
    min-height: 80px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
}
.pa-add-doc-cat {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500);
    background: var(--gray-50);
    position: sticky;
    top: 0;
}
.pa-add-doc-option {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--gray-700);
    cursor: pointer;
    border-bottom: 1px solid var(--gray-50);
}
.pa-add-doc-option:hover {
    background: var(--primary-50, #eef2ff);
    color: var(--primary-700, #4338ca);
}

.pa-add-doc-divider {
    font-size: 11px;
    color: var(--gray-400);
    text-align: center;
    position: relative;
    margin: var(--sp-1) 0;
}
.pa-add-doc-divider::before,
.pa-add-doc-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    border-top: 1px solid var(--gray-200);
}
.pa-add-doc-divider::before { right: 0; }
.pa-add-doc-divider::after  { left: 0; }

.pa-add-doc-custom {
    display: flex;
    gap: 4px;
}
.pa-add-doc-custom input {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}
.pa-add-doc-custom input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.pa-add-doc-custom-btn {
    padding: 4px 10px;
    border: 1px solid var(--primary-500);
    background: var(--primary-500);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.pa-add-doc-custom-btn:hover {
    background: var(--primary-600);
    border-color: var(--primary-600);
}

.pa-add-doc-warning {
    background: var(--warning-50, #fffbeb);
    color: var(--warning-700, #b45309);
    border: 1px solid var(--warning-200, #fde68a);
    padding: 6px 10px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}

.pa-add-doc-step-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-800);
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 6px;
}

.pa-add-doc-vars {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.pa-add-doc-var-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pa-add-doc-var-row label {
    font-size: 11px;
    color: var(--gray-600);
    font-weight: 500;
}
.pa-add-doc-var-input {
    padding: 6px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}
.pa-add-doc-var-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.pa-add-doc-preview {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: var(--sp-2);
}
.pa-add-doc-preview-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 4px;
}
.pa-add-doc-preview-meta {
    display: flex;
    gap: var(--sp-2);
    font-size: 11px;
    color: var(--gray-500);
}

.pa-add-doc-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    padding-top: 6px;
    border-top: 1px solid var(--gray-100);
}

/* Questionnaire print button in PA card Q&A section title */
.pa-preview-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
.pa-print-btn {
    background: transparent;
    border: 1px solid var(--gray-200);
    color: var(--gray-600);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: background var(--transition-base), color var(--transition-base);
}
.pa-print-btn:hover {
    background: var(--gray-100);
    color: var(--gray-900);
    border-color: var(--gray-300);
}

/* DL-299 follow-up: notes timeline (parsed from JSON communication thread) */
.pa-notes-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.pa-note-row {
    padding: 6px 10px;
    border-inline-start: 3px solid var(--gray-300);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
}
.pa-note-row--office {
    border-inline-start-color: var(--primary-500, #4f46e5);
    background: #eef2ff;
}
.pa-note-row--client {
    border-inline-start-color: #10b981;
    background: #ecfdf5;
}
.pa-note-meta {
    font-size: 10px;
    color: var(--gray-500);
    margin-bottom: 2px;
}
.pa-note-text {
    font-size: var(--text-sm);
    color: var(--gray-800);
    white-space: pre-wrap;
}

/* DL-299 follow-up: minimal non-Missing state styling (Waived/Received rare at this stage) */
.pa-preview-doc-row--waived .pa-preview-doc-name,
.pa-preview-doc-row--waived .pa-doc-row__status-label {
    color: var(--gray-400);
    text-decoration: line-through;
}
.pa-doc-row__status-label {
    font-size: 11px;
    color: var(--gray-500);
    font-style: italic;
}
.pa-doc-row__status-label--received {
    color: var(--success-600, #16a34a);
    font-style: normal;
    display: inline-flex;
    align-items: center;
}

/* DL-302: PA card answer↔doc cross-highlight (brushing & linking).
   Tint matched rows + 3px start-edge accent bar. RTL flips automatically because
   the parent .pa-preview-cols is dir="rtl"; box-shadow inset coordinates are
   left/top in physical space but the bar reads as start-edge in Hebrew. */
.pa-preview-qa-row,
.pa-preview-doc-row {
    cursor: default;
    transition: background 80ms ease, box-shadow 80ms ease;
}
.pa-preview-qa-row[data-template-ids],
.pa-preview-doc-row[data-template-id]:not(.pa-preview-doc-row--orphan) {
    cursor: pointer;
}
.pa-preview-qa-row.pa-link-highlight,
.pa-preview-doc-row.pa-link-highlight {
    background: var(--primary-50, #eef2ff);
    box-shadow: inset 3px 0 0 var(--primary-500, #6366f1);
}
.pa-preview-qa-row:focus-visible,
.pa-preview-doc-row:focus-visible {
    outline: 2px solid var(--primary-400, #818cf8);
    outline-offset: 1px;
}
.pa-preview-doc-row--orphan:hover {
    outline: 1px dashed var(--gray-300, #d1d5db);
    outline-offset: -1px;
}

/* DL-314: "גם תואם ל..." multi-match picker rows */
.ai-also-match-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.ai-also-match-row:hover {
    background: var(--bg-secondary, #F8FAFC);
}
.ai-also-match-row input[type="checkbox"] {
    flex-shrink: 0;
}
.ai-also-match-person {
    font-size: 11px;
    color: var(--text-secondary, #64748B);
    padding: 1px 6px;
    border: 1px solid var(--border-subtle, #E2E8F0);
    border-radius: 999px;
    white-space: nowrap;
}
.ai-also-match-label {
    flex: 1;
    font-size: 13px;
    min-width: 0;
}
.ai-picker-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--primary-50, #eef2ff);
    border: 1px solid var(--primary-200, #c7d2fe);
    border-radius: 6px;
    font-size: 13px;
}
.ai-picker-chip-label { flex: 1; color: var(--primary-700, #4338ca); }
.ai-picker-chip-clear {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 16px; line-height: 1;
    padding: 0 2px;
}
.ai-picker-chip-clear:hover { color: var(--danger-600); }
/* ==================== AI MODAL (React — DL-371 redesign) ==================== */
.ai-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-6, 24px) var(--sp-6, 24px) var(--sp-4, 16px);
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    gap: var(--sp-3, 12px);
}
.ai-modal-title {
    margin: 0;
    font-size: var(--text-lg, 17px);
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    line-height: 1.3;
}
.ai-modal-title-action {
    color: var(--gray-500, #6b7280);
    font-weight: 500;
}
.ai-modal-title-name {
    color: var(--gray-900, #111827);
}
.ai-modal-close {
    background: none;
    border: 0;
    font-size: 18px;
    cursor: pointer;
    color: var(--gray-500, #6b7280);
    line-height: 1;
    padding: 2px 4px;
    border-radius: var(--radius-sm, 4px);
    transition: color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}
.ai-modal-close:hover {
    color: var(--gray-800, #1f2937);
    background: var(--gray-100, #f3f4f6);
}
.ai-modal-body {
    padding: var(--sp-5, 20px) var(--sp-6, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4, 16px);
}
/* Force full-width on all input types — fixes phone/email shrinking to browser default */
.ai-modal-body .form-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: var(--text-sm, 14px);
}
.ai-modal-body input[type="email"],
.ai-modal-body input[type="tel"] {
    direction: ltr;
    text-align: left;
}
/* Label with icon */
.ai-modal-body .form-label {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, 8px);
}
.ai-modal-footer {
    display: flex;
    gap: var(--sp-3, 12px);
    justify-content: flex-start;
    padding: var(--sp-4, 16px) var(--sp-6, 24px) var(--sp-6, 24px);
    border-top: 1px solid var(--gray-100, #f3f4f6);
}
.ai-modal-footer .btn-primary { min-width: 96px; }
.ai-modal-footer .btn-secondary { min-width: 96px; }

/* ============ DL-334 AI Review Cockpit v2 ============ */

/* Pane 3 vertical split: preview (top) + actions panel (bottom).
   Parent `.ai-review-detail` is a grid column in the 3-pane layout (DL-330);
   here we make it a vertical flex column of [preview-frame, actions-panel]. */
.ai-review-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-preview-frame {
    position: relative;
    /* v3.1: flex column so child .preview-iframe's flex:1 actually stretches.
       Without this the iframe falls back to its browser-default intrinsic height (~150px). */
    display: flex;
    flex-direction: column;
    flex: 2; /* v3: preview takes ~65-70% so the PDF is readable */
    min-height: 320px;
    background: var(--white, #fff);
    border: 0.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 10px;
    overflow: hidden;
}

.ai-actions-panel {
    position: relative;
    flex: 1; /* v3: actions panel ~30-35%; long states scroll internally */
    min-height: 240px;
    overflow-y: auto;
    background: var(--white, #fff);
    border: 0.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 8px 10px; /* v3 densified */
    display: flex;
    flex-direction: column;
    gap: 6px; /* v3 densified (8→6) */
    border-inline-start: 3px solid var(--gray-300);
}

.ai-actions-panel--empty      { border-inline-start-color: var(--gray-300); }
.ai-actions-panel--full       { border-inline-start-color: var(--success-500); }
.ai-actions-panel--fuzzy      { border-inline-start-color: var(--success-500); }
.ai-actions-panel--issuer     { border-inline-start-color: var(--warning-500); }
.ai-actions-panel--unmatched  { border-inline-start-color: var(--warning-500); }
.ai-actions-panel--on-hold    { border-inline-start-color: var(--warning-500); }
.ai-actions-panel--approved   { border-inline-start-color: var(--success-500); }
.ai-actions-panel--rejected   { border-inline-start-color: var(--danger-500); }
.ai-actions-panel--reassigned { border-inline-start-color: var(--info-500); }

/* ----- Pane 2 sticky top strip ----- */
.ai-pane2-top {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 30px;
    padding: 4px 8px;
    background: var(--white, #fff);
    border-bottom: 0.5px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ai-pane2-top__counter {
    font-size: 11px;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}
.ai-pane2-top__folder {
    width: 14px;
    height: 14px;
    color: var(--brand-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
}

/* ----- Collapsed section headers (client notes + missing docs) ----- */
.ai-section-header {
    height: 28px;
    padding: 5px 8px;
    font-size: 12px;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: start;
}
.ai-section-header__arrow {
    width: 9px;
    height: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.ai-section-header.open .ai-section-header__arrow {
    transform: rotate(90deg);
}
.ai-section-separator {
    border-bottom: 0.5px solid var(--gray-100);
    margin-bottom: 2px;
}

/* ----- Thin doc rows ----- */
.ai-doc-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 5px 6px;
    font-size: 12px;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.12s ease;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: start;
    user-select: none;
}
.ai-doc-row:hover:not(.active) {
    background: var(--gray-50);
}
.ai-doc-row.active {
    background: var(--brand-50);
}
.ai-doc-row.active .ai-doc-row__filename {
    font-weight: 500;
}
.ai-doc-row__stripe {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--gray-300);
}
.ai-doc-row--state-full      .ai-doc-row__stripe { background: var(--success-500); }
.ai-doc-row--state-fuzzy     .ai-doc-row__stripe { background: var(--success-500); }
.ai-doc-row--state-issuer    .ai-doc-row__stripe { background: var(--warning-500); }
.ai-doc-row--state-unmatched .ai-doc-row__stripe { background: var(--warning-500); }
.ai-doc-row--state-on-hold   .ai-doc-row__stripe { background: var(--warning-500); }
.ai-doc-row--state-approved  .ai-doc-row__stripe { background: var(--success-500); }
.ai-doc-row--state-rejected  .ai-doc-row__stripe { background: var(--danger-500); }
.ai-doc-row--state-reassigned .ai-doc-row__stripe { background: var(--info-500); }

/* DL-340: To-do-list "done" treatment — dim + strikethrough filename on reviewed rows */
.ai-doc-row--state-approved .ai-doc-row__filename,
.ai-doc-row--state-rejected .ai-doc-row__filename,
.ai-doc-row--state-reassigned .ai-doc-row__filename {
    color: var(--gray-500);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
}
.ai-doc-row--state-approved   .ai-doc-row__filename { text-decoration-color: color-mix(in srgb, var(--success-500) 55%, transparent); }
.ai-doc-row--state-rejected   .ai-doc-row__filename { text-decoration-color: color-mix(in srgb, var(--danger-500)  55%, transparent); }
.ai-doc-row--state-reassigned .ai-doc-row__filename { text-decoration-color: color-mix(in srgb, var(--info-500)    55%, transparent); }

/* Active row keeps the strikethrough (state signal) but restores filename color — the row you're looking at shouldn't feel faded */
.ai-doc-row.active.ai-doc-row--state-approved .ai-doc-row__filename,
.ai-doc-row.active.ai-doc-row--state-rejected .ai-doc-row__filename,
.ai-doc-row.active.ai-doc-row--state-reassigned .ai-doc-row__filename {
    color: var(--gray-700);
}

/* DL-340: End-side status chip on reviewed rows — replaces category (filing type) */
.ai-doc-row__status-chip {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    line-height: 1.6;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}
.ai-doc-row__status-chip.chip-approved   { background: var(--success-50); color: var(--success-700); }
.ai-doc-row__status-chip.chip-rejected   { background: var(--danger-50);  color: var(--danger-700); }
.ai-doc-row__status-chip.chip-reassigned { background: var(--info-50);    color: var(--info-700); }

.ai-doc-row__filename {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip; /* JS middle-truncates already */
    /* DL-339: v3.2 used `unicode-bidi: isolate` here paired with dir="auto" on
       the span; that pairing caused pure-Latin filenames to flip the cell's
       alignment in the RTL flex row. The DL-339 rule below (appended at end of
       this section) replaces it with `unicode-bidi: plaintext` + `text-align: start`,
       which isolates the filename text run without hijacking cell alignment. */
}
.ai-doc-row__question-glyph {
    width: 10px;
    font-size: 10px;
    line-height: 1;
    color: var(--info-500);
    cursor: help;
    flex-shrink: 0;
}
.ai-doc-row__category {
    font-size: 11px;
    color: var(--gray-500);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: end;
    /* DL-339: removed v3.2 `unicode-bidi: isolate` — no longer paired with dir="auto"
       on the filename span, so isolation here is unnecessary. */
}
.ai-doc-row--state-on-hold .ai-doc-row__category {
    color: var(--warning-600);
}
.ai-doc-row__flag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning-500);
    flex-shrink: 0;
}

/* ----- Actions panel: header ----- */
.ai-ap-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-ap-header__line1 {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.ai-ap-header__line2 {
    font-size: 11px;
    color: var(--gray-500);
}
.ai-ap-filename {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.ai-ap-lozenge {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.ai-ap-lozenge--approved   { background: var(--success-100); color: var(--success-700); }
.ai-ap-lozenge--rejected   { background: var(--warning-100); color: var(--warning-700); }
.ai-ap-lozenge--reassigned { background: var(--info-100);    color: var(--info-700); }
.ai-ap-lozenge--on-hold    { background: var(--warning-100); color: var(--warning-700); }

.ai-ap-divider {
    padding-top: 4px; /* v3 densified (6→4) */
    border-top: 0.5px solid var(--gray-200);
}

/* ----- Actions panel: body ----- */
.ai-ap-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ai-ap-reasoning-block {
    background: var(--gray-50);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 11px;
    color: var(--gray-700);
    line-height: 1.5;
}
.ai-ap-question-block {
    background: var(--warning-50);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--warning-800);
    line-height: 1.5;
}
.ai-ap-reply-block {
    background: var(--info-50);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--gray-700);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ----- State B: radio list ----- */
.ai-ap-radio-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ai-ap-radio-item {
    padding: 4px 6px;
    font-size: 11px;
    border-radius: 3px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    cursor: pointer;
}
.ai-ap-radio-item:hover {
    background: var(--gray-50);
}
.ai-ap-radio-item.selected {
    color: var(--brand-700);
    background: var(--brand-50);
}

/* ----- State D: combobox -----
   DL-339 v1.8: this is the outer container .doc-combobox-container .ai-ap-combobox.
   initAIReviewComboboxes injects the real <div class="doc-combobox"><input
   class="doc-combobox-input">…</div> INSIDE it. Inner carries border/height/padding
   (scoped under .ai-actions-panel below). Outer is layout-only — no border or
   padding, else we render a visible double-box around the input. */
.ai-ap-combobox {
    width: 100%;
}

/* ----- Primary actions ----- */
.ai-ap-primary-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-ap-primary-actions__row {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.ai-ap-btn {
    height: 28px; /* v3 densified (30→28) */
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 3px;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: var(--gray-700);
    line-height: 1;
    white-space: nowrap;
}
/* v3: tier-1 affirmative — success fill with subtle border. Paired with --neutral below. */
.ai-ap-btn--primary-success {
    background: var(--success-100);
    color: var(--success-700);
    border: 0.5px solid var(--success-200);
    font-weight: 500;
}
.ai-ap-btn--primary-success:hover:not(:disabled) {
    filter: brightness(0.96);
}
/* v3: tier-1 neutral — equal weight partner of --primary-success. Reads as "other opinion". */
.ai-ap-btn--neutral {
    background: var(--gray-100);
    color: var(--gray-700);
    border: 0.5px solid var(--gray-200);
    font-weight: 500;
}
.ai-ap-btn--neutral:hover:not(:disabled) {
    background: var(--gray-200);
}
.ai-ap-btn--ghost {
    background: transparent;
    border: 0.5px solid var(--gray-300);
    color: var(--gray-700);
}
.ai-ap-btn--ghost:hover:not(:disabled) {
    background: var(--gray-50);
}
/* v3: tier-2 destructive — borderless, red text only. "Quieter" affordance. */
.ai-ap-btn--destructive-text {
    /* DL-339 v1.7: pale-red fill at rest so the button reads as destructive
       without needing the hover. Text alone (v1.6) got lost against the white
       panel bg. Keep borderless + bolder weight for the quieter-than-approve feel. */
    background: var(--danger-50);
    border: 0;
    color: var(--danger-700);
    font-weight: 500;
}
.ai-ap-btn--destructive-text:hover:not(:disabled) {
    background: var(--danger-100);
}
.ai-ap-btn--danger-ghost {
    background: transparent;
    border: 0.5px solid var(--danger-300);
    color: var(--danger-700);
}
.ai-ap-btn--danger-ghost:hover:not(:disabled) {
    background: var(--danger-50);
}
.ai-ap-btn--warning {
    background: transparent;
    border: 0.5px solid var(--warning-500);
    color: var(--warning-700);
    font-weight: 500;
}
.ai-ap-btn--warning:hover:not(:disabled) {
    background: var(--warning-50);
}
.ai-ap-btn--full {
    width: 100%;
}
.ai-ap-btn--small {
    height: 24px; /* v3 densified (26→24) */
    font-size: 11px;
    padding: 4px 10px;
}
/* v3: vertical separation between tier-1 affirmative row and tier-2 destructive action */
.ai-ap-primary-actions__tier2 {
    margin-top: 8px;
}
.ai-ap-btn--icon-only {
    width: 40px;
    padding: 0;
}
.ai-ap-btn--icon-only.ai-ap-btn--small {
    width: 26px;
}
.ai-ap-btn:disabled,
.ai-ap-btn[aria-disabled="true"] {
    background: var(--gray-100);
    color: var(--gray-500);
    cursor: not-allowed;
    border-color: var(--gray-200);
}

/* ----- Pending-question secondary block (non-on_hold pending states) ----- */
.ai-ap-pending-question {
    background: var(--info-50);
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 11px;
    color: var(--info-700);
    line-height: 1.4;
}

/* ----- Secondary actions row ----- */
.ai-ap-secondary-actions {
    border-top: 0.5px solid var(--gray-200);
    padding-top: 3px; /* v3 densified (4→3) */
    margin-top: 3px;  /* v3 densified (4→3) */
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

/* ----- Overflow (⋮) menu ----- */
.ai-ap-overflow {
    position: relative;
    margin-inline-start: auto; /* push to end */
}
.ai-ap-overflow__btn {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 0.5px solid var(--gray-200);
    color: var(--gray-500);
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ai-ap-overflow__btn:hover {
    background: var(--gray-50);
}
.ai-ap-overflow__menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 4px);
    background: var(--white, #fff);
    border: 0.5px solid var(--gray-200);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    padding: 4px;
    font-size: 12px;
    z-index: 50;
    min-width: 180px;
    display: none;
}
.ai-ap-overflow.open .ai-ap-overflow__menu {
    display: block;
}
.ai-ap-overflow__item {
    padding: 6px 8px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--gray-700);
    white-space: nowrap;
    display: block;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: start;
}
.ai-ap-overflow__item:hover {
    background: var(--gray-50);
}

/* DL-369: Move current AI Review document to another client */
.ai-move-client-modal {
    max-width: 560px;
    width: min(560px, 92vw);
}
.ai-move-client-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--gray-500);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}
.ai-move-client-close:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}
.ai-move-client-summary {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 13px;
}
.ai-move-client-label {
    display: block;
    margin-bottom: 6px;
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 600;
}
.ai-move-client-search {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    color: var(--gray-800);
    font: inherit;
}
.ai-move-client-search:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-100);
}
.ai-move-client-list {
    max-height: 340px;
    overflow-y: auto;
    margin-top: 10px;
    padding: 4px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}
.ai-move-client-item {
    width: 100%;
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    text-align: start;
}
.ai-move-client-item:hover,
.ai-move-client-item:focus {
    outline: none;
    background: var(--brand-50);
}
.ai-move-client-item__name {
    color: var(--gray-800);
    font-size: 13px;
    font-weight: 600;
}
.ai-move-client-item__meta {
    color: var(--gray-500);
    font-size: 11px;
}
.ai-move-client-empty {
    padding: 18px;
    color: var(--gray-500);
    text-align: center;
    font-size: 13px;
}

/* ----- Empty state ----- */
.ai-ap-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--gray-500);
    font-size: 12px;
}
.ai-ap-empty__icon {
    font-size: 24px;
    color: var(--gray-300);
    line-height: 1;
}

/* ----- Transient loading overlay (primary actions area only) ----- */
.ai-ap-transient-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--gray-700);
    border-radius: 3px;
    z-index: 2;
}

/* ----- Mobile: hide the cockpit DOM; accordion fat-cards take over
   (existing `.ai-review-docs` / `.ai-review-detail` mobile rules from prior DLs
    untouched). */
@media (max-width: 768px) {
    .ai-preview-frame,
    .ai-actions-panel {
        display: none;
    }
}

/* ============ DL-339 v1: Move actions panel to pane 2 + bug fixes ============ */

/* Pane 2 becomes flex column so list + panel split cleanly.
   NOTE: existing `.ai-review-docs { overflow-y: auto; padding: var(--sp-3) }`
   rules earlier in the file remain; the inner `.ai-doc-list` owns scroll now,
   the outer container provides the flex axis + min-height:0 so children shrink. */
.ai-review-docs {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* New doc-list wrapper. Takes full height when no selection; 60% when panel visible. */
.ai-doc-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    transition: flex-basis 180ms ease-out;
}

/* DL-339: Relocate actions panel into pane 2. Hidden by default. */
.ai-actions-panel {
    display: none;
}

/* DL-339 v1.3: panel sizes to its content; the doc list absorbs the scroll.
   Panel: flex 0 0 auto — natural content height, no stretch, no shrink.
   List: flex 1 1 0 — takes all remaining space; scrolls when row count exceeds it.
   A max-height: 70% safeguard on the panel keeps pathological long states
   (State D with very long reasoning, on_hold with huge question block) from
   eating the list entirely; in those rare cases the panel falls back to its
   own internal scroll. */
.ai-review-docs.has-selection .ai-doc-list {
    flex: 1 1 0;
}

.ai-review-docs.has-selection .ai-actions-panel {
    display: flex;
    flex: 0 0 auto;
    max-height: 70%;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
    padding: 10px 12px;
    border-top: 0.5px solid var(--gray-200);
    /* Keep the 3px state-accent from DL-334 v2 existing .ai-actions-panel--<variant> rules. */
}

/* Fix A (bidi): isolate filename text run without flipping the cell's alignment.
   unicode-bidi: plaintext isolates the text, text-align: start keeps the cell
   aligned to the parent's (RTL) start edge regardless of filename's first char. */
.ai-doc-row__filename {
    /* DL-339: supersedes the earlier v3.2 unicode-bidi: isolate (which was coupled
       with dir="auto" on the span — that pairing caused pure-Latin filenames to
       flip the cell's alignment in the RTL flex row). */
    unicode-bidi: plaintext;
    text-align: start;
}

/* DL-339 v1.1: pin the non-list flex siblings above the doc list so they stay at
   their natural height. Without this, flex column can compress them to make room
   for the list's content, producing layout jitter during the 60/40 transition. */
.ai-review-docs > .ai-pane2-top,
.ai-review-docs > .ai-section-header,
.ai-review-docs > .ai-cn-section,
.ai-review-docs > .ai-missing-docs-body,
.ai-review-docs > .ai-section-separator {
    flex-shrink: 0;
}

/* DL-339 v1.7: densify the legacy .doc-combobox when it's rendered inside the
   pane-2 actions panel (State D unmatched + State B fallback). The default
   .doc-combobox-input has mobile fat-card padding + text-sm font, and the
   dropdown is hard-pinned at 420px wide — way too big for the 33%-wide panel. */
.ai-actions-panel .doc-combobox-input {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
    height: 28px;
    border: 0.5px solid var(--gray-200);
    border-radius: 3px;
}
.ai-actions-panel .doc-combobox-dropdown {
    width: auto;
    min-width: 240px;
    max-width: 420px;
    max-height: 200px;
    font-size: 12px;
}
.ai-actions-panel .doc-combobox-option,
.ai-actions-panel .doc-combobox-category,
.ai-actions-panel .doc-combobox-create-btn,
.ai-actions-panel .doc-combobox-empty {
    padding: 4px 8px;
    font-size: 12px;
}
.ai-actions-panel .doc-combobox-category {
    font-size: 11px;
}

/* ============ /DL-334 ============ */

/* DL-380: suggested password chip */
.ai-suggested-password-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--brand-200);
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 6px;
    transition: background 0.15s;
}
.ai-suggested-password-chip:hover {
    background: var(--brand-100);
}
.ai-suggested-password-chip code {
    font-family: monospace;
    font-weight: 600;
    letter-spacing: 0.03em;
}