/* ============ Dejoiy Mail — responsive.css : brand voice + every-screen polish ============
   Loaded last. The default theme speaks the :Dejoiy brand (hot pink and ink, Bricolage type);
   the other 23 themes keep their own colours and only pick up the shapes. */

:root{--font:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --read-font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;--pink:#ff4fa3;--ease-out:cubic-bezier(.16,1,.3,1)}
body{font-family:var(--font)}
/* letters are read in a plain text face; the app around them carries the voice */
.r-body,.tm-content,#compose-body{font-family:var(--read-font)}
::selection{background:#ffc2df;color:#121212}

/* Dejoiy colours: one bright "pop" for Compose, avatars and the header, a deeper accent that reads on white.
   The colour is its own setting (html[data-dj]), so it also sits on top of any background scene. */
html[data-dj="pink"]{--pop:#ff4fa3;--accent:#c4166c;--pop-soft:#ffe3f0;--pop-hover:#fff5fa;--pop-dark:#3a1d2c}
html[data-dj="green"]{--pop:#3ddc84;--accent:#12804a;--pop-soft:#dcf8e8;--pop-hover:#f2fcf6;--pop-dark:#14321f}
html[data-dj="yellow"]{--pop:#ffd23f;--accent:#8a6200;--pop-soft:#fff3c4;--pop-hover:#fffbea;--pop-dark:#352c0f}
html[data-dj="blue"]{--pop:#4da3ff;--accent:#1257c7;--pop-soft:#e0edff;--pop-hover:#f3f8ff;--pop-dark:#14273f}
html[data-dj="orange"]{--pop:#ff8a3d;--accent:#b04a06;--pop-soft:#ffe7d6;--pop-hover:#fff6f0;--pop-dark:#3a2415}
html[data-dj="lilac"]{--pop:#b892ff;--accent:#6b3fc9;--pop-soft:#eee5ff;--pop-hover:#f8f4ff;--pop-dark:#272040}
html[data-dj="mint"]{--pop:#2dd4bf;--accent:#0f766e;--pop-soft:#d5f7f2;--pop-hover:#f0fcfa;--pop-dark:#113230}
html[data-dj="red"]{--pop:#ff5a5f;--accent:#c21d2b;--pop-soft:#ffe1e2;--pop-hover:#fff5f5;--pop-dark:#3a1a1c}
html[data-dj]{--accent-ink:#fff}
html[data-dj][data-scenic="false"]{--hdr1:var(--pop);--hdr2:#121212}
html[data-dj][data-brightness="light"][data-scenic="false"] body{--active:var(--pop-soft);--hover:var(--pop-hover)}
html[data-dj][data-brightness="light"][data-scenic="true"] body{--active:color-mix(in srgb,var(--pop) 22%,transparent)}
html[data-dj]:is([data-brightness="dark"],[data-brightness="medium"]){--accent:var(--pop);--accent-ink:#121212}
html[data-dj]:is([data-brightness="dark"],[data-brightness="medium"]) body{--active:color-mix(in srgb,var(--pop) 24%,transparent);--hover:color-mix(in srgb,var(--pop) 10%,transparent)}
html[data-dj] :is(.compose-btn,.fab){background:var(--pop);color:#121212;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--pop) 70%,#000)}
html[data-dj] .avatar{background:var(--pop);color:#121212;font-weight:800}

/* one logo, not two: the :D Mail lockup already carries the mark */
.brand-mark:not([data-logo-applied]){display:none}
.workspace-emblem img{display:block;width:100%;height:100%}

/* shapes everyone gets */
.compose-btn{border-radius:999px!important;font-weight:800;letter-spacing:-.01em;transition:transform .15s var(--ease-out),box-shadow .2s}
.compose-btn:hover{transform:translateY(-1px)}
.compose-btn:active,.fab:active{transform:scale(.96)}
.m-avatar{border-radius:14px!important;font-weight:700}
.mail-heading h1,.mail-title-line h1,.r-subject{letter-spacing:-.025em;font-weight:800}
.message-group{text-transform:none;letter-spacing:0;font-weight:700}

/* ---------- compact layouts: phones, tablets and narrow windows ---------- */
@media (max-width:1023px), (max-width:1199px) and (pointer:coarse){
  /* unread mail gets a pink dot on the avatar */
  .msg-row.unread .m-avatar::after{content:"";position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:var(--pop,var(--pink));border:2.5px solid var(--surface)}
  .msg-row{transition:background .2s}
  .msg-row:active{background:var(--active)}
  .msg-row .m-from{font-weight:600}
  .msg-row.unread .m-from,.msg-row.unread .m-subj{font-weight:800}

  /* filter chips scroll sideways like stories */
  .mail-filterbar{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .mail-filterbar::-webkit-scrollbar{display:none}
  .mail-filterbar button{flex:none;height:36px;padding:0 15px!important;border-radius:999px!important;border:1.5px solid var(--line)!important;font-weight:700;white-space:nowrap;transition:background .2s,color .2s}
  .mail-filterbar button.active{background:var(--ink)!important;color:var(--surface)!important;border-color:var(--ink)!important}

  /* reply / forward sit at the bottom, in thumb reach */
  .thread-actions{position:sticky;bottom:0;z-index:4;background:var(--surface);padding:10px 0 calc(10px + env(safe-area-inset-bottom))!important;margin-top:8px}
  .thread-actions .btn{flex:1;min-height:48px;border-radius:999px;font-weight:700}
}

/* ---------- phones ---------- */
@media (max-width:680px){
  #topbar{border-bottom:0;background:var(--surface)}
  .search-wrap{height:48px!important;border-radius:999px!important;border:1.5px solid transparent!important}
  .search-wrap:focus-within{border-color:var(--ink)!important}
  #account-btn{width:38px;height:38px;border-radius:13px}

  /* a floating tab bar instead of a slab glued to the bottom edge */
  #bottomnav{left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;min-height:64px;padding:6px!important;
    border:1px solid var(--line)!important;border-radius:24px;box-shadow:0 18px 40px -18px rgba(40,10,30,.45);display:flex}
  #bottomnav button{flex:1;border-radius:18px;font-size:11.5px;font-weight:700;color:var(--ink-3);transition:color .2s}
  #bottomnav button.active{color:var(--ink)}
  #bottomnav button.active .b-ico{background:var(--active);padding:3px 18px;border-radius:999px}
  #bottomnav button:active{transform:scale(.94)}
  #view{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
  .msg-list{padding-bottom:84px}
  .fab{right:16px;bottom:calc(88px + env(safe-area-inset-bottom));height:58px;border-radius:999px;font-weight:800;font-size:16px}
  body.fab-mini .fab{width:58px}

  .r-subject{font-size:24px;line-height:1.2}
  .message-group{padding:16px 16px 6px;font-size:13px;color:var(--ink-3)}
}

/* ---------- small phones (iPhone SE, older Android) ---------- */
@media (max-width:360px){
  #topbar{gap:6px;padding-left:8px;padding-right:8px}
  .msg-row{column-gap:10px;padding:10px 12px}
  .m-avatar{width:36px;height:36px}
  #bottomnav{left:8px!important;right:8px!important}
  #bottomnav button{font-size:10.5px}
}

/* ---------- tablets and narrow windows ---------- */
@media (min-width:681px) and (max-width:1199px) and (pointer:coarse), (min-width:681px) and (max-width:1023px){
  #sidebar .compose-btn{border-radius:20px!important}
  .nav-item.active{background:var(--active)}
  .search-wrap{border-radius:999px!important}
  .search-submit{border-radius:0 999px 999px 0!important}
}

/* ---------- big screens: keep lines readable ---------- */
@media (min-width:1600px){
  .r-body{max-width:78ch}
}

@media (prefers-reduced-motion:reduce){
  .compose-btn,.msg-row,#bottomnav button,.mail-filterbar button{transition:none}
}
@media (max-width:1023px), (max-width:1199px) and (pointer:coarse){.mail-filterbar button.active::after{display:none}}

/* ---------- mail cards: an open conversation is a card coloured by how much it matters ---------- */
:root{--tone-security:#ff5a5f;--tone-updates:#4da3ff;--tone-important:#ff4fa3;--tone-danger:#ff5a5f;--tone-money:#ff8a3d;--tone-work:#ffd23f;--tone-personal:#3ddc84;--tone-fun:#b892ff}
.mail-card{--card:var(--surface-2);--card-ink:var(--ink);position:relative;margin:12px clamp(8px,1.6vw,20px) 20px;padding:clamp(18px,2.4vw,28px) clamp(14px,2vw,24px) 14px;
  border-radius:28px;background:var(--card);color:var(--card-ink);animation:mcOpen .45s cubic-bezier(.16,1,.3,1) both}
.mail-card[data-tone]:not([data-tone=""]){--card-ink:#121212}
.mail-card[data-tone="important"]{--card:var(--tone-important)}
.mail-card[data-tone="danger"]{--card:var(--tone-danger)}
.mail-card[data-tone="money"]{--card:var(--tone-money)}
.mail-card[data-tone="work"]{--card:var(--tone-work)}
.mail-card[data-tone="personal"]{--card:var(--tone-personal)}
.mail-card[data-tone="fun"]{--card:var(--tone-fun)}
.mail-card .r-subject{font-size:clamp(24px,2.6vw,34px);line-height:1.08;letter-spacing:-.035em;font-weight:800;color:var(--card-ink);padding:0;margin:6px 0 16px;text-wrap:balance}
.mail-card .thread-count{font-size:14px;font-weight:700;padding:3px 10px;border-radius:999px;background:#121212;color:#fff;vertical-align:middle;letter-spacing:0}
.mc-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#121212;color:#fff;font-size:14px;font-weight:800;transform:rotate(-2deg)}
.mc-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--card)}
/* each message sits on its own solid panel inside the card, so the letter stays easy to read */
.mail-card .thread-messages{display:grid;gap:10px}
.mail-card .thread-message{border:0!important;border-radius:22px;background:#fff!important;color:#1d2637;padding:4px 6px;overflow:hidden;--ink:#1d2637;--ink-2:#4c5871;--ink-3:#6b7489}
html[data-brightness="dark"] .mail-card .thread-message,html[data-brightness="medium"] .mail-card .thread-message{background:#1c1a20!important;color:#eef2fa;--ink:#eef2fa;--ink-2:#c3cbdf;--ink-3:#93a0bb}
.mail-card .thread-fold{border-radius:999px;background:#121212;color:#fff;border:0}
.mail-card .thread-actions{position:static;background:transparent!important;padding:14px 0 4px!important;margin:0;gap:10px}
.mail-card .thread-actions .btn{min-height:46px;padding:0 22px;border-radius:999px;border:0;background:#121212;color:#fff;font-weight:800;transition:transform .15s,background .2s}
.mail-card[data-tone=""] .thread-actions .btn{background:var(--ink);color:var(--surface-3,#fff)}
.mail-card .thread-actions .btn:hover{transform:translateY(-2px)}
.mail-card .thread-actions .btn:active{transform:scale(.97)}
.mail-card .thread-actions .btn .ui-icon{color:inherit}
@keyframes mcOpen{from{opacity:0;transform:translateY(18px) scale(.985)}}

/* label chips: a dot in the label's colour, like the category chips on dejoiy.com */
.lbl[data-tone]:not([data-tone=""]){display:inline-flex;align-items:center;gap:5px;border-radius:999px!important;font-weight:700}
.lbl[data-tone]:not([data-tone=""])::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--t)}
.lbl[data-tone="danger"]{--t:var(--tone-danger)}.lbl[data-tone="money"]{--t:var(--tone-money)}.lbl[data-tone="work"]{--t:#e0a800}
.lbl[data-tone="personal"]{--t:#1fb866}.lbl[data-tone="fun"]{--t:var(--tone-fun)}
.mail-card .lbl{background:rgba(255,255,255,.7);color:#121212}
html[data-brightness="dark"] .mail-card .thread-message .lbl{background:rgba(255,255,255,.1);color:#eef2fa}


@media (max-width:1023px), (max-width:1199px) and (pointer:coarse){
  .mail-card{margin:8px 10px 16px;border-radius:24px}
  .mail-card .thread-actions{position:static!important;padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
  .mail-card .thread-actions .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){.mail-card{animation:none}}

/* ---------- iPhone / iOS Safari ---------- */
@media (max-width:1023px), (max-width:1199px) and (pointer:coarse){
  /* Safari zooms the whole page when a field under 16px gets focus, which knocks the layout sideways */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,[contenteditable="true"]{font-size:max(16px,1em)!important}
  /* a filter on the app frame turns it into the frame for every fixed bar, which jumps around in Safari */
  #app{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  /* Reply / Forward stay on a solid strip of the card's colour, never over the letter */
  .mail-card .thread-actions{position:static!important;margin:6px 0 0!important;padding:10px 0 4px!important;background:transparent!important}
  .mail-card{overflow:clip}
  /* the sender line gets the width: reply lives at the bottom, more in the toolbar */
  .mail-card .thread-message .tm-act{display:none!important}
  .mail-card .tm-head{gap:10px}
  .mail-card .tm-who{flex:1 1 0;min-width:0}
  .mail-card .tm-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mail-card .tm-email{display:none}
  .mail-card .tm-to{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mail-card .r-body{overflow-x:auto;word-break:break-word}
  .mail-card .r-body img,.mail-card .r-body table{max-width:100%!important;height:auto}
  .reader{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
}
@media (max-width:680px){
  /* notch and home bar */
  #topbar{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  body.reader-open .r-toolbar{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .dialog,.dlg,[role="dialog"]{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}


/* ============ the app on phones and tablets: colour cards, glass, a compose sheet ============ */
/* every mail has a colour: its label, what it is about, or your Dejoiy colour */
.msg-row{--t:var(--pop,#ff4fa3)}
.msg-row[data-tone="important"],.mail-card[data-tone="important"]{--t:var(--tone-important)}
.msg-row[data-tone="danger"],.msg-row[data-tone="security"]{--t:var(--tone-danger)}
.msg-row[data-tone="money"]{--t:var(--tone-money)}
.msg-row[data-tone="work"]{--t:var(--tone-work)}
.msg-row[data-tone="personal"]{--t:var(--tone-personal)}
.msg-row[data-tone="fun"]{--t:var(--tone-fun)}
.msg-row[data-tone="updates"]{--t:var(--tone-updates)}
.mail-card[data-tone="security"]{--card:var(--tone-security)}
.mail-card[data-tone="updates"]{--card:var(--tone-updates)}
.mail-card[data-tone=""]{--card:var(--pop,#ff4fa3);--card-ink:#121212}
.mail-card[data-tone=""] .thread-actions .btn{background:#121212;color:#fff}
/* the open card is glassy over a background scene, solid on plain looks */
html[data-scenic="true"] .mail-card{background:color-mix(in srgb,var(--card) 86%,transparent);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}

@media (max-width:1023px), (max-width:1199px) and (pointer:coarse){
  .msg-list{padding:4px 0 96px}
  html .msg-row{margin:7px 10px;border-radius:22px;min-height:84px;padding:13px 14px!important;border:1px solid color-mix(in srgb,var(--t) 38%,transparent)!important;
    background:color-mix(in srgb,var(--t) 15%,var(--row-base,#fff))!important;transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s}
  html[data-brightness="light"] .msg-row{--row-base:#fff}
  html:is([data-brightness="dark"],[data-brightness="medium"]) .msg-row{--row-base:#18161b}
  html[data-scenic="true"] .msg-row{--row-base:transparent;background:color-mix(in srgb,var(--t) 26%,transparent)!important;
    backdrop-filter:blur(14px) saturate(1.35);-webkit-backdrop-filter:blur(14px) saturate(1.35)}
  html .msg-row.unread{border-color:color-mix(in srgb,var(--t) 70%,transparent)!important;box-shadow:inset 4px 0 0 0 transparent}
  html .msg-row.selected{background:color-mix(in srgb,var(--t) 34%,var(--row-base,transparent))!important}
  html .msg-row:active{transform:scale(.985)}
  .msg-row .m-avatar{box-shadow:0 0 0 2px color-mix(in srgb,var(--t) 70%,transparent)}
  .msg-row.unread .m-avatar::after{background:var(--t)}
  .message-group{background:transparent!important;padding:14px 18px 2px!important;font-weight:800;letter-spacing:-.01em}
  .msg-row .m-labels .lbl{background:color-mix(in srgb,var(--t) 22%,transparent)}

  /* compose: a sheet in your colour, fields as pills, a big send button */
  .compose{background:transparent!important;padding:0 0 calc(16px + env(safe-area-inset-bottom))!important;gap:0}
  .compose-head{display:flex;align-items:center;gap:8px;margin:0;padding:calc(10px + env(safe-area-inset-top)) 12px 18px!important;
    background:var(--pop,#ff4fa3)!important;color:#121212!important;border:0!important;border-radius:0 0 28px 28px}
  .compose-head .c-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(20px,6.4vw,26px);font-weight:800;letter-spacing:-.035em}
  .compose-head .icon-btn{color:#121212}
  .compose-head #c-discard{border:2px solid #121212!important;border-radius:999px;background:transparent;color:#121212;font-weight:700}
  .compose-head .c-send-top{width:46px;height:46px;border-radius:50%!important;background:#121212!important;color:#fff!important;border:0;display:inline-grid;place-items:center;padding:0}
  .compose .c-row{margin:10px 12px 0;padding:6px 8px 6px 6px!important;border:0!important;border-radius:999px;background:var(--compose-field)!important;min-height:52px;align-items:center;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pop,#ff4fa3) 26%,transparent)}
  html[data-brightness="light"] .compose{--compose-field:#fff}
  html:is([data-brightness="dark"],[data-brightness="medium"]) .compose{--compose-field:#211e25}
  html[data-scenic="true"] .compose{--compose-field:color-mix(in srgb,var(--surface) 92%,transparent)}
  .compose .c-lab{flex:none;min-width:auto!important;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--pop,#ff4fa3) 22%,transparent);color:var(--ink);font-weight:800;font-size:13px}
  .compose .c-row input{background:transparent!important;border:0!important;box-shadow:none!important}
  .compose #c-ccbtn{border-radius:999px}
  .compose .fmt-bar{margin:12px 12px 0;padding:6px!important;border:0!important;border-radius:18px;background:var(--compose-field)!important;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .compose .fmt-bar::-webkit-scrollbar{display:none}
  .compose .fmt-bar .icon-btn{flex:none;min-width:40px;height:40px;border-radius:12px}
  .compose #compose-body{margin:10px 12px 0;min-height:42vh;padding:18px!important;border:0!important;border-radius:24px;background:var(--compose-field)!important;line-height:1.6;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pop,#ff4fa3) 26%,transparent)}
  .compose #compose-body:focus{outline:3px solid color-mix(in srgb,var(--pop,#ff4fa3) 55%,transparent);outline-offset:0}
  .compose-foot{display:flex;gap:10px;flex-wrap:wrap;margin:14px 12px 0;padding:0!important;border:0!important;background:transparent!important}
  .compose-foot #c-send{flex:1 1 100%;min-height:56px;border-radius:999px;background:#121212!important;color:#fff!important;border:0;font-size:17px;font-weight:800;gap:10px;justify-content:center}
  .compose-foot #c-send:active{transform:scale(.98)}
  .compose-foot .btn:not(#c-send){flex:1;min-height:48px;border-radius:999px}
  .compose-foot #c-status{flex:1 1 100%;text-align:center;margin:0!important}
}
/* phones: the title gets its own line under the buttons, so it never gets cut */
@media (max-width:1023px), (max-width:1199px) and (pointer:coarse){
  .compose-head{flex-wrap:wrap}
  .compose-head .c-title{order:9;flex:1 1 100%;padding:4px 6px 0;font-size:clamp(26px,8vw,34px);white-space:normal}
  .compose-head #c-discard{margin-left:auto}
}

/* the message is written on paper, in the colours the recipient will see */
.compose #compose-body{background:#fffdf9!important;color:#121212}
.compose #compose-body:empty::before{color:#8a8590}
/* label picker */
.c-labels{flex-wrap:nowrap}
.c-label-pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:2px}
.c-label-pills::-webkit-scrollbar{display:none}
.c-pill{--t:var(--pop,#ff4fa3);flex:none;border:1.5px solid color-mix(in srgb,var(--t) 55%,transparent);background:color-mix(in srgb,var(--t) 12%,transparent);
  color:var(--ink);border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .15s,background .15s}
.c-pill[data-tone="important"]{--t:var(--tone-important)}.c-pill[data-tone="danger"],.c-pill[data-tone="security"]{--t:var(--tone-danger)}
.c-pill[data-tone="money"]{--t:var(--tone-money)}.c-pill[data-tone="work"]{--t:var(--tone-work)}.c-pill[data-tone="personal"]{--t:var(--tone-personal)}
.c-pill[data-tone="fun"]{--t:var(--tone-fun)}.c-pill[data-tone="updates"]{--t:var(--tone-updates)}
.c-pill[aria-checked="true"]{background:var(--t);color:#121212;border-color:#121212;box-shadow:0 2px 0 #121212}
.c-pill:active{transform:scale(.96)}
.c-pill:focus-visible{outline:3px solid var(--t);outline-offset:2px}
/* the drawer sits above the search bar, bottom bar and compose button, not under them */
@media (max-width:1023px), (max-width:1199px) and (pointer:coarse){
  body.nav-open #shell{z-index:60}
  body.nav-open .fab{visibility:hidden}
  body.nav-open #sidebar{background:var(--surface)!important;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:calc(18px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom))!important;overflow-y:auto;overscroll-behavior:contain;
    border-radius:0 28px 28px 0;box-shadow:12px 0 40px rgba(0,0,0,.35)}
  body.nav-open #sidebar .nav-item.active{background:color-mix(in srgb,var(--pop,#ff4fa3) 22%,transparent)!important;color:var(--ink)!important;font-weight:800}
}
/* The background photo is sized to the tallest screen, so the keyboard and Safari's bars
   opening or closing never rescale it (that was the shake on every tap). */
#bg{bottom:auto;height:100vh;height:100lvh;transition:none}