/* ============================================================
   Business Webmail — design system v2
   Modern indigo palette · soft layered surfaces · rounded cards
   ============================================================ */

:root {
  /* palette */
  --bg: #f2f4fa;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #eef0f8;
  --border: #e3e6f0;
  --border-d: #cdd2e3;
  --text: #1e2033;
  --text-2: #3d415e;
  --muted: #6b7089;
  --primary: #4f46e5;
  --primary-d: #4338ca;
  --primary-x: #3730a3;
  --primary-l: #5a51eb;
  --primary-soft: #e4e5ff;
  --primary-softer: #eff0ff;
  --primary-glow: rgba(79, 70, 229, .14);
  --primary-shadow: rgba(79, 70, 229, .35);
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --ok: #16a34a;
  --ok-soft: #dcfce7;
  --warn: #b45309;
  --warn-soft: #fef3c7;

  /* shape + depth */
  --radius: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow: 0 1px 2px rgba(30, 32, 51, .05), 0 2px 8px rgba(30, 32, 51, .05);
  --shadow-md: 0 4px 14px rgba(30, 32, 51, .08), 0 1px 3px rgba(30, 32, 51, .06);
  --shadow-lg: 0 16px 40px rgba(30, 32, 51, .18), 0 4px 12px rgba(30, 32, 51, .08);

  /* metrics */
  --sidebar-w: 268px;
  --list-w: 408px;
  --topbar-h: 54px;
  --rail-w: 64px;

  font-size: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui,
    -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--primary-soft); color: var(--primary-x); }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: .4rem 0 1rem; letter-spacing: -.02em; }
h2 { font-size: 1.1rem; margin: 1.2rem 0 .6rem; letter-spacing: -.01em; }
code { background: var(--surface-3); padding: .1em .4em; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.small { font-size: .8rem; }
.muted.small { color: var(--muted); }
.link { background: none; border: 0; color: var(--primary); cursor: pointer; padding: 0; font-size: inherit; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem 1rem; border: 1px solid var(--border-d);
  background: var(--surface); color: var(--text); border-radius: var(--radius);
  cursor: pointer; font-size: .88rem; font-weight: 600; line-height: 1.3; text-align: center;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(30, 32, 51, .05);
  transition: background .14s ease, box-shadow .14s ease, border-color .14s ease, transform .06s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; border-color: #b9c0d8; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--primary-l), var(--primary)); border-color: var(--primary); color: #fff;
  box-shadow: 0 1px 3px var(--primary-shadow), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--primary), var(--primary-d)); border-color: var(--primary-d); }
.btn-primary:active { background: var(--primary-x); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-danger-outline { color: var(--danger); border-color: #f3b8bc; }
.btn-danger-outline:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-sm { padding: .3rem .65rem; font-size: .82rem; border-radius: 7px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; box-shadow: none; }
.icon-btn {
  background: none; border: 0; cursor: pointer; font-size: 1.05rem;
  padding: .42rem .58rem; border-radius: var(--radius); color: var(--muted); line-height: 1;
  font-family: inherit;
  transition: background .14s ease, color .14s ease;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn:active { background: var(--border); }

/* Outlook-style list filter button */
.filter-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; cursor: pointer; font-size: .82rem; font-weight: 600;
  padding: .4rem .55rem; border-radius: var(--radius); color: var(--muted);
  font-family: inherit; line-height: 1;
  transition: background .14s ease, color .14s ease;
}
.filter-btn:hover { background: var(--surface-3); color: var(--text); }
.filter-btn.on { color: var(--primary); background: var(--primary-soft); }

/* Accessible focus ring */
button:focus-visible, a:focus-visible, .folder-item:focus-visible,
.chat-room:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px;
}

/* ---------------- Forms ---------------- */
.field { display: block; margin: .7rem 0; }
.field > span { display: block; font-size: .8rem; font-weight: 600; color: var(--text-2); margin-bottom: .3rem; }
.field input, .field select, .field textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="number"], select, textarea {
  width: 100%; padding: .55rem .75rem; border: 1px solid var(--border-d);
  border-radius: var(--radius); font-size: .9rem; font-family: inherit;
  background: var(--surface); color: var(--text);
  transition: border-color .14s ease, box-shadow .14s ease;
}
input, select, textarea { transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
input:focus, select:focus, textarea:focus, [contenteditable]:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.check { display: flex; align-items: center; gap: .5rem; margin: .6rem 0; font-size: .88rem; }
.check input { width: auto; accent-color: var(--primary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

.alert { padding: .65rem .9rem; border-radius: var(--radius); margin: .6rem 0; font-size: .88rem; }
.alert-error { background: var(--danger-soft); color: #991b1b; border: 1px solid #fecaca; }
.alert-ok { background: var(--ok-soft); color: #166534; border: 1px solid #bbf7d0; }

.badge { display: inline-block; padding: .15em .6em; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--surface-3); color: var(--text-2); }
.badge-ok { background: var(--ok-soft); color: #166534; }
.badge-err { background: var(--danger-soft); color: #991b1b; }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-info { background: var(--border); color: var(--muted); }
.badge-ok, .badge-err, .badge-warn, .badge-info { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-assign { background: #e0e7ff; color: #3730a3; }
.badge-reply { background: var(--ok-soft); color: #166534; }
body.dark .badge-assign { background: rgba(99,102,241,.2); color: #c7d2fe; }
body.dark .badge-reply { background: rgba(34,197,94,.16); color: #86efac; }
.thread-flags { display: flex; gap: .5rem; padding: 0 1.2rem .4rem; }
.stat-ok { color: var(--ok); font-weight: 600; }
.stat-warn-text { color: var(--warn); font-weight: 600; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem; box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.table th, .table td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--border); font-size: .86rem; vertical-align: top; }
.table th { background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }

/* ============================================================
   LOGIN — split hero
   ============================================================ */
.plain-page { min-height: 100vh; -webkit-font-smoothing: antialiased; }
.login-split { display: grid; grid-template-columns: minmax(420px, 46%) 1fr; min-height: 100vh; }

/* brand side */
.login-side {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(155deg, #081d3d 0%, #0b3a75 48%, #1256a8 82%, #1c6fd1 100%);
}
.login-side::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 25% 15%, #000 25%, transparent 72%);
}
.login-side-glow {
  position: absolute; width: 560px; height: 560px; border-radius: 50%;
  right: -180px; bottom: -200px; pointer-events: none;
  background: radial-gradient(circle, rgba(228, 35, 19, .32), transparent 65%);
}
.login-side-inner {
  position: relative; z-index: 1; height: 100%; padding: 2.8rem 3.2rem;
  display: flex; flex-direction: column;
}
.login-side-logo { display: flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.login-side-mark {
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
}
.login-side-mark-brand { width: auto; height: 34px; padding: 0 .6rem; background: #fff; border-color: rgba(255,255,255,.6); }
.login-side-mark-brand img { display: block; }
.login-side-copy { margin-top: auto; padding-bottom: 1rem; }
.login-side-copy h2 { font-size: 2.3rem; line-height: 1.15; font-weight: 650; letter-spacing: -.03em; margin: 0 0 1.1rem; }
.login-side-copy p { color: rgba(255, 255, 255, .74); font-size: 1rem; line-height: 1.65; max-width: 30rem; margin: 0 0 1.8rem; }
.login-side-points { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.7rem; flex-wrap: wrap; }
.login-side-points li { position: relative; padding-left: 1.15rem; font-size: .84rem; color: rgba(255, 255, 255, .85); }
.login-side-points li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .44em; height: .44em; border-radius: 2px; background: #8fc1f0;
}

/* abstract product art — skeleton window, no real data */
.login-art {
  order: 2; flex: 1; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 260px; margin: 1.5rem 0;
}
.login-side-copy { order: 3; margin-top: 0; padding-bottom: 0; }
.la-orb { position: absolute; border-radius: 50%; filter: blur(42px); pointer-events: none; }
.la-orb-1 {
  width: 240px; height: 240px; top: -30px; right: 6%;
  background: radial-gradient(circle, rgba(143, 193, 240, .5), transparent 70%);
  animation: la-float 9s ease-in-out infinite;
}
.la-orb-2 {
  width: 200px; height: 200px; bottom: 6%; left: 2%;
  background: radial-gradient(circle, rgba(228, 35, 19, .28), transparent 70%);
  animation: la-float 11s ease-in-out infinite reverse;
}
@keyframes la-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
.la-window {
  position: relative; width: min(360px, 88%);
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(14px); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(10, 12, 40, .35);
  animation: la-float 10s ease-in-out infinite;
}
.la-window-bar {
  display: flex; gap: 6px; padding: .65rem .8rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.la-window-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.la-window-bar i:first-child { background: #fca5a5; }
.la-window-bar i:nth-child(2) { background: #fcd34d; }
.la-window-bar i:nth-child(3) { background: #86efac; }
.la-window-body { display: flex; }
.la-rail {
  flex: none; width: 44px; padding: .7rem 0;
  border-right: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
}
.la-rail-i { width: 20px; height: 20px; border-radius: 6px; background: rgba(255, 255, 255, .18); }
.la-rail-i.on { background: #8fc1f0; }
.la-rows { flex: 1; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .55rem; }
.la-row {
  display: flex; align-items: center; gap: .55rem;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px; padding: .55rem .6rem; flex-wrap: wrap;
}
.la-av { width: 26px; height: 26px; border-radius: 50%; flex: none; background: linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.25)); }
.la-ln { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .55); }
.la-ln.thin { height: 6px; background: rgba(255, 255, 255, .28); }
.la-ln.w40 { width: 40%; } .la-ln.w45 { width: 45%; } .la-ln.w50 { width: 50%; }
.la-ln.w55 { width: 55%; } .la-ln.w60 { width: 60%; } .la-ln.w65 { width: 65%; }
.la-ln.w80 { width: 80%; } .la-ln.w85 { width: 85%; } .la-ln.w90 { width: 90%; }
.la-chip {
  position: absolute; right: 4%; bottom: 12%; z-index: 2;
  display: flex; align-items: center; gap: .45rem;
  background: rgba(8, 29, 61, .78); border: 1px solid rgba(143, 193, 240, .4);
  backdrop-filter: blur(8px); border-radius: 999px; padding: .4rem .75rem;
  font-size: .72rem; color: #dcebff;
  box-shadow: 0 10px 24px rgba(5, 16, 36, .4);
  animation: la-float 8s ease-in-out infinite .6s;
}
.la-chip i {
  width: 7px; height: 7px; border-radius: 50%; background: #86efac;
  box-shadow: 0 0 0 0 rgba(134, 239, 172, .6);
  animation: la-pulse 2s infinite;
}
@keyframes la-pulse {
  0% { box-shadow: 0 0 0 0 rgba(134, 239, 172, .55); }
  70% { box-shadow: 0 0 0 8px rgba(134, 239, 172, 0); }
  100% { box-shadow: 0 0 0 0 rgba(134, 239, 172, 0); }
}

/* form side */
.login-panel {
  display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem;
  background: radial-gradient(1000px 500px at 85% -10%, #e7eefb 0%, transparent 60%),
              linear-gradient(180deg, #f4f7fd 0%, #eef1f9 100%);
}
.login-form-inner {
  width: min(370px, 100%);
  background: rgba(255, 255, 255, .82); border: 1px solid rgba(205, 213, 235, .7);
  border-radius: 20px; padding: 2.3rem 2.1rem;
  box-shadow: 0 24px 60px rgba(15, 40, 90, .12), 0 2px 8px rgba(15, 40, 90, .06);
  backdrop-filter: blur(10px);
}
.login-badge-sm {
  width: auto; height: 52px; border-radius: 12px; margin-bottom: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 .8rem;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(15, 40, 90, .1);
}
.login-badge-sm img { display: block; }
.login-form-inner h1 { font-size: 1.65rem; font-weight: 650; letter-spacing: -.025em; margin: 0 0 .35rem; }
.login-sub { color: var(--muted); font-size: .92rem; margin: 0 0 1.8rem; }
.login-form .field { margin: 0 0 1.1rem; }
.login-form input { height: 42px; }
.login-form input:hover { border-color: #9aa0bd; }
.input-icon { position: relative; }
.input-icon input { padding-right: 2.8rem; }
.input-icon .pw-toggle {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: .4rem;
  color: var(--muted); border-radius: 6px; line-height: 0;
}
.input-icon .pw-toggle:hover { color: var(--text); background: var(--surface-3); }
.btn-login {
  display: block; width: 100%; height: 42px; margin-top: .6rem;
  border: 0; border-radius: var(--radius); cursor: pointer;
  background: linear-gradient(180deg, var(--primary-l), var(--primary)); color: #fff;
  font-size: .92rem; font-weight: 600; font-family: inherit;
  box-shadow: 0 2px 6px var(--primary-shadow), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: background .15s, box-shadow .15s, transform .06s;
}
.btn-login:hover { background: linear-gradient(180deg, var(--primary), var(--primary-d)); box-shadow: 0 4px 12px var(--primary-shadow); }
.btn-login:active { background: var(--primary-x); transform: translateY(1px); }
.login-form .check-line {
  display: flex; align-items: center; gap: .55rem; margin: -.3rem 0 .9rem;
  color: var(--muted); font-size: .83rem; cursor: pointer; user-select: none;
}
.login-form .check-line input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); flex: none; }
.btn-login-bio {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--border); box-shadow: none;
}
.btn-login-bio:hover { background: var(--surface-3, var(--hover)); color: var(--ink); box-shadow: none; }
.login-meta {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: 2rem; color: var(--muted); font-size: .78rem;
}
.ios-install-hint {
  margin-top: 1rem; padding: .7rem .9rem; font-size: .82rem; line-height: 1.45;
  background: var(--primary-soft, rgba(79,70,229,.08)); border: 1px solid var(--border);
  border-radius: 10px; color: var(--ink); position: relative;
}
.ios-hint-x {
  position: absolute; top: .25rem; right: .45rem; border: 0; background: none;
  font-size: 1.1rem; color: var(--muted); cursor: pointer; line-height: 1;
}
.login-form-inner .alert { margin: 0 0 1.2rem; }

@media (max-width: 860px) {
  .login-split { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .login-panel { align-items: flex-start; padding-top: 4rem; background: var(--bg); }
  .login-form-inner { background: var(--surface); padding: 2.2rem 1.9rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  display: flex; align-items: center; gap: 1rem; padding: 0 1.1rem 0 1rem;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); z-index: 40;
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1rem; color: var(--text); letter-spacing: -.015em; }
.brand:hover { text-decoration: none; }
.brand-tile {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, var(--primary-l) 0%, var(--primary-x) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px var(--primary-shadow), inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.brand-tile svg { width: 17px; height: 17px; }
.search { flex: 1; max-width: 640px; display: flex; margin: 0 auto; }
.search input {
  border-radius: 999px; background: var(--surface-3); border: 1px solid transparent;
  padding: .5rem 1rem .5rem 1.15rem; font-size: .9rem;
  transition: box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.search input::placeholder { color: var(--muted); }
.search input:hover { border-color: var(--border-d); }
.search input:focus { background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.search .icon-btn { margin-left: -38px; }
.topbar-actions { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.nav-toggle { display: none; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--primary-l), var(--primary-x)); color: #fff;
  font-weight: 700; font-size: .85rem; font-family: inherit;
  transition: box-shadow .15s ease;
}
.avatar:hover { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary-soft); }
.account-menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index: 60; padding: .35rem;
}
.menu-header { padding: .65rem .85rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; margin-bottom: .3rem; gap: .1rem; }
.menu-item { display: block; width: 100%; text-align: left; padding: .55rem .85rem; background: none; border: 0; cursor: pointer; color: var(--text); font-size: .88rem; border-radius: var(--radius); font-family: inherit; }
.menu-item:hover { background: var(--surface-3); text-decoration: none; }
.menu-item.danger { color: var(--danger); }

/* ============================================================
   MAIL LAYOUT
   ============================================================ */
.mail-app { padding-top: var(--topbar-h); height: 100vh; overflow: hidden; }
.mail-layout { display: flex; height: calc(100vh - var(--topbar-h)); }

/* app rail */
.app-rail {
  width: var(--rail-w); flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); padding: .7rem 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
}
.rail-item {
  height: 52px; border: 0; background: none; margin: 0 .45rem;
  cursor: pointer; color: var(--muted); position: relative; border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: inherit;
  transition: background .14s, color .14s;
}
.rail-label { font-size: .62rem; font-weight: 600; line-height: 1; }
.rail-item:hover { background: var(--surface-3); color: var(--text); }
.rail-item.active { color: var(--primary); }
.rail-item.active::before {
  content: ''; position: absolute; left: -.45rem; top: 12px; bottom: 12px;
  width: 3.5px; border-radius: 0 3px 3px 0; background: var(--primary);
}
.rail-badge {
  position: absolute; top: 4px; right: 8px; min-width: 16px; height: 16px;
  border-radius: 8px; background: var(--danger); color: #fff;
  font-size: .65rem; font-weight: 700; line-height: 16px; text-align: center;
  padding: 0 3px; pointer-events: none;
}

/* sidebar */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; padding: 1rem .7rem; overflow-y: auto;
  border-right: 1px solid var(--border); background: var(--surface-2);
}
.compose-btn {
  width: 100%; padding: .65rem; font-weight: 650; margin-bottom: 1rem;
  border-radius: 10px; font-size: .9rem;
}
.mailbox-switcher select { margin-bottom: .7rem; font-size: .86rem; }
.folder-nav { display: flex; flex-direction: column; gap: 2px; }
.folder-item {
  display: flex; align-items: center; gap: .55rem; padding: .46rem .7rem;
  border-radius: var(--radius); cursor: pointer; color: var(--text); font-size: .88rem;
  transition: background .12s ease;
}
.folder-item:hover { background: var(--surface-3); }
.folder-item[style*="--depth"] { padding-left: calc(.55rem + (var(--depth) * .9rem)); }
.folder-item.drop-hover {
  background: var(--primary-soft); outline: 2px dashed var(--primary); outline-offset: -2px;
}
.folder-item.active { background: var(--primary-soft); color: var(--primary-x); font-weight: 650; }
.folder-item.active .count { background: var(--primary); color: #fff; }
.folder-item .count {
  margin-left: auto; font-size: .7rem; color: var(--primary); font-weight: 700;
  background: var(--primary-soft); border-radius: 999px; padding: .12em .55em;
  min-width: 1.7em; text-align: center;
}
.folder-item.active .count, .folder-item.active .fname { color: var(--primary-x); }
.folder-item.active .count { background: var(--primary); color: #fff; }
.folder-item .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-sep {
  font-size: .66rem; text-transform: uppercase; color: var(--muted);
  letter-spacing: .09em; padding: 1rem .7rem .35rem; font-weight: 700;
}
.sidebar-foot { padding: .9rem .7rem; font-size: .76rem; border-top: 1px solid var(--border); margin-top: .9rem; }
.sidebar-overlay { display: none; }
.sidebar-section { padding: .1rem .7rem .4rem; }
.sidebar-mini {
  background: none; border: 0; color: var(--primary); font-size: .82rem;
  cursor: pointer; padding: .25rem 0; text-align: left; font-family: inherit;
}
.sidebar-mini:hover { text-decoration: underline; }
.label-nav .label-dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; flex: none; }
.folder-item .ctx {
  margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer;
  padding: 0 .3rem; font-size: .95rem; line-height: 1; border-radius: 6px; opacity: 0;
}
.folder-item:hover .ctx, .folder-item .ctx:focus { opacity: 1; }
.folder-item .ctx:hover { background: var(--border); color: var(--text); }
/* expand/collapse chevron (Outlook-style tree) */
.twisty {
  flex: none; width: 16px; display: inline-flex; justify-content: center;
  color: var(--muted); font-size: .8rem; cursor: pointer; border-radius: 4px;
  transform: rotate(90deg); transition: transform .15s ease;
}
.twisty:hover { color: var(--text); }
.twisty.col { transform: rotate(0deg); }
.twist-sp { flex: none; width: 16px; }
.nav-prefs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .05rem .8rem; margin-bottom: .8rem;
}
.nav-prefs .check { margin: .28rem 0; }

/* label chips */
.label-chip {
  display: inline-flex; align-items: center; gap: .3em;
  font-size: .68rem; font-weight: 600; line-height: 1;
  padding: .22em .55em; border-radius: 999px; vertical-align: middle;
}
.label-dot-s { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }

/* ============================================================
   MESSAGE LIST
   ============================================================ */
.msg-list-pane {
  width: var(--list-w); flex-shrink: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); background: var(--surface);
}
.list-toolbar {
  display: flex; align-items: center; gap: .15rem; padding: .4rem .7rem;
  border-bottom: 1px solid var(--border); min-height: 46px; background: var(--surface);
}
.list-toolbar .check { margin: 0; }
.list-actions { display: flex; gap: 0; padding: 0 .2rem; border-left: 1px solid var(--border); margin-left: .15rem; }
.list-title { margin-left: auto; font-weight: 650; font-size: .9rem; color: var(--text-2); }
.msg-list { flex: 1; overflow-y: auto; padding: .25rem 0; }
.msg-row {
  display: flex; align-items: center; gap: .65rem; position: relative;
  padding: .6rem .9rem .6rem .7rem; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s ease;
}
/* Hover quick actions — Outlook-style, overlay the date corner */
.msg-qa {
  position: absolute; right: .7rem; top: .55rem; display: none; gap: .15rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: .12rem; box-shadow: var(--shadow);
}
.msg-row:hover .msg-qa { display: flex; }
.msg-row:hover .msg-meta { visibility: hidden; }
.qa-btn {
  border: 0; background: none; cursor: pointer; font-size: .92rem; line-height: 1;
  padding: .3rem .4rem; border-radius: 6px; color: var(--muted);
}
.qa-btn:hover { background: var(--surface-2); color: var(--text); }
.qa-btn.on { color: #f59e0b; }
.msg-row:hover { background: var(--surface-2); }
.msg-row.selected { background: var(--primary-softer); box-shadow: inset 3px 0 0 var(--primary); }
.msg-row.selected.unread { box-shadow: inset 3px 0 0 var(--primary); }
.msg-row.kb { outline: 2px solid var(--primary); outline-offset: -2px; }
.msg-row.unread { background: var(--surface); }
.msg-row.unread .msg-subject, .msg-row.unread .msg-from { font-weight: 700; }
.msg-row.unread .msg-from::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); margin-right: .45em; vertical-align: middle; flex: none;
}
.msg-check { flex: none; margin: 0; }
.msg-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  user-select: none;
}
.msg-main { flex: 1; min-width: 0; }
.msg-line1 { display: flex; align-items: baseline; gap: .5rem; }
.msg-from { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.msg-date { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.msg-subject { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-snippet { font-size: .79rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-meta { display: inline-flex; gap: .3rem; align-items: center; flex: none; }
.msg-star { color: #f59e0b; font-size: .9rem; }
.msg-att { color: var(--muted); font-size: .85rem; }
.msg-count { font-size: .72rem; background: var(--primary-soft); color: var(--primary-x); border-radius: 999px; padding: 0 .5em; font-weight: 650; }
.list-more { padding: .7rem; text-align: center; border-top: 1px solid var(--border); }
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.msg-row[draggable="true"]:active { cursor: grabbing; }

/* Focused / Other segmented control */
.focus-tabs {
  display: flex; gap: .25rem; border-bottom: 1px solid var(--border);
  background: var(--surface); padding: .4rem .7rem;
}
.focus-tab {
  padding: .32rem .9rem; font-size: .82rem; font-weight: 600; color: var(--muted);
  background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.focus-tab:hover { color: var(--text); background: var(--surface-3); }
.focus-tab.active { color: var(--primary-x); background: var(--primary-softer); border-color: var(--primary-soft); }

/* ============================================================
   READING PANE
   ============================================================ */
.reader-pane { flex: 1; overflow-y: auto; background: var(--bg); min-width: 0; }
.reader-empty { display: flex; height: 100%; align-items: center; justify-content: center; }
.reader-toolbar { display: flex; gap: .4rem; align-items: center; padding: .6rem 1rem; }
.reader-toolbar .spacer { flex: 1; }
.reader-toolbar .btn, .reader-toolbar .icon-btn { border-radius: 999px; }

.thread-msg {
  background: var(--surface); margin: .75rem 1rem; border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.thread-msg-head {
  display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; cursor: pointer;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.thread-msg-head:hover { background: var(--surface-2); }
.thread-subject {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em;
  padding: 1rem 1.2rem .35rem; color: var(--text);
}
.who-block { flex: 1; min-width: 0; }
.thread-msg-head .who { font-weight: 650; font-size: .92rem; }
.thread-msg-head .who small { font-weight: 400; color: var(--muted); }
.recip-line { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-msg-head .when { margin-left: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; flex: none; }
.thread-msg.collapsed .thread-msg-body, .thread-msg.collapsed .thread-msg-actions { display: none; }
.msg-hdr {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  padding: .6rem .85rem; margin-bottom: .9rem; font-size: .82rem;
}
.msg-hdr-row { display: flex; gap: .7rem; padding: .14rem 0; }
.msg-hdr-row > span { width: 52px; flex: none; color: var(--muted); font-weight: 600; }
.thread-msg-body { padding: 0 1.1rem 1.1rem; font-size: .92rem; line-height: 1.6; overflow-wrap: break-word; }
.thread-msg-body img { max-width: 100%; height: auto; }
.thread-msg-actions { display: flex; gap: .45rem; padding: 0 1.1rem 1.1rem; flex-wrap: wrap; }
.thread-msg-actions .btn { border-radius: 999px; font-weight: 500; padding: .38rem .9rem; }

/* reader body content */
.message-content {
  padding: 1rem 1.2rem; font-size: .93rem; line-height: 1.65;
  color: var(--text); overflow-x: auto;
}
.message-content p { margin: 0 0 .8em; }
.message-content img { max-width: 100%; height: auto; }
.message-content table { border-collapse: collapse; max-width: 100%; }
.message-content td, .message-content th { padding: .3rem .5rem; }
.message-content blockquote {
  margin: .6rem 0; padding: .2rem .9rem;
  border-left: 3px solid var(--border-d); color: var(--muted);
}
.message-content a { color: var(--primary); }
.message-plain { white-space: pre-wrap; font-family: inherit; }
.message-unavailable {
  margin: 1rem 1.2rem; padding: 1.2rem; text-align: center;
  border: 1px dashed var(--border-d); border-radius: var(--radius);
  color: var(--muted); font-size: .88rem;
}
.thread-msg .att-list { padding: .2rem 0 .9rem; }

/* admin spam monitor */
.spam-filter { display: flex; gap: .6rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.spam-filter select, .spam-filter input {
  padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-size: .88rem;
}
.spam-filter input { min-width: 240px; }
.spam-table .spam-from { font-weight: 600; font-size: .88rem; }
.spam-table .spam-subj { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-pill { background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; padding: .15em .5em; font-size: .8rem; }
.inline-form { display: inline-flex; gap: .35rem; align-items: center; }

/* attachment chips + thumbs */
.att-list { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem .8rem; }
.att-chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .7rem;
  border: 1px solid var(--border); border-radius: var(--radius); font-size: .82rem;
  background: var(--surface-2); color: var(--text);
  transition: border-color .12s ease, background .12s ease;
}
.att-chip:hover { background: var(--primary-softer); border-color: var(--primary); text-decoration: none; color: var(--text); }
.att-chip.att-danger { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
.att-chip.att-danger:hover { background: #fee2e2; border-color: #f87171; color: #991b1b; }
body.dark .att-chip.att-danger { border-color: #7f1d1d; background: rgba(239,68,68,.12); color: #fca5a5; }
body.dark .att-chip.att-danger:hover { background: rgba(239,68,68,.2); border-color: #ef4444; }

/* Outlook-style attachment cards (reader) — compact */
.att-grid { display: flex; flex-wrap: wrap; gap: .4rem; padding: .15rem 0 .8rem; }
.att-card {
  display: flex; align-items: center; gap: .45rem; min-width: 150px; max-width: 215px;
  padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); transition: border-color .12s, box-shadow .12s;
}
.att-card:hover { border-color: var(--primary); box-shadow: 0 1px 4px rgba(15,23,42,.08); }
.att-card.att-danger { border-color: #fca5a5; background: #fef2f2; }
body.dark .att-card.att-danger { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.1); }
.att-card-icon {
  flex: none; width: 28px; height: 28px; border-radius: 6px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .58rem; font-weight: 800; letter-spacing: .02em;
}
.att-card-thumb {
  flex: none; width: 42px; height: 28px; border-radius: 6px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border);
}
.att-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.att-name {
  font-size: .78rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-size { font-size: .66rem; color: var(--muted); }
.att-acts { display: flex; gap: 0; flex: none; }
.att-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; border: 0; background: none;
  color: var(--muted); cursor: pointer; font-size: .8rem; text-decoration: none;
}
.att-act:hover { background: var(--primary-softer); color: var(--primary); }
.att-card.att-danger .att-act:hover { background: #fee2e2; color: #991b1b; }

/* safety banners + external tag */
.safety-banner {
  display: flex; gap: .6rem; align-items: flex-start; margin: 0 1.2rem .8rem;
  padding: .6rem .8rem; border-radius: 10px; font-size: .83rem; line-height: 1.45;
}
.safety-banner .sb-icon { flex: none; line-height: 1.3; }
.safety-banner.warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.chat-readonly { padding: 10px 14px; font-size: 12px; color: #6b7280; border-top: 1px solid var(--border, #e5e7eb); text-align: center; }
.warn-note { margin: 6px 0; padding: 8px 10px; border-radius: 6px; font-size: 12px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
body.dark .warn-note { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #fcd34d; }
.safety-banner.danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.safety-banner b { font-weight: 700; }
body.dark .safety-banner.warn { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #fcd34d; }
body.dark .safety-banner.danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #fca5a5; }

/* Remote-image (tracking-pixel) notice */
.img-block-banner {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  margin: 0 1.2rem .8rem; padding: .55rem .8rem; border-radius: 10px;
  font-size: .83rem; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
}
.img-block-banner .ibb-acts { display: flex; gap: 1rem; margin-left: auto; }
.img-block-banner .link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #1d4ed8; font: inherit; text-decoration: underline;
}
.img-block-banner .link:disabled { opacity: .5; cursor: default; }
body.dark .img-block-banner { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.35); color: #93c5fd; }
body.dark .img-block-banner .link { color: #93c5fd; }
.att-quarantined { opacity: .75; cursor: not-allowed; }
.ext-tag {
  display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #92400e; background: #fef3c7; border: 1px solid #fde68a;
  border-radius: 4px; padding: .08em .45em; vertical-align: middle; margin-left: .3rem;
  white-space: nowrap; cursor: default;
}
body.dark .ext-tag { color: #fcd34d; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); }
.verified-tag {
  display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  color: #166534; background: #dcfce7; border: 1px solid #bbf7d0;
  border-radius: 4px; padding: .08em .45em; vertical-align: middle; margin-left: .3rem;
  white-space: nowrap; cursor: default;
}
body.dark .verified-tag { color: #86efac; background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.35); }
.att-thumb {
  display: inline-block; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--bg); cursor: zoom-in; padding: 0; line-height: 0;
}
.att-thumb img { max-width: 160px; max-height: 110px; display: block; }
.att-preview-wrap { display: flex; flex-direction: column; gap: .3rem; }
.att-prev { cursor: pointer; }
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(10, 11, 20, .87); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 94vh; border-radius: 8px; box-shadow: var(--shadow-lg); }

/* quick reply */
.quick-reply {
  display: flex; gap: .75rem; align-items: flex-start;
  margin: .4rem 1rem 1.3rem; padding: .8rem 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.qr-inner { flex: 1; min-width: 0; }
.qr-fake {
  width: 100%; text-align: left; padding: .62rem 1rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg); color: var(--muted); cursor: text;
  font-size: .88rem; font-family: inherit;
  transition: border-color .14s;
}
.qr-fake:hover { border-color: var(--primary); }
.qr-editor { min-width: 0; }
.qr-body {
  min-height: 70px; max-height: 260px; overflow-y: auto; padding: .65rem .9rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font-size: .92rem;
}
.qr-body:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.qr-foot { display: flex; gap: .5rem; margin-top: .55rem; }

/* ============================================================
   COMPOSE MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; background: rgba(20, 22, 40, .45); backdrop-filter: blur(2px); z-index: 80; display: flex; align-items: flex-end; justify-content: flex-end; }
#composeModal.modal { align-items: center; justify-content: center; padding: 3vh 3vw; }
.compose-card {
  width: min(880px, 100%); height: min(78vh, 800px);
  min-width: 360px; min-height: 340px; max-height: 96vh;
  background: var(--surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  margin: 0; resize: both; overflow: hidden; position: relative;
}
.compose-card.maximized { width: 97vw !important; height: 94vh !important; resize: none; }
.compose-card.minimized { height: auto !important; min-height: 0; resize: none; }
.compose-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.1rem; background: var(--surface); color: var(--text);
  border-bottom: 1px solid var(--border);
  font-weight: 650; font-size: .95rem; flex: none;
}
.compose-head .icon-btn { color: var(--muted); }
.compose-head .icon-btn:hover { background: var(--surface-3); color: var(--text); }
.compose-body { padding: .2rem 1.1rem; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.compose-row { display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--border); flex: none; }
.compose-row label { width: 60px; font-size: .82rem; color: var(--muted); flex-shrink: 0; }
.compose-row input, .compose-row select { border: 0; padding: .6rem 0; background: transparent; }
.compose-row input:focus, .compose-row select:focus { outline: none; box-shadow: none; }
.compose-toggles { display: flex; gap: .8rem; padding: .4rem 0 .4rem 66px; font-size: .82rem; flex: none; }
.compose-toolbar { display: flex; gap: .25rem; padding: .4rem 0; border-bottom: 1px solid var(--border); flex: none; flex-wrap: wrap; align-items: center; }
.compose-toolbar button {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 6px; padding: .3rem .6rem; cursor: pointer; font-family: inherit;
  min-width: 28px; height: 27px; font-size: .82rem; line-height: 1;
}
.compose-toolbar button:hover { background: var(--primary-soft); border-color: var(--primary-soft); }
.compose-toolbar button svg { vertical-align: -1px; }
.compose-toolbar select, .compose-toolbar input[type=color] {
  height: 27px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2); color: var(--text); font-size: .8rem;
  font-family: inherit; padding: 0 .3rem; cursor: pointer;
}
.compose-toolbar input[type=color] { width: 32px; padding: 1px; }

/* Outlook-style dropdown popup menus */
.dd { position: relative; display: inline-flex; }
.dd-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 90;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: .3rem; min-width: 148px;
  animation: toast-in .12s ease-out;
}
.dd-menu-list { max-height: 230px; overflow-y: auto; min-width: 90px; }
.dd-item {
  display: flex; align-items: center; gap: .45rem;
  width: 100% !important; text-align: left;
  background: none !important; border: 0 !important; padding: .4rem .6rem !important;
  font-size: .85rem; border-radius: 6px !important; cursor: pointer;
  color: var(--text); font-family: inherit; min-width: 0 !important;
  height: auto !important; font-weight: 400;
}
.dd-item:hover { background: var(--primary-softer) !important; }
.tb-aa { font-weight: 600; }
.glyph-a { display: inline-flex; flex-direction: column; line-height: 1; }
.glyph-a b { font-size: .8rem; }
.glyph-a i { height: 3px; border-radius: 1.5px; margin-top: 1px; }
.dd-palette { min-width: 0; padding: .45rem; }
.sw-row { display: flex; gap: 3px; margin-bottom: 3px; }
.sw {
  width: 22px !important; height: 22px !important; min-width: 0 !important;
  border-radius: 5px !important; border: 1px solid rgba(0, 0, 0, .14) !important;
  padding: 0 !important; cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.sw:hover { transform: scale(1.15); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.dd-custom {
  display: flex; align-items: center; gap: .5rem;
  font-size: .76rem; color: var(--muted); padding: .35rem .2rem 0;
  border-top: 1px solid var(--border); margin-top: .35rem;
}
.dd-custom input[type=color] { width: 34px; height: 22px; padding: 1px; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; }
.compose-editor { flex: 1; min-height: 120px; padding: .8rem .2rem; font-size: .92rem; overflow-y: auto; }
.compose-editor:focus { outline: none; box-shadow: none; }
.compose-attachments { display: flex; flex-wrap: wrap; gap: .4rem; padding: .4rem 0; flex: none; }
.compose-foot { display: flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-top: 1px solid var(--border); flex-wrap: wrap; flex: none; }
.autosave { margin-left: auto; font-size: .78rem; }
.compose-card.minimized .compose-body, .compose-card.minimized .compose-foot { display: none; }
.tpl-select { max-width: 130px; font-size: .85rem; padding: .4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.sched-wrap { display: inline-flex; align-items: center; gap: .3rem; }
.sched-at { font-size: .82rem; padding: .4rem .45rem; border: 1px solid var(--border); border-radius: 8px; }

/* drag & drop */
.compose-card.drag-over { outline: 3px dashed var(--primary); outline-offset: -8px; }
.compose-card.drag-over::after {
  content: 'Drop files to attach'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 600;
  color: var(--primary); background: var(--primary-glow); pointer-events: none;
}

/* ============================================================
   SIGNATURE RICH EDITOR
   ============================================================ */
.sig-editor-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.sig-toolbar { padding: .35rem .55rem; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.sig-toolbar .tb-btn, .sig-toolbar button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; padding: .22rem .55rem; min-width: 27px; height: 27px; cursor: pointer; font-size: .82rem; font-family: inherit; }
.sig-toolbar .tb-btn:hover, .sig-toolbar button:hover { background: var(--primary-soft); border-color: var(--primary-soft); }
.sig-toolbar select, .sig-toolbar input[type=color] { height: 27px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: .8rem; padding: 0 .3rem; cursor: pointer; }
.sig-toolbar input[type=color] { width: 32px; padding: 1px; }
.tb-sep { width: 1px; height: 18px; background: var(--border-d); margin: 0 .25rem; }
.sig-editor { min-height: 110px; max-height: 220px; overflow-y: auto; padding: .65rem .8rem; font-size: .92rem; }
.sig-editor:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary-glow); }
.sig-editor img { max-width: 100%; }

/* ============================================================
   SETTINGS MODAL
   ============================================================ */
.settings-card { margin: auto; width: min(820px, 94vw); max-height: 90vh; background: var(--surface); border-radius: var(--radius-xl); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); }
.settings-card .compose-head { border-radius: 0; }
#settingsModal.modal, #confirmModal.modal { align-items: center; justify-content: center; }
.settings-main { display: flex; min-height: 0; flex: 1; }
.settings-nav {
  flex: none; width: 200px; padding: .8rem .6rem; overflow-y: auto;
  background: var(--surface-2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .1rem;
}
.snav-group {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); padding: .8rem .65rem .3rem;
}
.snav-group:first-child { padding-top: .2rem; }
.settings-tabs .tab {
  width: 100%; text-align: left; padding: .5rem .65rem; background: none; border: 0;
  border-radius: 8px; cursor: pointer; font-size: .86rem; font-family: inherit;
  color: var(--text-2, var(--muted));
  transition: color .12s, background .12s;
}
.settings-tabs .tab:hover { color: var(--text); background: var(--surface-3); }
.settings-tabs .tab.active { background: var(--primary-softer); color: var(--primary); font-weight: 650; }
.settings-body { flex: 1; min-width: 0; padding: 1.2rem 1.4rem; overflow-y: auto; }
@media (max-width: 640px) {
  .settings-main { flex-direction: column; }
  .settings-nav { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
  .settings-nav .tab { width: auto; }
  .snav-group { flex: 0 0 100%; padding-top: .4rem; }
}
.contact-add { display: flex; gap: .5rem; }
.contact-add input { flex: 1; }
.sig-row, .contact-row { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.sig-row .grow, .contact-row .grow { flex: 1; }
.tfa-secret { background: var(--surface-3); padding: .35rem .7rem; border-radius: 8px; font-size: 1.05rem; letter-spacing: 1px; user-select: all; }
.tfa-uri { display: block; word-break: break-all; font-size: .75rem; background: var(--surface-3); padding: .55rem; border-radius: 8px; margin-top: .35rem; }
details.small { margin: .4rem 0; }

/* rules + labels panes */
.pane-toolbar { display: flex; gap: .5rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; }
.pane-toolbar select { width: auto; min-width: 200px; }
.rule-sub { font-size: .84rem; color: var(--muted); margin: 1rem 0 .45rem; font-weight: 650; }
.rule-match-row { display: flex; align-items: center; gap: .5rem; font-size: .88rem; margin: .4rem 0; }
.rule-match-row select { width: auto; }
.rule-item {
  display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem;
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .45rem;
  background: var(--surface);
}
.rule-item .rname { font-weight: 650; flex: 1; }
.rule-item .rdesc { color: var(--muted); font-size: .78rem; }
.rule-item.off { opacity: .55; }
.cond-row, .act-row { display: flex; gap: .45rem; align-items: center; margin-bottom: .45rem; }
.cond-row select, .cond-row input, .act-row select { width: auto; flex: none; }
.cond-row input[type="text"] { flex: 1; }
.rule-form-actions { display: flex; gap: .5rem; margin-top: .9rem; }
.label-add { display: flex; gap: .5rem; align-items: center; }
.label-add input[type="text"] { flex: 1; }
.label-row { display: flex; align-items: center; gap: .55rem; padding: .42rem .3rem; }
.label-row .lname { flex: 1; }
.vac-dates { display: flex; gap: .75rem; flex-wrap: wrap; }

/* shortcut help */
.keys-body { padding: .4rem 1.1rem 1.1rem; display: grid; gap: .55rem; font-size: .88rem; }
kbd {
  display: inline-block; padding: .14em .55em; border: 1px solid var(--border-d);
  border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2);
  font-family: inherit; font-size: .82em; font-weight: 600;
}

/* ============================================================
   CALENDAR
   ============================================================ */
.cal-pane { flex: 1; display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
.cal-head {
  display: flex; align-items: center; gap: .9rem; padding: .75rem 1.2rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.cal-title { margin: 0; font-size: 1.15rem; flex: 1; letter-spacing: -.01em; }
.cal-nav-btns { display: flex; align-items: center; gap: .35rem; }
.cal-view-btns { display: flex; gap: .35rem; margin-left: auto; }
.cal-vbtn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.cal-body { flex: 1; min-width: 0; overflow-y: auto; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { font-size: .72rem; text-transform: uppercase; color: var(--muted); text-align: center; padding: .35rem 0; font-weight: 650; letter-spacing: .05em; }
.cal-cell {
  min-height: 98px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .35rem .4rem; font-size: .78rem; overflow: hidden;
  transition: border-color .12s;
}
.cal-cell.dim { background: var(--surface-2); color: var(--muted); }
.cal-cell.today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.cal-cell .dnum { font-weight: 650; font-size: .8rem; margin-bottom: .2rem; }
.cal-cell.today .dnum { color: var(--primary); }
.cal-ev {
  display: block; padding: .16em .5em; margin: 0 0 .22em; border-radius: 6px;
  color: #fff; font-size: .72rem; line-height: 1.5; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-ev:hover { filter: brightness(1.1); }
.cal-ev .cal-ev-t { opacity: .85; font-size: .66rem; margin-right: .15em; }
.cal-more { font-size: .68rem; color: var(--muted); cursor: pointer; padding: 0 .3rem; }
.cal-agenda { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: .5rem; }
.cal-agenda-ev {
  display: flex; gap: .85rem; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: 10px; padding: .65rem .9rem; cursor: pointer;
  transition: box-shadow .12s;
}
.cal-agenda-ev:hover { box-shadow: var(--shadow); }
.cal-agenda-ev .t { color: var(--muted); font-size: .82rem; min-width: 92px; padding-top: .1em; }
.cal-agenda-ev .ttl { font-weight: 600; }
.cal-agenda-ev .loc { color: var(--muted); font-size: .82rem; }
.cal-day-head { text-align: center; color: var(--muted); font-size: .85rem; margin-bottom: .8rem; }

/* ---- Week/day hourly grid (Outlook-style) ---- */
.cal-week { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cal-wk-head { display: grid; grid-template-columns: 56px repeat(7, 1fr); }
.cal-week.days-1 .cal-wk-head,
.cal-week.days-1 .cal-wk-allday { grid-template-columns: 56px 1fr; }
.cal-week.days-1 .cal-wk-scroll { grid-template-columns: 56px 1fr; }
.cal-wk-corner { font-size: .68rem; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.cal-wk-day {
  text-align: center; padding: .45rem 0; border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.cal-wk-day .dow { display: block; font-size: .68rem; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; font-weight: 650; }
.cal-wk-day .dnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-weight: 650; font-size: .95rem; margin-top: .1rem;
}
.cal-wk-day.today .dnum { background: var(--primary); color: #fff; }
.cal-wk-allday {
  display: grid; grid-template-columns: 56px repeat(7, 1fr);
  border-bottom: 1px solid var(--border); background: var(--surface);
  max-height: 74px; overflow-y: auto;
}
.cal-ad-cell {
  border-left: 1px solid var(--border); min-height: 30px; padding: 2px;
  display: flex; flex-direction: column; gap: 2px; cursor: pointer;
}
.cal-ad-cell:hover { background: var(--surface-2); }
.cal-ad-ev {
  font-size: .68rem; color: #fff; border-radius: 4px; padding: .1em .45em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.cal-wk-scroll { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 56px repeat(7, 1fr); align-items: start; }
.cal-hours-col { position: sticky; left: 0; z-index: 5; background: var(--bg); }
.cal-h {
  font-size: .66rem; color: var(--muted); text-align: right; padding: 2px 6px 0 0;
  box-sizing: border-box; transform: translateY(0);
}
.cal-wk-col {
  position: relative; border-left: 1px solid var(--border);
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent 22px,
      color-mix(in srgb, var(--border) 55%, transparent) 22px,
      color-mix(in srgb, var(--border) 55%, transparent) 23px,
      transparent 23px, transparent 46px),
    repeating-linear-gradient(to bottom,
      var(--border) 0, var(--border) 1px, transparent 1px, transparent 46px);
  cursor: cell;
}
.cal-wk-col:hover { background-color: var(--surface-2); }
.cal-ev-block {
  position: absolute; left: 3px; right: 5px; border-radius: 6px; color: #fff;
  font-size: .72rem; line-height: 1.3; padding: .2em .45em; overflow: hidden;
  cursor: pointer; box-shadow: 0 1px 3px rgba(15,23,42,.25); z-index: 2;
  display: flex; flex-direction: column;
}
.cal-ev-block b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-block span { font-size: .64rem; opacity: .9; }
.cal-ev-block:hover { filter: brightness(1.08); }
.cal-now {
  position: absolute; left: 0; right: 0; height: 2px; background: #ef4444; z-index: 3;
  pointer-events: none;
}
.cal-now::before {
  content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: #ef4444;
}
/* ---- Calendar side rail (mini month + next up) ---- */
.cal-wrap { flex: 1; display: flex; min-height: 0; }
.cal-side {
  width: 236px; flex-shrink: 0; border-right: 1px solid var(--border);
  padding: .9rem .8rem; overflow-y: auto; background: var(--surface);
  display: flex; flex-direction: column; gap: 1rem;
}
.cal-mini-title { font-weight: 650; font-size: .82rem; margin-bottom: .35rem; }
.cal-mini-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; font-size: .68rem;
}
.cal-mini-grid > span {
  text-align: center; color: var(--muted); font-size: .6rem; font-weight: 650;
  text-transform: uppercase; padding: .15rem 0;
}
.cal-mini-d {
  border: 0; background: none; font: inherit; text-align: center; cursor: pointer;
  border-radius: 50%; aspect-ratio: 1; display: flex; align-items: center;
  justify-content: center; color: var(--text); padding: 0; font-size: .68rem;
}
.cal-mini-d:hover { background: var(--surface-2); }
.cal-mini-d.dim { color: var(--muted); opacity: .55; }
.cal-mini-d.today { background: var(--primary-softer); color: var(--primary); font-weight: 700; }
.cal-mini-d.sel { background: var(--primary); color: #fff; font-weight: 700; }
.cal-up-head {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: .4rem;
}
.cal-up-ev {
  display: flex; gap: .55rem; align-items: flex-start; padding: .4rem .3rem;
  border-radius: 8px; cursor: pointer; transition: background .1s;
}
.cal-up-ev:hover { background: var(--surface-2); }
.cal-up-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: .3em; flex-shrink: 0; }
.cal-up-ttl { font-size: .78rem; font-weight: 600; line-height: 1.3; }
.cal-up-when { font-size: .68rem; color: var(--muted); margin-top: .1em; }
.cal-up-join { color: var(--primary); font-weight: 650; }

.event-card { width: min(520px, 94vw); }
.event-body { padding: .4rem 1.2rem 1.2rem; }
.ev-title-in {
  width: 100%; border: 0; border-bottom: 2px solid var(--border); background: none;
  font-size: 1.25rem; font-weight: 650; padding: .35rem 0 .5rem; margin-bottom: .7rem;
  color: var(--text); outline: none; transition: border-color .15s;
}
.ev-title-in:focus { border-bottom-color: var(--primary); }
.ev-section {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .5rem 0; border-bottom: 1px solid var(--border);
}
.ev-section:last-of-type { border-bottom: 0; }
.ev-ico { width: 20px; text-align: center; padding-top: .35rem; opacity: .65; flex-shrink: 0; }
.ev-fields { flex: 1; display: flex; flex-direction: column; gap: .45rem; }
.ev-fields .field { margin: 0; }
.ev-fields .field > span { font-size: .68rem; }
.ev-row { display: flex; gap: .7rem; }
.ev-row .field { flex: 1; }
.ev-swatches { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .2rem; }
.ev-sw {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; transition: transform .1s, box-shadow .1s;
}
.ev-sw:hover { transform: scale(1.15); }
.ev-sw.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; border-color: var(--surface); }

/* ---- Reminder popup cards ---- */
.reminder-pops {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 400;
  display: flex; flex-direction: column; gap: .6rem; width: min(330px, calc(100vw - 2rem));
}
.rem-pop {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--primary); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15,23,42,.22); padding: .7rem .85rem;
  animation: remIn .25s ease;
}
@keyframes remIn { from { transform: translateY(12px); opacity: 0; } }
.rem-pop-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: .25rem;
}
.rem-pop-title { font-weight: 650; font-size: .92rem; line-height: 1.3; }
.rem-pop-when { font-size: .76rem; color: var(--muted); margin: .15rem 0 .55rem; }
.rem-pop-actions { display: flex; gap: .45rem; align-items: center; }

/* Online-meeting affordances (auto-imported invites) */
.ev-meet { display: flex; align-items: center; gap: .7rem; margin: .1rem 0 .7rem; }
.cal-join {
  display: inline-block; margin: .15rem 0 .1rem; font-size: .78rem; font-weight: 600;
  color: var(--primary); text-decoration: none;
}
.cal-join:hover { text-decoration: underline; }
.ev-auto-tag {
  display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--primary); background: var(--primary-softer);
  border-radius: 4px; padding: .1em .4em; vertical-align: middle; margin-left: .35em;
}

/* ============================================================
   NOTES
   ============================================================ */
.notes-pane { flex: 1; display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
.notes-head {
  display: flex; align-items: center; gap: .9rem; padding: .75rem 1.2rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.notes-head h2 { margin: 0; font-size: 1.15rem; flex: 1; letter-spacing: -.01em; }
.notes-board {
  flex: 1; position: relative; overflow: auto; min-height: 0;
  /* subtle dot grid so placement reads as a board */
  background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px);
  background-size: 22px 22px;
}
.note-card {
  position: absolute; border-radius: 12px; padding: 0 .7rem .5rem;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .14); border: 1px solid rgba(15, 23, 42, .1);
  transition: box-shadow .12s;
}
.note-card:hover { box-shadow: 0 5px 16px rgba(15, 23, 42, .18); }
.note-card.pinned { outline: 2px solid rgba(15, 23, 42, .2); z-index: 2; }
.note-card.dragging {
  box-shadow: 0 12px 28px rgba(15, 23, 42, .3); z-index: 20;
  transition: none;
}
.note-grip {
  display: flex; justify-content: flex-end; gap: .15rem;
  margin: 0 -.7rem .25rem; padding: .35rem .5rem .2rem;
  cursor: grab; touch-action: none; user-select: none;
  border-bottom: 1px dashed rgba(15, 23, 42, .12);
}
.note-card.dragging .note-grip { cursor: grabbing; }
.note-pin, .note-del {
  background: none; border: 0; cursor: pointer; font-size: .9rem;
  color: rgba(15, 23, 42, .45); padding: .1rem .3rem; border-radius: 5px; line-height: 1;
}
.note-pin:hover, .note-del:hover { background: rgba(15, 23, 42, .1); color: #0f172a; }
.note-card.pinned .note-pin { color: #b45309; }
.note-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize; touch-action: none; z-index: 3;
}
.note-resize::after {
  content: ''; position: absolute; right: 4px; bottom: 4px;
  width: 8px; height: 8px;
  border-right: 2px solid rgba(15, 23, 42, .3);
  border-bottom: 2px solid rgba(15, 23, 42, .3);
}
.note-title {
  border: 0; background: none; font-weight: 650; font-size: .92rem; font-family: inherit;
  color: #1e293b; padding: .15rem 0; width: 100%;
}
.note-title:focus { outline: none; }
.note-body {
  border: 0; background: none; resize: none; font-family: inherit; font-size: .85rem;
  color: #334155; flex: 1; min-height: 70px; padding: .15rem 0; width: 100%;
}
.note-body:focus { outline: none; }
.note-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; }
.note-swatches { display: flex; gap: .25rem; }
.note-sw {
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, .2);
  cursor: pointer; padding: 0;
}
.note-sw.on { outline: 2px solid rgba(15, 23, 42, .45); }
.note-ts { font-size: .68rem; color: rgba(51, 65, 85, .55); }

/* ============================================================
   CHAT
   ============================================================ */
.chat-pane { display: flex; flex: 1; min-width: 0; background: var(--bg); }
.chat-rooms {
  width: 256px; flex: none; background: var(--surface);
  border-right: 1px solid var(--border); overflow-y: auto; padding: .9rem .65rem;
}
.chat-rooms-head {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); padding: .35rem .65rem .6rem;
}
.chat-room {
  display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem;
  border-radius: var(--radius); cursor: pointer; margin-bottom: .15rem;
  transition: background .12s;
}
.chat-room:hover { background: var(--surface-3); }
.chat-room.active { background: var(--primary-soft); }
.chat-room-name { font-weight: 600; font-size: .88rem; }
.chat-room-meta { font-size: .72rem; color: var(--muted); margin-left: auto; }
.unread-count {
  margin-left: auto; min-width: 1.5em; height: 1.5em; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 .4em;
}
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-head {
  padding: .85rem 1.3rem; font-weight: 650; font-size: 1rem;
  background: var(--surface); border-bottom: 1px solid var(--border); flex: none;
}
.chat-feed {
  flex: 1; overflow-y: auto; padding: 1.3rem 1.5rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.chat-earlier { text-align: center; padding-bottom: .4rem; }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-bubble {
  max-width: 68%; padding: .6rem .9rem; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: .9rem; line-height: 1.5; overflow-wrap: break-word;
  box-shadow: var(--shadow);
}
.chat-msg.mine .chat-bubble {
  background: linear-gradient(140deg, var(--primary-l), var(--primary-x)); color: #fff;
  border-color: transparent; border-bottom-right-radius: 5px;
}
.chat-msg:not(.mine) .chat-bubble { border-bottom-left-radius: 5px; }
.chat-sender { font-size: .72rem; font-weight: 700; color: var(--primary); margin-bottom: .18rem; }
.chat-msg.mine .chat-sender { color: rgba(255, 255, 255, .85); }
.chat-time { font-size: .68rem; color: var(--muted); margin-top: .22rem; text-align: right; }
.chat-msg.mine .chat-time { color: rgba(255, 255, 255, .75); }
.chat-text { min-width: 0; }
.chat-input {
  display: flex; gap: .6rem; align-items: flex-end;
  padding: .85rem 1.3rem; background: var(--surface);
  border-top: 1px solid var(--border); flex: none;
}
.chat-input textarea {
  flex: 1; resize: none; border: 1px solid var(--border-d); border-radius: 20px;
  padding: .6rem 1rem; font: inherit; font-size: .9rem; max-height: 120px;
  background: var(--surface-2); color: var(--text);
}
.chat-input textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.chat-attach {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 1.05rem; cursor: pointer; line-height: 1;
  transition: border-color .12s, color .12s;
}
.chat-attach:hover { border-color: var(--primary); color: var(--primary); }
.chat-pending {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 1.3rem; background: var(--surface);
  border-top: 1px solid var(--border); flex: none; font-size: .82rem;
}
.chat-pending-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pending-x {
  margin-left: auto; border: none; background: none; color: var(--muted);
  font-size: 1.1rem; cursor: pointer; padding: 0 .3rem;
}
.chat-pending-x:hover { color: var(--danger); }
.chat-file {
  display: flex; align-items: center; gap: .55rem; margin-top: .4rem;
  padding: .5rem .65rem; border-radius: 10px; text-decoration: none;
  background: rgba(0, 0, 0, .05); color: inherit; border: 1px solid rgba(0, 0, 0, .07);
}
.chat-msg.mine .chat-file { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .25); color: #fff; }
.chat-file-icon { font-size: 1.3rem; flex: none; }
.chat-file-info { display: flex; flex-direction: column; min-width: 0; }
.chat-file-name { font-weight: 600; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.chat-file-size { font-size: .7rem; opacity: .75; }
.chat-audio { display: block; margin-top: .4rem; max-width: 240px; height: 34px; }
.chat-attach.recording { color: var(--danger); animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Meeting-room availability board */
.room-board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem; padding: 1.2rem; overflow-y: auto;
}
.room-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: .35rem;
}
.room-card-head { display: flex; align-items: center; gap: .5rem; }
.room-card-head .muted { margin-left: auto; }
.room-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok, #16a34a); flex: none; }
.room-card.busy .room-dot { background: var(--danger, #dc2626); }
.room-status { font-size: .88rem; }
.room-free { color: var(--ok, #16a34a); font-weight: 700; }
.room-busy { color: var(--danger, #dc2626); font-weight: 700; }
.room-book { margin-top: .5rem; align-self: flex-start; }
.chat-people { padding: 0 .2rem .6rem; }
.chat-person {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .5rem .65rem; margin-bottom: .1rem; border: none; border-radius: var(--radius);
  background: none; color: var(--text); font: inherit; font-size: .85rem;
  cursor: pointer; text-align: left;
}
.chat-person:hover { background: var(--surface-3); }
.chat-person-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-person-dept { font-size: .7rem; color: var(--muted); margin-left: auto; flex: none; }

/* ============================================================
   DOCUMENT PREVIEW MODAL
   ============================================================ */
.doc-viewer { align-items: center; justify-content: center; }
.doc-card {
  background: var(--surface); width: min(920px, 94vw); height: min(86vh, 900px);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.doc-head {
  display: flex; align-items: center; gap: .8rem; padding: .75rem 1.1rem;
  border-bottom: 1px solid var(--border); flex: none;
}
.doc-title { font-weight: 650; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-head .icon-btn { margin-left: auto; }
.doc-body { flex: 1; overflow: auto; background: var(--surface-3); padding: 1.5rem; }
.doc-page {
  background: #fff; color: #222; max-width: 780px; margin: 0 auto;
  padding: 2.5rem 3.2rem; box-shadow: var(--shadow-md); border-radius: 6px;
  font-family: Georgia, 'Times New Roman', serif; font-size: 1rem; line-height: 1.65;
}
.doc-page h1, .doc-page h2, .doc-page h3, .doc-page h4 { margin: 1em 0 .4em; }
.doc-page p { margin: 0 0 .7em; }
.doc-page .doc-tbl { border-collapse: collapse; width: 100%; margin: .8rem 0; }
.doc-page .doc-tbl td, .doc-page .doc-tbl th {
  border: 1px solid #c8c6c4; padding: .35rem .6rem; font-size: .88rem; text-align: left;
}
.doc-xlsx { font-family: 'Segoe UI', sans-serif; }
.doc-xlsx td { border: 1px solid #e1dfdd !important; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.doc-sheet { font-family: 'Segoe UI', sans-serif; }
.doc-slide { border: 1px solid #e1dfdd; border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; background: #fafafa; }
.doc-slide-num { font-size: .72rem; color: #8a8886; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; }
.doc-li { color: var(--primary); }
.doc-pre { white-space: pre-wrap; font-family: Consolas, monospace; font-size: .85rem; }

/* ============================================================
   CONFIRM / TOASTS / MENUS / LOADING
   ============================================================ */
.confirm-card { background: var(--surface); border-radius: var(--radius-xl); padding: 1.3rem; width: min(400px, 90vw); box-shadow: var(--shadow-lg); }
.confirm-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem; }
.prompt-input { margin-top: .6rem; box-sizing: border-box; }
.outlook-import-report { margin: .6rem 0 1rem; padding: .7rem .9rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: .86rem; }
.outlook-import-report ul { margin: .35rem 0 0 1.1rem; padding: 0; }
.outlook-import-report li { margin: .15rem 0; }
.outlook-import-report .muted { opacity: .75; }
.toasts { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: .45rem; }
.toast {
  background: #262838; color: #fff; padding: .6rem 1.15rem; border-radius: 10px;
  font-size: .88rem; box-shadow: var(--shadow-lg); animation: toast-in .2s ease-out;
}
.toast.err { background: #b91c1c; }
.toast-act { display: flex; align-items: center; gap: .8rem; padding: .55rem .55rem .55rem 1.05rem; position: relative; overflow: hidden; }
.toast-btn {
  border: 0; background: none; color: #93c5fd; font: inherit; font-weight: 700;
  cursor: pointer; padding: .3rem .6rem; border-radius: 6px; text-transform: uppercase;
  font-size: .78rem; letter-spacing: .04em;
}
.toast-btn:hover { background: rgba(255,255,255,.12); }
.toast-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,.15);
}
.toast-bar i {
  display: block; height: 100%; width: 100%; background: #93c5fd;
  animation: toastBar linear forwards;
}
@keyframes toastBar { from { width: 100%; } to { width: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.ctx-menu { position: fixed; z-index: 90; min-width: 170px; }

.skel { padding: .8rem; }
.skel-row { height: 14px; background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; border-radius: 6px; margin: .6rem 0; animation: skel 1.2s infinite; }
@keyframes skel { to { background-position: -200% 0; } }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border-d); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c3c7d8 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c3c7d8; border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #9aa0bd; border: 2px solid transparent; background-clip: content-box; }

/* ============================================================
   ADMIN
   ============================================================ */
.admin-app { background: var(--bg); min-height: 100vh; }
.admin-app .topbar { position: static; }
.admin-layout { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.admin-nav {
  width: 210px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); padding: 1rem .6rem;
  display: flex; flex-direction: column; gap: 2px;
}
.admin-nav a { padding: .55rem .85rem; border-radius: var(--radius); color: var(--text); font-size: .88rem; transition: background .12s; }
.admin-nav a:hover { background: var(--surface-3); text-decoration: none; }
.admin-nav a.active { background: var(--primary-soft); color: var(--primary-x); font-weight: 650; }
.admin-main { flex: 1; padding: 1.4rem; overflow-x: auto; min-width: 0; }
.admin-cols { display: grid; grid-template-columns: minmax(320px, 460px) 1fr; gap: 1.5rem; align-items: start; }
.form fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg); margin: .8rem 0; padding: .7rem .9rem .9rem; }
.form legend { font-size: .8rem; font-weight: 600; color: var(--muted); padding: 0 .35rem; }
.form-row { display: flex; gap: .65rem; }
.form-row .grow { flex: 1; }
.form.narrow { max-width: 520px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; margin-bottom: 1.1rem; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem; text-align: center; box-shadow: var(--shadow); }
.stat-card.stat-warn { border-color: #fecaca; background: var(--danger-soft); }
.stat-num { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; }
.test-result { margin-top: .6rem; font-size: .85rem; }
.test-result .ok { color: var(--ok); }
.test-result .err { color: var(--danger); }
.pagination { display: flex; gap: .5rem; margin-top: .9rem; }

/* ============================================================
   LAYOUT VARIANTS / RESPONSIVE
   ============================================================ */
.density-compact .msg-row { padding: .32rem .8rem; gap: .05rem .5rem; }
.density-compact .msg-snippet { display: none; }
.density-compact .msg-check { grid-row: span 1; }
.density-compact .msg-from, .density-compact .msg-subject { font-size: .82rem; }

.pane-bottom .mail-layout { flex-direction: column; }
.pane-bottom .msg-list-pane { width: 100%; flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--border); min-height: 0; }
.pane-bottom .reader-pane { flex: 1 1 55%; }

.pane-off .reader-pane {
  display: none; position: fixed; inset: var(--topbar-h) 10% 0 10%; z-index: 35;
  background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.pane-off .reader-pane.open { display: block; }

.back-btn { display: none; }

@media (max-width: 1024px) {
  :root { --list-w: 320px; --sidebar-w: 220px; }
}
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .mail-layout { position: relative; }
  .sidebar {
    position: fixed; top: var(--topbar-h); bottom: 0; left: 0; z-index: 50;
    transform: translateX(-100%); transition: transform .22s ease; width: 265px;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(15, 17, 30, .45); z-index: 45; }
  .msg-list-pane { width: 100%; }
  .reader-pane { position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 30; transform: translateX(100%); transition: transform .22s ease; background: var(--surface); }
  .reader-pane.open { transform: translateX(0); }
  .reader-pane .back-btn { display: inline-block; }
  .modal { align-items: stretch; justify-content: stretch; }
  .compose-card { width: 100%; max-height: none; margin: 0; border-radius: 0; height: 100%; }
  .admin-cols { grid-template-columns: 1fr; }
  .admin-nav { width: 140px; }
  .search input { font-size: .82rem; }
}
@media (max-width: 900px) {
  .cal-side { display: none; }
}
@media (max-width: 720px) {
  .cal-cell { min-height: 62px; }
  .cal-head { flex-wrap: wrap; }
  .cal-pane, .notes-pane { position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 40; overflow: hidden; }
  .app-rail { display: none; }
  .chat-rooms { width: 140px; }
  .chat-room-meta { display: none; }
  .reminder-pops { right: .6rem; bottom: .6rem; }
}

/* print: thread content only */
@media print {
  .topbar, .sidebar, .app-rail, .msg-list-pane, .cal-pane, .notes-pane, .reader-toolbar,
  .thread-msg-actions, .toast-wrap, .modal, .menu, .att-chip button { display: none !important; }
  .mail-layout { display: block; }
  .reader-pane { overflow: visible; }
  .thread-msg { border: none; box-shadow: none; margin: 0 0 1rem; }
  .thread-msg.collapsed .thread-msg-body { display: block; }
}

/* ============================================================
   DARK THEME
   ============================================================ */
body.dark {
  --bg: #12141d;
  --surface: #1b1e2a;
  --surface-2: #161924;
  --surface-3: #232738;
  --border: #2c3044;
  --border-d: #3a3f57;
  --text: #eceef8;
  --text-2: #c3c7dc;
  --muted: #8b90a8;
  --primary: #818cf8;
  --primary-d: #a5b4fc;
  --primary-x: #6366f1;
  --primary-l: #8f97fa;
  --primary-soft: #2c2f55;
  --primary-softer: #23264a;
  --primary-glow: rgba(129, 140, 248, .18);
  --danger-soft: #3f1d21;
  --ok-soft: #14301f;
  --warn-soft: #3a2a12;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
body.dark ::selection { background: var(--primary-soft); color: #e0e3ff; }
body.dark input, body.dark select, body.dark textarea,
body.dark .field input, body.dark .field select, body.dark .field textarea {
  background: var(--surface-2); color: var(--text); border-color: var(--border-d);
}
body.dark .btn { background: var(--surface-3); border-color: var(--border-d); color: var(--text); box-shadow: none; }
body.dark .btn:hover { background: #2c3044; }
body.dark .btn-primary { background: linear-gradient(180deg, var(--primary-l), var(--primary-x)); border-color: var(--primary-x); color: #fff; }
body.dark .btn-primary:hover { background: var(--primary-x); }
body.dark .btn-danger-outline { border-color: #7f2d33; }
body.dark .topbar { background: rgba(27, 30, 42, .86); }
body.dark .search input { background: var(--surface-3); border-color: transparent; }
body.dark .search input:focus { background: var(--surface-2); }
body.dark .icon-btn:hover, body.dark .folder-item:hover, body.dark .menu-item:hover,
body.dark .chat-room:hover, body.dark .chat-person:hover, body.dark .rail-item:hover,
body.dark .admin-nav a:hover { background: var(--surface-3); }
body.dark .folder-item .ctx:hover { background: var(--border-d); }
body.dark .msg-row:hover { background: var(--surface-2); }
body.dark .msg-row.unread { background: var(--surface); }
body.dark .msg-row.selected { background: var(--primary-softer); }
body.dark .msg-count { color: #cdd3ff; }
body.dark .focus-tab:hover { background: var(--surface-3); }
body.dark .focus-tab.active { background: var(--primary-softer); }
body.dark .msg-hdr { background: var(--surface-2); }
body.dark .qr-fake { background: var(--surface-3); color: var(--muted); }
body.dark .qr-body { background: var(--surface-2); }
body.dark code, body.dark .tfa-secret, body.dark .tfa-uri { background: var(--surface-3); }
body.dark .cal-cell { background: var(--surface); }
body.dark .cal-cell.dim { background: var(--surface-2); }
body.dark .table th { background: var(--surface-2); }
body.dark .skel-row { background: linear-gradient(90deg, var(--surface-3) 25%, #2c3044 50%, var(--surface-3) 75%); background-size: 200% 100%; }
body.dark .settings-tabs { background: var(--surface-2); }
body.dark .settings-tabs .tab { color: var(--muted); }
body.dark .settings-tabs .tab:hover { background: var(--surface-3); }
body.dark .settings-tabs .tab.active { color: var(--primary); }
body.dark .sig-toolbar { background: var(--surface-2); }
body.dark .sig-toolbar button, body.dark .sig-toolbar select, body.dark .sig-toolbar input[type=color],
body.dark .compose-toolbar button { background: var(--surface-3); color: var(--text); border-color: var(--border-d); }
body.dark .empty-state svg path { fill: #3a3f57; }
body.dark .toast { background: #eceef8; color: #161924; }
body.dark .toast.err { background: #dc2626; color: #fff; }
body.dark .chat-bubble { background: var(--surface-3); border-color: var(--border); }
body.dark .chat-msg.mine .chat-bubble { background: linear-gradient(140deg, var(--primary-x), var(--primary)); border-color: transparent; }
body.dark .chat-input textarea { background: var(--surface-2); }
body.dark .chat-attach { background: var(--surface-3); }
body.dark .doc-body { background: var(--bg); }
body.dark .doc-page { background: #232738; color: #e8eaf4; }
body.dark .doc-page .doc-tbl td, body.dark .doc-page .doc-tbl th { border-color: #3a3f57; }
body.dark .doc-xlsx td { border-color: #2c3044 !important; }
body.dark .doc-slide { background: var(--surface-3); border-color: #3a3f57; }
body.dark * { scrollbar-color: #3a3f57 transparent; }
body.dark *::-webkit-scrollbar-thumb { background: #3a3f57; border: 2px solid transparent; background-clip: content-box; }

/* dept member lists */
.dept-members { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem; }
.dept-member { display: flex; align-items: center; gap: .5rem; padding: .28rem .35rem; font-size: .88rem; }

/* Shared calendar + invites */
.ev-rsvp { display:flex; align-items:center; gap:6px; padding:8px 0; border-top:1px solid var(--line,#e2e8f0); }
.cal-ev-shared { opacity:.9; border:1px dashed rgba(255,255,255,.6); }
.cal-invite-card { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0; padding:12px 14px; border:1px solid #bfdbfe; border-left:4px solid #2563eb; border-radius:10px; background:#eff6ff; }
.cal-invite-btns { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
#evAttendees, #evDepts { min-height:80px; }

/* picker checkbox lists */
.ev-pick-dd { position:relative; }
.ev-pick-btn { width:100%; text-align:left; padding:.45rem .6rem; border:1px solid var(--border,#e2e8f0); border-radius:8px; background:var(--surface,#fff); font-size:.88rem; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-pick-panel[hidden]{display:none;}
.ev-pick-panel { max-height:180px; overflow-y:auto; background:var(--surface,#fff); border:1px solid var(--border,#e2e8f0); border-radius:8px; box-shadow:0 2px 8px rgba(15,23,42,.08); margin-top:4px; padding:2px 0; display:flex; flex-direction:column; }
.ev-pick { display:flex; align-items:center; gap:8px; font-size:.88rem; padding:.45rem .6rem; border-radius:0; cursor:pointer; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); width:100%; }
.ev-pick:last-child { border-bottom:0; }
.ev-pick:hover { background:var(--surface-2,#f1f5f9); }
.ev-pick-dd.ro { opacity:.6; }
.ev-pick-dd.ro .ev-pick-panel input { pointer-events:none; }

/* ============ Calendar polish ============ */
.cal-head { padding:.7rem 1.4rem; box-shadow: 0 1px 3px rgba(15,23,42,.05); position:relative; z-index:10; }
.cal-title { font-size:1.35rem; font-weight:700; letter-spacing:-.02em; }
.cal-seg { display:flex; background:var(--surface-2,#f1f5f9); border-radius:9px; padding:3px; gap:2px; }
.cal-seg .cal-vbtn { border:0; background:transparent; border-radius:7px; padding:.3rem .85rem; font-size:.82rem; color:var(--muted); }
.cal-seg .cal-vbtn.active { background:var(--surface,#fff); color:var(--text); box-shadow:0 1px 3px rgba(15,23,42,.12); font-weight:600; }
.cal-body { padding:1rem 1.4rem; }
.cal-dow { padding:.55rem 0; font-size:.7rem; }
.cal-cell { min-height:104px; border-color:color-mix(in srgb, var(--border) 60%, transparent); border-radius:12px; padding:.45rem .5rem; }
.cal-cell:hover { border-color:var(--border); box-shadow:0 2px 8px rgba(15,23,42,.06); }
.cal-cell.dim { background:transparent; opacity:.55; }
.cal-cell .dnum { display:inline-flex; align-items:center; justify-content:center; min-width:1.6em; height:1.6em; border-radius:50%; font-size:.78rem; margin-bottom:.3rem; }
.cal-cell.today { border-color:transparent; box-shadow:none; background:var(--primary-softer,#eef2ff); }
.cal-cell.today .dnum { background:var(--primary); color:#fff; }
.cal-ev { border-radius:5px; padding:.22em .55em; margin-bottom:.25em; font-size:.7rem; box-shadow:0 1px 2px rgba(15,23,42,.18); }
.cal-more { display:inline-block; margin-top:.1em; padding:.1em .45em; border-radius:5px; font-weight:600; }
.cal-more:hover { background:var(--surface-2); color:var(--primary); }
.cal-side { width:250px; padding:1.1rem .9rem; gap:1.2rem; }
.cal-up-ev { border:1px solid transparent; }
.cal-up-ev:hover { border-color:var(--border); background:var(--surface-2); }
.cal-up-dot { width:8px; height:8px; margin-top:.35em; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }

.ev-pick input { flex:none; margin:0; }
.ev-pick-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-pick input[type="checkbox"] { width:auto; padding:0; border:none; flex:none; margin:0; }
.ev-pick-sub { color:var(--muted); font-size:.74rem; flex:none; }
.ev-pick-panel { padding:2px 0; }

summary.ev-pick-btn { list-style:none; user-select:none; }
summary.ev-pick-btn::-webkit-details-marker { display:none; }
.ev-pick-dd[open] .ev-pick-btn { border-color:var(--primary); }

/* presence + mentions + typing */
.presence-dot { width:8px; height:8px; border-radius:50%; background:#cbd5e1; flex:none; display:inline-block; }
.presence-dot.on { background:#22c55e; box-shadow:0 0 0 2px color-mix(in srgb,#22c55e 25%,transparent); }
.mention-count { background:#ef4444; color:#fff; font-size:.68rem; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:auto; }
.mention { background:#fef08a; color:#713f12; padding:0 3px; border-radius:4px; font-weight:600; }
.chat-typing { padding:.15rem .9rem; font-size:.76rem; color:var(--muted); font-style:italic; min-height:1.2rem; }

/* directory */
.dir-pane { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.dir-head { display:flex; align-items:center; gap:1rem; padding:1rem 1.4rem; border-bottom:1px solid var(--border); }
.dir-head h2 { margin:0; font-size:1.15rem; }
.dir-head input { max-width:340px; }
.dir-grid { flex:1; overflow-y:auto; padding:1.2rem 1.4rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:.8rem; align-content:start; }
.dir-card { display:flex; gap:.8rem; align-items:center; padding:.9rem 1rem; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.dir-avatar { position:relative; width:42px; height:42px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.dir-avatar .presence-dot { position:absolute; bottom:-1px; right:-1px; border:2px solid var(--surface); }
.dir-info { flex:1; min-width:0; }
.dir-name { font-weight:600; font-size:.95rem; }
.dir-sub { font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dir-acts { display:flex; flex-direction:column; gap:.3rem; }

.ev-busy { color:#b91c1c; background:#fee2e2; font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:10px; margin-left:auto; }
.ev-pick .ev-busy { flex:none; }

.login-list { display:flex; flex-direction:column; gap:2px; }
.login-row { display:flex; align-items:center; gap:.6rem; padding:.35rem .5rem; border-radius:6px; }
.login-row:nth-child(odd) { background:rgba(128,128,128,.06); }

/* Settings -> Accounts: connected mailboxes */
.acct-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.55rem .6rem; border-radius:8px; }
.acct-row:nth-child(odd) { background:rgba(128,128,128,.06); }
.acct-info { min-width:0; }
.acct-acts { display:flex; gap:.4rem; flex-shrink:0; }
.acct-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem .8rem; }
.acct-adv { margin:.6rem 0; }
.acct-adv summary { cursor:pointer; user-select:none; }
.acct-adv[open] summary { margin-bottom:.5rem; }
@media (max-width:640px) { .acct-grid { grid-template-columns:1fr; } }
.login-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.login-dot.ok { background:#16a34a; }
.login-dot.bad { background:#dc2626; }
.login-when { min-width:110px; }
.login-ip { color:var(--muted,#888); font-family:monospace; }
.login-st { margin-left:auto; }

.msg-row mark { background:#fde68a; color:inherit; border-radius:2px; padding:0 1px; }
.ct-add { margin:0 1.4rem; padding:.9rem 1rem; border-bottom:1px solid var(--border); }
.dir-head .btn { margin-left:auto; flex:none; }

.ct-mini { border:none; background:none; cursor:pointer; color:var(--accent,#2563eb); font-size:.8rem; padding:0 2px; border-radius:4px; opacity:.55; }
.ct-mini:hover { opacity:1; background:rgba(37,99,235,.12); }
.ct-mini:disabled { opacity:.3; cursor:default; }

.ct-list-head, .ct-row { display:grid; grid-template-columns:minmax(180px,1.2fr) minmax(200px,1.4fr) minmax(120px,1fr) minmax(100px,.8fr) auto; gap:.8rem; align-items:center; padding:.45rem 1.4rem; }
.ct-list-head { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--border); background:rgba(128,128,128,.05); position:sticky; top:0; }
.ct-list { flex:1; overflow-y:auto; }
.ct-row { border-bottom:1px solid var(--border); }
.ct-row:hover { background:rgba(128,128,128,.06); }
.ct-cell { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-name { display:flex; align-items:center; gap:.6rem; font-weight:600; }
.ct-name .ct-title { font-weight:400; font-size:.76rem; color:var(--muted); }
.ct-av { width:30px; height:30px; flex:none; border-radius:50%; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700; }
.ct-acts { display:flex; gap:.3rem; justify-content:flex-end; }
.ct-add-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.4rem .9rem; }
@media (max-width:900px) { .ct-list-head { display:none; } .ct-row { grid-template-columns:1fr; gap:.15rem; padding:.6rem 1rem; } }

/* ============================================================
   ACCENT THEMES � user-selectable palettes (light + dark)
   ============================================================ */
body.accent-ocean  { --primary:#2563eb; --primary-d:#1d4ed8; --primary-x:#1e40af; --primary-l:#3b76f6; --primary-soft:#dbe7fe; --primary-softer:#eff5ff; --primary-glow:rgba(37,99,235,.14); --primary-shadow:rgba(37,99,235,.35); }
body.accent-teal   { --primary:#0d9488; --primary-d:#0f766e; --primary-x:#115e59; --primary-l:#14b8a6; --primary-soft:#d2f5ef; --primary-softer:#effcf9; --primary-glow:rgba(13,148,136,.15); --primary-shadow:rgba(13,148,136,.35); }
body.accent-violet { --primary:#7c3aed; --primary-d:#6d28d9; --primary-x:#5b21b6; --primary-l:#8b5cf6; --primary-soft:#ece6fd; --primary-softer:#f6f3ff; --primary-glow:rgba(124,58,237,.14); --primary-shadow:rgba(124,58,237,.35); }
body.accent-rose   { --primary:#e11d48; --primary-d:#be123c; --primary-x:#9f1239; --primary-l:#f43f5e; --primary-soft:#ffe3e8; --primary-softer:#fff1f3; --primary-glow:rgba(225,29,72,.12); --primary-shadow:rgba(225,29,72,.32); }
body.accent-amber  { --primary:#d97706; --primary-d:#b45309; --primary-x:#92400e; --primary-l:#f59e0b; --primary-soft:#fdeecd; --primary-softer:#fff8eb; --primary-glow:rgba(217,119,6,.16); --primary-shadow:rgba(217,119,6,.35); }
body.accent-mbm    { --primary:#1256a8; --primary-d:#0f4a92; --primary-x:#0b3a75; --primary-l:#1c6fd1; --primary-soft:#dcebfb; --primary-softer:#eef5fd; --primary-glow:rgba(18,86,168,.16); --primary-shadow:rgba(18,86,168,.35); --brand-red:#e42313; }
body.accent-mbm .msg-count { background: var(--brand-red); color: #fff; }
body.accent-mbm .rail-item.active::before { background: var(--brand-red); }

body.dark.accent-ocean  { --primary:#60a5fa; --primary-d:#93c5fd; --primary-x:#3b82f6; --primary-l:#7aa5f8; --primary-soft:#233253; --primary-softer:#1c2742; --primary-glow:rgba(96,165,250,.18); --primary-shadow:rgba(59,130,246,.4); }
body.dark.accent-teal   { --primary:#2dd4bf; --primary-d:#5eead4; --primary-x:#14b8a6; --primary-l:#4fd8c6; --primary-soft:#173e3c; --primary-softer:#133231; --primary-glow:rgba(45,212,191,.18); --primary-shadow:rgba(20,184,166,.4); }
body.dark.accent-violet { --primary:#a78bfa; --primary-d:#c4b5fd; --primary-x:#8b5cf6; --primary-l:#b49dfa; --primary-soft:#352d5e; --primary-softer:#2a2450; --primary-glow:rgba(167,139,250,.18); --primary-shadow:rgba(139,92,246,.4); }
body.dark.accent-rose   { --primary:#fb7185; --primary-d:#fda4af; --primary-x:#f43f5e; --primary-l:#fc8ca0; --primary-soft:#4b2331; --primary-softer:#3d1e2a; --primary-glow:rgba(251,113,133,.18); --primary-shadow:rgba(244,63,94,.4); }
body.dark.accent-amber  { --primary:#fbbf24; --primary-d:#fcd34d; --primary-x:#f59e0b; --primary-l:#fdcb47; --primary-soft:#42330f; --primary-softer:#342a10; --primary-glow:rgba(251,191,36,.18); --primary-shadow:rgba(245,158,11,.4); }
body.dark.accent-mbm    { --primary:#5b9bea; --primary-d:#8fbdf2; --primary-x:#2f7fd4; --primary-l:#6fa8ee; --primary-soft:#1d3350; --primary-softer:#182a42; --primary-glow:rgba(91,155,234,.18); --primary-shadow:rgba(47,127,212,.4); --brand-red:#f04a3a; }

/* accent swatch picker (Settings -> Display) */
.accent-pick { display:flex; gap:.55rem; flex-wrap:wrap; margin:.1rem 0 .2rem; }
.accent-sw {
  width:34px; height:34px; border-radius:50%; border:2px solid var(--border-d); cursor:pointer;
  padding:0; position:relative; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.accent-sw:hover { transform:scale(1.08); }
.accent-sw.on { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.accent-sw.on::after {
  content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.18);
}
.accent-sw[data-accent="indigo"] { background:linear-gradient(135deg,#6366f1,#3730a3); }
.accent-sw[data-accent="ocean"]  { background:linear-gradient(135deg,#3b82f6,#1e40af); }
.accent-sw[data-accent="teal"]   { background:linear-gradient(135deg,#14b8a6,#115e59); }
.accent-sw[data-accent="violet"] { background:linear-gradient(135deg,#8b5cf6,#5b21b6); }
.accent-sw[data-accent="rose"]   { background:linear-gradient(135deg,#f43f5e,#9f1239); }
.accent-sw[data-accent="amber"]  { background:linear-gradient(135deg,#f59e0b,#92400e); }
.accent-sw[data-accent="mbm"]    { background:linear-gradient(135deg,#e42313 0%,#e42313 38%,#1256a8 42%,#0b3a75 100%); }

/* ---- Contacts: tabs + groups ---- */
.ct-tabs { display:inline-flex; background:var(--surface-3); border-radius:999px; padding:3px; gap:2px; }
.ct-tab {
  border:0; background:none; padding:.35rem .9rem; border-radius:999px; cursor:pointer;
  font-size:.82rem; font-weight:600; color:var(--muted); font-family:inherit;
}
.ct-tab.active { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.ct-glist { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:.9rem; padding:0 .2rem; }
.ct-grow { padding:.9rem 1rem; display:flex; flex-direction:column; gap:.45rem; }
.ct-grow-top { display:flex; align-items:center; gap:.55rem; }
.ct-gname { font-weight:650; font-size:.95rem; }
.ct-grow-names { min-height:1.2em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ct-grow-acts { display:flex; gap:.4rem; margin-top:.2rem; flex-wrap:wrap; }
.ct-member-pick {
  max-height:300px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius);
  padding:.4rem .6rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.15rem .9rem;
}
.ct-mem { display:flex; align-items:center; gap:.5rem; padding:.3rem .2rem; font-size:.86rem; border-radius:6px; }
.ct-mem:hover { background:var(--surface-2); }
.ct-mem input { flex:none; }
.ct-mem-n { font-weight:600; }
.ct-mem-e { font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Follow-up flags (Outlook-style) ---- */
.msg-flag { color:#e42313; font-size:.85rem; }
.msg-flag-done { color:#16a34a; font-size:.85rem; }
.qa-btn.flag-on { color:#e42313; }
.thread-msg-actions .msg-flag { font-weight:600; }

/* ---- Settings tabs ---- */
.set-tabs { display:flex; gap:.25rem; flex-wrap:wrap; border-bottom:2px solid var(--border); margin-bottom:1.2rem; }
.set-tab { border:none; background:none; padding:.55rem .95rem; font:inherit; font-weight:600; font-size:.92rem; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; border-radius:8px 8px 0 0; }
.set-tab:hover { color:var(--text); background:var(--surface-2); }
.set-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.set-panel { display:none; }
.set-panel.active { display:block; }
.set-panel h2 { margin-top:.2rem; }