/* File: /var/www/webmail.ohiomade.us/public/assets/webmail.mobile.css */
/* Last edited: 2026-04-04 11:10 UTC */

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

    --bg:#050814;
    --bg-soft:#0a1023;
    --card:#0f1630;
    --card-2:#121a38;
    --text:#eef2ff;
    --muted:#aab4da;
    --muted-2:#7f8ab7;
    --accent:#4f73ff;
    --accent-2:#3656db;
    --accent-soft:rgba(79,115,255,.14);
    --border:rgba(255,255,255,.08);
    --border-strong:rgba(255,255,255,.14);
    --shadow:0 18px 40px rgba(0,0,0,.24);

    --ok:#22c55e;
    --ok-soft:rgba(34,197,94,.12);
    --ok-border:rgba(34,197,94,.24);

    --danger:#ff6b62;
    --danger-soft:rgba(255,107,98,.12);
    --danger-border:rgba(255,107,98,.24);

    --panel-radius:20px;
    --control-radius:18px;
    --pill-radius:999px;

    --panel-pad:12px;
    --control-pad-y:12px;
    --control-pad-x:14px;
}

@media (prefers-color-scheme: light){
    :root{
        --bg:#f3f4f6;
        --bg-soft:#e9edf5;
        --card:#ffffff;
        --card-2:#ffffff;
        --text:#111827;
        --muted:#6b7280;
        --muted-2:#7b8798;
        --accent:#2563eb;
        --accent-2:#1d4ed8;
        --accent-soft:#dbeafe;
        --border:#e5e7eb;
        --border-strong:#d1d5db;
        --shadow:0 18px 40px rgba(15,23,42,.12);

        --ok:#22c55e;
        --ok-soft:rgba(34,197,94,.10);
        --ok-border:rgba(34,197,94,.22);

        --danger:#e55347;
        --danger-soft:rgba(229,83,71,.10);
        --danger-border:rgba(229,83,71,.20);
    }
}

html{
    height:100%;
    background:var(--bg);
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body.ohiomail-app{
    margin:0;
    min-height:100%;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
    touch-action:manipulation;
}

body.ohiomail-app *,
body.ohiomail-app *::before,
body.ohiomail-app *::after{
    box-sizing:border-box;
}

body.ohiomail-app a,
body.ohiomail-app button,
body.ohiomail-app input,
body.ohiomail-app select,
body.ohiomail-app textarea,
body.ohiomail-app label{
    -webkit-tap-highlight-color:transparent;
}

body.ohiomail-app a{
    color:inherit;
    text-decoration:none;
}

body.ohiomail-app button,
body.ohiomail-app input,
body.ohiomail-app select,
body.ohiomail-app textarea{
    font:inherit;
    font-size:16px;
}

body.ohiomail-app .mail-wrap{
    width:100%;
    max-width:none;
    margin:0;
    padding:
        max(0px, var(--safe-area-top))
        0
        calc(96px + var(--safe-area-bottom))
        0;
}

body.ohiomail-app .mail-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 8px 10px;
    border-bottom:1px solid var(--border);
    background:var(--card);
    box-shadow:none;
}

body.ohiomail-app .mail-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

body.ohiomail-app .mail-brand-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--accent);
    flex:0 0 auto;
    box-shadow:0 0 0 4px var(--accent-soft);
}

body.ohiomail-app .mail-brand h1{
    margin:0;
    font-size:17px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.02em;
}

body.ohiomail-app .mail-pill{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    max-width:132px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:var(--pill-radius);
    background:transparent;
    color:var(--muted);
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

body.ohiomail-app .mail-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

body.ohiomail-app .mail-desktop-actions{
    display:none;
}

body.ohiomail-app .mail-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:0;
}

body.ohiomail-app .mail-card{
    background:var(--card);
    border:1px solid var(--border);
    border-left:0;
    border-right:0;
    border-radius:0;
    box-shadow:none;
    overflow:hidden;
    min-width:0;
    margin-left:0;
    margin-right:0;
}

body.ohiomail-app .mail-card-hd{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 8px;
    border-bottom:1px solid var(--border);
    min-width:0;
}

body.ohiomail-app .mail-card-hd strong{
    font-size:15px;
    line-height:1.15;
    font-weight:900;
    letter-spacing:-.01em;
    min-width:0;
}

body.ohiomail-app .mail-card-bd,
body.ohiomail-app .mail-right-pad{
    padding:12px 8px;
}

body.ohiomail-app .mail-small{
    font-size:12px;
    color:var(--muted);
}

body.ohiomail-app .mail-muted{
    color:var(--muted);
    font-size:13px;
}

body.ohiomail-app .mail-hidden{
    display:none !important;
}

body.ohiomail-app .mail-hidden-mobile{
    display:none !important;
}

body.ohiomail-app .mail-notice{
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--card-2);
    color:var(--text);
    margin-bottom:10px;
}

body.ohiomail-app .mail-notice.ok{
    background:var(--ok-soft);
    border-color:var(--ok-border);
}

body.ohiomail-app .mail-notice.bad{
    background:var(--danger-soft);
    border-color:var(--danger-border);
}

body.ohiomail-app label{
    display:block;
    margin:10px 0 6px;
    font-size:12px;
    font-weight:800;
    color:var(--muted);
}

body.ohiomail-app input,
body.ohiomail-app select,
body.ohiomail-app textarea{
    width:100%;
    min-height:46px;
    padding:var(--control-pad-y) var(--control-pad-x);
    border-radius:var(--control-radius);
    border:1px solid var(--border);
    background:var(--card-2);
    color:var(--text);
    outline:none;
    box-shadow:none;
}

body.ohiomail-app input::placeholder,
body.ohiomail-app textarea::placeholder{
    color:var(--muted-2);
}

body.ohiomail-app input:focus,
body.ohiomail-app select:focus,
body.ohiomail-app textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);
}

body.ohiomail-app textarea{
    min-height:140px;
    resize:vertical;
    line-height:1.45;
}

body.ohiomail-app select{
    appearance:none;
    -webkit-appearance:none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% - 4px),
        calc(100% - 14px) calc(50% - 4px);
    background-size:8px 8px, 8px 8px;
    background-repeat:no-repeat;
    padding-right:44px;
    touch-action:manipulation;
}

body.ohiomail-app .mail-btn{
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:10px 14px;
    border-radius:18px;
    border:1px solid var(--border);
    background:var(--card-2);
    color:var(--text);
    font-size:14px;
    font-weight:900;
    line-height:1.1;
    cursor:pointer;
    text-align:center;
    white-space:nowrap;
}

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

body.ohiomail-app .mail-btn.danger{
    background:var(--danger-soft);
    border-color:var(--danger-border);
    color:var(--danger);
}

body.ohiomail-app .mail-btn.ok{
    background:var(--ok-soft);
    border-color:var(--ok-border);
    color:var(--ok);
}

body.ohiomail-app .mail-toolbar,
body.ohiomail-app .mail-message-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

body.ohiomail-app .mail-searchbar{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    align-items:center;
    margin-top:8px;
}

body.ohiomail-app .mail-searchbar .mail-btn{
    width:100%;
    min-width:0;
}

body.ohiomail-app .mail-list{
    display:flex;
    flex-direction:column;
}

body.ohiomail-app .mail-msg{
    width:100%;
    background:transparent;
    border:0;
    border-top:1px solid var(--border);
    padding:10px 8px;
    cursor:pointer;
    text-align:left;
    color:inherit;
    border-radius:0;
    overflow:hidden;
}

body.ohiomail-app .mail-msg.active{
    background:var(--accent-soft);
}

body.ohiomail-app .mail-msg.unread .mail-msg-subj{
    font-weight:900;
}

body.ohiomail-app .mail-msg-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    min-width:0;
}

body.ohiomail-app .mail-msg-from{
    min-width:0;
    flex:1 1 auto;
    font-size:13px;
    color:var(--muted);
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body.ohiomail-app .mail-msg-date{
    flex:0 0 auto;
    max-width:46%;
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:right;
}

body.ohiomail-app .mail-msg-subj{
    margin-top:4px;
    font-size:15px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.01em;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    line-clamp:2;
}

body.ohiomail-app .mail-msg-snippet{
    margin-top:4px;
    font-size:13px;
    line-height:1.28;
    color:var(--muted);
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    line-clamp:1;
}

body.ohiomail-app .mail-badge-unread{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
    margin-right:8px;
    vertical-align:middle;
}

body.ohiomail-app .mail-viewer-title{
    margin:0 0 8px 0;
    font-size:16px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:-.02em;
}

body.ohiomail-app .mail-viewer-meta{
    display:grid;
    gap:3px;
    margin-bottom:10px;
    font-size:13px;
    color:var(--muted);
}

body.ohiomail-app .mail-viewer-meta strong{
    color:var(--text);
}

body.ohiomail-app pre{
    margin:0;
    white-space:pre-wrap;
    word-break:break-word;
    line-height:1.45;
    font-size:15px;
    color:var(--text);
}

body.ohiomail-app .mail-html-wrap{
    margin-top:8px;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    background:#fff;
}

body.ohiomail-app .mail-html-frame{
    display:block;
    width:100%;
    min-height:420px;
    border:0;
    background:#fff;
}

body.ohiomail-app .mail-plain-wrap{
    margin-top:8px;
}

body.ohiomail-app .mail-split{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

body.ohiomail-app .mail-empty-state{
    padding:16px 8px;
    color:var(--muted);
    font-size:14px;
}

body.ohiomail-app .mail-footer-note{
    padding:12px 0 20px;
    text-align:center;
    color:var(--muted);
    font-size:12px;
}

body.ohiomail-app .mail-mobile-only{
    display:block;
}

body.ohiomail-app .mail-desktop-only{
    display:none;
}

body.ohiomail-app .mail-hamburger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    min-width:42px;
    height:42px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--card-2);
    color:var(--text);
    font-size:20px;
    font-weight:900;
}

body.ohiomail-app #paneAccount{
    display:none;
}

body.ohiomail-app #paneAccount.open{
    display:block;
}

body.ohiomail-app .mail-mobile-menu-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

body.ohiomail-app .mail-mobile-menu-actions .mail-btn{
    flex:1 1 100%;
}

body.ohiomail-app .mail-toolbar .mail-btn{
    flex:1 1 calc(50% - 4px);
}

body.ohiomail-app .mail-actions-compact .mail-btn{
    flex:1 1 calc(50% - 4px);
    min-width:0;
    padding-left:8px;
    padding-right:8px;
    font-size:13px;
}

body.ohiomail-app .mail-actions-toggle .mail-btn{
    flex:1 1 calc(50% - 4px);
}

body.ohiomail-app #paneListWrap,
body.ohiomail-app #paneViewWrap{
    width:100%;
    margin:0;
    border-left:0;
    border-right:0;
    border-radius:0;
    box-shadow:none;
}

/* compose attachments */
body.ohiomail-app .mail-attachment-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:8px;
}

body.ohiomail-app .mail-attachment-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--card-2);
}

body.ohiomail-app .mail-attachment-meta{
    min-width:0;
    flex:1 1 auto;
}

body.ohiomail-app .mail-attachment-name{
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body.ohiomail-app .mail-attachment-size{
    margin-top:2px;
    color:var(--muted);
    font-size:13px;
}

/* viewer attachments */
body.ohiomail-app .mail-viewer-attachments{
    margin-top:16px;
}

body.ohiomail-app .mail-viewer-attachments h3{
    margin:0 0 10px;
    font-size:15px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:-.01em;
}

body.ohiomail-app .mail-viewer-attachment{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--card-2);
    margin-bottom:8px;
}

body.ohiomail-app .mail-viewer-attachment:last-child{
    margin-bottom:0;
}

body.ohiomail-app .mail-viewer-attachment-meta{
    min-width:0;
    flex:1 1 auto;
}

body.ohiomail-app .mail-viewer-attachment-name{
    font-weight:800;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body.ohiomail-app .mail-viewer-attachment-type{
    margin-top:2px;
    color:var(--muted);
    font-size:13px;
}

/* desktop CSS file will override from 1000px and up */