/* MaxWebmail — Gmail-style stylesheet */

/* ─── Theme variables ────────────────────────────────────────── */
:root {
    /* Surfaces */
    --bg:          #ffffff;
    --bg-alt:      #f6f8fc;
    --bg-soft:     #f1f3f4;
    --bg-hover:    #eef0f3;
    --bg-selected: #c2dbff;
    --bg-row-hover: #f5f6f7;
    --bg-unread:   #ffffff;
    --bg-read:     #f2f6fc;
    /* Text */
    --fg:          #202124;
    --fg-muted:    #5f6368;
    --fg-soft:     #80868b;
    --fg-strong:   #1f1f1f;
    /* Borders */
    --border:      #e8eaed;
    --border-soft: #f1f3f4;
    --border-strong: #dadce0;
    /* Accent / brand */
    --accent:      #c2e7ff;
    --accent-strong: #001d35;
    --primary:     #0b57d0;
    --primary-hover: #0842a0;
    --primary-soft: #d3e3fd;
    --link:        #1a73e8;
    --danger:      #d93025;
    --warning:     #b06000;
    --success:     #137333;
    --star-yellow: #f4b400;
    /* Material elevation */
    --shadow-1:    0 1px 2px 0 rgba(60,64,67,.08);
    --shadow-2:    0 1px 3px 1px rgba(60,64,67,.10), 0 1px 2px 0 rgba(60,64,67,.08);
    --shadow-3:    0 4px 8px 3px rgba(60,64,67,.10), 0 1px 3px 0 rgba(60,64,67,.08);
    --shadow-4:    0 8px 24px 6px rgba(60,64,67,.10), 0 2px 6px 2px rgba(60,64,67,.08);
    --shadow-row:  inset 1px 0 0 rgba(60,64,67,.16), inset -1px 0 0 rgba(60,64,67,.16), 0 1px 2px 0 rgba(60,64,67,.10), 0 1px 3px 1px rgba(60,64,67,.08);
    /* Aliases */
    --shadow-sm:   var(--shadow-1);
    --shadow-md:   var(--shadow-2);
    --shadow-lg:   var(--shadow-4);
    --shadow-card: var(--shadow-1);
    /* Radii */
    --radius-sm:   4px;
    --radius:      8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-pill: 999px;
    --radius-row:  0 16px 16px 0;
    /* Layout */
    --header-height: 64px;
    --sidebar-width: 256px;
    --content-radius: 12px;
    /* Motion */
    --transition: 150ms cubic-bezier(.4,0,.2,1);
    --transition-fast: 100ms cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
    --bg:          #1f1f1f;
    --bg-alt:      #181818;
    --bg-soft:     #2d2e30;
    --bg-hover:    #393b3d;
    --bg-selected: #3e4a59;
    --bg-row-hover: #2c2c2d;
    --bg-unread:   #2a2a2a;
    --bg-read:     #1f1f1f;
    --fg:          #e3e3e3;
    --fg-muted:    #b3b3b3;
    --fg-soft:     #969696;
    --fg-strong:   #ffffff;
    --border:      #3c4043;
    --border-soft: #2d2e30;
    --border-strong: #5f6368;
    --accent:      #004a77;
    --primary:     #a8c7fa;
    --primary-hover: #c2e0ff;
    --primary-soft: #4a4458;
    --link:        #8ab4f8;
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        --bg:          #1f1f1f;
        --bg-alt:      #181818;
        --bg-soft:     #2d2e30;
        --bg-hover:    #393b3d;
        --bg-selected: #3e4a59;
        --bg-row-hover: #2c2c2d;
        --bg-unread:   #2a2a2a;
        --bg-read:     #1f1f1f;
        --fg:          #e3e3e3;
        --fg-muted:    #b3b3b3;
        --fg-soft:     #969696;
        --fg-strong:   #ffffff;
        --border:      #3c4043;
        --border-soft: #2d2e30;
        --border-strong: #5f6368;
        --accent:      #004a77;
        --primary:     #a8c7fa;
        --primary-hover: #c2e0ff;
        --primary-soft: #4a4458;
        --link:        #8ab4f8;
    }
}

/* ─── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Google Sans', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    color: var(--fg);
    background: var(--bg-alt);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; }
input, select, textarea, button { font: inherit; color: inherit; }

/* ─── Auth (login) layout ─────────────────────────────────────── */
.auth-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #f0f4ff 0%, #fef3f2 50%, #fef9c3 100%);
    background-size: 200% 200%;
    animation: auth-bg-shift 18s ease infinite;
    position: relative;
    overflow: hidden;
}
@keyframes auth-bg-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.auth-body::before, .auth-body::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: .55;
}
.auth-body::before {
    width: 480px; height: 480px;
    background: radial-gradient(circle, #4285f4 0%, transparent 70%);
    top: -120px; left: -100px;
}
.auth-body::after {
    width: 520px; height: 520px;
    background: radial-gradient(circle, #ea4335 0%, transparent 70%);
    bottom: -160px; right: -120px;
}
.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;       /* card on top, credit below */
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 1rem;
    position: relative;
    z-index: 1;
}
.auth-credit {
    text-align: center;
    line-height: 1.4;
    color: var(--fg-muted);
}
.auth-credit-label {
    font-size: .62rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: .85;
}
.auth-credit-brand {
    display: inline-block;
    margin-top: 2px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--brand-green, #34a853);
    text-decoration: none;
    letter-spacing: -.2px;
}
.auth-credit-brand:hover { text-decoration: none; opacity: .85; }
.auth-credit-tagline {
    font-size: .68rem;
    color: var(--fg-muted);
    line-height: 1.3;
    margin-top: 1px;
}
.auth-card {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(60, 64, 67, .15), 0 4px 16px rgba(60, 64, 67, .08);
    padding: 2.5rem 2.5rem 2rem;
    width: 100%;
    max-width: 440px;
    border: 1px solid rgba(255, 255, 255, .8);
}
.auth-brand { text-align: center; margin-bottom: 1.5rem; }
.auth-logo {
    display: inline-flex; align-items: center; gap: .65rem;
    font-size: 1.4rem; font-weight: 500; color: var(--fg-strong);
    letter-spacing: -.25px;
}
.auth-logo .logo-mark {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #ea4335 0%, #fbbc04 35%, #34a853 70%, #4285f4 100%);
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(66, 133, 244, .25);
}
.auth-form h1 {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0 0 .35rem 0;
    color: var(--fg-strong);
    letter-spacing: -.5px;
}
.auth-subtitle {
    text-align: center;
    color: var(--fg-muted);
    margin: 0 0 1.75rem 0;
    font-size: .9rem;
}

/* Input with leading icon + optional show-password toggle */
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input-icon {
    position: absolute;
    left: 14px;
    width: 18px; height: 18px;
    fill: var(--fg-muted);
    pointer-events: none;
}
.auth-input-wrap input {
    padding-left: 42px !important;
    padding-right: 42px !important;
    height: 48px;
    border-radius: 12px;
    border: 1px solid var(--border-strong);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.auth-input-wrap input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(66, 133, 244, .12);
    outline: none;
}
.auth-pw-toggle {
    position: absolute;
    right: 8px;
    width: 32px; height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--fg-muted);
    transition: background var(--transition);
}
.auth-pw-toggle:hover { background: var(--bg-hover); color: var(--fg); }
.auth-pw-toggle svg { width: 18px; height: 18px; fill: currentColor; }

/* Remember-me + footer */
.auth-options {
    display: flex; align-items: center; justify-content: space-between;
    margin: -.25rem 0 1.25rem;
    font-size: .85rem;
    color: var(--fg-muted);
}
.auth-remember {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    user-select: none;
}
.auth-remember input { width: 16px; height: 16px; cursor: pointer; }

.auth-actions { margin-top: 1.5rem; }
.auth-submit {
    height: 48px;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 500;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(11, 87, 208, .25);
    transition: transform .12s ease, box-shadow var(--transition);
}
.auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(11, 87, 208, .32);
}
.auth-submit:active { transform: translateY(0); }
.auth-submit-icon {
    width: 18px; height: 18px;
    transition: transform .15s ease;
}
.auth-submit:hover .auth-submit-icon { transform: translateX(2px); }

.auth-footer {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: .75rem;
    color: var(--fg-soft);
}

/* Alert with icon for error messages */
.auth-form .alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    font-size: .85rem;
}
.alert-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
}

/* Mobile tweaks */
@media (max-width: 480px) {
    .auth-card { padding: 2rem 1.5rem 1.5rem; border-radius: 16px; }
    .auth-form h1 { font-size: 1.35rem; }
    .auth-input-wrap input { height: 44px; }
    .auth-submit { height: 44px; }
}

/* ─── Forms ───────────────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-row.full { grid-template-columns: 1fr; }
.form-row.thirds { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 600px) {
    .form-row, .form-row.thirds { grid-template-columns: 1fr; }
}
label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 500;
    font-size: .85rem;
    color: var(--fg);
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], select, textarea {
    width: 100%;
    padding: .7rem .85rem;
    font-size: .95rem;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg);
    color: var(--fg);
    transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--link);
    box-shadow: 0 0 0 2px rgba(26,115,232,.2);
}
.form-check { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.form-check input[type=checkbox], .form-check input[type=radio] { width: auto; }

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .55rem 1.1rem;
    font-size: .875rem;
    font-weight: 500;
    /* Default neutral button — visible in both light and dark themes */
    background: var(--bg-soft);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
    letter-spacing: .15px;
}
.btn:hover { background: var(--bg-hover); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: var(--shadow-sm); }
.btn-primary:disabled { background: #aab5c4; border-color: #aab5c4; cursor: not-allowed; box-shadow: none; }
.btn-secondary { background: var(--bg); color: var(--link); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-soft); }
.btn-danger { background: var(--bg); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #fce8e6; }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-link {
    background: transparent; color: var(--link); border: none;
    padding: .5rem .25rem; font-size: .9rem; cursor: pointer;
}
.btn-link:hover { background: var(--bg-soft); border-radius: 4px; }
.btn-block { display: flex; width: 100%; }
.btn-icon {
    background: transparent; border: none;
    padding: 0; width: 40px; height: 40px;
    border-radius: 50%;
    color: var(--fg-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color var(--transition);
}
.btn-icon:hover { background: var(--bg-hover); color: var(--fg); }
.btn-icon:disabled { color: var(--fg-soft); cursor: default; }
.btn-icon:disabled:hover { background: transparent; }
.btn-icon svg { width: 20px; height: 20px; fill: currentColor; }

.icon-md { width: 20px; height: 20px; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

/* ─── Alerts ──────────────────────────────────────────────────── */
.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.alert-success { background: #e6f4ea; color: #137333; border: 1px solid #ceead6; }
.alert-danger  { background: #fce8e6; color: #c5221f; border: 1px solid #f5b8b3; }
.alert-warning { background: #fef7e0; color: #b06000; border: 1px solid #fde293; }

[data-theme="dark"] .alert-success,
[data-theme="system"] .alert-success { background: rgba(19,115,51,.18); border-color: rgba(19,115,51,.35); color: #81c995; }
[data-theme="dark"] .alert-danger,
[data-theme="system"] .alert-danger  { background: rgba(217,48,37,.18); border-color: rgba(217,48,37,.35); color: #f28b82; }

/* ─── App layout ──────────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--header-height) 1fr;
    grid-template-areas: "header header" "sidebar main";
    height: 100vh;
    overflow: hidden;
    background: var(--bg-alt);
}

/* ─── Top bar ─────────────────────────────────────────────────── */
.topbar {
    grid-area: header;
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem;
    background: var(--bg-alt);
    z-index: 10;
    border-bottom: 1px solid transparent;
}
.topbar-left {
    display: flex; align-items: center; gap: .5rem;
    width: calc(var(--sidebar-width) - .25rem);
    padding-left: .25rem;
    flex-shrink: 0;
}
.topbar-brand {
    display: inline-flex; align-items: center; gap: .65rem;
    font-size: 1.375rem; font-weight: 500;
    color: var(--fg-strong);
    user-select: none;
    letter-spacing: -.25px;
}
.topbar-brand .logo-mark {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #ea4335 0%, #fbbc04 50%, #34a853 75%, #4285f4 100%);
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

/* Custom uploaded-image logo — replaces the gradient tile but keeps its outer
   dimensions / radius / shadow. <img> fills the box with object-fit: contain. */
.logo-mark--img {
    background: var(--bg-soft) !important;
    color: transparent !important;
    padding: 2px;
}
.logo-mark--img img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.topbar-search {
    flex: 1;
    max-width: 720px;
    position: relative;
}
.topbar-search form { display: flex; align-items: center; }
.topbar-search input {
    width: 100%;
    background: var(--bg-soft);
    border-color: transparent;
    border-radius: var(--radius-lg);
    padding: 0 1rem 0 3rem;
    font-size: .95rem;
    height: 48px;
    transition: background-color var(--transition), box-shadow var(--transition);
}
.topbar-search input:hover {
    background: var(--bg);
    box-shadow: var(--shadow-1);
}
.topbar-search input:focus {
    background: var(--bg);
    border-color: transparent;
    box-shadow: var(--shadow-2);
}
.topbar-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--fg-muted);
    pointer-events: none;
    width: 22px; height: 22px;
}
.topbar-search-icon svg { width: 22px; height: 22px; fill: currentColor; }
.topbar-search input { padding-right: 3rem; }
.topbar-search-tune {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--fg-muted);
    transition: background-color var(--transition);
}
.topbar-search-tune:hover { background: var(--bg-hover); color: var(--fg); }
.topbar-search-tune svg { width: 20px; height: 20px; fill: currentColor; }
.topbar-actions {
    display: flex; align-items: center; gap: .25rem;
    margin-left: auto;
    padding-right: .25rem;
}
.user-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #1a73e8, #1052b3);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: 1rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: box-shadow var(--transition);
}
.user-avatar:hover { box-shadow: 0 0 0 2px var(--bg-hover); }
.user-menu-wrap { position: relative; }
.user-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    min-width: 300px;
    padding: .5rem 0;
    display: none;
    z-index: 100;
    animation: fadeInDown var(--transition);
}
.user-menu.is-open { display: block; }
.user-menu-item {
    display: flex; align-items: center; gap: .85rem;
    padding: .65rem 1.25rem;
    color: var(--fg); text-decoration: none;
    font-size: .875rem;
    cursor: pointer;
}
.user-menu-item:hover { background: var(--bg-soft); text-decoration: none; }
.user-menu-item svg { width: 20px; height: 20px; fill: currentColor; color: var(--fg-muted); }
.user-menu-divider { border-top: 1px solid var(--border); margin: .35rem 0; }
.user-menu-info {
    padding: 1.25rem 1.25rem 1rem 1.25rem;
    font-size: .85rem;
    color: var(--fg-muted);
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.user-menu-info .user-avatar {
    margin: 0 auto .65rem auto;
    width: 56px; height: 56px;
    font-size: 1.4rem;
}
.user-menu-info .user-name { color: var(--fg); font-weight: 500; font-size: .95rem; }
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sidebar unread count badge - bolder Gmail style */
.sidebar-link-count {
    margin-left: auto;
    font-size: .75rem;
    font-weight: 600;
    color: var(--fg);
    flex-shrink: 0;
    letter-spacing: .15px;
}
.sidebar-link.is-active .sidebar-link-count { color: var(--accent-strong); }

/* Mobile floating action button (FAB) for compose */
.fab-compose {
    display: none;
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--primary-soft);
    color: var(--primary-hover);
    border: none;
    box-shadow: var(--shadow-3);
    cursor: pointer;
    z-index: 40;
    align-items: center; justify-content: center;
    text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition);
}
.fab-compose:hover { box-shadow: var(--shadow-4); transform: scale(1.04); }
.fab-compose svg { width: 24px; height: 24px; fill: currentColor; }

@media (max-width: 768px) {
    .fab-compose { display: inline-flex; }
    .sidebar-compose { display: none; }
}

/* Selection toolbar (shown when checkboxes are checked) */
.selection-bar {
    display: none;
    align-items: center; gap: .5rem;
    padding: .5rem .75rem;
    background: var(--accent);
    border-bottom: 1px solid var(--border);
    height: 48px;
    flex-shrink: 0;
}
.selection-bar.is-visible { display: flex; }
.selection-bar .selection-count {
    margin-right: 1rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--accent-strong);
}
.selection-bar .btn-icon { color: var(--accent-strong); }
.selection-bar .divider { background: rgba(0,0,0,.18); }

/* Hide regular toolbar when selection is active */
.main.has-selection .main-toolbar { display: none; }
.main.has-selection .selection-bar { display: flex; }

/* Selected message row styling */
.message-row.is-selected {
    background: var(--accent) !important;
    box-shadow: inset 4px 0 0 var(--primary);
}

/* Important marker (Gmail-style yellow chevron) */
.message-row .important-marker {
    color: var(--star-yellow);
    width: 14px; height: 14px;
}
.message-row .important-marker.is-important { color: #f5a623; }

/* Better pagination buttons in mail list toolbar */
.main-toolbar .btn-icon[disabled] { opacity: .3; }

/* Avatar (Gmail-style colored circle with sender's initial) — desktop hides it. */
.message-row .row-avatar {
    display: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease;
    position: relative;
}
.message-row .row-avatar-check {
    display: none;
    width: 22px; height: 22px;
    fill: #fff;
}
.message-row.is-selected .row-avatar { background-color: var(--primary) !important; }
.message-row.is-selected .row-avatar .row-avatar-letter { display: none; }
.message-row.is-selected .row-avatar .row-avatar-check { display: block; }
.message-row .unread-dot {
    display: none;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fg);
    margin-left: 6px;
    vertical-align: middle;
}

/* Mobile: Gmail-app-style row.
   Layout:
     col 1: avatar (spans all rows)
     col 2: sender (row 1) / subject (row 2) / preview (row 3) / attachments (row 4)
     col 3: time (row 1) / star (last row, bottom-right)
   Each text row is a single ellipsised line — preview gets two lines for breathing room. */
@media (max-width: 768px) {
    /* Page bg slightly off-white so the white rows have something to sit on top of */
    .message-list { padding: 0; background: var(--bg-soft); }

    .message-row {
        display: grid !important;
        /* minmax(0, 1fr) lets the content column SHRINK below its min-content size,
           so long unbreakable strings like "thebinarycomputer.com" trigger ellipsis
           instead of expanding the column past the right padding. */
        grid-template-columns: 48px minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto auto !important;
        column-gap: 14px !important;
        row-gap: 2px !important;
        min-height: 92px !important;
        /* CRITICAL: padding MUST be !important — the desktop .message-row rule at
           ~line 1169 has the same specificity and is declared LATER in the file,
           so without !important the desktop's 16px right padding wins on mobile too,
           and the subject runs into the absolute time/star area. */
        padding: 14px 120px 14px 16px !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, .18) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: var(--bg) !important;
        align-items: start !important;
        position: relative !important;     /* anchor for absolute time + star */
    }
    .message-row.is-unread { background: var(--bg) !important; }
    .message-row.is-read   { background: var(--bg) !important; }
    .message-row:hover     { background: var(--bg-row-hover) !important; }
    .message-row.is-selected { background: var(--primary-soft) !important; }

    /* White line for dark themes + dark photo themes (galaxy/aurora/forest/stones/mountain).
       Light photo themes (frost/coast/trees/turquoise/wave/abstract/pine/beach) keep the
       default black line — a white line would be invisible on their light backgrounds. */
    [data-theme="dark"] .message-row,
    [data-theme="midnight"] .message-row,
    [data-theme="graphite"] .message-row,
    [data-theme="photo-galaxy"] .message-row,
    [data-theme="photo-aurora"] .message-row,
    [data-theme="photo-forest"] .message-row,
    [data-theme="photo-stones"] .message-row,
    [data-theme="photo-mountain"] .message-row {
        border-bottom-color: rgba(255, 255, 255, .18) !important;
    }
    /* Light photo themes — slightly stronger opacity so the line stays visible
       against the soft photo backdrop. */
    [data-theme="photo-coast"] .message-row,
    [data-theme="photo-frost"] .message-row,
    [data-theme="photo-trees"] .message-row,
    [data-theme="photo-turquoise"] .message-row,
    [data-theme="photo-wave"] .message-row,
    [data-theme="photo-abstract"] .message-row,
    [data-theme="photo-pine"] .message-row,
    [data-theme="photo-beach"] .message-row {
        border-bottom-color: rgba(0, 0, 0, .25) !important;
    }
    .message-row .checkbox-cell { display: none !important; }

    /* Avatar — Gmail-mobile sized (44px), spans the full vertical height of the row,
       and is vertically centred within that span (sits in the middle, not at the top). */
    .message-row .row-avatar {
        display: inline-flex !important;
        grid-row: 1 / span 4;
        grid-column: 1;
        align-self: center;
        margin-top: 0;
        width: 44px; height: 44px;
        font-size: 1.15rem;
        font-weight: 500;
    }

    /* Row 1: sender on left, time on right */
    .message-row .from {
        grid-row: 1; grid-column: 2;
        font-size: .95rem;
        line-height: 1.3;
        font-weight: 400;
        color: var(--fg);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
    .message-row.is-unread .from { font-weight: 700; color: var(--fg); }
    .message-row.is-read .from { color: var(--fg-muted); }

    /* Time + star — both absolute, both right-aligned to the SAME right edge so they
       sit flush vertically. Time text is also right-aligned inside its own box. */
    .message-row .time {
        position: absolute !important;
        top: 12px;
        right: 12px;
        display: block !important;
        text-align: right;
        font-size: .72rem;
        line-height: 1.2;
        white-space: nowrap;
        color: var(--fg-muted);
    }
    .message-row.is-unread .time { color: var(--fg); font-weight: 600; }
    .message-row:hover .time { display: block !important; }  /* defeat the desktop hover-hide rule */
    .message-row .unread-dot { display: none !important; }

    /* Subject + preview + attachments stack vertically in col 2.
       Time and star live as absolute elements in the right padding zone
       (the row has padding-right: 70px) so subject-preview can take col 2
       full width without overlapping them. */
    .message-row .subject-preview {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        grid-row: 2 / span 3;
        grid-column: 2;
        white-space: normal !important;
        overflow: visible !important;
        font-size: .85rem;
        line-height: 1.35;
        color: var(--fg);
        max-width: 100%;
        min-width: 0;
    }
    .message-row .subject-preview > .subject {
        display: block;
        font-size: .88rem;
        color: var(--fg);
        font-weight: 400;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .message-row.is-unread .subject-preview > .subject { font-weight: 600; }
    .message-row .subject-preview > .preview {
        display: block;
        font-size: .8rem;
        color: var(--fg-muted) !important;
        font-weight: 400;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .message-row .subject-preview > .preview::before { content: ''; }

    /* Label chips show inline before the subject — small accent */
    .message-row .subject-preview > .label-chip {
        display: inline-block;
        font-size: .62rem;
        padding: 1px 6px;
        margin: 0 4px 2px 0;
        line-height: 1.5;
        align-self: flex-start;
    }

    /* Attachments on mobile: hide the chip(s) entirely from the body — the
       indicator lives inline with the sender name instead (.from-attach below). */
    .message-row .subject-preview .attachment-chip { display: none !important; }

    /* Inline paper-clip indicator next to the sender name (mobile only).
       Only rendered when the row has attachments. */
    .message-row .from {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
    }
    .message-row .from-attach {
        display: inline-flex !important;          /* beat the desktop "display: none" sibling rule */
        align-items: center;
        color: var(--fg-muted);
        flex-shrink: 0;
    }
    .message-row .from-attach svg { width: 14px; height: 14px; fill: currentColor; }

    /* Star — absolute, sits directly below the time at top-right.
       Size: 32x32 button with a 22x22 icon centered inside.
       Right offset 7px so the icon's visible right edge (button right - 5px
       padding for centering) lands at 12px from row right — flush with the
       time text's right edge. */
    .message-row .star-cell {
        position: absolute !important;
        top: 30px;
        right: 7px;
        display: flex !important;
    }
    .message-row .star { width: 32px !important; height: 32px !important; padding: 0; }
    .message-row .star svg { width: 22px !important; height: 22px !important; }

    /* Hover-action buttons hidden on mobile; long-press / tap reveals nothing — Gmail-like */
    .message-row .row-actions { display: none !important; }

    /* Mobile search bar full width */
    .topbar-left { width: auto; flex: 0 0 auto; }
    .topbar-search { flex: 1; }
    .topbar-search input { height: 42px; }
    .topbar-actions .btn-icon:not(#user-avatar):not(#apps-btn) { display: none; }
    .topbar-actions .user-menu-wrap { display: inline-block; }
    #help-btn, #refresh-btn, #theme-toggle { display: none !important; }
    /* Hide topbar brand on mobile — it lives in the sidebar drawer instead */
    .topbar-brand { display: none !important; }
    /* Hide advanced search filter button on mobile (too cramped) */
    .topbar-search-tune { display: none !important; }
    .search-advanced { display: none !important; }
    /* Mail-view header: tighter spacing, smaller right-side actions on mobile */
    .message-view { padding: 1rem .85rem 2rem !important; }
    .message-subject { font-size: 1.1rem; gap: .4rem; }
    .message-subject .folder-chip { font-size: .65rem; padding: 2px 6px; }
    .message-header-actions .btn-icon { width: 32px; height: 32px; }
    .message-header-actions .btn-icon svg { width: 18px; height: 18px; }
    .message-meta { gap: .65rem; padding-bottom: .5rem; }
    .message-meta .avatar { width: 36px; height: 36px; }
    .message-meta .meta-actions { flex-wrap: wrap; gap: 2px; }
    .message-meta .time { font-size: .72rem; }
    .message-meta .meta-btn { width: 28px; height: 28px; }
    .message-meta .meta-btn svg { width: 16px; height: 16px; }
    .message-meta .time-relative { display: none; } /* save space */
    /* Reply / Forward / Reply all become full-width on tap */
    .message-actions { flex-wrap: wrap; gap: .5rem; }
    .message-actions .btn { flex: 1; min-width: 90px; }
    /* Compose modal full-screen back button */
    .compose-window .compose-mobile-back { display: inline-flex !important; }
    /* Pull-to-refresh indicator */
    .ptr-indicator {
        position: absolute;
        top: 8px; left: 50%;
        margin-left: -16px;
        width: 32px; height: 32px;
        background: var(--bg);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: var(--primary);
        box-shadow: var(--shadow-2);
        opacity: 0;
        transform: translateY(-30px);
        transition: opacity .12s ease;
        z-index: 100;
        pointer-events: none;
    }
    .ptr-indicator.ptr-loading { animation: ptr-spin .8s linear infinite; }
    @keyframes ptr-spin { 100% { transform: translateY(40px) rotate(360deg); } }

    .main-toolbar { padding: .25rem .35rem; height: 44px; }
    .main-toolbar-info { font-size: .75rem; }

    .main, [data-theme^="photo-"] .main {
        background: var(--bg) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }
    .topbar, [data-theme^="photo-"] .topbar {
        background: var(--bg) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-bottom: 1px solid var(--border-soft);
    }
}

/* ─── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
    grid-area: sidebar;
    background: var(--bg-alt);
    overflow-y: auto;
    overflow-x: hidden;
    padding: .25rem 0 1rem 0;
}
/* Sidebar brand — only shown on mobile (sidebar drawer header) */
.sidebar-brand {
    display: none;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem .5rem;
    text-decoration: none;
    color: var(--fg);
}
.sidebar-brand .logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ea4335, #fbbc04, #34a853, #1a73e8);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}
.sidebar-brand-name {
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -.25px;
}
@media (max-width: 768px) {
    .sidebar-brand { display: inline-flex; }
}

.sidebar-compose {
    display: inline-flex; align-items: center; gap: .75rem;
    margin: .5rem 1rem 1rem 1rem;
    padding: .9rem 1.5rem .9rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    background: var(--primary-soft); color: var(--primary-hover);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow var(--transition), background-color var(--transition);
    letter-spacing: .25px;
}
.sidebar-compose:hover {
    box-shadow: var(--shadow-3);
    background: #c0d6f8;
    text-decoration: none;
}
.sidebar-compose svg { width: 22px; height: 22px; fill: currentColor; }
.sidebar-section { padding: .15rem 0; }
.sidebar-section-title {
    display: flex; justify-content: space-between; align-items: center;
    padding: .75rem 1.25rem .25rem 1.5rem;
    font-size: .75rem;
    color: var(--fg-muted);
    font-weight: 500;
    letter-spacing: .25px;
}
.sidebar-link {
    display: flex; align-items: center; gap: 1.25rem;
    padding: 0 1rem 0 1.5rem;
    height: 32px;
    color: var(--fg);
    text-decoration: none;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    margin: 1px 1rem 1px 0;
    font-size: .875rem;
    font-weight: 500;
    transition: background-color var(--transition-fast);
    position: relative;
    letter-spacing: .1px;
}
.sidebar-link:hover { background: var(--bg-hover); text-decoration: none; }
.sidebar-link.is-active {
    background: var(--accent);
    color: var(--accent-strong);
    font-weight: 700;
}
.sidebar-link svg { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.sidebar-link-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-link-count {
    margin-left: auto;
    font-size: .75rem;
    color: var(--fg-muted);
    flex-shrink: 0;
    font-weight: 500;
}
.sidebar-link.is-active .sidebar-link-count { color: var(--accent-strong); }
.label-color-dot {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}

/* ─── Sidebar footer (credits) ────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; height: 100%; min-height: 100%; }

:root { --brand-green: #137333; }
[data-theme="dark"],
[data-theme="midnight"],
[data-theme="graphite"] { --brand-green: #34d058; }
@media (prefers-color-scheme: dark) {
    [data-theme="system"] { --brand-green: #34d058; }
}
[data-theme="photo-galaxy"],
[data-theme="photo-aurora"],
[data-theme="photo-forest"],
[data-theme="photo-stones"],
[data-theme="photo-mountain"] { --brand-green: #34d058; }

.sidebar-footer {
    margin-top: auto;
    padding: .55rem 1rem .6rem;
    text-align: center;
    border-top: 1px solid var(--border-soft);
    line-height: 1.25;
}
.sidebar-footer-label {
    font-size: .58rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-bottom: .1rem;
}
.sidebar-footer-brand {
    display: inline-block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--brand-green);
    text-decoration: none;
    letter-spacing: -.2px;
}
.sidebar-footer-brand:hover {
    text-decoration: none;
    opacity: .85;
}
.sidebar-footer-tagline {
    font-size: .62rem;
    color: var(--fg-muted);
    line-height: 1.2;
    margin-top: .05rem;
}

[data-theme^="photo-"] .sidebar-footer { border-top-color: rgba(0,0,0,.08); }
[data-theme="photo-galaxy"] .sidebar-footer,
[data-theme="photo-aurora"] .sidebar-footer,
[data-theme="photo-forest"] .sidebar-footer,
[data-theme="photo-stones"] .sidebar-footer,
[data-theme="photo-mountain"] .sidebar-footer {
    border-top-color: rgba(255,255,255,.12);
}
[data-theme="photo-galaxy"] .sidebar-footer-label,
[data-theme="photo-aurora"] .sidebar-footer-label,
[data-theme="photo-forest"] .sidebar-footer-label,
[data-theme="photo-stones"] .sidebar-footer-label,
[data-theme="photo-mountain"] .sidebar-footer-label,
[data-theme="photo-galaxy"] .sidebar-footer-tagline,
[data-theme="photo-aurora"] .sidebar-footer-tagline,
[data-theme="photo-forest"] .sidebar-footer-tagline,
[data-theme="photo-stones"] .sidebar-footer-tagline,
[data-theme="photo-mountain"] .sidebar-footer-tagline {
    color: rgba(255,255,255,.80);
}

/* ─── Main pane ───────────────────────────────────────────────── */
.main {
    grid-area: main;
    overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--bg);
    /* All four corners rounded, with a gap on the right and bottom that lets the
     * photo theme show through — matches Gmail's "card on photo" look. The top-left
     * is filled by .app-shell::before to avoid the photo bleeding into the L-junction. */
    border-radius: var(--content-radius);
    margin: 0 12px 12px 0;
    box-shadow: var(--shadow-1);
}
/* Filler placed in the .app-shell layer that sits BEHIND the panel's rounded
 * top-left corner. It blocks the photo theme from peeking through the wedge that
 * the rounded corner leaves in the panel's bounding rectangle. The filler matches
 * the panel's solid bg so the corner reads as one unbroken white surface. */
.app-shell { position: relative; }
.app-shell::before {
    content: '';
    position: absolute;
    top: var(--header-height);
    left: var(--sidebar-width);
    width: var(--content-radius);
    height: var(--content-radius);
    background: var(--bg);
    z-index: 0;
    pointer-events: none;
}
.topbar, .sidebar { position: relative; z-index: 10; }
.main { position: relative; z-index: 1; }
/* Filler also fully opaque to match the panel — clean curved corner, no bleed. */
[data-theme^="photo-"] .app-shell::before {
    background: var(--bg);
}
.main-toolbar {
    display: flex; align-items: center; gap: .15rem;
    padding: .35rem .5rem;
    border-bottom: 1px solid transparent;
    flex-shrink: 0;
    height: 48px;
}
.main-toolbar .divider {
    width: 1px; height: 20px;
    background: var(--border);
    margin: 0 .25rem;
}
.main-toolbar-spacer { flex: 1; }
.main-toolbar-info {
    color: var(--fg-muted); font-size: .8rem;
    white-space: nowrap;
}
.main-pane {
    flex: 1; overflow-y: auto;
}

/* ─── Message list (Gmail-style) ──────────────────────────────── */
.message-list { width: 100%; }
.message-row {
    display: grid;
    grid-template-columns: 36px 36px 200px 1fr auto;
    align-items: center;
    gap: .25rem;
    padding: 0 1rem 0 .25rem;
    min-height: 40px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    font-size: .875rem;
    color: var(--fg);
    text-decoration: none;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
}
.message-row:hover {
    background: var(--bg-row-hover);
    box-shadow: var(--shadow-row);
    text-decoration: none;
    z-index: 1;
}
.message-row.is-unread {
    background: var(--bg-unread);
    font-weight: 700;
}
.message-row.is-read {
    background: var(--bg-read);
    font-weight: 400;
    color: var(--fg-muted);
}
.message-row.is-read .from,
.message-row.is-read .subject { color: var(--fg); }
.message-row.is-selected { background: var(--accent); }
.message-row .checkbox-cell, .message-row .star-cell {
    display: flex; align-items: center; justify-content: center;
}
.message-row .star {
    background: transparent; border: none; cursor: pointer;
    padding: 0; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--fg-soft);
    border-radius: 50%;
}
.message-row .star:hover { background: var(--bg-hover); color: var(--fg-muted); }
.message-row .star.is-starred { color: var(--star-yellow); }
.message-row .star.is-starred:hover { color: var(--star-yellow); }
.message-row .star svg { width: 18px; height: 18px; fill: currentColor; }
.message-row .checkbox-cell input {
    width: 16px; height: 16px;
    margin: 0; cursor: pointer;
}
.message-row .from {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .875rem;
}
/* Inline attach-clip indicator next to sender name — mobile-only.
   Hide on desktop because desktop already shows full attachment chips inline. */
.message-row .from-attach { display: none; }
.message-row .subject-preview {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.message-row .subject { color: inherit; font-weight: inherit; }
.message-row .preview {
    color: var(--fg-muted);
    margin-left: .25rem;
    font-weight: 400;
}
.message-row .preview::before { content: ' — '; color: var(--fg-soft); }
.message-row .time {
    flex-shrink: 0;
    color: var(--fg-muted);
    font-size: .75rem;
    padding-left: .5rem;
    text-align: right;
    min-width: 88px;
}
.message-row.is-unread .time { color: var(--fg); font-weight: 600; }

/* Inline attachment chip (Outlook-style: filename pill on subject line) */
.message-row .attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 200px;
    padding: 0 7px 0 5px;
    margin-left: 8px;
    background: rgba(0, 0, 0, .06);
    border-radius: 3px;
    font-size: .72rem;
    font-weight: 500;
    color: var(--fg);
    line-height: 1.7;
    vertical-align: middle;
    overflow: hidden;
    transition: background var(--transition-fast);
}
.message-row .attachment-chip + .attachment-chip { margin-left: 4px; }
.message-row .attachment-chip:hover { background: rgba(0, 0, 0, .12); }
.message-row .attachment-chip svg {
    width: 12px; height: 12px;
    fill: var(--fg-muted);
    flex-shrink: 0;
}
.message-row .attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-theme="dark"] .message-row .attachment-chip,
[data-theme="midnight"] .message-row .attachment-chip,
[data-theme="graphite"] .message-row .attachment-chip {
    background: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .message-row .attachment-chip:hover,
[data-theme="midnight"] .message-row .attachment-chip:hover,
[data-theme="graphite"] .message-row .attachment-chip:hover {
    background: rgba(255, 255, 255, .14);
}
[data-theme^="photo-"] .message-row .attachment-chip {
    background: rgba(255, 255, 255, .65);
    color: var(--fg);
}
[data-theme^="photo-"] .message-row .attachment-chip:hover {
    background: rgba(255, 255, 255, .85);
}
.message-row .label-chip {
    display: inline-block;
    padding: 0 6px;
    border-radius: 4px;
    font-size: .65rem;
    color: #fff;
    margin-right: 4px;
    line-height: 1.55;
    font-weight: 500;
    vertical-align: middle;
    letter-spacing: .25px;
    text-transform: uppercase;
}
.thread-count {
    color: var(--fg-muted);
    font-size: .8rem;
    font-weight: normal;
    margin-left: 4px;
}

/* Hover actions on row (right-side, shown on hover) */
.message-row .row-actions {
    display: none;
    position: absolute;
    right: 0; top: 0; bottom: 0;
    padding: 0 .25rem;
    align-items: center;
    background: linear-gradient(to right, transparent, var(--bg-row-hover) 24px);
}
.message-row:hover .row-actions { display: flex; }
.message-row:hover .time { display: none; }
.row-actions .btn-icon { width: 32px; height: 32px; }
.row-actions .btn-icon svg { width: 18px; height: 18px; }

/* ─── Empty state ─────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 4rem 2rem 2rem 2rem;
    color: var(--fg-muted);
}
.empty-state svg {
    width: 64px; height: 64px;
    color: var(--fg-soft);
    margin-bottom: 1rem;
    opacity: .8;
}
.empty-state h3 { margin: 0; font-weight: 400; font-size: 1.15rem; color: var(--fg); }
.empty-state p { margin: .5rem 0 0 0; font-size: .9rem; }

/* ─── Message view ────────────────────────────────────────────── */
.message-view {
    padding: 1.25rem 2rem 3rem 2rem;
}
/* Keep body text readable by capping its width, but let the header (subject + print/
 * pop-out actions) and meta row (sender + date + reply) span the full panel width
 * so the right-side controls hug the panel's right edge like Gmail. */
.message-view > .message-labels,
.message-view > .message-body,
.message-view > .attachments,
.message-view > .message-actions {
    max-width: 1100px;
}
.message-header {
    display: flex; align-items: flex-start; gap: 1rem;
    margin: 0 0 1.5rem 0;
    width: 100%;
    max-width: none;
}
.message-subject {
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--fg);
    margin: 0;
    line-height: 1.4;
    flex: 1;
    display: flex; align-items: center; gap: .65rem;
    flex-wrap: wrap;
    letter-spacing: -.1px;
}
.message-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.message-header-actions .btn-icon { width: 36px; height: 36px; }
.message-header-actions .btn-icon svg { width: 20px; height: 20px; }

/* Inline applied label chips next to the subject (Gmail-style with X to remove) */
.message-label-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    border-radius: 4px;
    color: #fff;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .15px;
}
.message-label-name { white-space: nowrap; }
.message-label-remove {
    background: transparent;
    border: none;
    padding: 0;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    opacity: .8;
    cursor: pointer;
    transition: opacity .12s ease, background .12s ease;
}
.message-label-remove:hover { opacity: 1; background: rgba(0,0,0,.2); }
.message-label-remove svg { width: 12px; height: 12px; fill: currentColor; }

/* Label-as dropdown menu items */
.more-menu-section-title {
    padding: 4px 16px 8px;
    font-size: .7rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}
.label-menu-item .label-menu-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex: 0 0 12px;  /* defeat the .more-menu-item span { flex: 1 } rule */
}
.label-menu-item .label-menu-check {
    margin-left: auto;
    width: 16px; height: 16px;
    fill: var(--primary);
    visibility: hidden;
}
.label-menu-item.is-applied .label-menu-check { visibility: visible; }
.label-menu-item.is-applied { font-weight: 500; }
.message-subject > span:first-child { font-weight: 400; }
.message-subject .folder-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    font-weight: 500;
    color: var(--fg-muted);
    background: var(--bg-soft);
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: .15px;
}
.message-meta {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 0 0 .9rem 0;
    margin-bottom: 1rem;
}
.message-meta .avatar {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-hover);
    color: var(--fg-muted);
    display: flex; align-items: center; justify-content: center;
    font-weight: 500; font-size: 1.05rem;
}
.message-meta .from-info { flex: 1; min-width: 0; padding-top: 2px; }
.message-meta .sender-line {
    display: flex; align-items: baseline; gap: .35rem;
    flex-wrap: wrap;
}
.message-meta .sender {
    font-weight: 700;
    color: var(--fg);
    font-size: .9rem;
}
.message-meta .sender-email {
    color: var(--fg-muted);
    font-weight: 400;
    font-size: .8rem;
}
.recipients-toggle {
    display: inline-flex; align-items: center; gap: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 0 2px 0;
    font-size: .8rem;
    color: var(--fg-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.recipients-toggle:hover { color: var(--fg); }
.recipients-caret {
    width: 14px; height: 14px;
    transition: transform .15s ease;
}
.recipients-toggle[aria-expanded="true"] .recipients-caret { transform: rotate(180deg); }
.recipients-detail {
    margin-top: 6px;
    padding: 8px 0;
    font-size: .8rem;
    color: var(--fg-muted);
    line-height: 1.6;
    border-top: 1px solid var(--border-soft);
}
.recipients-detail .rd-label {
    display: inline-block;
    width: 50px;
    color: var(--fg-soft);
    font-weight: 500;
}
.message-meta .meta-actions {
    display: flex; align-items: center; gap: 4px;
    padding-top: 4px;
    flex-shrink: 0;
}
.message-meta .time {
    color: var(--fg-muted);
    font-size: .8rem;
    white-space: nowrap;
}
.message-meta .time-relative { margin-left: 4px; }
.message-meta .meta-btn { width: 32px; height: 32px; }
.message-meta .meta-btn svg { width: 18px; height: 18px; fill: currentColor; }
.message-meta .meta-star svg { fill: none; stroke: currentColor; stroke-width: 2; }
.message-meta .meta-star.is-starred { color: var(--star-yellow); }
.message-meta .meta-star.is-starred svg { fill: var(--star-yellow); stroke: var(--star-yellow); }

/* Meta-row "more" dropdown — Gmail-style menu */
.more-menu-wrap { position: relative; }
.more-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 280px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    box-shadow: var(--shadow-4);
    padding: 6px 0;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease;
}
/* When the trigger is on the LEFT side of its container (e.g. inbox toolbar),
 * align the menu to the trigger's left so it expands to the right. */
.more-menu.menu-align-left {
    right: auto;
    left: 0;
}
.more-menu[hidden] { display: none !important; }
.more-menu.is-open { opacity: 1; transform: translateY(0); }
.more-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    font-size: .85rem;
    color: var(--fg);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}
.more-menu-item:hover { background: var(--bg-hover); text-decoration: none; }
.more-menu-item svg {
    width: 18px; height: 18px;
    fill: var(--fg-muted);
    flex-shrink: 0;
}
.more-menu-item span { flex: 1; }
.more-menu-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 6px 0;
}
.message-body {
    margin: 1rem 0;
    line-height: 1.65;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: .95rem;
    color: var(--fg);
}
.message-body iframe {
    width: 100%;
    border: none;
    min-height: 360px;
}
.message-labels {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-bottom: 1rem;
}
.message-labels .label-chip {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: .75rem;
    color: #fff;
    cursor: pointer;
    border: none;
    transition: opacity var(--transition), transform var(--transition);
    font-weight: 500;
    letter-spacing: .25px;
}
.message-labels .label-chip:hover { transform: translateY(-1px); }

.attachments {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 1.5rem;
}
.attachments-title {
    font-size: .85rem;
    color: var(--fg-muted);
    margin-bottom: .5rem;
}
.attachment-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    margin: .25rem;
    font-size: .85rem;
    text-decoration: none;
    color: var(--fg);
    background: var(--bg);
    transition: background-color var(--transition);
}
.attachment-chip:hover { background: var(--bg-soft); text-decoration: none; }
.attachment-chip svg { width: 18px; height: 18px; color: var(--fg-muted); }

.message-actions {
    margin-top: 2rem;
    display: flex; gap: .5rem; flex-wrap: wrap;
}

/* ─── Compose (Gmail-style floating modal) ────────────────────── */
.compose-window {
    position: fixed; bottom: 0; right: 16px;
    width: 660px; max-width: calc(100vw - 32px);
    height: 584px; max-height: calc(100vh - 80px);
    background: var(--bg);
    border-radius: 12px 12px 0 0;
    box-shadow: var(--shadow-4);
    display: flex; flex-direction: column;
    z-index: 50;
    border: none;
    overflow: hidden;
    transition: width var(--transition), height var(--transition);
}
/* Resize handle — top-left corner of compose window */
.compose-resize-handle {
    position: absolute;
    top: 0; left: 0;
    width: 14px; height: 14px;
    cursor: nwse-resize;
    z-index: 60;
    background: linear-gradient(135deg, transparent 50%, var(--fg-soft) 50%, var(--fg-soft) 60%, transparent 60%, transparent 75%, var(--fg-soft) 75%, var(--fg-soft) 85%, transparent 85%);
    opacity: .4;
    transition: opacity .15s ease;
}
.compose-resize-handle:hover { opacity: 1; }
/* Drag-over state when files are dragged onto the compose window */
.compose-window.compose-drag-over::after {
    content: 'Drop to attach';
    position: absolute;
    inset: 0;
    background: rgba(11, 87, 208, .92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 500;
    z-index: 80;
    pointer-events: none;
    border-radius: inherit;
    border: 3px dashed rgba(255,255,255,.6);
}
/* Maximized state — center modal, larger */
.compose-window.is-maximized {
    width: min(900px, calc(100vw - 80px)) !important;
    max-width: none !important;
    height: calc(100vh - 80px) !important;
    max-height: none !important;
    bottom: 40px;
    top: 40px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 12px;
}
.compose-header {
    padding: .5rem .5rem .5rem 1rem;
    background: var(--bg-soft);
    color: var(--link);
    display: flex; align-items: center; justify-content: space-between;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .15px;
    border-bottom: 1px solid var(--border-soft);
}
.compose-header-title { color: var(--link); font-weight: 500; }
.compose-header-actions { display: flex; gap: 2px; }
.compose-header .btn-icon {
    color: var(--fg-muted); width: 28px; height: 28px;
    border-radius: 4px;
}
.compose-header .btn-icon:hover { background: rgba(0,0,0,.06); color: var(--fg); }
.compose-header .btn-icon svg { width: 16px; height: 16px; }
.compose-body {
    flex: 1;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.compose-fields {
    padding: 0 1rem;
}
.compose-field {
    display: flex; align-items: center; gap: .65rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: .875rem;
}
.compose-field:last-child { border-bottom: 1px solid var(--border-soft); }
.compose-field-label {
    width: 38px;
    flex-shrink: 0;
    color: var(--fg-muted);
    font-size: .8125rem;
}
.compose-field input {
    flex: 1;
    border: none;
    padding: 0;
    background: transparent;
    color: var(--fg);
    font-size: .875rem;
    border-radius: 0;
    height: auto;
    box-shadow: none !important;
}
.compose-field input:focus { outline: none; box-shadow: none !important; }
.compose-field--from .compose-from-value {
    flex: 1;
    color: var(--fg);
    font-size: .875rem;
}
.compose-field--subject input {
    font-weight: 500;
    padding: .25rem 0;
}
.compose-field--subject {
    padding: .35rem 0 .5rem 0;
}
.compose-field--subject .compose-field-label { display: none; }

/* Cc / Bcc inline toggle buttons in the To row */
.compose-toggle-buttons {
    display: flex; gap: .25rem;
    flex-shrink: 0;
}
.compose-toggle {
    background: transparent;
    border: none;
    color: var(--fg-muted);
    font-size: .8125rem;
    font-weight: 500;
    padding: .25rem .5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.compose-toggle:hover { background: var(--bg-hover); color: var(--fg); }
.compose-toggle.is-active { display: none; }

/* Formatting toolbar */
.compose-format-toolbar {
    display: flex; align-items: center; gap: 1px;
    padding: .25rem .5rem;
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
}
.format-btn {
    background: transparent;
    border: none;
    width: 28px; height: 28px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--fg-muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.format-btn:hover { background: var(--bg-hover); color: var(--fg); }
.format-btn.is-active { background: var(--bg-soft); color: var(--link); }
.format-btn svg { width: 16px; height: 16px; fill: currentColor; }
.format-divider {
    width: 1px; height: 18px;
    background: var(--border);
    margin: 0 4px;
}

/* Emoji picker */
.emoji-picker {
    position: absolute;
    bottom: 60px; left: 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-3);
    padding: .5rem;
    z-index: 60;
    width: 280px;
    max-height: 240px;
    overflow-y: auto;
}
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.emoji-grid button {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    width: 32px; height: 32px;
    cursor: pointer;
    border-radius: 4px;
}
.emoji-grid button:hover { background: var(--bg-hover); }

/* Recipient chip (added when typing email + comma/enter) */
.recipient-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--bg-soft);
    border-radius: 999px;
    padding: 2px 4px 2px 8px;
    font-size: .75rem;
    color: var(--fg);
    margin: 1px 4px 1px 0;
}
.recipient-chip.is-invalid { background: #fce8e6; color: var(--danger); }
.recipient-chip-remove {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,.08);
    border: none;
    cursor: pointer;
    color: var(--fg-muted);
    font-size: .8rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
}
.recipient-chip-remove:hover { background: rgba(0,0,0,.15); color: var(--fg); }

/* Compose header colors — slightly nicer */
.compose-header { color: rgba(255,255,255,.95); }
.compose-header-title { font-weight: 500; }

/* From row caret */
.compose-from-caret {
    display: inline-flex;
    margin-left: 4px;
    color: var(--fg-muted);
    cursor: pointer;
    vertical-align: middle;
}
.compose-from-caret svg { width: 18px; height: 18px; fill: currentColor; }

/* Send split button (Send + caret dropdown) */
.compose-send-group {
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.compose-send-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: .5rem 1.5rem;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    border-right: 1px solid rgba(255,255,255,.18);
    transition: background-color var(--transition-fast);
}
.compose-send-btn:hover { background: var(--primary-hover); }
.compose-send-btn:disabled { background: #aab5c4; cursor: not-allowed; }
.compose-send-caret {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 0 .65rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color var(--transition-fast);
}
.compose-send-caret:hover { background: var(--primary-hover); }
.compose-send-caret svg { width: 16px; height: 16px; fill: currentColor; }

/* Font family + size selects */
.format-select-wrap {
    position: relative;
    display: inline-flex; align-items: center;
}
.format-select {
    height: 28px;
    border: 1px solid transparent;
    background: transparent;
    font-size: .8125rem;
    color: var(--fg);
    padding: 0 .5rem;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6368'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 16px;
    min-width: 56px;
}
.format-select:hover { background-color: var(--bg-hover); }
.format-select:focus { outline: 2px solid var(--link); outline-offset: -2px; }
#font-family { min-width: 92px; }

/* Text color split button */
.format-color-wrap { position: relative; display: inline-flex; }
.format-color-btn {
    flex-direction: column;
    gap: 0; padding: 4px 6px;
    height: 28px;
}
.format-color-bar {
    display: block; width: 14px; height: 3px;
    margin-top: 1px;
    border-radius: 1px;
}

/* Override format-btn for B/I/U letters (no SVG) */
.format-btn b, .format-btn i, .format-btn u {
    font-family: 'Times New Roman', serif;
    font-size: 14px;
    line-height: 1;
}

/* Pill toolbar — Gmail-style soft container */
.compose-format-toolbar {
    margin: 0 .5rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    border: none;
    background: var(--bg);
    border-top: 1px solid var(--border-soft);
    display: flex; align-items: center; flex-wrap: nowrap; gap: 1px;
    flex-shrink: 0;
    overflow-x: auto;
}

/* Bottom action row — tighter Gmail layout. Keep on a single line; if a tiny
   viewport forces wrap, show a horizontal scrollbar instead of stacking. */
.compose-footer {
    padding: .65rem 1rem;
    border-top: 1px solid var(--border-soft);
    display: flex; align-items: center; gap: .15rem;
    background: var(--bg);
    flex-wrap: nowrap;
    overflow-x: auto;
}
.compose-footer .compose-send-group { margin-right: .5rem; }
.compose-footer .btn-icon { width: 32px; height: 32px; }
.compose-footer .btn-icon svg { width: 18px; height: 18px; }
.compose-editor {
    flex: 1;
    padding: 1rem 1.25rem;
    overflow-y: auto;
}
.compose-editor [contenteditable] {
    min-height: 240px;
    outline: none;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--fg);
}
.compose-editor [contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: var(--fg-soft);
    pointer-events: none;
}
.compose-attachments {
    padding: 0 1rem .5rem 1rem;
    max-height: 100px;
    overflow-y: auto;
    display: flex; flex-wrap: wrap; gap: .35rem;
}
.compose-attachments .attachment-chip {
    background: var(--bg-soft);
    margin: 0;
}
.compose-footer {
    padding: .65rem 1rem;
    border-top: 1px solid var(--border-soft);
    display: flex; align-items: center; gap: .35rem;
    background: var(--bg);
}
.compose-footer .btn-primary { padding-left: 1.5rem; padding-right: 1.5rem; }
.compose-footer .btn-icon { color: var(--fg-muted); }
.compose-saved {
    margin-left: auto;
    font-size: .75rem; color: var(--fg-muted);
}

.compose-window.compose-minimized {
    height: 44px !important;
    width: 280px;
}
.compose-window.compose-minimized .compose-body { display: none; }

@media (max-width: 768px) {
    .compose-window {
        right: 0; left: 0; bottom: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        max-width: none; max-height: none;
        border-radius: 0;
    }
    .compose-window.compose-minimized {
        width: 100%;
        height: 44px !important;
    }
}

/* ─── Mobile responsive ───────────────────────────────────────── */
.menu-toggle { display: none; background: transparent; border: none; padding: 0; }
.sidebar-overlay { display: none; }

@media (max-width: 768px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-areas: "header" "main";
    }
    .topbar-left { width: auto; }
    .topbar-brand { font-size: 1.15rem; }
    .topbar-search { max-width: none; }
    .menu-toggle {
        display: inline-flex;
    }
    .sidebar {
        position: fixed;
        top: var(--header-height); left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        z-index: 50;
        transform: translateX(-100%);
        transition: transform .25s ease-out;
        background: var(--bg) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.is-open { transform: translateX(0); }
    /* Force opaque sidebar on mobile even for photo themes */
    [data-theme^="photo-"] .sidebar { background: var(--bg) !important; }
    [data-theme="dark"] .sidebar,
    [data-theme="midnight"] .sidebar,
    [data-theme="graphite"] .sidebar { background: var(--bg) !important; }
    .sidebar-overlay {
        display: none;
        position: fixed; inset: var(--header-height) 0 0 0;
        background: rgba(0,0,0,.4);
        z-index: 40;
    }
    .sidebar-overlay.is-open { display: block; }
    .main { border-radius: 0; margin: 0; }
    /* (.message-row mobile layout is defined in the earlier @media block) */
}

/* ─── Settings / admin / list pages ───────────────────────────── */
.page {
    padding: 2rem 2.5rem;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
/* When .page is a direct child of .main (no main-pane wrapper), let .main itself scroll. */
/* Use :has() (broadly supported) to detect pages without an explicit main-pane. */
.main:not(:has(.main-pane)) { overflow-y: auto; }
/* Fallback: any flex .page inside .main fills remaining height for browsers w/o :has() */
.page h1 {
    font-size: 1.5rem; font-weight: 400; margin: 0 0 1.5rem 0;
    color: var(--fg-strong); letter-spacing: -.25px;
}
.page h2 {
    font-size: 1rem; font-weight: 500; margin: 0 0 1rem 0;
    color: var(--fg-strong); letter-spacing: .15px;
}
.section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-1);
}
.text-muted { color: var(--fg-muted); }
.small { font-size: .85rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
table { width: 100%; border-collapse: collapse; }
table th, table td {
    padding: .65rem .85rem; text-align: left;
    border-bottom: 1px solid var(--border-soft);
    font-size: .9rem;
}
table th {
    color: var(--fg-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 500;
}
.kbd {
    display: inline-block; padding: 1px 6px;
    background: var(--bg-soft); border: 1px solid var(--border-strong);
    border-radius: 3px; font-family: ui-monospace, monospace; font-size: .8em;
    color: var(--fg);
}
code {
    background: var(--bg-soft); padding: 1px 6px; border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    color: var(--fg);
}

/* ─── Toasts ──────────────────────────────────────────────────── */
.toast-wrap {
    position: fixed; bottom: 1.5rem; left: 1.5rem;
    z-index: 1000;
    display: flex; flex-direction: column; gap: .5rem;
}
.toast {
    background: #323232;
    color: #fff;
    padding: .85rem 1.25rem;
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    font-size: .85rem;
    min-width: 280px;
    max-width: 400px;
}
.toast.is-danger { background: var(--danger); color: #fff; }

/* ─── Loading spinner ─────────────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(0,0,0,.1);
    border-top-color: var(--link);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Modal ───────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(32,33,36,.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    padding: 1rem;
}
.modal {
    background: var(--bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 100%; max-width: 480px;
    overflow: hidden;
}
.modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.modal-body   { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .5rem; }

/* ─── Utility ─────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: 1rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.hidden { display: none !important; }
.color-dot {
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 50%;
}

/* ─── Themes (presets) ────────────────────────────────────────── */

[data-theme="ocean"] {
    --bg-alt: #e3f2fd;
    --accent: #b3e5fc;
    --primary: #0277bd;
    --primary-hover: #01579b;
    --primary-soft: #b3e5fc;
    --link: #0277bd;
}
[data-theme="ocean"] body { background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%) fixed; }
[data-theme="ocean"] .app-shell { background: transparent; }
[data-theme="ocean"] .topbar, [data-theme="ocean"] .sidebar { background: transparent; }

[data-theme="sunset"] {
    --bg-alt: #fff3e0;
    --accent: #ffccbc;
    --primary: #d84315;
    --primary-hover: #bf360c;
    --primary-soft: #ffccbc;
    --link: #d84315;
}
[data-theme="sunset"] body { background: linear-gradient(135deg, #ffe0b2 0%, #ffccbc 50%, #f8bbd0 100%) fixed; }
[data-theme="sunset"] .app-shell { background: transparent; }
[data-theme="sunset"] .topbar, [data-theme="sunset"] .sidebar { background: transparent; }

[data-theme="forest"] {
    --bg-alt: #e8f5e9;
    --accent: #c8e6c9;
    --primary: #2e7d32;
    --primary-hover: #1b5e20;
    --primary-soft: #c8e6c9;
    --link: #2e7d32;
}
[data-theme="forest"] body { background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) fixed; }
[data-theme="forest"] .app-shell { background: transparent; }
[data-theme="forest"] .topbar, [data-theme="forest"] .sidebar { background: transparent; }

[data-theme="lavender"] {
    --bg-alt: #ede7f6;
    --accent: #d1c4e9;
    --primary: #5e35b1;
    --primary-hover: #4527a0;
    --primary-soft: #d1c4e9;
    --link: #5e35b1;
}
[data-theme="lavender"] body { background: linear-gradient(135deg, #ede7f6 0%, #d1c4e9 100%) fixed; }
[data-theme="lavender"] .app-shell { background: transparent; }
[data-theme="lavender"] .topbar, [data-theme="lavender"] .sidebar { background: transparent; }

[data-theme="rose"] {
    --bg-alt: #fce4ec;
    --accent: #f8bbd0;
    --primary: #c2185b;
    --primary-hover: #880e4f;
    --primary-soft: #f8bbd0;
    --link: #c2185b;
}
[data-theme="rose"] body { background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%) fixed; }
[data-theme="rose"] .app-shell { background: transparent; }
[data-theme="rose"] .topbar, [data-theme="rose"] .sidebar { background: transparent; }

[data-theme="midnight"] {
    --bg:          #0f1729;
    --bg-alt:      #060d1a;
    --bg-soft:     #1a2444;
    --bg-hover:    #243056;
    --bg-selected: #2c3a6c;
    --bg-row-hover:#1a2444;
    --bg-unread:   #182040;
    --bg-read:     #0f1729;
    --fg:          #e3e3e3;
    --fg-muted:    #a4b2cc;
    --fg-soft:     #7d8aa8;
    --fg-strong:   #ffffff;
    --border:      #283358;
    --border-soft: #1a2444;
    --border-strong: #3d4a78;
    --accent:      #2c3a6c;
    --primary:     #82b1ff;
    --primary-hover: #b6cbff;
    --primary-soft: #1e2a55;
    --link:        #82b1ff;
}
[data-theme="midnight"] body { background: linear-gradient(135deg, #060d1a 0%, #0f1729 100%) fixed; }

[data-theme="graphite"] {
    --bg:          #232323;
    --bg-alt:      #1a1a1a;
    --bg-soft:     #2e2e2e;
    --bg-hover:    #3a3a3a;
    --bg-selected: #4a4a4a;
    --bg-row-hover:#2c2c2c;
    --bg-unread:   #2a2a2a;
    --bg-read:     #232323;
    --fg:          #e3e3e3;
    --fg-muted:    #b3b3b3;
    --fg-soft:     #969696;
    --fg-strong:   #ffffff;
    --border:      #3c3c3c;
    --border-soft: #2d2d2d;
    --border-strong: #5f5f5f;
    --accent:      #424242;
    --primary:     #d8d8d8;
    --primary-hover: #f0f0f0;
    --primary-soft: #404040;
    --link:        #a8c7fa;
}

[data-theme="lemon"] {
    --bg-alt: #fffde7;
    --accent: #fff59d;
    --primary: #f57f17;
    --primary-hover: #e65100;
    --primary-soft: #fff59d;
    --link: #f57f17;
}
[data-theme="lemon"] body { background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%) fixed; }
[data-theme="lemon"] .app-shell { background: transparent; }
[data-theme="lemon"] .topbar, [data-theme="lemon"] .sidebar { background: transparent; }

[data-theme="mint"] {
    --bg-alt: #e0f2f1;
    --accent: #b2dfdb;
    --primary: #00796b;
    --primary-hover: #004d40;
    --primary-soft: #b2dfdb;
    --link: #00796b;
}
[data-theme="mint"] body { background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%) fixed; }
[data-theme="mint"] .app-shell { background: transparent; }
[data-theme="mint"] .topbar, [data-theme="mint"] .sidebar { background: transparent; }

/* ─── Theme picker modal — always renders in LIGHT colors so the photo cards
 * and labels stay clearly visible regardless of the user's active theme ──── */
.theme-picker-backdrop {
    position: fixed; inset: 0;
    background: rgba(32,33,36,.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    padding: 1rem;
    /* Hard-coded light palette inside the modal */
    --bg:           #ffffff;
    --bg-alt:       #f6f8fc;
    --bg-soft:      #f1f3f4;
    --bg-hover:     #eef0f3;
    --fg:           #202124;
    --fg-muted:     #5f6368;
    --fg-soft:      #80868b;
    --fg-strong:   #1f1f1f;
    --border:       #e8eaed;
    --border-soft:  #f1f3f4;
    --border-strong:#dadce0;
    color: var(--fg);
}
.theme-picker-backdrop.hidden { display: none; }
.theme-picker {
    background: var(--bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 100%; max-width: 760px;
    max-height: 90vh;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.theme-picker-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.theme-picker-header h2 {
    margin: 0; font-size: 1.15rem; font-weight: 500; color: var(--fg-strong);
}
.theme-picker-body {
    padding: 1.5rem;
    overflow-y: auto;
}
.theme-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.theme-card {
    background: #f6f8fc;
    border: 2px solid #e8eaed;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    display: flex; flex-direction: column;
    text-align: left;
    color: #202124;
}
.theme-card-label { color: #202124 !important; }
.theme-card-desc { color: #5f6368 !important; }
.theme-card:hover {
    border-color: var(--link);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.theme-card.is-active {
    border-color: var(--link);
    box-shadow: 0 0 0 2px var(--link);
}
.theme-preview {
    display: block;
    height: 90px;
    width: 100%;
    background: #f5f5f5;
}
.theme-preview--system   { background: linear-gradient(135deg, #fff 50%, #1f1f1f 50%); }
.theme-preview--light    { background: #ffffff; border-bottom: 1px solid #eee; }
.theme-preview--dark     { background: #1f1f1f; }
.theme-preview--ocean    { background: linear-gradient(135deg, #e1f5fe 0%, #4fc3f7 100%); }
.theme-preview--sunset   { background: linear-gradient(135deg, #ffe0b2 0%, #ff8a65 50%, #f06292 100%); }
.theme-preview--forest   { background: linear-gradient(135deg, #c8e6c9 0%, #66bb6a 100%); }
.theme-preview--lavender { background: linear-gradient(135deg, #ede7f6 0%, #9575cd 100%); }
.theme-preview--rose     { background: linear-gradient(135deg, #fce4ec 0%, #f06292 100%); }
.theme-preview--midnight { background: linear-gradient(135deg, #0f1729 0%, #1a2444 50%, #2c3a6c 100%); }
.theme-preview--graphite { background: linear-gradient(135deg, #1a1a1a 0%, #424242 100%); }
.theme-preview--lemon    { background: linear-gradient(135deg, #fffde7 0%, #fdd835 100%); }
.theme-preview--mint     { background: linear-gradient(135deg, #e0f2f1 0%, #26a69a 100%); }
.theme-card-label {
    padding: .65rem 1rem .25rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--fg);
}
.theme-card-desc {
    padding: 0 1rem .65rem 1rem;
    font-size: .75rem;
    color: var(--fg-muted);
}

@media (max-width: 600px) {
    .theme-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Theme picker: section grouping ──────────────────────────── */
.theme-section { margin-bottom: 1.5rem; }
.theme-section:last-child { margin-bottom: 0; }
.theme-section-title {
    margin: 0 0 .75rem 0;
    font-size: .75rem;
    font-weight: 500;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.theme-blur-section {
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 1.25rem;
}
.theme-blur-control {
    display: flex;
    align-items: center;
    gap: 12px;
}
.theme-blur-control input[type="range"] {
    flex: 1;
    accent-color: var(--primary);
    height: 4px;
    background: var(--bg-hover);
    border-radius: 4px;
}
.theme-blur-value {
    font-size: .8rem;
    color: var(--fg-muted);
    min-width: 50px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ─── Photo (image) themes ────────────────────────────────────── */
[data-theme^="photo-"] body {
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
[data-theme^="photo-"] .app-shell { background: transparent; }

/* Dark photo themes: tinted dark glass for chrome */
[data-theme="photo-galaxy"] .topbar,
[data-theme="photo-aurora"] .topbar,
[data-theme="photo-forest"] .topbar,
[data-theme="photo-stones"] .topbar,
[data-theme="photo-mountain"] .topbar,
[data-theme="photo-galaxy"] .sidebar,
[data-theme="photo-aurora"] .sidebar,
[data-theme="photo-forest"] .sidebar,
[data-theme="photo-stones"] .sidebar,
[data-theme="photo-mountain"] .sidebar {
    background: rgba(20,20,22,.55);
    backdrop-filter: blur(var(--photo-blur, 1.5px)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--photo-blur, 1.5px)) saturate(115%);
}
[data-theme="photo-galaxy"] .topbar-search input,
[data-theme="photo-aurora"] .topbar-search input,
[data-theme="photo-forest"] .topbar-search input,
[data-theme="photo-stones"] .topbar-search input,
[data-theme="photo-mountain"] .topbar-search input {
    background: rgba(255,255,255,.10);
    color: var(--fg);
}
[data-theme="photo-galaxy"] .sidebar-link.is-active,
[data-theme="photo-aurora"] .sidebar-link.is-active,
[data-theme="photo-forest"] .sidebar-link.is-active,
[data-theme="photo-stones"] .sidebar-link.is-active,
[data-theme="photo-mountain"] .sidebar-link.is-active {
    background: rgba(255,255,255,.12);
}

/* Light photo themes: tinted light glass for chrome */
[data-theme="photo-coast"] .topbar,
[data-theme="photo-frost"] .topbar,
[data-theme="photo-trees"] .topbar,
[data-theme="photo-turquoise"] .topbar,
[data-theme="photo-wave"] .topbar,
[data-theme="photo-abstract"] .topbar,
[data-theme="photo-pine"] .topbar,
[data-theme="photo-beach"] .topbar,
[data-theme="photo-coast"] .sidebar,
[data-theme="photo-frost"] .sidebar,
[data-theme="photo-trees"] .sidebar,
[data-theme="photo-turquoise"] .sidebar,
[data-theme="photo-wave"] .sidebar,
[data-theme="photo-abstract"] .sidebar,
[data-theme="photo-pine"] .sidebar,
[data-theme="photo-beach"] .sidebar {
    background: rgba(255,255,255,.50);
    backdrop-filter: blur(var(--photo-blur, 1.5px)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--photo-blur, 1.5px)) saturate(115%);
}
[data-theme="photo-coast"] .topbar-search input,
[data-theme="photo-frost"] .topbar-search input,
[data-theme="photo-trees"] .topbar-search input,
[data-theme="photo-turquoise"] .topbar-search input,
[data-theme="photo-wave"] .topbar-search input,
[data-theme="photo-abstract"] .topbar-search input,
[data-theme="photo-pine"] .topbar-search input,
[data-theme="photo-beach"] .topbar-search input {
    background: rgba(255,255,255,.78);
}
[data-theme="photo-coast"] .sidebar-link.is-active,
[data-theme="photo-frost"] .sidebar-link.is-active,
[data-theme="photo-trees"] .sidebar-link.is-active,
[data-theme="photo-turquoise"] .sidebar-link.is-active,
[data-theme="photo-wave"] .sidebar-link.is-active,
[data-theme="photo-abstract"] .sidebar-link.is-active,
[data-theme="photo-pine"] .sidebar-link.is-active,
[data-theme="photo-beach"] .sidebar-link.is-active {
    background: rgba(255,255,255,.85);
}

/* Mail panel matches Gmail: fully opaque so the message list is crisp and the photo
 * theme only shows AROUND the panel chrome (above topbar, behind sidebar, etc.). */
[data-theme^="photo-"] .main {
    background: var(--bg);
    box-shadow: var(--shadow-2);
}
[data-theme^="photo-"] .message-row.is-unread { background: transparent; }
[data-theme^="photo-"] .message-row.is-read   { background: transparent; }
[data-theme^="photo-"] .message-row:hover     { background: var(--bg-row-hover); }
[data-theme^="photo-"] .main-toolbar          {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
}
/* Stronger row dividers on photo themes so the list reads as discrete entries
 * rather than a wall of text. */
[data-theme^="photo-"] .message-row {
    border-bottom: 1px solid var(--border);
}
[data-theme^="photo-"] .message-list .message-row:last-child {
    border-bottom: none;
}

/* DARK photo themes (galaxy / aurora / forest / stones / mountain) need a dark
 * opaque panel surface — otherwise the white panel from --bg fights with the dark
 * photo and the rows become invisible. We re-map --bg + helpers for these themes. */
[data-theme="photo-galaxy"],
[data-theme="photo-aurora"],
[data-theme="photo-forest"],
[data-theme="photo-stones"],
[data-theme="photo-mountain"] {
    --bg:           #1f1f1f;
    --bg-alt:       #2a2a2c;
    --bg-soft:      #2a2a2c;
    --bg-hover:     #2f3133;
    --bg-row-hover: #2c2d2f;
    --bg-unread:    #1f1f1f;
    --bg-read:      #1a1a1a;
    --bg-selected:  #1c3a5a;
    --fg:           #e8eaed;
    --fg-muted:     #9aa0a6;
    --fg-soft:      #80868b;
    --fg-strong:    #f5f6f7;
    --border:       #3c4043;
    --border-soft:  #2c2d2f;
    --border-strong:#5f6368;
    --accent:       #1c3a5a;
    --accent-strong:#a8c7fa;
    --primary:      #8ab4f8;
    --primary-hover:#aecbfa;
    --primary-soft: #1c3a5a;
}

/* Per-photo background image (relative to assets/css/) */
[data-theme="photo-coast"]     body { background-image: url('../themes/full/1.jpg'); }
[data-theme="photo-frost"]     body { background-image: url('../themes/full/akirevarga-frost.jpg'); }
[data-theme="photo-trees"]     body { background-image: url('../themes/full/astoko-trees.jpg'); }
[data-theme="photo-stones"]    body { background-image: url('../themes/full/camera-man-stones.jpg'); }
[data-theme="photo-aurora"]    body { background-image: url('../themes/full/charlvera-polar-lights.jpg'); }
[data-theme="photo-forest"]    body { background-image: url('../themes/full/jplenio-forest.jpg'); }
[data-theme="photo-turquoise"] body { background-image: url('../themes/full/lenalensen-turquoise.jpg'); }
[data-theme="photo-wave"]      body { background-image: url('../themes/full/makabera-wave.jpg'); }
[data-theme="photo-galaxy"]    body { background-image: url('../themes/full/milky-way.jpg'); }
[data-theme="photo-abstract"]  body { background-image: url('../themes/full/publicdomainpictures.jpg'); }
[data-theme="photo-pine"]      body { background-image: url('../themes/full/simy27-needles.jpg'); }
[data-theme="photo-beach"]     body { background-image: url('../themes/full/sinousxl-beach.jpg'); }
[data-theme="photo-mountain"]  body { background-image: url('../themes/full/surprising_media-mountain.jpg'); }

/* For darker/saturated photos, use a dark glass effect for top bar + sidebar */
[data-theme="photo-galaxy"] .topbar,
[data-theme="photo-galaxy"] .sidebar,
[data-theme="photo-aurora"] .topbar,
[data-theme="photo-aurora"] .sidebar,
[data-theme="photo-forest"] .topbar,
[data-theme="photo-forest"] .sidebar,
[data-theme="photo-stones"] .topbar,
[data-theme="photo-stones"] .sidebar,
[data-theme="photo-mountain"] .topbar,
[data-theme="photo-mountain"] .sidebar {
    background: rgba(20,22,28,.55);
}
/* Dark photo themes also get a dark glass main pane */
[data-theme="photo-galaxy"] .main,
[data-theme="photo-aurora"] .main,
[data-theme="photo-forest"] .main,
[data-theme="photo-stones"] .main,
[data-theme="photo-mountain"] .main {
    background: rgba(20,22,28,.85);
    color: #e8eaed;
}
[data-theme="photo-galaxy"] .message-row,
[data-theme="photo-aurora"] .message-row,
[data-theme="photo-forest"] .message-row,
[data-theme="photo-stones"] .message-row,
[data-theme="photo-mountain"] .message-row { color: #e8eaed; border-bottom-color: rgba(255,255,255,.08); }
[data-theme="photo-galaxy"] .message-row.is-unread,
[data-theme="photo-aurora"] .message-row.is-unread,
[data-theme="photo-forest"] .message-row.is-unread,
[data-theme="photo-stones"] .message-row.is-unread,
[data-theme="photo-mountain"] .message-row.is-unread { background: rgba(255,255,255,.06); color: #fff; }
[data-theme="photo-galaxy"] .message-row.is-read,
[data-theme="photo-aurora"] .message-row.is-read,
[data-theme="photo-forest"] .message-row.is-read,
[data-theme="photo-stones"] .message-row.is-read,
[data-theme="photo-mountain"] .message-row.is-read { background: transparent; color: #c4c7cc; }
[data-theme="photo-galaxy"] .message-row:hover,
[data-theme="photo-aurora"] .message-row:hover,
[data-theme="photo-forest"] .message-row:hover,
[data-theme="photo-stones"] .message-row:hover,
[data-theme="photo-mountain"] .message-row:hover { background: rgba(255,255,255,.10); }
[data-theme="photo-galaxy"] .main-toolbar,
[data-theme="photo-aurora"] .main-toolbar,
[data-theme="photo-forest"] .main-toolbar,
[data-theme="photo-stones"] .main-toolbar,
[data-theme="photo-mountain"] .main-toolbar { background: rgba(20,22,28,.40); border-bottom: 1px solid rgba(255,255,255,.08); }
[data-theme="photo-galaxy"] .main-toolbar .btn-icon,
[data-theme="photo-aurora"] .main-toolbar .btn-icon,
[data-theme="photo-forest"] .main-toolbar .btn-icon,
[data-theme="photo-stones"] .main-toolbar .btn-icon,
[data-theme="photo-mountain"] .main-toolbar .btn-icon { color: #e8eaed; }
[data-theme="photo-galaxy"] .main-toolbar .btn-icon:hover,
[data-theme="photo-aurora"] .main-toolbar .btn-icon:hover,
[data-theme="photo-forest"] .main-toolbar .btn-icon:hover,
[data-theme="photo-stones"] .main-toolbar .btn-icon:hover,
[data-theme="photo-mountain"] .main-toolbar .btn-icon:hover { background: rgba(255,255,255,.12); }
[data-theme="photo-galaxy"] .topbar-search input,
[data-theme="photo-aurora"] .topbar-search input,
[data-theme="photo-forest"] .topbar-search input,
[data-theme="photo-stones"] .topbar-search input,
[data-theme="photo-mountain"] .topbar-search input {
    background: rgba(255,255,255,.18);
    color: #fff;
}
[data-theme="photo-galaxy"] .topbar-search input::placeholder,
[data-theme="photo-aurora"] .topbar-search input::placeholder,
[data-theme="photo-forest"] .topbar-search input::placeholder,
[data-theme="photo-stones"] .topbar-search input::placeholder,
[data-theme="photo-mountain"] .topbar-search input::placeholder {
    color: rgba(255,255,255,.75);
}
[data-theme="photo-galaxy"] .topbar-brand,
[data-theme="photo-aurora"] .topbar-brand,
[data-theme="photo-forest"] .topbar-brand,
[data-theme="photo-stones"] .topbar-brand,
[data-theme="photo-mountain"] .topbar-brand { color: #fff; }
[data-theme="photo-galaxy"] .topbar .btn-icon,
[data-theme="photo-aurora"] .topbar .btn-icon,
[data-theme="photo-forest"] .topbar .btn-icon,
[data-theme="photo-stones"] .topbar .btn-icon,
[data-theme="photo-mountain"] .topbar .btn-icon { color: #e8eaed; }
[data-theme="photo-galaxy"] .topbar .btn-icon:hover,
[data-theme="photo-aurora"] .topbar .btn-icon:hover,
[data-theme="photo-forest"] .topbar .btn-icon:hover,
[data-theme="photo-stones"] .topbar .btn-icon:hover,
[data-theme="photo-mountain"] .topbar .btn-icon:hover { background: rgba(255,255,255,.16); color: #fff; }
[data-theme="photo-galaxy"] .sidebar-link,
[data-theme="photo-aurora"] .sidebar-link,
[data-theme="photo-forest"] .sidebar-link,
[data-theme="photo-stones"] .sidebar-link,
[data-theme="photo-mountain"] .sidebar-link { color: #e8eaed; }
[data-theme="photo-galaxy"] .sidebar-link:hover,
[data-theme="photo-aurora"] .sidebar-link:hover,
[data-theme="photo-forest"] .sidebar-link:hover,
[data-theme="photo-stones"] .sidebar-link:hover,
[data-theme="photo-mountain"] .sidebar-link:hover { background: rgba(255,255,255,.12); }
[data-theme="photo-galaxy"] .sidebar-link.is-active,
[data-theme="photo-aurora"] .sidebar-link.is-active,
[data-theme="photo-forest"] .sidebar-link.is-active,
[data-theme="photo-stones"] .sidebar-link.is-active,
[data-theme="photo-mountain"] .sidebar-link.is-active {
    background: rgba(255,255,255,.20);
    color: #fff;
}
[data-theme="photo-galaxy"] .sidebar-section-title,
[data-theme="photo-aurora"] .sidebar-section-title,
[data-theme="photo-forest"] .sidebar-section-title,
[data-theme="photo-stones"] .sidebar-section-title,
[data-theme="photo-mountain"] .sidebar-section-title { color: rgba(255,255,255,.75); }

/* ─── Apps menu (Google-style grid dropdown) ──────────────────── */
.apps-menu-wrap { position: relative; }
.apps-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    padding: 16px 8px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: var(--shadow-4);
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .12s ease, transform .12s ease;
}
.apps-menu[hidden] { display: none !important; }
.apps-menu.is-open { opacity: 1; transform: translateY(0); }
.apps-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--fg);
    transition: background var(--transition-fast);
}
.apps-menu-item:hover {
    background: var(--bg-hover);
    text-decoration: none;
}
.apps-menu-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.apps-menu-icon svg { width: 22px; height: 22px; fill: #fff; }
.apps-menu-label {
    font-size: .75rem;
    color: var(--fg);
    text-align: center;
}

/* ─── Page-app generic header (calendar / todos / contacts) ───── */
.page-app {
    padding: 24px 32px;
    max-width: 1400px;
    margin: 0 auto;
}
.page-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}
.page-app-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.page-app-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
    color: var(--fg);
}

/* ─── Calendar ─────────────────────────────────────────────── */
.cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cal-nav .btn-icon { padding: 6px 10px; border-radius: 18px; min-width: auto; }
#cal-today-btn {
    border: 1px solid var(--border-soft);
    padding: 6px 16px;
    font-size: .85rem;
    background: transparent;
    color: var(--fg);
}
.cal-month-name {
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0 0 0 8px;
    color: var(--fg);
}
.cal-grid {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
}
.cal-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg);
}
.cal-weekday {
    padding: 12px 10px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
}
.cal-day-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(110px, 1fr);
}
.cal-day {
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 6px 6px 4px;
    cursor: pointer;
    transition: background var(--transition-fast);
    overflow: hidden;
    min-height: 110px;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:nth-last-child(-n+7) { border-bottom: none; }
.cal-day:hover { background: var(--bg-hover); }
.cal-day.is-other-month { background: var(--bg-soft); color: var(--fg-soft); }
.cal-day.is-other-month .cal-day-num { color: var(--fg-soft); }
.cal-day-num {
    font-size: .85rem;
    font-weight: 500;
    color: var(--fg-muted);
    margin-bottom: 4px;
    width: 26px; height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
}
.cal-day.is-today .cal-day-num {
    background: var(--brand-green, #1a73e8);
    color: #fff;
}
.cal-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cal-event {
    font-size: .72rem;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.4;
    font-weight: 500;
}
.cal-event:hover { filter: brightness(.92); }
.cal-event-time { opacity: .85; margin-left: 4px; font-weight: 400; }
.cal-event-more {
    font-size: .7rem;
    color: var(--fg-muted);
    padding: 2px 6px;
    cursor: pointer;
}

/* Calendar event modal */
.cal-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity .15s ease;
}
.cal-modal-overlay[hidden] { display: none !important; }
.cal-modal-overlay.is-open { opacity: 1; }
.cal-modal {
    background: var(--bg);
    border-radius: 12px;
    box-shadow: var(--shadow-4);
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: auto;
}
.cal-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}
.cal-modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 500; }
.cal-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.cal-field { display: flex; flex-direction: column; gap: 4px; }
.cal-field-label { font-size: .75rem; color: var(--fg-muted); }
.cal-field input[type="text"],
.cal-field input[type="datetime-local"],
.cal-field textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font: inherit;
    background: var(--bg);
    color: var(--fg);
}
.cal-field textarea { resize: vertical; min-height: 60px; }
.cal-field-row { display: flex; gap: 12px; }
.cal-field-row .cal-field { flex: 1; min-width: 0; }
.cal-field-check { flex-direction: row; align-items: center; gap: 8px; }
.cal-color-options { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-color-swatch input { display: none; }
.cal-color-swatch span {
    display: inline-block;
    width: 24px; height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .12s ease;
}
.cal-color-swatch input:checked + span {
    border-color: var(--fg);
    transform: scale(1.1);
}
.cal-modal-footer {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-soft);
}
.cal-modal-footer-spacer { flex: 1; }
.cal-modal-footer [hidden] { display: none !important; }

/* ─── Todos ─────────────────────────────────────────────────── */
.todos-stats { color: var(--fg-muted); font-size: .85rem; }
.todos-stat-divider { margin: 0 6px; }
.todo-quick-add {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    margin-bottom: 16px;
}
.todo-quick-icon {
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
}
.todo-quick-icon svg { width: 20px; height: 20px; fill: currentColor; }
.todo-quick-add input[type="text"] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    color: var(--fg);
}
.todo-quick-add input[type="datetime-local"] {
    border: 1px solid var(--border-soft);
    background: var(--bg);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--fg);
    font-size: .85rem;
}
.todo-list { display: flex; flex-direction: column; }
.todo-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-top: none;
    transition: background var(--transition-fast);
}
.todo-row:first-child { border-top: 1px solid var(--border-soft); border-radius: 8px 8px 0 0; }
.todo-row:last-child { border-radius: 0 0 8px 8px; }
.todo-row:only-child { border-radius: 8px; }
.todo-row:hover { background: var(--bg-hover); }
.todo-row.is-done .todo-title { text-decoration: line-through; color: var(--fg-muted); }
.todo-check { flex-shrink: 0; cursor: pointer; padding-top: 2px; }
.todo-check input { display: none; }
.todo-check-box {
    display: inline-block;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--fg-muted);
    position: relative;
    transition: all var(--transition-fast);
}
.todo-check input:checked + .todo-check-box {
    background: var(--brand-green, #1a73e8);
    border-color: var(--brand-green, #1a73e8);
}
.todo-check input:checked + .todo-check-box::after {
    content: '';
    position: absolute;
    left: 4px; top: 1px;
    width: 4px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.todo-body { flex: 1; min-width: 0; }
.todo-title { font-size: .9rem; color: var(--fg); word-break: break-word; }
.todo-notes { font-size: .8rem; color: var(--fg-muted); margin-top: 4px; }
.todo-due {
    font-size: .72rem;
    color: var(--fg-muted);
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.todo-due svg { width: 12px; height: 12px; fill: currentColor; }
.todo-delete { opacity: 0; transition: opacity var(--transition-fast); }
.todo-row:hover .todo-delete { opacity: 1; }
.todo-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--fg-muted);
    background: var(--bg);
    border: 1px dashed var(--border-soft);
    border-radius: 8px;
}
.todo-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin: 24px 0 8px;
}
.todo-section-header h2 {
    font-size: .85rem;
    font-weight: 500;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0;
}
.todo-list-done { opacity: .9; }
.btn-link {
    background: transparent;
    border: none;
    color: var(--brand-green, #1a73e8);
    cursor: pointer;
    font-size: .85rem;
    padding: 4px 8px;
}
.btn-link:hover { text-decoration: underline; }

/* Photo theme adjustments — light photo themes get a translucent white card,
 * dark photo themes inherit the opaque dark surface from --bg. */
[data-theme^="photo-"] .cal-grid,
[data-theme^="photo-"] .todo-row,
[data-theme^="photo-"] .todo-quick-add,
[data-theme^="photo-"] .apps-menu {
    background: var(--bg);
}
/* Light photo themes keep the glassy translucency over the photo */
[data-theme="photo-coast"] .cal-grid,
[data-theme="photo-coast"] .todo-row,
[data-theme="photo-coast"] .todo-quick-add,
[data-theme="photo-coast"] .apps-menu,
[data-theme="photo-frost"] .cal-grid,
[data-theme="photo-frost"] .todo-row,
[data-theme="photo-frost"] .todo-quick-add,
[data-theme="photo-frost"] .apps-menu,
[data-theme="photo-trees"] .cal-grid,
[data-theme="photo-trees"] .todo-row,
[data-theme="photo-trees"] .todo-quick-add,
[data-theme="photo-trees"] .apps-menu,
[data-theme="photo-turquoise"] .cal-grid,
[data-theme="photo-turquoise"] .todo-row,
[data-theme="photo-turquoise"] .todo-quick-add,
[data-theme="photo-turquoise"] .apps-menu,
[data-theme="photo-wave"] .cal-grid,
[data-theme="photo-wave"] .todo-row,
[data-theme="photo-wave"] .todo-quick-add,
[data-theme="photo-wave"] .apps-menu,
[data-theme="photo-abstract"] .cal-grid,
[data-theme="photo-abstract"] .todo-row,
[data-theme="photo-abstract"] .todo-quick-add,
[data-theme="photo-abstract"] .apps-menu,
[data-theme="photo-pine"] .cal-grid,
[data-theme="photo-pine"] .todo-row,
[data-theme="photo-pine"] .todo-quick-add,
[data-theme="photo-pine"] .apps-menu,
[data-theme="photo-beach"] .cal-grid,
[data-theme="photo-beach"] .todo-row,
[data-theme="photo-beach"] .todo-quick-add,
[data-theme="photo-beach"] .apps-menu {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
}
[data-theme^="photo-"] .cal-day.is-other-month { background: rgba(0,0,0,.04); }

/* ─── Apps menu: active item ──────────────────────────────────── */
.apps-menu-item.is-active {
    background: var(--bg-soft);
    box-shadow: inset 0 0 0 1px var(--border);
}
.apps-menu-item.is-active .apps-menu-label { font-weight: 600; }

/* ─── Theme picker: blur control polish ──────────────────────── */
.theme-blur-hint {
    font-size: .65rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--fg-soft);
    text-transform: none;
    margin-left: 8px;
}
.theme-blur-control { gap: 14px; }
.theme-blur-control .btn-link { padding: 4px 10px; font-size: .75rem; }

/* ─── Todos: overdue indicator + edit affordance ─────────────── */
.todo-row.is-overdue .todo-due { color: var(--danger); }
.todo-due-overdue {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--danger);
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
}
.todo-body[data-action="todo-edit"] { cursor: pointer; }
.todo-body[data-action="todo-edit"]:hover .todo-title { color: var(--primary); }

/* ─── Contacts page: card list ──────────────────────────────── */
.contacts-stats { color: var(--fg-muted); font-size: .85rem; }
.contacts-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
}
.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
    transition: background var(--transition-fast);
}
.contact-row:last-child { border-bottom: none; }
.contact-row:hover { background: var(--bg-row-hover); }
.contact-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-hover);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}
.contact-body { flex: 1; min-width: 0; }
.contact-name {
    font-size: .95rem;
    font-weight: 500;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.contact-meta {
    font-size: .82rem;
    color: var(--fg-muted);
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.contact-divider { color: var(--fg-soft); }
.contact-notes {
    font-size: .8rem;
    color: var(--fg-muted);
    margin-top: 6px;
    white-space: pre-wrap;
}
.contact-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.contact-row:hover .contact-actions { opacity: 1; }
@media (max-width: 768px) {
    .contact-actions { opacity: 1; }
    .contact-row { gap: 10px; padding: 12px; }
    .contact-avatar { width: 36px; height: 36px; }
}
[data-theme^="photo-"] .contacts-list { background: var(--bg); }
[data-theme="photo-coast"] .contacts-list,
[data-theme="photo-frost"] .contacts-list,
[data-theme="photo-trees"] .contacts-list,
[data-theme="photo-turquoise"] .contacts-list,
[data-theme="photo-wave"] .contacts-list,
[data-theme="photo-abstract"] .contacts-list,
[data-theme="photo-pine"] .contacts-list,
[data-theme="photo-beach"] .contacts-list {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
}

/* Labels page — color swatch in front of each row */
.label-color-swatch {
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    border: 2px solid var(--bg);
    box-shadow: 0 0 0 1px var(--border);
}
.label-row .contact-meta code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .72rem;
    background: var(--bg-soft);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--fg-muted);
}

/* ─── Advanced search panel (Gmail-style) ───────────────────── */
.topbar-search { position: relative; }
.search-advanced {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: var(--shadow-4);
    padding: 16px 20px 14px;
    z-index: 1100;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease;
}
.search-advanced[hidden] { display: none !important; }
.search-advanced.is-open { opacity: 1; transform: translateY(0); }
/* Override the .topbar-search form { display: flex } rule for the advanced form */
.search-advanced form { display: block; align-items: initial; }
.search-advanced form input,
.search-advanced form select { height: auto; background: transparent; box-shadow: none; }
.search-advanced .search-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft);
}
.search-advanced .search-row:last-of-type { border-bottom: none; }
.search-advanced .search-row.search-row-2col { grid-template-columns: 130px 1fr 1fr; }
.search-advanced .search-row.search-row-3col { grid-template-columns: 130px 1fr 1fr 1fr; }
.search-advanced .search-row label {
    font-size: .85rem;
    color: var(--fg-muted);
    margin: 0;
    font-weight: 400;
}
.search-advanced input[type="text"],
.search-advanced input[type="number"],
.search-advanced input[type="date"],
.search-advanced select {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--border-strong);
    border-radius: 0;
    padding: 6px 0;
    background: transparent;
    font-size: .9rem;
    color: var(--fg);
}
.search-advanced input:focus,
.search-advanced select:focus {
    outline: none;
    border-bottom-color: var(--primary);
}
.search-checks {
    display: flex; gap: 24px;
    margin: 12px 0 4px;
    padding-left: 142px;
}
.search-check {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .85rem; color: var(--fg);
    cursor: pointer;
}
.search-check input { width: 16px; height: 16px; cursor: pointer; }
.search-actions {
    display: flex;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    gap: 8px;
}
.search-actions-spacer { flex: 1; }
.search-actions .btn-primary { display: inline-flex; align-items: center; gap: 6px; }
.search-actions .btn-primary svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 768px) {
    .search-advanced .search-row,
    .search-advanced .search-row.search-row-2col,
    .search-advanced .search-row.search-row-3col {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .search-checks { padding-left: 0; }
}

/* ─── Attachment chip: click affordance ─────────────────────── */
.message-row .attachment-chip { cursor: pointer; }
.message-row .attachment-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* Plain-text compose mode: hide the formatting toolbar and Aa toggle, monospace editor */
.compose-window.compose-plain .compose-format-toolbar { display: none !important; }
.compose-window.compose-plain #toggle-format-toolbar { display: none !important; }
.compose-window.compose-plain #compose-editor {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .9rem;
}

/* Print: hide chrome, show only the message body */
@media print {
    .topbar, .sidebar, .sidebar-overlay, .main-toolbar,
    .compose-window, .toast-wrap, .fab-compose,
    .selection-bar, .row-actions, .apps-menu-wrap, .theme-picker-backdrop {
        display: none !important;
    }
    .app-shell { display: block !important; }
    .main, [data-theme^="photo-"] .main {
        background: #fff !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
    body { background: #fff !important; }
    .message-view { padding: 0 !important; }
    a { color: #000 !important; text-decoration: underline; }
    .label-chip { display: none !important; }
}

/* ─── Mobile tuning for new pages and apps menu ───────────────── */
@media (max-width: 768px) {
    .page-app { padding: 12px 12px 24px; }
    .page-app-header { gap: 8px; }
    .page-app-title { font-size: 1.15rem; }

    /* Apps menu: full-width sheet from top-right */
    .apps-menu {
        position: fixed;
        top: calc(var(--header-height) + 4px);
        right: 8px;
        left: 8px;
        width: auto;
        grid-template-columns: repeat(3, 1fr);
        max-height: calc(100vh - var(--header-height) - 16px);
        overflow-y: auto;
    }
    .apps-menu-icon { width: 40px; height: 40px; }
    .apps-menu-icon svg { width: 20px; height: 20px; }
    .apps-menu-label { font-size: .72rem; }

    /* Calendar grid: compress on mobile */
    .calendar-page .cal-nav { flex-wrap: wrap; gap: 4px; }
    .calendar-page .cal-month-name { font-size: 1rem; margin-left: 0; }
    #cal-today-btn { padding: 4px 10px; font-size: .8rem; }
    .cal-weekday { padding: 8px 4px; font-size: .65rem; letter-spacing: .25px; }
    .cal-day-grid { grid-auto-rows: minmax(70px, 1fr); }
    .cal-day { padding: 4px 3px; min-height: 70px; }
    .cal-day-num {
        width: 22px; height: 22px;
        line-height: 22px;
        font-size: .75rem;
        margin-bottom: 2px;
    }
    .cal-event { font-size: .65rem; padding: 1px 4px; }
    .cal-event-time { display: none; }
    .cal-event-more { font-size: .6rem; padding: 1px 4px; }

    /* Calendar modal: full width sheet */
    .cal-modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    .cal-modal-overlay { align-items: stretch; justify-content: stretch; }
    .cal-field-row { flex-direction: column; gap: 8px; }

    /* Todos: stack quick-add controls */
    .todo-quick-add { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    .todo-quick-add input[type="text"] { flex: 1 1 100%; min-width: 0; }
    .todo-quick-add input[type="datetime-local"] { flex: 1 1 auto; min-width: 0; }
    .todo-quick-icon { display: none; }
    .todo-row { padding: 12px 12px; }
    .todo-delete { opacity: 1; }

    /* Page form pages (settings, contacts, labels) */
    .page { padding: 1rem .9rem 2rem; }
    .page h1 { font-size: 1.25rem; margin-bottom: 1rem; }
    table { font-size: .85rem; }
}

/* ───── Preview pane (split-view inbox) ───── */
/* Default off: collapse the wrapper out of the layout entirely so the inbox
   inherits the original .main-pane behaviour (flex:1; overflow-y:auto) untouched. */
.message-list-wrap { display: contents; }
.preview-pane { display: none; }

/* Right-split mode: turn the .main-pane wrapper into a horizontal flex container.
   Promote .message-list-wrap back to a real flex item that scrolls independently. */
body[data-preview="right"] .main-pane--with-preview {
    display: flex;
    flex-direction: row;
    overflow: hidden;     /* outer no longer scrolls — children handle it */
    padding: 0;
}
body[data-preview="right"] .main-pane--with-preview .message-list-wrap {
    display: block;
    flex: 0 0 42%;
    min-width: 320px;
    overflow-y: auto;
    border-right: 1px solid var(--border);
}
body[data-preview="right"] .main-pane--with-preview .preview-pane {
    display: block;
    flex: 1;
    overflow-y: auto;
    background: var(--bg);
}

/* Bottom-split mode */
body[data-preview="bottom"] .main-pane--with-preview {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
body[data-preview="bottom"] .main-pane--with-preview .message-list-wrap {
    display: block;
    flex: 0 0 45%;
    min-height: 200px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
}
body[data-preview="bottom"] .main-pane--with-preview .preview-pane {
    display: block;
    flex: 1;
    overflow-y: auto;
    background: var(--bg);
}

.preview-pane-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-muted);
}
.preview-pane-empty-inner { text-align: center; }
.preview-pane-empty-inner svg {
    width: 48px; height: 48px;
    fill: var(--fg-muted);
    opacity: .35;
    margin-bottom: 12px;
}
.preview-pane-empty-inner p { margin: 0; font-size: .9rem; }

/* When a message is loaded, the inner toolbar + .main-pane become flush */
.preview-pane > .main-toolbar {
    border-bottom: 1px solid var(--border);
}
.preview-pane .main-pane { padding: 0; }
.preview-pane .message-view { padding: 1rem; }

/* On mobile, preview pane never splits — collapse back to the default
   (display: contents wrapper + hidden preview pane) so navigation behaves
   exactly like the off mode. */
@media (max-width: 768px) {
    body[data-preview="right"] .main-pane--with-preview,
    body[data-preview="bottom"] .main-pane--with-preview {
        display: block;
        overflow: visible;
        padding: revert;
    }
    body[data-preview="right"] .main-pane--with-preview .message-list-wrap,
    body[data-preview="bottom"] .main-pane--with-preview .message-list-wrap {
        display: contents;
    }
    body[data-preview="right"] .main-pane--with-preview .preview-pane,
    body[data-preview="bottom"] .main-pane--with-preview .preview-pane {
        display: none;
    }
}

/* Highlight selected row when preview pane is loaded */
.message-row.is-active {
    background: var(--row-active-bg, rgba(26, 115, 232, .12));
}

/* ───── Attachment preview modal ───── */
.att-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0, 0, 0, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s ease;
    padding: 20px;
}
.att-preview-overlay.is-open { opacity: 1; }
.att-preview-modal {
    background: var(--bg);
    color: var(--fg);
    border-radius: 12px;
    width: min(1000px, 96vw);
    height: min(85vh, 800px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}
.att-preview-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-soft);
}
.att-preview-name {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.att-preview-action {
    color: var(--accent, #1a73e8);
    text-decoration: none;
    font-size: .85rem;
    border: 1px solid var(--border);
    padding: 4px 12px;
    border-radius: 14px;
}
.att-preview-action:hover { background: rgba(26, 115, 232, .08); }
.att-preview-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--fg);
    font-size: 1.4rem;
    padding: 0 6px;
    line-height: 1;
}
.att-preview-body {
    flex: 1;
    background: #1e1e1e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}
.att-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.att-preview-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.att-preview-fallback { color: #ccc; padding: 2rem; }

/* ───── Sender hover card ───── */
.sender-hover-card {
    position: fixed;
    z-index: 9000;
    width: 280px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    padding: 14px;
    color: var(--fg);
    font-size: .85rem;
    animation: hover-card-pop .12s ease-out;
}
@keyframes hover-card-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sender-hover-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.sender-hover-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    color: #fff; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sender-hover-text { min-width: 0; }
.sender-hover-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sender-hover-email {
    font-size: .76rem;
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sender-hover-actions {
    display: flex;
    gap: 6px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
.sender-hover-btn {
    flex: 1;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--accent, #1a73e8);
    border-radius: 16px;
    padding: 5px 10px;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 500;
}
.sender-hover-btn:hover { background: rgba(26, 115, 232, .08); }
.sender-hover-btn[disabled] { opacity: .6; cursor: default; }

/* ───── Sidebar quota ───── */
.sidebar-quota {
    padding: 10px 18px 6px;
    font-size: .72rem;
    color: var(--fg-muted);
}
.sidebar-quota .quota-bar {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    height: 6px;
    overflow: hidden;
    margin-bottom: 4px;
}
.sidebar-quota .quota-fill {
    background: linear-gradient(90deg, #34a853, #1a73e8);
    height: 100%;
    transition: width .3s ease;
}
.sidebar-quota.is-warning .quota-fill {
    background: linear-gradient(90deg, #f4b400, #ea4335);
}
.sidebar-quota.is-critical .quota-fill {
    background: #ea4335;
}

/* ───── Add-to-contacts button (sender area) ───── */
.add-contact-btn {
    margin-left: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--accent, #1a73e8);
    font-size: .78rem;
    padding: 2px 10px 2px 6px;
    border-radius: 14px;
    cursor: pointer;
    line-height: 1.4;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.add-contact-btn svg { width: 14px; height: 14px; fill: currentColor; }
.add-contact-btn:hover { background: rgba(26, 115, 232, .08); }
.add-contact-btn.is-saved {
    color: var(--fg-muted);
    cursor: default;
    border-color: transparent;
    background: var(--bg-soft);
}
.add-contact-btn[disabled] { cursor: default; }

/* ───── Unsubscribe button (List-Unsubscribe) ───── */
.unsubscribe-btn {
    margin-left: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--accent, #1a73e8);
    font-size: .78rem;
    padding: 2px 10px;
    border-radius: 14px;
    cursor: pointer;
    line-height: 1.4;
    font-weight: 500;
}
.unsubscribe-btn:hover { background: rgba(26, 115, 232, .08); }
.unsubscribe-btn[disabled] { opacity: .6; cursor: progress; }

/* ───── Snooze picker ───── */
.snooze-picker {
    position: absolute;
    z-index: 9000;
    width: 260px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    padding: 8px 0;
    font-size: .87rem;
    color: var(--fg);
    animation: snooze-pop .12s ease-out;
}
@keyframes snooze-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.snooze-picker-title {
    padding: 6px 16px 8px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--fg-muted);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.snooze-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--fg);
    padding: 10px 16px;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.snooze-option:hover, .snooze-option:focus-visible {
    background: var(--bg-soft);
    outline: none;
}
.snooze-option-time {
    color: var(--fg-muted);
    font-size: .78rem;
    margin-left: 1rem;
    white-space: nowrap;
}
.snooze-picker-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 8px;
}
.snooze-custom {
    padding: 8px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.snooze-custom-label {
    font-size: .78rem;
    color: var(--fg-muted);
}
.snooze-custom-input {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--fg);
    font: inherit;
}
.snooze-custom-btn {
    background: var(--accent, #1a73e8);
    color: #fff;
    border: 0;
    padding: 7px 12px;
    border-radius: 18px;
    font-weight: 500;
    cursor: pointer;
    align-self: flex-start;
}
.snooze-custom-btn:hover { filter: brightness(1.05); }

/* ───── Undo Send toast ───── */
.undo-send-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9100;
    background: #323232;
    color: #fff;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    font-size: .87rem;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 280px;
    animation: undo-toast-in .18s ease-out;
}
@keyframes undo-toast-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.undo-send-toast-msg { flex: 1; }
.undo-send-toast-btn {
    background: transparent;
    color: #8ab4f8;
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.undo-send-toast-btn:hover { color: #aecbfa; }

/* Even tighter at very small screens */
@media (max-width: 420px) {
    .apps-menu { grid-template-columns: repeat(3, 1fr); padding: 12px 4px; }
    .apps-menu-item { padding: 10px 4px; gap: 4px; }
    .apps-menu-icon { width: 36px; height: 36px; }
    .cal-weekday { font-size: .6rem; padding: 6px 2px; }
    .cal-day-grid { grid-auto-rows: minmax(56px, 1fr); }
    .cal-day { min-height: 56px; padding: 2px; }
    .cal-day-num { width: 20px; height: 20px; line-height: 20px; font-size: .7rem; }
    .cal-event { font-size: .58rem; padding: 1px 3px; }
}