/* mailx layout -- CSS Grid adaptive structure */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    display: grid;
    /* rail | folders | main */
    grid-template-columns: var(--rail-width, 48px) var(--folder-width) 1fr;
    grid-template-rows: var(--toolbar-height) auto auto 1fr var(--statusbar-height);
    grid-template-areas:
        "toolbar   toolbar   toolbar"
        "alert     alert     alert"
        "viewtabs  viewtabs  viewtabs"
        "rail      folders   main"
        "status    status    status";
    height: 100vh;
    overflow: hidden;
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-text);
    background: var(--color-bg);
}

/* Fullscreen preview — double-tap on the message body in the viewer toggles
   this. Hides every chrome region so the message body fills the viewport.
   Exit via second double-tap, Esc, or the floating ✕ button (added by JS). */
body.fullscreen-preview > .toolbar,
body.fullscreen-preview > .icon-rail,
body.fullscreen-preview > .folder-panel,
body.fullscreen-preview > .alert-banner,
body.fullscreen-preview > .view-tab-strip,
body.fullscreen-preview > .status-bar,
body.fullscreen-preview .message-list,
body.fullscreen-preview .ml-toolbar,
body.fullscreen-preview .splitter,
body.fullscreen-preview > .calendar-sidebar,
body.fullscreen-preview .ml-header { display: none !important; }
/* Collapse the list + splitter columns too — hiding the list alone leaves
   its fixed grid column as a dead blank band filling ~half the window
   (the "strange full screen mode" of 2026-07-29). */
body.fullscreen-preview .main-area {
    grid-column: 1 / -1;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
}
body.fullscreen-preview .message-viewer { display: flex; grid-column: 1 / -1 !important; }
body.fullscreen-preview {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    grid-template-areas: "main" !important;
}

/* When the calendar sidebar is on, re-flow the grid to reserve a fourth
   column on the right. When off, no column is reserved — the aside is
   display:none and the grid stays three-column. */
body.calendar-sidebar-on {
    grid-template-columns: var(--rail-width, 48px) var(--folder-width) 1fr var(--cal-side-width, 280px);
    grid-template-areas:
        "toolbar   toolbar   toolbar   toolbar"
        "alert     alert     alert     alert"
        "viewtabs  viewtabs  viewtabs  viewtabs"
        "rail      folders   main      cal-side"
        "status    status    status    status";
}

.toolbar { grid-area: toolbar; }
.icon-rail { grid-area: rail; }
.folder-panel { grid-area: folders; display: flex; flex-direction: column; overflow: hidden; }
.folder-tree { flex: 1; overflow-y: auto; }
.main-area { grid-area: main; }
.status-bar { grid-area: status; }
/* View-tabs bar — full-width row above all panes. When hidden the `auto`
   row collapses to 0, so nothing changes for single-tab use. */
.view-tab-strip { grid-area: viewtabs; }

/* Vertical icon rail — Thunderbird Supernova style: dark background with
   light icons so the rail reads as "chrome" and contrasts visibly against
   the content area (whether the app's in light or dark theme). Always
   visible on wide+medium tiers; hidden on narrow (icons fold into
   hamburger — TBD). */
.icon-rail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: oklch(0.25 0.01 250);
    border-right: 1px solid oklch(0.18 0.01 250);
    padding: 6px 0;
    overflow: hidden;
}
.rail-top, .rail-bottom {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--rail-width, 48px);
    height: 38px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    color: oklch(0.88 0.01 250);
    border-left: 3px solid transparent;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.rail-btn:hover:not([disabled]) {
    background: oklch(0.32 0.02 250);
    color: oklch(0.96 0.01 250);
}
.rail-btn[data-active="true"] {
    background: oklch(0.35 0.03 250);
    color: oklch(0.98 0.01 250);
    border-left-color: var(--color-accent, #4a9cff);
}
.rail-btn[disabled] {
    color: oklch(0.55 0.01 250);
}
.rail-btn { position: relative; }
.rail-badge {
    position: absolute;
    top: 3px;
    right: 6px;
    min-width: 18px;
    padding: 1px 4px;
    border-radius: 9px;
    background: oklch(0.65 0.22 25);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.rail-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Main area: message list left, viewer right, vertical splitter */
.main-area {
    display: grid;
    grid-template-columns: var(--list-viewer-split) var(--splitter-size) 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
}

/* Preview pane hidden */
.main-area.no-preview {
    grid-template-columns: 1fr;
}
.main-area.no-preview .splitter,
.main-area.no-preview .message-viewer { display: none; }
.main-area.no-preview .message-list { border-right: none; }

/* Full-screen viewer mode (mobile/Android) — viewer takes the whole app
   surface; folder rail, folder tree, message list and statusbar are hidden.
   Toggle via `body.viewer-fullscreen` from the pop-out / full-screen button.
   On desktop the same button instead spawns a floating overlay (handled in
   message-viewer.ts) and never sets this class. */
body.viewer-fullscreen .icon-rail,
body.viewer-fullscreen .folder-panel,
body.viewer-fullscreen .message-list,
body.viewer-fullscreen .splitter,
body.viewer-fullscreen .toolbar,
body.viewer-fullscreen .status-bar { display: none !important; }
/* Collapse the body grid's fixed toolbar/statusbar rows too — display:none
   on their content doesn't release a fixed grid-template-rows height. */
body.viewer-fullscreen {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    grid-template-areas: "main" !important;
}
body.viewer-fullscreen .main-area {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
}
body.viewer-fullscreen .message-viewer {
    display: flex !important;
    grid-column: 1 / -1 !important;
}

/* Splitter */
.splitter {
    background: var(--color-border);
    cursor: col-resize;
    transition: background 0.15s;
}
.splitter:hover, .splitter:active {
    background: var(--color-accent);
}

/* Responsive: mid-width (tablets, foldables) — keep rail + list + viewer; folders overlay.
   Calendar sidebar is hidden in this tier by its own media query, and the
   body grid does NOT include a cal-side column here — the .calendar-sidebar-on
   body class override above is shadowed by this mid-width rule. */
@media (max-width: 1100px) and (min-width: 769px) {
    body,
    body.calendar-sidebar-on {
        grid-template-columns: var(--rail-width, 48px) 1fr;
        grid-template-rows: var(--toolbar-height) auto 1fr var(--statusbar-height);
        grid-template-areas:
            "toolbar  toolbar"
            "alert    alert"
            "rail     main"
            "status   status";
    }

    /* Folder panel: FULLY off-screen when closed — previously `calc(48px -
       280px) = -232px` left a 48 px tail showing behind the rail, which on
       Android (where the rail isn't always rendered) leaked a strip of
       folder-row badges at the left edge of the viewport. Now the closed
       panel is flush off-screen at `-280px` and the `.open` slide-in starts
       at the rail's right edge. */
    .folder-panel {
        position: fixed;
        left: -280px;
        top: var(--toolbar-height);
        bottom: var(--statusbar-height);
        width: 280px;
        z-index: 50;
        transition: left 0.2s ease;
        background: var(--color-bg);
        border-right: 1px solid var(--color-border);
        box-shadow: 2px 0 8px rgba(0,0,0,0.3);
    }
    .folder-panel.open { left: var(--rail-width, 48px); }

    /* Medium tier has the rail visible permanently — no hamburger needed.
       Show the folder-toggle (📁) so the user can still reveal the folder
       tree on demand. */
    #btn-menu { display: none !important; }
    #btn-folder-toggle { display: inline-flex !important; }
}

/* Responsive: narrow OR short viewport — single panel navigation */
@media (max-width: 768px), (max-height: 600px) {
    /* Preview snippets remain visible on narrow — user-controlled via the
       View menu's "Preview snippets" checkbox. Previously this rule forced
       them hidden on any narrow viewport, so Android users never saw the
       checkbox take effect. */
    /* View tabs are a desktop feature — on narrow viewports (and Android,
       which is always narrow) the strip would eat a row of scarce vertical
       space. Hidden here; the `viewtabs` grid row collapses to 0. */
    .view-tab-strip { display: none; }
    /* Column headers (From/Date/Subject) take space without being useful on narrow */
    .ml-header { display: none; }
    /* Current folder name shown above the list, Dovecot-style */
    .ml-folder-title { display: block; }
    /* Version string overflows the toolbar on narrow — move to the status bar */
    #app-version { display: none; }
    #status-version {
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        margin-left: auto;
    }
    /* Drop button captions on narrow — icons are self-explanatory and captions overflow */
    .toolbar .tb-label { display: none; }
    /* View and Settings menus don't need to shout on narrow */
    #view-menu, #settings-menu { display: none; }
}
@media (min-width: 769px) {
    /* Status-bar version is a narrow-only mirror — keep it hidden on wide */
    #status-version { display: none; }
}
@media (max-width: 768px), (max-height: 600px) {
    body,
    body.calendar-sidebar-on {
        grid-template-columns: 1fr;
        grid-template-rows: var(--toolbar-height) auto 1fr var(--statusbar-height);
        grid-template-areas:
            "toolbar"
            "alert"
            "main"
            "status";
    }

    /* Rail on narrow: slide-in drawer triggered by the hamburger (☰). The
       rail is the entry point to Inbox / All-Inboxes / Contacts / Calendar /
       Tasks / Settings — without this drawer, narrow-tier users couldn't
       reach any of those. */
    .icon-rail {
        display: flex;
        position: fixed;
        left: -64px;
        top: var(--toolbar-height);
        bottom: var(--statusbar-height);
        z-index: 60;
        transition: left 0.2s ease;
        box-shadow: 2px 0 8px rgba(0,0,0,0.3);
    }
    .icon-rail.open { left: 0; }

    /* Folder panel: slide-in drawer triggered by the folder icon (📁).
       Kept separate from the rail drawer so the user can have folders open
       while the rail is closed, or vice versa — matching the desktop flow. */
    .folder-panel {
        position: fixed;
        left: -280px;
        top: var(--toolbar-height);
        bottom: var(--statusbar-height);
        width: 280px;
        z-index: 50;
        transition: left 0.2s ease;
        background: var(--color-bg);
        border-right: 1px solid var(--color-border);
        box-shadow: 2px 0 8px rgba(0,0,0,0.3);
    }
    .folder-panel.open { left: 0; }

    /* Main area: single column */
    .main-area {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    .splitter { display: none; }

    /* Show one panel at a time */
    .message-viewer { display: none; }
    .message-viewer.narrow-active {
        display: flex;
        position: absolute;
        inset: 0;
        z-index: 10;
        background: var(--color-bg);
    }
    .message-list.narrow-hidden { display: none; }

    /* Hamburger opens the rail drawer; folder-toggle opens the folder drawer.
       Both always visible on narrow so the user can reach either. */
    #btn-menu { display: inline-flex !important; }
    #btn-folder-toggle { display: inline-flex !important; }
    /* Back button: only show when viewer is active (message list hidden) */
    #btn-back { display: none !important; }
    .message-viewer.narrow-active ~ * #btn-back,
    body:has(.message-viewer.narrow-active) #btn-back {
        display: inline-flex !important;
        font-size: 1.1em;
        font-weight: 600;
        padding: 0.5em 1em;
        background: var(--color-accent, #1a6dd4);
        color: white;
        border-radius: 6px;
    }

    /* Message list: full width, two-line rows */
    .message-list {
        grid-template-columns: 1.2em 1fr auto;
    }
    .message-list .ml-row {
        grid-template-columns: subgrid;
        grid-template-rows: auto auto;
    }
    .message-list .ml-flag { grid-row: 1 / 3; align-self: center; }
    .message-list .ml-from { grid-column: 2; }
    .message-list .ml-date { grid-column: 3; grid-row: 1; }
    .message-list .ml-subject {
        grid-column: 2 / 4;
        grid-row: 2;
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }
}

/* Hide hamburger, folder-toggle, and back on wide screens (folder panel
   permanent column, rail permanent column, no drawer toggles needed). */
@media (min-width: 1101px) {
    #btn-menu, #btn-folder-toggle, #btn-back { display: none !important; }
}
