/* Raven — Flight Deck release. Warm work surface, dark navigation, Raven artwork, mail gold accent. */

:root{
  --bg:#faf9f7; --panel:#ffffff; --panel-2:#f6f5f9; --panel-3:#f0eef6; --border:#e9e7ec;
  --workspace-bg:#f2efe9;
  --ink:#232227; --ink-soft:#5b5762; --ink-faint:#6f6979;
  --radius-lg:18px; --radius-md:14px; --radius-sm:10px; --radius-pill:999px;
  --shadow-soft:0 6px 20px rgba(30,20,40,.06);
  --shadow-lift:0 18px 48px rgba(30,20,40,.12);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --mail:#ee9b0f; --mail-bg:#fdecc9; --mail-ink:#7a4c05;
  --cal:#1f93f2;  --cal-bg:#d9edff;  --cal-ink:#0f5c96;
  --drive:#17ab7f; --drive-bg:#cdf3e3; --drive-ink:#0c6b4b;
  --docs:#8266ee; --docs-bg:#e6ddff; --docs-ink:#5738c4;
  --sheets:#f37a5c; --sheets-bg:#ffe0d5; --sheets-ink:#a83a1a;
  --chat:#f3486e; --chat-bg:#ffdde4; --chat-ink:#b81f47;

  --accent:var(--mail); --accent-bg:var(--mail-bg); --accent-ink:var(--mail-ink);
  --danger:#d8382f; --danger-bg:#ffe1de;
  --ok:#17ab7f;
  --hover:#f5f3f8; --row-hover:#faf8fc;
  --unread-dot:var(--mail);
}
[data-theme="dark"]{
  --bg:#17161a; --panel:#201f24; --panel-2:#28272d; --panel-3:#2f2e35; --border:#35343b;
  --workspace-bg:#0f0e13;
  --ink:#eceaf0; --ink-soft:#b1adba; --ink-faint:#8d8798;
  --shadow-soft:0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 16px 36px rgba(0,0,0,.5);
  --mail-bg:#3d2f12; --mail-ink:#f2c069;
  --drive-bg:#123529; --drive-ink:#5fd6ae;
  --docs-bg:#291f4d; --docs-ink:#b3a0f7;
  --cal-bg:#0f2b44; --cal-ink:#7cc1f7;
  --sheets-bg:#42201626; --sheets-ink:#f8a189;
  --chat-bg:#44182226; --chat-ink:#f78ba6;
  --danger-bg:#4a1a16;
  --hover:#2b2a31; --row-hover:#252429;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink);
  height:100dvh; overflow:hidden; font-weight:500; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; font-weight:inherit}
input,textarea,select{font-family:inherit}
a{color:var(--accent-ink)}
::selection{background:var(--accent-bg);color:var(--accent-ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}
.hidden{display:none!important}

/* ================= Raven boot flight ================= */
.boot-splash{
  position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;background:
    radial-gradient(circle at 52% 46%,rgba(113,43,255,.22),transparent 34%),
    radial-gradient(circle at 26% 65%,rgba(20,154,255,.09),transparent 28%),#050309;
  color:#fff;transition:opacity .42s var(--ease-out),visibility .42s;
}
.boot-splash.exit{opacity:0;visibility:hidden;pointer-events:none}
.boot-splash.exit .boot-raven-flight{transform:scale(1.14);opacity:0;transition:transform .6s var(--ease-out),opacity .6s var(--ease-out)}
.boot-raven-flight{width:min(620px,72vw);position:relative;z-index:2;animation:boot-raven-arrival 1.85s cubic-bezier(.16,1,.3,1) both}
.boot-raven{display:block;width:100%;height:auto;transform-origin:55% 53%;filter:brightness(1.7) saturate(2.05) contrast(1.08) drop-shadow(0 26px 38px rgba(120,48,255,.46))}
.boot-flightline{position:absolute;left:8%;right:8%;top:66%;height:1px;background:linear-gradient(90deg,transparent,rgba(238,155,15,.12),rgba(187,105,255,.35),transparent);transform:scaleX(.2);animation:boot-line 1.5s .15s var(--ease-out) both}
.boot-wordmark{font-size:clamp(34px,5vw,62px);font-weight:900;letter-spacing:-2px;line-height:1;margin-top:-7vh;position:relative;z-index:3;text-shadow:0 8px 30px #050309,0 0 42px rgba(123,56,255,.28);animation:boot-track 2.2s cubic-bezier(.2,.8,.2,1) .9s both}
.boot-copy{font-size:10px;text-transform:uppercase;letter-spacing:2.1px;font-weight:800;color:#bdb5c9;margin-top:13px}
.boot-progress{width:150px;height:2px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:18px}
.boot-progress span{display:block;width:46%;height:100%;background:linear-gradient(90deg,#7b38ff,#ee9b0f);animation:boot-progress 1.75s ease-in-out infinite}
@keyframes boot-raven-arrival{0%{opacity:0;transform:translate3d(-22vw,7vh,0) scale(.62) rotate(-5deg)}25%{opacity:1}72%{transform:translate3d(1.5vw,-1vh,0) scale(1.025) rotate(.8deg)}100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0)}}
@keyframes boot-hover{0%,100%{transform:translate3d(0,0,0) rotate(0)}28%{transform:translate3d(1vw,-7px,0) rotate(-1.1deg)}52%{transform:translate3d(1.4vw,3px,0) rotate(.6deg)}68%{transform:translate3d(1.2vw,8px,0) rotate(1.3deg)}84%{transform:translate3d(.6vw,-3px,0) rotate(-.5deg)}}
@keyframes raven-wingbeat{0%,100%{transform:scaleY(1) scaleX(1) skewX(0)}8%{transform:scaleY(.66) scaleX(.95) skewX(-2deg)}16%{transform:scaleY(1.1) scaleX(1.05) skewX(1deg)}26%{transform:scaleY(.66) scaleX(.95) skewX(-2deg)}34%{transform:scaleY(1.1) scaleX(1.05) skewX(1deg)}48%{transform:scaleY(1.02) scaleX(1.01) skewX(0)}72%{transform:scaleY(1.05) scaleX(1) skewX(.5deg)}}
@keyframes boot-line{to{transform:scaleX(1)}}
@keyframes boot-progress{0%{transform:translateX(-120%)}100%{transform:translateX(330%)}}
@keyframes boot-track{0%{letter-spacing:.14em;opacity:0;filter:blur(6px)}100%{letter-spacing:-2px;opacity:1;filter:blur(0)}}
@keyframes boot-feather{0%{opacity:0;transform:translate(0,0) rotate(10deg)}12%{opacity:.8}100%{opacity:0;transform:translate(-140px,70px) rotate(-40deg)}}
.boot-feather{position:absolute;width:12px;height:4px;border-radius:60% 40% 60% 40%;background:linear-gradient(90deg,#a855f7,#22d3ee);opacity:0;z-index:1;animation:boot-feather 2.6s ease-out infinite}

/* ================= Login ================= */
.login-wrap{
  height:100dvh; display:flex; align-items:center; justify-content:center; padding:32px;
  background:#ece8e1; overflow:auto;
}
.login-shell{
  width:min(980px,100%); min-height:590px; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  background:var(--panel); border:1px solid rgba(35,34,39,.1); border-radius:20px;
  box-shadow:0 28px 80px rgba(24,19,17,.16); overflow:hidden;
}
.login-visual{position:relative;min-height:590px;background:#030307;overflow:hidden;color:#fff}
.raven-hero{
  position:absolute; width:min(108%,590px); max-width:none; left:50%; bottom:-12px;
  transform:translateX(-50%); display:block; user-select:none;
}
.splash-owner{position:absolute;z-index:2;top:30px;left:32px;display:flex;align-items:center;gap:10px;color:#d9d2ca;font-size:9px;font-weight:900;letter-spacing:1.55px;text-transform:uppercase}
.splash-owner i{display:block;width:24px;height:1px;background:var(--mail)}
.splash-copy{position:absolute;z-index:2;left:32px;right:32px;bottom:28px;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.splash-name{font-size:54px;line-height:1;font-weight:900;letter-spacing:-1.8px}
.splash-rule{width:44px;height:3px;background:var(--mail);margin:14px 0 11px}
.splash-copy p{margin:0;color:#d9d2ca;font-size:13px;font-weight:800;letter-spacing:.15px}
.login-card{
  width:100%; background:var(--panel); padding:68px 48px 38px;
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  position:relative;
}
.login-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--mail)}
.login-card h1{font-size:29px;line-height:1.15;margin:0;font-weight:900;letter-spacing:-.5px}
.login-kicker{font-size:10px;color:var(--mail-ink);font-weight:900;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:-7px}
.app-brand-kind{margin-top:1px;color:var(--ink-faint);font-size:9px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}
.login-sub{font-size:13px;color:var(--ink-soft);margin:-7px 0 8px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11.5px;font-weight:800;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.6px}
.field input,.field textarea,.field select{
  border:1.5px solid var(--border); border-radius:9px; padding:11px 14px; font-size:14px;
  background:var(--panel-2); color:var(--ink); outline:none; font-weight:600;
  transition:border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.field input:focus,.field textarea:focus{border-color:var(--mail); box-shadow:0 0 0 3px var(--mail-bg)}
.btn-primary{
  background:var(--mail); color:#241805; border-radius:9px;
  padding:12px 22px; font-weight:900; font-size:14px;
  box-shadow:none;
  transition:transform .2s var(--ease-spring), box-shadow .2s var(--ease-out), opacity .2s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 7px 18px rgba(122,76,5,.18)}
.btn-primary:disabled{opacity:.55; transform:none; cursor:default}
.btn-ghost{
  background:var(--panel-2); color:var(--ink); border-radius:var(--radius-pill);
  padding:9px 16px; font-weight:800; font-size:12.5px;
  display:inline-flex; align-items:center; gap:7px;
  transition:background .15s var(--ease-out);
}
.btn-ghost:hover{background:var(--panel-3)}
.btn-danger{background:var(--danger-bg); color:var(--danger); border-radius:var(--radius-pill); padding:9px 16px; font-weight:800; font-size:12.5px}
.form-error{
  background:var(--danger-bg); color:var(--danger); border-radius:12px; padding:10px 14px;
  font-size:12.5px; font-weight:700; display:none;
}
.form-error.show{display:block}
.login-foot{font-size:11px;color:var(--ink-faint);text-align:center;margin-top:4px}
.login-foot a{color:var(--ink-faint)}
.login-actions{display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:750;margin-top:-2px}
.login-actions a{color:var(--mail-ink);text-underline-offset:3px}
.password-control{position:relative}
.password-control input{width:100%;padding-right:64px}
.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);padding:6px 8px;border-radius:7px;font-size:10.5px;font-weight:900;color:var(--mail-ink);text-transform:uppercase;letter-spacing:.35px}
.password-toggle:hover{background:var(--mail-bg)}
.access-account{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2);font-size:12.5px;font-weight:800}
.access-account img{width:30px;height:30px;object-fit:cover;border-radius:8px;background:#08060d}
.password-rules{margin:-4px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;font-size:10.5px;color:var(--ink-faint)}
.password-rules li::before{content:"·";color:var(--mail);font-weight:900;margin-right:6px}
.access-success{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.access-success img{width:120px;filter:drop-shadow(0 12px 18px rgba(95,37,190,.2))}

/* ================= App shell ================= */
#app{height:100dvh; display:flex; flex-direction:column}
.topbar{
  height:68px; min-height:68px; display:flex; align-items:center; gap:12px;
  padding:0 18px; background:var(--panel); border-bottom:1px solid var(--border);
  position:relative; z-index:50;
}
.icon-btn{
  width:36px;height:36px;border-radius:8px; flex:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft); position:relative;
  transition:transform .25s var(--ease-spring), background .2s var(--ease-out), color .2s var(--ease-out);
}
.icon-btn:hover{background:var(--hover);color:var(--ink);transform:none}
.icon-btn svg{width:18px;height:18px;flex:none;stroke-width:1.8}
.icon-btn.small{width:32px;height:32px}
.icon-btn.small svg{width:16px;height:16px}

.app-brand{width:230px;flex:none;display:flex;align-items:center;gap:11px}
.app-brand-mark{
  width:42px;height:42px;border-radius:12px;
  background:#07060b; overflow:hidden; color:var(--mail);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.app-brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
.app-brand-mark svg{width:18px;height:18px}
.app-brand-name{font-weight:800;font-size:18px;line-height:1;letter-spacing:-.4px}
.app-brand-kind{margin-top:5px;color:var(--ink-faint);font-size:8.5px;font-weight:800;letter-spacing:1.35px;text-transform:uppercase}

.searchwrap{flex:1;display:flex;justify-content:center;min-width:0;position:relative}
.search{
  width:100%;max-width:600px;height:40px;
  display:flex;align-items:center;gap:8px;
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:10px;
  padding:7px 13px;
  color:var(--ink-faint);
  transition:box-shadow .2s var(--ease-out), background .2s var(--ease-out);
}
.search:focus-within{background:var(--panel);box-shadow:var(--shadow-soft)}
.search svg{width:15px;height:15px;flex:none}
.search input{
  border:none;outline:none;background:transparent;flex:1;min-width:0;
  font-size:13.5px;font-weight:700;color:var(--ink);
}
.search input::placeholder{color:var(--ink-faint);font-weight:600}
.search .kbd{
  font-size:10.5px;font-weight:800;color:var(--ink-faint);
  background:var(--panel);border:1px solid var(--border);
  padding:1px 7px;border-radius:8px; flex:none;
}
.topbar-right{display:flex;align-items:center;gap:8px}
.acct-toggle{
  display:flex;background:var(--panel-2);padding:3px;border-radius:99px;flex:none;
}
.acct-toggle button{
  padding:5px 12px;border-radius:99px;font-size:11.5px;font-weight:800;color:var(--ink-faint);
  transition:background .15s, color .15s;
}
.acct-toggle button.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-soft)}
.avatar-me{
  width:36px;height:36px;border-radius:10px; flex:none;
  background:#1c1816;
  color:var(--mail);display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:12.5px;cursor:pointer;
  box-shadow:var(--shadow-soft);
  transition:transform .25s var(--ease-spring);
}
.avatar-me:hover{transform:translateY(-1px)}

/* menus */
.menu{
  position:absolute; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lift);
  padding:6px; min-width:200px; z-index:200;
  display:flex; flex-direction:column; gap:1px;
}
.menu button, .menu .menu-item{
  display:flex;align-items:center;gap:10px; text-align:left;
  padding:9px 12px; border-radius:10px; font-size:13px; font-weight:700; color:var(--ink);
  text-decoration:none;
}
.menu button:hover,.menu .menu-item:hover{background:var(--hover)}
.menu .sep{height:1px;background:var(--border);margin:5px 8px}
.menu .menu-head{padding:10px 12px 4px;font-size:11px;font-weight:800;color:var(--ink-faint)}
.menu svg{width:15px;height:15px;color:var(--ink-soft)}

/* ================= Body ================= */
.body{flex:1; display:flex; min-height:0; position:relative}

.rail{
  width:64px;flex:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 0;
  background:#17151a;
  border-right:1px solid #2d2931;
}
.rail-item{
  width:42px;height:42px;border-radius:10px; text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  color:#918a98;
  transition:background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-spring);
  position:relative;
}
.rail-item:hover{background:#27232b;color:#fff;transform:none}
.rail-item svg{width:20px;height:20px}
.rail-item img{width:28px;height:28px;border-radius:8px;display:block}
.rail-item[data-app="mail"]{color:var(--mail)}
.rail-item[data-app="calendar"]{color:var(--cal)}
.rail-item[data-app="drive"]{color:var(--drive)}
.rail-item[data-app="docs"]{color:var(--docs)}
.rail-item[data-app="sheets"]{color:var(--sheets)}
.rail-item[data-app="chat"]{color:var(--chat)}
.rail-item.rail-mail.active,
.rail-item[data-app="mail"].active{background:var(--mail);color:#241805}
.rail-item[data-app="mail"].active::after{content:"";position:absolute;left:-11px;width:3px;height:20px;background:#fff;border-radius:0 3px 3px 0}
.rail-item[data-app="drive"]:hover,.rail-item[data-app="docs"]:hover,.rail-item[data-app="sheets"]:hover{background:#27232b}
.rail-item.disabled{opacity:.55;cursor:default}
.rail-item.disabled:hover{background:none;transform:none}
.rail-tooltip{
  position:absolute;left:50px;top:50%;transform:translateY(-50%);
  background:#111014;color:#fff;padding:6px 10px;border-radius:7px;
  font-size:11.5px;font-weight:800;white-space:nowrap;
  opacity:0;pointer-events:none; z-index:100;
  transition:opacity .15s var(--ease-out), transform .15s var(--ease-out);
}
.rail-item:hover .rail-tooltip{opacity:1;transform:translateY(-50%) translateX(4px)}

/* Sidebar */
.sidebar{
  width:224px;flex:none;
  background:#17151a;
  color:#f6f2f8;
  border-right:1px solid #2d2931;
  display:flex;flex-direction:column;
  padding:16px 12px 12px;
  overflow-y:auto;
}
.compose-btn{
  display:flex;align-items:center;gap:9px;
  padding:12px 18px;
  background:var(--mail);
  color:#241805;
  border-radius:10px;
  font-weight:900;font-size:13.5px;
  box-shadow:none;
  align-self:stretch;justify-content:center;
  transition:transform .2s var(--ease-spring), box-shadow .2s var(--ease-out);
  margin-bottom:14px;
}
.compose-btn:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(122,76,5,.18)}
.compose-btn svg{width:15px;height:15px}
.nav-section-title{
  font-size:9px;font-weight:800;color:#7e7785;
  letter-spacing:1px;text-transform:uppercase;
  padding:8px 10px 5px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-section-title .icon-btn.small{width:24px;height:24px}
.nav-section-title .icon-btn.small svg{width:13px;height:13px}
.nav-row{
  display:flex;align-items:center;gap:10px;
  min-height:37px;padding:8px 10px;border-radius:8px;
  font-size:12px;font-weight:600;color:#c4bec8;
  cursor:pointer; user-select:none;
  transition:background .15s var(--ease-out), color .15s var(--ease-out);
  position:relative;
}
.nav-row:hover{background:#242127;color:#fff}
.nav-row.active{background:rgba(238,155,15,.16);color:#f0b33d}
.nav-row svg{width:15px;height:15px;flex:none}
.nav-row .nlabel{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-row .count{font-size:10px;font-weight:800;color:#918a98}
.nav-row.active .count{color:#f0b33d}
.nav-row .row-tools{display:none;gap:2px}
.nav-row:hover .row-tools{display:flex}
.nav-row:hover .count{display:none}

/* ================= Main / list ================= */
.main{flex:1; min-width:0; display:flex; overflow:hidden; position:relative;background:var(--workspace-bg)}
.list-pane{
  flex:0 0 390px; min-width:0; border-right:1px solid var(--border);
  background:var(--panel); display:flex; flex-direction:column;
}
.list-toolbar{
  display:flex; align-items:center; gap:4px;
  padding:10px 14px; border-bottom:1px solid var(--border); min-height:64px;
}
.list-toolbar .title{font-size:17px;font-weight:800;letter-spacing:-.3px;padding:0 6px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-toolbar .sel-count{font-size:12px;font-weight:800;color:var(--mail-ink);background:var(--mail-bg);border-radius:99px;padding:3px 10px;margin-right:2px}
.check{
  width:17px;height:17px;border:2px solid var(--ink-faint);border-radius:5px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .12s, border-color .12s;
  background:var(--panel);
}
.check svg{width:11px;height:11px;color:#fff;opacity:0}
.check.on{background:var(--mail);border-color:var(--mail)}
.check.on svg{opacity:1}

.thread-scroll{flex:1; overflow-y:auto}
.thread{
  padding:12px 14px 12px 9px; border-bottom:1px solid var(--border); cursor:pointer;
  display:grid;grid-template-columns:20px 34px minmax(0,1fr); gap:9px; align-items:flex-start; position:relative;
}
.thread:hover{background:var(--row-hover)}
.thread.active{background:var(--mail-bg)}
.thread.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--mail)}
.thread .t-controls{display:flex;flex-direction:column;gap:6px;align-items:center;padding-top:2px}
.star-btn{color:var(--ink-faint);width:18px;height:18px;flex:none;transition:transform .2s var(--ease-spring), color .15s}
.star-btn:hover{transform:scale(1.2)}
.star-btn.on{color:var(--mail)}
.star-btn svg{width:16px;height:16px}
.thread .t-main{flex:1;min-width:0}
.thread .t-top{display:flex;align-items:baseline;gap:8px}
.thread .from{font-weight:650; font-size:12px; color:var(--ink-soft); flex:1; min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread .tcount{font-size:11px;color:var(--ink-faint);font-weight:800}
.thread .when{font-size:9px; color:var(--ink-faint); font-weight:600; flex:none}
.thread .subj{font-size:12px; color:var(--ink); margin-top:3px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-weight:650}
.thread .snip{font-size:10px; color:var(--ink-faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500}
.thread.unread .from,.thread.unread .subj{font-weight:800;color:var(--ink)}
.thread.unread .when{color:var(--mail-ink);font-weight:800}
.sender-avatar{width:34px;height:34px;border-radius:10px;background:#ede8f4;color:#56486a;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}
.sender-avatar.gmail{background:var(--cal-bg);color:var(--cal-ink)}
.unread-indicator{width:6px;height:6px;border-radius:50%;background:var(--mail);flex:none;align-self:center}
.thread .t-badges{display:flex;gap:5px;align-items:center;margin-top:3px}
.badge{
  font-size:9.5px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;
  border-radius:6px;padding:1.5px 6px;
}
.badge.gmail{background:var(--cal-bg);color:var(--cal-ink)}
.badge.raven{background:var(--mail-bg);color:var(--mail-ink)}
.badge.snooze{background:var(--docs-bg);color:var(--docs-ink)}
.clip{width:13px;height:13px;color:var(--ink-faint)}
.dot-unread{width:8px;height:8px;border-radius:99px;background:var(--unread-dot);flex:none;margin-top:8px}
.dot-unread.off{background:transparent}

.load-more{margin:14px auto;display:block}

/* Empty / loading / error states */
.state-box{
  padding:60px 24px; text-align:center; color:var(--ink-faint);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.state-box svg{width:44px;height:44px;opacity:.5}
.state-box .big{font-size:15px;font-weight:800;color:var(--ink-soft)}
.state-box .small{font-size:12.5px}
.spinner{
  width:26px;height:26px;border-radius:50%;
  border:3px solid var(--border); border-top-color:var(--mail);
  animation:spin .8s linear infinite; margin:40px auto;
}
@keyframes spin{to{transform:rotate(360deg)}}
.raven-loader{padding:42px 24px;text-align:center;color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:8px}
.raven-loader-flight{display:block;width:120px;animation:raven-loader-glide 2.2s ease-in-out infinite}
.raven-loader img{display:block;width:100%;height:auto;transform-origin:55% 53%;filter:brightness(1.55) saturate(1.9) contrast(1.06) drop-shadow(0 12px 16px rgba(94,38,186,.3));animation:raven-wingbeat 1.4s ease-in-out infinite}
.raven-loader strong{font-size:13px;color:var(--ink-soft)}
.raven-loader span{font-size:11px}
@keyframes raven-loader-glide{0%,100%{transform:translate3d(-7px,2px,0) rotate(-1deg)}50%{transform:translate3d(8px,-3px,0) rotate(1deg)}}

/* Message-to-raven send transition. Coordinates are supplied by app.js. */
#send-flight-layer{position:fixed;inset:0;pointer-events:none;z-index:900;overflow:hidden}
.compose-card.send-morph{transform-origin:75% 100%;animation:compose-morph .68s var(--ease-out) both}
.searchwrap.flight-arrival::after{content:"";position:absolute;inset:4px;border:1px solid rgba(130,72,255,.6);border-radius:17px;animation:arrival-pulse .65s ease-out both;pointer-events:none}
@keyframes compose-morph{to{opacity:.08;transform:scale(.74) translate(18%,8%);filter:hue-rotate(35deg)}}
@keyframes arrival-pulse{0%{opacity:0;box-shadow:0 0 0 0 rgba(130,72,255,.45)}25%{opacity:1}100%{opacity:0;box-shadow:0 0 0 18px rgba(130,72,255,0)}}

.banner{
  position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:400;
  background:var(--ink); color:var(--bg); border-radius:var(--radius-pill);
  padding:11px 20px; font-size:13px; font-weight:800; box-shadow:var(--shadow-lift);
  display:flex; align-items:center; gap:14px; max-width:min(92vw,560px);
}
.banner button{color:var(--mail); font-weight:900; flex:none}
.banner.warn{background:var(--danger)}
.banner.warn button{color:#fff}

/* ================= Reader ================= */
.reader-pane{flex:1; min-width:0; overflow-y:auto; background:var(--workspace-bg); display:flex; flex-direction:column;position:relative}
.reader-toolbar{
  display:flex; align-items:center; gap:3px; padding:10px 18px;min-height:64px;
  border-bottom:1px solid var(--border); background:var(--panel);
  position:sticky; top:0; z-index:10; flex-wrap:wrap;
}
.reader-toolbar .spacer{flex:1}
.reader-body{padding:28px clamp(22px,3vw,48px) 60px; max-width:920px;width:100%;margin:0 auto}
.reader-kicker{font-size:9px;font-weight:800;color:var(--mail-ink);letter-spacing:1.3px;text-transform:uppercase;margin-bottom:9px}
.reader-subject{font-size:clamp(25px,2.2vw,34px);font-weight:800;letter-spacing:-1.1px;margin:0 0 18px;line-height:1.15;overflow-wrap:anywhere}
.reader-subject .badge{vertical-align:3px;margin-left:8px}
.msg-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  margin-top:10px; overflow:hidden;box-shadow:var(--shadow-soft);
}
.msg-head{
  display:flex; align-items:flex-start; gap:12px; padding:14px 18px; cursor:pointer;
}
.msg-avatar{
  width:39px;height:39px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:900;font-size:13px;
  background:linear-gradient(135deg,#8266ee,#1f93f2);
}
.msg-head .who{flex:1;min-width:0}
.msg-head .who .name{font-weight:900;font-size:13.5px;overflow-wrap:anywhere}
.msg-head .who .addr{font-weight:600;font-size:12px;color:var(--ink-faint);overflow-wrap:anywhere}
.msg-head .who .tofield{font-weight:600;font-size:11.5px;color:var(--ink-faint);margin-top:1px}
.msg-head .when{font-size:11.5px;color:var(--ink-faint);font-weight:700;flex:none;text-align:right}
@media(max-width:600px){
  .msg-head{display:grid;grid-template-columns:39px minmax(0,1fr);gap:5px 12px}
  .msg-head .msg-avatar{grid-row:1 / 3}
  .msg-head .when{grid-column:2;text-align:left;font-size:10.5px}
}
.msg-collapsed-snip{padding:0 18px 13px 68px;font-size:12.5px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-6px}
.msg-body{padding:10px 24px 22px 70px; font-size:13px; line-height:1.7; overflow-x:auto}
.msg-body img{max-width:100%;height:auto}
.msg-body a{color:var(--cal-ink)}
.msg-body blockquote{border-left:3px solid var(--border);margin:8px 0;padding:2px 14px;color:var(--ink-soft)}
.msg-body pre{background:var(--panel-2);border-radius:10px;padding:12px;overflow-x:auto}
.msg-plain{white-space:pre-wrap;overflow-wrap:anywhere}
.img-banner{
  margin:0 20px 10px 68px; background:var(--panel-2); border-radius:10px;
  padding:8px 14px; font-size:12px; font-weight:700; color:var(--ink-soft);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.img-banner button{color:var(--mail-ink);font-weight:900}
.attach-row{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 20px 70px}
.attach-chip{
  display:flex;align-items:center;gap:8px;
  background:var(--panel-2); border:1px solid var(--border); border-radius:9px;
  padding:10px 13px; font-size:11px; font-weight:750; color:var(--ink);
  text-decoration:none; max-width:260px;
}
.attach-chip:hover{background:var(--panel-3)}
.attach-chip svg{width:15px;height:15px;color:var(--mail);flex:none}
.attach-chip .asize{color:var(--ink-faint);font-weight:700;font-size:11px;flex:none}
.attach-chip .aname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Inbox overview */
.list-overview{margin:13px 13px 10px;padding:14px 15px;border-radius:12px;background:#19171c;color:#fff;position:relative;overflow:hidden;min-height:84px;flex:none}
.list-overview::after{content:"";position:absolute;width:145px;height:145px;right:-58px;top:-48px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 23px rgba(255,255,255,.025)}
.overview-date{font-size:9px;font-weight:800;color:var(--mail);letter-spacing:1.2px;text-transform:uppercase;position:relative;z-index:1}
.overview-title{font-size:15px;font-weight:750;letter-spacing:-.3px;margin-top:8px;position:relative;z-index:1}
.overview-meta{font-size:10px;color:#aaa4b0;margin-top:7px;position:relative;z-index:1}

/* Empty-reader landing state */
.reader-welcome{flex:1;min-height:520px;display:grid;place-items:center;padding:34px;position:relative;overflow:hidden}
.reader-welcome::after{content:"";position:absolute;width:min(520px,70%);aspect-ratio:1;right:-80px;bottom:-185px;background:url('assets/raven-icon-512.png?v=7') center/contain no-repeat;opacity:.055;pointer-events:none}
.welcome-inner{width:min(620px,100%);position:relative;z-index:1}
.welcome-eyebrow{font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--mail-ink)}
.welcome-inner h1{font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-2px;margin:10px 0 13px;font-weight:800}
.welcome-inner>p{font-size:13px;line-height:1.6;color:var(--ink-soft);margin:0 0 24px;max-width:470px}
.welcome-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border);border-bottom:1px solid var(--border);max-width:560px}
.welcome-stat{padding:15px 16px 15px 0}
.welcome-stat+.welcome-stat{padding-left:16px;border-left:1px solid var(--border)}
.welcome-stat strong{display:block;font-size:20px;line-height:1;font-weight:800;letter-spacing:-.6px}
.welcome-stat span{display:block;font-size:9px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-top:7px}
.welcome-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.shortcut{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--ink-faint)}
.shortcut kbd{min-width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--border);border-radius:6px;background:var(--panel);font:700 10px Inter,sans-serif;color:var(--ink)}

/* Live thread context */
.context-pane{width:260px;flex:none;background:var(--panel);border-left:1px solid var(--border);padding:16px 14px;overflow-y:auto}
.context-heading{font-size:9px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-faint);margin:6px 2px 10px}
.context-card{border:1px solid var(--border);border-radius:10px;padding:13px;margin-bottom:10px;background:var(--panel)}
.context-card h3{font-size:11px;margin:0 0 10px;display:flex;align-items:center;gap:7px;font-weight:800}
.context-card h3 svg{width:14px;height:14px;color:var(--mail);stroke-width:1.8}
.context-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:9px;color:var(--ink-faint)}
.context-row strong{font-size:9px;color:var(--ink);margin-left:auto;text-align:right;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.context-person{display:flex;align-items:center;gap:8px;padding:6px 0;min-width:0}
.context-avatar{width:28px;height:28px;border-radius:8px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;flex:none}
.context-person-copy{min-width:0}.context-person-copy strong{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.context-person-copy span{display:block;font-size:8px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.context-secure{display:flex;align-items:center;gap:8px;color:var(--drive-ink);font-size:9px;font-weight:700;line-height:1.45}.context-secure svg{width:15px;height:15px;flex:none}
[data-theme="dark"] .list-overview{background:linear-gradient(135deg,#21172d,#10141d);border:1px solid #332841}
[data-theme="dark"] .reader-welcome::after{opacity:.08}

/* ================= Compose ================= */
.compose-card{
  position:fixed; right:24px; bottom:0; width:520px; height:min(600px,calc(100dvh - 92px)); max-width:calc(100vw - 32px);
  background:var(--panel); border:1px solid var(--border); border-bottom:none;
  border-radius:16px 16px 0 0; box-shadow:var(--shadow-lift); z-index:300;
  display:flex; flex-direction:column; max-height:calc(100dvh - 92px);
}
.compose-head{
  display:flex;align-items:center;gap:8px;
  background:var(--ink); color:var(--bg);
  border-radius:15px 15px 0 0; padding:10px 16px;
  font-size:13px; font-weight:900; cursor:pointer;
}
[data-theme="dark"] .compose-head{background:var(--panel-3);color:var(--ink)}
.compose-head .spacer{flex:1}
.compose-head .icon-btn{color:inherit;width:28px;height:28px}
.compose-head .icon-btn:hover{background:rgba(255,255,255,.15);transform:none}
.compose-fields{padding:4px 16px 0;display:flex;flex-direction:column}
.addr-line{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border);padding:7px 0;flex-wrap:wrap;position:relative}
.addr-line .lbl{font-size:12px;font-weight:800;color:var(--ink-faint);flex:none;width:34px}
.addr-line input{border:none;outline:none;background:none;flex:1;min-width:120px;font-size:13px;font-weight:700;color:var(--ink)}
.addr-line .ccbcc{font-size:11.5px;font-weight:800;color:var(--ink-faint);cursor:pointer;flex:none}
.addr-line .ccbcc:hover{color:var(--ink)}
.chip-addr{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--panel-2);border:1px solid var(--border);border-radius:99px;
  padding:2.5px 5px 2.5px 10px;font-size:12px;font-weight:800;max-width:230px;
}
.chip-addr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-addr button{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-faint)}
.chip-addr button:hover{background:var(--panel-3);color:var(--ink)}
.chip-addr button svg{width:10px;height:10px}
.ac-pop{
  position:absolute; top:100%; left:34px; right:0; z-index:20;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-lift); max-height:210px; overflow-y:auto; padding:4px;
}
.ac-pop button{display:flex;align-items:center;width:100%;text-align:left;padding:7px 9px;border-radius:8px;gap:10px;min-width:0}
.ac-pop button:hover,.ac-pop button.sel{background:var(--hover)}
.ac-pop .ac-main{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}
.ac-pop .acn{font-size:12.5px;font-weight:800}
.ac-pop .aca{font-size:11.5px;color:var(--ink-faint);font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-source{flex:none;font-size:8px;font-weight:900;letter-spacing:.45px;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--border);border-radius:5px;padding:3px 5px;background:var(--panel)}
.ac-source.company{color:var(--mail-ink);border-color:rgba(238,155,15,.3);background:var(--mail-bg)}
.ac-source.saved{color:var(--drive-ink);background:var(--drive-bg)}
.subj-line input{border:none;outline:none;background:none;width:100%;font-size:13.5px;font-weight:800;color:var(--ink);padding:9px 0;border-bottom:1px solid var(--border)}
.compose-editor{
  flex:1; min-height:160px; overflow-y:auto; outline:none;
  padding:14px 16px; font-size:13.5px; line-height:1.55; font-weight:600;
}
.compose-editor:empty::before{content:attr(data-ph);color:var(--ink-faint)}
.compose-editor blockquote{border-left:3px solid var(--border);margin:8px 0;padding:2px 12px;color:var(--ink-soft)}
.compose-attach-list{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px}
.compose-foot{
  display:flex;align-items:center;gap:6px;padding:10px 14px;border-top:1px solid var(--border);flex-wrap:wrap;
}
.fmt-btn{
  width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);flex:none;
}
.fmt-btn:hover{background:var(--hover);color:var(--ink)}
.fmt-btn svg{width:15px;height:15px}
.template-button{width:auto;padding:0 8px;gap:5px;color:var(--mail-ink);background:var(--mail-bg);font-size:10px;font-weight:900;letter-spacing:.2px}
.template-button:hover{background:#fae6bc;color:#68430a}
.compose-foot .spacer{flex:1}
.draft-note{font-size:11px;color:var(--ink-faint);font-weight:700}

/* Company template picker lives inside compose so it remains usable at every viewport. */
.template-picker{position:absolute;inset:0;z-index:5;background:var(--panel);border-radius:16px 16px 0 0;display:flex;flex-direction:column;overflow:hidden;color:var(--ink)}
.template-picker-head{display:flex;align-items:center;gap:12px;padding:14px 16px 11px;border-bottom:1px solid var(--border);background:var(--panel)}
.template-picker-head>div{min-width:0;flex:1}.template-picker-head h2{font-size:17px;line-height:1.1;margin:2px 0 0;font-weight:900;letter-spacing:-.25px}.template-kicker{display:block;color:var(--mail-ink);font-size:8.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.template-search{margin:10px 14px 7px;border:1px solid var(--border);background:var(--panel-2);border-radius:9px;display:flex;align-items:center;min-height:37px}
.template-search input{border:0;background:transparent;outline:0;color:var(--ink);width:100%;padding:8px 11px;font-size:12.5px;font-weight:700}
.template-categories{display:flex;gap:5px;padding:0 14px 9px;overflow-x:auto;scrollbar-width:none}.template-categories::-webkit-scrollbar{display:none}.template-categories button{flex:none;border:1px solid var(--border);border-radius:7px;padding:5px 8px;color:var(--ink-soft);font-size:9px;font-weight:850;background:var(--panel)}.template-categories button:hover,.template-categories button.active{border-color:var(--mail);background:var(--mail-bg);color:var(--mail-ink)}
.template-workspace{min-height:0;flex:1;display:grid;grid-template-columns:minmax(172px,.78fr) minmax(0,1.22fr);border-top:1px solid var(--border)}
.template-list{overflow-y:auto;padding:8px;border-right:1px solid var(--border);background:var(--panel-2)}
.template-card{width:100%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:3px;padding:10px;border:1px solid transparent;border-radius:9px;margin-bottom:5px;background:var(--panel)}.template-card:hover,.template-card.active{border-color:rgba(238,155,15,.55);box-shadow:0 3px 12px rgba(35,25,18,.07)}.template-card.active{background:var(--mail-bg)}.template-card>span{font-size:7.5px;color:var(--mail-ink);font-weight:900;letter-spacing:.7px;text-transform:uppercase}.template-card strong{font-size:11.5px;line-height:1.2}.template-card small{font-size:9px;line-height:1.35;color:var(--ink-faint)}
.template-detail{min-width:0;overflow-y:auto;background:var(--panel)}
.template-empty,.template-error,.template-loading,.template-no-results{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--ink-faint);gap:7px}.template-empty strong,.template-error strong,.template-no-results strong{color:var(--ink);font-size:13px}.template-empty span,.template-error span,.template-no-results span{font-size:10px;line-height:1.45}.template-loading{flex:1;min-height:240px;font-size:11px;font-weight:800}.template-no-results{min-height:180px}
.template-form{min-height:100%;display:flex;flex-direction:column}.template-detail-head{padding:14px 14px 11px;border-bottom:1px solid var(--border)}.template-detail-head>span{font-size:8px;text-transform:uppercase;letter-spacing:.8px;color:var(--mail-ink);font-weight:900}.template-detail-head h3{font-size:16px;margin:3px 0 4px;line-height:1.2}.template-detail-head p{font-size:10px;line-height:1.4;color:var(--ink-soft);margin:0 0 6px}.template-detail-head small{font-size:8.5px;color:var(--ink-faint);font-weight:700}
.template-subject-preview{display:flex;flex-direction:column;gap:3px;padding:9px 14px;background:var(--panel-2);border-bottom:1px solid var(--border)}.template-subject-preview span{font-size:7.5px;font-weight:900;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-faint)}.template-subject-preview strong{font-size:10px;line-height:1.35;overflow-wrap:anywhere}
.template-fields{padding:11px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.template-fields label{display:flex;flex-direction:column;gap:4px;min-width:0}.template-fields label:has(textarea){grid-column:1/-1}.template-fields label>span{font-size:8.5px;font-weight:850;color:var(--ink-soft)}.template-fields input,.template-fields textarea{width:100%;border:1px solid var(--border);border-radius:7px;background:var(--panel-2);color:var(--ink);font:650 10px/1.35 inherit;padding:7px 8px;outline:none;resize:vertical;min-width:0}.template-fields input:focus,.template-fields textarea:focus{border-color:var(--mail);box-shadow:0 0 0 2px var(--mail-bg)}.template-fields label small{font-size:7.5px;line-height:1.25;color:var(--ink-faint)}
.template-actions{position:sticky;bottom:0;margin-top:auto;display:flex;justify-content:flex-end;gap:7px;padding:10px 14px;border-top:1px solid var(--border);background:rgba(255,255,255,.96);backdrop-filter:blur(8px)}[data-theme="dark"] .template-actions{background:rgba(32,31,36,.96)}.template-actions .btn-primary,.template-actions .btn-ghost{font-size:10px;padding:8px 11px;border-radius:7px}

/* ================= Settings ================= */
.settings-pane{flex:1;overflow-y:auto;background:var(--bg)}
.settings-inner{max-width:760px;padding:26px 30px 80px}
.settings-inner h1{font-size:22px;font-weight:900;margin:0 0 4px}
.settings-inner .sub{color:var(--ink-soft);font-size:13px;margin-bottom:22px}
.set-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:20px 22px;margin-bottom:16px;display:flex;flex-direction:column;gap:14px;
}
.set-card h2{font-size:14.5px;font-weight:900;margin:0;display:flex;align-items:center;gap:9px}
.set-card h2 svg{width:16px;height:16px;color:var(--mail)}
.set-card .desc{font-size:12.5px;color:var(--ink-soft);margin-top:-8px}
.set-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.set-row .field{flex:1;min-width:200px}
.switch{
  width:42px;height:24px;border-radius:99px;background:var(--border);position:relative;flex:none;
  transition:background .2s;
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--panel);box-shadow:var(--shadow-soft);transition:left .2s var(--ease-out);
}
.switch.on{background:var(--mail)}
.switch.on::after{left:21px}
.filter-row{
  display:grid;grid-template-columns:repeat(3,1fr) auto;gap:8px;align-items:center;
  background:var(--panel-2);border-radius:12px;padding:10px 12px;
}
.filter-row .arrow{font-weight:900;color:var(--ink-faint)}
.sig-editor{
  border:1.5px solid var(--border);border-radius:12px;background:var(--panel-2);
  min-height:80px;padding:10px 14px;font-size:13px;outline:none;line-height:1.5;
}
.sig-editor:focus{border-color:var(--mail)}
.sig-tools{display:flex;align-items:center;gap:5px;margin-bottom:-8px}
.sig-preview{border-left:3px solid var(--mail);background:var(--panel-2);padding:12px 14px;border-radius:0 10px 10px 0;font-size:12px;color:var(--ink-soft)}
.sig-preview:empty::before{content:"Your signature preview appears here.";color:var(--ink-faint)}
.note-ok{font-size:12px;color:var(--drive-ink);font-weight:800}
.note-warn{font-size:12px;color:var(--sheets-ink);font-weight:800}

/* ================= Responsive ================= */
.scrim{position:fixed;inset:0;background:rgba(20,15,25,.4);z-index:90;display:none}
.back-btn{display:none}
@media (max-width:1360px){
  .context-pane{display:none}
}
@media (max-width:1100px){
  .list-pane{flex:1}
  .reader-pane,.settings-pane{
    position:absolute; inset:0; z-index:40; display:none;
  }
  .reader-pane.open,.settings-pane.open{display:flex}
  .settings-pane.open{display:block}
  .back-btn{display:flex}
}
@media (max-width:900px){
  .app-brand{width:auto}
  .acct-toggle{display:none}
  .search .kbd{display:none}
}
@media (max-width:768px){
  .rail{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; height:58px; z-index:80;
    flex-direction:row; justify-content:space-around;
    padding:6px 8px; border-right:none; border-top:1px solid var(--border);
  }
  .rail-tooltip{display:none}
  .body{padding-bottom:58px}
  .sidebar{
    position:fixed; top:68px; bottom:58px; left:0; z-index:100; width:250px;
    transform:translateX(-105%); transition:transform .25s var(--ease-out);
    box-shadow:var(--shadow-lift);
  }
  .sidebar.open{transform:translateX(0)}
  .scrim.show{display:block}
  .topbar{gap:8px;padding:0 10px}
  .app-brand-mark{width:36px;height:36px;border-radius:10px}
  .app-brand-name{font-size:16px}
  .app-brand-kind{font-size:7.5px;letter-spacing:1px}
  .search{height:36px;padding:6px 10px}
  .reader-body{padding:20px 14px 60px}
  .reader-subject{font-size:24px;letter-spacing:-.7px}
  .compose-card{right:0;left:0;width:100vw;height:92dvh;max-width:100vw;max-height:92dvh;border-radius:16px 16px 0 0}
  .template-workspace{grid-template-columns:1fr}
  .template-list{border-right:0;max-height:34%;border-bottom:1px solid var(--border)}
  .template-detail{min-height:0}
  .template-fields{grid-template-columns:1fr}
  .template-fields label:has(textarea){grid-column:auto}
  .template-button span{display:none}
  .template-button{width:30px;padding:0}
  .msg-body,.img-banner,.attach-row,.msg-collapsed-snip{padding-left:18px;margin-left:0}
  .img-banner{margin:0 18px 10px}
  .settings-inner{padding:20px 16px 80px}
  .filter-row{grid-template-columns:1fr}
}
@media (max-width:760px){
  .login-wrap{align-items:flex-start;padding:0;background:var(--panel)}
  .login-shell{display:block;min-height:100dvh;border:0;border-radius:0;box-shadow:none}
  .login-visual{min-height:250px}
  .raven-hero{width:330px;bottom:-52px}
  .splash-owner{top:18px;left:20px}
  .splash-copy{left:22px;right:22px;bottom:18px}
  .splash-name{font-size:38px;letter-spacing:-1px}
  .splash-rule{margin:9px 0 7px}
  .splash-copy p{font-size:11.5px}
  .login-card{padding:34px 24px 28px;min-height:calc(100dvh - 250px);justify-content:flex-start}
  .login-card::before{inset:0 0 auto;width:auto;height:3px}
  .login-card h1{font-size:25px}
  .boot-raven-flight{width:112vw;max-width:560px}
  .boot-wordmark{margin-top:-4vh}
  .password-rules{grid-template-columns:1fr}
}
@media (max-width:420px){
  .status-pill{display:none}
  .list-toolbar .title{font-size:14px}
  .thread{padding:10px 10px 10px 7px;grid-template-columns:18px 32px minmax(0,1fr);gap:7px}
  .sender-avatar{width:32px;height:32px;border-radius:9px}
  .app-brand-kind{display:none}
  .search input{font-size:12px}
  .list-overview{margin:10px;min-height:76px}
  .compose-foot{padding:8px;gap:3px}.fmt-btn{width:28px;height:28px}.compose-foot .btn-primary{padding:9px 14px}
  .template-picker-head{padding:12px}.template-search{margin-left:10px;margin-right:10px}.template-categories{padding-left:10px;padding-right:10px}.template-list{padding:6px}.template-fields{padding:10px}.template-actions{padding:8px 10px}
}

/* print */
@media print{
  body{overflow:visible;height:auto}
  .topbar,.rail,.sidebar,.list-pane,.reader-toolbar,.compose-card,.banner{display:none!important}
  .reader-pane{position:static!important;display:block!important;overflow:visible}
  .msg-card{border:none}
  #app{height:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.unsubscribe-link{font-size:12px;text-decoration:underline;color:var(--accent-ink);margin-left:12px;padding:5px 0;white-space:nowrap}
.unsubscribe-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;box-sizing:border-box;border:1px solid var(--border);border-radius:16px;padding:26px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow-lift)}
.unsubscribe-dialog::backdrop{background:#08050d88}
.unsubscribe-dialog h2{font-size:20px;line-height:1.35;margin:0 0 12px;overflow-wrap:anywhere}
.unsubscribe-dialog p{font-size:13px;line-height:1.6;color:var(--ink-soft);overflow-wrap:anywhere}
.unsubscribe-options section{border-top:1px solid var(--border);padding:18px 0 6px}.unsubscribe-options strong{font-size:14px}.unsubscribe-options .btn-primary{display:inline-flex;text-decoration:none}
.unsubscribe-footer{display:flex;justify-content:flex-end;margin-top:20px}.unsubscribe-status:empty{display:none}.unsubscribe-status{border-left:3px solid var(--accent);padding-left:12px}
.unsubscribe-link:focus-visible,.unsubscribe-dialog a:focus-visible,.unsubscribe-dialog button:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
[data-mail-activate]:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px;border-radius:4px}
@media(max-width:900px){.banner{bottom:76px}body:has(.compose-card:not(.hidden)) .banner{bottom:auto;top:80px}}