/* Material Design 3 token palette (light theme). These are the same
   --md-sys-color-* / --md-sys-shape-* custom properties Material Web
   components themselves read, applied here to :root so both the MWC
   components AND the hand-built layout (app shell, panes, list rows -
   MWC has no app-bar/card/page-layout components, only discrete
   interactive ones) share one consistent token system rather than two
   competing color systems. Values are a standard M3 baseline blue scheme,
   not a custom brand palette - swap here if that's ever wanted, nothing
   below this block references a literal color. */
:root {
    --md-sys-color-primary: #3457d5;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #dee1ff;
    --md-sys-color-on-primary-container: #00105c;

    --md-sys-color-surface: #fdfbff;
    --md-sys-color-on-surface: #1b1b1f;
    --md-sys-color-surface-variant: #e3e1ec;
    --md-sys-color-on-surface-variant: #46464f;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f7f5fa;
    --md-sys-color-surface-container: #f2f0f5;
    --md-sys-color-surface-container-high: #ecebf0;

    --md-sys-color-outline: #777680;
    --md-sys-color-outline-variant: #c7c5d0;

    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;

    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;

    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", 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(--md-sys-color-surface-container-lowest);
    color: var(--md-sys-color-on-surface);
    height: 100vh;
    overflow: hidden;
}

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

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 16px;
    background: var(--md-sys-color-surface-container-low);
}

/* 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 padding, with a little breathing
   room to spare. Elevation level 1 (M3's own shadow recipe) rather than
   an arbitrary shadow value, since there's no <md-card> component to
   reach for instead. */
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--md-sys-color-surface-container-lowest);
    border-radius: var(--md-sys-shape-corner-large);
    padding: 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

/* 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;
    font-weight: 500;
}

.login-sub {
    margin: 0 0 20px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 13px;
}

#login-form md-outlined-text-field {
    width: 100%;
    margin-bottom: 14px;
}

#login-form md-filled-button {
    width: 100%;
}

.error-text {
    color: var(--md-sys-color-error);
    font-size: 13px;
    margin: 10px 0 0;
}

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

.app-grid {
    display: grid;
    grid-template-columns: 240px 340px 1fr;
    grid-template-rows: 64px 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 20px;
    background: var(--md-sys-color-surface-container-lowest);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.app-header h1 {
    font-size: 17px;
    font-weight: 500;
    margin: 0;
}

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

.logged-in-as {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#refresh-btn.spinning md-icon {
    display: inline-block;
    animation: spin 0.8s linear infinite;
}

.sidebar {
    grid-area: sidebar;
    background: var(--md-sys-color-surface-container-lowest);
    border-right: 1px solid var(--md-sys-color-outline-variant);
    overflow-y: auto;
    padding: 8px;
}

.sidebar md-list {
    background: transparent;
    --md-list-container-color: transparent;
}

md-list-item.folder-item {
    border-radius: var(--md-sys-shape-corner-large);
    --md-list-item-label-text-color: var(--md-sys-color-on-surface-variant);
}

md-list-item.folder-item.active {
    background: var(--md-sys-color-primary-container);
    --md-list-item-label-text-color: var(--md-sys-color-on-primary-container);
    --md-list-item-label-text-weight: 600;
}

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

.message-list md-list {
    background: transparent;
    padding: 0;
}

md-list-item.message-item {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

md-list-item.message-item.active {
    background: var(--md-sys-color-secondary-container, var(--md-sys-color-primary-container));
}

md-list-item.message-item.unread {
    --md-list-item-label-text-weight: 700;
    --md-list-item-supporting-text-weight: 700;
}

/* Sender/subject text can be arbitrarily long (a real address, a real
   subject line) - truncate to one line each with ellipsis rather than
   wrapping, which would otherwise push the trailing date down onto its
   own line and make rows an unpredictable height. */
md-list-item.message-item [slot="headline"],
md-list-item.message-item [slot="supporting-text"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-date {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    white-space: nowrap;
}

.unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
}

.empty-state {
    padding: 32px 16px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 13px;
    text-align: center;
}

.reader {
    grid-area: reader;
    background: var(--md-sys-color-surface-container-low);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.reader-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    background: var(--md-sys-color-surface-container-lowest);
}

.reader-header h2 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 500;
}

.back-to-list-btn {
    display: none;
    margin-bottom: 4px;
}

.reader-meta {
    font-size: 13px;
    color: var(--md-sys-color-on-surface-variant);
    line-height: 1.7;
}

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

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

.reader-frame {
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: var(--md-sys-shape-corner-medium);
    background: #fff;
}

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

.attachment-chip {
    font: inherit;
    font-size: 12px;
    padding: 6px 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 20px;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Reader attachment chips double as the download control - a real <button>
   (see app.js), styled to still read as a chip rather than a form control. */
button.attachment-chip {
    cursor: pointer;
}

button.attachment-chip:hover {
    background: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-outline);
}

.attachment-chip .remove-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.attachment-chip .remove-chip:hover {
    background: var(--md-sys-color-surface-container-high);
}

/* ---- Compose dialog ---- */

/* md-dialog has no width/min-width/max-width design tokens (confirmed
   against the docs - --md-dialog-container-max-width doesn't exist,
   an earlier attempt at this that silently did nothing since it's not a
   real custom property MWC reads) and the host element itself renders
   with display:contents, so it has no box of its own to size via CSS
   either. MD3 dialogs size to fit their slotted content instead - the
   real fix is giving the content slot's own element (ours, not MWC's)
   an explicit width, which the dialog then wraps around. */
.compose-fields {
    width: 480px;
    max-width: calc(90vw - 48px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.compose-fields md-outlined-text-field,
.compose-fields md-filled-text-field {
    width: 100%;
}

.compose-attach-row {
    margin-top: -8px;
}

/* Capped rather than left to grow with however many files are attached -
   md-dialog's own internal max-height (see the block below) leaves this
   whole dialog a fixed content budget, so an unbounded chip list would
   eventually force the dialog itself to scroll instead of just this list.
   min-height:0 overrides the flex-item default of min-height:auto (which
   sizes a flex child to its content regardless of max-height) - without it
   this max-height/overflow pair is silently ignored in a column flex
   container like .compose-fields. */
.compose-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 56px;
    min-height: 0;
    overflow-y: auto;
}

.compose-attachment-list:empty {
    display: none;
}

.status-text {
    font-size: 12px;
    color: var(--md-sys-color-on-surface-variant);
    align-self: center;
    margin-right: auto;
}

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

@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: 64px 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-flex; }

    /* 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. */

    /* The logged-in email address is the least essential header item and
       the one most likely to be long enough to force everything else
       (refresh, Compose, Log out) to wrap or get squeezed - dropped here
       rather than letting it compete for space on a narrow screen. */
    .logged-in-as { display: none; }
}