:root {
  --accent:        #2563EB;
  --accent-dark:   #1D4ED8;
  --accent-soft:   #E8EFFD;
  --accent-softer: #F4F7FE;

  --ink-1: #111827;
  --ink-2: #5F6368;
  --ink-3: #80868B;

  --line:        #EAECEF;
  --line-strong: #DADCE0;
  --surface:     #FFFFFF;
  --surface-2:   #FAFAFA;
  --hover:       #F3F4F6;

  --star:  #F5B301;
  --green: #16A34A;
  --amber: #E0A800;

  --rail-w: 56px;
  --side-w: 198px;
  --top-h:  64px;
  --row-h:  41px;

  --radius-pill: 999px;
  --radius:      8px;
}

/* ---------- themes ---------- */

[data-accent="teal"]    { --accent: #0F766E; --accent-dark: #115E59; --accent-soft: #D7F0ED; --accent-softer: #F1FAF9; }
[data-accent="violet"]  { --accent: #6D28D9; --accent-dark: #5B21B6; --accent-soft: #EDE4FD; --accent-softer: #F8F5FE; }
[data-accent="crimson"] { --accent: #DC2626; --accent-dark: #B91C1C; --accent-soft: #FCE4E4; --accent-softer: #FEF6F6; }
[data-accent="amber"]   { --accent: #B45309; --accent-dark: #92400E; --accent-soft: #FBEBD6; --accent-softer: #FEF9F1; }

[data-theme="dark"] {
  --ink-1: #E7EAEE;
  --ink-2: #9AA4B2;
  --ink-3: #6D7686;
  --line:        #242A33;
  --line-strong: #2E353F;
  /* three distinct levels: sheet < card < hover, so rows separate */
  --surface:     #1B2027;
  --surface-2:   #161A20;
  --hover:       #232A33;
  /* #2563EB is too dark on a dark ground */
  --accent:      #4C8DFF;
  --accent-dark: #3B7AF0;
  --accent-soft:   #1C2A44;
  --accent-softer: #171F2E;
}
[data-theme="dark"] body { background: var(--surface); color: var(--ink-1); }
[data-theme="dark"] .topbar,
[data-theme="dark"] .rail,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .main,
[data-theme="dark"] .chatview,
[data-theme="dark"] .meetview,
[data-theme="dark"] .reader,
[data-theme="dark"] .chat-side,
[data-theme="dark"] .chat-thread,
[data-theme="dark"] .chat-placeholder { background: var(--surface); }
[data-theme="dark"] .search { background: var(--surface-2); }
[data-theme="dark"] .conv-title,
[data-theme="dark"] .bubble-meta b { color: var(--ink-1); }
[data-theme="dark"] .bubble { background: var(--surface-2); border-color: var(--line); color: var(--ink-1); }
[data-theme="dark"] .msg-file,
[data-theme="dark"] .reaction { background: var(--surface-2); color: var(--ink-1); }
[data-theme="dark"] .composer-pill,
[data-theme="dark"] .rt-toolbar { background: var(--surface-2); }
[data-theme="dark"] .msg-actions { background: var(--surface-2); }
/* the wordmark is dark slate in the SVG; lighten it on dark backgrounds */
[data-theme="dark"] .brand-lockup { filter: brightness(2.6); }
[data-theme="dark"] .modal,
[data-theme="dark"] .dock-panel,
[data-theme="dark"] .composer,
[data-theme="dark"] .menu,
[data-theme="dark"] .meet-card,
[data-theme="dark"] .grid,
[data-theme="dark"] .pill-btn,
[data-theme="dark"] .login-card { background: var(--surface-2); color: var(--ink-1); }
[data-theme="dark"] .row { background: var(--surface-2); }
[data-theme="dark"] .row.unread { background: var(--surface); }
[data-theme="dark"] .row:hover { background: var(--hover); }
[data-theme="dark"] .check { background: transparent; border-color: var(--ink-3); }
[data-theme="dark"] .field input,
[data-theme="dark"] .inline-select,
[data-theme="dark"] .modal-body select,
[data-theme="dark"] .composer-field input,
[data-theme="dark"] .rt-body,
[data-theme="dark"] textarea { background: var(--surface); color: var(--ink-1); }
[data-theme="dark"] .brand-lockup text { fill: var(--ink-1); }
[data-theme="dark"] .day-divider span { background: var(--surface); }
[data-theme="dark"] .bubble-row.mine .bubble,
[data-theme="dark"] .dbubble-row.mine .dbubble { background: #1E3A6B; border-color: #1E3A6B; color: #E8EFFD; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 13.5px;
  color: var(--ink-1);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input  { font: inherit; }
a { color: var(--accent-dark); }

.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-sm { width: 15px; height: 15px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- top bar ---------- */

.topbar {
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px 0 14px;
  background: var(--surface);
  position: relative;
  z-index: 30;
}

.iconbtn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
}
.iconbtn:hover { background: var(--hover); }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700; letter-spacing: -.3px;
}
.brand-name { font-size: 19px; font-weight: 600; letter-spacing: -0.2px; }

.search {
  flex: 1;
  max-width: 720px;
  margin: 0 auto;
  height: 44px;
  display: flex; align-items: center; gap: 11px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--ink-3);
  transition: background .12s, border-color .12s;
}
.search:focus-within { background: #fff; border-color: var(--line-strong); }
.search input {
  flex: 1;
  border: 0; background: none; outline: none;
  color: var(--ink-1); font-size: 14px;
}
.search input::placeholder { color: var(--ink-3); }

.topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
  display: grid; place-items: center;
}

/* ---------- shell ---------- */

.shell {
  display: flex;
  height: calc(100vh - var(--top-h));
  border-top: 1px solid var(--line);
}

/* app rail */

.rail {
  width: var(--rail-w);
  flex: none;
  padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
.rail-item {
  width: 46px;
  padding: 7px 0 5px;
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-2);
  font-size: 10.5px;
}
.rail-item:hover { background: var(--hover); }
.rail-item.active { background: var(--accent-soft); color: var(--accent-dark); }

/* sidebar */

.sidebar {
  width: var(--side-w);
  flex: none;
  padding: 14px 8px 20px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.compose {
  width: 100%;
  height: 44px;
  margin: 0 0 16px;
  padding: 0 18px;
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.compose:hover { background: var(--accent-dark); }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  height: 33px;
  padding: 0 12px;
  display: flex; align-items: center; gap: 12px;
  border-radius: var(--radius-pill);
  color: var(--ink-1);
  font-size: 13.5px;
  text-align: left;
  width: 100%;
}
.nav-item:hover { background: var(--hover); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.nav-emoji {
  width: 18px; flex: none;
  font-size: 15px; line-height: 1;
  text-align: center;
}

.nav-item .count { margin-left: auto; font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
.nav-item.active .count { color: var(--accent-dark); }

.nav-caption {
  margin: 18px 0 6px;
  padding: 0 12px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* ---------- list ---------- */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }

.listbar {
  height: 46px;
  flex: none;
  padding: 0 14px 0 16px;
  display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--line);
}
.listbar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.range { font-size: 12px; color: var(--ink-2); margin-right: 8px; }

.check {
  width: 15px; height: 15px;
  border: 1.5px solid #9AA0A6;
  border-radius: 3px;
  flex: none;
  display: grid; place-items: center;
  background: #fff;
}
.check.on { background: var(--accent); border-color: var(--accent); }
.check.on::after {
  content: '';
  width: 8px; height: 4.5px;
  border-left: 1.7px solid #fff; border-bottom: 1.7px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.list { flex: 1; overflow-y: auto; }

.row {
  height: var(--row-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
}
.row.unread { background: var(--surface); }
.row:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 1px 3px rgba(0,0,0,.08); }
.row.selected { background: var(--accent-softer); }

.star { color: var(--line-strong); display: grid; place-items: center; }
.star:hover { color: var(--ink-3); }
.star.on { color: var(--star); }
.star.on .icon { fill: var(--star); stroke: var(--star); }

.row-from {
  width: 190px; flex: none;
  color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row.unread .row-from { color: var(--ink-1); font-weight: 600; }

.row-text {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-3);
}
.row-subject { color: var(--ink-2); }
.row.unread .row-subject { color: var(--ink-1); font-weight: 600; }

.row-meta { display: flex; align-items: center; gap: 12px; flex: none; color: var(--ink-3); }
.row-date { width: 68px; text-align: right; font-size: 12px; }
.row.unread .row-date { color: var(--ink-1); font-weight: 600; }

.empty { padding: 60px 20px; text-align: center; color: var(--ink-2); }
.empty strong { display: block; color: var(--ink-1); margin-bottom: 4px; font-size: 15px; }

/* ---------- reading pane ---------- */

.reader {
  position: absolute; inset: var(--top-h) 0 0 calc(var(--rail-w) + var(--side-w));
  background: #fff;
  display: none;
  flex-direction: column;
  z-index: 20;
}
.reader.open { display: flex; }
.reader-bar {
  height: 46px; flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.reader-body { flex: 1; overflow-y: auto; padding: 26px 34px 60px; }
.reader-subject { font-size: 21px; font-weight: 600; margin: 0 0 18px; }
.reader-from { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.reader-from .avatar { width: 38px; height: 38px; font-size: 14px; }
.reader-name { font-weight: 600; }
.reader-sub { color: var(--ink-2); font-size: 12.5px; }
.reader-when { margin-left: auto; color: var(--ink-2); font-size: 12.5px; }
/* The pane is often far wider than 900px; capping there left half the reader
   empty while wide messages scrolled sideways. */
.reader-content { line-height: 1.6; max-width: 1180px; }
.reader-content img { max-width: 100%; height: auto; }
.attachments { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.attachment {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--ink-1); text-decoration: none; font-size: 12.5px;
}
.attachment:hover { background: var(--hover); }
.reply-btn {
  margin-top: 26px;
  height: 36px; padding: 0 20px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 8px;
}
.reply-btn:hover { background: var(--hover); }

/* ---------- compose ---------- */

.composer {
  position: fixed; right: 24px; bottom: 0;
  width: 520px; max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -2px 24px rgba(0,0,0,.22);
  display: none; flex-direction: column;
  z-index: 60;
}
.composer.open { display: flex; }
.composer-head {
  height: 42px; padding: 0 12px 0 16px;
  display: flex; align-items: center;
  background: #F5F6F7;
  border-radius: 10px 10px 0 0;
  font-size: 13.5px; font-weight: 600;
}
.composer-head .iconbtn { margin-left: auto; width: 28px; height: 28px; }
.composer-field {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
}
.composer-field label { color: var(--ink-2); font-size: 12.5px; width: 46px; flex: none; }
.composer-field input { flex: 1; border: 0; outline: none; }
.composer textarea {
  border: 0; outline: none; resize: none;
  padding: 14px 16px; min-height: 230px;
  font: inherit; line-height: 1.55;
}
.composer-foot {
  padding: 10px 16px 14px;
  display: flex; align-items: center; gap: 12px;
}
.send-btn {
  height: 36px; padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-weight: 500;
}
.send-btn:hover { background: var(--accent-dark); }
a.send-btn { text-decoration: none; color: #fff; }
.send-btn[disabled] { opacity: .6; cursor: default; }
.composer-note { font-size: 12px; color: var(--ink-2); }

/* ---------- menu / toast ---------- */

.menu {
  position: absolute; top: calc(var(--top-h) - 6px); right: 18px;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  padding: 6px;
  display: none;
  z-index: 50;
}
.menu.open { display: block; }
.menu-head { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head .who { font-weight: 600; }
.menu-head .as { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }
.menu button { width: 100%; text-align: left; padding: 9px 12px; border-radius: 6px; }
.menu button:hover { background: var(--hover); }

.toast {
  position: fixed; left: 24px; bottom: 24px;
  background: #202124; color: #fff;
  padding: 12px 18px; border-radius: var(--radius);
  font-size: 13px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .16s, transform .16s;
  pointer-events: none;
  z-index: 80;
}
.toast.show { opacity: 1; transform: none; }
.toast.error { background: #C9372E; }
/* the bin button in Trash deletes forever: say so in colour as well as words */
.iconbtn.danger-ico { color: #C9372E; }
.iconbtn.danger-ico:hover { background: #FDEBE9; }
[data-theme="dark"] .iconbtn.danger-ico { color: #F0908A; }
[data-theme="dark"] .iconbtn.danger-ico:hover { background: rgba(220,80,70,.15); }
/* long explanations wrap instead of running off screen; errors can be clicked away */
.toast { max-width: min(520px, calc(100vw - 48px)); line-height: 1.45; }
.toast.show.error { pointer-events: auto; cursor: pointer; }

.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- login ---------- */

.login-page {
  min-height: 100vh;
  display: grid; place-items: center;
  background: var(--surface-2);
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 380px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px 32px 30px;
  box-shadow: 0 2px 14px rgba(0,0,0,.05);
}
.login-card .brand { justify-content: center; margin-bottom: 6px; }
.login-sub { text-align: center; color: var(--ink-2); font-size: 13px; margin: 0 0 26px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
.field input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  outline: none;
}
.field input:focus { border-color: var(--accent); }
.login-card .send-btn { width: 100%; height: 42px; margin-top: 8px; }
.login-error {
  display: none;
  margin-top: 14px; padding: 10px 12px;
  background: var(--accent-soft); color: var(--accent-dark);
  border-radius: var(--radius); font-size: 12.5px;
}
.login-error.show { display: block; }

@media (max-width: 860px) {
  .sidebar { display: none; }
  .reader { left: var(--rail-w); }
  .row-from { width: 130px; }
}

/* ---------- admin console ---------- */

.admin-tag {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .3px;
}

.admin {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 28px 60px;
}

.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.tab {
  padding: 12px 18px;
  color: var(--ink-2);
  font-size: 13.5px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink-1); }
.tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 500; }

.panel { display: none; }
.panel.active { display: block; }

.panel-head {
  display: flex; align-items: flex-start; gap: 24px;
  margin-bottom: 18px;
}
.panel-head h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.panel-head .send-btn,
.panel-head .ghost-btn { margin-left: auto; flex: none; }
.hint { margin: 0; color: var(--ink-2); font-size: 12.5px; max-width: 62ch; line-height: 1.5; }
.hint code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

.ghost-btn {
  height: 30px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font-size: 12.5px; color: var(--ink-1);
  display: inline-flex; align-items: center; gap: 6px;
}
.ghost-btn:hover { background: var(--hover); }
.ghost-btn[disabled] { opacity: .45; cursor: default; }
.ghost-btn.danger { color: #C9372E; border-color: #F3C6C2; }
.ghost-btn.danger:hover { background: #FDEBE9; }

.grid {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}
.grid th {
  text-align: left;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
}
.grid td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid tr:last-child td { border-bottom: 0; }
.grid tr:hover td { background: var(--surface-2); }
.cell-main { font-weight: 500; }
.cell-sub { color: var(--ink-2); font-size: 12px; }
.truncate { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-cell { text-align: center; color: var(--ink-2); padding: 34px 14px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.inline-select {
  height: 30px; padding: 0 8px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: #fff; font: inherit; font-size: 12.5px;
}
.inline-select:focus { border-color: var(--accent); outline: none; }

.pill {
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11.5px; font-weight: 500;
}
.pill-accent { background: var(--accent-soft); color: var(--accent-dark); }
.pill-ok { background: #E7F6EC; color: #15803D; }
.pill-off { background: #F1F2F4; color: var(--ink-3); }
.pill-warn { background: #FFF3E0; color: #B45309; text-decoration: none; }
a.pill-warn:hover { background: #FDE9C8; }

.backdrop {
  position: fixed; inset: 0;
  background: rgba(24, 26, 30, .38);
  display: none; align-items: center; justify-content: center;
  padding: 24px; z-index: 70;
}
.backdrop.open { display: flex; }
.modal {
  width: 100%; max-width: 440px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.24);
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center;
  padding: 16px 12px 16px 20px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.modal-head .iconbtn { margin-left: auto; width: 30px; height: 30px; }
.modal-body { padding: 20px; }
.modal-body .field:last-of-type { margin-bottom: 0; }
.modal-body .hint { margin-bottom: 16px; }
.modal-body select {
  width: 100%; height: 40px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; font: inherit;
}
.modal-body select:focus { border-color: var(--accent); outline: none; }
.checkline {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px; font-size: 13px; color: var(--ink-1);
}
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px 18px;
}
.modal-foot .send-btn { height: 38px; padding: 0 20px; }

.secret {
  padding: 14px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; letter-spacing: .5px;
  word-break: break-all;
}

/* ---------- internal chat ---------- */

.rail-item { position: relative; }
.rail-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 600;
  display: grid; place-items: center;
}

.chatview {
  position: absolute; inset: var(--top-h) 0 0 var(--rail-w);
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--line);
  z-index: 15;
}
body.chat-mode .chatview { display: flex; }
body.chat-mode .sidebar,
body.chat-mode .main,
body.chat-mode .reader { display: none; }

.chat-side {
  width: 280px; flex: none;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.chat-side-head {
  height: 52px; flex: none;
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.chat-side-head span { margin-right: auto; }

/* "New chat": one labelled button, with a menu that says what each choice does */
.newchat-wrap { position: relative; flex: none; padding: 10px 8px 6px; }
body.shell-ui .newchat-wrap { padding-left: 26px; }
.newchat-btn {
  width: 100%; height: 46px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 0 18px;
  border: 0; border-radius: 16px;
  background: var(--accent-soft); color: var(--accent-dark, var(--accent));
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transition: box-shadow .15s, background .15s;
}
.newchat-btn:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, .12); }
.newchat-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.newchat-btn svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.newchat-chev { margin-left: auto; opacity: .7; transition: transform .15s; }
.newchat-btn.open .newchat-chev { transform: rotate(180deg); }

.newchat-menu {
  position: absolute; left: 8px; right: 8px; top: calc(100% + 2px); z-index: 40;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
}
body.shell-ui .newchat-menu { left: 26px; right: 0; }
.newchat-menu[hidden] { display: none; }
.newchat-item {
  width: 100%;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-1);
  font: inherit; text-align: left;
  cursor: pointer;
}
.newchat-item:hover, .newchat-item:focus-visible { background: var(--hover); outline: none; }
.newchat-item-ico {
  width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.newchat-item-ico svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.newchat-item-text b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-1); }
.newchat-item-text span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ink-2); }

/* the darker accent is too dim to read on the dark tint */
[data-theme="dark"] .newchat-btn { color: #A9C4FF; }
[data-theme="dark"] .newchat-item-ico { color: #A9C4FF; }
[data-theme="dark"] .newchat-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.chat-convs { flex: 1; overflow-y: auto; padding: 6px; }

.conv {
  width: 100%;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: var(--radius);
  text-align: left;
  position: relative;
}
.conv:hover { background: var(--hover); }
.conv.active { background: var(--accent-soft); }
.conv-avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--ink-3); color: #fff;
  font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
}
.conv-avatar.channel { background: var(--accent); }
.conv-body { flex: 1; min-width: 0; display: block; }
.conv-top { display: flex; align-items: baseline; gap: 8px; }
.conv-title { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-when { font-size: 11px; color: var(--ink-3); flex: none; }
.conv-preview {
  display: block; margin-top: 2px;
  font-size: 12px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 600;
  display: grid; place-items: center; flex: none;
}

.chat-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.chat-thread-head {
  height: 52px; flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px 0 22px;
  border-bottom: 1px solid var(--line);
}
.chat-thread-head > div:first-child { margin-right: auto; }
.chat-thread-title { font-weight: 600; }
.chat-thread-sub { font-size: 12px; color: var(--ink-2); }

.chat-messages { flex: 1; overflow-y: auto; padding: 20px 24px 8px; }

/* The conversation itself is a centred column, so it stays readable however
   wide the window gets. */
.chat-stream { max-width: 940px; margin: 0 auto; }

.day-divider {
  display: flex; align-items: center; justify-content: center;
  margin: 22px 0 18px;
  position: relative;
}
.day-divider::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--line);
}
.day-divider span {
  position: relative;
  background: var(--surface);
  padding: 0 14px;
  font-size: 12px; color: var(--ink-2);
}

.chat-composer {
  flex: none;
  padding: 10px 24px 20px;
}
.composer-inner {
  max-width: 940px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 10px;
}
.composer-plus {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  display: grid; place-items: center;
}
.composer-plus:hover { background: var(--hover); }
.composer-pill {
  flex: 1;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 5px 6px 5px 18px;
  border-radius: 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.composer-pill:hover { border-color: var(--line-strong); }
.composer-pill:focus-within { background: #fff; border-color: var(--line-strong); }
.composer-pill textarea {
  flex: 1; resize: none; border: 0; background: none; outline: none;
  padding: 9px 0;
  font: inherit; line-height: 1.5;
  max-height: 150px;
  color: var(--ink-1);
  align-self: center;
}
/* while editing an existing message the pill takes the accent outline */
.chat-thread.editing .composer-pill { border-color: var(--accent); background: var(--accent-softer); }
.composer-send {
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  transition: background .12s, opacity .12s;
}
.composer-send:hover { background: var(--accent-dark); }
.composer-send svg { stroke: #fff; }

.chat-placeholder {
  position: absolute; inset: 52px 0 0 0;
  display: grid; place-content: center; justify-items: center; gap: 4px;
  background: var(--surface);
  color: var(--ink-2); font-size: 13px; text-align: center; padding: 0 40px;
}
.chat-placeholder strong { color: var(--ink-1); font-size: 15px; }
.chat-thread.open .chat-placeholder { display: none; }
.chat-thread:not(.open) .chat-composer,
.chat-thread:not(.open) .chat-thread-head { visibility: hidden; }

.bubble-row { display: flex; gap: 12px; margin-bottom: 14px; }
.bubble-row.grouped { margin-bottom: 4px; }
.bubble-row.mine { flex-direction: row-reverse; }
.bubble-avatar {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: var(--ink-3); color: #fff;
  font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}
.bubble-row.mine .bubble-avatar { background: var(--accent); }
.bubble-spacer { width: 30px; flex: none; }
.bubble-stack { max-width: min(660px, 76%); }
.bubble-row.mine .bubble-stack { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }
.bubble-meta {
  display: flex; gap: 8px; align-items: baseline;
  margin-bottom: 4px; font-size: 11.5px; color: var(--ink-3);
}
.bubble-meta b { color: var(--ink-1); font-size: 12.5px; font-weight: 600; }
.bubble {
  padding: 10px 16px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  line-height: 1.5;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.bubble-row.mine .bubble {
  background: #D6E4FD;
  border-color: #D6E4FD;
}
/* Squared-off inner corner marks where each run of messages starts. */
.bubble-row:not(.grouped) .bubble { border-top-left-radius: 4px; }
.bubble-row.mine:not(.grouped) .bubble { border-top-left-radius: 16px; border-top-right-radius: 4px; }

.chat-empty { padding: 30px 18px; text-align: center; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }

.pick-list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pick {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: var(--radius);
  text-align: left; width: 100%;
}
.pick:hover { background: var(--hover); }
/* who is chosen so far, whatever the search is showing */
.picked-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; max-height: 96px; overflow-y: auto; }
.picked-chips[hidden] { display: none; }
.picked-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent-dark, var(--accent));
  font-size: 12.5px; font-weight: 500;
}
.picked-chip button {
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.picked-chip button:hover { background: rgba(0, 0, 0, .1); }
[data-theme="dark"] .picked-chip { color: #A9C4FF; }
[data-theme="dark"] .picked-chip button:hover { background: rgba(255, 255, 255, .12); }
.pick[hidden] { display: none; }
.pick.kbd { background: var(--accent-soft); }

/* search at the top of "Message a person" */
.dm-search { position: relative; margin-bottom: 6px; }
.dm-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px;
  fill: none; stroke: var(--ink-3); stroke-width: 1.9; stroke-linecap: round;
  pointer-events: none;
}
.dm-search input {
  width: 100%; height: 42px; padding: 0 12px 0 38px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 14px; outline: none;
}
.dm-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dm-count { min-height: 18px; margin: 0 2px 6px; font-size: 12px; color: var(--ink-3); }
/* keep the window the same size while the list shrinks, so it doesn't jump */
#dmList { height: 340px; }
.pick-name { display: block; font-weight: 500; }
.pick-sub { display: block; font-size: 12px; color: var(--ink-2); }
.field-label { display: block; font-size: 12.5px; color: var(--ink-2); margin: 16px 0 8px; }

/* ---------- groups ---------- */

.conv-section {
  padding: 14px 12px 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 6px;
}
.section-count {
  background: var(--surface-2); color: var(--ink-2);
  border-radius: var(--radius-pill);
  padding: 1px 7px; font-size: 10.5px; letter-spacing: 0;
}
.chat-empty.small { padding: 10px 12px; text-align: left; font-size: 12px; }

.owner-tag {
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 10px; font-weight: 600; letter-spacing: .3px;
  flex: none;
}

.member-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
}
.member-row:last-child { border-bottom: 0; }
.member-body { flex: 1; min-width: 0; }
.member-row .ghost-btn { height: 28px; padding: 0 10px; font-size: 12px; }

/* ---------- connected mailboxes ---------- */

.account-row { display: flex; align-items: center; gap: 10px; }
.account-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.account-dot.off { background: var(--ink-3); }
.account-dot.err { background: #C9372E; }
.account-error {
  margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: #C9372E;
  max-width: 340px; white-space: normal; /* the explanation says what to do; show all of it */
}
[data-theme="dark"] .account-error { color: #F0908A; }

/* ---------- colour icons ---------- */

.nav-icon { width: 19px; height: 19px; flex: none; }
.rail-icon { width: 22px; height: 22px; flex: none; }
.nav-item.active .nav-icon { filter: saturate(1.15); }

/* ---------- reader actions ---------- */

.reader-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pill-btn {
  height: 36px; padding: 0 18px 0 14px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  background: #fff;
}
.pill-btn:hover { background: var(--hover); border-color: var(--ink-3); }
.pill-btn svg { width: 17px; height: 17px; }

/* ---------- attachments ---------- */

.linkish {
  margin-left: auto; flex: none;
  color: var(--ink-2); font-size: 12px;
  padding: 2px 6px; border-radius: 4px;
}
.linkish:hover { background: var(--hover); color: var(--ink-1); }

.attach-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px 0;
}
.attach-chip {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: 12px;
}
.attach-chip svg { width: 14px; height: 14px; flex: none; }
.attach-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-size { color: var(--ink-3); flex: none; }
.attach-x {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-2);
}
.attach-x:hover { background: var(--line); color: var(--ink-1); }
.attach-x svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.2; fill: none; }

.composer-foot #attachBtn { width: 32px; height: 32px; }

/* ---------- inline reply ---------- */

.composer.inline {
  position: static;
  width: 100%;
  max-width: 900px;
  margin: 26px 0 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: hidden;
}
.composer.inline .composer-head { border-radius: 0; }

/* ---------- rich text ---------- */

.rt-body {
  min-height: 200px;
  max-height: 460px;
  overflow-y: auto;
  padding: 14px 16px;
  outline: none;
  line-height: 1.55;
}
.rt-body:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-3);
}
.rt-body blockquote {
  margin: 8px 0 8px 4px;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
  color: var(--ink-2);
}
.rt-body .quoted-head { color: var(--ink-2); font-size: 12.5px; margin-top: 12px; }
.rt-body table { border-collapse: collapse; }
.rt-body img { max-width: 100%; }

.rt-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 6px 10px;
  margin: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}
.rt-btn {
  min-width: 28px; height: 28px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 13px; color: var(--ink-1);
  display: inline-flex; align-items: center; justify-content: center;
}
.rt-btn:hover { background: var(--line); }
.rt-select {
  height: 28px;
  border: 0; background: none;
  font: inherit; font-size: 12.5px; color: var(--ink-1);
  border-radius: 5px; padding: 0 4px;
}
.rt-select:hover { background: var(--line); }
.rt-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 5px; }
.rt-color { position: relative; overflow: hidden; font-weight: 600; border-bottom: 3px solid currentColor; }
.rt-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.emoji-pop {
  margin: 8px 12px 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  max-height: 180px; overflow-y: auto;
}
.emoji { height: 28px; border-radius: 5px; font-size: 17px; line-height: 1; }
.emoji:hover { background: var(--hover); }

/* ---------- brand ---------- */

.brand-lockup { height: 40px; width: 151px; display: block; flex: none; }
.login-card .brand-lockup { height: 52px; width: 196px; margin: 0 auto 4px; }
.brand { align-items: center; }

/* ---------- meetings ---------- */

.meetview {
  position: absolute; inset: var(--top-h) 0 0 var(--rail-w);
  display: none; flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--line);
  z-index: 15;
}
body.meet-mode .meetview { display: flex; }
body.meet-mode .sidebar,
body.meet-mode .main,
body.meet-mode .reader,
body.meet-mode .chatview { display: none; }

.meet-head {
  flex: none;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 32px 16px;
  border-bottom: 1px solid var(--line);
}
.meet-head h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.meet-head .iconbtn { margin-left: auto; }
.meet-body { flex: 1; overflow-y: auto; padding: 18px 32px 60px; }
.meet-section {
  margin: 26px 0 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink-3);
}

.meet-card {
  max-width: 820px;
  display: flex; align-items: center; gap: 18px;
  padding: 16px 18px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.meet-card:hover { border-color: var(--line-strong); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.meet-card.live { border-color: var(--accent); background: var(--accent-softer); }
.meet-main { flex: 1; min-width: 0; }
.meet-title { font-weight: 600; display: flex; align-items: center; gap: 10px; }
.meet-sub { color: var(--ink-2); font-size: 12.5px; margin-top: 3px; }
.meet-provider { color: var(--ink-3); font-size: 11.5px; margin-top: 4px; }
.live-tag {
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .3px;
}
.join-btn {
  flex: none;
  height: 38px; padding: 0 22px;
  display: inline-flex; align-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: 13.5px; font-weight: 500; text-decoration: none;
}
.join-btn:hover { background: var(--accent-dark); }

/* ---------- docked chat ---------- */

.dock { position: fixed; right: 22px; bottom: 22px; z-index: 65; }
body.chat-mode .dock { display: none; }

.dock-bubble {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
  position: relative;
}
.dock-bubble:hover { background: var(--accent-dark); }
.dock-bubble .rail-icon { width: 26px; height: 26px; }
.dock.open .dock-bubble { display: none; }

.dock-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: #EB5757; color: #fff;
  font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
  border: 2px solid #fff;
}

.dock-panel {
  display: none;
  width: 340px; height: 460px;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.2);
  overflow: hidden;
}
.dock.open .dock-panel { display: flex; }

.dock-head {
  flex: none;
  height: 46px;
  display: flex; align-items: center; gap: 4px;
  padding: 0 6px 0 14px;
  background: var(--accent);
  color: #fff;
}
.dock-title { font-weight: 600; font-size: 13.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-head .iconbtn { width: 30px; height: 30px; color: #fff; }
.dock-head .iconbtn:hover { background: rgba(255,255,255,.18); }
.dock-back {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; color: #fff;
}
.dock-back:hover { background: rgba(255,255,255,.18); }

.dock-list { flex: 1; overflow-y: auto; padding: 6px; }
.dock-list .conv-avatar { width: 30px; height: 30px; font-size: 11px; }
.dock-thread { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dock-messages { flex: 1; overflow-y: auto; padding: 14px 14px 6px; }

.dbubble-row { display: flex; margin-bottom: 8px; }
.dbubble-row.mine { justify-content: flex-end; }
.dbubble-stack { max-width: 80%; }
.dbubble-row.mine .dbubble-stack { display: flex; flex-direction: column; align-items: flex-end; }
.dbubble-meta {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 11px; color: var(--ink-3); margin-bottom: 3px;
}
.dbubble-meta b { color: var(--ink-1); font-size: 11.5px; }
.dbubble {
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px; line-height: 1.45;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.dbubble-row.mine .dbubble { background: #D6E4FD; border-color: #D6E4FD; }

.dock-composer {
  flex: none;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
}
.dock-composer textarea {
  flex: 1; resize: none;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  font: inherit; font-size: 13px; line-height: 1.4;
  outline: none; max-height: 100px;
}
.dock-composer textarea:focus { border-color: var(--accent); }

@media (max-width: 560px) {
  .dock { right: 12px; bottom: 12px; }
  .dock-panel { width: calc(100vw - 24px); height: 70vh; }
}

/* ---------- composer window controls ---------- */

.composer-head .win-btn { width: 28px; height: 28px; }
/* the original rule gave every button margin-left:auto, spreading them apart */
.composer-head .iconbtn { margin-left: 0; }
.composer-head #composerMin { margin-left: auto; }
.composer.inline #composerClose { margin-left: auto; }
.composer.inline .win-btn { display: none; }
#composerTitle { cursor: default; }
.composer.min #composerTitle { cursor: pointer; }

/* minimised: just the title bar, parked bottom-right */
.composer.min {
  height: 42px;
  overflow: hidden;
}

/* maximised: centred, filling most of the viewport.
   Scoped to .open, or removing .open would leave it on screen. */
.composer.open.max {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  width: min(1100px, calc(100vw - 80px));
  height: calc(100vh - 90px);
  max-width: none;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.composer.open.max .composer-head { border-radius: 12px 12px 0 0; }
.composer.open.max .rt-body { flex: 1; max-height: none; }
.composer.open.max #composerMax svg rect { fill: currentColor; fill-opacity: .18; }

@media (max-width: 700px) {
  .composer.open.max { width: calc(100vw - 16px); height: calc(100vh - 40px); }
}

/* ---------- avatars ---------- */

.avatar.has-art, .conv-avatar.has-art, .bubble-avatar.has-art {
  background: none !important;
  padding: 0;
  overflow: hidden;
}
.avatar.has-art svg, .avatar.has-art img,
.conv-avatar.has-art svg, .conv-avatar.has-art img,
.bubble-avatar.has-art svg, .bubble-avatar.has-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- chat message actions ---------- */

.bubble-stack { position: relative; }
.msg-actions {
  position: absolute; top: -12px; right: 0;
  display: none; gap: 2px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  z-index: 2;
}
.bubble-row.mine .msg-actions { right: auto; left: 0; }
.bubble-row:hover .msg-actions { display: flex; }
.msg-act {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; color: var(--ink-2);
}
.msg-act:hover { background: var(--hover); }

.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.reaction {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: 12px;
}
.reaction.mine { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.reaction:hover { border-color: var(--ink-3); }

.edited-tag { color: var(--ink-3); font-size: 11px; margin-left: 6px; }
.deleted-body { color: var(--ink-3); font-style: italic; }

.msg-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.msg-file {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-1);
  font-size: 12.5px; text-decoration: none;
}
.msg-file:hover { background: var(--hover); }
.msg-image { max-width: 280px; border-radius: 10px; display: block; border: 1px solid var(--line); }

.mention {
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 0 4px; border-radius: 4px; font-weight: 500;
}

/* ---------- chat composer extras ---------- */

.chat-tools {
  display: flex; align-items: center; gap: 1px;
  padding: 0 6px;
  margin-bottom: 1px;
  border-right: 1px solid var(--line-strong);
}
.chat-tool {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-2); font-size: 15px;
}
.chat-tool:hover { background: var(--hover); }
.chat-tool svg { width: 17px; height: 17px; }

.mention-pop {
  position: absolute; bottom: 100%; left: 0;
  margin-bottom: 8px;
  min-width: 240px; max-height: 220px; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  padding: 5px;
  z-index: 5;
}
.mention-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 7px 9px;
  border-radius: 6px; text-align: left;
}
.mention-item:hover, .mention-item.active { background: var(--accent-soft); }
.mention-item .avatar { width: 26px; height: 26px; font-size: 10px; }

/* ---------- chat search ---------- */

.chat-search {
  display: none;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
}
.chat-search.open { display: block; }
.chat-search input {
  width: 100%; max-width: 940px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-1);
  outline: none;
}
.chat-search input:focus { border-color: var(--accent); }
.search-results { max-width: 940px; margin: 0 auto; }
.search-hit {
  padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.search-hit:hover { background: var(--hover); }
.search-hit .who { font-weight: 600; font-size: 12.5px; }
.search-hit .when { color: var(--ink-3); font-size: 11.5px; margin-left: 8px; }
.search-hit .what { margin-top: 3px; color: var(--ink-2); font-size: 13px; }

/* ---------- sidebar show more ---------- */

.show-toggle {
  width: 100%;
  padding: 7px 12px;
  text-align: left;
  color: var(--accent-dark);
  font-size: 12.5px; font-weight: 500;
  border-radius: var(--radius);
}
.show-toggle:hover { background: var(--hover); }
.pin-mark { color: var(--ink-3); font-size: 11px; flex: none; }
.conv.pinned .pin-mark { color: var(--accent); }

/* ---------- settings ---------- */

.settings-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.settings-tab {
  padding: 9px 14px; font-size: 13px; color: var(--ink-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.settings-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 500; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }

.avatar-preview {
  width: 96px; height: 96px; border-radius: 50%;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  font-size: 32px; font-weight: 600; color: #fff;
  overflow: hidden;
}
.avatar-preview svg, .avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

.illus-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-top: 12px;
}
.illus-pick {
  aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 2px solid transparent;
}
.illus-pick svg { width: 100%; height: 100%; display: block; }
.illus-pick:hover, .illus-pick.active { border-color: var(--accent); }

.theme-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.theme-pick {
  padding: 9px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font-size: 13px;
}
.theme-pick.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.accent-dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent;
}
.accent-dot.active { border-color: var(--ink-1); }

.settings-body textarea {
  width: 100%; min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-1);
  font: inherit; resize: vertical; outline: none;
}
.settings-body textarea:focus { border-color: var(--accent); }

/* ---------- conversation rows, Gmail Chat style ---------- */

.conv {
  position: relative;
  padding: 8px 10px;
  gap: 12px;
}
.conv-body { display: block; }
/* The message itself is the primary line; the name sits above it, quieter. */
.conv-name {
  display: block;
  font-size: 11.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-snippet {
  display: block;
  margin-top: 1px;
  font-size: 13.5px; color: var(--ink-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv.unread .conv-name { color: var(--ink-1); font-weight: 600; }
.conv.unread .conv-snippet { font-weight: 600; }
.conv-right {
  display: flex; align-items: center; gap: 6px;
  flex: none;
}
.conv-when { font-size: 11px; color: var(--ink-3); flex: none; }
.conv.muted .conv-snippet, .conv.muted .conv-name { color: var(--ink-3); font-weight: 400; }

.conv-dots {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  display: none; place-items: center;
  color: var(--ink-2); font-size: 15px; line-height: 1;
}
.conv:hover .conv-dots, .conv.menu-open .conv-dots { display: grid; }
.conv-dots:hover { background: rgba(0,0,0,.08); }
/* the timestamp gives way to the menu button on hover, so nothing shifts */
.conv:hover .conv-when, .conv.menu-open .conv-when { display: none; }
.pin-mark { font-size: 10px; }

.conv-menu {
  position: fixed;
  min-width: 236px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  padding: 6px;
  z-index: 90;
}
.conv-menu button {
  width: 100%;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  text-align: left;
  font-size: 13.5px;
  color: var(--ink-1);
}
.conv-menu button:hover { background: var(--hover); }
.conv-menu svg { margin-top: 1px; color: var(--ink-2); flex: none; }
.conv-menu small { display: block; color: var(--ink-2); font-size: 11.5px; margin-top: 1px; }
.conv-menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

[data-theme="dark"] .conv-menu { background: var(--surface-2); }
[data-theme="dark"] .conv-dots:hover { background: rgba(255,255,255,.1); }

/* search results rendered into the thread from the global search bar */
.search-scope {
  display: flex; align-items: center; gap: 10px;
  max-width: 940px; margin: 0 auto 14px;
  padding: 9px 14px;
  background: var(--accent-soft); color: var(--accent-dark);
  border-radius: var(--radius);
  font-size: 12.5px;
}
.search-scope button { margin-left: auto; color: inherit; text-decoration: underline; font-size: 12.5px; }

@media (max-width: 860px) {
  .chat-side { width: 100%; }
  .conv-menu { min-width: 200px; }
}

/* ---------- sign-in page ---------- */

body.login-fluid {
  min-height: 100vh;
  margin: 0;
  display: grid; place-items: center;
  padding: 48px 24px;
  background: linear-gradient(135deg, #E3E5EA 0%, #DDDFE5 45%, #E9EAEE 100%);
  color: #1B1D2A;
}

.fluid-card {
  width: min(1080px, 100%);
  min-height: 560px;
  display: grid; grid-template-columns: 44% 56%;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(27, 29, 42, .16);
}

.fluid-pane { padding: 60px 56px; display: flex; flex-direction: column; }
.fluid-pane h1 {
  margin: 0 0 44px;
  font-size: 26px; font-weight: 700; letter-spacing: -.3px;
  color: #1B2559;
}
.fluid-pane .field { margin-bottom: 18px; }
.fluid-pane label { display: block; font-size: 12.5px; color: #5B5F70; margin-bottom: 7px; }

.control {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px;
  border: 1px solid #E2E4EA; border-radius: 6px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.control:focus-within { border-color: #4A3AFF; box-shadow: 0 0 0 3px rgba(74, 58, 255, .12); }
.control > svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: #A6AAB8; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.control input {
  flex: 1; height: 100%;
  border: 0; outline: none; background: none;
  font: inherit; font-size: 13.5px; color: #1B1D2A;
}
.control input::placeholder { color: #A6AAB8; }
.peek { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.peek svg { width: 16px; height: 16px; fill: none; stroke: #A6AAB8; stroke-width: 1.7; }
.peek:hover { background: #F1F2F6; }
.peek.on svg { stroke: #4A3AFF; }

.fluid-pane .cta {
  width: 100%; height: 44px; margin-top: 10px;
  border: 0; border-radius: 6px;
  background: #4A3AFF; color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.fluid-pane .cta:hover { background: #3B2BE8; transform: translateY(-1px); }
.fluid-pane .cta[disabled] { opacity: .6; cursor: default; transform: none; }

.fluid-pane .login-error {
  display: none;
  margin-top: 14px; padding: 10px 12px;
  background: #FDECEA; color: #B3261E;
  border-radius: 6px; font-size: 12.5px;
}
.fluid-pane .login-error.show { display: block; }

/* Single sign-on button, and the line that separates it from the password form */
.fluid-pane .cta.sso-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 0;
  background: #fff; color: #1B2559;
  border: 1px solid #D8DBE4;
}
.fluid-pane .cta.sso-cta:hover { background: #F7F8FB; }
.cta.sso-cta svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: #4A3AFF; stroke-width: 1.8; stroke-linecap: round;
}
.sso-or {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 18px;
  font-size: 11.5px; color: #8A8E9C;
}
.sso-or::before, .sso-or::after {
  content: ''; flex: 1; height: 1px; background: #E7E9EF;
}

[data-theme="dark"] .fluid-pane .cta.sso-cta {
  background: var(--surface-2, #1C1F27); color: var(--ink-1, #E6E8EF);
  border-color: var(--line-strong, #2B2F3A);
}
[data-theme="dark"] .fluid-pane .cta.sso-cta:hover { background: var(--hover, #242833); }
[data-theme="dark"] .sso-or { color: var(--ink-3, #8A8E9C); }
[data-theme="dark"] .sso-or::before,
[data-theme="dark"] .sso-or::after { background: var(--line, #2B2F3A); }

.meta { margin: 16px 0 0; font-size: 12.5px; color: #5B5F70; }
.meta a { color: #4A3AFF; text-decoration: none; }
.rule { height: 1px; background: #E7E9EF; margin: 32px 0 20px; }
.help { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #1B2559; }
.help svg { width: 16px; height: 16px; fill: none; stroke: #1B2559; stroke-width: 1.8; stroke-linecap: round; }
.help-body { margin: 8px 0 14px; font-size: 12px; line-height: 1.6; color: #8A8E9C; max-width: 280px; }
.help-link { font-size: 12.5px; color: #4A3AFF; text-decoration: none; }

/* Dark ground so the clip's glow reads; the clip itself is on black. */
.fluid-media {
  position: relative; overflow: hidden;
  border-top-left-radius: 76px;
  background: radial-gradient(90% 80% at 55% 45%, #12132B 0%, #08080F 60%, #050509 100%);
}
.fluid-media .stage { position: absolute; inset: 0; display: grid; place-items: center; }
.cube-video {
  width: min(88%, 470px); height: auto; display: block;
  /* screen blending dissolves the clip's black edges into the panel */
  mix-blend-mode: screen;
}
.brandline {
  position: absolute; left: 56px; bottom: 44px;
  font-size: 12px; letter-spacing: 2.4px; color: #6F7290; text-transform: uppercase;
}

@media (max-width: 900px) {
  .fluid-card { grid-template-columns: 1fr; min-height: 0; }
  .fluid-media { display: none; }
  .fluid-pane { padding: 44px 30px; }
}

/* ---------- split sign-in page ---------- */

body.login-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 46% 54%;
  background: #fff;
}

/* Left panel: the geometry is SVG so it stays sharp at any width, with the
   photo layered on top and planted on the bottom edge. */
.login-art {
  position: relative;
  overflow: hidden;
  background: #E4EBFC url('/login-pattern.svg') no-repeat center;
  /* the pattern is abstract, so stretching to fill beats cropping it */
  background-size: 100% 100%;
}
.art-photo {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(96%, 700px);
  height: auto;
  display: block;
}
.art-logo {
  position: absolute; top: 42px; left: 44px;
  height: 40px; width: auto;
  z-index: 2;
}

.login-pane { display: grid; place-items: center; padding: 40px 32px; }
.login-box { width: 100%; max-width: 356px; }

.lockup { display: flex; align-items: center; gap: 10px; margin: 0 0 26px -2px; }
.lockup-mark { width: 38px; height: 32px; flex: none; }
.lockup-word { font-size: 25px; font-weight: 800; letter-spacing: -.6px; color: var(--ink-1); line-height: 1; }
.lockup-word span { color: var(--accent); }
.lockup-word .lockup-t { color: #DC2626; margin-left: -0.06em; }

.login-box h1 { margin: 0 0 5px; font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.login-box .login-sub { margin: 0 0 22px; text-align: left; color: var(--ink-2); font-size: 13.5px; }
.login-box .field { margin-bottom: 14px; }
.login-box .field input { height: 46px; border-radius: 10px; }
.login-box .send-btn { width: 100%; height: 48px; margin-top: 6px; border-radius: 10px; font-size: 15px; font-weight: 600; }

.pass-wrap { position: relative; display: block; }
.pass-wrap input { padding-right: 44px; }
.pass-wrap .peek {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
}
.peek svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; }
.pass-wrap .peek:hover { background: var(--hover); }
.pass-wrap .peek.on svg { stroke: var(--accent); }

.login-foot { margin: 18px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.6; }

@media (max-width: 980px) {
  body.login-split { grid-template-columns: 1fr; }
  .login-art { display: none; }
}

/* ---------- labels ---------- */

.nav-caption { display: flex; align-items: center; }
.cap-add {
  margin-left: auto; width: 20px; height: 20px;
  border-radius: 50%; font-size: 15px; line-height: 1;
  color: var(--ink-2); display: grid; place-items: center;
}
.cap-add:hover { background: var(--hover); color: var(--ink-1); }

#labelNav .nav-item { position: relative; }
.label-x {
  margin-left: auto; display: none;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 14px; line-height: 16px; text-align: center;
  color: var(--ink-3);
}
#labelNav .nav-item:hover .label-x { display: block; }
.label-x:hover { background: var(--line); color: var(--ink-1); }
#labelNav .nav-item:hover .count { display: none; }

.row-chip {
  display: inline-block;
  padding: 1px 7px; margin-right: 6px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 500;
  vertical-align: middle;
}

/* ---------- reading pane ---------- */

.mail-frame { width: 100%; border: 0; min-height: 200px; display: block; }

/* ---------- proofreading ---------- */

.ai-btn { white-space: nowrap; font-size: 12px; }
.rt-btn.ai-btn { padding: 0 10px; }
.ai-btn[disabled] { opacity: .55; cursor: default; }

/* ---------- admin reports ---------- */

.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.stat {
  flex: 1; min-width: 128px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2);
}
.stat b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
.stat span { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar input[type="search"] { flex: 1; min-width: 220px; }
.filter-bar input, .filter-bar select {
  height: 34px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 13px; outline: none;
}
.filter-bar input:focus, .filter-bar select:focus { border-color: var(--accent); }

.pager {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; font-size: 12.5px; color: var(--ink-2);
}
.pager .ghost-btn[disabled] { opacity: .45; }

.pick[disabled] { opacity: .55; cursor: default; }
.pick[disabled]:hover { background: none; }
.pick .pick-sub { margin-left: auto; }

/* placeholder shown while a message body is on its way */
.body-skeleton { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.body-skeleton span {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--hover) 50%, var(--surface-2) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.2s linear infinite;
}
.body-skeleton span:nth-child(1) { width: 82%; }
.body-skeleton span:nth-child(2) { width: 94%; }
.body-skeleton span:nth-child(3) { width: 61%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .body-skeleton span { animation: none; } }

/* coloured sender avatar in the message list */
.row-avatar {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  color: #fff; font-size: 10.5px; font-weight: 600;
  display: grid; place-items: center;
  letter-spacing: .2px;
}
.row-from { padding-left: 2px; }

#ruleLine { margin-top: 14px; align-items: flex-start; }
#ruleLine b { font-weight: 600; }

/* ---------- contacts ---------- */

.contactsview {
  position: absolute; inset: var(--top-h) 0 0 var(--rail-w);
  display: none; flex-direction: column;
  background: var(--surface);
  border-top: 1px solid var(--line);
  z-index: 15;
}
body.contacts-mode .contactsview { display: flex; }
body.contacts-mode .sidebar,
body.contacts-mode .main,
body.contacts-mode .reader,
body.contacts-mode .chatview,
body.contacts-mode .meetview { display: none; }

#contactSearch {
  margin-left: auto;
  height: 36px; width: 260px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-1);
  font: inherit; font-size: 13px; outline: none;
}
#contactSearch:focus { border-color: var(--accent); background: var(--surface); }

.contact-row {
  display: flex; align-items: center; gap: 14px;
  max-width: 860px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.contact-row:hover { background: var(--surface-2); }
.contact-body { flex: 1; min-width: 0; }
.contact-count { color: var(--ink-3); font-size: 12px; flex: none; }

/* ---------- address suggestions ---------- */

.composer-field { position: relative; }
.suggest {
  position: absolute; left: 56px; right: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  padding: 5px; z-index: 20;
  max-height: 260px; overflow-y: auto;
}
.suggest-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 9px;
  border-radius: 6px; text-align: left;
}
.suggest-item:hover { background: var(--hover); }
.suggest-item .avatar { width: 26px; height: 26px; font-size: 10px; }

/* ---------- sender rules ---------- */

.rule-list { margin-top: 4px; }
.rule-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 2px;
  font-size: 12.5px;
}
.rule-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-x {
  width: 20px; height: 20px; border-radius: 50%;
  color: var(--ink-3); font-size: 14px; line-height: 1;
}
.rule-x:hover { background: var(--line); color: var(--ink-1); }

/* ---------- people search in groups ---------- */

.member-search {
  width: 100%; height: 38px; padding: 0 12px; margin-bottom: 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 13px; outline: none;
}
.member-search:focus { border-color: var(--accent); }
.checkline .avatar { width: 26px; height: 26px; font-size: 10px; flex: none; }
.checkline { gap: 10px; }

#ruleEmail, #ruleLabel {
  height: 40px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 13px; outline: none;
}
#ruleEmail:focus, #ruleLabel:focus { border-color: var(--accent); }
#ruleLabel { max-width: 140px; }

/* ---------- labels & filters panel ---------- */

.label-modal { max-width: 520px; }
.label-modal .settings-nav { margin-bottom: 16px; }

.inline-row { display: flex; gap: 8px; align-items: center; }
.inline-row input[type="text"], .inline-row #newLabelName { flex: 1; }
.inline-row input[type="color"] { width: 42px; height: 40px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
#newLabelName {
  flex: 1; height: 40px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-1); font: inherit; outline: none;
}
#newLabelName:focus { border-color: var(--accent); }

.filter-build {
  display: grid;
  grid-template-columns: 118px 1fr 130px;
  gap: 8px;
  margin-bottom: 20px;
}
.filter-build #addRuleBtn { grid-column: 1 / -1; }
.filter-build select, .filter-build input {
  height: 40px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 13px; outline: none;
}
.filter-build select:focus, .filter-build input:focus { border-color: var(--accent); }

.rule-list { margin-bottom: 14px; }
.rule-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 12.5px;
}

/* label panel tabs — kept separate from the settings tabs so their
   click handlers don't collide */
.ltab {
  padding: 9px 14px; font-size: 13px; color: var(--ink-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ltab.active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 500; }
.lpanel { display: none; }
.lpanel.active { display: block; }

/* ==========================================================================
   Console shell — floating rail, folder strip, card-style lists.
   Appended last so it wins over the earlier layout rules.
   ========================================================================== */

body.shell-ui {
  background: linear-gradient(120deg, #8E9BAE 0%, #B7BFCB 22%, #E7E9ED 45%);
}
[data-theme="dark"] body.shell-ui body {
  background: linear-gradient(120deg, #0C1017 0%, #131922 30%, #1A212B 60%);
}

body.shell-ui .topbar {
  position: absolute; top: 14px; left: 118px; right: 0;
  height: 62px;
  background: none; border: 0;
  padding: 0 26px 0 0;
  z-index: 22;
}
body.shell-ui .topbar .search {
  max-width: 720px; height: 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
body.shell-ui .compose-top {
  height: 42px; padding: 0 20px;
  border-radius: 12px;
  background: #0F1620; color: #fff;
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 9px;
  white-space: nowrap;
}
.compose-top:hover { background: #1D2733; }
.compose-top svg { stroke: #fff; }
[data-theme="dark"] .compose-top { background: var(--accent); }

/* --- rail --- */
body.shell-ui .rail {
  position: fixed; top: 14px; bottom: 14px; left: 0;
  width: 104px;
  background: none; border: 0;
  padding: 8px 0 0;
  align-items: center;
  z-index: 26;
}
body.shell-ui .rail-mark {
  width: 52px; height: 52px; flex: none;
  border-radius: 16px;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .22);
  overflow: hidden;
}
.rail-mark svg { width: 52px; height: 46px; }
body.shell-ui .rail-group {
  margin-top: 16px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(6px);
  border-radius: 22px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
}
[data-theme="dark"] .rail-group { background: rgba(28, 32, 38, .82); }
body.shell-ui .rail .rail-item {
  width: 44px; height: 48px;
  border-radius: 14px;
  gap: 3px; font-size: 9.5px;
}
.rail .rail-item.active { background: var(--surface); color: var(--ink-1); box-shadow: 0 2px 8px rgba(15,23,42,.14); }
.rail .rail-item:hover:not(.active) { background: rgba(255,255,255,.55); }

/* --- panes sit inside one rounded sheet --- */
.shell { height: 100vh; padding: 0; border: 0; }
body.shell-ui .main, body.shell-ui .chatview, body.shell-ui .meetview, body.shell-ui .contactsview, body.shell-ui .reader {
  position: absolute;
  top: 14px; bottom: 14px; right: 0; left: 118px;
  background: #F4F5F7;
  border-radius: 22px 0 0 22px;
  border: 0;
}
[data-theme="dark"] .main,
[data-theme="dark"] .chatview,
[data-theme="dark"] .meetview,
[data-theme="dark"] .contactsview,
[data-theme="dark"] .reader { background: var(--surface-2); }
.main { display: flex; flex-direction: column; padding-top: 76px; }
.chatview, .meetview, .contactsview { padding-top: 76px; }
.reader { padding-top: 62px; z-index: 20; }

/* --- folder strip --- */
body.shell-ui .folders {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding: 0 26px 14px;
}
.folders .nav { flex-direction: row; gap: 8px; flex-wrap: wrap; }
body.shell-ui .folders .nav-item {
  height: 36px; width: auto;
  padding: 0 15px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: #4A5361;
  font-size: 13px; font-weight: 500;
  gap: 8px;
}
[data-theme="dark"] .folders .nav-item { color: var(--ink-2); }
.folders .nav-item:hover { border-color: var(--line-strong); background: var(--surface); }
body.shell-ui .folders .nav-item.active {
  background: #0F1620; border-color: #0F1620; color: #fff; font-weight: 600;
}
[data-theme="dark"] .folders .nav-item.active { background: var(--accent); border-color: var(--accent); }
.folders .nav-item.active .count { color: rgba(255,255,255,.7); }
.folders .nav-icon { width: 16px; height: 16px; }
.folders .count { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.fsep { width: 1px; height: 22px; background: var(--line-strong); margin: 0 2px; flex: none; }
body.shell-ui .fchip.ghost {
  height: 36px; padding: 0 14px;
  border: 1px dashed var(--line-strong); border-radius: 11px;
  color: var(--ink-3); font-size: 13px;
}
.fchip.ghost:hover { color: var(--ink-1); border-color: var(--ink-3); }

/* --- list heading --- */
body.shell-ui .list-heading {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 26px 11px 32px;
}
body.shell-ui .lh-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 16.5px; font-weight: 600; letter-spacing: -.2px;
}
.head-sw { width: 11px; height: 11px; border-radius: 3px; }
.lh-range { font-size: 12.5px; color: var(--ink-3); }

/* --- the list itself becomes a card --- */
body.shell-ui .listbar {
  flex: none; height: 40px;
  margin: 0 0 0 26px;
  padding: 0 14px;
  border: 0;
  background: none;
}
body.shell-ui .list {
  margin-left: 26px;
  background: var(--surface);
  border-radius: 16px 0 0 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
body.shell-ui .row {
  height: 52px;
  padding: 0 26px 0 20px;
  gap: 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.row.unread { background: var(--surface); }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); box-shadow: none; }
.row.selected { background: var(--accent-softer); }
.row-from { width: 190px; }
.row-subject { flex: none; }
.row-date { width: 92px; }

/* --- chat --- */
.chat-side { border-right: 0; padding-right: 18px; }
.chat-side-head { border-bottom: 0; padding-left: 26px; }
.chat-convs { padding: 0 0 0 26px; }
.conv-section { padding: 10px 4px 8px; }
body.shell-ui .chat-convs .conv {
  background: var(--surface);
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.chat-convs .conv:hover { background: var(--surface-2); }
.chat-convs .conv.active { background: var(--accent-soft); }
body.shell-ui .chat-thread {
  background: var(--surface);
  border-radius: 16px 0 0 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  overflow: hidden;
}
.bubble-row.mine .bubble { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- other panes get the same card treatment --- */
.meet-head, .contactsview .meet-head { padding: 4px 26px 16px 32px; border-bottom: 0; }
.meet-body { padding: 0 26px 40px 26px; }
body.shell-ui .meet-card, body.shell-ui .contact-row {
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--line);
}
.contact-row { margin-bottom: 8px; border-bottom: 1px solid var(--line); }

@media (max-width: 760px) {
  .topbar { position: static; left: 0; padding: 0 10px; height: var(--top-h); }
  .rail { position: fixed; }
  .rail-mark, .rail-group { display: none; }
  .rail { flex-direction: row; }
  body.shell-ui .main, body.shell-ui .chatview, body.shell-ui .meetview, body.shell-ui .contactsview, body.shell-ui .reader {
    left: 0; right: 0; top: var(--top-h); bottom: var(--bottom-h);
    border-radius: 0; padding-top: 0;
  }
  .folders { padding: 10px 12px; overflow-x: auto; flex-wrap: nowrap; }
  .list, .listbar, .list-heading { margin-left: 0; }
  .list { border-radius: 0; }
  .compose-top { padding: 0 14px; }
}

/* account avatar sits at the foot of the rail */
.rail #avatarBtn { margin-top: auto; margin-bottom: 6px; width: 38px; height: 38px; }
.menu { top: auto; bottom: 20px; left: 118px; right: auto; }

/* the hamburger and lockup are for mobile; the rail carries the mark on desktop */
@media (min-width: 761px) {
  #menuBtn { display: none; }
  .topbar .brand { margin-left: 4px; }

}

/* the lockup keeps its original size and position in the top bar */
body.shell-ui .brand-lockup { height: 40px; width: 151px; flex: none; }
body.shell-ui .rail { padding-top: 16px; }
body.shell-ui .rail-group { margin-top: 0; }

/* group illustrations */
.conv-avatar.has-art { background: none !important; padding: 0; overflow: hidden; }
.conv-avatar.has-art svg { width: 100%; height: 100%; display: block; }
.thread-avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 600;
}
.thread-avatar svg { width: 100%; height: 100%; display: block; }

.first-note { margin: 0 0 24px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }

/* ---------- admin console: same shell as mail ---------- */

body.admin-ui { padding: 0; }
body.admin-ui .admin { display: none; }
@media (min-width: 901px) {
  body.admin-ui .admin {
    display: block;
    position: absolute; top: 14px; bottom: 14px; right: 0; left: 118px;
    max-width: none; margin: 0;
    padding: 76px 26px 26px;
    background: #F4F5F7;
    border-radius: 22px 0 0 22px;
    overflow-y: auto;
  }
  [data-theme="dark"] body.admin-ui .admin { background: var(--surface-2); }
  body.admin-ui .topbar {
    position: absolute; top: 14px; left: 118px; right: 0;
    height: 62px; padding: 0 26px 0 0;
    background: none; border: 0; z-index: 22;
  }
  body.admin-ui .tabs { display: none; }
  body.admin-ui .admin-narrow { display: none; }
}
body.admin-ui .rail.admin-rail { justify-content: flex-start; padding-top: 16px; }
body.admin-ui .rail-item { text-decoration: none; }
body.admin-ui .panel {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 22px 24px;
  margin-bottom: 18px;
}
body.admin-ui .grid { border: 0; }
body.admin-ui .grid th { background: var(--surface-2); }

/* ---------- whitelist ---------- */

.wl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; }
.wl-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.wl-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.wl-head h3 { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
.wl-head .hint { margin: 0; }
.wl-body { padding: 18px 20px 20px; }
.wl-body .inline-row { margin-bottom: 14px; }
.wl-body input {
  flex: 1; height: 38px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-1); font: inherit; font-size: 13px; outline: none;
}
.wl-body input:focus { border-color: var(--accent); }
/* ---------- single sign-on panel ---------- */

#tab-sso .wl-card + .wl-card { margin-top: 16px; }
.sso-state { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sso-state:empty { display: none; }
.sso-last {
  max-width: 820px; margin: 0 0 16px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--line);
  font-size: 13px; line-height: 1.55;
}
.sso-last p { margin: 4px 0 6px; }
.sso-last details { font-size: 12px; }
.sso-last summary { cursor: pointer; opacity: .8; }
.sso-last code { display: block; margin-top: 6px; white-space: pre-wrap; word-break: break-word; font-size: 11.5px; }
.sso-last.bad { background: #FDEBE9; border-color: #F3C6C2; color: #8A231B; }
.sso-last.good { background: #E7F6EC; border-color: #BFE5CB; color: #14532D; }
[data-theme="dark"] .sso-last.bad { background: rgba(220,80,70,.12); border-color: rgba(220,80,70,.35); color: #F5B3AE; }
[data-theme="dark"] .sso-last.good { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #86EFAC; }
.sso-state.on { color: #15803D; }
[data-theme="dark"] .sso-state.on { color: #4ADE80; }
#tab-sso .hint a { color: var(--accent); text-decoration: none; word-break: break-all; }
#tab-sso .hint a:hover { text-decoration: underline; }

/* the three values an admin copies into the identity provider */
.sso-copy {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 13px; margin-bottom: 9px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.sso-copy > div { min-width: 0; flex: 1; }
.sso-copy-k {
  display: block; margin-bottom: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-3);
}
.sso-copy-k em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.sso-copy code {
  display: block; overflow-x: auto; white-space: nowrap;
  font-size: 12.5px; color: var(--ink-1);
}
.sso-copy .ghost-btn { flex: none; }

.sso-label {
  display: block; margin: 14px 0 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.wl-body > .sso-label:first-child { margin-top: 0; }

#tab-sso textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.5; resize: vertical; outline: none;
}
#tab-sso textarea:focus { border-color: var(--accent); }
#tab-sso textarea.sso-nudge { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transition: box-shadow .2s; }

.sso-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 720px) { .sso-grid { grid-template-columns: 1fr; } }
.sso-grid input { width: 100%; }

.sso-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-1); cursor: pointer;
}
.sso-check input { flex: none; width: auto; height: auto; }

/* what the loaded certificate is, and whether it is about to run out */
.sso-cert {
  margin-top: 12px; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
}
.sso-cert:empty { display: none; }
.sso-cert b { color: var(--ink-1); font-weight: 600; }
.sso-cert code { font-size: 11px; word-break: break-all; }
.sso-cert.warn { border-color: #F0C36D; background: #FDF6E3; color: #8A6116; }
.sso-cert.warn b { color: #6B4A0F; }
.sso-cert.bad { border-color: #F3C6C2; background: #FDEBE9; color: #A6332A; }
.sso-cert.bad b { color: #8A231B; }
[data-theme="dark"] .sso-cert.warn { background: rgba(240,195,109,.1); color: #E5C07B; }
[data-theme="dark"] .sso-cert.warn b { color: #F0D6A0; }
[data-theme="dark"] .sso-cert.bad { background: rgba(220,80,70,.12); color: #F0908A; }
[data-theme="dark"] .sso-cert.bad b { color: #F5B3AE; }

/* the account-matching report */
.sso-rows { display: flex; flex-direction: column; gap: 1px; }
.sso-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.sso-row:last-child { border-bottom: 0; }
.sso-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-1); }
.sso-row-addr { color: var(--ink-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46%; }
.sso-row-addr.none { color: #C9372E; }
[data-theme="dark"] .sso-row-addr.none { color: #F0908A; }
.sso-tag {
  flex: none; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-3);
  font-size: 11px; font-weight: 600;
}

.wl-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; min-height: 34px; }
.wl-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 12.5px; font-weight: 500;
}
.wl-chip.off { background: var(--surface-2); color: var(--ink-3); }
.wl-chip button { width: 18px; height: 18px; border-radius: 50%; color: inherit; font-size: 14px; line-height: 1; }
.wl-chip button:hover { background: rgba(0,0,0,.1); }

/* toggle switch */
.toggle { margin-left: auto; flex: none; display: inline-flex; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .track {
  width: 44px; height: 25px; border-radius: 99px;
  background: var(--line-strong);
  position: relative; transition: background .16s;
}
.toggle .track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .16s;
}
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::after { transform: translateX(19px); }
.toggle input:focus-visible + .track { box-shadow: 0 0 0 3px var(--accent-soft); }

/* the admin sprite is stroke-based; make sure the rail renders it that way */
body.admin-ui .rail-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.admin-ui .rail-item { color: var(--ink-2); }
body.admin-ui .rail-item.active { color: var(--ink-1); }

/* ==========================================================================
   Refinements: brand, rail compose, tighter gap, search, replies, dark mode.
   ========================================================================== */

/* --- brand --- */
body.shell-ui .brand-logo { height: 26px; width: auto; flex: none; }
body.shell-ui .dark-only { display: none; }
[data-theme="dark"] body.shell-ui .light-only { display: none; }
[data-theme="dark"] body.shell-ui .dark-only { display: block; }

/* --- compose in the rail --- */
/* the rail is already fixed at top:14px, matching the sheet; padding here
   would push its rounded corner below the sheet's */
body.shell-ui .rail, body.admin-ui .rail, body.settings-page .rail { padding-top: 0; }

body.shell-ui .compose-rail {
  /* Same card shape as a rail item, tinted rather than white so it never
     competes with the "you are here" marker on the active section. */
  position: static;
  width: 44px; height: 54px; flex: none;
  margin: 0 0 4px;
  border-radius: 14px;
  background: var(--accent-softer);
  box-shadow: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 3px;
  color: var(--accent-dark);
  font-size: 9.5px; font-weight: 500;
  transition: background .12s;
}
body.shell-ui .compose-rail:hover { background: var(--accent-soft); transform: none; box-shadow: none; }
body.shell-ui .compose-rail svg {
  width: 19px; height: 19px;
  margin-top: 2px;               /* puts the icon on the logo's line */
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
body.shell-ui .compose-rail .tip { display: none; }
.tip {
  position: absolute; left: 100%; top: 50%;
  transform: translate(-2px, -50%);
  opacity: 0; pointer-events: none;
  background: #0F1620; color: #fff;
  font-size: 12px; font-weight: 500;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  transition: opacity .14s, transform .14s;
  z-index: 40;
}
.compose-rail:hover .tip, .compose-rail:focus-visible .tip { opacity: 1; transform: translate(8px, -50%); }

/* --- tighter gap between rail and sheet --- */
body.shell-ui .rail { width: 84px; }
body.shell-ui .main,
body.shell-ui .chatview,
body.shell-ui .meetview,
body.shell-ui .contactsview,
body.shell-ui .reader,
body.shell-ui .topbar { left: 88px; }
body.admin-ui .admin, body.admin-ui .topbar { left: 88px; }
body.admin-ui .rail { width: 84px; }

/* --- search results --- */
body.shell-ui .search-wrap { position: relative; flex: 1; max-width: 720px; display: flex; }
body.shell-ui .search-wrap .search { flex: 1; max-width: none; }
.sresults {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .18);
  padding: 8px; z-index: 40;
  max-height: 60vh; overflow-y: auto;
}
.sgroup {
  font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 10px 6px;
}
.sitem {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 10px;
  border-radius: 9px; text-align: left;
}
.sitem:hover, .sitem.on { background: var(--hover); }
.sitem .t { display: block; font-size: 13px; }
.sitem .s { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.sitem .avatar { width: 30px; height: 30px; font-size: 11px; }

/* --- chat search --- */
.chat-search-bar {
  flex: none;
  display: flex; align-items: center; gap: 9px;
  height: 40px; margin: 0 18px 12px 26px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 11px;
}
.chat-search-bar svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.8; }
.chat-search-bar input {
  flex: 1; border: 0; outline: none; background: none;
  font: inherit; font-size: 13px; color: var(--ink-1);
}
.chat-search-bar:focus-within { border-color: var(--accent); }

/* --- replying to a message --- */
.reply-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px;
  padding: 9px 12px;
  background: var(--accent-softer);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-size: 12.5px;
}
.reply-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-text b { color: var(--accent-dark); margin-right: 7px; }
.reply-text span { color: var(--ink-2); }
.reply-x { width: 22px; height: 22px; border-radius: 50%; color: var(--ink-2); font-size: 15px; line-height: 1; }
.reply-x:hover { background: var(--hover); }

/* the quote shown on a sent reply */
.quote {
  display: block;
  margin-bottom: 6px; padding: 6px 10px;
  border-left: 3px solid currentColor;
  border-radius: 5px;
  background: rgba(0, 0, 0, .05);
  font-size: 12px; opacity: .85;
  cursor: pointer;
}
.bubble-row.mine .quote { background: rgba(255, 255, 255, .16); }
.quote b { display: block; font-size: 11.5px; margin-bottom: 1px; }
.quote span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble-row .flash { animation: flash 1.2s ease; }
@keyframes flash { 0%, 100% { background: transparent; } 30% { background: var(--accent-soft); } }

/* --- dark mode: the shell in detail --- */

[data-theme="dark"] body.shell-ui .main,
[data-theme="dark"] body.shell-ui .chatview,
[data-theme="dark"] body.shell-ui .meetview,
[data-theme="dark"] body.shell-ui .contactsview,
[data-theme="dark"] body.shell-ui .reader,
[data-theme="dark"] body.admin-ui .admin { background: var(--surface-2); }

[data-theme="dark"] body.shell-ui .list,
[data-theme="dark"] body.shell-ui .row,
[data-theme="dark"] body.shell-ui .chat-thread,
[data-theme="dark"] body.shell-ui .chat-convs .conv,
[data-theme="dark"] .meet-card,
[data-theme="dark"] .contact-row,
[data-theme="dark"] .wl-card,
[data-theme="dark"] body.admin-ui .panel { background: var(--surface); }

[data-theme="dark"] body.shell-ui .row:hover,
[data-theme="dark"] body.shell-ui .chat-convs .conv:hover { background: var(--hover); }
[data-theme="dark"] body.shell-ui .folders .nav-item { background: var(--surface); color: var(--ink-2); }
[data-theme="dark"] body.shell-ui .folders .nav-item:hover { background: var(--hover); }
[data-theme="dark"] body.shell-ui .topbar .search { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] body.shell-ui .rail-group { background: rgba(27, 32, 39, .86); }
[data-theme="dark"] .modal, [data-theme="dark"] .composer, [data-theme="dark"] .sresults,
[data-theme="dark"] .menu, [data-theme="dark"] .chat-search-bar { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .row-chip { filter: brightness(1.25); }
[data-theme="dark"] .quote { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .tip { background: #0B0E13; }

/* extra accents */
[data-accent="rose"]   { --accent: #E11D48; --accent-dark: #BE123C; --accent-soft: #FCE7EC; --accent-softer: #FEF5F7; }
[data-accent="indigo"] { --accent: #4A3AFF; --accent-dark: #3B2BE8; --accent-soft: #E8E5FF; --accent-softer: #F5F4FF; }
[data-accent="slate"]  { --accent: #334155; --accent-dark: #1E293B; --accent-soft: #E2E8F0; --accent-softer: #F1F5F9; }
[data-theme="dark"][data-accent="teal"]    { --accent: #2DD4BF; --accent-dark: #14B8A6; --accent-soft: #12312E; }
[data-theme="dark"][data-accent="violet"]  { --accent: #A78BFA; --accent-dark: #8B5CF6; --accent-soft: #241C3B; }
[data-theme="dark"][data-accent="crimson"] { --accent: #F87171; --accent-dark: #EF4444; --accent-soft: #34191A; }
[data-theme="dark"][data-accent="amber"]   { --accent: #FBBF24; --accent-dark: #F59E0B; --accent-soft: #332413; }
[data-theme="dark"][data-accent="rose"]    { --accent: #FB7185; --accent-dark: #F43F5E; --accent-soft: #34191F; }
[data-theme="dark"][data-accent="indigo"]  { --accent: #818CF8; --accent-dark: #6366F1; --accent-soft: #1E1F3D; }
[data-theme="dark"][data-accent="slate"]   { --accent: #94A3B8; --accent-dark: #64748B; --accent-soft: #1E242D; }

/* meetings */
.meet-x {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  color: var(--ink-3); font-size: 16px; line-height: 1;
  display: grid; place-items: center;
}
.meet-x:hover { background: var(--hover); color: var(--ink-1); }
#meetPastLabel { display: flex; align-items: center; gap: 10px; }
.pastcount { color: var(--ink-3); font-weight: 500; }
#meetPastLabel .linkish { margin-left: auto; }
#meetPast .meet-card { opacity: .62; }

/* interface colour, separate from the accent */
[data-ui="graphite"] body.shell-ui,
[data-ui="graphite"] body.admin-ui { background: linear-gradient(120deg, #6E7480 0%, #9AA0AA 22%, #D9DBDF 45%); }
[data-ui="ocean"] body.shell-ui,
[data-ui="ocean"] body.admin-ui { background: linear-gradient(120deg, #4A6E8E 0%, #7FA0BC 22%, #DCE6EE 45%); }
[data-ui="sand"] body.shell-ui,
[data-ui="sand"] body.admin-ui { background: linear-gradient(120deg, #9B8C74 0%, #C4B7A2 22%, #EDE7DC 45%); }
[data-ui="forest"] body.shell-ui,
[data-ui="forest"] body.admin-ui { background: linear-gradient(120deg, #4E6B5A 0%, #8FA89A 22%, #DEE7E1 45%); }

[data-theme="dark"][data-ui="graphite"] body.shell-ui { background: linear-gradient(120deg, #0B0C0E 0%, #16181C 30%, #1F2228 60%); }
[data-theme="dark"][data-ui="ocean"] body.shell-ui { background: linear-gradient(120deg, #070E16 0%, #101B27 30%, #17242F 60%); }
[data-theme="dark"][data-ui="sand"] body.shell-ui { background: linear-gradient(120deg, #13100B 0%, #1E1913 30%, #29231A 60%); }
[data-theme="dark"][data-ui="forest"] body.shell-ui { background: linear-gradient(120deg, #08120C 0%, #121D16 30%, #1A281F 60%); }

.ui-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ui-swatch {
  width: 54px; height: 40px; border-radius: 10px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.ui-swatch.active { border-color: var(--accent); }

/* "Message" affordance on a person found in chat search */
.reach {
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: 11.5px; font-weight: 600;
}
.conv:hover .reach { background: var(--accent); color: #fff; }

/* ---------- settings page ---------- */

body.settings-page { padding: 0; }
.settings-sheet {
  position: absolute; top: 14px; bottom: 14px; right: 0; left: 88px;
  background: var(--sheet, #F4F5F7);
  background: #F4F5F7;
  border-radius: 22px 0 0 22px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
[data-theme="dark"] .settings-sheet { background: var(--surface-2); }

.settings-top {
  flex: none;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 26px 30px 18px;
}
.settings-top h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.settings-top .hint { margin: 0; }
.settings-top .ghost-btn { margin-left: auto; }

.settings-scroll { flex: 1; overflow-y: auto; padding: 0 30px 24px; }
.spanel { display: none; }
.spanel.active { display: block; }

.scard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px;
  max-width: 620px;
}
.scard h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.scard > .hint { margin: 0 0 20px; }
.scard .field-label { margin-top: 22px; }
.scard textarea {
  width: 100%; min-height: 140px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-1);
  font: inherit; resize: vertical; outline: none;
}
.scard textarea:focus { border-color: var(--accent); }
.row-center { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.settings-foot {
  flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 30px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.settings-foot .send-btn { margin-left: auto; }
[data-theme="dark"] .settings-foot { background: var(--surface); }

body.settings-page .rail-me { margin-top: auto; margin-bottom: 6px; width: 38px; height: 38px; }
body.settings-page .compose-rail { text-decoration: none; }

@media (max-width: 760px) {
  .settings-sheet { left: 0; right: 0; top: var(--top-h, 0); bottom: var(--bottom-h, 60px); border-radius: 0; }
  .settings-scroll { padding: 0 14px 20px; }
  .settings-top, .settings-foot { padding-left: 14px; padding-right: 14px; }
}

/* the settings rail uses stroke icons */
body.settings-page .rail-icon {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* settings content sits centred in the sheet */
.settings-top, .settings-scroll > .spanel, .settings-foot > * { max-width: 760px; }
.settings-top { margin: 0 auto; width: 100%; }
.settings-scroll { display: flex; flex-direction: column; align-items: center; }
.settings-scroll .spanel { width: 100%; }
.settings-scroll .scard { margin: 0 auto; max-width: 700px; }
.settings-foot { justify-content: center; }
.settings-foot > .hint { flex: 1; max-width: 700px; margin: 0 auto; display: flex; align-items: center; }
.settings-foot .send-btn { margin-left: 0; }
.foot-inner {
  width: 100%; max-width: 700px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
}
.foot-inner .send-btn { margin-left: auto; }
.settings-foot > .hint { display: none; }

/* the Message pill sits at the end of a search row */
.sitem .reach { margin-left: auto; }

/* ---------- pinned messages ---------- */

.pinned-strip {
  flex: none;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 24px;
  background: var(--accent-softer);
  border-bottom: 1px solid var(--line);
}
.pinned-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; max-width: 940px; margin: 0 auto;
  padding: 6px 10px;
  border-radius: 8px;
  text-align: left; font-size: 12.5px;
}
.pinned-item:hover { background: var(--accent-soft); }
.pin-ico { flex: none; font-size: 12px; }
.pinned-body { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.pinned-body b { color: var(--ink-1); margin-right: 6px; }
.pin-off { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.pin-off:hover { background: var(--line); color: var(--ink-1); }

/* ---------- read receipts ---------- */

.receipt {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--ink-3); text-align: right;
}

/* ---------- typing indicator ---------- */

.typing-line {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 24px 6px;
  font-size: 12px; color: var(--ink-2);
}
.dots { display: inline-flex; gap: 3px; }
.dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-3);
  animation: blink 1.2s infinite;
}
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; } }

/* ---------- health dashboard ---------- */

.pill.live {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
  font-size: 12.5px; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.pill.live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green, #16A34A); }

.hgrid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; margin-bottom: 16px; }
.hcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.hgrid .hcard { margin-bottom: 0; }
.hcard h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; }
.hcard > .hint { margin: 0 0 16px; }

.stat .k { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; color: var(--ink-2); }
.stat .k .dot { display: inline-block; margin: 0; }
.stat .v { margin-top: 6px; font-size: 24px; font-weight: 600; letter-spacing: -.5px; color: var(--ink-1); line-height: 1.15; }
.stat .d { margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.stat .d.warn { color: #B45309; }
.stat .d.down { color: #C9372E; }
[data-theme="dark"] .stat .d.warn { color: #E5B567; }
[data-theme="dark"] .stat .d.down { color: #F0908A; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.ok { background: #16A34A; }
.dot.warn { background: #E0A800; }
.dot.bad { background: #DC2626; }

.legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--ink-2); margin-bottom: 10px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.hchart .grid line { stroke: var(--line); stroke-width: 1; }
.hchart .axis { font-size: 10px; fill: var(--ink-3); }
.hchart polyline { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.hchart .s-ok { stroke: #16A34A; }
.hchart .s-bad { stroke: #DC2626; }

.locked-row, .mbox-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.locked-row:last-child, .mbox-row:last-child { border-bottom: 0; }
.locked-body { flex: 1; min-width: 0; }
.locked-row .avatar { width: 32px; height: 32px; font-size: 11px; }
.countdown {
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600;
  color: #B3261E;
  background: #FDECEA;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
[data-theme="dark"] .countdown { background: #34191A; color: #F87171; }
.mbox-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.integrity {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.integrity .dot { margin-top: 5px; }
.integrity b { display: block; font-size: 13.5px; }
.integrity span:last-child { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.integrity.ok { border-color: #BFE6CB; background: #F3FBF5; }
.integrity.bad { border-color: #F5C6C2; background: #FEF6F5; }
[data-theme="dark"] .integrity.ok { background: #12251A; border-color: #1F4A30; }
[data-theme="dark"] .integrity.bad { background: #2A1618; border-color: #5A2A2A; }

.pill-sm { padding: 2px 9px; border-radius: 99px; background: var(--surface-2); font-size: 11px; }
.pill-sm.bad { background: #FDECEA; color: #B3261E; }
[data-theme="dark"] .pill-sm.bad { background: #34191A; color: #F87171; }
.row-danger td { background: rgba(220, 38, 38, .03); }
.b-warn { background: #FDF3D8; color: #96700A; }

@media (max-width: 1100px) { .hgrid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Mobile / PWA. The console is desktop-first, so below 760px it becomes a
   single-column app with a bottom tab bar and full-screen detail views.
   ========================================================================== */

@media (max-width: 760px) {
  :root { --top-h: 56px; --bottom-h: 62px; }

  body.shell-ui, body.settings-page, body.admin-ui { padding: 0; }

  /* --- top bar --- */
  body.shell-ui .topbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--top-h);
    padding: 0 12px; gap: 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    z-index: 30;
  }
  body.shell-ui .brand-logo { height: 20px; }
  body.shell-ui .search-wrap { max-width: none; }
  body.shell-ui .topbar .search { height: 38px; border-radius: 10px; }
  body.shell-ui #refreshTopBtn { display: none; }

  /* --- rail becomes a bottom tab bar --- */
  body.shell-ui .rail, body.settings-page .rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: var(--bottom-h);
    flex-direction: row; align-items: stretch;
    padding: 0 0 env(safe-area-inset-bottom);
    background: var(--surface);
    border-top: 1px solid var(--line);
    z-index: 30;
  }
  body.shell-ui .rail-group, body.settings-page .rail-group {
    flex-direction: row; flex: 1;
    background: none; box-shadow: none; backdrop-filter: none;
    border-radius: 0; padding: 0; gap: 0;
  }
  body.shell-ui .rail-item, body.settings-page .rail-item {
    flex: 1; width: auto; height: 100%;
    border-radius: 0; gap: 3px; font-size: 10px;
  }
  body.shell-ui .rail-item.active { background: none; box-shadow: none; color: var(--accent); }
  body.shell-ui .rail-item.active .rail-icon { transform: translateY(-1px); }
  body.shell-ui .rail-me, body.settings-page .rail-me { display: none; }

  /* compose becomes a floating button above the tab bar */
  body.shell-ui .compose-rail {
    position: fixed; right: 16px; bottom: calc(var(--bottom-h) + 16px);
    width: 54px; height: 54px; margin: 0;
    border-radius: 50%;
    z-index: 28;
  }
  body.shell-ui .compose-rail .tip { display: none; }
  body.chat-mode .compose-rail,
  body.contacts-mode .compose-rail,
  body.meet-mode .compose-rail { display: none; }
  /* and while reading or writing a message */
  body.shell-ui:has(.reader.open) .compose-rail,
  body.shell-ui:has(.composer.open) .compose-rail { display: none; }

  /* --- panes fill the screen --- */
  body.shell-ui .main,
  body.shell-ui .chatview,
  body.shell-ui .meetview,
  body.shell-ui .contactsview,
  body.shell-ui .reader {
    position: fixed;
    top: var(--top-h); bottom: var(--bottom-h); left: 0; right: 0;
    border-radius: 0; padding-top: 0;
  }
  body.shell-ui .main { padding-top: 8px; }

  /* the settings page has no top bar, so it starts at the top of the screen */
  body.settings-page .settings-sheet {
    position: fixed;
    top: 0; bottom: var(--bottom-h); left: 0; right: 0;
    border-radius: 0; padding-top: env(safe-area-inset-top);
  }
  /* its back button is the link in the header; the floating one would cover Save */
  body.settings-page .compose-rail { display: none; }
  body.shell-ui .reader { z-index: 26; }

  /* --- folder strip scrolls sideways --- */
  body.shell-ui .folders {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding: 6px 12px 10px;
  }
  body.shell-ui .folders::-webkit-scrollbar { display: none; }
  body.shell-ui .folders .nav { flex-wrap: nowrap; }
  body.shell-ui .folders .nav-item, .fchip.ghost { white-space: nowrap; }

  /* --- message list --- */
  body.shell-ui .list-heading { padding: 2px 14px 8px; }
  body.shell-ui .listbar { margin-left: 0; padding: 0 12px; }
  body.shell-ui .list { margin-left: 0; border-radius: 0; }
  /* these must out-specify the shell rules above */
  body.shell-ui .row {
    height: auto; min-height: 64px;
    padding: 10px 12px; gap: 10px;
    flex-wrap: wrap; align-items: center;
  }
  body.shell-ui .row .check { display: none; }
  body.shell-ui .row-from { width: auto; flex: 1; font-size: 13px; }
  body.shell-ui .row-subject { max-width: none; flex: none; }
  body.shell-ui .row-text {
    flex-basis: 100%; order: 5; margin-top: 0; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 12.5px; line-height: 1.45;
  }
  body.shell-ui .row-date { width: auto; font-size: 11px; }
  body.shell-ui .row-avatar { width: 30px; height: 30px; }
  body.shell-ui .row-meta { margin-left: auto; }

  /* --- reading a message --- */
  .reader-body { padding: 14px 14px 40px; }
  .reader-subject { font-size: 19px; line-height: 1.3; }
  .reader-when { display: none; }
  .reader-actions { position: sticky; bottom: 0; background: var(--surface); padding: 10px 0; }

  /* --- composer full screen --- */
  .composer, .composer.open, .composer.open.max {
    inset: 0; width: 100%; max-width: none; height: 100%;
    border-radius: 0; transform: none;
  }
  .composer .win-btn { display: none; }
  .rt-toolbar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .rt-toolbar::-webkit-scrollbar { display: none; }

  /* --- chat: list, then thread over it --- */
  .chat-side { width: 100%; padding-right: 0; }
  .chat-convs { padding-left: 0; }
  /* line the New chat button and its menu up with the full-width list */
  body.shell-ui .newchat-wrap { padding: 8px 12px 6px; }
  body.shell-ui .newchat-menu { left: 12px; right: 12px; }
  .chat-thread {
    position: fixed; inset: var(--top-h) 0 var(--bottom-h) 0;
    border-radius: 0; z-index: 27;
    display: none;
  }
  body.chat-thread-open .chat-thread { display: flex; }
  .mobile-back { display: grid; }
  .chat-messages { padding: 14px 12px 6px; }
  .bubble-stack { max-width: 82%; }
  .pinned-strip { padding: 8px 14px; }

  /* --- settings --- */
  .settings-top { padding: 18px 16px 12px; flex-wrap: wrap; }
  .settings-top h1 { font-size: 20px; }
  .settings-scroll { padding: 0 16px 20px; }
  .scard { padding: 20px 18px; }
  .settings-foot { padding: 12px 16px; }
  .illus-grid { grid-template-columns: repeat(4, 1fr); }

  /* --- other panes --- */
  .meet-head, .contactsview .meet-head { padding: 14px 16px; flex-direction: column; align-items: stretch; gap: 10px; }
  #contactSearch { width: 100%; margin-left: 0; }
  .meet-body { padding: 0 16px 30px; }
  .meet-card, .contact-row { flex-wrap: wrap; gap: 10px; }
  .join-btn { flex: 1; justify-content: center; }

  /* --- dialogs slide up from the bottom --- */
  .backdrop { padding: 0; align-items: flex-end; }
  .modal { max-width: none; width: 100%; border-radius: 16px 16px 0 0; max-height: 92vh; overflow-y: auto; }
  .suggest { left: 0; right: 0; }
}

/* installed PWA: pad for the status bar */
@media (display-mode: standalone) {
  body.shell-ui .topbar, body.admin-ui .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--top-h) + env(safe-area-inset-top)); }
  body.shell-ui .main, body.shell-ui .chatview, body.shell-ui .meetview,
  body.shell-ui .contactsview, body.shell-ui .reader { top: calc(var(--top-h) + env(safe-area-inset-top)); }
}

/* the admin console is desktop-only; hide its entry point on small screens
   even if the window is resized after load */
@media (max-width: 900px) {
  #adminLink { display: none !important; }
}

/* mail we hold but Gmail no longer does */
.row-chip.archived { background: #EEF1F5; color: #5C6675; }
[data-theme="dark"] .row-chip.archived { background: var(--hover); color: var(--ink-2); }

.archived-note {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 4px; padding: 10px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--ink-3);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 12.5px; color: var(--ink-2);
}
.archived-note svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linejoin: round;
}

/* mini bar rows in the API report */
.minibar {
  flex: 1; height: 8px; max-width: 240px;
  border-radius: 4px; background: var(--surface-2); overflow: hidden;
}
.minibar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.mbox-row .mono { min-width: 60px; text-align: right; }

/* additional interface colours */
[data-ui="plum"] body.shell-ui,     [data-ui="plum"] body.admin-ui,     [data-ui="plum"] body.settings-page     { background: linear-gradient(120deg, #6E5A7B 0%, #A292B0 22%, #E7E1EC 45%); }
[data-ui="rose"] body.shell-ui,     [data-ui="rose"] body.admin-ui,     [data-ui="rose"] body.settings-page     { background: linear-gradient(120deg, #9B6F78 0%, #C6A2A9 22%, #F0E3E5 45%); }
[data-ui="sky"] body.shell-ui,      [data-ui="sky"] body.admin-ui,      [data-ui="sky"] body.settings-page      { background: linear-gradient(120deg, #5B87A8 0%, #93B4CC 22%, #E2EDF4 45%); }
[data-ui="olive"] body.shell-ui,    [data-ui="olive"] body.admin-ui,    [data-ui="olive"] body.settings-page    { background: linear-gradient(120deg, #77804E 0%, #A9B189 22%, #E9EBDD 45%); }
[data-ui="clay"] body.shell-ui,     [data-ui="clay"] body.admin-ui,     [data-ui="clay"] body.settings-page     { background: linear-gradient(120deg, #A0705A 0%, #C7A18C 22%, #F1E5DD 45%); }
[data-ui="midnight"] body.shell-ui, [data-ui="midnight"] body.admin-ui, [data-ui="midnight"] body.settings-page { background: linear-gradient(120deg, #2B3345 0%, #5A6478 22%, #C9CEDA 45%); }
[data-ui="mono"] body.shell-ui,     [data-ui="mono"] body.admin-ui,     [data-ui="mono"] body.settings-page     { background: linear-gradient(120deg, #5A5A5A 0%, #909090 22%, #E4E4E4 45%); }

[data-theme="dark"][data-ui="plum"] body.shell-ui     { background: linear-gradient(120deg, #140E19 0%, #1E1626 30%, #281E33 60%); }
[data-theme="dark"][data-ui="rose"] body.shell-ui     { background: linear-gradient(120deg, #170F11 0%, #22181A 30%, #2E2124 60%); }
[data-theme="dark"][data-ui="sky"] body.shell-ui      { background: linear-gradient(120deg, #08101A 0%, #101B27 30%, #182634 60%); }
[data-theme="dark"][data-ui="olive"] body.shell-ui    { background: linear-gradient(120deg, #101208 0%, #1A1D11 30%, #242918 60%); }
[data-theme="dark"][data-ui="clay"] body.shell-ui     { background: linear-gradient(120deg, #17100C 0%, #231913 30%, #2F221A 60%); }
[data-theme="dark"][data-ui="midnight"] body.shell-ui { background: linear-gradient(120deg, #070A11 0%, #0F1420 30%, #161D2C 60%); }
[data-theme="dark"][data-ui="mono"] body.shell-ui     { background: linear-gradient(120deg, #0C0C0C 0%, #161616 30%, #202020 60%); }

/* multi-select toolbar above a people picker */
.pick-tools {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 8px;
  font-size: 12px;
}
.pick-tools button {
  color: var(--accent-dark); font-size: 12px; font-weight: 500;
  padding: 0; background: none;
}
.pick-tools button:hover { text-decoration: underline; }
.pick-count { margin-left: auto; color: var(--ink-3); }

/* checkbox inside a table cell */
.tickcell { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.tickcell input { accent-color: var(--accent); }

/* ---------- custom colours ---------- */

/* a picked background colour overrides the presets */
body.shell-ui, body.admin-ui, body.settings-page { background-image: var(--field, none); }

/* white-on-accent stops working if someone picks a pale colour */
.compose-top, .send-btn, .cta, .fchip.active, .folders .nav-item.active,
.bubble-row.mine .bubble, .cbadge, .badge-accent { color: var(--on-accent, #fff); }
.send-btn svg, .compose-top svg { stroke: var(--on-accent, #fff); }

/* ---------- rail aligns with the sheet ---------- */
/* the rail is already fixed at top:14px, matching the sheet; any padding here
   pushes its rounded corner below the sheet's */
body.shell-ui .rail, body.admin-ui .rail, body.settings-page .rail { padding-top: 0; }
body.shell-ui .rail-group, body.admin-ui .rail-group, body.settings-page .rail-group { margin-top: 0; }

/* compose sits in the group, marked out by colour rather than shape */
body.shell-ui .compose-rail {
  position: static; width: 44px; height: 54px;
  /* the label below the icon pulls the icon up; this padding puts the icon on
     the same line as the logo and search box in the top bar */
  padding-top: 11px;
  margin: 0 0 2px; border-radius: 14px;
  background: none; box-shadow: none;
  flex-direction: column; gap: 3px;
  color: var(--accent-dark); font-size: 9.5px;
}
body.shell-ui .compose-rail:hover { background: var(--accent-softer); transform: none; box-shadow: none; }
body.shell-ui .compose-rail svg { width: 19px; height: 19px; stroke: currentColor; }
body.shell-ui .compose-rail .tip { display: none; }
.rail-div { height: 1px; background: var(--line); margin: 3px 8px; }

/* ---------- sort + view controls ---------- */

.ctrlgroup {
  margin-left: auto; flex: none;
  display: flex; align-items: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px;
}
.cbtn {
  height: 28px; padding: 0 9px;
  border-radius: 7px;
  display: flex; align-items: center; gap: 3px;
  color: var(--ink-2);
}
.cbtn svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.cbtn .caret { width: 13px; height: 13px; margin-left: -2px; }
.cbtn:hover { background: var(--hover); }
.cbtn.on { background: var(--accent-soft); color: var(--accent-dark); }
.ctrlgroup .divider { width: 1px; height: 18px; background: var(--line-strong); margin: 0 3px; }

.sortwrap { position: relative; }
.sortmenu {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 272px; z-index: 30;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
  padding: 6px;
}
.sortitem {
  display: flex; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 8px;
  text-align: left; align-items: flex-start;
}
.sortitem:hover { background: var(--hover); }
.sortitem .tick { width: 14px; color: var(--accent); font-size: 12px; visibility: hidden; padding-top: 1px; }
.sortitem.on .tick { visibility: visible; }
.sortitem b { display: block; font-size: 13px; font-weight: 500; }
.sortitem.on b { font-weight: 600; }
.sortitem b + span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* ---------- unread-first sections ---------- */

.section-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
  cursor: pointer; width: 100%; text-align: left;
}
.section-head .chev {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--ink-2); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s;
}
.section-head.closed .chev { transform: rotate(-90deg); }
.section-head .count { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.section-head.closed + .rows { display: none; }

/* ---------- split view ---------- */

/* the list and pane share the full height of the sheet, with no gap between
   them and the toolbar above */
body.split-view .listwrap {
  display: flex; flex: 1; min-height: 0;
  margin-left: 26px;
  background: var(--surface);
  border-radius: 16px 0 0 0;
  overflow: hidden;
}
body.split-view .list { margin-left: 0; border-radius: 0; box-shadow: none; }
body.split-view .listbar { margin-bottom: 0; }
body.shell-ui .main { padding-bottom: 14px; }
body.split-view .list {
  flex: none; width: 380px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
body.split-view .row { height: auto; padding: 10px 14px; flex-wrap: wrap; align-items: center; }
body.split-view .row-from { width: auto; flex: 1; }
body.split-view .row-subject, body.split-view .row-chip { display: none; }
body.split-view .row-text {
  flex-basis: 100%; order: 6; margin-top: 2px;
  white-space: normal; font-size: 12.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.split-view .row-date { width: auto; }
body.split-view .reader {
  position: static; flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  border-radius: 0; border-left: 0; z-index: auto;
  /* the fixed-position rule adds 62px for the top bar; inside the split
     layout that becomes dead space at the top of the pane */
  padding-top: 0;
  overflow-y: auto;
}
body.split-view .reader-bar {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
body.split-view .reader-body { padding: 20px 26px 40px; }
body.split-view .reader:not(.open) .reader-body { display: none; }
body.split-view .reader:not(.open)::after {
  content: 'Pick a message to read it here';
  display: grid; place-items: center; height: 100%;
  color: var(--ink-3); font-size: 13px;
}
body.split-view #backBtn { display: none; }

/* the pane can't fit beside a 390px list */
@media (max-width: 900px) {
  body.split-view .list { width: 100%; border-right: 0; }
  body.split-view .reader { position: fixed; }
  body.shell-ui .ctrlgroup { display: none; }
}

/* ---------- custom colour pickers ---------- */

.custom-colour {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding: 14px 16px;
  border: 1px dashed var(--line-strong); border-radius: 12px;
}
.custom-colour .native {
  width: 44px; height: 44px; flex: none;
  padding: 2px; border: 1px solid var(--line-strong);
  border-radius: 10px; background: var(--surface); cursor: pointer;
}
.cc-body { flex: 1; min-width: 0; }
.cc-body b { display: block; font-size: 13px; font-weight: 500; }
.cc-body span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.hexbox {
  width: 108px; height: 36px; padding: 0 12px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums; text-transform: uppercase;
  outline: none;
}
.hexbox:focus { border-color: var(--accent); }
@media (max-width: 620px) {
  .custom-colour { flex-wrap: wrap; }
  .cc-body { flex-basis: calc(100% - 56px); }
}

/* ---------- Reports sub-tabs ---------- */

.subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 4px 0 20px; }
.subtab {
  padding: 10px 18px; margin-bottom: -1px;
  font-size: 13.5px; color: var(--ink-2);
  border-bottom: 2px solid transparent;
  display: flex; align-items: center; gap: 8px;
}
.subtab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.subtab.active { color: var(--accent-dark); border-bottom-color: var(--accent); font-weight: 600; }
.subpanel { display: none; }
.subpanel.active { display: block; }
body.admin-ui .panel.bare {
  display: block; background: none; border: 0;
  padding: 0; margin: 0;
}
body.admin-ui .panel.bare > .panel-head { padding-top: 0; }

/* ---------- top bar must not be transparent ---------- */

/* The bar sits above the scrolling sheet. With no background, content passes
   visibly underneath it while scrolling. */
body.admin-ui .topbar {
  background: var(--surface-2);
  border-radius: 22px 0 0 0;
  border-bottom: 0;
  padding-left: 26px;
}
[data-theme="dark"] body.admin-ui .topbar { background: var(--surface-2); }

body.shell-ui .topbar {
  background: #F4F5F7;
  border-radius: 22px 0 0 0;
  border-bottom: 0;              /* the bar and the sheet are one surface */
  padding-left: 26px;
}
[data-theme="dark"] body.shell-ui .topbar { background: var(--surface-2); }

/* the panes already start below the bar; keep their corner from doubling up */
body.shell-ui .main,
body.shell-ui .chatview,
body.shell-ui .meetview,
body.shell-ui .contactsview { border-radius: 0 0 0 22px; }
body.admin-ui .admin { border-radius: 0 0 0 22px; }


/* the folder chip already names the folder, so the list heading is gone;
   the toolbar keeps the count */
body.shell-ui .listbar { height: 44px; margin: 0 0 0 26px; }
body.split-view .listbar { margin-bottom: 6px; }

/* ---------- reader position ---------- */

/* The reader now lives inside .listwrap so it can sit beside the list in split
   view. In standard view its absolute offsets would resolve against that
   wrapper instead of the page, leaving it half over the list — so pin it to
   the viewport, which is what the offsets were always written for. */
body.shell-ui:not(.split-view) .reader {
  position: fixed;
  top: 14px; bottom: 14px; left: 88px; right: 0;
  z-index: 20;
}

/* ---------- signature editor ---------- */

.sig-card { max-width: 780px; }
.sig-layout { display: flex; gap: 16px; align-items: stretch; margin-top: 6px; }
.sig-list-col { width: 200px; flex: none; display: flex; flex-direction: column; }
.sig-list {
  flex: 1; min-height: 170px;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px; overflow-y: auto; background: var(--surface);
}
.sig-row {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 8px; border-radius: 6px;
  font-size: 13px; cursor: pointer;
}
.sig-row:hover { background: var(--hover); }
.sig-row.on { background: var(--accent-soft); color: var(--accent-dark); font-weight: 500; }
.sig-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig-act { width: 22px; height: 22px; border-radius: 4px; color: var(--ink-3); font-size: 12px; }
.sig-act:hover { background: var(--line); color: var(--ink-1); }
.sig-empty { padding: 10px; }
.sig-new { margin-top: 8px; width: 100%; }

.sig-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sig-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 6px 8px;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--surface-2);
}
.sig-toolbar button {
  min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 5px; font-size: 13px; color: var(--ink-2);
}
.sig-toolbar button:hover { background: var(--line); color: var(--ink-1); }
.rt-select {
  height: 28px; padding: 0 6px; margin-right: 2px;
  border: 1px solid transparent; border-radius: 5px;
  background: none; color: var(--ink-2);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.rt-select:hover { background: var(--line); }
.rt-sep { width: 1px; height: 18px; background: var(--line-strong); margin: 0 5px; }
.rt-colour { position: relative; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; border-radius: 5px; }
.rt-colour:hover { background: var(--line); }
.rt-colour span { font-weight: 700; font-size: 13px; color: var(--ink-2); }
.rt-colour input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.sig-body {
  min-height: 180px; max-height: 340px; overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 0 0 8px 8px;
  background: var(--surface); color: var(--ink-1);
  font-size: 13.5px; line-height: 1.6;
  outline: none;
}
.sig-body:focus { border-color: var(--accent); }
.sig-body[data-empty="yes"]::before {
  content: 'Pick a signature, or create one to start.';
  color: var(--ink-3); font-size: 13px;
}
.sig-body img { max-width: 100%; height: auto; }
.sig-body img.sig-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.sig-body table { border-collapse: collapse; }
.sig-body a { color: var(--accent); }

.sig-imgtools {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2);
}
.sig-imgtools .hint { margin: 0 6px 0 0; }
.sig-imgtools button {
  height: 26px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); font-size: 12px;
}
.sig-imgtools button:hover { border-color: var(--accent); color: var(--accent-dark); }
.sig-imgtools button.danger { color: var(--red, #DC2626); border-color: #F3C6C2; }

.sig-defaults { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sig-defaults .field { margin: 0; }

@media (max-width: 700px) {
  .sig-layout { flex-direction: column; }
  .sig-list-col { width: 100%; }
  .sig-list { min-height: 110px; }
  .sig-defaults { grid-template-columns: 1fr; }
}

/* ---------- selection ---------- */

/* the tick must stay readable whatever accent colour is chosen */
.check.on::after, .check.some::after { border-color: var(--on-accent, #fff); }
.check.some {
  background: var(--accent); border-color: var(--accent);
}
.check.some::after {
  content: '';
  width: 8px; height: 0;
  border-left: 0; border-bottom: 2px solid var(--on-accent, #fff);
  transform: none;
}
.check:hover { border-color: var(--accent); }

.sel-count {
  font-size: 12.5px; font-weight: 500;
  color: var(--accent-dark);
  margin-left: 4px;
}
/* row checkboxes stay visible while a selection is active */
body.has-selection .row .check { opacity: 1; }
.row.selected { background: var(--accent-softer); }
.row.selected:hover { background: var(--accent-soft); }

/* meeting details under the title */
.meet-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 4px;
  font-size: 11.5px; color: var(--ink-3);
}
.meet-meta span { display: inline-flex; align-items: center; }
.meet-meta span + span::before {
  content: '·'; margin-right: 14px; color: var(--line-strong);
}

/* ---------- in-page dialogs ---------- */

.dlg-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .34);
  display: grid; place-items: center;
  padding: 20px;
  animation: dlgIn .12s ease;
}
@keyframes dlgIn { from { opacity: 0; } to { opacity: 1; } }
body.dlg-open { overflow: hidden; }

.dlg {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .28);
  overflow: hidden;
}
.dlg-body { display: flex; gap: 14px; padding: 22px 22px 18px; }
.dlg-ico {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
}
.dlg-ico svg { width: 19px; height: 19px; }
.ico-danger { background: #FDECEA; } .ico-danger svg { stroke: #DC2626; }
.ico-ask    { background: var(--accent-soft); } .ico-ask svg { stroke: var(--accent); }
.ico-edit   { background: var(--accent-soft); } .ico-edit svg { stroke: var(--accent); }
.ico-info   { background: #E7F6EC; } .ico-info svg { stroke: #16A34A; }
[data-theme="dark"] .ico-danger { background: #34191A; }
[data-theme="dark"] .ico-info { background: #12251A; }

.dlg-text { flex: 1; min-width: 0; }
.dlg h3 { margin: 1px 0 6px; font-size: 15px; font-weight: 600; }
.dlg p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.dlg-input {
  width: 100%; height: 38px; margin-top: 14px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 13.5px; outline: none;
}
.dlg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 0 22px 20px; }
.dlg-foot button {
  height: 36px; padding: 0 18px;
  border-radius: var(--radius-pill);
  font-size: 13.5px; font-weight: 500;
}
.dlg-foot .btn-ghost { border: 1px solid var(--line-strong); color: var(--ink-2); background: none; }
.dlg-foot .btn-ghost:hover { background: var(--hover); }
.dlg-foot .btn-primary { background: var(--accent); color: var(--on-accent, #fff); }
.dlg-foot .btn-primary:hover { background: var(--accent-dark); }
.dlg-foot .btn-danger { background: #DC2626; color: #fff; }
.dlg-foot .btn-danger:hover { background: #B3261E; }

/* ==========================================================================
   Scrolling. Only the message list scrolls; the rail, top bar and folder
   strip stay put. Without this the whole document grows and the header
   scrolls away with the mail.
   ========================================================================== */

html, body { height: 100%; overflow: hidden; }

/* Clip every pane so its own list scrolls rather than the page.
   Direction is set only where the pane stacks vertically — the chat view is
   a row (conversation list beside the thread) and must keep that. */
body.shell-ui .main,
body.shell-ui .chatview,
body.shell-ui .meetview,
body.shell-ui .contactsview { overflow: hidden; }

body.shell-ui .main,
body.shell-ui .meetview,
body.shell-ui .contactsview { flex-direction: column; }

/* the parts above the list keep their height */
body.shell-ui .folders,
body.shell-ui .listbar { flex: none; }

/* the list takes the space that is left, and scrolls inside it */
body.shell-ui .listwrap { flex: 1; min-height: 0; display: flex; }
body.shell-ui .list { flex: 1; min-height: 0; overflow-y: auto; }

/* same for the other panes */
body.shell-ui .meet-body,
body.shell-ui .contactsview .meet-body { flex: 1; min-height: 0; overflow-y: auto; }
/* the conversation column fills the pane; only its list scrolls */
body.shell-ui .chat-side { min-height: 0; height: 100%; display: flex; flex-direction: column; }
body.shell-ui .chat-convs { flex: 1; min-height: 0; overflow-y: auto; }
body.shell-ui .chat-thread { min-height: 0; }
body.shell-ui .chat-messages { flex: 1; min-height: 0; overflow-y: auto; }

/* reading a message scrolls the message, not the page.
   Scoped to .open — the reader is display:none until then, and a bare
   display:flex here would leave it permanently on screen. */
body.shell-ui .reader.open { display: flex; flex-direction: column; overflow: hidden; }
body.shell-ui .reader-bar { flex: none; }
body.shell-ui .reader-body { flex: 1; min-height: 0; overflow-y: auto; }

/* the settings page and admin console scroll in their own sheet */
body.settings-page, body.admin-ui { overflow: hidden; }

/* on a phone the panes are fixed to the viewport already */
@media (max-width: 760px) {
  body.shell-ui .list { -webkit-overflow-scrolling: touch; }
}

/* start-a-meeting dialog */
.meet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tickline {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.tickline input { margin-top: 2px; accent-color: var(--accent); }

/* links inside a chat bubble need to be readable on the accent */
.bubble a { color: var(--accent-dark); text-decoration: underline; }
.bubble-row.mine .bubble a { color: #fff; text-decoration-color: rgba(255,255,255,.6); }
.bubble-row.mine .bubble a:hover { text-decoration-color: #fff; }

/* a meeting whose 24 hours are up: the link is gone, the note remains */
.bubble.expired-meeting {
  background: var(--surface-2) !important;
  color: var(--ink-3) !important;
  border: 1px dashed var(--line-strong) !important;
  font-size: 12.5px;
  font-style: italic;
}
.bubble.expired-meeting a { pointer-events: none; }
.expired-mark { margin-right: 7px; opacity: .55; font-style: normal; }

/* reply actions in the reader toolbar */
.reader-actions { margin-left: auto; display: flex; gap: 6px; padding-right: 6px; }
.reader-actions .pill-btn {
  height: 30px; padding: 0 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-2);
  font-size: 12.5px; display: flex; align-items: center; gap: 7px;
}
.reader-actions .pill-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.reader-actions .icon { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .reader-actions .pill-btn span, .reader-actions #barReplyAll { display: none; }
  .reader-actions .pill-btn { padding: 0 10px; }
}

/* earlier messages in a conversation */
.trail { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.trail-head {
  padding: 8px 14px; background: var(--surface-2);
  font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line);
}
.trail-row {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 9px 14px; text-align: left;
  border-bottom: 1px solid var(--line); background: none;
  font-size: 12.5px;
}
.trail-row:last-child { border-bottom: 0; }
.trail-row:hover { background: var(--hover); }
.trail-from { font-weight: 500; flex: none; min-width: 130px; }
.trail-snip { flex: 1; min-width: 0; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trail-when { flex: none; color: var(--ink-3); font-size: 11.5px; }

/* how many messages a row stands for */
.thread-count {
  flex: none; margin-left: 4px; padding: 1px 6px;
  border-radius: var(--radius-pill); background: var(--surface-2);
  color: var(--ink-3); font-size: 11px; font-weight: 500;
}

/* the trimmed trail under a reply, as in Gmail */
.quote-wrap { margin: 10px 0 4px; }
.quote-toggle {
  height: 18px; padding: 0 9px;
  border-radius: 9px; background: var(--line);
  color: var(--ink-2); font-size: 13px; line-height: 1; letter-spacing: 1px;
}
.quote-toggle:hover { background: var(--line-strong); }
.composer .quoted { margin-top: 8px; }
.composer .quoted .quoted-head { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.composer .quoted blockquote {
  margin: 0; padding-left: 12px;
  border-left: 2px solid var(--line-strong); color: var(--ink-2);
}

/* an inline reply reads as part of the conversation */
.composer.inline {
  position: static; width: auto; max-width: none;
  margin: 18px 0 0; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
  border: 1px solid var(--line);
}
.composer.inline .composer-top { border-radius: 14px 14px 0 0; }
.composer.inline #cBody { min-height: 120px; }

/* a pin the group owner locked */
.pinned-item.locked { background: var(--accent-softer); border-color: var(--accent-soft); }
.pin-lock { opacity: .5; font-size: 11px; padding: 0 4px; }

/* distribution groups */
.grp-layout { display: flex; gap: 16px; margin-top: 10px; }
.grp-list-col { width: 200px; flex: none; }
.grp-list {
  min-height: 180px; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px; margin-bottom: 8px;
}
.grp-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 9px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.grp-row:hover { background: var(--hover); }
.grp-row.on { background: var(--accent-soft); color: var(--accent-dark); font-weight: 500; }
.grp-row small { margin-left: auto; color: var(--ink-3); font-size: 11px; }
.grp-detail { flex: 1; min-width: 0; }
.grp-detail textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 13px; line-height: 1.7; resize: vertical; outline: none;
}
.grp-detail textarea:focus { border-color: var(--accent); }
.grp-detail .inline-row { margin-top: 10px; flex-wrap: wrap; gap: 8px; }
.grp-detail .inline-row button { white-space: nowrap; }
.ghost-btn.danger { color: #DC2626; border-color: #F3C6C2; }
.row-chip.group { background: var(--accent-soft); color: var(--accent-dark); }
@media (max-width: 700px) {
  .grp-layout { flex-direction: column; }
  .grp-list-col { width: 100%; }
}

/* ---------- undo send ---------- */

.undo-bar {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 240;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px;
  border-radius: 10px;
  background: #12161D; color: #fff;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  animation: undoIn .16s ease;
}
@keyframes undoIn { from { opacity: 0; transform: translate(-50%, 8px); } }
.undo-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }
.undo-bar b { font-variant-numeric: tabular-nums; }
.undo-bar button {
  margin-left: 6px; padding: 0 4px;
  color: #9FC0FF; font-size: 12.5px; font-weight: 600; background: none;
}
.undo-bar button:hover { color: #fff; text-decoration: underline; }

/* ---------- address suggestions ---------- */

.suggest {
  position: fixed; z-index: 250;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
  padding: 5px; overflow: hidden;
}
.suggest-row {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 7px;
  text-align: left; font-size: 13px; background: none;
}
.suggest-row.on, .suggest-row:hover { background: var(--accent-soft); }
.suggest-name { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-detail { flex: 1; min-width: 0; color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- empty states ---------- */

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 64px 24px; text-align: center;
  color: var(--ink-3);
}
.empty-art {
  width: 44px; height: 44px; margin-bottom: 10px;
  fill: none; stroke: var(--ink-3); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .5;
}
.empty-state strong { font-size: 15px; font-weight: 600; color: var(--ink-1); }
.empty-state span { font-size: 13px; max-width: 380px; line-height: 1.55; }
.empty-state small { font-size: 12px; color: var(--ink-3); opacity: .8; margin-top: 2px; }
.chat-empty-pane .empty-art, .meet-empty .empty-art { margin-bottom: 12px; }

/* ==========================================================================
   Dark mode corrections. Each of these was a light surface surviving into
   dark mode, found by walking every panel and measuring background luminance.
   ========================================================================== */

[data-theme="dark"] .composer-head { background: var(--surface-2); }
[data-theme="dark"] .composer-pill { background: var(--surface-2); border-color: var(--line); }
[data-theme="dark"] .composer-pill:focus-within { background: var(--surface-2); border-color: var(--accent); }

/* native controls keep the platform's light chrome unless told otherwise */
[data-theme="dark"] select,
/* an input with no type attribute defaults to text and matches nothing above */
[data-theme="dark"] input:not([type]),
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea {
  background: var(--surface-2);
  color: var(--ink-1);
  border-color: var(--line-strong);
  color-scheme: dark;
}
[data-theme="dark"] select option { background: var(--surface-2); color: var(--ink-1); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--ink-3); }

/* the sign-in card and its fields */
[data-theme="dark"] .fluid-card { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .control { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-1); }
[data-theme="dark"] .control:focus { border-color: var(--accent); }

/* white-on-accent stays readable whatever the theme */
[data-theme="dark"] .undo-bar { background: #0B0E13; }
[data-theme="dark"] .suggest { background: var(--surface-2); }

/* ---------- connection state ---------- */

.conn-bar {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%);
  z-index: 260;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 10px;
  font-size: 12.5px;
  background: #FEF3C7; color: #92400E;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
}
.conn-bar.dead { background: #FDECEA; color: #B3261E; }
.conn-bar.back { background: #E7F6EC; color: #15803D; }
.conn-bar.back .conn-spin, .conn-bar.dead .conn-spin { display: none; }
.conn-spin {
  width: 13px; height: 13px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: connspin .7s linear infinite;
}
@keyframes connspin { to { transform: rotate(360deg); } }
.conn-bar button { margin-left: 6px; font-size: 12px; font-weight: 600; text-decoration: underline; }
/* the list is stale while disconnected; say so without hiding it */
body:has(.conn-bar:not([hidden])) .list .row { opacity: .55; }

/* ---------- loading skeleton ---------- */

.body-skeleton { padding: 4px 0; }
.body-skeleton span {
  display: block; height: 11px; margin-bottom: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--hover) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
.body-skeleton span:nth-child(1) { width: 100%; }
.body-skeleton span:nth-child(2) { width: 92%; }
.body-skeleton span:nth-child(3) { width: 74%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- keyboard ---------- */

.row.kfocus { box-shadow: inset 3px 0 0 var(--accent); background: var(--hover); }
.keys-modal { max-width: 640px; }
.kgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; }
.kgroup h4 {
  margin: 0 0 8px; font-size: 10.5px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink-3);
}
.krow { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.krow span { flex: 1; color: var(--ink-2); }
kbd {
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px;
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 11.5px; font-weight: 600;
}
@media (max-width: 620px) { .kgrid { grid-template-columns: 1fr; } }

/* ---------- density ---------- */

body[data-density="compact"] .row { height: 36px; }
body[data-density="compact"] .row-avatar { width: 20px; height: 20px; font-size: 8.5px; }
body[data-density="compact"] .row-from { font-size: 12.5px; }
body[data-density="compact"] .row-subject,
body[data-density="compact"] .row-text { font-size: 12.5px; }
body[data-density="compact"] .row-date { font-size: 11.5px; }
body[data-density="compact"] .star { width: 13px; height: 13px; }

/* ---------- drop to attach ---------- */

.composer.dropping::after {
  content: '';
  position: absolute; inset: 8px;
  border: 2px dashed var(--accent); border-radius: 12px;
  background: var(--accent-softer);
  pointer-events: none;
}
.drop-hint {
  position: absolute; inset: 8px; z-index: 3;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--accent-dark); pointer-events: none;
}
.composer.dropping .drop-hint { display: flex; }
.drop-hint svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drop-hint b { font-size: 14px; }
.drop-hint span { font-size: 12px; opacity: .8; }

/* long unbroken strings in a plain-text message must not widen the pane */
.reader-content pre { white-space: pre-wrap; word-break: break-word; }
.reader-body { overflow-x: hidden; }

/* ---------- the message itself stays on a light card ---------- */

.mail-frame {
  background: #fff;
  border-radius: 10px;
}
[data-theme="dark"] .reader-content .mail-frame {
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* a plain-text message gets the same treatment, so both read the same */
[data-theme="dark"] .reader-content > pre {
  background: #fff; color: #1F2124;
  padding: 18px 20px; border-radius: 10px;
  border: 1px solid var(--line);
}

/* the quoted trail inside a reply is our own markup, so it follows the theme */
[data-theme="dark"] .composer .quoted blockquote { border-left-color: var(--line-strong); }

/* ---------- pasted and attached images ---------- */

.attach-img {
  position: relative; display: inline-block;
  width: 92px; height: 72px;
  margin: 0 8px 8px 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
  vertical-align: top;
}
.attach-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-img .attach-x {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(15, 22, 32, .72); color: #fff;
  opacity: 0; transition: opacity .12s;
}
.attach-img:hover .attach-x { opacity: 1; }
.attach-img .attach-x .icon { width: 11px; height: 11px; stroke: #fff; }

/* dropping a file onto an open conversation */
.chat-thread.dropping { position: relative; }
.chat-thread.dropping::after {
  content: 'Drop to attach';
  position: absolute; inset: 10px;
  display: grid; place-items: center;
  border: 2px dashed var(--accent); border-radius: 12px;
  background: var(--accent-softer); color: var(--accent-dark);
  font-size: 14px; font-weight: 600;
  pointer-events: none; z-index: 5;
}

/* the pending attachments sit above the message box, as in Google Chat */
/* The message box and its pending attachments share a column, so the strip
   always lines up with the box however wide the pane is. */
.composer-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-composer .attach-list {
  margin: 0 0 8px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0;
}

/* ---------- image in a message ---------- */

.msg-shot { margin: 5px 0 0; max-width: 280px; }
.msg-shot .msg-image { cursor: zoom-in; transition: filter .12s; }
.msg-shot .msg-image:hover { filter: brightness(.94); }
.msg-shot figcaption {
  display: flex; align-items: center; gap: 6px;
  margin-top: 5px;
  font-size: 11.5px; color: var(--ink-3);
}
.msg-shot figcaption .icon { width: 12px; height: 12px; }
/* the picture sits outside the bubble, on the pane background, so its caption
   keeps the ordinary muted colour whoever sent it */

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(12, 15, 20, .97);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: dlgIn .12s ease;
}
body.lightbox-open { overflow: hidden; }
.lightbox-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 52px; display: flex; align-items: center; gap: 14px;
  padding: 0 18px; color: #E8EAED; font-size: 13px;
}
.lightbox-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-count { color: #9AA0A6; font-size: 12px; font-variant-numeric: tabular-nums; }
.lightbox-btn {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; color: #E8EAED;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, .12); }
.lightbox-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-body { max-width: 88vw; max-height: 82vh; display: grid; place-items: center; }
.lightbox-body img { max-width: 88vw; max-height: 82vh; border-radius: 6px; display: block; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; left: 18px;
  display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff;
}
.lightbox-nav.next { left: auto; right: 18px; }
.lightbox-nav:hover { background: rgba(255, 255, 255, .2); }
.lightbox-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 620px) { .lightbox-nav { width: 38px; height: 38px; left: 8px; } .lightbox-nav.next { right: 8px; left: auto; } }

/* images stack rather than sitting side by side, so each caption stays with its picture */
.msg-files:has(.msg-shot) { flex-direction: column; align-items: flex-start; }
.bubble-row.mine .msg-files:has(.msg-shot) { align-items: flex-end; }

/* ---------- sync from Gmail ---------- */

/* The list can run to dozens of addresses, so the dialog is capped to the
   window and its body scrolls — otherwise it grows past the top of the screen
   and the heading is unreachable. */
.sync-modal {
  max-width: 820px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
}
.sync-modal .modal-head, .sync-modal .modal-foot { flex: none; }
.sync-modal .modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.sync-modal .grid th:first-child, .sync-modal .grid td:first-child { padding-left: 4px; }
.sync-modal .grid td { white-space: nowrap; }
.sync-modal .grid td:nth-child(2) { white-space: normal; word-break: break-word; }

/* already-registered rows are collapsed behind a line, not listed by default */
.sync-fold {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2);
  font-size: 12.5px; color: var(--ink-2); cursor: pointer; width: 100%;
  text-align: left;
}
.sync-fold:hover { background: var(--hover); }
.sync-fold .chev {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  transition: transform .15s;
}
.sync-fold.open .chev { transform: rotate(90deg); }
.sync-fold b { color: var(--ink-1); font-weight: 600; }
.sync-modal .grid { margin-top: 12px; }
.sync-modal .grid td { vertical-align: middle; }
.sync-row.skip { opacity: .55; }
.sync-row input { accent-color: var(--accent); }
.sync-tag {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--radius-pill); font-size: 11px;
}
.sync-tag.new { background: #E7F6EC; color: #15803D; }
.sync-tag.have { background: var(--surface-2); color: var(--ink-3); }
.sync-tag.warn { background: #FEF3C7; color: #B45309; }

/* email log search */
.ml-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.ml-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
/* users: search and pages */
.users-tools { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; flex-wrap: wrap; }
.users-search { position: relative; flex: 1; min-width: 240px; max-width: 460px; }
.users-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.9; stroke-linecap: round;
  pointer-events: none;
}
.users-search input {
  width: 100%; height: 40px; padding: 0 12px 0 38px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); color: var(--ink-1); font: inherit; font-size: 13.5px; outline: none;
}
.users-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.users-count { font-size: 12.5px; color: var(--ink-2); }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.pager[hidden] { display: none; }
.pager-info { margin-right: auto; font-size: 12.5px; color: var(--ink-2); }
.pager-btn {
  min-width: 34px; height: 32px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink-1); font: inherit; font-size: 13px; cursor: pointer;
}
.pager-btn:hover:not([disabled]) { background: var(--hover); }
.pager-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pager-btn[disabled] { opacity: .4; cursor: default; }
.pager-gap { padding: 0 2px; color: var(--ink-3); }
/* groups log */
.grp-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.grp-kind { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.grp-kind.on { background: var(--surface); color: var(--ink-1); box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.grp-kind span { font-weight: 500; color: var(--ink-3); }
.grp-status { height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink-1); font: inherit; font-size: 13px; }
#grpTable td { vertical-align: top; }
.grp-count { font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }
.grp-chips { display: flex; flex-wrap: wrap; gap: 5px; max-width: 420px; }
.grp-chip { padding: 2px 9px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; color: var(--ink-1); white-space: nowrap; }
.grp-chip em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--accent); margin-left: 2px; }
.grp-more { padding: 2px 9px; border: 0; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
tr.grp-gone td { opacity: .72; }
/* a mailbox that needs signing in to Google again */
.ghost-btn.reconnect-btn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.ghost-btn.reconnect-btn:hover { background: var(--accent-dark, var(--accent)); }
/* admin: disconnected mailboxes, on every page */
.mb-alert {
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid #F3C6C2; border-radius: 14px;
  background: #FDEBE9; color: #8A231B;
}
.mb-alert[hidden] { display: none; }
.mb-alert-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.mb-alert-head svg { width: 18px; height: 18px; flex: none; align-self: center; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mb-alert-head b { font-size: 14px; }
.mb-alert-head span { font-size: 12.5px; opacity: .9; }
.mb-alert-row {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 0 0; margin-top: 8px; border-top: 1px solid rgba(166, 51, 42, .18);
}
.mb-alert-who { flex: 1; min-width: 0; }
.mb-alert-who b { display: block; font-size: 13.5px; }
.mb-alert-who span { display: block; font-size: 12.5px; opacity: .9; margin-top: 1px; }
.mb-alert-btn {
  flex: none; height: 34px; padding: 0 16px; border: 0; border-radius: 99px;
  background: #C9372E; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mb-alert-btn:hover { background: #A8291F; }
[data-theme="dark"] .mb-alert { background: rgba(220, 80, 70, .12); border-color: rgba(220, 80, 70, .35); color: #F5B3AE; }
[data-theme="dark"] .mb-alert-row { border-top-color: rgba(245, 179, 174, .2); }
.account-since { margin-top: 2px; font-size: 11.5px; color: var(--ink-2); }

/* mail page: this person's own mailbox is disconnected */
.sync-alert {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 12px; padding: 12px 16px;
  border: 1px solid #F3C6C2; border-radius: 14px;
  background: #FDEBE9; color: #8A231B;
  font-size: 13px; line-height: 1.45;
}
.sync-alert[hidden] { display: none; }
.sync-alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sync-alert b { display: block; font-size: 14px; margin-bottom: 1px; }
[data-theme="dark"] .sync-alert { background: rgba(220, 80, 70, .12); border-color: rgba(220, 80, 70, .35); color: #F5B3AE; }

.alias-fixed { font-size: 13px; color: var(--ink-1); white-space: nowrap; }
.ml-row.ml-dates { grid-template-columns: repeat(3, minmax(0, 240px)); }
@media (max-width: 720px) { .ml-row.ml-dates { grid-template-columns: 1fr; } }
.ml-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ml-field[hidden] { display: none; }
.ml-field > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ml-field em { font-style: normal; color: #C9372E; }
.ml-field input, .ml-field select {
  height: 40px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-1);
  font: inherit; font-size: 13.5px; outline: none;
}
.ml-field input:focus, .ml-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ml-tip { margin: 0; }
.ml-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 8px; border-top: 1px solid var(--line); }
.ml-results-head b { font-size: 14px; }
.ml-table-wrap { overflow-x: auto; }
#mlTable td { vertical-align: top; font-size: 13px; }
#mlTable td.ml-date { white-space: nowrap; color: var(--ink-2); }
#mlTable td.ml-addr { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mlTable td.ml-subj { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mlTable td.ml-box { color: var(--ink-2); white-space: nowrap; }
.ml-dir { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ml-dir.sent { background: #E7F0FE; color: #1D4ED8; }
.ml-dir.received { background: #E7F6EC; color: #15803D; }
.ml-dir.spam { background: #FDEBE9; color: #A6332A; }
[data-theme="dark"] .ml-dir.sent { background: rgba(59,130,246,.18); color: #93C5FD; }
[data-theme="dark"] .ml-dir.received { background: rgba(34,197,94,.15); color: #86EFAC; }
[data-theme="dark"] .ml-dir.spam { background: rgba(220,80,70,.18); color: #F5B3AE; }
.ml-note { margin: 0 0 10px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; background: var(--surface-2); color: var(--ink-2); }
.ml-note.warn { background: #FEF3C7; color: #92400E; }
[data-theme="dark"] .ml-note.warn { background: rgba(240,195,109,.12); color: #F0D6A0; }

/* sign-in report */
.login-never { color: #B45309; font-weight: 600; }
[data-theme="dark"] .login-never { color: #E5B567; }
#loginTable td { vertical-align: top; }
#loginTable .cell-sub { margin-top: 2px; }

/* progress while a sync creates users in the background */
.sync-progress { margin-top: 18px; }
.sync-bar {
  height: 8px; border-radius: 99px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
.sync-bar span {
  display: block; height: 100%; width: 0;
  background: var(--accent); border-radius: 99px;
  transition: width .4s ease;
}
.sync-progress-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 0 8px; font-size: 13.5px; color: var(--ink-1);
}
.sync-modal .grid th input { accent-color: var(--accent); }
.sync-pw {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  background: var(--surface-2); padding: 2px 7px; border-radius: 4px;
}
.sync-problem {
  margin: 10px 0; padding: 9px 12px;
  border-radius: 8px; background: #FDECEA; color: #B3261E; font-size: 12.5px;
}
.sync-done { margin-top: 6px; }
.sync-done h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; }

/* a mailbox connected with its own OAuth client, i.e. another Workspace */
.pill-soft { background: var(--accent-soft); color: var(--accent-dark); }

/* a conversation mirrored from Google Chat, where replies happen elsewhere */
.space-note {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3); font-size: 12.5px;
}
.space-note .icon { width: 15px; height: 15px; opacity: .7; }
.conv-badge {
  margin-left: 6px; padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-3);
  font-size: 10.5px; font-weight: 500;
}

/* the space picker can list hundreds of conversations */
.pick-modal {
  max-width: 560px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
}
.pick-modal .modal-head, .pick-modal .modal-foot { flex: none; }
.pick-modal .modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.pick-modal .control { width: 100%; margin: 10px 0 4px; }
#spacePickList, #spaceDmList { display: flex; flex-direction: column; gap: 2px; }
#spacePickList .grp-row, #spaceDmList .grp-row { width: 100%; }

/* image storage dashboard */
.media-range {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin-top: 10px;
}
.media-range .field { margin: 0; min-width: 150px; }
.media-range button { flex: none; }

/* ==========================================================================
   Stored images and files — the storage dashboard in Admin → Archive
   ========================================================================== */

.media { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }

.media-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
}
.media-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.media-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.media-sub b { color: var(--ink-2); font-weight: 600; }
.media-sub code {
  padding: 2px 7px; margin-left: 2px;
  border: 1px solid var(--line); border-radius: 5px;
  background: var(--surface-2);
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--ink-2);
}

/* the four numbers */
.media-stats {
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .media-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .media-stats { grid-template-columns: 1fr; } }

.media-stat {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
}
.media-stat .top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ink-3);
}
.media-stat .dot { width: 9px; height: 9px; border-radius: 50%; background: #16A34A; }
.media-stat .dot.warn { background: #D97706; }
.media-stat .dot.info { background: var(--accent); }
.media-stat .big { margin-top: 12px; font-size: 24px; font-weight: 700; color: var(--ink-1); }
.media-stat .small { margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
.media-stat .small.good { color: #15803D; font-weight: 500; }

/* cards */
.media-card {
  display: flex; flex-direction: column;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
}
.media-card.media-flush { padding: 0; overflow: hidden; }
.media-card-head {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 11px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ink-2);
}
.media-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.media-card-top h4 { margin: 0; font-size: 15px; font-weight: 600; }
.media-card-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.media-card-foot .media-note { flex: 1; margin: 0; }

/* breakdown table */
.media-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.media-table th {
  padding: 12px 22px; text-align: left;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink-3);
}
.media-table td { padding: 14px 22px; border-bottom: 1px solid var(--line); }
.media-table tbody tr:last-child td { border-bottom: 0; }
.media-table tbody tr:hover { background: var(--hover); }
.media-table .num { text-align: right; }
.media-table td.num { font-variant-numeric: tabular-nums; }
.media-table td.size { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.media-table .what { font-weight: 500; color: var(--ink-1); }
.media-table .what small { font-weight: 400; color: var(--ink-3); }
.media-table td:last-child { text-align: right; }

/* the two control cards */
.media-cols { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .media-cols { grid-template-columns: 1fr; } }

.media-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.media-grid .field { margin: 0; }
@media (max-width: 520px) { .media-grid { grid-template-columns: 1fr; } }

.media-label {
  display: block; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ink-2);
}
.media-note { margin: 0 0 12px; font-size: 12px; color: var(--ink-3); line-height: 1.55; }

/* destructive controls, distinct from the ordinary ghost button */
.danger-wide {
  width: 100%; height: 38px; margin-top: 14px;
  border: 1px solid #F3C6C2; border-radius: 8px;
  background: #FDECEA; color: #B3261E;
  font-size: 13px; font-weight: 500;
}
.danger-wide:hover { background: #FBDDD9; }

.media-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.media-chips button {
  padding: 7px 12px;
  border: 1px solid transparent; border-radius: 8px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 12px; font-weight: 500;
}
.media-chips button:hover { background: #FDECEA; color: #B3261E; border-color: #F3C6C2; }

[data-theme="dark"] .danger-wide { background: #34191A; border-color: #5A2B27; color: #F2B8B5; }
[data-theme="dark"] .danger-wide:hover { background: #40201F; }
[data-theme="dark"] .media-chips button:hover { background: #34191A; color: #F2B8B5; border-color: #5A2B27; }

/* the controls in these cards fill their column, as in the rest of the console */
.media-card .field { display: flex; flex-direction: column; }
.media-card .field label {
  margin-bottom: 5px;
  font-size: 12px; font-weight: 500; color: var(--ink-2);
}
.media-card .field select,
.media-card .field input {
  width: 100%; height: 38px; padding: 0 11px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface-2); color: var(--ink-1);
  font: inherit; font-size: 13px;
  outline: none;
}
.media-card .field select:focus,
.media-card .field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}
.media-card > .field { margin-bottom: 14px; }

/* An image reserves its space before it loads, so the conversation does not
   jump about as pictures arrive. */
.msg-shot { max-width: 280px; }
.msg-shot .msg-image {
  width: 100%; height: auto; display: block;
  background: var(--surface-2);          /* a placeholder while it loads */
  border-radius: 8px;
}

/* "Updated 11:42 am" beside a Refresh button */
.refreshed { font-size: 12px; white-space: nowrap; margin: 0; }
#sub-audit .hcard + .hcard { margin-top: 16px; }
#sub-audit > .panel-head > .inline-row,
#sub-logins .panel-head > .inline-row { margin-left: auto; flex: none; }

/* Admin → Mailboxes: result of "Check connection" (mail server edition) */
.server-check { display: grid; gap: 8px; margin: 6px 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2, rgba(127,127,127,.06)); }
.server-check .sc-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.server-check .sc-row b { font-weight: 600; min-width: 280px; }

/* Admin → Spaces: the picker can list hundreds of conversations */
.pick-modal {
  max-width: 560px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
}
.pick-modal .modal-head, .pick-modal .modal-foot { flex: none; }
.pick-modal .modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.pick-modal .control { width: 100%; margin: 10px 0 4px; }
#spacePickList, #spaceDmList { display: flex; flex-direction: column; gap: 2px; }
#spacePickList .grp-row, #spaceDmList .grp-row { width: 100%; }

/* Admin → Spaces: what to do in Google Cloud before the first connection */
.setup-note { margin: 4px 0 18px; padding: 14px 18px; border-radius: 12px; background: var(--surface-2, rgba(127,127,127,.06)); font-size: 13px; line-height: 1.55; }
.setup-note h3 { margin: 0 0 6px; font-size: 14px; }
.setup-note ol { margin: 0 0 8px; padding-left: 20px; }
.setup-note li { margin: 4px 0; }
.setup-note code, #spaceRedirectModal { word-break: break-all; }
.setup-note .ghost-btn { margin-left: 8px; padding: 2px 10px; height: auto; }

.setup-warn { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 13px; background: rgba(217,119,6,.12); color: #92400E; }
[data-theme="dark"] .setup-warn { background: rgba(245,158,11,.16); color: #FCD34D; }


/* ---------- a conversation, as in Gmail: one card per message ---------- */

.conv-head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.conv-head .reader-subject { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.conv-count {
  flex: none; padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--hover); color: var(--ink-2); font-size: 12px; font-weight: 500;
}
.conv-all { margin-left: auto; flex: none; }

.conv-list {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; max-width: 1180px;
}
.cmsg + .cmsg, .cmsg + .conv-more, .conv-more + .cmsg { border-top: 1px solid var(--line); }

.cmsg-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; cursor: pointer; min-width: 0;
}
.cmsg:not(.open) .cmsg-head:hover { background: var(--hover); }
.cmsg-head .avatar { width: 36px; height: 36px; font-size: 13px; flex: none; }
.cmsg-who { flex: 1; min-width: 0; }
.cmsg-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cmsg-name { font-weight: 600; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmsg-email { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmsg-draft { color: #D93025; font-weight: 600; }
.cmsg-sub {
  color: var(--ink-3); font-size: 12.5px; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmsg.open .cmsg-sub { color: var(--ink-2); }
/* a folded message not read yet stands out, as in the list */
.cmsg.unread:not(.open) .cmsg-name { font-weight: 700; }
.cmsg.unread:not(.open) .cmsg-sub { color: var(--ink-2); }
.cmsg-when { flex: none; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.cmsg-clip { flex: none; color: var(--ink-3); display: flex; }
.cmsg-clip .icon { width: 14px; height: 14px; }
.cmsg-tools { flex: none; display: flex; gap: 2px; margin-left: 2px; }
.cmsg-tools .iconbtn { width: 30px; height: 30px; }

/* the body lines up with the sender's name, under the picture */
.cmsg-body { padding: 0 18px 18px 66px; min-width: 0; }
.cmsg-body .reader-content { max-width: none; }
.cmsg-body .mail-frame { min-height: 0; }
.cmsg-body .attachments { margin-top: 14px; }
.cmsg-body .archived-note { margin: 0 0 10px; }
.mail-text { white-space: pre-wrap; word-break: break-word; font: inherit; margin: 0; line-height: 1.6; }
.mail-quoted { margin-top: 10px; color: var(--ink-2); }

/* quoted earlier messages, trimmed */
.trim-toggle {
  margin-top: 6px; height: 16px; padding: 0 8px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--hover); color: var(--ink-2);
  font-size: 10px; line-height: 1; letter-spacing: 1px;
}
.trim-toggle:hover, .trim-toggle.on { border-color: var(--ink-3); color: var(--ink-1); }

/* "3 older messages", folded together */
.conv-more {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 18px; background: var(--surface-2); border: 0;
  color: var(--ink-2); font-size: 12.5px; text-align: left;
}
.conv-more span {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-weight: 600; color: var(--ink-1);
}
.conv-more:hover { background: var(--hover); }

/* reply to the conversation: under the last message */
.reader-actions.conv-actions { margin: 18px 0 0; padding: 0; justify-content: flex-start; }

@media (max-width: 760px) {
  .cmsg-head { padding: 10px 12px; gap: 10px; }
  .cmsg-body { padding: 0 12px 14px; }
  .cmsg-email { display: none; }
  .cmsg-tools [data-act="replyAll"], .cmsg-tools [data-act="forward"] { display: none; }
  .conv-more { padding: 8px 12px; }
}

/* Import users from CSV */
.imp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  margin-top: 14px; padding: 26px 16px;
  border: 1.5px dashed var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink-2);
  cursor: pointer; text-align: center; font-size: 13px;
  transition: border-color .15s, background .15s;
}
.imp-drop:hover, .imp-drop.over { border-color: var(--accent); background: var(--accent-softer); }
.imp-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.imp-drop .icon { width: 26px; height: 26px; color: var(--accent); margin-bottom: 4px; }
.imp-drop b { color: var(--ink-1); font-size: 13.5px; }
.imp-drop span { font-size: 12px; color: var(--ink-3); }
.imp-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.sync-modal .imp-cols { margin-top: 6px; }
.sync-modal .imp-cols td { white-space: normal; vertical-align: top; font-size: 12.5px; color: var(--ink-2); }
.sync-modal .imp-cols td:first-child { width: 128px; white-space: nowrap; padding-left: 8px; }
.imp-cols code, #impChoose code {
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
  background: var(--surface-2); padding: 1px 5px; border-radius: 4px; color: var(--ink-1);
}
.imp-was { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.imp-note { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; white-space: normal; }
.sync-tag.err { background: #FDECEA; color: #B3261E; }
[data-theme="dark"] .sync-tag.new { background: #163322; color: #7DD3A0; }
[data-theme="dark"] .sync-tag.warn { background: #3A2E12; color: #E5B567; }
[data-theme="dark"] .sync-tag.err, [data-theme="dark"] .sync-problem { background: #3B1A18; color: #F2A9A2; }