:root {
    color-scheme: light;
    --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --color-primary: #415F91;
    --color-primary-pressed: #344C75;
    --color-primary-container: #D9E2FF;
    --color-on-primary: #FFFFFF;
    --color-on-primary-container: #001A41;
    --color-neutral-900: #1B1B1F;
    --color-neutral-700: #45464F;
    --color-neutral-600: #5F6368;
    --color-neutral-500: #757680;
    --color-neutral-400: #A6A6AE;
    --color-neutral-300: #C7C7D0;
    --color-neutral-200: #E3E3EB;
    --color-white: #FFFFFF;

    --color-surface-app: #F7F7FF;
    --color-surface-main: #FFFFFF;
    --color-surface-settings: #FFFFFF;
    --color-surface-secondary: #F1F1F9;
    --color-surface-selected: #DCE3FF;
    --color-surface-disabled: #F1F1F9;
    --color-background: var(--color-surface-app);
    --color-surface-default: var(--color-surface-main);
    --color-surface-raised: var(--color-surface-main);
    --color-surface-pressed: var(--color-state-pressed);
    --color-surface-banner: var(--color-banner-info-background);
    --color-surface-sheet: var(--color-bottom-sheet-background);
    --color-surface-dialog: var(--color-dialog-background);

    --color-text-primary: #1B1B1F;
    --color-text-secondary: #45464F;
    --color-text-tertiary: #757680;
    --color-text-disabled: #A6A6AE;
    --color-text-inverse: #FFFFFF;
    --color-text-link: #415F91;
    --color-text-error: #BA1A1A;
    --color-text-warning: #8A5A00;
    --color-text-success: #2E6B3F;
    --color-text-on-primary: #FFFFFF;
    --color-text-on-primary-container: #001A41;

    --color-icon-primary: #5F6368;
    --color-icon-secondary: #757680;
    --color-icon-active: #415F91;
    --color-icon-disabled: #A6A6AE;
    --color-icon-inverse: #FFFFFF;
    --color-icon-on-primary: #FFFFFF;
    --color-icon-error: var(--color-text-error);
    --color-icon-warning: var(--color-text-warning);
    --color-icon-success: var(--color-text-success);

    --color-border-default: #C7C7D0;
    --color-border-subtle: #E3E3EB;
    --color-border-focus: #415F91;
    --color-border-selected: #415F91;
    --color-border-disabled: #D7D7DE;
    --color-border-strong: var(--color-border-default);
    --color-border-success: var(--color-state-success-container);
    --color-border-error: var(--color-state-error-container);
    --color-divider: #E3E3EB;

    --color-state-hover: rgba(65, 95, 145, 0.05);
    --color-state-pressed: rgba(65, 95, 145, 0.10);
    --color-state-dragged: rgba(65, 95, 145, 0.12);
    --color-state-scrim: rgba(27, 27, 31, 0.32);
    --color-state-success: #2E6B3F;
    --color-state-success-container: #D8F3DD;
    --color-state-success-on-container: #0B3418;
    --color-state-warning: #8A5A00;
    --color-state-warning-container: #FFE8B3;
    --color-state-warning-on-container: #3A2500;
    --color-state-error: #BA1A1A;
    --color-state-error-container: #FFDAD6;
    --color-state-error-on-container: #410002;
    --color-state-info: #415F91;
    --color-state-info-container: #D9E2FF;
    --color-state-info-on-container: #001A41;
    --color-state-offline: #5F6368;
    --color-state-offline-container: #F1F1F9;
    --color-state-offline-on-container: #1B1B1F;
    --color-state-pending: #6C5E00;
    --color-state-pending-container: #F5E7A2;
    --color-state-pending-on-container: #211B00;
    --color-state-success-surface: var(--color-state-success-container);
    --color-state-warning-surface: var(--color-state-warning-container);
    --color-state-error-surface: var(--color-state-error-container);
    --color-state-info-surface: var(--color-state-info-container);

    --color-action-primary: var(--color-primary);
    --color-action-primary-pressed: var(--color-primary-pressed);
    --color-action-primary-disabled: var(--color-button-disabled-background);
    --color-action-secondary: var(--color-primary);
    --color-action-destructive: var(--color-button-destructive-background);
    --color-action-destructive-pressed: var(--color-state-error-on-container);

    --color-message-background: #FFFFFF;
    --color-message-selected: #DCE3FF;
    --color-message-read-text: #45464F;
    --color-message-read-meta: #757680;
    --color-message-unread-text: #1B1B1F;
    --color-message-unread-meta: #1B1B1F;
    --color-message-unread-border: #415F91;
    --color-message-attachment: #5F6368;
    --color-message-selection: #415F91;
    --color-message-selection-check: #FFFFFF;

    --color-search-background: #FFFFFF;
    --color-search-text: #1B1B1F;
    --color-search-placeholder: #5F6368;
    --color-search-icon: #5F6368;
    --color-search-active: #415F91;

    --color-navigation-background: #F0F0F8;
    --color-navigation-inactive: #5F6368;
    --color-navigation-active: #415F91;
    --color-navigation-indicator: #D9E2FF;
    --color-navigation-border: #E3E3EB;

    --color-selection-background: #F0F0F8;
    --color-selection-text: #1B1B1F;
    --color-selection-icon: #415F91;
    --color-selection-disabled: #A6A6AE;

    --color-reply-bar-background: #F0F0F8;
    --color-reply-action-background: #5B657C;
    --color-reply-action-foreground: #FFFFFF;
    --color-reply-action-pressed: #4C566B;
    --color-reply-action-disabled-bg: #D7D7DE;
    --color-reply-action-disabled-fg: #8B8C94;

    --color-button-primary-background: #415F91;
    --color-button-primary-foreground: #FFFFFF;
    --color-button-secondary-background: #FFFFFF;
    --color-button-secondary-foreground: #415F91;
    --color-button-secondary-border: #C7C7D0;
    --color-button-text-foreground: #415F91;
    --color-button-disabled-background: #D7D7DE;
    --color-button-disabled-foreground: #8B8C94;
    --color-button-disabled-border: #D7D7DE;
    --color-button-destructive-background: #BA1A1A;
    --color-button-destructive-foreground: #FFFFFF;
    --color-button-destructive-tonal-background: #FFDAD6;
    --color-button-destructive-tonal-foreground: #410002;

    --color-field-background: #FFFFFF;
    --color-field-text: #1B1B1F;
    --color-field-label: #45464F;
    --color-field-placeholder: #757680;
    --color-field-border: #C7C7D0;
    --color-field-focus: #415F91;
    --color-field-error: #BA1A1A;
    --color-control-checked: #415F91;
    --color-control-on-checked: #FFFFFF;
    --color-control-unchecked: #5F6368;
    --color-switch-track-active: #AFC6FF;
    --color-switch-thumb-active: #234777;
    --color-switch-track-inactive: #E3E3EB;
    --color-switch-thumb-inactive: #757680;

    --color-account-1: #5B6FAF;
    --color-account-2: #2F7D6B;
    --color-account-3: #9A5A6A;
    --color-account-4: #8A6A2F;
    --color-account-5: #6F5A9A;
    --color-account-6: #3E748A;
    --color-account-default: var(--color-account-1);

    --color-sender-background-1: #DDE5FF;
    --color-sender-background-2: #D5EEE8;
    --color-sender-background-3: #F5DDE4;
    --color-sender-background-4: #F3E6C8;
    --color-sender-background-5: #E8DFF5;
    --color-sender-background-6: #D8EAF0;
    --color-sender-foreground: #1B1B1F;
    --color-sender-unread-border: #415F91;

    --color-bottom-sheet-background: #FFFFFF;
    --color-bottom-sheet-foreground: #1B1B1F;
    --color-dialog-background: #FFFFFF;
    --color-dialog-foreground: #1B1B1F;
    --color-snackbar-background: #303036;
    --color-snackbar-foreground: #FFFFFF;
    --color-snackbar-action: #C7D5FF;
    --color-banner-info-background: #EEF2FF;
    --color-banner-info-foreground: #1B1B1F;
    --color-banner-success-background: #E7F6EA;
    --color-banner-success-foreground: #153A20;
    --color-banner-warning-background: #FFF3D6;
    --color-banner-warning-foreground: #4A3100;
    --color-banner-error-background: #FFE9E6;
    --color-banner-error-foreground: #5A0B0B;

    --color-overlay: var(--color-state-hover);
    --color-scrim: var(--color-state-scrim);

    --type-display-size: 1.75rem;
    --type-display-line-height: 1.2;
    --type-screen-title-size: 1.35rem;
    --type-screen-title-line-height: 1.25;
    --type-section-title-size: 1rem;
    --type-section-title-line-height: 1.35;
    --type-row-title-size: 1rem;
    --type-row-title-line-height: 1.35;
    --type-body-size: 1rem;
    --type-body-line-height: 1.5;
    --type-body-strong-weight: 650;
    --type-secondary-size: 0.875rem;
    --type-secondary-line-height: 1.4;
    --type-metadata-size: 0.75rem;
    --type-metadata-line-height: 1.2;
    --type-button-label-size: 0.875rem;
    --type-button-label-line-height: 1.2;
    --type-input-size: 1rem;
    --type-input-line-height: 1.4;
    --type-helper-size: 0.75rem;
    --type-helper-line-height: 1.4;
    --type-error-size: 0.875rem;
    --type-error-line-height: 1.4;
    --type-badge-size: 0.75rem;
    --type-badge-line-height: 1.2;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 650;
    --font-weight-bold: 700;

    --spacing-none: 0;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.75rem;
    --spacing-lg: 1rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-section: 2.5rem;
    --spacing-screen: 3rem;
    --spacing-major: 4rem;

    --radius-none: 0;
    --radius-xs: 0.25rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999rem;

    --touch-min: 3rem;
    --touch-comfortable: 3.5rem;
    --touch-large: 4rem;
    --size-header-height: 3.5rem;
    --size-button-height-default: 3rem;
    --size-field-height-default: 3.5rem;
    --size-message-row-height: 4.5rem;
    --size-bottom-action-bar-height: 4rem;
    --size-selection-action-bar-height: calc(
        var(--touch-min) + var(--touch-min) + var(--spacing-xs) + var(--spacing-xs)
        + var(--spacing-xs) + var(--safe-area-bottom) + var(--border-hairline)
    );
    --icon-xs: 1rem;
    --icon-sm: 1.25rem;
    --icon-md: 1.5rem;
    --icon-lg: 2rem;
    --icon-xl: 2.5rem;
    --icon-stroke-width: 1.8;

    --border-none: 0;
    --border-hairline: 1px;
    --border-emphasis: 2px;
    --divider-size: var(--border-hairline);

    --shadow-none: none;
    --shadow-low: 0 1px 2px rgba(27, 27, 31, 0.08);
    --shadow-medium: 0 4px 12px rgba(27, 27, 31, 0.12);
    --elevation-none: var(--shadow-none);
    --elevation-low: var(--shadow-low);
    --elevation-medium: var(--shadow-medium);
    --elevation-high: var(--shadow-medium);

    --opacity-disabled: 0.65;
    --opacity-secondary: 0.72;
    --opacity-overlay: 0.08;
    --opacity-scrim: 0.45;
    --opacity-skeleton: 0.55;

    --motion-instant: 100ms;
    --motion-fast: 150ms;
    --motion-standard: 250ms;
    --motion-slow: 350ms;
    --motion-ease-standard: ease;
    --motion-ease-enter: ease-out;
    --motion-ease-exit: ease-in;
    --motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

    --state-focus-ring: 0 0 0 3px var(--color-state-pressed);
    --state-selected-surface: var(--color-surface-selected);
    --state-pressed-surface: var(--color-surface-pressed);
    --state-disabled-opacity: var(--opacity-disabled);
    --state-loading-opacity: var(--opacity-secondary);
    --skeleton-surface: var(--color-surface-disabled);
    --skeleton-highlight: var(--color-surface-banner);

    --z-page-content: 0;
    --z-sticky-header: 1;
    --z-bottom-navigation: 2;
    --z-snackbar: 3;
    --z-bottom-sheet: 4;
    --z-dialog: 5;
    --z-critical-overlay: 6;

    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-keyboard: 0px;

    --message-row-height: var(--size-message-row-height);
    --header-height: var(--size-header-height);
    --button-height-default: var(--size-button-height-default);
    --search-field-radius: var(--radius-pill);
    --bottom-sheet-radius: var(--radius-xl);
    --sender-avatar-size: 2.5rem;
    --account-marker-size: 0.625rem;

    --color-bg: var(--color-background);
    --color-surface: var(--color-surface-default);
    --color-text: var(--color-text-primary);
    --color-muted: var(--color-text-secondary);
    --color-border: var(--color-border-default);
    --color-accent: var(--color-action-primary);
    --color-danger: var(--color-action-destructive);
    --space-1: var(--spacing-sm);
    --space-2: var(--spacing-md);
    --space-3: var(--spacing-lg);
    --space-4: var(--spacing-xl);

    font-family: var(--font-family-sans);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
}

body.modal-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.app-shell {
    min-height: 100vh;
    background: var(--color-surface-default);
}

.cookie-notice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-md);
    align-items: start;
    padding: var(--spacing-md) max(var(--spacing-md), var(--safe-area-right))
        var(--spacing-md) max(var(--spacing-md), var(--safe-area-left));
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-banner-info-background);
    color: var(--color-banner-info-foreground);
}

.cookie-notice-copy {
    min-width: 0;
}

.cookie-notice h2 {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--type-section-title-size);
    line-height: var(--type-section-title-line-height);
}

.cookie-notice p {
    overflow-wrap: anywhere;
    margin: 0;
    font-size: var(--type-secondary-size);
    line-height: var(--type-secondary-line-height);
}

.cookie-notice-action {
    align-self: start;
    flex: 0 0 auto;
    white-space: nowrap;
}

.app-header {
    position: sticky;
    z-index: var(--z-sticky-header);
    top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: var(--message-row-height);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-border-default);
    background: rgb(255 255 255 / 96%);
}

.app-header > div:first-child {
    min-width: 0;
}

.header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.header-search {
    position: relative;
    order: 3;
    flex: 1 0 100%;
    min-width: 7.5rem;
    max-width: 22rem;
}

.header-search input {
    width: 100%;
    min-height: var(--touch-min);
    padding: 0 3rem 0 var(--spacing-md);
    border: var(--border-hairline) solid var(--color-border-default);
    border-radius: var(--search-field-radius);
    background: var(--color-surface-banner);
    color: var(--color-text-primary);
    outline: none;
}

.header-search input:focus {
    border-color: var(--color-action-primary);
    background: var(--color-surface-default);
}

.search-button {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.header-actions .text-button {
    padding-right: 0.35rem;
    padding-left: 0.35rem;
    font-size: 0.75rem;
}

.app-header h1,
.login-card h1,
.status-view .status-title {
    margin: 0;
    font-size: var(--type-screen-title-size);
    line-height: var(--type-screen-title-line-height);
}

.app-header h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header.is-message-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm);
}

.app-header.is-message-list > div:first-child {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.app-header.is-message-list .header-search {
    order: 0;
    flex: 1 1 auto;
    max-width: none;
}

.app-header.is-search-mode .header-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-sm);
}

.app-header.is-search-mode .header-search input {
    grid-column: 1;
    grid-row: 1;
    padding-right: var(--spacing-md);
}

.app-header.is-search-mode .search-button {
    display: none;
}

.search-exit-button {
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
}

.app-header.is-message-list .header-actions {
    position: fixed;
    z-index: var(--z-bottom-navigation);
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    min-height: calc(var(--size-bottom-action-bar-height) + var(--safe-area-bottom));
    padding: var(--spacing-xs) max(var(--spacing-sm), var(--safe-area-right))
        calc(var(--safe-area-bottom) + var(--spacing-xs)) max(var(--spacing-sm), var(--safe-area-left));
    border-top: var(--border-hairline) solid var(--color-navigation-border);
    background: var(--color-navigation-background);
    box-shadow: var(--shadow-low);
}

.app-header.is-unified-inbox .header-actions {
    position: static;
    display: flex;
    min-height: 0;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.app-header.is-unified-inbox .header-actions #folders-button,
.app-header.is-unified-inbox .header-actions #compose-button,
.app-header.is-local-folder-list .header-actions #folders-button,
.app-header.is-local-folder-list .header-actions #compose-button,
.app-header.is-system-folder-list .header-actions #folders-button,
.app-header.is-system-folder-list .header-actions #compose-button,
.app-header.is-provider-folder-list .header-actions #folders-button,
.app-header.is-provider-folder-list .header-actions #compose-button {
    display: none;
}

.app-header.is-unified-inbox + .app-content,
.app-header.is-local-folder-list + .app-content,
.app-header.is-system-folder-list + .app-content,
.app-header.is-provider-folder-list + .app-content {
    padding-bottom: calc(var(--size-bottom-action-bar-height) + var(--safe-area-bottom) + var(--spacing-md));
}

.bottom-navigation {
    position: fixed;
    z-index: var(--z-bottom-navigation);
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    min-height: calc(var(--size-bottom-action-bar-height) + var(--safe-area-bottom));
    padding: var(--spacing-xs) max(var(--spacing-sm), var(--safe-area-right))
        calc(var(--safe-area-bottom) + var(--spacing-xs)) max(var(--spacing-sm), var(--safe-area-left));
    border-top: var(--border-hairline) solid var(--color-navigation-border);
    background: var(--color-navigation-background);
    box-shadow: var(--shadow-low);
}

.bottom-navigation-item {
    display: inline-flex;
    min-width: 0;
    min-height: var(--touch-min);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2xs);
    padding: var(--spacing-2xs) var(--spacing-xs);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-navigation-inactive);
    font: inherit;
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
    text-align: center;
}

.bottom-navigation-icon {
    display: grid;
    width: var(--touch-comfortable);
    min-height: var(--touch-comfortable);
    place-items: center;
    border-radius: var(--radius-pill);
    line-height: 1;
}

.icon {
    display: block;
    width: var(--icon-md);
    height: var(--icon-md);
    flex: 0 0 auto;
    stroke-width: var(--icon-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bottom-navigation-item.is-selected {
    color: var(--color-navigation-active);
    font-weight: var(--font-weight-semibold);
}

.bottom-navigation-item.is-selected .bottom-navigation-icon {
    background: var(--color-navigation-indicator);
}

.bottom-navigation-compose .bottom-navigation-icon {
    background: var(--color-navigation-indicator);
    color: var(--color-navigation-active);
    font-size: var(--type-screen-title-size);
}

.bottom-navigation-item:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.app-header.is-local-folder-list .header-actions {
    position: static;
    display: flex;
    min-height: 0;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.app-header.is-system-folder-list .header-actions {
    position: static;
    display: flex;
    min-height: 0;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.app-header.is-provider-folder-list .header-actions {
    position: static;
    display: flex;
    min-height: 0;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.app-header.is-message-list .header-actions .text-button {
    min-width: 0;
    min-height: var(--touch-min);
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-pill);
    color: var(--color-navigation-inactive);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
    white-space: normal;
}

.app-header.is-message-list #compose-button {
    background: var(--color-navigation-indicator);
    color: var(--color-navigation-active);
    font-weight: var(--font-weight-semibold);
}

.app-header.is-message-list + .app-content {
    padding-bottom: calc(var(--size-bottom-action-bar-height) + var(--safe-area-bottom) + var(--spacing-md));
}

.app-header.is-search-mode .header-actions {
    display: none;
}

.app-header.is-message-list:not(.is-selection-mode) .header-actions {
    display: none;
}

.app-header.is-search-mode + .app-content {
    padding-bottom: 0;
}

.app-header.is-message-list.is-selection-mode {
    display: block;
    min-height: calc(var(--touch-min) + (var(--spacing-sm) * 2));
    padding: var(--spacing-sm) var(--spacing-lg);
}

.app-header.is-message-list.is-selection-mode > :not(.selection-header):not(.selection-action-bar) {
    display: none;
}

.app-header.is-message-list.is-selection-mode .header-actions {
    display: none;
}

.app-header.is-message-list.is-selection-mode + .app-content {
    padding-bottom: calc(var(--size-bottom-action-bar-height) + var(--safe-area-bottom) + var(--spacing-md));
}

.selection-header {
    display: grid;
    grid-template-columns: var(--touch-min) minmax(0, 1fr);
    align-items: center;
    min-height: var(--touch-min);
    gap: var(--spacing-sm);
}

.selection-close {
    width: var(--touch-min);
    min-width: var(--touch-min);
    height: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
}

.selection-count {
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--type-screen-title-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-screen-title-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selection-action-bar {
    position: fixed;
    z-index: var(--z-bottom-navigation);
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-xs);
    min-height: calc(var(--size-bottom-action-bar-height) + var(--safe-area-bottom));
    padding: var(--spacing-xs) max(var(--spacing-sm), var(--safe-area-right))
        calc(var(--safe-area-bottom) + var(--spacing-xs)) max(var(--spacing-sm), var(--safe-area-left));
    border-top: var(--border-hairline) solid var(--color-navigation-border);
    background: var(--color-navigation-background);
    box-shadow: var(--shadow-low);
}

.selection-action-bar[hidden] {
    display: none;
}

.selection-action {
    min-width: 0;
    min-height: var(--touch-min);
    padding: 0 var(--spacing-xs);
    border-radius: var(--radius-pill);
    color: var(--color-navigation-inactive);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
    white-space: normal;
}

.selection-action-danger {
    color: var(--color-text-error);
}

.selection-action-bar[aria-busy="true"] {
    opacity: 0.72;
}

.selection-operation-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin: var(--spacing-sm) var(--spacing-lg);
    overflow-wrap: anywhere;
}

.selection-operation-feedback .secondary-button {
    flex: 0 0 auto;
}

.snackbar.selection-operation-snackbar {
    bottom: calc(var(--size-selection-action-bar-height) + var(--spacing-sm));
}

.search-filter-bar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-surface-app);
}

.search-filter-scroll {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: var(--spacing-sm);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--spacing-sm) var(--spacing-lg);
    scrollbar-width: none;
}

.search-filter-scroll::-webkit-scrollbar {
    display: none;
}

.search-filter-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--spacing-xs);
    max-width: min(16rem, 72vw);
    min-height: var(--touch-min);
    padding: 0 var(--spacing-md);
    border: var(--border-hairline) solid var(--color-button-secondary-border);
    border-radius: var(--radius-pill);
    background: var(--color-button-secondary-background);
    color: var(--color-button-secondary-foreground);
    font-size: var(--type-button-label-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-button-label-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-filter-chip.is-active {
    border-color: var(--color-border-selected);
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.search-filter-chip-check {
    flex: 0 0 auto;
    font-size: var(--icon-xs);
    line-height: 1;
}

.search-filter-reset {
    border-color: transparent;
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .search-filter-chip:hover {
        background: var(--color-state-hover);
    }

    .search-filter-chip.is-active:hover {
        background: var(--color-primary-container);
    }
}

.search-filter-chip:active {
    background: var(--color-state-pressed);
}

.search-filter-chip:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.search-filter-error {
    margin: var(--spacing-sm) var(--spacing-lg) 0;
}

.eyebrow {
    overflow: hidden;
    margin: 0 0 0.125rem;
    color: var(--color-text-secondary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-button,
.primary-button,
.secondary-button,
.danger-button,
.search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min);
    border-radius: var(--radius-md);
    font-size: var(--type-button-label-size);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    line-height: var(--type-button-label-line-height);
    text-align: center;
    text-decoration: none;
    touch-action: manipulation;
    transition:
        background-color var(--motion-fast) var(--motion-ease-standard),
        border-color var(--motion-fast) var(--motion-ease-standard),
        color var(--motion-fast) var(--motion-ease-standard),
        box-shadow var(--motion-fast) var(--motion-ease-standard);
}

.icon-button {
    display: inline-flex;
    width: var(--touch-min);
    min-width: var(--touch-min);
    height: var(--touch-min);
    min-height: var(--touch-min);
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-icon-primary);
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    touch-action: manipulation;
    transition:
        background-color var(--motion-fast) var(--motion-ease-standard),
        color var(--motion-fast) var(--motion-ease-standard),
        box-shadow var(--motion-fast) var(--motion-ease-standard);
}

.icon-button:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.icon-button:active {
    background: var(--color-state-pressed);
}

.icon-button:disabled,
.icon-button[aria-disabled='true'] {
    background: transparent;
    color: var(--color-icon-disabled);
    cursor: not-allowed;
}

.icon-button[aria-busy='true']::after {
    width: 0.875rem;
    height: 0.875rem;
    border: var(--border-emphasis) solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    content: "";
    animation: spin 0.8s linear infinite;
}

.icon-button[aria-busy='true'] .icon {
    visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .icon-button:hover:not(:disabled):not([aria-disabled='true']) {
        background: var(--color-state-hover);
    }
}

.text-button:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.danger-button:focus-visible,
.search-button:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.text-button {
    padding: 0 var(--spacing-md);
    border: 0;
    background: transparent;
    color: var(--color-button-text-foreground);
}

.primary-button,
.secondary-button,
.danger-button {
    padding: 0 var(--spacing-lg);
    border: var(--border-hairline) solid transparent;
}

.primary-button {
    background: var(--color-button-primary-background);
    color: var(--color-button-primary-foreground);
}

.secondary-button {
    border-color: var(--color-button-secondary-border);
    background: var(--color-button-secondary-background);
    color: var(--color-button-secondary-foreground);
}

.danger-button {
    border-color: transparent;
    background: var(--color-button-destructive-tonal-background);
    color: var(--color-button-destructive-tonal-foreground);
}

.search-button {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-icon-active);
}

@media (hover: hover) and (pointer: fine) {
    .text-button:hover,
    .search-button:hover {
        background: var(--color-state-hover);
    }

    .primary-button:hover {
        background: var(--color-primary-pressed);
    }

    .secondary-button:hover {
        background: var(--color-state-hover);
    }

    .danger-button:hover {
        background: var(--color-state-error-container);
    }
}

.text-button:active,
.search-button:active {
    background: var(--color-state-pressed);
}

.primary-button:active {
    background: var(--color-primary-pressed);
}

.secondary-button:active {
    background: var(--color-state-pressed);
}

.danger-button:active {
    background: var(--color-state-error-container);
}

.text-button:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled,
.search-button:disabled,
.text-button[aria-disabled='true'],
.primary-button[aria-disabled='true'],
.secondary-button[aria-disabled='true'],
.danger-button[aria-disabled='true'],
.search-button[aria-disabled='true'] {
    border-color: var(--color-button-disabled-border);
    background: var(--color-button-disabled-background);
    color: var(--color-button-disabled-foreground);
    cursor: not-allowed;
    opacity: 1;
}

.text-button[aria-busy='true'],
.primary-button[aria-busy='true'],
.secondary-button[aria-busy='true'],
.danger-button[aria-busy='true'],
.search-button[aria-busy='true'] {
    cursor: wait;
}

.text-button[aria-busy='true']::before,
.primary-button[aria-busy='true']::before,
.secondary-button[aria-busy='true']::before,
.danger-button[aria-busy='true']::before {
    width: 0.875rem;
    height: 0.875rem;
    margin-right: var(--spacing-sm);
    border: var(--border-emphasis) solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    content: "";
    animation: spin 0.8s linear infinite;
}

.app-content {
    min-height: calc(100vh - 4.5rem);
}

.login-view,
.status-view {
    display: grid;
    place-content: center;
    padding: var(--space-4);
    text-align: center;
}

.login-view,
.app-header[hidden] + .app-content .status-view {
    min-height: 100vh;
}

.status-view {
    min-height: calc(100vh - 4.5rem);
}

.login-card {
    width: min(100%, 24rem);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface);
    box-shadow: 0 0.5rem 2rem rgb(23 32 51 / 8%);
    text-align: left;
}

.login-auth-view {
    min-height: 100vh;
    align-content: start;
    justify-items: center;
    padding: max(var(--space-4), var(--safe-area-top)) var(--space-3) var(--space-5);
    background: var(--color-surface-settings);
}

.login-auth-screen {
    width: min(100%, 26rem);
    padding: var(--space-4) 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.auth-brand {
    margin: 0 0 var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--type-section-title-size);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0;
}

.login-auth-screen h1 {
    margin: 0 0 var(--space-4);
    color: var(--color-text-primary);
    font-size: var(--type-display-size);
    line-height: var(--type-display-line-height);
}

.login-auth-screen .login-form {
    gap: var(--space-3);
}

.login-auth-screen .login-form > .primary-button {
    width: 100%;
    min-height: var(--touch-comfortable);
}

.login-links {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-4);
}

.login-links .auth-link {
    min-height: var(--touch-min);
    padding: 0;
}

.login-auth-screen .form-error {
    margin: 0;
}

.register-auth-view {
    min-height: 100vh;
    align-content: start;
    justify-items: center;
    padding: max(var(--space-4), var(--safe-area-top)) var(--space-3) var(--space-5);
    background: var(--color-surface-settings);
}

.register-auth-screen {
    width: min(100%, 26rem);
    padding: var(--space-4) 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.register-auth-screen h1 {
    margin: 0 0 var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--type-display-size);
    line-height: var(--type-display-line-height);
}

.register-auth-screen > p:not(.auth-brand) {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
    line-height: var(--type-body-line-height);
}

.register-auth-screen .login-form {
    gap: var(--space-3);
}

.register-auth-screen .login-form > .primary-button {
    width: 100%;
    min-height: var(--touch-comfortable);
}

.register-links {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-4);
}

.register-links .auth-link {
    min-height: var(--touch-min);
    padding: 0;
}

.register-auth-screen .form-error {
    margin: 0;
}

.forgot-auth-view {
    min-height: 100vh;
    align-content: start;
    justify-items: center;
    padding: max(var(--space-4), var(--safe-area-top)) var(--space-3) var(--space-5);
    background: var(--color-surface-settings);
}

.forgot-auth-screen {
    width: min(100%, 26rem);
    padding: var(--space-4) 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.forgot-auth-screen h1 {
    margin: 0 0 var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--type-display-size);
    line-height: var(--type-display-line-height);
}

.forgot-auth-screen > p:not(.auth-brand) {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
    line-height: var(--type-body-line-height);
}

.forgot-auth-screen .login-form {
    gap: var(--space-3);
}

.forgot-auth-screen .login-form > .primary-button {
    width: 100%;
    min-height: var(--touch-comfortable);
}

.forgot-auth-screen .form-error,
.forgot-auth-screen .form-success {
    margin: 0;
}

.forgot-links {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-4);
}

.forgot-links .auth-link {
    min-height: var(--touch-min);
    padding: 0;
}

.reset-auth-view {
    min-height: 100vh;
    align-content: start;
    justify-items: center;
    padding: max(var(--space-4), var(--safe-area-top)) var(--space-3) var(--space-5);
    background: var(--color-surface-settings);
}

.reset-auth-screen {
    width: min(100%, 26rem);
    padding: var(--space-4) 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.reset-auth-screen h1 {
    margin: 0 0 var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--type-display-size);
    line-height: var(--type-display-line-height);
}

.reset-auth-screen > p:not(.auth-brand) {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
    line-height: var(--type-body-line-height);
}

.reset-auth-screen .login-form {
    gap: var(--space-3);
}

.reset-auth-screen .login-form > .primary-button {
    width: 100%;
    min-height: var(--touch-comfortable);
}

.reset-auth-screen .form-error {
    margin: 0;
}

.reset-links {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-4);
}

.reset-links .auth-link {
    min-height: var(--touch-min);
    padding: 0;
}

.verification-auth-view {
    min-height: 100vh;
    align-content: start;
    justify-items: center;
    padding: max(var(--space-4), var(--safe-area-top)) var(--space-3) var(--space-5);
    background: var(--color-surface-settings);
}

.verification-auth-screen {
    width: min(100%, 26rem);
    padding: var(--space-4) 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.verification-auth-screen h1 {
    margin: 0 0 var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--type-display-size);
    line-height: var(--type-display-line-height);
}

.verification-auth-screen > p:not(.auth-brand) {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
    line-height: var(--type-body-line-height);
    overflow-wrap: anywhere;
}

.verification-auth-screen .auth-action-link {
    min-height: var(--touch-comfortable);
}

.verification-actions {
    display: grid;
    gap: var(--space-3);
}

.verification-actions > .primary-button,
.verification-actions > .secondary-button,
.verification-change-form > .primary-button,
.verification-change-form > .secondary-button {
    width: 100%;
    min-height: var(--touch-comfortable);
}

.verification-auth-screen .form-error,
.verification-auth-screen .form-success {
    margin: 0 0 var(--space-4);
}

.verification-email {
    color: var(--color-text-primary) !important;
    font-weight: var(--font-weight-semibold);
}

.login-card > p,
.status-view p {
    margin: var(--space-1) 0 var(--space-4);
    color: var(--color-muted);
    line-height: 1.5;
}

.auth-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 var(--space-3);
}

.auth-link {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    padding: 0 var(--space-2);
    border-radius: 0.5rem;
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 650;
    text-decoration: none;
}

.auth-link-current {
    background: #edf2ff;
    color: #2447b8;
}

.auth-action-link {
    width: 100%;
}

.login-form {
    display: grid;
    gap: var(--space-3);
}

.field {
    display: grid;
    min-width: 0;
    gap: var(--spacing-xs);
    color: var(--color-field-label);
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-secondary-line-height);
}

.field-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.field-control {
    position: relative;
    display: grid;
    min-width: 0;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: var(--size-field-height-default);
    padding: 0 var(--spacing-md);
    border: var(--border-hairline) solid var(--color-field-border);
    border-radius: var(--radius-md);
    background: var(--color-field-background);
    color: var(--color-field-text);
    font-size: var(--type-input-size);
    line-height: var(--type-input-line-height);
    outline: 0;
    transition:
        background-color var(--motion-fast) var(--motion-ease-standard),
        border-color var(--motion-fast) var(--motion-ease-standard),
        box-shadow var(--motion-fast) var(--motion-ease-standard),
        color var(--motion-fast) var(--motion-ease-standard);
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--color-field-placeholder);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--color-field-focus);
    box-shadow: var(--state-focus-ring);
}

.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
    border-color: var(--color-field-error);
}

.field input[aria-invalid='true']:focus,
.field select[aria-invalid='true']:focus,
.field textarea[aria-invalid='true']:focus {
    box-shadow: 0 0 0 3px var(--color-state-error-container);
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
    border-color: var(--color-border-disabled);
    background: var(--color-surface-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.field input:read-only:not(:disabled),
.field textarea:read-only:not(:disabled) {
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
}

.field textarea {
    min-height: calc(var(--size-field-height-default) * 2.5);
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    resize: vertical;
}

.field select {
    cursor: pointer;
}

.field-hint {
    min-height: calc(var(--type-helper-size) * var(--type-helper-line-height));
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: var(--type-helper-size);
    font-weight: 400;
    line-height: var(--type-helper-line-height);
}

.field-control-password input {
    padding-right: calc(var(--touch-min) + var(--spacing-xl));
}

.password-visibility-button {
    position: absolute;
    top: 50%;
    right: 0;
    display: inline-flex;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-sm);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-button-text-foreground);
    cursor: pointer;
    font-size: var(--type-helper-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-helper-line-height);
    transform: translateY(-50%);
}

.password-visibility-button:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

@media (hover: hover) and (pointer: fine) {
    .field input:hover:not(:disabled):not(:focus),
    .field select:hover:not(:disabled):not(:focus),
    .field textarea:hover:not(:disabled):not(:focus) {
        border-color: var(--color-text-secondary);
    }

    .password-visibility-button:hover {
        background: var(--color-state-hover);
    }
}

.password-visibility-button:active {
    background: var(--color-state-pressed);
}

.password-visibility-button:disabled {
    color: var(--color-button-disabled-foreground);
    cursor: not-allowed;
}

.field-control:has(input:disabled) .password-visibility-button {
    color: var(--color-button-disabled-foreground);
    cursor: not-allowed;
    pointer-events: none;
}

.compose-form:not(.account-form):not(.filter-form) .field input,
.compose-form:not(.account-form):not(.filter-form) .field select,
.compose-form:not(.account-form):not(.filter-form) .field textarea {
    min-height: 2.75rem;
    padding: 0 var(--space-2);
    border: 1px solid #b8c1d1;
    border-radius: 0.65rem;
    background: #fff;
    color: var(--color-text);
    font-size: inherit;
    line-height: inherit;
}

.compose-form:not(.account-form):not(.filter-form) .field {
    color: inherit;
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-secondary-line-height);
}

.compose-form:not(.account-form):not(.filter-form) .field input:focus,
.compose-form:not(.account-form):not(.filter-form) .field select:focus,
.compose-form:not(.account-form):not(.filter-form) .field textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(49 93 231 / 15%);
}

.compose-form:not(.account-form):not(.filter-form) .field textarea {
    min-height: 12rem;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    line-height: 1.5;
}

.recipient-field {
    position: relative;
    min-width: 0;
}

.recipient-block {
    display: grid;
    min-width: 0;
    gap: 0;
}

.recipient-block-extra {
    display: grid;
    min-width: 0;
    gap: 0;
}

.recipient-block-extra[hidden] {
    display: none;
}

.recipient-block-toggle {
    justify-self: start;
    min-height: var(--touch-min);
    padding: 0 var(--spacing-lg);
    color: var(--color-text-link);
}

.recipient-label {
    display: grid;
    gap: var(--space-1);
}

.recipient-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.125rem var(--space-1);
    border: 1px solid #b8c1d1;
    border-radius: 0.65rem;
    background: #fff;
    color: var(--color-text);
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
}

.recipient-control:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(49 93 231 / 15%);
}

.recipient-chips {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-width: 0;
}

.recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    min-height: 2.25rem;
    padding-left: var(--space-2);
    border: 1px solid #b8c1d1;
    border-radius: 999px;
    background: #f2f4f8;
    color: var(--color-text);
}

.recipient-chip-email {
    min-width: 0;
    overflow-wrap: anywhere;
}

.recipient-chip-remove {
    display: inline-grid;
    place-items: center;
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.recipient-chip-remove:hover,
.recipient-chip-remove:focus-visible {
    background: var(--color-state-hover);
    color: var(--color-text);
}

.compose-form:not(.account-form):not(.filter-form) .recipient-control input,
.compose-form:not(.account-form):not(.filter-form) .recipient-control input:focus {
    flex: 1 1 12rem;
    min-width: 0;
    max-width: 100%;
    min-height: 2.25rem;
    padding: 0 var(--space-1);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.recipient-error {
    margin: 0;
}

.recipient-suggestions {
    position: absolute;
    z-index: 20;
    top: calc(100% - 0.25rem);
    right: 0;
    left: 0;
    max-height: 14rem;
    margin: 0;
    padding: 0.25rem;
    overflow-y: auto;
    list-style: none;
    border: 1px solid #b8c1d1;
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: 0 0.5rem 1.5rem rgb(23 31 49 / 15%);
}

.recipient-suggestions[hidden] {
    display: none;
}

.recipient-suggestion {
    display: grid;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.45rem;
    cursor: pointer;
}

.recipient-suggestion[aria-selected='true'],
.recipient-suggestion:hover {
    background: #eef2ff;
}

.recipient-suggestion-email {
    font-weight: 650;
}

.recipient-suggestion-name {
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 400;
}

.compose-form {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
}

.compose-form .primary-button {
    justify-self: start;
}

.composer-save-status {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.composer-save-error {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
}

.composer-save-error-message {
    margin: 0;
}

.composer-save-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.account-list-view,
.account-detail {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
}

.account-connection-form {
    min-width: 0;
    padding: var(--space-3);
}

.account-connection-intro {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    padding-bottom: var(--space-1);
}

.account-connection-intro h2 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
}

.account-connection-intro p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.account-form-actions {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.account-form-actions .primary-button,
.account-form-actions .secondary-button {
    width: 100%;
    min-height: 2.75rem;
    justify-content: center;
}

.account-password-note {
    color: var(--color-text-secondary);
}

.account-password-help {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    padding-top: var(--space-1);
}

.account-password-help-link {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    color: var(--color-text-link);
    overflow-wrap: anywhere;
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-medium);
}

.account-password-help-link:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.account-connection-content {
    min-width: 0;
    overflow-x: hidden;
}

.first-mailbox-onboarding-content {
    min-width: 0;
    overflow-x: hidden;
    background: var(--color-surface-settings);
}

.first-mailbox-onboarding-screen {
    display: grid;
    min-width: 0;
    min-height: 100%;
    align-content: start;
    padding: var(--space-5) var(--space-3);
}

.first-mailbox-onboarding-card {
    display: grid;
    gap: var(--space-3);
    width: min(100%, 34rem);
    min-width: 0;
    margin: 0 auto;
}

.first-mailbox-onboarding-card h1 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: var(--type-screen-title-size);
    line-height: var(--type-screen-title-line-height);
}

.first-mailbox-onboarding-description,
.first-mailbox-onboarding-error,
.first-mailbox-onboarding-skip-error {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.first-mailbox-onboarding-description {
    color: var(--color-text-secondary);
}

.gmail-pilot-notice {
    min-width: 0;
    margin: 0;
    padding: var(--space-3);
    border: var(--border-hairline) solid var(--color-state-warning-container);
    border-radius: var(--radius-sm);
    background: var(--color-state-warning-surface);
    color: var(--color-state-warning-on-container);
    overflow-wrap: anywhere;
}

.first-mailbox-onboarding-actions {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.first-mailbox-onboarding-actions .account-connection-option {
    width: 100%;
}

.first-mailbox-onboarding-gmail.is-loading {
    cursor: wait;
    opacity: var(--state-loading-opacity);
}

.first-mailbox-onboarding-skip {
    justify-self: start;
    min-height: var(--touch-min);
}

.account-connection-screen {
    display: grid;
    min-width: 0;
    min-height: 100%;
    align-content: start;
    background: var(--color-surface-settings);
}

.account-connection-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky-header);
    display: grid;
    grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-large);
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-hairline) solid var(--color-divider);
    background: var(--color-surface-settings);
    box-shadow: var(--elevation-low);
}

.account-connection-header h1 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: var(--type-screen-title-size);
    line-height: var(--type-screen-title-line-height);
}

.account-connection-back-link {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.account-connection-back-link:focus-visible,
.account-connection-option:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.account-connection-entry-view {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-5);
}

.account-connection-entry-intro {
    margin: 0;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.account-connection-options {
    display: grid;
    min-width: 0;
    border-top: var(--border-hairline) solid var(--color-divider);
}

.account-connection-option {
    display: grid;
    grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: var(--touch-comfortable);
    padding: var(--space-2) 0;
    border: 0;
    border-bottom: var(--border-hairline) solid var(--color-divider);
    border-radius: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.account-connection-option:hover {
    background: var(--color-state-hover);
}

.account-connection-option:active {
    background: var(--color-state-pressed);
}

.account-connection-option:disabled {
    cursor: wait;
    opacity: var(--state-loading-opacity);
}

.account-connection-provider-visual {
    display: inline-grid;
    width: var(--touch-min);
    height: var(--touch-min);
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-bold);
}

.account-connection-option-copy {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.account-connection-option-title,
.account-connection-option-secondary {
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-connection-option-title {
    font-weight: var(--font-weight-bold);
}

.account-connection-option-secondary {
    color: var(--color-text-secondary);
    font-size: var(--type-secondary-size);
}

.account-connection-option-chevron {
    display: inline-grid;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    place-items: center;
    color: var(--color-icon-secondary);
    font-size: 1.5rem;
}

.account-connection-entry-error {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.account-connection-screen .account-connection-form {
    width: min(100%, 42rem);
    margin: 0 auto;
    padding: var(--space-4) var(--space-3) var(--space-5);
}

.custom-mailbox-form {
    min-width: 0;
}

.custom-mailbox-mode-actions {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.custom-mailbox-mode-toggle {
    width: 100%;
    min-height: var(--touch-comfortable);
    justify-content: center;
}

.custom-mailbox-manual-fields {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    padding-top: var(--space-2);
}

.custom-mailbox-protocol-section {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border: var(--border-hairline) solid var(--color-divider);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.custom-mailbox-protocol-section h3 {
    margin: 0;
    font-size: var(--type-section-title-size);
    line-height: var(--type-section-title-line-height);
}

.custom-mailbox-same-credentials {
    display: flex;
    min-width: 0;
    min-height: var(--touch-min);
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-secondary-line-height);
}

.custom-mailbox-same-credentials input {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-accent);
}

.custom-mailbox-smtp-separate {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.field-error {
    min-width: 0;
    margin: 0;
    color: var(--color-text-error);
    overflow-wrap: anywhere;
    font-size: var(--type-helper-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--type-helper-line-height);
}

.custom-mailbox-status,
.custom-mailbox-error,
.custom-mailbox-plaintext-warning {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.custom-mailbox-status {
    color: var(--color-text-secondary);
}

.custom-mailbox-plaintext-warning {
    padding: var(--space-2);
    border: var(--border-hairline) solid var(--color-state-warning);
    border-radius: var(--radius-md);
    background: var(--color-state-warning-container);
    color: var(--color-text-primary);
    font-size: var(--type-secondary-size);
    line-height: var(--type-secondary-line-height);
}

@media (min-width: 40rem) {
    .account-connection-entry-view {
        width: min(100%, 42rem);
        margin: 0 auto;
    }
}

.account-list-actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    inline-size: 100%;
    min-width: 0;
}

.account-connection-entry {
    min-width: 0;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface);
}

.account-list-actions .primary-button {
    width: 100%;
    min-height: 2.75rem;
    justify-content: center;
}

.account-list,
.account-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-list {
    display: grid;
    gap: var(--space-2);
    inline-size: 100%;
    min-width: 0;
}

.account-list-content {
    min-height: 100vh;
    background: var(--color-surface-settings);
}

.account-list-screen {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--color-surface-settings);
}

.account-list-header {
    position: sticky;
    z-index: var(--z-sticky-header);
    top: 0;
    display: grid;
    grid-template-columns: minmax(var(--touch-min), auto) minmax(0, 1fr);
    align-items: center;
    min-height: calc(var(--touch-min) + var(--spacing-sm));
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-surface-settings);
    box-shadow: var(--elevation-low);
}

.account-list-header h1 {
    margin: 0;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--type-screen-title-size);
    line-height: var(--type-screen-title-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-list-back-link {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    color: var(--color-action-primary);
    font-size: var(--type-button-label-size);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.account-list-back-link:focus-visible,
.account-list-row-link:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.account-list-view {
    align-content: start;
    min-width: 0;
    padding: var(--spacing-lg);
}

.account-list-view .account-connection-entry {
    padding: 0;
    border: 0;
    background: transparent;
}

.account-list-view .account-list-actions .primary-button {
    min-height: var(--touch-min);
}

.account-list-row {
    min-width: 0;
    border-bottom: var(--border-hairline) solid var(--color-divider);
    background: var(--color-surface-settings);
}

.account-list-row:first-child {
    border-top: var(--border-hairline) solid var(--color-divider);
}

.account-list-row-link {
    display: grid;
    inline-size: 100%;
    min-width: 0;
    min-height: var(--touch-comfortable);
    grid-template-columns: var(--touch-min) minmax(0, 1fr) var(--touch-min);
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    color: var(--color-text-primary);
    text-decoration: none;
}

.account-list-row-link:hover {
    background: var(--color-state-hover);
}

.account-list-row .account-marker {
    position: static;
    inset: auto;
    justify-self: center;
}

.account-list-row-copy {
    display: grid;
    inline-size: 100%;
    min-width: 0;
    gap: var(--spacing-xs);
}

.account-list-row-name,
.account-list-row-email,
.account-list-row-provider,
.account-list-row-states {
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-list-row-name {
    font-size: var(--type-row-title-size);
    line-height: var(--type-row-title-line-height);
}

.account-list-row-email,
.account-list-row-provider {
    color: var(--color-text-secondary);
    font-size: var(--type-secondary-size);
    line-height: var(--type-secondary-line-height);
}

.account-list-row-provider {
    color: var(--color-text-tertiary);
}

.account-list-row-states {
    display: flex;
    inline-size: 100%;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.account-list-state {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    min-height: 1.75rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
    font-size: var(--type-metadata-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--type-metadata-line-height);
    overflow-wrap: normal;
    word-break: normal;
}

.account-list-state-enabled,
.account-list-state-default,
.account-list-state-success {
    background: var(--color-state-success-container);
    color: var(--color-state-success-on-container);
}

.account-list-state-disabled,
.account-list-state-failed {
    background: var(--color-state-error-container);
    color: var(--color-state-error-on-container);
}

.account-list-state-running,
.account-list-state-pending {
    background: var(--color-state-warning-container);
    color: var(--color-state-warning-on-container);
}

.account-list-state-reconnect {
    background: var(--color-state-warning-container);
    color: var(--color-state-warning-on-container);
    font-weight: var(--font-weight-semibold);
}

.account-list-row-chevron {
    padding: 0 var(--spacing-xs);
    color: var(--color-icon-secondary);
    font-size: var(--icon-md);
    line-height: 1;
}

.account-list-feedback {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-hairline) solid var(--color-state-error-container);
    border-radius: var(--radius-sm);
    background: var(--color-banner-error-background);
    color: var(--color-banner-error-foreground);
}

.account-list-feedback p {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.account-list-feedback .secondary-button {
    flex: 0 0 auto;
}

.account-list-skeleton-row {
    display: grid;
    min-height: var(--touch-comfortable);
    grid-template-columns: var(--touch-min) minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

.account-skeleton-marker,
.account-skeleton-copy {
    display: block;
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
    animation: pulse 1.2s ease-in-out infinite;
}

.account-skeleton-marker {
    width: var(--touch-min);
    height: var(--touch-min);
    border-radius: 50%;
}

.account-skeleton-copy {
    grid-column: 2;
    width: min(70%, 18rem);
    height: 1rem;
}

.account-skeleton-copy-secondary {
    width: min(45%, 12rem);
    margin-top: calc(-1 * var(--spacing-sm));
}

.account-card {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    min-height: 4.75rem;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
}

.account-card-main {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.account-card-header,
.account-card-identity,
.account-card-badges,
.account-card-meta,
.account-card-actions {
    min-width: 0;
}

.account-card-header {
    display: grid;
    gap: var(--space-2);
}

.account-card-identity {
    display: grid;
    gap: 0.2rem;
}

.account-card-name,
.account-detail-title {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.account-card-email,
.account-detail-email {
    min-width: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.account-card:focus-within,
.account-card:hover {
    border-color: var(--color-accent);
}

.account-card-main:focus-visible,
.account-card-action:focus-visible {
    outline: none;
}

.account-card-provider,
.account-last-sync,
.account-sync-enabled,
.account-sync-disabled {
    color: var(--color-muted);
    font-size: 0.8rem;
}

.account-card-badges,
.account-card-meta,
.account-detail-badges,
.account-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.account-card-provider,
.account-sync-enabled,
.account-sync-disabled,
.account-status,
.account-last-sync {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    min-height: 1.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #f4f6fa;
    overflow-wrap: anywhere;
}

.account-sync-enabled {
    color: #067647;
    font-weight: 650;
}

.account-sync-disabled {
    background: #fff3f2;
    color: #b42318;
    font-weight: 650;
}

.account-default-badge {
    display: inline-flex;
    width: fit-content;
    min-height: 1.65rem;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 0.75rem;
    font-weight: 800;
}

.account-status {
    font-size: 0.875rem;
    font-weight: 650;
}

.account-status-success {
    background: #ecfdf3;
    color: #067647;
}

.account-status-failed {
    background: #fff3f2;
    color: var(--color-danger);
}

.account-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-1);
}

.account-card-action {
    flex: 1 1 10rem;
    min-height: 2.75rem;
    justify-content: center;
}

.account-detail-summary,
.account-detail-section {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface);
}

.account-detail-identity {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.account-detail-title,
.account-detail-email,
.account-section-title {
    margin: 0;
}

.account-section-title {
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
}

.account-details {
    display: grid;
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
    gap: var(--space-2);
    margin: 0;
}

.account-details dt {
    color: var(--color-muted);
}

.account-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.account-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.account-default-state {
    display: inline-flex;
    flex: 1 1 12rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-3);
    border: 1px solid #abefc6;
    border-radius: 0.65rem;
    background: #ecfdf3;
    color: #067647;
    font-weight: 800;
    overflow-wrap: anywhere;
    text-align: center;
}

.account-settings-form {
    display: grid;
    gap: var(--space-2);
}

.account-signature-form {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
}

.account-signature-field textarea {
    min-height: calc(var(--size-field-height-default) * 2);
    resize: vertical;
}

.account-signature-toggle {
    display: flex;
    min-height: var(--touch-min);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
}

.account-signature-help,
.account-signature-status {
    margin: 0;
    color: var(--color-muted);
}

.account-display-name-current {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-weight: 800;
}

.account-display-name-form {
    display: grid;
    gap: var(--space-2);
}

.account-display-name-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.account-settings-form .secondary-button,
.account-display-name-actions .secondary-button {
    flex: 1 1 9rem;
}

.account-detail-actions .primary-button,
.account-detail-actions .secondary-button,
.account-detail-actions .danger-button {
    flex: 1 1 12rem;
}

/* Account settings use a flat, full-screen hierarchy rather than nested cards. */
.account-settings-content {
    min-width: 0;
    overflow-x: hidden;
}

.account-settings-screen {
    display: grid;
    min-width: 0;
    min-height: 100%;
    align-content: start;
    background: var(--color-surface-settings);
}

.account-settings-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-large);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-divider);
    background: var(--color-surface-settings);
}

.account-settings-header h1 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: var(--type-screen-title-size);
    line-height: 1.2;
}

.account-settings-back-link {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    color: var(--color-text-primary);
    font-weight: 700;
    text-decoration: none;
}

.account-settings-back-link:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.account-settings-view {
    display: grid;
    min-width: 0;
    gap: 0;
    padding: 0 var(--space-3) var(--space-5);
}

.account-settings-view .account-notice {
    margin: var(--space-3) 0 0;
}

.account-settings-identity {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border: 0;
    border-bottom: 1px solid var(--color-divider);
    border-radius: 0;
    background: transparent;
}

.account-settings-identity-copy {
    min-width: 0;
}

.account-settings-identity .account-detail-title,
.account-settings-identity .account-detail-email {
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-settings-identity .account-detail-title {
    font-size: var(--type-section-title-size);
}

.account-settings-identity .account-detail-email {
    margin: 0;
}

.account-settings-section {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border: 0;
    border-bottom: 1px solid var(--color-divider);
    border-radius: 0;
    background: transparent;
}

.account-settings-section .account-section-title {
    color: var(--color-text-primary);
    font-size: var(--type-button-label-size);
    text-transform: none;
}

.account-settings-section .account-details {
    grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
    gap: var(--space-2) var(--space-3);
}

.account-reconnect-section {
    margin-inline: calc(-1 * var(--space-3));
    padding-inline: var(--space-3);
    background: var(--color-state-warning-surface);
    color: var(--color-state-warning-on-container);
}

.account-reconnect-description {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.account-reconnect-form {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
}

.account-reconnect-form .account-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.account-reconnect-form .account-form-actions .primary-button,
.account-reconnect-form .account-form-actions .secondary-button {
    flex: 1 1 12rem;
    min-height: var(--touch-comfortable);
}

.account-settings-display-form {
    gap: var(--space-2);
}

.account-settings-display-form .field {
    min-width: 0;
}

.account-settings-display-form input {
    min-width: 0;
    max-width: 100%;
}

.account-settings-actions {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
}

.account-settings-actions > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.account-settings-actions .primary-button,
.account-settings-actions .secondary-button,
.account-settings-actions .danger-button,
.account-settings-actions .account-default-state {
    width: 100%;
    min-height: var(--touch-comfortable);
    flex: none;
}

.account-settings-actions .account-default-state {
    justify-content: flex-start;
    padding: 0 var(--space-3);
    border: var(--border-hairline) solid var(--color-border-success);
    border-radius: var(--radius-sm);
    background: var(--color-state-success-surface);
    color: var(--color-state-success-on-container);
    text-align: left;
}

.account-connection-check-status {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.account-settings-section:last-child {
    border-bottom: 0;
}

.account-settings-loading {
    gap: 0;
}

.account-settings-skeleton-identity,
.account-settings-skeleton-row {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-divider);
}

.account-settings-skeleton-identity .account-skeleton-copy-primary {
    width: 52%;
}

.account-settings-skeleton-identity .account-skeleton-copy-secondary {
    width: 72%;
}

/* Provider folders use a lightweight full-screen browser, separate from Local Folder management. */
.all-folders-content {
    min-width: 0;
    background: var(--color-surface-settings);
}

.all-folders-screen {
    display: grid;
    min-width: 0;
    min-height: 100%;
    align-content: start;
    background: var(--color-surface-settings);
}

.all-folders-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-large);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-divider);
    background: var(--color-surface-settings);
}

.all-folders-header h1 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: var(--type-screen-title-size);
    line-height: 1.2;
}

.all-folders-back-link {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    color: var(--color-text-primary);
    font-weight: 700;
    text-decoration: none;
}

.all-folders-back-link:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.all-folders-main {
    display: grid;
    min-width: 0;
    gap: 0;
    padding: 0 var(--space-3) var(--space-5);
}

.all-folders-account-section {
    min-width: 0;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-divider);
}

.all-folders-account-header {
    display: grid;
    grid-template-columns: var(--touch-min) minmax(0, 1fr) auto var(--touch-min);
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    min-width: 0;
    min-height: var(--touch-comfortable);
    margin: 0;
    padding: var(--space-2) 0;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.all-folders-account-header:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.all-folders-account-copy,
.all-folders-account-name,
.all-folders-account-email,
.all-folders-account-provider {
    min-width: 0;
    overflow-wrap: anywhere;
}

.all-folders-account-header .account-marker {
    position: static;
    justify-self: center;
}

.all-folders-account-count,
.all-folders-account-disclosure {
    color: var(--color-text-tertiary);
}

.all-folders-account-count {
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
    white-space: nowrap;
}

.all-folders-account-disclosure {
    display: inline-flex;
    width: var(--touch-min);
    height: var(--touch-min);
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
}

.all-folders-account-panel {
    min-width: 0;
    padding-top: var(--space-2);
}

.all-folders-account-name,
.all-folders-account-email,
.all-folders-account-provider,
.all-folders-section-empty {
    margin: 0;
}

.all-folders-account-error {
    display: grid;
    gap: var(--spacing-sm);
    justify-items: start;
    padding: var(--spacing-md) var(--spacing-lg);
}

.all-folders-section-error {
    margin: 0;
    color: var(--color-text-secondary);
}

.all-folders-account-name {
    font-size: var(--type-section-title-size);
    line-height: 1.25;
}

.all-folders-account-email,
.all-folders-account-provider,
.all-folders-section-empty,
.all-folders-folder-meta,
.all-folder-message-account {
    color: var(--color-text-tertiary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
}

.all-folders-folder-list,
.all-folders-folder-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.all-folders-folder-list {
    display: grid;
    min-width: 0;
}

.all-folders-folder-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: var(--touch-comfortable);
    padding: var(--space-2) 0;
    color: var(--color-text-primary);
    text-decoration: none;
}

.all-folders-folder-row:focus-visible {
    outline: 0;
    box-shadow: inset var(--state-focus-ring);
}

.all-folders-folder-name,
.all-folders-folder-meta {
    min-width: 0;
    overflow-wrap: anywhere;
}

.all-folders-folder-name {
    font-weight: 700;
}

.all-folders-folder-chevron {
    color: var(--color-text-tertiary);
    font-size: 1.5rem;
    line-height: 1;
}

.all-folders-loading {
    gap: var(--space-4);
}

.all-folders-account-skeleton {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-divider);
}

.all-folders-skeleton-line,
.all-folders-skeleton-row {
    display: block;
    max-width: 100%;
    min-height: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--skeleton-surface);
}

.all-folders-skeleton-line-title {
    width: 42%;
}

.all-folders-skeleton-line-secondary {
    width: 64%;
}

.all-folders-skeleton-row {
    min-height: var(--touch-comfortable);
}

.all-folder-message-content {
    min-width: 0;
    overflow-x: hidden;
}

.all-folder-message-view {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
}

.all-folder-message-scope {
    min-width: 0;
    padding: var(--space-3) var(--space-3) var(--space-2);
}

.all-folder-message-title,
.all-folder-message-account {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.all-folder-message-title {
    font-size: var(--type-section-title-size);
    line-height: 1.25;
}

.all-folder-message-list {
    min-width: 0;
}

.all-folder-message-pagination {
    display: flex;
    justify-content: center;
    padding: var(--space-3);
}

@media (min-width: 40rem) {
    .all-folders-main,
    .all-folder-message-scope {
        width: min(100%, 42rem);
        margin: 0 auto;
    }
}

@media (min-width: 40rem) {
    .account-settings-view {
        width: min(100%, 42rem);
        margin: 0 auto;
    }
}

.filter-list-view {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
}

.filter-list-actions {
    display: flex;
    justify-content: flex-end;
}

.filter-list-actions .primary-button {
    width: 100%;
}

.filter-list,
.filter-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.filter-list {
    display: grid;
    gap: var(--space-2);
}

.filter-list-content {
    min-height: 100vh;
    background: var(--color-surface-settings);
}

.filter-list-screen {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--color-surface-settings);
}

.filter-list-header {
    position: sticky;
    z-index: var(--z-sticky-header);
    top: 0;
    display: grid;
    grid-template-columns: minmax(var(--touch-min), auto) minmax(0, 1fr);
    align-items: center;
    min-height: calc(var(--touch-min) + var(--spacing-sm));
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-surface-settings);
    box-shadow: var(--elevation-low);
}

.filter-list-header h1 {
    margin: 0;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--type-screen-title-size);
    line-height: var(--type-screen-title-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-list-back-link {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    color: var(--color-action-primary);
    font-size: var(--type-button-label-size);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.filter-list-back-link:focus-visible,
.filter-row-main:focus-visible,
.filter-row-toggle:focus-visible,
.filter-row-remove:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.filter-list-view {
    min-width: 0;
    padding: var(--spacing-lg);
}

.filter-list-view .filter-list-actions {
    justify-content: stretch;
}

.filter-list-view .filter-list-actions .primary-button {
    min-height: var(--touch-min);
}

.filter-row {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: var(--spacing-md);
    border-bottom: var(--border-hairline) solid var(--color-divider);
    background: var(--color-surface-settings);
}

.filter-row:first-child {
    border-top: var(--border-hairline) solid var(--color-divider);
}

.filter-row.is-disabled {
    background: var(--color-surface-disabled);
}

.filter-row-main {
    display: grid;
    min-width: 0;
    min-height: var(--touch-large);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.filter-row-main:hover {
    background: var(--color-state-hover);
}

.filter-row-copy {
    display: grid;
    min-width: 0;
    gap: var(--spacing-sm);
}

.filter-row-title,
.filter-row-details,
.filter-row-scope,
.filter-row-action {
    min-width: 0;
    overflow-wrap: anywhere;
}

.filter-row-title {
    font-size: var(--type-row-title-size);
    line-height: var(--type-row-title-line-height);
}

.filter-row-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: var(--type-secondary-size);
    line-height: var(--type-secondary-line-height);
}

.filter-row-scope {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.filter-row-action {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.filter-row-chevron {
    padding: 0 var(--spacing-xs);
    color: var(--color-icon-secondary);
    font-size: var(--icon-md);
    line-height: 1;
}

.filter-row-actions {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
}

.filter-row-status,
.filter-row-toggle,
.filter-row-remove {
    min-width: 5.5rem;
}

.filter-row-status {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--type-metadata-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-metadata-line-height);
    text-align: center;
}

.filter-row-status-enabled {
    background: var(--color-state-success-container);
    color: var(--color-state-success-on-container);
}

.filter-row-status-disabled {
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
}

.filter-row-toggle,
.filter-row-remove {
    min-height: var(--touch-min);
    padding: 0 var(--spacing-sm);
    font-size: var(--type-metadata-size);
}

.filter-list-feedback {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-hairline) solid var(--color-state-error-container);
    border-radius: var(--radius-sm);
    background: var(--color-banner-error-background);
    color: var(--color-banner-error-foreground);
}

.filter-list-feedback p {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.filter-list-feedback .secondary-button {
    flex: 0 0 auto;
}

.filter-skeleton-row {
    display: grid;
    min-height: var(--touch-large);
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
}

.filter-skeleton-line {
    display: block;
    height: 1rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
    animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.filter-skeleton-line-primary {
    width: min(70%, 24rem);
}

.filter-skeleton-line-secondary {
    width: min(45%, 16rem);
}

.filter-editor-content {
    min-height: 100vh;
    background: var(--color-surface-settings);
}

.filter-editor-screen {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--color-surface-settings);
}

.filter-editor-header {
    position: sticky;
    z-index: var(--z-sticky-header);
    top: 0;
    display: grid;
    grid-template-columns: minmax(var(--touch-min), auto) minmax(0, 1fr);
    align-items: center;
    min-height: calc(var(--touch-min) + var(--spacing-sm));
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-surface-settings);
    box-shadow: var(--elevation-low);
}

.filter-editor-header h1 {
    margin: 0;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--type-screen-title-size);
    line-height: var(--type-screen-title-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-editor-back-link {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    color: var(--color-action-primary);
    font-size: var(--type-button-label-size);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.filter-editor-back-link:focus-visible,
.filter-editor-screen .filter-form button:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.filter-editor-screen .filter-form {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

.filter-editor-section {
    display: grid;
    min-width: 0;
    gap: var(--spacing-md);
    margin: 0;
    padding: var(--spacing-md);
    border: var(--border-hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-settings);
}

.filter-editor-section-title,
.filter-editor-danger-title {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--type-section-title-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-section-title-line-height);
}

.filter-editor-section .field {
    min-width: 0;
}

.filter-editor-section .field select,
.filter-editor-section .field input {
    min-width: 0;
    width: 100%;
}

.filter-editor-section .field-helper,
.filter-editor-section .field-error {
    overflow-wrap: anywhere;
}

.filter-editor-state {
    gap: var(--spacing-sm);
}

.filter-switch-row {
    display: flex;
    min-height: var(--touch-min);
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.filter-switch-row input {
    width: var(--icon-md);
    height: var(--icon-md);
    accent-color: var(--color-control-checked);
}

.filter-editor-screen .filter-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.filter-editor-screen .filter-form-actions .primary-button,
.filter-editor-screen .filter-form-actions .secondary-button {
    flex: 1 1 10rem;
    min-height: var(--touch-min);
}

.filter-editor-danger {
    display: grid;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    border-top: var(--border-hairline) solid var(--color-border-subtle);
}

.filter-editor-danger .danger-button {
    justify-self: start;
    min-height: var(--touch-min);
}

/* ADR-131/132 keeps the filter workspace compact at both mobile and desktop widths. */
.filter-list-header {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.filter-header-action {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
}

.filter-ui-form {
    max-width: 48rem;
    margin: 0 auto;
}

.filter-condition-rows {
    display: grid;
    min-width: 0;
    gap: var(--spacing-sm);
}

.filter-condition-row {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) auto;
    align-items: end;
    gap: var(--spacing-sm);
}

.filter-condition-row .field {
    min-width: 0;
}

.filter-remove-condition,
.filter-add-condition,
.filter-reorder-controls .secondary-button {
    min-height: var(--touch-min);
}

.filter-row-position {
    display: block;
    margin-top: 4px;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.filter-folder-field {
    min-width: 0;
}

.filter-folder-picker {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    overflow-wrap: anywhere;
    text-align: left;
}

.filter-missing-folder-warning {
    margin-top: 8px;
}

.filter-list-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sender-history-prompt,
.not-spam-filter-alert {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    overflow-wrap: anywhere;
}

@media (max-width: 360px) {
    .filter-reorder-controls,
    .filter-list-feedback {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-reorder-controls .secondary-button,
    .filter-list-feedback .secondary-button {
        width: 100%;
    }
}

.filter-condition-and {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--type-metadata-size);
    font-weight: var(--font-weight-semibold);
}

.filter-apply-section {
    align-items: start;
}

.filter-reorder-list {
    list-style: none;
}

.filter-reorder-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

.filter-reorder-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.filter-reorder-controls .secondary-button {
    flex: 0 1 auto;
    min-width: var(--touch-min);
    padding: 0 var(--spacing-sm);
}

@media (max-width: 42rem) {
    .filter-list-view {
        padding: var(--spacing-md);
    }

    .filter-condition-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .filter-condition-row .field:last-of-type {
        grid-column: 1 / -1;
    }

    .filter-remove-condition {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .filter-row {
        gap: var(--spacing-sm);
    }

    .filter-row-main {
        min-height: var(--touch-min);
        padding: var(--spacing-sm) 0;
    }

    .filter-row-toggle {
        min-width: var(--touch-min);
        padding: 0 var(--spacing-sm);
    }
}

.filter-card {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
}

.filter-summary {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.filter-title {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.filter-status {
    flex: 0 0 auto;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.filter-status-enabled {
    background: #ecfdf3;
    color: #067647;
}

.filter-status-disabled {
    background: #f2f4f7;
    color: var(--color-muted);
}

.filter-details {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.filter-actions,
.filter-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.filter-actions .secondary-button,
.filter-actions .danger-button,
.filter-form-actions .primary-button,
.filter-form-actions .secondary-button {
    flex: 1 1 9rem;
}

.filter-enabled-field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 650;
}

.local-folders-management-content {
    min-height: 100vh;
    background: var(--color-surface-settings);
}

.local-folders-management-screen {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--color-surface-settings);
}

.local-folders-management-header {
    position: sticky;
    z-index: var(--z-sticky-header);
    top: 0;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(var(--touch-min), auto) minmax(0, 1fr);
    align-items: center;
    min-height: calc(var(--touch-min) + var(--spacing-sm));
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-surface-settings);
    box-shadow: var(--elevation-low);
}

.local-folders-management-header h1 {
    margin: 0;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--type-screen-title-size);
    line-height: var(--type-screen-title-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.local-folders-management-back-link {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    color: var(--color-action-primary);
    font-size: var(--type-button-label-size);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.local-folders-management-back-link:focus-visible,
.local-folder-row:focus-visible,
.local-folder-action:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.local-folders-management-view {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
}

.local-folders-management-actions .primary-button {
    width: 100%;
    min-height: var(--touch-min);
    justify-content: center;
}

.local-folder-account-scope {
    display: grid;
    min-width: 0;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    border-top: var(--border-hairline) solid var(--color-divider);
    border-bottom: var(--border-hairline) solid var(--color-divider);
}

.local-folder-scope-title,
.local-folder-scope-summary {
    margin: 0;
}

.local-folder-scope-title {
    color: var(--color-text-primary);
    font-size: var(--type-row-title-size);
    line-height: var(--type-row-title-line-height);
}

.local-folder-scope-summary {
    color: var(--color-text-tertiary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
}

.local-folder-scope-options {
    display: grid;
    gap: var(--spacing-sm);
}

.local-folder-scope-option {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-primary);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
    overflow-wrap: anywhere;
}

.local-folder-list,
.local-folder-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.local-folder-list {
    display: grid;
    gap: 0;
}

.local-folder-tree-item {
    display: grid;
    gap: var(--spacing-sm);
    padding: 0 0 var(--spacing-md);
}

.local-folder-tree-view,
.local-folder-tree-section {
    display: grid;
    min-width: 0;
    gap: var(--spacing-sm);
}

.local-folder-tree-heading {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: var(--type-metadata-size);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
}

.local-folder-row {
    display: grid;
    min-width: 0;
    min-height: var(--touch-comfortable);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-top: var(--border-hairline) solid var(--color-divider);
    background: var(--color-surface-settings);
    color: var(--color-text-primary);
    text-decoration: none;
}

.local-folder-row:hover {
    background: var(--color-state-hover);
}

.local-folder-row:active {
    background: var(--color-state-pressed);
}

.local-folder-row.has-unread .local-folder-name {
    font-weight: var(--font-weight-bold);
}

.local-folder-row-copy {
    display: grid;
    min-width: 0;
    gap: var(--spacing-xs);
}

.local-folder-title {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.local-folder-name {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.local-folder-role {
    flex: 0 0 auto;
    color: var(--color-text-tertiary);
    font-size: var(--type-metadata-size);
    font-weight: var(--font-weight-medium);
}

.local-folder-counters {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
}

.local-folder-row-chevron {
    color: var(--color-icon-secondary);
    font-size: 1.5rem;
    line-height: 1;
}

.local-folder-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.local-folder-action {
    flex: 1 1 9rem;
    min-width: 0;
}

.local-folder-empty-copy {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
}

.mailbox-management-entry {
    padding-top: var(--spacing-sm);
}

.local-folder-skeleton-row {
    display: grid;
    min-height: var(--touch-comfortable);
    align-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) 0;
    border-top: var(--border-hairline) solid var(--color-divider);
}

.local-folder-skeleton-copy {
    display: block;
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
}

.local-folder-skeleton-copy-primary {
    width: 42%;
    height: 1rem;
}

.local-folder-skeleton-copy-secondary {
    width: 64%;
    height: 0.75rem;
}

.folder-message-list-view {
    display: grid;
    gap: var(--spacing-md);
    padding: 0;
}

.local-folder-current-scope {
    display: grid;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
}

.local-folder-current-title,
.local-folder-current-summary {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.local-folder-current-title {
    color: var(--color-text-primary);
    font-size: var(--type-section-title-size);
    line-height: var(--type-section-title-line-height);
}

.local-folder-current-summary {
    color: var(--color-text-tertiary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
}

.folder-message-list-view .local-folder-account-scope {
    margin: 0 var(--spacing-lg) var(--spacing-xs);
    padding: var(--spacing-md);
    border-color: var(--color-border-subtle);
    border-radius: var(--radius-lg);
}

.system-folder-view {
    padding-top: 0;
}

.system-folder-view .local-folder-current-scope {
    padding-bottom: var(--spacing-md);
}

.system-folder-refresh-warning {
    flex-wrap: wrap;
    align-items: center;
    margin: 0 var(--spacing-lg);
}

.system-folder-refresh-warning .secondary-button {
    flex: 0 0 auto;
}

.system-folder-list {
    padding-top: 0;
}

.system-folder-row .message-item {
    min-width: 0;
}

.system-folder-row .message-sender,
.system-folder-row .message-subject {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-folder-row-sent .message-sender {
    color: var(--color-message-unread-text);
    font-weight: var(--font-weight-semibold);
}

.system-folder-row-sent .message-item {
    color: var(--color-message-read-text);
}

.outbox-list {
    padding-top: 0;
}

.outbox-message-item {
    align-items: start;
    min-width: 0;
    min-height: 0;
    padding: 0;
}

.outbox-row-link {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--spacing-md);
    min-width: 0;
    min-height: var(--message-row-height);
    padding: var(--spacing-sm) var(--spacing-lg);
    color: inherit;
    text-decoration: none;
}

.outbox-row-link:focus-visible {
    border-radius: var(--radius-xs);
    outline: var(--border-emphasis) solid var(--color-border-focus);
    outline-offset: var(--spacing-xs);
}

.outbox-leading {
    margin-top: var(--spacing-xs);
}

.outbox-recipients,
.outbox-subject,
.outbox-account {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.outbox-meta {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-text-tertiary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
}

.outbox-status,
.outbox-reconnect,
.outbox-next-attempt {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.outbox-status {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.outbox-reconnect {
    color: var(--color-state-warning-on-container);
    font-weight: var(--font-weight-semibold);
}

.outbox-attachment {
    flex: 0 0 auto;
}

.outbox-row-actions {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.outbox-row-actions button {
    min-height: var(--size-button-height-default);
}

.outbox-row-error {
    grid-column: 1 / -1;
    margin-top: var(--spacing-sm);
}

.outbox-detail {
    display: grid;
    min-width: 0;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
}

.outbox-detail-header {
    display: grid;
    min-width: 0;
    gap: var(--spacing-sm);
}

.outbox-detail-title {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
    font-size: var(--type-section-title-size);
}

.outbox-detail-metadata {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
    gap: var(--spacing-xs) var(--spacing-md);
    margin: 0;
}

.outbox-detail-metadata dt {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.outbox-detail-metadata dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-primary);
}

.outbox-detail-body {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: var(--spacing-md);
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: var(--border-hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    font: inherit;
}

.outbox-detail-actions-row {
    border: var(--border-hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
}

@media (max-width: 25rem) {
    .outbox-row-link {
        padding-top: 0;
        padding-bottom: 0;
    }

    .outbox-message-content {
        gap: 0;
        line-height: 1.15;
    }

    .outbox-message-content .message-row,
    .outbox-message-content .outbox-meta {
        line-height: 1.15;
    }

    .outbox-meta {
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
    }

    .outbox-meta > * {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .outbox-account,
    .outbox-reconnect {
        flex: 0 1 7rem;
    }

    .outbox-row-actions {
        gap: var(--spacing-xs);
    }

    .outbox-row-actions button {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

.compose-file-input {
    position: absolute;
    width: 1px !important;
    height: 1px;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0 !important;
    white-space: nowrap;
}

.compose-attachment-selection {
    display: grid;
    gap: var(--space-2);
}

.compose-attachment-selection[hidden] {
    display: none;
}

.compose-attachment-selection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.compose-attachment-selection-title {
    font-size: 0.8rem;
    font-weight: 700;
}

.compose-attachment-clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-danger);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.compose-attachment-remove,
.compose-attachment-retry {
    display: inline-grid;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.compose-attachment-remove {
    color: var(--color-danger);
}

.compose-attachment-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.compose-attachment-item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: var(--space-2);
    min-height: 3.5rem;
    padding: 0.35rem;
    border: 1px solid #d7dce5;
    border-radius: 0.65rem;
    background: #f8fafc;
}

.compose-attachment-preview,
.compose-attachment-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.45rem;
}

.compose-attachment-preview {
    display: block;
    object-fit: cover;
    background: #e6eaf1;
}

.compose-attachment-icon {
    display: grid;
    place-items: center;
    background: #e8edff;
    color: var(--color-accent);
    font-size: 0.65rem;
    font-weight: 800;
}

.compose-attachment-icon-pdf {
    background: #feeceb;
    color: #b42318;
}

.compose-attachment-icon-archive {
    background: #fff3d6;
    color: #8a5700;
}

.compose-attachment-details {
    display: grid;
    min-width: 0;
}

.compose-attachment-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.compose-attachment-status {
    color: var(--color-muted);
    font-size: 0.72rem;
}

.compose-attachment-status-error {
    color: var(--color-danger);
}

.compose-attachment-retry {
    color: var(--color-text-link);
}

.compose-attachment-server-status,
.compose-attachment-server-hint {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.compose-attachment-server-status {
    color: var(--color-danger);
}

.compose-attachment-server-retry {
    justify-self: start;
}

.compose-attachment-name {
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compose-attachment-size {
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 400;
}

.forward-source-attachments {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
    margin: 0;
}

.forward-source-attachments[hidden] {
    display: none;
}

.forward-source-attachments-title {
    margin: 0;
    font-size: 0.95rem;
}

.forward-source-attachments-status,
.forward-source-attachments-error {
    margin: 0;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.forward-source-attachments-status {
    color: var(--color-muted);
}

.forward-source-attachments-retry {
    justify-self: start;
}

.forward-source-attachments-list {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.forward-source-attachment-item {
    display: grid;
    min-width: 0;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: 0.35rem;
    border: 1px solid #d7dce5;
    border-radius: 0.65rem;
    background: #f8fafc;
}

.forward-source-attachment-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 0.45rem;
    background: #e8edff;
    color: var(--color-accent);
    font-size: 0.65rem;
    font-weight: 800;
}

.forward-source-attachment-details {
    display: grid;
    min-width: 0;
}

.forward-source-attachment-name {
    min-width: 0;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forward-source-attachment-size,
.forward-source-attachment-status {
    color: var(--color-muted);
    font-size: 0.75rem;
}

.forward-source-attachment-error {
    color: var(--color-danger);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.forward-source-attachment-actions {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.forward-source-attachment-action {
    min-width: 48px;
    min-height: 48px;
    white-space: nowrap;
}

.forward-source-attachment-cancel {
    min-width: 48px;
    min-height: 48px;
}

.inline-message,
.form-error,
.form-success,
.account-connection-check-status {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-hairline) solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--type-error-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--type-error-line-height);
    overflow-wrap: anywhere;
}

.inline-message::before,
.form-error::before,
.form-success::before,
.account-connection-check-status::before {
    flex: 0 0 auto;
    font-weight: var(--font-weight-bold);
}

.inline-message,
.inline-message-info,
.account-connection-check-status {
    border-color: var(--color-state-info-container);
    background: var(--color-banner-info-background);
    color: var(--color-banner-info-foreground);
}

.inline-message::before,
.inline-message-info::before,
.account-connection-check-status::before {
    color: var(--color-state-info);
    content: "i";
}

.inline-message-success,
.form-success,
.account-connection-check-success {
    border-color: var(--color-state-success-container);
    background: var(--color-banner-success-background);
    color: var(--color-banner-success-foreground);
}

.inline-message-success::before,
.form-success::before,
.account-connection-check-success::before {
    color: var(--color-state-success);
    content: "+";
}

.inline-message-warning {
    border-color: var(--color-state-warning-container);
    background: var(--color-banner-warning-background);
    color: var(--color-banner-warning-foreground);
}

.inline-message-warning::before {
    color: var(--color-state-warning);
    content: "!";
}

.inline-message-error,
.form-error,
.account-connection-check-error {
    border-color: var(--color-state-error-container);
    background: var(--color-banner-error-background);
    color: var(--color-banner-error-foreground);
}

.inline-message-error::before,
.form-error::before,
.account-connection-check-error::before {
    color: var(--color-state-error);
    content: "!";
}

.inline-message-offline {
    border-color: var(--color-state-offline-container);
    background: var(--color-state-offline-container);
    color: var(--color-state-offline-on-container);
}

.inline-message-offline::before {
    color: var(--color-state-offline);
    content: "i";
}

.compact-banner,
.account-notice,
.inbox-refresh-error {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-hairline) solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--type-secondary-line-height);
    overflow-wrap: anywhere;
}

.compact-banner::before,
.account-notice::before,
.inbox-refresh-error::before {
    flex: 0 0 auto;
    font-weight: var(--font-weight-bold);
}

.compact-banner,
.compact-banner-info {
    border-color: var(--color-state-info-container);
    background: var(--color-banner-info-background);
    color: var(--color-banner-info-foreground);
}

.compact-banner::before,
.compact-banner-info::before {
    color: var(--color-state-info);
    content: "i";
}

.compact-banner-success,
.account-notice {
    border-color: var(--color-state-success-container);
    background: var(--color-banner-success-background);
    color: var(--color-banner-success-foreground);
}

.compact-banner-success::before,
.account-notice::before {
    color: var(--color-state-success);
    content: "+";
}

.compact-banner-warning {
    border-color: var(--color-state-warning-container);
    background: var(--color-banner-warning-background);
    color: var(--color-banner-warning-foreground);
}

.compact-banner-warning::before {
    color: var(--color-state-warning);
    content: "!";
}

.compact-banner-error,
.inbox-refresh-error {
    border-color: var(--color-state-error-container);
    background: var(--color-banner-error-background);
    color: var(--color-banner-error-foreground);
}

.compact-banner-error::before,
.inbox-refresh-error::before {
    color: var(--color-state-error);
    content: "!";
}

.compact-banner-offline {
    border-color: var(--color-state-offline-container);
    background: var(--color-state-offline-container);
    color: var(--color-state-offline-on-container);
}

.compact-banner-offline::before {
    color: var(--color-state-offline);
    content: "i";
}

.snackbar,
.inbox-compose-success {
    position: fixed;
    z-index: var(--z-snackbar);
    right: max(var(--spacing-lg), var(--safe-area-right));
    bottom: calc(var(--safe-area-bottom) + var(--size-bottom-action-bar-height) + var(--spacing-sm));
    left: max(var(--spacing-lg), var(--safe-area-left));
    display: flex;
    min-width: 0;
    max-width: 32rem;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    background: var(--color-snackbar-background);
    box-shadow: var(--elevation-medium);
    color: var(--color-snackbar-foreground);
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--type-secondary-line-height);
    overflow-wrap: anywhere;
}

.snackbar::before,
.inbox-compose-success::before {
    flex: 0 0 auto;
    color: var(--color-state-success-container);
    font-weight: var(--font-weight-bold);
    content: "+";
}

.snackbar-info::before {
    color: var(--color-snackbar-action);
    content: "i";
}

.snackbar-warning::before {
    color: var(--color-state-warning-container);
    content: "!";
}

.snackbar-error::before {
    color: var(--color-state-error-container);
    content: "!";
}

.snackbar-action {
    min-height: var(--touch-min);
    padding: 0 var(--spacing-sm);
    border: 0;
    background: transparent;
    color: var(--color-snackbar-action);
    font: inherit;
    font-weight: var(--font-weight-semibold);
}

.snackbar-action:focus-visible {
    border-radius: var(--radius-xs);
    outline: var(--border-emphasis) solid var(--color-snackbar-action);
    outline-offset: var(--spacing-xs);
}

@media (min-width: 42rem) {
    .snackbar,
    .inbox-compose-success {
        right: auto;
        left: calc(50% + var(--safe-area-left));
        width: min(32rem, calc(100vw - var(--spacing-2xl)));
        transform: translateX(-50%);
    }
}

.modal-root {
    position: fixed;
    z-index: var(--z-dialog);
    inset: 0;
    display: grid;
    min-width: 0;
    padding: var(--spacing-lg);
}

.modal-root-dialog {
    place-items: center;
}

.modal-root-sheet {
    z-index: var(--z-bottom-sheet);
    align-items: end;
    justify-items: center;
    padding: var(--spacing-lg) var(--spacing-lg) 0;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-scrim);
}

.modal-surface {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(100%, 28rem);
    min-width: 0;
    max-height: calc(100vh - var(--safe-area-top) - var(--safe-area-bottom) - var(--spacing-2xl));
    border: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-dialog-background);
    color: var(--color-dialog-foreground);
    box-shadow: var(--elevation-high);
    overflow: hidden;
}

.dialog {
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
}

.bottom-sheet {
    width: min(100%, 36rem);
    max-height: calc(100vh - var(--safe-area-top) - var(--spacing-xl));
    padding: var(--spacing-lg) var(--spacing-lg) calc(var(--safe-area-bottom) + var(--spacing-lg));
    border-bottom: 0;
    border-radius: var(--bottom-sheet-radius) var(--bottom-sheet-radius) 0 0;
    background: var(--color-bottom-sheet-background);
    color: var(--color-bottom-sheet-foreground);
}

.modal-header {
    display: grid;
    gap: var(--spacing-xs);
    min-width: 0;
}

.modal-title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--type-section-title-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-section-title-line-height);
    overflow-wrap: anywhere;
}

.modal-message {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--type-secondary-size);
    line-height: var(--type-secondary-line-height);
    overflow-wrap: anywhere;
}

.modal-content {
    display: grid;
    gap: var(--spacing-md);
    min-width: 0;
    overflow: auto;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.bottom-sheet .modal-actions {
    position: sticky;
    bottom: calc(-1 * var(--spacing-lg));
    margin: 0 calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg));
    padding: var(--spacing-md) var(--spacing-lg) calc(var(--safe-area-bottom) + var(--spacing-lg));
    border-top: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-bottom-sheet-background);
}

.bottom-sheet .folders-navigation-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    max-height: calc(100vh - var(--safe-area-top) - 10rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.bottom-sheet .move-sheet-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    max-height: calc(100vh - var(--safe-area-top) - 10rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

.modal-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--touch-min);
    align-items: stretch;
    min-width: 0;
}

.modal-action-row > .folders-sheet-row {
    min-width: 0;
}

.folders-sheet-more {
    width: var(--touch-min);
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    align-self: center;
    color: var(--color-icon-secondary);
}

.folders-sheet-row {
    display: flex;
    width: 100%;
    min-height: var(--touch-min);
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    text-align: left;
}

.folders-sheet-create-row {
    display: flex;
    width: 100%;
    min-height: var(--touch-min);
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-action-primary);
    font-weight: var(--font-weight-semibold);
    text-align: left;
}

.folders-sheet-create-row::before {
    margin-right: var(--spacing-sm);
    content: "+";
    font-size: 1.25rem;
}

.move-sheet-create-row {
    display: flex;
    width: 100%;
    min-height: var(--touch-min);
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-action-primary);
    font-weight: var(--font-weight-semibold);
    text-align: left;
}

.move-sheet-create-row::before {
    margin-right: var(--spacing-sm);
    content: "+";
    font-size: 1.25rem;
}

.move-sheet-row {
    display: flex;
    width: 100%;
    min-height: var(--touch-min);
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    text-align: left;
}

.move-sheet-row.is-current-folder {
    border: var(--border-hairline) solid var(--color-border-disabled);
    background: var(--color-surface-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.move-sheet-row.is-current-folder::before {
    margin-right: var(--spacing-sm);
    color: var(--color-icon-disabled);
    content: "✓";
}

.folders-sheet-action {
    width: 100%;
    min-height: var(--touch-min);
    justify-content: flex-start;
    text-align: left;
}

.folders-sheet-action.is-destructive {
    color: var(--color-danger);
}

.folders-sheet-row::after {
    margin-left: auto;
    color: var(--color-icon-secondary);
    content: "›";
    font-size: 1.25rem;
}

.folders-sheet-row.is-selected {
    background: var(--color-surface-selected);
    font-weight: var(--font-weight-semibold);
}

.folders-sheet-row.is-selected::before {
    color: var(--color-icon-active);
    content: "✓";
}

.folders-sheet-row.is-disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.modal-action-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.modal-action-counter {
    display: inline-flex;
    min-width: 1.5rem;
    min-height: 1.5rem;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0 var(--spacing-xs);
    border-radius: 999px;
    background: var(--color-state-pending-container);
    color: var(--color-state-pending-on-container);
    font-size: var(--type-badge-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
}

.modal-action-counter.is-error {
    background: var(--color-state-error-container);
    color: var(--color-state-error-on-container);
}

.folders-sheet-row.has-counter::after {
    margin-left: var(--spacing-sm);
}

.folders-sheet-row.is-disabled::after {
    display: none;
}

.folders-sheet-management-row {
    display: flex;
    width: 100%;
    min-height: var(--touch-min);
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--border-hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    text-align: left;
}

.folders-sheet-management-row::after {
    margin-left: auto;
    color: var(--color-icon-secondary);
    content: "›";
    font-size: 1.25rem;
}

.folders-navigation-actions > .folders-sheet-row,
.folders-navigation-actions > .folders-sheet-management-row,
.folders-navigation-actions > .folders-sheet-create-row,
.folders-navigation-actions > .modal-action-row {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.modal-action-divider {
    width: 100%;
    height: var(--border-hairline);
    margin: var(--spacing-xs) 0;
    background: var(--color-divider);
}

.modal-actions .primary-button,
.modal-actions .secondary-button,
.modal-actions .danger-button {
    min-width: min(100%, 8rem);
}

@media (max-width: 30rem) {
    .modal-root {
        padding: var(--spacing-md);
    }

    .modal-root-sheet {
        padding: var(--spacing-md) 0 0;
    }

    .dialog {
        padding: var(--spacing-lg);
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-actions .primary-button,
    .modal-actions .secondary-button,
    .modal-actions .danger-button {
        width: 100%;
    }
}

.thread-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-screen {
    min-height: calc(100vh - 4.5rem);
}

.screen-nav {
    min-height: 3.25rem;
    padding: var(--space-1) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.back-link {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-accent);
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.settings-content {
    min-height: 100vh;
    background: var(--color-surface-settings);
}

.settings-screen {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--color-surface-settings);
}

.settings-header {
    position: sticky;
    z-index: var(--z-sticky-header);
    top: 0;
    display: grid;
    grid-template-columns: minmax(var(--touch-min), auto) minmax(0, 1fr);
    align-items: center;
    min-height: calc(var(--touch-min) + var(--spacing-sm));
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-surface-settings);
    box-shadow: var(--elevation-low);
}

.settings-header h1 {
    margin: 0;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--type-screen-title-size);
    line-height: var(--type-screen-title-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-back-link {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    color: var(--color-action-primary);
    font-size: var(--type-button-label-size);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.settings-back-link:focus-visible,
.settings-row:focus-visible,
.settings-logout:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.settings-main {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
}

.settings-navigation {
    display: grid;
    min-width: 0;
    gap: var(--border-hairline);
    border: var(--border-hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-border-subtle);
    overflow: hidden;
}

.settings-row {
    display: grid;
    min-width: 0;
    min-height: var(--touch-comfortable);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-surface-settings);
    color: var(--color-text-primary);
    text-decoration: none;
}

.settings-row-copy {
    display: grid;
    min-width: 0;
    gap: var(--spacing-xs);
}

.settings-row-title,
.settings-row-secondary {
    min-width: 0;
    overflow-wrap: anywhere;
}

.settings-row-title {
    font-size: var(--type-row-title-size);
    line-height: var(--type-row-title-line-height);
}

.settings-row-secondary {
    color: var(--color-text-secondary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
}

.settings-row-chevron {
    color: var(--color-icon-secondary);
    font-size: var(--icon-md);
    line-height: 1;
}

.settings-logout-section {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding-top: var(--spacing-lg);
    border-top: var(--border-hairline) solid var(--color-border-subtle);
}

.settings-logout {
    justify-content: flex-start;
    width: 100%;
    padding: 0 var(--spacing-md);
    color: var(--color-text-secondary);
    text-align: left;
}

.settings-feedback {
    margin: 0;
    color: var(--color-text-error);
    font-size: var(--type-error-size);
    line-height: var(--type-error-line-height);
    overflow-wrap: anywhere;
}

.message-list {
    margin: 0;
    padding: var(--spacing-xs) 0;
    background: var(--color-surface-app);
    list-style: none;
}

.message-list-scope {
    display: flex;
    position: relative;
    z-index: var(--z-snackbar);
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-surface-app);
}

.message-list-scope-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-secondary-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-list-scope-actions {
    position: relative;
    flex: 0 0 auto;
}

.message-list-scope-more {
    color: var(--color-icon-primary);
}

.message-list-scope-menu {
    position: absolute;
    z-index: var(--z-snackbar);
    top: calc(100% + var(--spacing-xs));
    right: 0;
    min-width: 8rem;
    padding: var(--spacing-2xs);
    border: var(--border-hairline) solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-surface-default);
    box-shadow: var(--shadow-low);
}

.message-list-scope-menu .message-list-scope-refresh {
    width: 100%;
    min-height: var(--touch-min);
    justify-content: flex-start;
    padding: 0 var(--spacing-sm);
    border-radius: var(--radius-sm);
    text-align: left;
}

.draft-list-view {
    min-width: 0;
    overflow: hidden;
    background: var(--color-surface-app);
}

.draft-list-scope {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-surface-app);
}

.draft-list-scope-title {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-secondary-line-height);
}

.draft-list-refresh-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin: var(--spacing-sm) var(--spacing-lg);
    overflow-wrap: anywhere;
}

.draft-list-refresh-warning .secondary-button {
    flex: 0 0 auto;
}

.draft-list {
    min-width: 0;
}

.draft-row {
    min-width: 0;
    list-style: none;
}

.draft-row-link {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.draft-row-link:focus-visible {
    position: relative;
    z-index: 1;
    outline: 0;
    box-shadow: inset var(--state-focus-ring);
}

.draft-row-link:hover .draft-row-surface,
.draft-row-link:focus-visible .draft-row-surface {
    background: var(--color-state-hover);
}

.draft-row-surface {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
    min-height: var(--message-row-height);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-message-background);
    color: var(--color-message-read-text);
}

.draft-row-leading,
.draft-row-copy,
.draft-row-primary,
.draft-row-trailing {
    min-width: 0;
}

.draft-row-leading {
    display: inline-flex;
    width: var(--account-marker-size);
    height: var(--account-marker-size);
    align-items: center;
}

.draft-row-leading .account-marker {
    position: static;
}

.draft-row-copy {
    display: grid;
    gap: var(--spacing-2xs);
}

.draft-row-primary {
    display: block;
    min-width: 0;
}

.draft-row-recipient,
.draft-row-subject {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-row-recipient {
    color: var(--color-message-read-text);
    font-size: var(--type-primary-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-primary-line-height);
}

.draft-row-subject {
    color: var(--color-text-secondary);
    font-size: var(--type-secondary-size);
    line-height: var(--type-secondary-line-height);
}

.draft-row-trailing {
    display: grid;
    justify-items: end;
    gap: var(--spacing-2xs);
    max-width: 7rem;
    text-align: right;
}

.draft-row-date,
.draft-row-mode {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.draft-row-date {
    color: var(--color-text-secondary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
}

.draft-row-mode {
    color: var(--color-message-read-meta);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
}

.draft-row-local-status {
    max-width: 100%;
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-md);
    min-height: var(--message-row-height);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-message-background);
    color: var(--color-message-read-text);
    text-decoration: none;
}

.message-item:active {
    background: var(--state-pressed-surface);
}

.message-swipe-row {
    position: relative;
    overflow: hidden;
}

.message-swipe-action {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    width: 9rem;
    z-index: 2;
    align-items: center;
    padding: 0 var(--spacing-lg);
    background: var(--color-state-success-container);
    color: var(--color-state-success-on-container);
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-secondary-line-height);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    clip-path: inset(0 calc(100% - var(--message-swipe-offset, 0px)) 0 0);
    transition: clip-path 180ms ease, opacity 120ms ease;
}

.message-swipe-action.is-move {
    inset: 0 0 0 auto;
    justify-content: flex-end;
    clip-path: inset(0 0 0 calc(100% - var(--message-swipe-offset, 0px)));
}

.message-swipe-action.is-visible {
    opacity: 1;
    visibility: visible;
}

.message-swipe-action-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-swipe-row > .message-item {
    z-index: 1;
    touch-action: pan-y;
}

.message-item-surface {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
    pointer-events: none;
}

.message-swipe-row > .message-item.is-swipe-busy {
    opacity: 0.72;
    pointer-events: none;
}

.message-list.is-selection-mode .message-swipe-action {
    opacity: 0;
    visibility: hidden;
}

.message-swipe-feedback {
    margin: var(--spacing-sm) var(--spacing-lg);
}

.message-expanded {
    background: var(--color-message-selected);
    box-shadow: inset 0.25rem 0 var(--color-message-selection);
}

.message-expanded > .message-item {
    background: var(--color-message-selected);
}

.message-expanded > .message-view {
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
}

.message-leading {
    position: relative;
    width: var(--sender-avatar-size);
    height: var(--sender-avatar-size);
    display: grid;
    place-items: center;
}

.sender-identity {
    position: relative;
    display: grid;
    width: var(--sender-avatar-size);
    height: var(--sender-avatar-size);
    place-items: center;
    border: var(--border-hairline) solid transparent;
    border-radius: 50%;
    color: var(--color-sender-foreground);
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-secondary-line-height);
}

.message-selection-indicator {
    display: none;
    width: var(--sender-avatar-size);
    height: var(--sender-avatar-size);
    place-items: center;
    border: var(--border-hairline) solid var(--color-border-default);
    border-radius: 50%;
    background: var(--color-message-background);
    color: transparent;
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-secondary-line-height);
}

.message-list.is-selection-mode .sender-identity {
    display: none;
}

.message-list.is-selection-mode .message-selection-indicator {
    display: grid;
}

.message-list.is-selection-mode li.is-selected > .message-item {
    background: var(--color-message-selected);
    box-shadow: inset 0.25rem 0 var(--color-message-selection);
}

.message-list.is-selection-mode li.is-selected > .message-item .message-selection-indicator {
    border-color: var(--color-message-selection);
    background: var(--color-message-selection);
    color: var(--color-message-selection-check);
}

.sender-identity-1 {
    background: var(--color-sender-background-1);
}

.sender-identity-2 {
    background: var(--color-sender-background-2);
}

.sender-identity-3 {
    background: var(--color-sender-background-3);
}

.sender-identity-4 {
    background: var(--color-sender-background-4);
}

.sender-identity-5 {
    background: var(--color-sender-background-5);
}

.sender-identity-6 {
    background: var(--color-sender-background-6);
}

.account-marker {
    position: absolute;
    right: -0.125rem;
    bottom: -0.125rem;
    width: var(--account-marker-size);
    height: var(--account-marker-size);
    border: var(--border-hairline) solid var(--color-message-background);
    border-radius: 50%;
    background: var(--color-account-default);
    box-shadow: 0 0 0 var(--border-hairline) var(--color-border-subtle);
}

.account-marker-1 {
    background: var(--color-account-1);
}

.account-marker-2 {
    background: var(--color-account-2);
}

.account-marker-3 {
    background: var(--color-account-3);
}

.account-marker-4 {
    background: var(--color-account-4);
}

.account-marker-5 {
    background: var(--color-account-5);
}

.account-marker-6 {
    background: var(--color-account-6);
}

.message-content {
    display: grid;
    min-width: 0;
    gap: var(--spacing-xs);
}

.message-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.message-trailing {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-message-read-meta);
}

.message-sender,
.message-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-sender {
    color: var(--color-message-read-text);
    font-size: var(--type-row-title-size);
    line-height: var(--type-row-title-line-height);
}

.message-item.is-unread .message-sender,
.message-item.is-unread .message-subject {
    color: var(--color-message-unread-text);
    font-weight: var(--font-weight-semibold);
}

.message-item.is-unread .sender-identity {
    border-color: var(--color-message-unread-border);
    box-shadow: 0 0 0 var(--border-hairline) var(--color-message-unread-border);
}

.message-item.is-unread .message-trailing {
    color: var(--color-message-unread-meta);
    font-weight: var(--font-weight-semibold);
}

.message-date {
    flex: 0 0 auto;
    color: inherit;
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
}

.message-subject {
    color: var(--color-message-read-text);
    font-size: var(--type-secondary-size);
    line-height: var(--type-secondary-line-height);
}

.message-snippet {
    grid-column: 2;
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: var(--type-secondary-size);
    line-height: var(--type-secondary-line-height);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.search-results {
    padding-top: 0;
}

.search-results .message-item {
    align-items: start;
    min-height: calc(var(--message-row-height) + var(--spacing-xl));
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

.search-results .message-leading {
    margin-top: var(--spacing-xs);
}

.search-results .message-content {
    align-self: center;
}

.search-results .message-snippet {
    color: var(--color-text-secondary);
}

.message-attachment {
    color: var(--color-message-attachment);
    line-height: 1;
}

.message-attachment .icon {
    width: var(--icon-xs);
    height: var(--icon-xs);
}

.message-list-skeleton {
    pointer-events: none;
}

.message-skeleton-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-md);
    min-height: var(--message-row-height);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-message-background);
}

.message-skeleton-avatar,
.message-skeleton-line {
    display: block;
    background: linear-gradient(
        90deg,
        var(--skeleton-surface),
        var(--skeleton-highlight),
        var(--skeleton-surface)
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.2s ease-in-out infinite;
}

.message-skeleton-avatar {
    width: var(--sender-avatar-size);
    height: var(--sender-avatar-size);
    border-radius: 50%;
}

.message-skeleton-line {
    grid-column: 2;
    height: 0.75rem;
    border-radius: var(--radius-pill);
}

.message-skeleton-line-primary {
    width: min(65%, 18rem);
}

.message-skeleton-line-secondary {
    width: min(48%, 14rem);
}

.list-state {
    display: grid;
    gap: var(--spacing-sm);
    margin: var(--spacing-md);
    padding: var(--spacing-lg);
    border: var(--border-hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-message-background);
}

.list-state-error {
    border-color: var(--color-state-error-container);
    background: var(--color-state-error-surface);
}

.list-state-offline {
    border-color: var(--color-state-offline-container);
    background: var(--color-state-offline-container);
    color: var(--color-state-offline-on-container);
}

.list-state-title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--type-section-title-size);
    line-height: var(--type-section-title-line-height);
}

.list-state-text {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line-height);
}

.thread-status {
    min-height: calc(100vh - 7.75rem);
}

.thread-screen {
    min-height: calc(100vh - var(--safe-area-top));
    background: var(--color-surface-app);
}

.thread-screen .screen-nav {
    border-bottom: 0;
    background: var(--color-surface-app);
}

.thread-view {
    display: grid;
    gap: var(--spacing-md);
    padding: 0 0 calc(var(--size-bottom-action-bar-height) + var(--safe-area-bottom) + var(--spacing-xl));
}

.thread-subject {
    margin: 0;
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-sm);
    color: var(--color-text-primary);
    font-size: var(--type-screen-title-size);
    line-height: var(--type-screen-title-line-height);
    overflow-wrap: anywhere;
}

.thread-message-list {
    display: grid;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0 var(--spacing-sm);
    list-style: none;
}

.thread-message-card {
    overflow: hidden;
    border: var(--border-hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-message-background);
}

.thread-message-card.is-unread {
    border-color: var(--color-message-unread-border);
}

.thread-message-card.is-expanded {
    border-color: var(--color-border-selected);
}

.thread-message-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-xs);
    width: 100%;
    align-items: center;
    padding-right: var(--spacing-sm);
}

.thread-message-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--spacing-md);
    width: 100%;
    min-height: var(--touch-comfortable);
    align-items: center;
    padding: var(--spacing-md);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

.thread-message-toggle:active {
    background: var(--color-state-pressed);
}

.thread-message-toggle:focus-visible {
    outline: 0;
    box-shadow: inset var(--state-focus-ring);
}

.thread-message-leading {
    align-self: start;
}

.thread-message-text {
    display: grid;
    min-width: 0;
    gap: var(--spacing-xs);
}

.thread-message-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    gap: var(--spacing-sm);
    align-items: baseline;
}

.thread-message-sender {
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--type-row-title-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-row-title-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread-message-date,
.thread-recipient-summary {
    color: var(--color-text-tertiary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
}

.thread-recipient-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread-message-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.thread-message-action {
    display: inline-flex;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-icon-primary);
    line-height: 1;
    text-decoration: none;
}

.thread-message-action:active {
    background: var(--color-state-pressed);
}

.thread-message-action:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.thread-message-attachment {
    flex: 0 0 auto;
}

.thread-message-expanded {
    padding: 0 var(--spacing-md) var(--spacing-md) calc(var(--sender-avatar-size) + var(--spacing-md) + var(--spacing-md));
}

.thread-recipient-toggle {
    min-height: var(--touch-min);
    padding-inline: 0;
}

.thread-recipient-details {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--spacing-xs) var(--spacing-md);
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
    font-size: var(--type-secondary-size);
    line-height: var(--type-secondary-line-height);
}

.thread-recipient-details dt {
    color: var(--color-text-tertiary);
}

.thread-recipient-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.thread-message-body-slot {
    min-width: 0;
}

.thread-message-body-state {
    min-height: auto;
    margin: var(--spacing-md) 0 0;
    padding: var(--spacing-md);
    border: var(--border-hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-secondary);
}

.thread-message-body-slot .message-body,
.thread-attachment-section {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
}

.thread-hidden-counter-item {
    display: grid;
    justify-content: center;
}

.thread-hidden-counter {
    display: grid;
    width: var(--touch-comfortable);
    height: var(--touch-comfortable);
    place-items: center;
    border: var(--border-hairline) solid var(--color-border-default);
    border-radius: 50%;
    background: var(--color-surface-main);
    color: var(--color-text-secondary);
    font-size: var(--type-button-label-size);
    font-weight: var(--font-weight-semibold);
}

.thread-hidden-counter:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.thread-reply-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-bottom-navigation);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg) calc(var(--safe-area-bottom) + var(--spacing-sm));
    border-top: var(--border-hairline) solid var(--color-navigation-border);
    background: var(--color-reply-bar-background);
    box-shadow: var(--shadow-low);
}

.thread-reply-action {
    display: inline-flex;
    min-height: var(--touch-min);
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    border-radius: var(--radius-pill);
    background: var(--color-reply-action-background);
    color: var(--color-reply-action-foreground);
    font-size: var(--type-button-label-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-button-label-line-height);
    text-decoration: none;
}

.thread-reply-action:active {
    background: var(--color-reply-action-pressed);
}

.thread-reply-action:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.message-status {
    min-height: calc(100vh - 7.75rem);
}

.message-view {
    padding: var(--space-3);
}

.message-view-subject {
    margin: 0 0 var(--space-3);
    font-size: 1.25rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.message-metadata {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.4rem var(--space-2);
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.message-metadata dt {
    color: var(--color-muted);
}

.message-metadata dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.message-body,
.attachment-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.message-body-text {
    margin: 0;
    font: inherit;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.thread-message-body-slot .message-body-html {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.thread-message-body-slot .message-body-html a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.thread-message-body-slot .message-body-html table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.thread-message-body-slot .message-body-html img {
    display: block;
    max-width: 100%;
    height: auto;
}

.message-body-empty {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.5;
}

.attachment-section h2 {
    margin: 0 0 var(--space-2);
    font-size: 1rem;
}

.attachment-list {
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    list-style: none;
}

.attachment-item {
    display: grid;
    min-width: 0;
    grid-template-columns: var(--touch-comfortable) minmax(0, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-md);
}

.attachment-item + .attachment-item {
    border-top: 1px solid var(--color-border);
}

.attachment-name {
    color: var(--color-accent);
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--type-secondary-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--type-secondary-line-height);
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.attachment-meta {
    display: block;
    margin-top: var(--spacing-xs);
    color: var(--color-text-tertiary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
    overflow-wrap: anywhere;
}

.attachment-card-icon {
    display: grid;
    width: var(--touch-comfortable);
    height: var(--touch-comfortable);
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-surface-secondary);
    color: var(--color-text-secondary);
    font-size: var(--type-metadata-size);
    font-weight: var(--font-weight-bold);
}

.attachment-card-icon-pdf {
    background: var(--color-state-error-container);
    color: var(--color-text-error);
}

.attachment-card-icon-document {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.attachment-card-icon-archive {
    background: var(--color-state-warning-container);
    color: var(--color-text-warning);
}

.attachment-card-details {
    display: grid;
    min-width: 0;
    align-content: center;
}

.attachment-card-actions {
    display: flex;
    grid-column: 2;
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.attachment-download-state {
    display: grid;
    grid-column: 2;
    gap: var(--spacing-sm);
    min-width: 0;
}

.attachment-download-feedback {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--type-metadata-size);
    line-height: var(--type-metadata-line-height);
    overflow-wrap: anywhere;
}

.attachment-download-error {
    color: var(--color-text-error);
}

.attachment-download-retry {
    width: fit-content;
    min-height: var(--touch-min);
}

.attachment-download,
.attachment-more {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding-inline: var(--spacing-md);
    white-space: nowrap;
}

.attachment-download {
    text-decoration: none;
}

.attachment-sheet-actions {
    display: grid;
}

.attachment-sheet-action {
    width: 100%;
    min-height: var(--touch-comfortable);
    justify-content: flex-start;
    padding-inline: var(--spacing-lg);
    text-align: left;
}

.attachment-info-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--spacing-xs) var(--spacing-md);
    margin: 0;
}

.attachment-info-list dt {
    color: var(--color-text-tertiary);
}

.attachment-info-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.message-reply-link,
.message-forward-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.reply-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.reply-quote {
    padding: var(--space-3);
    border-left: 0.25rem solid var(--color-accent);
    border-radius: 0 0.65rem 0.65rem 0;
    background: #f5f7fc;
}

.reply-quote h2 {
    margin: 0 0 var(--space-2);
    font-size: 0.95rem;
}

.reply-quote-metadata {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem var(--space-2);
    margin: 0;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.reply-quote-metadata dt {
    font-weight: 650;
}

.reply-quote-metadata dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.reply-quote-body {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.forwarded-message {
    display: grid;
    min-width: 0;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) var(--spacing-lg);
    padding: var(--spacing-md);
    border-left: var(--border-emphasis) solid var(--color-border-focus);
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
}

.forwarded-message-header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.forwarded-message-title {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: var(--type-button-label-size);
}

.forwarded-message-remove {
    flex: 0 0 auto;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
}

.forwarded-message-metadata {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--spacing-xs) var(--spacing-sm);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--type-caption-size);
}

.forwarded-message-metadata dt {
    font-weight: var(--font-weight-semibold);
}

.forwarded-message-metadata dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.forwarded-message-body {
    min-width: 0;
    margin: var(--spacing-sm) 0 0;
    padding-top: var(--spacing-sm);
    border-top: var(--border-hairline) solid var(--color-divider);
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
}

.reply-cancel {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Full-screen Composer uses the flat working-document field pattern. */
.composer-content {
    min-height: 100vh;
    background: var(--color-surface-settings);
}

.composer-screen {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--color-surface-settings);
}

.composer-header {
    position: sticky;
    z-index: var(--z-sticky-header);
    top: 0;
    display: grid;
    grid-template-columns: minmax(var(--touch-min), auto) minmax(var(--touch-min), auto) minmax(0, 1fr) minmax(var(--touch-min), auto);
    align-items: center;
    min-height: calc(var(--touch-min) + var(--spacing-sm));
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: var(--border-hairline) solid var(--color-border-subtle);
    background: var(--color-surface-settings);
    box-shadow: var(--elevation-low);
}

.composer-header > :nth-child(3) {
    justify-self: end;
}

.composer-header-action,
.composer-send-action {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
}

.composer-send-action {
    padding: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.composer-send-action:disabled {
    color: var(--color-text-disabled);
}

.composer-form {
    display: grid;
    min-height: 0;
    gap: 0;
    padding: 0;
}

.composer-form .field {
    gap: 0;
    padding: 0 var(--spacing-lg);
    border-bottom: var(--border-hairline) solid var(--color-divider);
    background: var(--color-surface-settings);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.composer-form .field > label {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: center;
    min-height: var(--touch-min);
}

.composer-from-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: center;
    min-height: var(--touch-min);
}

.composer-row-label {
    color: var(--color-text-secondary);
}

.composer-from-value {
    min-width: 0;
    overflow: hidden;
    padding: var(--spacing-sm) 0;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    line-height: var(--type-input-line-height);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.composer-from-value {
    min-height: var(--touch-min);
    padding-right: var(--touch-min);
    background: transparent;
    cursor: pointer;
}

button.composer-from-value:focus-visible {
    outline: 0;
    box-shadow: var(--state-focus-ring);
}

.composer-form .field input,
.composer-form .field select,
.composer-form .field textarea {
    min-height: var(--touch-min);
    padding: var(--spacing-sm) 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-text-primary);
}

.composer-form .field input:focus,
.composer-form .field select:focus,
.composer-form .field textarea:focus {
    border-color: transparent;
    box-shadow: inset 0 -2px 0 var(--color-border-focus);
}

.composer-form .field textarea {
    min-height: 18rem;
    resize: vertical;
}

.composer-form .field:has(textarea) {
    flex: 1 1 auto;
    min-height: 18rem;
}

.composer-form .field:has(textarea) > label {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}

.composer-form .field:has(textarea) > label > textarea {
    min-height: 18rem;
}

.composer-form .field-hint {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    padding: 0 0 var(--spacing-sm) 4.5rem;
    overflow-wrap: anywhere;
}

.composer-form .compose-attachment-selection,
.composer-form .reply-quote,
.composer-form .forwarded-message,
.composer-form .form-error {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: var(--spacing-md) var(--spacing-lg);
}

.composer-form .compose-attachment-list,
.composer-form .compose-attachment-item {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.composer-form > .primary-button,
.composer-form .reply-actions {
    display: none;
}

.reply-quote {
    padding: var(--spacing-md);
    border-left: var(--border-emphasis) solid var(--color-border-focus);
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
}

.reply-quote-toggle {
    min-height: var(--touch-min);
    cursor: pointer;
    color: var(--color-text-link);
    font-weight: var(--font-weight-semibold);
}

.reply-quote[open] .reply-quote-toggle {
    margin-bottom: var(--spacing-sm);
}

.compose-attachment-item {
    border-color: var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-surface-secondary);
}

.compose-attachment-name {
    min-width: 0;
}

.thread-item {
    position: relative;
    display: grid;
    gap: 0.25rem;
    min-height: 6.5rem;
    padding: var(--space-2) var(--space-3) var(--space-2) 2rem;
    border-bottom: 1px solid var(--color-border);
    color: inherit;
    text-decoration: none;
}

.thread-item:active {
    background: #f5f7fc;
}

.thread-row {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.thread-sender,
.thread-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thread-sender {
    font-size: 0.95rem;
}

.thread-item.is-unread .thread-sender,
.thread-item.is-unread .thread-subject {
    font-weight: 750;
}

.thread-date {
    flex: 0 0 auto;
    color: var(--color-muted);
    font-size: 0.75rem;
}

.thread-subject {
    font-size: 0.9rem;
}

.thread-snippet {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.85rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.unread-dot {
    position: absolute;
    top: 1.25rem;
    left: var(--space-3);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-accent);
}

.spinner {
    width: 1.75rem;
    height: 1.75rem;
    margin: 0 auto var(--space-3);
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.status-view .secondary-button {
    justify-self: center;
}

.sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

noscript {
    display: block;
    padding: var(--space-3);
    color: var(--color-danger);
    text-align: center;
}

@keyframes skeleton-pulse {
    to {
        background-position: -200% 0;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 48rem) {
    .app-header {
        flex-wrap: nowrap;
    }

    .header-search {
        order: 0;
        flex: 1 1 10rem;
    }

    .header-actions .text-button {
        padding-right: var(--space-2);
        padding-left: var(--space-2);
        font-size: 0.875rem;
    }

    .app-shell {
        width: min(100%, 48rem);
        margin: 0 auto;
        border-right: 1px solid var(--color-border);
        border-left: 1px solid var(--color-border);
    }

    .account-list-actions .primary-button {
        width: auto;
    }

    .filter-list-actions .primary-button {
        width: auto;
    }

    .thread-item:hover {
        background: #f8f9fc;
    }

    .message-item:hover {
        background: var(--color-state-hover);
    }
}

@media (max-width: 30rem) {
    .cookie-notice {
        grid-template-columns: minmax(0, 1fr);
    }

    .cookie-notice-action {
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .spinner,
    .icon-button[aria-busy='true']::after,
    .text-button[aria-busy='true']::before,
    .primary-button[aria-busy='true']::before,
    .secondary-button[aria-busy='true']::before,
    .danger-button[aria-busy='true']::before,
    .account-skeleton-marker,
    .account-skeleton-copy,
    .filter-skeleton-line,
    .message-skeleton-avatar,
    .message-skeleton-line {
        animation: none;
    }

    .text-button,
    .primary-button,
    .secondary-button,
    .danger-button,
    .search-button,
    .icon-button,
    .field input,
    .field select,
    .field textarea {
        transition-duration: 0.01ms;
    }

    .message-swipe-action {
        transition: none;
    }
}

@media (max-width: 25rem) {
    /* Outbox rows keep one fixed compact rhythm at 320px. */
    .outbox-message-item {
        min-height: 0;
        padding: 0;
    }

    .outbox-row-link {
        min-height: var(--message-row-height);
        padding-top: 0;
        padding-bottom: 0;
    }
}