:root {
    --color-bg: #f5f6fa;
    --color-surface: #ffffff;
    --color-border: #d9dce3;
    --color-text: #1f2430;
    /* #6b7280 read ~4.48:1 against --color-bg, just under WCAG AA's 4.5:1
       minimum for normal-size text; darkened to clear it on both --color-bg
       and --color-surface. */
    --color-text-muted: #5b6472;
    --color-accent: #3457d5;
    --color-accent-hover: #2a45ac;
    --color-danger: #c0392b;
    --color-unread-dot: #3457d5;
    --radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    height: 100vh;
    overflow: hidden;
}

button {
    font-family: inherit;
    cursor: pointer;
}

input, textarea, select {
    font-family: inherit;
    font-size: 14px;
}

/* ---- Login page ---- */

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 16px;
}

/* max-width sized around Turnstile's own fixed 300px widget (not resized
   to fit the card - the widget stays at its original size, the card is
   sized to comfortably hold it) plus 32px padding on each side, with a
   little breathing room to spare. */
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Matches login.html's Turnstile breakpoint (native "compact" widget
   below 480px) - the whole card sizes down to suit, not just the widget
   shrinking inside an otherwise full-size card. */
@media (max-width: 480px) {
    .login-card {
        max-width: 320px;
        padding: 24px 20px;
    }
}

#turnstile-container {
    margin-bottom: 12px;
}

.login-card h1 {
    margin: 0 0 4px;
    font-size: 22px;
}

.login-sub {
    margin: 0 0 20px;
    color: var(--color-text-muted);
    font-size: 13px;
}

#login-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 12px;
    background: var(--color-surface);
    color: var(--color-text);
}

#login-form button {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
}

#login-form button:hover { background: var(--color-accent-hover); }

.error-text {
    color: var(--color-danger);
    font-size: 13px;
    margin: 8px 0 0;
}

/* ---- App shell ---- */

.app-grid {
    display: grid;
    grid-template-columns: 220px 340px 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
        "header header header"
        "sidebar list reader";
    height: 100vh;
}

.app-header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.app-header h1 {
    font-size: 16px;
    margin: 0;
}

.app-header .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logged-in-as {
    font-size: 13px;
    color: var(--color-text-muted);
}

.btn {
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 13px;
}

.btn:hover { background: var(--color-bg); }

.btn-primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.btn-primary:hover { background: var(--color-accent-hover); }

.sidebar {
    grid-area: sidebar;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    padding: 12px 0;
}

.folder-item {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 14px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.folder-item.active {
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 600;
    border-left: 3px solid var(--color-accent);
    padding-left: 13px;
}

.message-list {
    grid-area: list;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
}

.message-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

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

.message-item.active { background: #eef1fb; }

.message-item .msg-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.message-item .msg-from {
    font-weight: 400;
    color: var(--color-text);
}

.message-item.unread .msg-from { font-weight: 700; }

.message-item .msg-subject {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-item.unread .msg-subject { font-weight: 700; }

.message-item .unread-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-unread-dot);
    margin-right: 6px;
    visibility: hidden;
}

.message-item.unread .unread-dot { visibility: visible; }

.empty-state {
    padding: 32px 16px;
    color: var(--color-text-muted);
    font-size: 13px;
    text-align: center;
}

.reader {
    grid-area: reader;
    background: var(--color-bg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.reader-header {
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.reader-header h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.back-to-list-btn {
    display: none;
    margin: 0 0 10px;
    padding: 4px 0;
    border: none;
    background: none;
    color: var(--color-accent);
    font-size: 14px;
    cursor: pointer;
}

.reader-meta {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.reader-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.reader-body {
    flex: 1;
    padding: 16px 24px;
}

.reader-frame {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
}

.attachments {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attachment-chip {
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
    color: var(--color-text-muted);
}

/* ---- Compose overlay ---- */

.compose-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 30, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

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

.compose-panel {
    width: 560px;
    max-width: 92vw;
    max-height: 88vh;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.compose-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}

.compose-header h3 { margin: 0; font-size: 15px; }

.compose-close {
    border: none;
    background: none;
    font-size: 18px;
    color: var(--color-text-muted);
}

.compose-fields {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.compose-fields input,
.compose-fields textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.compose-fields textarea {
    resize: vertical;
    min-height: 200px;
}

.compose-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.status-text {
    font-size: 12px;
    color: var(--color-text-muted);
    align-self: center;
    margin-right: auto;
}

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

@media (max-width: 900px) {
    /* Single content row, not stacked list+reader rows - an "auto" row sized
       by message-list's natural content height (which can exceed the
       viewport for a realistic-length list) previously starved the "1fr"
       reader row down to 0px the moment there were enough messages to fill
       the screen. list and reader now share one row and only one is shown
       at a time (app.js toggles .reader-open), each scrolling internally
       exactly like the desktop panes already do. */
    .app-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 56px 1fr;
        grid-template-areas:
            "header"
            "content";
    }
    .sidebar { display: none; }

    .message-list, .reader {
        grid-area: content;
    }
    .message-list { display: block; }
    .reader { display: none; }
    .app-grid.reader-open .message-list { display: none; }
    .app-grid.reader-open .reader { display: flex; }

    .back-to-list-btn { display: inline-block; }

    /* Compose lives in the header (always reachable) on every viewport
       size - no mobile-specific override needed here beyond the sidebar
       (its old home) being hidden above. */
}