/* =====================================================
   UX Enhancements — visual indicators, command palette,
   keyboard hints, bulk actions, templates dropdown.
   ===================================================== */

/* ---------- Theme toggle button (in header) ---------- */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-inline: var(--space-2);
}

.theme-toggle-btn:hover {
    background: var(--color-bg-hover);
    color: var(--coda-primary);
    transform: rotate(15deg);
}

.theme-toggle-btn .icon-moon { display: none; }
.theme-toggle-btn .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle-btn .icon-sun { display: none; }

/* ---------- Visual indicators on message cards ---------- */
.corr-list-card {
    position: relative;
    overflow: hidden;
}

.corr-list-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-gray-300);
    transition: background var(--transition-fast);
}

.corr-list-card[data-priority="urgent"]::before,
.corr-list-card.priority-urgent::before {
    background: var(--color-danger-500);
}

.corr-list-card[data-priority="high"]::before,
.corr-list-card.priority-high::before {
    background: var(--color-warning-500);
}

.corr-list-card[data-priority="normal"]::before,
.corr-list-card.priority-normal::before {
    background: var(--coda-primary);
}

.corr-list-card[data-unread="true"]::after,
.corr-list-card.unread::after {
    content: '';
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    width: 10px;
    height: 10px;
    background: var(--color-danger-500);
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
    animation: unread-pulse 2s ease-in-out infinite;
}

@keyframes unread-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
    50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.06); }
}

.attachment-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--color-gray-100);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
}

.comments-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--color-info-50);
    color: var(--color-info-700);
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
}

/* ---------- Command palette (⌘K) ---------- */
.cmd-palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    z-index: var(--z-modal);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-quick) ease;
}

.cmd-palette-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.cmd-palette {
    width: min(640px, 92vw);
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transform: translateY(-8px);
    transition: transform var(--duration-quick) ease;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.cmd-palette-overlay.open .cmd-palette {
    transform: translateY(0);
}

.cmd-palette-input-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-light);
}

.cmd-palette-input-row svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.cmd-palette-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--text-lg);
    font-family: inherit;
}

.cmd-palette-kbd {
    padding: 2px 8px;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    font-size: var(--text-2xs);
    color: var(--color-text-tertiary);
    font-family: 'IBM Plex Mono', monospace;
}

.cmd-palette-results {
    overflow-y: auto;
    padding: var(--space-2);
    flex: 1;
}

.cmd-palette-section-title {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps-em);
    font-weight: var(--weight-semibold);
}

.cmd-palette-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-primary);
    transition: background var(--transition-fast);
}

.cmd-palette-item:hover,
.cmd-palette-item.selected {
    background: var(--coda-primary-soft);
    color: var(--color-primary-700);
}

html[data-theme="dark"] .cmd-palette-item.selected,
html[data-theme="dark"] .cmd-palette-item:hover {
    background: var(--color-bg-hover);
    color: var(--color-primary-300);
}

.cmd-palette-item-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
}

.cmd-palette-item.selected .cmd-palette-item-icon {
    background: var(--color-bg-surface);
}

.cmd-palette-item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cmd-palette-item-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-palette-item-sub {
    font-size: var(--text-2xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-palette-empty {
    padding: var(--space-8);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.cmd-palette-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    color: var(--color-text-muted);
    text-align: center;
}

.cmd-palette-empty-state svg {
    opacity: 0.35;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.cmd-palette-empty-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
}

.cmd-palette-empty-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    max-width: 280px;
    line-height: var(--leading-relaxed);
}

.cmd-palette-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-subtle);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
}

.cmd-palette-footer-hints {
    display: flex;
    gap: var(--space-3);
}

.cmd-palette-footer-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------- Keyboard shortcuts help modal ---------- */
.shortcuts-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-quick) ease;
}

.shortcuts-modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.shortcuts-modal {
    width: min(560px, 92vw);
    max-height: 80vh;
    overflow-y: auto;
    background: var(--color-bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-6);
}

.shortcuts-modal h3 {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xl);
    color: var(--color-text-primary);
}

.shortcuts-group {
    margin-bottom: var(--space-5);
}

.shortcuts-group-title {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps-em);
    margin-bottom: var(--space-3);
    font-weight: var(--weight-semibold);
}

.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

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

.shortcut-keys {
    display: inline-flex;
    gap: 4px;
}

.shortcut-key {
    padding: 3px 9px;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    font-size: var(--text-2xs);
    color: var(--color-text-secondary);
    font-family: 'IBM Plex Mono', monospace;
    min-width: 22px;
    text-align: center;
}

/* ---------- Bulk actions toolbar ---------- */
.bulk-actions-bar {
    position: sticky;
    top: 0;
    background: var(--coda-primary);
    color: white;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    box-shadow: var(--shadow-md);
    transform: translateY(-200%);
    transition: transform var(--duration-base) ease;
    z-index: var(--z-sticky);
}

.bulk-actions-bar.visible {
    transform: translateY(0);
}

.bulk-count {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
}

.bulk-actions-group {
    display: flex;
    gap: var(--space-2);
}

.bulk-action-btn {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--transition-fast);
}

.bulk-action-btn:hover {
    background: rgba(255, 255, 255, 0.30);
}

.bulk-action-btn.danger {
    background: rgba(220, 38, 38, 0.30);
    border-color: rgba(220, 38, 38, 0.40);
}

.bulk-cancel {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    opacity: 0.85;
    padding: 4px;
    display: inline-flex;
}

.bulk-cancel:hover { opacity: 1; }

/* Checkbox on each card */
.bulk-mode .corr-list-card {
    padding-inline-start: 48px;
}

.corr-list-checkbox {
    position: absolute;
    top: 50%;
    inset-inline-start: 14px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    background: var(--color-bg-surface);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-elevated);
    transition: all var(--transition-fast);
}

.bulk-mode .corr-list-checkbox { display: flex; }

.corr-list-card.selected .corr-list-checkbox,
.corr-list-checkbox.checked {
    background: var(--coda-primary);
    border-color: var(--coda-primary);
    color: white;
}

.corr-list-card.selected {
    background: var(--coda-primary-soft);
}

/* ---------- Auto-save indicator ---------- */
.autosave-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    background: var(--color-success-50);
    color: var(--color-success-700);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    transition: opacity var(--duration-slow) ease;
    opacity: 0;
}

.autosave-indicator.visible { opacity: 1; }
.autosave-indicator.saving {
    background: var(--color-warning-50);
    color: var(--color-warning-700);
}
.autosave-indicator.error {
    background: var(--color-danger-50);
    color: var(--color-danger-700);
}

.autosave-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
}

.autosave-indicator.saving .autosave-dot {
    animation: autosave-pulse 1s ease-in-out infinite;
}

@keyframes autosave-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ---------- Templates dropdown ---------- */
.template-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-info-50);
    color: var(--color-info-700);
    border: 1px solid var(--color-info-100);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.template-trigger-btn:hover {
    background: var(--color-info-100);
}

.template-popover {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    width: 320px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    z-index: var(--z-dropdown);
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.template-popover.open { display: block; }

.template-item {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.template-item:hover {
    background: var(--coda-primary-soft);
}

.template-item-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.template-item-preview {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    line-height: var(--leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---------- Notification grouping ---------- */
.notif-group-title {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps-em);
    font-weight: var(--weight-semibold);
    background: var(--color-bg-subtle);
}

.notif-group-title.urgent {
    color: var(--color-danger-700);
    background: var(--color-danger-50);
}

.notif-mark-all-read {
    width: 100%;
    padding: var(--space-2);
    background: transparent;
    border: none;
    color: var(--coda-primary);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-top: 1px solid var(--color-border-light);
}

.notif-mark-all-read:hover {
    background: var(--coda-primary-soft);
}

/* =====================================================
   IUI DEBUG ERROR OVERLAY — HIDDEN IN PRODUCTION
   IUI.debugMode = true is hardcoded in the library.
   When any async data binding fails (e.g. Esiur rejects pending
   IIP requests on disconnect), IUI appends .iui-error elements
   with red "Management (0): Connection closed" text that covers
   the entire component. We disable debugMode in JS and also hide
   these elements via CSS as a safety net.
   ===================================================== */

.iui-error {
    display: none !important;
}

/* =====================================================
   IUI ROUTER LOADING OVERRIDE
   Replace IUI's full-screen dark blocking overlay with a
   non-blocking 3px animated progress bar at the top.
   - Content remains fully visible during page transitions
   - Sidebar clicks are no longer silently eaten
   - Dark background + box-shadow removed entirely
   ===================================================== */

.router-loading,
.target-loading {
    /* Shrink from full overlay to a thin bar at the top */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    width: 100% !important;
    padding: 0 !important;

    /* Remove blocking visual */
    background: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    overflow: hidden;

    /* Never intercept pointer events */
    pointer-events: none !important;
    transition: none !important;
    z-index: var(--z-progress-bar) !important;
}

/* When loading is active: keep bar visible (no 1s delay from IUI default) */
.router-loading-visible,
.target-loading-visible {
    background: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: none !important;
}

/* Animated progress bar using ::after */
.router-loading-visible::after,
.target-loading-visible::after {
    content: '';
    position: absolute;
    top: 0;
    left: -55%;
    width: 55%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #15B79E 50%, transparent 100%);
    animation: coda-route-progress 1.1s ease-in-out infinite;
    border-radius: var(--radius-2xs);
}

@keyframes coda-route-progress {
    0%   { left: -55%; }
    100% { left: 110%; }
}

/* ---------- Hover preview tooltip ---------- */
.preview-tooltip {
    position: absolute;
    z-index: var(--z-overlay);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    width: 280px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-fastest) ease;
}

.preview-tooltip.visible { opacity: 1; }

.preview-tooltip-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.preview-tooltip-meta {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

/* =====================================================
   TYPE-AWARE MESSAGE CARD ENHANCEMENTS
   - Left border accent colored by message type
   - Matching type badge colors
   - Type-specific hover glow
   ===================================================== */

/* Left border accent by type */
.corr-list-card[data-msg-type="incoming"]::before  { background: var(--color-incoming); }
.corr-list-card[data-msg-type="outgoing"]::before  { background: var(--color-outgoing); }
.corr-list-card[data-msg-type="internal"]::before  { background: var(--color-memo); }

/* Type badge color per type */
.corr-list-card[data-msg-type="incoming"] .corr-list-type-badge {
    background: var(--color-incoming-soft);
    color: var(--color-incoming-dark);
    border-color: var(--color-border-success-soft);
}
.corr-list-card[data-msg-type="outgoing"] .corr-list-type-badge {
    background: var(--color-outgoing-soft);
    color: var(--color-outgoing-dark);
    border-color: var(--color-border-info-soft);
}
.corr-list-card[data-msg-type="internal"] .corr-list-type-badge {
    background: var(--color-memo-soft);
    color: var(--color-memo-dark);
    border-color: var(--color-border-memo-soft);
}

/* Type-specific hover glow */
.corr-list-card[data-msg-type="incoming"]:hover {
    border-color: var(--color-incoming);
    box-shadow: 0 10px 28px rgba(21, 160, 74, 0.09), 0 2px 8px rgba(21, 160, 74, 0.06);
}
.corr-list-card[data-msg-type="outgoing"]:hover {
    border-color: var(--color-outgoing);
    box-shadow: 0 10px 28px rgba(26, 174, 220, 0.09), 0 2px 8px rgba(26, 174, 220, 0.06);
}
.corr-list-card[data-msg-type="internal"]:hover {
    border-color: var(--color-memo);
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.09), 0 2px 8px rgba(124, 58, 237, 0.05);
}

/* =====================================================
   COMPACT PARTICIPANT CHIPS IN LISTING CARDS
   Replaces the large image+name blocks with sleek pill chips
   ===================================================== */
.corr-list-card .participant-user,
.corr-list-card .participant-unit {
    background: var(--color-gray-50);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    padding: 2px 10px 2px 4px;
    gap: 4px;
    align-items: center;
}
.corr-list-card .participant-user > img,
.corr-list-card .participant-unit > img {
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin: 2px !important;
    padding: 3px !important;
    background: var(--color-gray-100) !important;
    box-shadow: none !important;
}
.corr-list-card .participant-user-name,
.corr-list-card .participant-unit-name {
    max-width: 100px;
    padding: 0 2px;
}
.corr-list-card .participant-user-name > div:first-child,
.corr-list-card .participant-unit-name > div:first-child {
    font-size: var(--text-xs) !important;
    font-weight: var(--weight-medium) !important;
    color: var(--color-text-secondary) !important;
}
.corr-list-card .participant-user-name > div:last-child,
.corr-list-card .participant-unit-name > div:last-child {
    display: none !important;
}
.corr-list-card .name-separator {
    display: none !important;
}
.corr-list-card .participants {
    gap: var(--space-1);
    flex-wrap: wrap;
}

/* =====================================================
   INBOX TYPE LEGEND — REFINED APPEARANCE
   ===================================================== */
.inbox-type-legend {
    background: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-2) var(--space-4) !important;
    box-shadow: var(--shadow-xs);
    gap: var(--space-5) !important;
    align-items: center;
}
.legend-item {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
}
.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-3xs);
}

/* =====================================================
   COUNT SUMMARY BAR
   ===================================================== */
.list-count-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.count-number {
    font-weight: var(--weight-bold);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}
.list-count-summary svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* =====================================================
   INBOX TABS — POLISH
   Slightly tighter count badge, better active underline
   ===================================================== */
.inbox-tab-count {
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--letter-spacing-negative-md);
}

/* Active tab subtle bottom highlight line */
.inbox-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    inset-inline-start: 20%;
    inset-inline-end: 20%;
    height: 2px;
    border-radius: var(--radius-2xs) var(--radius-2xs) 0 0;
    background: currentColor;
    opacity: 0.35;
}

/* =====================================================
   FILTER BAR — VISUAL REFINEMENT
   ===================================================== */
.inbox-filter-bar {
    background: linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-subtle) 100%) !important;
}
.filter-bar-search {
    background: var(--color-bg-surface) !important;
    position: relative;
}
.filter-bar-search svg {
    transition: color var(--transition-fast);
}
.filter-bar-search:focus-within svg {
    color: var(--coda-primary) !important;
}

/* =====================================================
   CORR LIST CARD — SUBTLE SUBJECT LINE IMPROVEMENTS
   ===================================================== */
.corr-list-subject {
    letter-spacing: var(--letter-spacing-negative-sm);
}
.corr-list-card[data-msg-type="incoming"] .corr-list-subject {
    color: var(--color-text-primary);
}
.corr-list-card.corr-list-card-unseen .corr-list-subject {
    font-weight: var(--weight-bold);
}

/* Issue number pill refinement */
.corr-list-issue-inline {
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--letter-spacing-base);
}

/* =====================================================
   DARK MODE OVERRIDES FOR TYPE COLORS
   ===================================================== */
html[data-theme="dark"] .corr-list-card[data-msg-type="incoming"]::before  { background: var(--color-incoming); }
html[data-theme="dark"] .corr-list-card[data-msg-type="outgoing"]::before  { background: var(--color-outgoing); }
html[data-theme="dark"] .corr-list-card[data-msg-type="internal"]::before  { background: var(--color-memo); }
html[data-theme="dark"] .corr-list-card .participant-user,
html[data-theme="dark"] .corr-list-card .participant-unit {
    background: var(--color-bg-hover);
    border-color: var(--color-border-strong);
}
html[data-theme="dark"] .corr-list-card .participant-user > img,
html[data-theme="dark"] .corr-list-card .participant-unit > img {
    background: var(--color-bg-active) !important;
}

/* =====================================================
   GLOBAL SCROLLBAR — REFINED THIN STYLE
   ===================================================== */
i-router::-webkit-scrollbar,
.message-actions::-webkit-scrollbar,
.activity-feed-body::-webkit-scrollbar,
.corr-listing::-webkit-scrollbar {
    width: 5px;
}
i-router::-webkit-scrollbar-track,
.message-actions::-webkit-scrollbar-track,
.activity-feed-body::-webkit-scrollbar-track,
.corr-listing::-webkit-scrollbar-track {
    background: transparent;
}
i-router::-webkit-scrollbar-thumb,
.message-actions::-webkit-scrollbar-thumb,
.activity-feed-body::-webkit-scrollbar-thumb,
.corr-listing::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
}
i-router::-webkit-scrollbar-thumb:hover,
.message-actions::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

/* =====================================================
   ACTIVITY FEED — VISUAL TIMELINE IMPROVEMENTS
   ===================================================== */
.activity-item {
    position: relative;
}
.activity-item:not(:last-child)::before {
    content: '';
    position: absolute;
    inset-inline-start: 37px;
    bottom: 0;
    top: auto;
    width: 1px;
    height: 1px;
}
.activity-icon {
    border: 1px solid var(--color-border-light);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.activity-item:hover .activity-icon {
    transform: scale(1.08);
    box-shadow: var(--shadow-xs);
}
.activity-text {
    font-weight: var(--weight-medium);
}

/* =====================================================
   DASHBOARD KPI CARDS — ENTRANCE + POINTER IMPROVEMENTS
   ===================================================== */
.kpi-card {
    cursor: pointer;
}
.kpi-card:active {
    transform: translateY(0) !important;
}
.kpi-value {
    letter-spacing: var(--letter-spacing-negative-lg);
}

/* =====================================================
   CONTENT CARD SECTION HEADERS — MORE DEFINED
   ===================================================== */
.content-card-header {
    background: var(--color-bg-subtle);
}
html[data-theme="dark"] .content-card-header {
    background: rgba(255, 255, 255, 0.02);
}

/* =====================================================
   BETTER GLOBAL FOCUS RINGS
   ===================================================== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="menuitem"]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--coda-primary);
    outline-offset: 2px;
}

/* =====================================================
   TOOLBAR NAV BUTTONS — POLISHED
   ===================================================== */
.toolbar-nav-btn {
    transition: all var(--transition-fast);
}
.toolbar-nav-btn:hover {
    transform: translateY(-1px);
}

/* =====================================================
   MESSAGE DETAIL — BETTER SECTION TITLES
   ===================================================== */
.corr-section-title {
    letter-spacing: var(--letter-spacing-fine-em);
}

/* =====================================================
   CORR DETAIL HEADER — IMPROVED VISUAL HIERARCHY
   ===================================================== */
.corr-detail-title {
    letter-spacing: var(--letter-spacing-negative-md);
}
.corr-detail-type-badge {
    letter-spacing: var(--letter-spacing-micro-em);
}

/* =====================================================
   SIDEBAR ACTIVE ITEM — STRONGER ACCENT
   ===================================================== */
.side-bar i-link[selected]::after {
    width: 4px;
    box-shadow: 0 0 8px var(--color-brand-tint-40);
}

/* =====================================================
   PRIORITY ACTION ITEMS — MICRO-INTERACTION
   ===================================================== */
.priority-action-item {
    border-inline-start: 3px solid transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.priority-action-danger:hover {
    border-inline-start-color: var(--color-danger-400);
}
.priority-action-info:hover {
    border-inline-start-color: var(--color-info-400);
}
.priority-action-warning:hover {
    border-inline-start-color: var(--color-warning-400);
}

/* =====================================================
   PROGRESS BAR — ANIMATED FILL
   ===================================================== */
.progress {
    background: linear-gradient(90deg, var(--color-success-500), var(--color-success-400));
    position: relative;
    overflow: hidden;
}
.progress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.2) 50%,
        transparent 100%
    );
    animation: progress-shimmer 2s ease infinite;
}
@keyframes progress-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* =====================================================
   SMOOTH PAGE ENTRY FOR CORR LISTING
   ===================================================== */
.corr-list-card {
    animation: card-enter 0.22s ease-out both;
}
@keyframes card-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.corr-list-card:nth-child(1)  { animation-delay: 0.00s; }
.corr-list-card:nth-child(2)  { animation-delay: 0.04s; }
.corr-list-card:nth-child(3)  { animation-delay: 0.08s; }
.corr-list-card:nth-child(4)  { animation-delay: 0.12s; }
.corr-list-card:nth-child(5)  { animation-delay: 0.16s; }
.corr-list-card:nth-child(6)  { animation-delay: 0.20s; }
.corr-list-card:nth-child(7)  { animation-delay: 0.22s; }
.corr-list-card:nth-child(8)  { animation-delay: 0.24s; }
.corr-list-card:nth-child(n+9){ animation-delay: 0.26s; }

/* =====================================================
   KPI BAR — STAGGERED CARD ENTRANCE
   ===================================================== */
.kpi-bar .kpi-card:nth-child(1) { animation-delay: 0.05s; }
.kpi-bar .kpi-card:nth-child(2) { animation-delay: 0.10s; }
.kpi-bar .kpi-card:nth-child(3) { animation-delay: 0.15s; }
.kpi-bar .kpi-card:nth-child(4) { animation-delay: 0.20s; }
.kpi-bar .kpi-card:nth-child(5) { animation-delay: 0.25s; }

/* =====================================================
   SIDEBAR SECTION HEADER — REFINED UPPERCASE LABEL
   ===================================================== */
.sidebar-group-header-content {
    font-size: var(--text-2xs);
    letter-spacing: var(--letter-spacing-loose);
}

/* =====================================================
   EMPTY STATE CTA — PRIMARY STYLE
   ===================================================== */
.empty-cta {
    background: var(--color-primary-50) !important;
    color: var(--coda-teal-deep) !important;
    border-color: var(--color-primary-200) !important;
    font-weight: var(--weight-semibold) !important;
}
.empty-cta:hover {
    background: var(--color-primary-100) !important;
    border-color: var(--coda-primary) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

/* =====================================================
   DARK MODE — LEGEND & FILTER BAR REFINEMENTS
   ===================================================== */
html[data-theme="dark"] .inbox-type-legend {
    background: var(--color-bg-muted) !important;
    border-color: var(--color-border-default) !important;
}
html[data-theme="dark"] .inbox-filter-bar {
    background: var(--color-bg-muted) !important;
}
html[data-theme="dark"] .filter-bar-search {
    background: var(--color-bg-surface) !important;
}
html[data-theme="dark"] .filter-bar-search:focus-within {
    border-color: var(--coda-primary);
    box-shadow: 0 0 0 3px rgba(15, 181, 160, 0.12);
}
html[data-theme="dark"] .inbox-tab:hover {
    background: var(--color-bg-hover);
}

/* =====================================================
   DASHBOARD WELCOME CARD — IMPROVED GRADIENT
   ===================================================== */
.welcome-card {
    background: linear-gradient(135deg,
        #064D44 0%,
        #086F62 35%,
        #0A8A78 65%,
        #0FB5A0 100%
    );
    box-shadow: 0 12px 32px rgba(10, 138, 120, 0.30), 0 2px 8px rgba(10, 138, 120, 0.15);
}

/* =====================================================
   CORRESPONDENCE FORM SECTION — POLISHED BORDER
   ===================================================== */
.corr-section {
    border-color: var(--color-border-light);
}
.corr-section:hover {
    border-color: var(--color-border-default);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* =====================================================
   SEARCH BAR AUTOCOMPLETE DROPDOWN
   ===================================================== */
.header-search {
    position: relative;
}

.search-ac-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-above-all);
    max-height: 300px;
    overflow-y: auto;
    display: none;
    padding: var(--space-1) 0;
    scrollbar-width: thin;
}

.search-ac-dropdown.open {
    display: block;
    animation: ac-fade-in 0.12s ease;
}

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

.search-ac-section {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-1);
    letter-spacing: var(--letter-spacing-subtle-em);
}

.search-ac-section:first-child {
    border-top: none;
    margin-top: 0;
}

.search-ac-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background var(--transition-fast);
    direction: rtl;
    min-height: 36px;
}

.search-ac-item:hover {
    background: var(--color-bg-hover);
}

.search-ac-item.selected {
    background: rgba(10, 138, 120, 0.08);
}

.search-ac-icon {
    font-size: var(--text-xs);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    line-height: var(--leading-none);
}

.search-ac-chip {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.search-ac-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-ac-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-inline-start: var(--space-2);
}

.search-ac-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--text-3xs);
    line-height: var(--leading-none);
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
    margin-inline-start: auto;
    font-family: inherit;
}

.search-ac-item:hover .search-ac-remove,
.search-ac-item.selected .search-ac-remove {
    opacity: 1;
}

.search-ac-remove:hover {
    color: var(--color-danger, #d32f2f);
    background: rgba(211, 47, 47, 0.09);
}

/* Dark mode */
html[data-theme="dark"] .search-ac-dropdown {
    background: var(--color-bg-elevated, #1e2530);
    border-color: var(--color-border-default);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .search-ac-item.selected {
    background: rgba(10, 138, 120, 0.18);
}

html[data-theme="dark"] .search-ac-item:hover {
    background: var(--color-bg-hover);
}

/* =====================================================
   TAG SYSTEM — chips, picker, manager, sidebar
   ===================================================== */

/* ── Tag chip shared base ── */
.tag-chip-display,
.msg-tag-chip,
.inbox-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    white-space: nowrap;
    letter-spacing: var(--letter-spacing-micro-em);
    transition: opacity var(--transition-fast, 150ms);
    cursor: default;
    user-select: none;
}

/* ── Inbox card tag strip ── */
.corr-list-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--space-2, 6px);
    min-height: 0;
}
.corr-list-card-tags:empty { display: none; }

.inbox-tag-chip {
    font-size: var(--text-3xs);
    padding: 1px 7px;
    border-radius: var(--radius-full, 9999px);
    font-weight: var(--weight-semibold);
}

/* ── Message detail tag panel ── */
.msg-tags-panel {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg, 10px);
    padding: var(--space-4, 16px);
    margin: 0 var(--space-4, 16px) var(--space-4, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 10px);
}

.msg-tags-label {
    display: flex;
    align-items: center;
    gap: var(--space-2, 6px);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps-em);
}

.msg-tags-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 26px;
    align-items: center;
}

.msg-tags-loading,
.msg-tags-empty {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    font-style: italic;
}

.msg-tag-chip {
    padding: 3px 10px 3px 6px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-2xs);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: var(--weight-semibold);
    cursor: default;
}

.msg-tag-chip-name { line-height: var(--leading-none); }

.msg-tag-chip-remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
    border-radius: var(--radius-full);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: opacity var(--transition-fast, 150ms), background var(--transition-fast, 150ms);
    color: inherit;
}
.msg-tag-chip-remove:hover { opacity: 1; background: rgba(0,0,0,0.15); }
.msg-tag-chip-remove:focus-visible { outline: 2px solid var(--coda-primary); outline-offset: 1px; }

/* ── Tag picker autocomplete ── */
.msg-tag-picker {
    position: relative;
}

.msg-tag-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2, 6px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 6px);
    padding: 6px 12px;
    background: var(--color-bg-input);
    transition: border-color var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms);
}
.msg-tag-input-wrap:focus-within {
    border-color: var(--coda-primary);
    box-shadow: 0 0 0 3px rgba(11,156,135,0.12);
}

.msg-tag-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-xs);
    color: var(--color-text-primary);
    width: 100%;
    direction: rtl;
}
.msg-tag-input::placeholder { color: var(--color-text-muted); }

.msg-tag-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-md);
    z-index: var(--z-popover);
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.tag-suggest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background var(--transition-fast, 150ms);
    font-size: var(--text-xs);
}
.tag-suggest-item:hover { background: var(--color-bg-hover); }
.tag-suggest-item.tag-suggest-assigned { opacity: 0.7; cursor: default; }

.tag-suggest-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-3xs);
    font-weight: var(--weight-semibold);
}
.tag-suggest-scope {
    margin-inline-start: auto;
    font-size: var(--text-3xs);
    color: var(--color-text-muted);
}
.tag-suggest-check {
    color: var(--color-success-500);
    display: inline-flex;
    align-items: center;
}

/* ── Tag manager page ── */
.tag-manager .page-header-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.tag-create-section {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg, 10px);
    padding: var(--space-5, 20px);
    margin-bottom: var(--space-5, 20px);
}

.section-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2, 6px);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4, 14px);
}

.tag-create-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 10px);
    align-items: center;
}

.tag-form-input {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 6px);
    padding: 8px 12px;
    font-family: inherit;
    font-size: var(--text-sm);
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    direction: rtl;
    min-width: 160px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tag-form-input:focus {
    outline: none;
    border-color: var(--coda-primary);
    box-shadow: 0 0 0 3px rgba(11,156,135,0.12);
}
.tag-form-input-desc { flex: 1; min-width: 200px; }

.tag-form-select {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 6px);
    padding: 8px 12px;
    font-family: inherit;
    font-size: var(--text-sm);
    background: var(--color-bg-input);
    color: var(--color-text-primary);
    direction: rtl;
    cursor: pointer;
    min-width: 180px;
}
.tag-form-select:focus {
    outline: none;
    border-color: var(--coda-primary);
    box-shadow: 0 0 0 3px rgba(11,156,135,0.12);
}

.tag-color-wrapper {
    position: relative;
    width: 44px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    border: 1px solid var(--color-border);
    cursor: pointer;
}
.tag-color-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    cursor: pointer;
    opacity: 0;
}
.tag-color-preview {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md, 6px);
    pointer-events: none;
    transition: background var(--transition-fast);
}

.tag-public-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    padding: 8px 0;
}
.tag-public-label input[type="checkbox"] {
    accent-color: var(--coda-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.tag-create-btn { flex-shrink: 0; }

/* ── Tag list section ── */
.tag-list-section { margin-top: var(--space-2, 8px); }

.tag-section-meta {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3, 10px);
}
.tag-section-meta .count-number { font-weight: 700; color: var(--color-text-primary); }

.tag-table-wrapper {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg, 10px);
    overflow: hidden;
    margin-top: var(--space-4, 14px);
}

/* ── Scope badges ── */
.scope-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
}
.scope-public  { background: var(--color-success-50); color: var(--color-success-500); }
.scope-personal { background: var(--color-purple-50); color: var(--color-purple-500); }

/* ── Merge panel ── */
.tag-merge-details {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
}
.tag-merge-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2, 6px);
    padding: 10px 16px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    color: var(--color-text-secondary);
    background: var(--color-bg-hover);
    list-style: none;
    user-select: none;
}
.tag-merge-summary::-webkit-details-marker { display: none; }
.tag-merge-summary:hover { color: var(--coda-primary); background: var(--color-bg-hover); }

.tag-merge-form { padding: var(--space-4, 14px) var(--space-4, 14px) var(--space-5, 20px); }
.tag-merge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3, 10px);
}
.tag-merge-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 160px;
}
.tag-merge-field label { font-size: var(--text-2xs); color: var(--color-text-secondary); font-weight: var(--weight-medium); }
.tag-merge-arrow {
    font-size: var(--text-2xl);
    color: var(--color-text-muted);
    padding-bottom: 4px;
    flex-shrink: 0;
    align-self: flex-end;
}

/* ── Edit tag modal ── */
.tag-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 16px);
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
}
.tag-edit-overlay.tag-edit-visible { opacity: 1; }

.tag-edit-dialog {
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    transform: translateY(12px);
    transition: transform var(--duration-fast) ease;
    overflow: hidden;
}
.tag-edit-overlay.tag-edit-visible .tag-edit-dialog { transform: translateY(0); }

.tag-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border-bottom: 1px solid var(--color-border-light);
}
.tag-edit-header h3 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); }
.tag-edit-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: var(--radius-md, 6px);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.tag-edit-close:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.tag-edit-close:focus-visible { outline: 2px solid var(--coda-primary); }

.tag-edit-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 14px);
    padding: var(--space-5, 20px);
}
.tag-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tag-edit-field label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); }

.tag-edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3, 10px);
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-page);
}

/* ── Sidebar tag quick-filter ── */
.sidebar-tag-chips {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-1, 4px) 0;
}

.sidebar-tag-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-md, 6px);
    font-family: inherit;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-align: start;
    width: 100%;
    transition: background var(--transition-fast, 150ms), color var(--transition-fast, 150ms);
}
.sidebar-tag-chip:hover {
    background: var(--color-bg-hover);
    color: var(--coda-primary);
}
.sidebar-tag-chip:focus-visible { outline: 2px solid var(--coda-primary); }

.sidebar-tag-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    display: inline-block;
}
.sidebar-tag-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-tag-loading,
.sidebar-tag-empty {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    padding: 6px 14px;
    font-style: italic;
}


/* =====================================================
   FORCED-COLORS / HIGH-CONTRAST MODE
   Ensures colour-only indicators remain distinguishable
   when the OS overrides the colour palette.

   Priority left-strip width ladder:
     urgent  → 8 px  (maximum urgency)
     high    → 5 px
     normal  → 3 px
     default → 2 px

   Message-type left-strip width ladder
   (applies when no priority attr is set):
     incoming → 5 px
     outgoing → 4 px
     internal → 3 px

   Tag chips  → visible border + system colours
   Dot indicators (sidebar tag, inbox legend)
              → border ring + forced-color-adjust:none
                so colour-to-label mapping is preserved
   ===================================================== */
@media (forced-colors: active) {

    /* ── Left-strip base: make strip visible ── */
    .corr-list-card::before {
        background: ButtonText;
        forced-color-adjust: none;
    }

    /* Priority width ladder */
    .corr-list-card[data-priority="urgent"]::before,
    .corr-list-card.priority-urgent::before {
        width: 8px;
    }
    .corr-list-card[data-priority="high"]::before,
    .corr-list-card.priority-high::before {
        width: 5px;
    }
    .corr-list-card[data-priority="normal"]::before,
    .corr-list-card.priority-normal::before {
        width: 3px;
    }

    /* Message-type width ladder
       :not([data-priority]) guards prevent these from overriding
       the priority ladder above when both attrs are present. */
    .corr-list-card[data-msg-type="incoming"]:not([data-priority])::before { width: 5px; }
    .corr-list-card[data-msg-type="outgoing"]:not([data-priority])::before { width: 4px; }
    .corr-list-card[data-msg-type="internal"]:not([data-priority])::before { width: 3px; }
    .corr-list-card[data-msg-type="private"]:not([data-priority])::before  { width: 6px; }

    /* ── Unread indicator dot ── */
    /* Replace pulsing shadow with a solid ring so it stays
       visible without relying on colour alone. */
    .corr-list-card[data-unread="true"]::after,
    .corr-list-card.unread::after {
        background: ButtonText;
        border: 2px solid ButtonFace;
        box-shadow: none;
        animation: none;
        forced-color-adjust: none;
    }

    /* ── Tag chips ── */
    /* Chips carry a text label so they are already readable;
       we only need a visible chip boundary.
       dynamic inline bg/color are overridden with system colours. */
    .tag-chip-display,
    .msg-tag-chip,
    .inbox-tag-chip,
    .tag-suggest-chip {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    /* ── Sidebar tag dot & inbox legend dot ── */
    /* Purely colour-only circles.  Preserve the fill colour with
       forced-color-adjust so the colour-to-legend mapping stays
       meaningful, and add a ButtonText ring for minimum contrast. */
    .sidebar-tag-dot,
    .legend-dot {
        border: 2px solid ButtonText;
        forced-color-adjust: none;
    }
}