/* ============ 0N — zero in ============ */
:root {
  --ui-font: -apple-system, 'Segoe UI', system-ui, sans-serif;
  --body-font: Charter, 'Iowan Old Style', Georgia, serif;
  --head-font: -apple-system, 'Segoe UI', system-ui, sans-serif;
  --fs: 17px; --lh: 1.6; --colw: 68ch; --ls: 0em; --pgap: 12px;
  /* electric accents — each one has a job */
  --gold: #ffb300; --gold-text: #f59300;
  --review: #e935c1; --review-glow: rgba(233, 53, 193, .35);
  --cyan: #00b3e6;
  --violet: #8845f5;
  --lime: #7ac70c;
}
[data-theme="daylight"] {
  --bg: #ffffff; --panel: #ffffff; --panel2: #ffffff; --ink: #111214; --ink-dim: #8f8f8f;
  --line: #ececec; --sel: #f7f7f7; --off: #d9d9d9;
}
[data-theme="chambers"] {
  --bg: #191c22; --panel: #20242c; --panel2: #262b35; --ink: #e8e4d8; --ink-dim: #8d93a1;
  --line: #313743; --sel: #2c3341; --off: #4a5160;
}
[data-theme="legalpad"] {
  --bg: #efe8b8; --panel: #f7f1c6; --panel2: #ece3a8; --ink: #3a3418; --ink-dim: #94894f;
  --line: #ddd394; --sel: #f2e9ab; --off: #c4b878;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--ui-font); font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.hidden { display: none !important; }

/* ---------- logo: one heavy glyph pair — slashed zero and N, same size, same weight ---------- */
.brand-text {
  font-family: Menlo, Consolas, 'Courier New', monospace;
  font-weight: 700; font-size: 25px; letter-spacing: 3px; color: var(--ink);
  -webkit-text-stroke: 1.2px var(--ink);
}
.brand-text.big { font-size: 64px; -webkit-text-stroke: 2.5px var(--ink); letter-spacing: 7px; }
.brand { display: flex; align-items: center; cursor: pointer; }
.brand-cell { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.acct-tag { font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- PIN screen ---------- */
.pin-screen {
  min-height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 28px; padding: 32px 16px;
}
.pin-brand { text-align: center; }
.pin-tag { color: var(--ink-dim); letter-spacing: .25em; text-transform: uppercase; font-size: 12px; margin-top: 8px; }
.pin-sub { color: var(--ink-dim); font-size: 12.5px; margin-top: 4px; }
.user-tiles { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; max-width: 640px; }
.user-tile {
  width: 118px; height: 118px; border-radius: 16px; background: var(--panel);
  border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: transform .1s; position: relative;
}
.user-tile:hover { transform: translateY(-3px); }
.user-tile .avatar {
  width: 46px; height: 46px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.user-tile .tname { font-weight: 600; }
.user-tile.add { color: var(--ink-dim); font-size: 40px; border-style: dashed; }
.tile-ping {
  position: absolute; top: -7px; right: -7px; background: var(--review); color: #fff;
  min-width: 22px; height: 22px; border-radius: 11px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.pin-hint { color: var(--ink-dim); font-size: 12px; letter-spacing: .06em; }

.pad-wrap {
  position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; z-index: 50;
}
.pad-title { font-size: 19px; font-weight: 700; }
.pad-dots { display: flex; gap: 14px; height: 16px; }
.pad-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink-dim); }
.pad-dots i.fill { background: var(--ink); border-color: var(--ink); }
.pad-msg { min-height: 18px; color: var(--review); font-size: 13px; }
.keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; }
.keypad button {
  height: 64px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
  font-size: 24px; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.keypad button:active { background: var(--sel); }
.pad-fn { color: var(--ink-dim); }
.pad-name-row { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pad-name-row input {
  font: 600 18px var(--ui-font); padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-align: center;
}
.color-row { display: flex; gap: 8px; }
.color-row button { width: 26px; height: 26px; border-radius: 50%; border: 3px solid transparent; }
.color-row button.sel { border-color: var(--ink); }

/* ---------- top bar: brand+account · DATE+TIME · actions ---------- */
.app { height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 14px; position: relative;
  padding: 12px 16px 12px 32px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.date-bar {
  position: absolute; left: 50%; transform: translateX(-50%);
  text-align: center; font-weight: 800; letter-spacing: .18em; font-size: 13px;
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.search-box {
  width: 170px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel); color: var(--ink); font: 12.5px var(--ui-font); transition: width .15s;
}
.search-box:focus { width: 240px; outline: none; border-color: var(--ink); }
.search-box.on { border-color: var(--gold); border-width: 2px; background: var(--sel); font-weight: 700; }
.filter-note {
  display: flex; gap: 12px; align-items: center; justify-content: center; padding: 9px;
  background: var(--sel); border-bottom: 1px solid var(--gold); font-size: 12.5px; font-weight: 700;
}
.filter-note button { color: var(--gold-text); font-weight: 800; text-decoration: underline; }

/* new mail: bottom-right knock banners */
.arrivals { position: fixed; right: 16px; bottom: 16px; z-index: 85; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.arrive {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left;
  background: var(--panel); border: 1px solid var(--ink); border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22); max-width: 340px; animation: arrive-in .25s ease-out;
}
.arrive b { font-size: 13px; }
.arrive > span { font-size: 12.5px; color: var(--ink-dim); }
.arrive .a-tags { display: flex; gap: 4px; }
.arrive .a-tags .chip { border: 1px solid var(--violet); color: var(--violet); background: none; font-size: 10px; }
.arrive.gone { opacity: 0; transform: translateX(20px); transition: all .35s; }
@keyframes arrive-in { from { opacity: 0; transform: translateY(14px); } }

/* channel count bumped */
.views button.bump, .inbox-row button.bump { animation: chbump .5s ease-out 1; } /* one clean pulse */
@keyframes chbump { 30% { transform: scale(1.12); } }

/* the thread is a chat — bubbles, black words, ours on the right */
.tchat { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 22px; }
.tb-title { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-dim); text-align: center; }
.bubble-wrap { display: flex; }
.bubble-wrap.mine { justify-content: flex-end; }
.bubble {
  max-width: min(78%, 62ch); background: var(--sel); border: 1px solid var(--line);
  border-radius: 16px; border-bottom-left-radius: 5px; padding: 10px 15px;
}
.bubble-wrap.mine .bubble {
  border-radius: 16px; border-bottom-right-radius: 5px;
  background: color-mix(in srgb, var(--cyan) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--cyan) 35%, var(--line));
}
body.plain-bub .bubble-wrap.mine .bubble { background: var(--sel); border-color: var(--line); }
.b-hd { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.b-hd .b-orig-btn.push { margin-left: auto; padding-left: 14px; }
.b-hd b { font-size: 12.5px; }
.b-date { color: var(--ink-dim); font-size: 11px; }
.bubble p {
  font-family: var(--body-font); font-size: var(--fs); line-height: var(--lh);
  color: var(--ink); margin-bottom: 8px; position: relative; white-space: pre-wrap;
}
.bubble p:last-child { margin-bottom: 0; }
.bubble p, .r-body p { overflow-wrap: anywhere; word-break: break-word; }
.bubble.r-body { max-width: min(78%, 62ch); }
@media print { .arrivals { display: none !important; } }
.top-actions { margin-left: auto; }
.acct-line { font-size: 24px; font-weight: 800; color: var(--ink); text-align: center; letter-spacing: .01em; }
.date-bar .dsub { color: var(--ink-dim); font-weight: 600; }
.date-bar .dtime { color: var(--ink); }
.brand-cell { justify-self: start; align-items: center; gap: 14px; }
.acct-tag { font-size: 15px; font-weight: 700; color: var(--ink); }
.brand-cell { position: relative; }
.nav-chip {
  border: 1px solid var(--line); border-radius: 9px; padding: 5px 11px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--ink); white-space: nowrap;
}
.nav-chip:hover { border-color: var(--ink); color: var(--ink); }
.top-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.icon-btn {
  position: relative; width: 36px; height: 36px; border-radius: 10px; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--panel);
}
#gearBtn { font-size: 19px; }
.icon-btn.attn { animation: attn 1s ease-in-out 4; }
@keyframes attn { 50% { box-shadow: 0 0 0 5px var(--review-glow); border-color: var(--review); } }
.dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--review); }
.me-chip {
  width: 38px; height: 38px; border-radius: 50%; padding: 0; color: #fff;
  font-weight: 800; font-size: 12px; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
}
.top-actions { position: relative; }
.me-menu { position: absolute; top: calc(100% + 8px); right: 0; left: auto; min-width: 190px; }

.views-strip {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 16px 10px;
  background: var(--panel); border-bottom: 1px solid var(--line); position: relative;
}
.acct-row { display: flex; align-items: center; gap: 16px; position: relative; width: 100%; padding: 0 18px; }
.az { flex: 1 1 0; min-width: 0; display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.az.right { justify-content: flex-start; flex-wrap: wrap; }
.acct-center {
  flex: none; display: flex; align-items: center; gap: 8px; margin: 0 22px;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 4px 18px;
  transition: border-color .15s, box-shadow .15s;
}
.acct-center.dropover { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 25%, transparent); }
.acct-center.dropover .acct-line { color: var(--cyan); }
.az .search-box { width: min(100%, 330px); }
.az .search-box:focus { width: min(100%, 360px); }
/* INBOX is pinned to true center; search hugs it left, Drafts hugs it right */
.inbox-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; }
.inbox-line .search-box { width: 150px; justify-self: end; }
.inbox-line .search-box:focus { width: 210px; }
.drafts-slot { display: flex; justify-self: start; }
.drafts-slot button.zero { opacity: .38; }
.new-email { justify-self: end; font-size: 12.5px; padding: 7px 14px; border-width: 1.5px; }
.new-email:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* NEW EMAIL = a fresh letter on the desk, same paper as focus mode */
.chat-panel.compose-panel { height: auto; max-height: 76vh; width: min(940px, 96vw); }
.chat-panel.compose-panel {
  top: 4vh; width: min(850px, 94vw); height: 90vh;
  padding: 56px 88px 24px; border-radius: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.compose-panel .chat-head { margin-bottom: 12px; }
.compose-panel .c-field { border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 2px; }
.compose-panel .c-field:focus { outline: none; border-bottom-color: var(--review); }
.compose-panel .c-body { flex: 1; border: none; border-radius: 0; padding: 14px 2px; resize: none; line-height: 1.7; }
.compose-panel .c-body:focus { outline: none; }
.compose-panel .resp-foot { margin-top: auto; }
@media (max-width: 700px) { .chat-panel.compose-panel { height: auto; max-height: 76vh; width: min(940px, 96vw); }
.chat-panel.compose-panel { padding: 56px 24px 20px; } }
.c-field {
  width: 100%; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink);
  font-family: var(--body-font); font-size: var(--fs); font-weight: 700;
}
.quick-task { font: 600 12.5px var(--ui-font); } /* the nav one stays compact */
.c-field:focus { outline: none; border-color: var(--ink); }
.c-body {
  width: 100%; min-height: 200px; padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink); font: var(--fs) var(--body-font); line-height: 1.6; resize: vertical;
}
.drafts-slot button {
  padding: 4px 12px; border-radius: 4px; color: var(--ink); font-weight: 700; font-size: 12.5px;
  display: flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent;
}
.drafts-slot button.active { border-bottom-color: var(--gold); }
.drafts-slot .count { background: var(--sel); border-radius: 9px; padding: 0 7px; font-size: 11px; }
.inbox-row { display: flex; justify-content: center; }
.inbox-row button {
  font-size: 21px; font-weight: 800; letter-spacing: .1em; color: var(--ink);
  padding: 4px 20px; display: flex; align-items: center; gap: 9px;
  border-bottom: 2.5px solid transparent; border-radius: 4px;
}
.inbox-row button.active { border-bottom-color: var(--gold); }
.inbox-row .count { background: var(--sel); border-radius: 10px; padding: 0 8px; font-size: 12px; }
.inbox-row button.active .count.unread { background: var(--violet); color: #fff; }
.views { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; padding: 0 10px; margin-bottom: 18px; }
.views button.dropover { background: var(--sel); border-bottom-color: var(--violet); }
.views button.pushed { margin-left: auto; }
.views button {
  padding: 6px 7px 3px; border-radius: 4px; color: var(--ink); font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 1px; border-bottom: 2px solid transparent;
  min-width: 52px; justify-content: center;
}
.views button .ch-icow { position: relative; display: inline-flex; }
.views button .ch-ico { font-size: 17px; line-height: 1.1; }
.views button .ch-icow .count { position: absolute; top: -7px; right: -13px; font-size: 9px; padding: 0 5px; border-radius: 8px; }
.views button .ch-lab { font-size: 9.5px; font-weight: 700; letter-spacing: .01em; }
.inbox-row .ch-icow, .drafts-slot .ch-icow { display: inline-flex; align-items: center; gap: 6px; }
.views button.active { color: var(--ink); border-bottom-color: var(--gold); }
.views .count { background: var(--sel); }
.views button.active .count.unread { background: var(--violet); color: #fff; }
.presence-strip { position: absolute; right: 14px; top: 8px; display: flex; gap: 8px; overflow: hidden; max-width: 30vw; }
.pres-chip {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-dim);
  background: var(--sel); padding: 4px 10px; border-radius: 14px; white-space: nowrap;
}
.pres-chip .pdot { width: 8px; height: 8px; border-radius: 50%; }

.bell-panel {
  position: absolute; right: 14px; top: 58px; z-index: 40; width: 340px; max-height: 60vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
.ping-row { padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ping-row:hover { background: var(--sel); }
.ping-row .pfrom { font-weight: 700; font-size: 13px; }
.ping-row .ptext { color: var(--ink); font-size: 12.5px; margin-top: 2px; }
.ping-empty { padding: 18px; color: var(--ink-dim); text-align: center; }

/* ---------- inbox: dot · FROM · SUBJECT · VIEWED · STATUS · DATE ---------- */
.main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.list-head, .row {
  display: grid; grid-template-columns: var(--cols, 24px minmax(120px, 170px) 1fr 92px 132px 84px);
  gap: 10px; align-items: baseline;
}
.list-head { padding: 6px 18px 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.list-pane .list-head { border-top: 1px solid var(--line); margin-top: -8px; }
.list-head button, .list-head span.hcol {
  text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--ink);
}
.list-head button.on { color: var(--ink); }
.list-head .date-col { text-align: right; }
.list-pane { flex: 1; overflow-y: auto; background: var(--panel); }
.row { padding: 12px 18px 12px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.row:hover { background: var(--sel); }
.row.sel { background: var(--sel); box-shadow: inset 3px 0 0 var(--gold); }
/* done rows fade through their read-text grey — the STATUS verdict stays full black */
body.strike-done .row.status-off .rsubj { text-decoration: line-through; text-decoration-thickness: 1px; }

/* unread = a violet dot, quietly alive (no glow, no blur) */
.udot { width: 10px; height: 10px; border-radius: 50%; align-self: center; justify-self: center; }
.udot.unread { background: var(--violet); width: 14px; height: 14px; animation: breathe 2.8s ease-in-out infinite; }
.udot.review { background: var(--review); width: 12px; height: 12px; animation: breathe 2.2s ease-in-out infinite; }
.udot.respond { background: var(--gold); width: 12px; height: 12px; animation: breathe 2.2s ease-in-out infinite; }
.udot.read { background: var(--lime); width: 7px; height: 7px; animation: none; }
.udot.done { background: var(--off); width: 7px; height: 7px; animation: none; }
.list-head { position: relative; }
.done-key { font-size: 9.5px !important; letter-spacing: .06em !important; text-align: center !important; }
.key-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; flex: none; }
/* glow then dim — the circle never changes size */
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* the flip: black belongs to the UNREAD; grey means eyes already got it */
.row .rfrom { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); }
.row .rsubj { color: var(--ink-dim); }
.row.unread .rfrom, .row.unread .rsubj { font-weight: 800; color: var(--ink); }
.row.unread .rsnip, .row.unread .chip, .row.unread .rdate { color: var(--ink); }
.row.unread .rtag-btn.has { color: var(--ink); border-color: var(--ink); }
.row .rdate { color: var(--ink-dim); font-size: 12px; white-space: nowrap; text-align: right; }
.row.bigdates .rdate { font-size: 14px; font-weight: 700; }
.rmain { min-width: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.row .rsubj { font-size: 13.5px; font-family: var(--head-font); }
.row .rsnip { color: var(--ink-dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 100px; }

/* VIEWED column — who opened, at a glance */
.rviewed { display: flex; gap: 3px; align-items: center; }
.rviewed .vb { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 8.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.rviewed .more { font-size: 10.5px; color: var(--ink-dim); font-weight: 700; }

/* SELECT column + bulk bar */
.selbox { width: 15px; height: 15px; accent-color: var(--violet); cursor: pointer; align-self: center; justify-self: center; }
.sel-bar {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 75;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.3); max-width: 92vw;
}
.sel-bar .sn { font-weight: 800; font-size: 13px; margin-right: 4px; }
.sel-bar button {
  border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius: 9px;
  padding: 6px 12px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--bg);
}
.sel-bar button:hover { background: color-mix(in srgb, var(--bg) 18%, transparent); }
.sel-bar .sel-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* ATT column — see + grab attachments without opening the email */
.ratt { position: relative; }
.ratt-btn {
  border: 1px solid var(--line); border-radius: 9px; padding: 2px 8px;
  font-size: 11px; font-weight: 800; color: var(--ink); white-space: nowrap;
}
.ratt-btn:hover { border-color: var(--ink); }
.ratt .mini-menu { left: auto; right: 0; }

/* office chat — centered drop-down off the firm name */
.chat-scrim {
  position: fixed; inset: 0; z-index: 56;
  background: color-mix(in srgb, var(--ink) 20%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
/* Boss PIN 4848 = מח מח — two brains. An accident we are keeping. */
.chat-panel {
  position: fixed; background: var(--panel);
  top: var(--chat-top, 88px); left: 50%; transform: translateX(-50%);
  width: 96vw; height: 82vh; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.25);
  display: flex; flex-direction: column; z-index: 58;
  padding: 62px 26px 16px; /* the real firm-name row sits inside this frame, with air */
}
.chatstate { display: inline-block; margin-left: 2px; }
.chatstate.unread { background: var(--violet); width: 12px; height: 12px; border-radius: 50%; animation: breathe 2.4s ease-in-out infinite; }
.chatstate.read { background: var(--lime); width: 8px; height: 8px; border-radius: 50%; }

/* who's in the office — the team row, right under the firm name */
.roster { display: flex; gap: 9px; align-items: center; justify-content: center; margin: -4px 0 6px; }
.roster .vb { width: 27px; height: 27px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.roster .vb.away { opacity: .28; filter: grayscale(.4); }
.chat-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 10px; }
.chat-head b { letter-spacing: .16em; font-size: 14px; }
.chat-tabs { display: flex; gap: 4px; }
.chat-tabs button {
  padding: 7px 18px; font-weight: 800; font-size: 13px; letter-spacing: .06em;
  color: var(--ink-dim); border-bottom: 2.5px solid transparent; border-radius: 4px;
}
.chat-tabs button.on { color: var(--ink); border-bottom-color: var(--gold); }
#chatPanel[data-tab="chat"] #officeTodos { display: none; }
#officeTodos { flex: 1; overflow-y: auto; min-height: 0; }
#chatPanel[data-tab="list"] #chatList,
#chatPanel[data-tab="list"] #chatPending,
#chatPanel[data-tab="list"] .note-compose { display: none; }

/* ⛶ focus — a letter on the desk, nothing else in the room */
.focus-page {
  position: fixed; top: 4vh; left: 50%; transform: translateX(-50%); z-index: 90;
  width: min(850px, 94vw); height: 90vh; background: var(--panel);
  border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.35);
  padding: 64px 88px 28px; display: flex; flex-direction: column; gap: 14px;
}
.focus-to { font-size: 13px; font-weight: 700; color: var(--ink-dim); border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.focus-page textarea {
  flex: 1; width: 100%; border: none; outline: none; resize: none;
  background: transparent; color: var(--ink);
  font-family: var(--body-font); font-size: calc(var(--fs) + 1px); line-height: 1.7;
}
.focus-page .resp-send { align-self: center; }
@media (max-width: 700px) { .focus-page { padding: 56px 24px 20px; } }
.chat-head .fmt-sub { flex: none; }
.chat-x { position: absolute; top: 12px; right: 12px; }

.office-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border: 1px dashed var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.os-col { display: flex; flex-direction: column; gap: 6px; }
.os-col > label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.sig-preview { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 0; }
.sig-preview .usig { color: var(--ink); font-weight: 700; white-space: pre-wrap; margin-bottom: 6px; }
body.chat-open .acct-row { z-index: 80; } /* identical geometry open or closed — nothing moves */
.chat-panel .chat-list { flex: 1; overflow-y: auto; }
.chat-att {
  display: flex; align-items: center; justify-content: center; width: 38px; border-radius: 10px;
  border: 1px solid var(--line); cursor: pointer; font-size: 15px;
}
.chat-att:hover { border-color: var(--ink); }
.chat-att.recording { border-color: #e5252c; background: #e5252c; animation: breathe 1.2s ease-in-out infinite; }
.chat-voice { max-width: 300px; height: 36px; margin-top: 4px; }
.chat-file { display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 9px; font-size: 12.5px; font-weight: 700; }
.chat-file a { color: var(--cyan); text-decoration: none; font-weight: 800; }
.acct-line { cursor: pointer; }
.chat-panel.dragover { outline: 2px dashed var(--cyan); outline-offset: -6px; }
.chat-pending {
  display: flex; gap: 8px; align-items: center; margin: 6px 0; padding: 7px 10px;
  border: 1.5px dashed var(--cyan); border-radius: 9px; font-size: 12.5px; font-weight: 700;
}
.chat-pending button { color: var(--ink-dim); font-weight: 800; }
.chat-pending button:hover { color: #e5252c; }
.acct-line:hover { text-decoration: underline; }
.office-todos { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
.office-todos .tasks-head { display: flex; justify-content: space-between; align-items: center; }
.chat-list { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 12px; }
.chat-msg { display: flex; gap: 8px; }
.chat-msg .vb { flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.chat-msg .cm-body { font-size: 13.5px; min-width: 0; }
.chat-msg .cm-who { font-weight: 800; }
.chat-msg .cm-time { color: var(--ink-dim); font-size: 11px; margin-left: 6px; }
.chat-msg .cm-text { word-wrap: break-word; }

/* TAG column — + drops the tag bar; picked tags display and reopen it */
.rtag { position: relative; }
.rtag-btn {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--review); color: var(--review);
  font-size: 14px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.rtag-btn:hover { background: var(--review); color: #fff; }
.rtag-btn.has {
  width: auto; height: auto; border-radius: 9px; border: 1px solid var(--line); color: var(--ink-dim);
  font-size: 10.5px; letter-spacing: .04em; padding: 3px 8px; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; display: inline-block;
}
.rtag-btn.has:hover { border-color: var(--ink); color: var(--ink); background: none; }
.rtag .mini-menu { left: auto; right: 0; }

/* STATUS column */
.rstatus { min-width: 0; }
.rstatus .st { font-size: 11px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; }
.rstatus .st.new { color: var(--violet); }
.rstatus .st.opened { color: var(--lime); font-weight: 700; }
.rstatus .st.done.dk-called { color: #3b6cff; }
.rstatus .st.done.dk-calendared { color: #8845f5; }
.rstatus .st.done.dk-filed { color: #00c2a8; }
.rstatus .st.done.dk-billed { color: #f5a300; }
.rstatus .st.done.dk-collected { color: #7ac70c; }
.rstatus .st.done.dk-paid { color: #00b3e6; }
.rstatus .st.done.dk-replied { color: var(--cyan); }
.rstatus .st.done.dk-noaction { color: var(--ink-dim); }
.rstatus .st.review { color: var(--review); }
.rstatus .st.respond { color: var(--gold-text); }
.rstatus .st.done { color: var(--ink); }
.rstatus .st.done.linked { cursor: pointer; text-decoration: underline dotted; }

.chip {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
  background: var(--sel); color: var(--ink-dim); letter-spacing: .03em; white-space: nowrap;
}
.chip.hot { background: #e5252c; color: #fff; }
.chip.att { background: transparent; border: 1px dashed var(--line); }
.chip.note { background: transparent; border: 1px solid var(--cyan); color: var(--cyan); }
.chip.draft { background: transparent; border: 1.5px dashed var(--cyan); color: var(--cyan); }
.list-empty { padding: 48px 20px; text-align: center; color: var(--ink-dim); }
.list-empty .zero { font-size: 26px; }

/* ---------- reader: global nav stays above; full screen or split ---------- */
/* the channels strip + global nav stay visible in every mode */
.read-overlay {
  position: fixed; top: var(--reader-top, 99px); right: 0; bottom: 0; left: 0; z-index: 30; background: var(--bg);
  display: flex; flex-direction: column; border-top: 1px solid var(--line);
}
body[data-read="split"] .read-overlay { left: 400px; border-left: 1px solid var(--line); }
body[data-read="split"].reader-open .main,
body[data-read="split"].reader-open .list-head { width: 400px; }
body[data-read="split"].reader-open .list-head,
body[data-read="split"].reader-open .row { grid-template-columns: 22px 1fr 64px !important; padding-right: 10px; }
body[data-read="split"].reader-open .rmain { grid-column: 2 / 4; }
body[data-read="split"].reader-open .rviewed,
body[data-read="split"].reader-open .rtag,
body[data-read="split"].reader-open .ratt,
body[data-read="split"].reader-open .rthread,
body[data-read="split"].reader-open .rstatus,
body[data-read="split"].reader-open .list-head .hcol,
body[data-read="split"].reader-open .list-head .subj-col { display: none; }
body[data-read="split"].reader-open .row { grid-template-rows: auto auto; }
body[data-read="split"].reader-open .row .rdate { grid-row: 1; grid-column: 3; }

.read-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.nav-btn { font-weight: 700; font-size: 13px; color: var(--ink-dim); padding: 6px 10px; border-radius: 8px; }
.nav-btn:hover { background: var(--sel); color: var(--ink); }
#backBtn {
  background: linear-gradient(135deg, #0f1035, #2b1e66 55%, #3d2b8f);
  color: #fff; font-weight: 800; padding: 8px 16px; border-radius: 10px; letter-spacing: .04em;
}
#backBtn:hover { background: linear-gradient(135deg, #1a1b4d, #3b2a8c 55%, #5238b8); color: #fff; }
.nav-btn.arr {
  font-size: 20px; line-height: 1; padding: 3px 14px;
  border: 1.5px solid var(--cyan); border-radius: 9px; color: var(--cyan);
}
.nav-btn.arr:hover { background: var(--cyan); color: #fff; }
.nav-arrows { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.nav-pos { color: var(--cyan); font-weight: 700; font-size: 12px; margin-right: 6px; }

.opened-by { display: flex; align-items: center; gap: 8px; justify-content: center; }
.opened-by .ob-label { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: var(--lime); }
.opened-by .vb {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.opened-by .ob-none { font-size: 12px; color: var(--violet); font-weight: 700; }

/* strip mode — film-strip of emails above the full-screen reader */
.strip-bar { display: none; }
body[data-read="strip"] .strip-bar {
  display: flex; gap: 8px; padding: 8px 14px; overflow-x: auto; overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--line); background: var(--panel); flex: none;
}
body[data-read="strip"] .read-overlay { left: 0; }
body[data-read="strip"].reader-open .main { display: none; }
.strip-card {
  flex: none; width: 190px; text-align: left; border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; background: var(--panel); display: flex; flex-direction: column; gap: 2px;
}
.strip-card:hover { background: var(--sel); }
.strip-card.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.strip-card .sc-top { display: flex; gap: 6px; align-items: center; }
.strip-card .sc-from { font-size: 11.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.strip-card .sc-date { font-size: 10px; color: var(--ink-dim); }
.strip-card .sc-subj { font-size: 11px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip-card .udot { width: 8px; height: 8px; flex: none; }

.reading { flex: 1; overflow-y: auto; padding: 26px 40px 80px; }
.reading-inner { max-width: max(calc(var(--colw) + 140px), 900px); margin: 0 auto; }
body[data-bl="left"] .reading-inner { margin: 0; }
body[data-bl="right"] .reading-inner { margin: 0 0 0 auto; }
body[data-ba="center"] .r-body p { text-align: center; }
body[data-ba="right"] .r-body p { text-align: right; }
[data-theme="legalpad"] .reading-inner { border-left: 2px solid #d86a6a; padding-left: 22px; }

/* SUBJECT / FROM / DATE / ATTACHMENTS — one block; arrange moves the whole block, never its innards */
.r-head.hgrid {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; align-items: baseline;
  margin-bottom: 8px; width: max-content; max-width: 100%;
}
body[data-ha="center"] .r-head.hgrid { margin-left: auto; margin-right: auto; }
body[data-ha="right"] .r-head.hgrid { margin-left: auto; margin-right: 0; }
.att-val { display: flex; gap: 10px; align-items: center; position: relative; font-size: 14px; font-weight: 700; }
.orig-wrap.top { text-align: center; margin: 0; }
.body-gap { height: 10px; }
.r-lab { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--ink-dim); text-align: right; }
.hgrid h2 { font-family: var(--head-font); font-size: 22px; line-height: 1.3; }
.hgrid .rm-date { color: var(--ink-dim); font-size: 13.5px; }
.hgrid .rm-date.big { font-size: 16px; font-weight: 800; color: var(--ink); }
.from-val { font-size: 14px; position: relative; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rule-plus {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--review); color: var(--review);
  font-size: 16px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.rule-plus:hover { background: var(--review); color: #fff; }
.mini-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; min-width: 240px; max-width: 320px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.tag-row { position: relative; }
.mini-menu .mm-title { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); padding: 4px 6px; }
.mini-menu button { text-align: left; padding: 6px 8px; border-radius: 7px; font-size: 13px; font-weight: 600; }
.mini-menu button:hover { background: var(--sel); }
.mini-menu button.on { color: var(--ink); font-weight: 800; }
.mini-menu .mm-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 12.5px; }
.mini-menu .mm-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-menu .mm-x { color: var(--ink-dim); padding: 2px 6px; }
.mini-menu .mm-x:hover { color: #e5252c; }

/* clients slide-out — from the left */
.client-panel {
  position: fixed; z-index: 58; width: 360px; max-width: 92vw; max-height: 72vh;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  overflow-y: auto; padding: 14px; animation: rowdrop .16s ease-out;
}
.client-row { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.client-row:hover { background: var(--sel); }
.client-row .avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.client-row .c-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.client-row .c-name { font-weight: 800; font-size: 13.5px; }
.client-row .c-email { color: var(--ink-dim); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-row .c-n { color: var(--ink-dim); font-size: 11px; font-weight: 700; white-space: nowrap; }

/* the + tag bar — horizontal, fresh */
.mini-menu.tag-bar {
  flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center;
  min-width: 340px; max-width: 620px; padding: 10px;
}
.tag-bar .tchip {
  padding: 6px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em;
  border: 1px solid var(--line); color: var(--ink-dim); text-align: center;
}
.tag-bar .tchip:hover { border-color: var(--ink); color: var(--ink); background: none; }
.tag-bar .tchip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tag-bar .tchip.rule { background: var(--panel); border: 1.5px dashed var(--ink); color: var(--ink); }
.tag-bar .tchip.add { border-style: dashed; }
.tag-bar .tchip.mode { border-radius: 16px; }
.tag-bar .tchip.mode.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.r-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: var(--ink-dim); font-size: 13px; margin: 8px 0 2px; }
.collision {
  margin: 10px 0; padding: 8px 12px; border-radius: 10px; background: var(--sel);
  border: 1px solid var(--gold); font-size: 13px; font-weight: 600;
}
.r-actions {
  display: flex; gap: 4px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
  align-items: center; justify-content: center; position: relative;
  /* break out of the letter column — the verbs get the whole window, one line, no mutiny */
  flex-wrap: nowrap; margin-left: calc(50% - 50vw + 14px); margin-right: calc(50% - 50vw + 14px);
}
@media (max-width: 1080px) { .r-actions { flex-wrap: wrap; margin-left: 0; margin-right: 0; } }
.mini-menu.cal { top: calc(100% + 8px); left: 0; transform: none; min-width: 380px; max-width: 500px; max-height: 60vh; overflow-y: auto; }
.mini-menu.att-menu { min-width: 300px; }
.mini-menu .cal-go { color: var(--ink); border: 1px solid var(--line); border-radius: 7px; font-weight: 800; font-size: 11px; }
.mini-menu .cal-go:hover { border-color: var(--ink); color: var(--ink); }
.act.util { margin-left: 0; }
.acts-label { font-size: 10px; font-weight: 800; letter-spacing: .18em; color: var(--ink); margin-right: 6px; }

/* color for the colorless world of law docs */
.act.done.dk-called { color: #3b6cff; border-color: #3b6cff; }
.act.done.dk-calendared { color: #8845f5; border-color: #8845f5; }
.act.done.dk-filed { color: #00c2a8; border-color: #00c2a8; }
.act.done.dk-billed { color: #f5a300; border-color: #f5a300; }
.act.done.dk-collected { color: #7ac70c; border-color: #7ac70c; }
.act.done.dk-paid { color: #00b3e6; border-color: #00b3e6; }
.act.done.dk-noaction { color: var(--ink-dim); border-color: var(--line); }
.act.done.on.dk-called { background: #3b6cff; color: #fff; }
.act.done.on.dk-calendared { background: #8845f5; color: #fff; }
.act.done.on.dk-filed { background: #00c2a8; color: #fff; }
.act.done.on.dk-billed { background: #f5a300; color: #fff; }
.act.done.on.dk-collected { background: #7ac70c; color: #fff; }
.act.done.on.dk-paid { background: #00b3e6; color: #fff; }
.act.done.on.dk-noaction { background: var(--ink-dim); color: var(--bg); }
.act-break { flex-basis: 100%; height: 0; }
.act.assign { color: #ff5c5c; border-color: #ff5c5c; }
.act.assign.on { color: #fff; }
.act {
  padding: 5px 9px; border-radius: 9px; font-weight: 800; font-size: 11px; letter-spacing: .01em;
  border: 1px solid var(--line); background: var(--panel); white-space: nowrap;
}
.act.done { border-color: var(--ink); }
.act.review { color: var(--review); border-color: var(--review); }
.act.respond { color: var(--gold-text); border-color: var(--gold); }
.act.unread { color: var(--violet); border-color: var(--violet); }
.act.done.on { background: var(--ink); color: var(--bg); }
.act.respond.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.act.review.on { background: var(--review); border-color: var(--review); color: #fff; }
.act.util { margin-left: auto; color: var(--ink-dim); font-weight: 600; border: none; }
.r-status-line { font-size: 13px; color: var(--ink-dim); margin-bottom: 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.done-menu { display: flex; gap: 6px; flex-wrap: wrap; margin: -6px 0 14px; align-items: center; }
.done-menu button {
  padding: 7px 12px; border-radius: 9px; font-weight: 700; font-size: 12px; letter-spacing: .04em;
  border: 1px solid var(--line); background: var(--panel);
}
.done-menu button:hover { border-color: var(--ink); }
.print-wrap { position: relative; display: inline-flex; }
.mini-menu.print-pop { left: 50%; transform: translateX(-50%); top: calc(100% + 8px); min-width: 250px; gap: 6px; }
.print-pop .tgl { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 2px 4px; }
.print-pop .go { padding: 8px 16px; border-radius: 9px; font-weight: 800; font-size: 12px; background: var(--ink); color: var(--bg); align-self: center; margin-top: 4px; }
.print-pop .std-hint { font-size: 11px; color: var(--ink-dim); padding: 2px 4px; }

.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 20px; align-items: center; justify-content: center; }
.tag-row .chip { font-size: 13px; padding: 6px 14px; border-radius: 9px; letter-spacing: .06em; font-weight: 800; }
.tag-row .chip.ontag { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); cursor: pointer; }
.tag-row .chip.ontag.rule { background: var(--panel); color: var(--ink); border: 1.5px dashed var(--ink); }
.tag-row .chip.addtag { cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--ink-dim); }
.tag-row .chip.addtag:hover { border-color: var(--ink); color: var(--ink); }

.attach-bar { margin: 0 0 16px; text-align: center; }
.attach-bar summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink-dim); }
.attach-list { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 0; align-items: center; }
.attach-list .att { font-size: 13px; display: flex; gap: 10px; align-items: center; }
.attach-list .aname { font-weight: 600; }
.attach-list .asize { color: var(--ink-dim); }
.dlb {
  border: 1px solid var(--line); border-radius: 8px; padding: 2px 10px;
  font-size: 13px; font-weight: 800; color: var(--ink-dim); line-height: 1.4;
}
.dlb:hover { border-color: var(--ink); color: var(--ink); }
.dlb.all { margin-left: 8px; font-size: 11px; letter-spacing: .06em; }
.warn-line { font-size: 13px; color: var(--review); font-weight: 700; margin-bottom: 12px; }

/* the body — receiver's format */
.r-body {
  font-family: var(--body-font); font-size: var(--fs); line-height: var(--lh);
  letter-spacing: var(--ls); max-width: var(--colw); color: var(--body-ink, var(--ink));
}
.r-body p { margin-bottom: var(--pgap); padding: 2px 4px; border-radius: 6px; cursor: text; position: relative; white-space: pre-wrap; }
.ptools { position: absolute; right: -30px; top: 0; display: flex; flex-direction: column; gap: 3px; }
.pnote {
  width: 21px; height: 21px; border-radius: 50%;
  border: 1.5px solid var(--cyan); color: var(--cyan); font-size: 15px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s;
}
.pnote.pcopy { border-color: var(--ink-dim); color: var(--ink-dim); font-size: 11px; }
.pnote.pcopy:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pnote.ptask { border-color: var(--lime); color: var(--lime); font-size: 11px; }
.pnote.ptask:hover { background: var(--lime); color: #fff; }
.r-body p:hover .pnote, .r-body p.showplus .pnote { opacity: 1; }
.pnote:hover { background: var(--cyan); color: #fff; }
.r-body p.flash { background: var(--sel); box-shadow: inset 3px 0 0 var(--cyan); transition: background .3s; }
.r-body p.has-note { box-shadow: inset 2px 0 0 var(--cyan); }
.r-body .plink {
  color: var(--cyan); font-weight: 700; text-decoration: underline dotted; text-underline-offset: 3px;
  white-space: nowrap; font-size: calc(var(--fs) - 2px);
}
.r-body .plink:hover { text-decoration-style: solid; }

/* ---------- convo: the thread + response box ---------- */
.convo { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; }
.convo h3 { font-size: 12px; letter-spacing: .12em; color: var(--ink-dim); margin-bottom: 10px; }
.reply-bubble { border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.reply-meta { font-size: 12px; color: var(--ink-dim); font-weight: 700; margin-bottom: 6px; }
.reply-text { font-family: var(--body-font); font-size: var(--fs); line-height: var(--lh); white-space: pre-wrap; }
.sig-block { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-dim); white-space: pre-wrap; }
.sig-block img { height: 36px; display: block; margin-bottom: 6px; }
.reply-head { font-weight: 800; letter-spacing: .22em; font-size: 14px; }
.reply-line {
  display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: nowrap;
  margin: 22px calc(50% - 50vw + 14px) 8px; /* same column-breakout as the verbs — the whole window is the line */
}
.reply-line .rcpt-box { flex: 0 1 auto; }
@media (max-width: 1080px) { .reply-line { flex-wrap: wrap; margin-left: 0; margin-right: 0; } }
.reply-line .rcpt-box { margin: 0; flex: 1; min-width: 0; }
.r-lab-to { font-size: 13px; font-weight: 700; text-transform: lowercase; }
.reply-btn {
  display: block; margin: 24px auto 8px; padding: 11px 40px;
  font-weight: 800; letter-spacing: .22em; font-size: 14px;
  border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink);
}
.reply-btn:hover { background: var(--ink); color: var(--bg); }
.resp-box { margin-top: 12px; }
.resp-box textarea {
  width: 100%; min-height: 260px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 0;
  background: var(--panel); color: var(--ink); font: var(--fs) var(--body-font); line-height: 1.6;
  resize: vertical; overflow: hidden;
}
.resp-box textarea:focus { outline: none; border-color: var(--review); }
.resp-foot { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-top: 10px; }
.resp-btns { display: flex; gap: 10px; align-items: center; }
.resp-side {
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line);
  font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--ink-dim);
}
.resp-side:hover { border-color: var(--ink); color: var(--ink); }
.act.assign.on { color: #fff; }
.tasks-wrap { margin: 4px 0 18px; }
.tasks-head b { font-size: 12px; letter-spacing: .12em; }
.task-row { display: flex; gap: 9px; align-items: center; padding: 6px 2px; border-bottom: 1px dashed var(--line); }
.task-row .ttext { flex: 1; font-size: 14px; }
.task-row.tdone .ttext { color: var(--ink-dim); text-decoration: line-through; }
.task-row .vb { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.task-compose { display: flex; gap: 7px; align-items: center; margin-top: 8px; }
.task-compose .tinput { flex: 1; margin-bottom: 0; font-weight: 600; }
.task-compose .tassign { width: 26px; height: 26px; border: none; cursor: pointer; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; }
.task-compose .tassign:hover { transform: scale(1.15); }
@media print { .task-compose { display: none !important; } }
.resp-send { padding: 9px 20px; border-radius: 10px; background: var(--ink); color: var(--bg); font-weight: 800; letter-spacing: .05em; }
.resp-hint { font-size: 11.5px; color: var(--ink-dim); }
.off-sig {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: 12.5px var(--ui-font); resize: vertical;
}
.off-logo-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.off-logo-btn { flex: 1; margin-top: 0 !important; }
.off-logo-thumb { height: 34px; border: 1px solid var(--line); border-radius: 6px; }

.orig-wrap { margin-top: 14px; }
.orig-frame { width: 100%; height: 480px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.orig-note { font-size: 12px; color: var(--ink-dim); margin: 6px 0; }

/* team notes: right-edge tab + slide-out */
.notes-fab {
  position: fixed; right: 0; top: 42%; z-index: 34;
  writing-mode: vertical-rl; padding: 14px 8px; border: 1px solid var(--cyan); border-right: none;
  border-radius: 10px 0 0 10px; color: var(--cyan); font-weight: 800; font-size: 12px; letter-spacing: .1em;
  background: var(--panel);
}
.notes-fab:hover { background: var(--cyan); color: #fff; }
.nf-count { margin-top: 6px; font-size: 11px; }
.notes-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 92vw; z-index: 58;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -14px 0 40px rgba(0,0,0,.14);
  overflow-y: auto; padding: 14px;
}
.notes-print { display: none; }
.att-row-print { display: none; }
.note { display: flex; gap: 10px; margin-bottom: 12px; }
.note .vb { flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.note .nbody { font-size: 13.5px; }
.note .nwho { font-weight: 700; }
.note .nanchor { color: var(--cyan); cursor: pointer; font-weight: 700; }
.note .ntime { color: var(--ink-dim); font-size: 11.5px; margin-left: 6px; }
.note-compose { display: flex; gap: 8px; margin-top: 10px; }
.note-compose input { flex: 1; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 13.5px var(--ui-font); }
.note-compose button { padding: 0 16px; border-radius: 10px; background: var(--cyan); color: #fff; font-weight: 800; }
.compose-anchor { font-size: 12px; color: var(--cyan); font-weight: 700; margin-top: 8px; }

/* ---------- format drawer (condensed) ---------- */
.fmt-drawer {
  position: fixed; top: 56px; right: 8px; bottom: 8px; width: 340px; max-width: 92vw; z-index: 60;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: -14px 8px 40px rgba(0,0,0,.16);
  overflow-y: auto; padding: 14px;
}
.fmt-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fmt-head b { letter-spacing: .14em; font-size: 13px; }
.fmt-sub { font-size: 10.5px; color: var(--ink-dim); flex: 1; }
.fmt-sec { margin-bottom: 9px; }
.fmt-sec > label { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.font-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.font-cards.seven { grid-template-columns: repeat(7, 1fr); }
.font-card { border: 1px solid var(--line); border-radius: 7px; padding: 3px 1px 2px; text-align: center; background: var(--panel); }
.font-card .aa { font-size: 14px; display: block; }
.font-card .fl { font-size: 8px; color: var(--ink-dim); }
.mini-link { font-size: 10.5px; color: var(--ink-dim); text-decoration: underline dotted; margin-top: 4px; }
.mini-link:hover { color: var(--ink); }
.mini-lab { display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin: 6px 0 2px; }
.font-card.sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.ink-row { display: flex; gap: 7px; }
.ink-row button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); }
.ink-row button.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ink-row button.auto { font-size: 9px; font-weight: 800; color: var(--ink-dim); }
.seg-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.seg-row > span { font-size: 11px; color: var(--ink-dim); width: 62px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: 1; }
.seg button { flex: 1; padding: 5px 4px; font-size: 11px; font-weight: 700; color: var(--ink-dim); }
.seg button.on { background: var(--ink); color: var(--bg); }
.sliders label { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-dim); margin: 3px 0 0; }
.sliders input[type=range] { width: 100%; accent-color: var(--ink); height: 15px; }
.theme-row { display: flex; gap: 6px; }
.theme-card { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 5px; font-size: 11px; font-weight: 600; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.theme-card.sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.sw { width: 100%; height: 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,.12); }
.sw-day { background: #fff; }
.sw-cha { background: linear-gradient(180deg, #20242c 55%, #191c22); }
.sw-pad { background: repeating-linear-gradient(180deg, #f7f1c6 0 8px, #ece3a8 8px 9px); }
.toggles .tgl { display: flex; gap: 8px; align-items: center; font-size: 12px; margin: 3px 0; }
.wide-btn {
  width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px;
  font-weight: 700; font-size: 12px; background: var(--panel); text-align: center;
}
.wide-btn:hover { background: var(--sel); }
.wide-btn.subtle { font-weight: 600; color: var(--ink-dim); margin-top: 6px; }
.func-head { border-top: 2px solid var(--line); padding-top: 10px; margin-top: 12px; }
.func-head > label { font-size: 12px; color: var(--ink); }
.office-note { font-size: 11px; color: var(--ink-dim); margin-top: 4px; }
.gfont-active { font-size: 11.5px; color: var(--ink-dim); margin-top: 6px; }
.gfont-active b { color: var(--ink); }
.fmt-preview {
  border: 1px dashed var(--line); border-radius: 8px; padding: 12px;
  font-family: var(--body-font); font-size: var(--fs); line-height: var(--lh); letter-spacing: var(--ls);
  color: var(--body-ink, var(--ink));
}
.fmt-preview h4 { font-family: var(--head-font); margin-bottom: 5px; }

/* ---------- font browser slideout ---------- */
.gfont-panel {
  position: fixed; top: 0; right: 340px; bottom: 0; width: 320px; max-width: 86vw; z-index: 61;
  background: var(--panel); border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  box-shadow: -14px 0 40px rgba(0,0,0,.10); overflow-y: auto; padding: 14px;
}
.gfont-search {
  width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: 13px var(--ui-font); margin-bottom: 10px;
}
.gfont-list { display: flex; flex-direction: column; }
.gfont-row { display: flex; align-items: center; gap: 6px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.gfont-row .gname { flex: 1; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gfont-row .gcat { font-size: 9px; color: var(--ink-dim); letter-spacing: .06em; text-transform: uppercase; }
.gfont-row .gset { font-size: 10px; font-weight: 800; padding: 3px 6px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-dim); }
.gfont-row .gset:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 80;
  background: var(--ink); color: var(--bg); padding: 12px 22px; border-radius: 12px;
  font-weight: 800; letter-spacing: .06em; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  animation: toast-in .18s ease-out;
}
.toast.zeroed { background: #111214; color: var(--lime); }
@keyframes toast-in { from { transform: translate(-50%, 16px); opacity: 0; } }

/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  body[data-read="split"] .read-overlay { left: 0; top: 0; }
  body[data-read="split"].reader-open .main, body[data-read="split"].reader-open .list-head { width: 100%; }
}
@media (max-width: 760px) {
  .list-head, .row { grid-template-columns: 22px 1fr 76px !important; }
  .rviewed, .rtag, .ratt, .rthread, .rstatus, .list-head .hcol { display: none; }
  .search-box { display: none; }
  .list-head button:nth-child(2) { display: none; }
  .row { grid-template-rows: auto auto; }
  .row .rdate { grid-row: 1; grid-column: 3; }
  .rmain { grid-column: 2 / 4; }
  .presence-strip { display: none; }
  .date-bar { font-size: 11px; letter-spacing: .1em; }
  .acct-tag { display: none; }
  .gfont-panel { right: 0; z-index: 62; }
}

/* ---------- print: ink saver + standard black + fit to page ---------- */
@media print {
  body { background: #fff; color: #000; }
  .topbar, .views-strip, .list-head, .list-pane, .fmt-drawer, .gfont-panel, .bell-panel, .toast,
  .read-nav, .r-actions, .tag-row, .note-compose, .compose-anchor, .orig-wrap, .collision,
  .r-status-line, .done-menu, .print-pop, .resp-box { display: none !important; }
  .read-overlay { position: static; }
  .reading { overflow: visible; padding: 0; }
  .reading-inner { max-width: 100% !important; margin: 0 !important; border: none !important; padding: 0 !important; }
  .r-body { max-width: 100% !important; }
  .pnote { display: none !important; }
  body.print-black .reading-inner, body.print-black .reading-inner * { color: #000 !important; }
  .att-row-print { display: block; font-size: 11px; }
  body.print-no-atts .att-row-print { display: none !important; }
  .notes-fab, .notes-panel, .client-panel { display: none !important; }
  body.print-with-notes .notes-print { display: block !important; }
  body:not(.print-with-notes) .notes-print { display: none !important; }
}

/* undo bar — the mercy window */
.undo-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 95;
  display: flex; gap: 14px; align-items: baseline;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.undo-bar .ub-txt { font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.undo-bar .ub-hint { font-size: 9.5px; opacity: .55; }
.undo-bar button { color: var(--gold); font-weight: 800; letter-spacing: .1em; text-decoration: underline; }

/* quick task beside the team */
.roster-row {
  display: flex; gap: 12px; align-items: center; justify-content: center; margin: 0;
  position: fixed; z-index: 85; background: var(--bg); border: 1.5px solid rgba(0,0,0,.1);
  border-radius: 12px; padding: 10px 16px; box-shadow: 0 16px 44px rgba(0,0,0,.13);
  animation: rowdrop .16s ease-out;
}
@keyframes rowdrop { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.nav-chip.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.quick-task { width: 250px; margin-bottom: 0; font-weight: 600; font-size: 12.5px; }
.roster { margin: 0; }
.roster .vb { border: none; cursor: pointer; }
.roster .vb:hover { transform: scale(1.15); }
.u-label { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-dim); margin: 8px 0 1px; letter-spacing: .1em; text-transform: uppercase; }
#sUndo { width: 100%; accent-color: var(--ink); height: 15px; }

/* the task basket — build the list, send it whole */

.task-ctx { font-size: 11px; padding: 5px 10px; }
.task-ctx.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.task-stage {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 60;
  min-width: 300px; max-width: 440px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.18);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.ts-row { display: flex; gap: 9px; align-items: center; }
.ts-row .vb { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ts-un { width: 22px; text-align: center; color: var(--ink-dim); flex: none; }
.ts-text { flex: 1; font-size: 13px; font-weight: 600; }
.ts-foot { display: flex; gap: 10px; align-items: center; justify-content: center; border-top: 1px dashed var(--line); padding-top: 8px; }
.ts-send { background: var(--ink); color: var(--bg); font-weight: 800; font-size: 12px; letter-spacing: .05em; padding: 8px 16px; border-radius: 9px; }

/* live preview — the letter that watches you adjust */
.live-prev {
  position: fixed; left: 26px; top: 22vh; z-index: 70; width: 330px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.22);
  padding: 22px 24px; animation: arrive-in .2s ease-out;
}
.live-prev .lp-subj { font-family: var(--head-font); font-weight: 800; font-size: 17px; margin-bottom: 3px; }
.live-prev .lp-from { font-size: 11.5px; color: var(--ink-dim); margin-bottom: 10px; }
.live-prev p {
  font-family: var(--body-font); font-size: var(--fs); line-height: var(--lh);
  letter-spacing: var(--ls); color: var(--body-ink, var(--ink)); margin-bottom: var(--pgap);
}
.ts-head { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ink-dim); border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.ppl-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
.ppl-chip { display: flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 16px; padding: 4px 12px 4px 5px; font-size: 12.5px; font-weight: 700; }
.ppl-chip .vb { width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ppl-chip .count { background: var(--sel); border-radius: 9px; padding: 0 7px; font-size: 11px; }
.ppl-chip.on { border-color: var(--ink); background: var(--sel); }

.rthread { font-size: 11.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.b-orig { margin-top: 8px; }
.b-orig-btn { font-size: 10.5px; font-weight: 700; color: var(--ink-dim); text-decoration: underline dotted; }
.b-orig-btn:hover { color: var(--ink); }
.b-orig .orig-frame { margin-top: 6px; height: 360px; }

/* sticky masthead in the reader */
.reader-sticky {
  position: sticky; top: -26px; z-index: 22; background: var(--bg);
  padding: 8px 0 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.reader-sticky .r-head.hgrid { margin-bottom: 2px; }
.orig-holder { margin-bottom: 10px; }
/* recipient chips — reply-all with receipts */
.rcpt-box { max-width: var(--colw); margin: 0 auto 10px; }
.rcpt-line { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; }
@media (max-width: 1080px) { .rcpt-line { flex-wrap: wrap; } }
.rcpt-line .r-lab { cursor: help; }
.rcpt-line .r-lab:not(:first-child) { margin-left: 8px; }
.rcpt-chip { cursor: pointer; background: var(--sel); color: var(--ink); border: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; }
.rcpt-chip:hover { border-color: #e5252c; }
.rcpt-in { border: none; outline: none; background: transparent; color: var(--ink); font: 12px var(--ui-font); width: 26px; transition: width .15s; }
.rcpt-in:focus { width: 150px; }
.rcpt-links { display: flex; gap: 10px; }
.rcpt-links button { font-size: 11px; font-weight: 700; color: var(--ink-dim); text-decoration: underline dotted; }
.rcpt-links button:hover { color: var(--ink); }

.oatt-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.oatt-hint { font-size: 10.5px; color: var(--ink-dim); }
.resp-box.dragover, .compose-panel.dragover { outline: 2px dashed var(--cyan); outline-offset: -6px; }

/* chat ping lands on the message — one flash */
.chat-msg.pingflash { animation: pflash 1.3s ease-out 1; border-radius: 10px; }
@keyframes pflash { 0% { background: color-mix(in srgb, var(--review) 18%, transparent); } 100% { background: transparent; } }
/* office list: circle completes, square selects */
.tcirc { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-dim); flex: none; }
.tcirc:hover { border-color: var(--lime); }
.tcirc.on { background: var(--lime); border-color: var(--lime); }
.todo-selbar { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 8px; font-size: 12px; font-weight: 700; border-bottom: 1px dashed var(--line); }
.ts-lane { margin-left: 10px; color: #fff; border-radius: 12px; padding: 2px 10px; font-size: 10.5px; font-weight: 800; }

/* the masthead on a diet — conversation gets the screen */
.mast-line { display: flex; gap: 14px; align-items: baseline; justify-content: center; flex-wrap: wrap; font-size: 12.5px; }
.mast-subj { font-family: var(--head-font); font-size: 23px; font-weight: 800; letter-spacing: .01em; max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mast-date { color: var(--ink-dim); white-space: nowrap; }
.reader-sticky .act { padding: 3px 8px; font-size: 10px; border-radius: 8px; }
.reader-sticky .r-actions { margin: 0 0 6px; padding-bottom: 5px; gap: 4px; }
.reader-sticky .orig-wrap.top .act.util { font-size: 10px; padding: 2px 8px; }
button.reply-head { cursor: pointer; }
button.reply-head:hover { color: var(--ink-dim); }

.tassign.laneon { outline: 3px solid var(--gold); outline-offset: 1px; }

.task-row .tsel { margin-right: 10px; }
.task-row .tcirc { margin-right: 4px; }

.rcpt-note { display: flex; gap: 10px; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.rn-opt { color: var(--gold-text); font-size: 11px; font-weight: 800; white-space: nowrap; transition: opacity .25s; }
.rn-opt.dim { opacity: .28; color: var(--ink-dim); }
.rn-opt.dim:hover { opacity: .7; }
.rcpt-note button { color: var(--ink-dim); text-decoration: underline dotted; font-size: 11px; font-weight: 700; }
.rcpt-note button:hover { color: var(--ink); }

.act.ghost { opacity: .4; border-style: dashed; }
.act.ghost:hover { opacity: 1; }
.orig-plain {
  font: 13px/1.55 Menlo, Consolas, monospace; white-space: pre-wrap; text-align: left;
  background: #fff; color: #000; border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; margin-top: 8px; overflow-wrap: anywhere;
}

.mini-count { position: absolute; top: -6px; right: -6px; background: var(--gold); color: #fff; min-width: 17px; height: 17px; border-radius: 9px; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.mine-row { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 8px 4px; border-bottom: 1px dashed var(--line); font-size: 13px; font-weight: 600; }
.mine-row:hover { background: var(--sel); }
.load-more { display: block; margin: 14px auto 20px; padding: 8px 20px; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; font-size: 12px; color: var(--ink-dim); }
.load-more:hover { border-color: var(--ink); color: var(--ink); }

.blank-note { color: var(--ink-dim) !important; font-style: italic; text-align: center; letter-spacing: .04em; }

.cdrafts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cd-chip { cursor: pointer; }
.cd-chip.rev { border-color: var(--review); color: var(--review); }
.cd-x:hover { color: #e5252c; }
.compose-panel .oatt-row { justify-content: center; }

/* rows keep their figure — chips never stretch a line */
.rmain { align-items: center; }
.rmain .chip, .rmain .rsubj { flex: none; }
.rmain .rsubj { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-panel .cdrafts { margin: 6px 0 0; justify-content: center; }

/* tasks list docks under the nav — 🎯 toggles it without the mouse moving an inch */
#myPanel { top: 57px; height: auto; max-height: 72vh; bottom: auto; border-top: none; border-radius: 0 0 0 14px; }
#myPanel .fmt-head { flex-direction: row; }
#myPanel .fmt-head .icon-btn { position: absolute; top: 10px; right: 10px; }
#myPanel .fmt-head b { letter-spacing: .14em; }

/* the live letter — full page, real time, parked beside the drawer */
.live-prev {
  position: fixed; top: 4vh; left: 0; right: 240px; z-index: 59;
  width: min(850px, calc(100vw - 440px)); height: 90vh; margin: 0 auto;
  overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
  padding: 64px 88px; animation: arrive-in .2s ease-out;
}
.live-prev .lp-inner { max-width: var(--colw); }
.live-prev .lp-subj { font-family: var(--head-font); font-weight: 800; font-size: 21px; margin-bottom: 4px; }
.live-prev .lp-from { font-size: 12px; color: var(--ink-dim); margin-bottom: 16px; }
.live-prev p {
  font-family: var(--body-font); font-size: var(--fs); line-height: var(--lh);
  letter-spacing: var(--ls); color: var(--body-ink, var(--ink)); margin-bottom: var(--pgap);
}
.live-prev .lp-sig { margin-top: 20px; font-size: 13px; font-weight: 700; white-space: pre-wrap; }
.live-prev .lp-sig.off { margin-top: 6px; font-weight: 400; color: var(--ink-dim); font-size: 12.5px; }
@media (max-width: 1100px) { .live-prev { display: none !important; } }

.sel-bar .sb-task { background: transparent; border: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); color: var(--bg); border-radius: 8px; padding: 5px 10px; font: 600 11px var(--ui-font); width: 160px; }
.sel-bar .sb-task::placeholder { color: color-mix(in srgb, var(--bg) 55%, transparent); }
.sel-bar .tassign { width: 24px; height: 24px; border-radius: 50%; border: none; color: #fff; font-size: 9px; font-weight: 800; cursor: pointer; }
.temails { margin: 0 0 6px 52px; display: flex; flex-direction: column; gap: 3px; }
.temail { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.temail.tdone .temail-s { color: var(--ink-dim); text-decoration: line-through; }
.temail .tcirc.mini { width: 14px; height: 14px; border-width: 1.5px; }
.temail-s { text-align: left; font-weight: 600; }
.temail-s:hover { text-decoration: underline dotted; }

/* ✨ the brain: left-edge tab, left slide-out */
.ai-fab { left: 0; right: auto; border: 1px solid #8845f5; border-left: none; border-radius: 0 10px 10px 0; color: #8845f5; }
.ai-fab:hover { background: #8845f5; color: #fff; }
.ai-panel { left: 0; right: auto; border-left: none; border-right: 1px solid var(--line); box-shadow: 14px 0 40px rgba(0,0,0,.14); display: flex; flex-direction: column; }
.ai-panel .chat-list { flex: 1; overflow-y: auto; }
.ai-ctx { display: flex; gap: 14px; padding: 4px 0 10px; border-bottom: 1px dashed var(--line); margin-bottom: 8px; }
.ai-cfg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.aiprov, .aikey { font: 600 12px var(--ui-font) !important; padding: 8px 10px; }

.mention { color: #fff; background: var(--ink-dim); border-radius: 10px; padding: 1px 8px; font-weight: 800; font-size: .92em; white-space: nowrap; }
.font-cards.five { grid-template-columns: repeat(5, 1fr); margin-top: 6px; }

.brand-tld { font-family: Menlo, Consolas, monospace; font-weight: 700; font-size: 14px; color: var(--ink); -webkit-text-stroke: .8px var(--ink); letter-spacing: 0; margin-left: 1px; align-self: flex-end; padding-bottom: 3px; }
.ai-top { border-color: #8845f5; color: #8845f5; margin-left: 10px; }
.ai-top:hover { background: #8845f5; color: #fff; }

.ai-top { width: auto; padding: 0 10px; gap: 4px; }
.ai-prov { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.ai-prov.dim { color: #8845f5; }
.nav-chip.bump { animation: chbump .5s ease-out 1; }

/* the chat input renders pills live */
.note-compose .chat-ce {
  flex: 1; min-height: 36px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font: 13.5px var(--ui-font); outline: none; white-space: pre-wrap; overflow-wrap: anywhere;
}
.note-compose .chat-ce:focus { border-color: var(--ink); }
.note-compose .chat-ce:empty::before { content: attr(data-placeholder); color: var(--ink-dim); }
.chat-ce .mention { margin: 0 1px; }

/* the week has walls */
.day-divide {
  display: flex; gap: 14px; align-items: baseline; justify-content: var(--dd-just, center);
  padding: 30px 18px 12px; border-bottom: 1px solid var(--line);
}
.day-divide .dd-day { font-size: 30px; font-weight: 800; letter-spacing: .14em; color: #cfcfcf; }
.day-divide .dd-date { font-size: 30px; font-weight: 800; letter-spacing: .14em; color: #cfcfcf; text-transform: uppercase; }
.day-divide.dd-today .dd-day, .day-divide.dd-today .dd-date { color: var(--cyan); }

.ai-panel.dragover { outline: 2px dashed #8845f5; outline-offset: -6px; }
.aiimg { display: flex; gap: 8px; align-items: center; font-size: 11.5px; font-weight: 700; padding: 6px 0; border-bottom: 1px dashed var(--line); margin-bottom: 6px; }
.aiimg img { height: 44px; border-radius: 6px; border: 1px solid var(--line); }

.act.claim { color: #10a37f; border-color: #10a37f; }
.act.claim.on { background: #10a37f; border-color: #10a37f; color: #fff; }

.list-complete {
  display: flex; gap: 16px; align-items: center; justify-content: center; padding: 16px;
  border-bottom: 1px solid var(--lime); background: color-mix(in srgb, var(--lime) 7%, var(--panel));
  font-size: 14px; letter-spacing: .04em;
}
.list-complete b { color: #4f8f00; }
.list-complete button { border: 1.5px solid var(--lime); border-radius: 10px; padding: 6px 14px; font-weight: 800; font-size: 12px; color: #4f8f00; }
.list-complete button:hover { background: var(--lime); color: #fff; }

/* 📊 the lunch referendum */
.poll-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 4px; min-width: 280px; }
.poll-q { font-weight: 800; font-size: 13.5px; margin-bottom: 8px; }
.poll-opt { position: relative; display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 5px; overflow: hidden; }
.poll-opt:hover { border-color: var(--ink); }
.poll-opt.mine { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--gold) 16%, transparent); transition: width .3s; }
.poll-lbl { position: relative; flex: 1; font-weight: 700; font-size: 13px; }
.poll-who { position: relative; display: flex; gap: 3px; }
.poll-who .vb { width: 18px; height: 18px; font-size: 8px; }
.poll-form { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.poll-form-opts { display: flex; flex-direction: column; gap: 5px; }

.phone { color: var(--ink); font-weight: 800; text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; }
.phone:hover { color: var(--cyan); }
.dial-big {
  position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: 97;
  background: var(--ink); color: var(--bg); border-radius: 20px; padding: 34px 48px; text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.4); cursor: pointer;
}
.dial-num { font: 800 54px Menlo, monospace; letter-spacing: 3px; }
.dial-sub { margin-top: 10px; font-size: 12px; opacity: .6; }

.inbox-row .ch-lab, .drafts-slot .ch-lab { display: inline-flex; align-items: center; gap: 6px; }
.inbox-row .ch-ico, .drafts-slot .ch-ico { font-size: 14px; }

.gotit { border: 1.5px solid var(--gold); color: var(--gold-text); font-size: 11px; font-weight: 800; border-radius: 12px; padding: 2px 9px; white-space: nowrap; }
.gotit:hover { background: var(--gold); color: #fff; }
.office-t { background: var(--ink) !important; font-size: 12px; }

.ai-connect { display: flex; flex-direction: column; gap: 8px; border: 1.5px dashed var(--violet); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.ai-connect #aiSave2 { background: var(--violet); color: #fff; font-weight: 800; border-radius: 8px; padding: 8px; letter-spacing: .06em; }
.ai-connect #aiSave2:hover { filter: brightness(1.15); }
.ai-link { color: var(--violet); font-weight: 800; text-decoration: underline dotted; }

.use-draft {
  border: 1.5px solid var(--violet); color: var(--violet); border-radius: 9px;
  padding: 5px 12px; font-size: 11px; font-weight: 800; letter-spacing: .04em; margin-top: 8px;
}
.use-draft:hover { background: var(--violet); color: #fff; }

.ai-connect .c-field { font-size: 11.5px; padding: 6px 9px; }
.ai-connect #aiSave2 { font-size: 12px; padding: 7px; }
#aiKey2.haskey { background: var(--sel); }
#aiKey2.haskey::placeholder { color: var(--ink-dim); letter-spacing: .05em; }
.ai-panel .office-note { font-size: 13px; color: var(--ink); opacity: .8; line-height: 1.55; }

/* ✨ drawer docks under its button — toggle without moving the mouse */
.ai-panel { top: 56px; left: 8px; bottom: 8px; border-radius: 16px; border: 1px solid var(--line); width: 400px; }
.ai-panel .fmt-head b { font-size: 21px; letter-spacing: .04em; }
.ai-panel .fmt-sub { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-conn { color: var(--lime); font-weight: 800; font-size: 13px; letter-spacing: .05em; }
.ai-prov { font-weight: 800; font-size: 13px; }
.ai-prov.ai-anthropic { color: #DA7756; }
.ai-prov.ai-openai { color: #10a37f; }
.ai-prov.ai-gemini { color: #4285f4; }
.ai-model { color: var(--ink-dim); font-size: 11px; }
.ai-ask-wrap { position: relative; margin-top: 8px; }
.ai-ask-wrap textarea {
  width: 100%; min-height: 88px; resize: vertical; padding: 10px 12px 34px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel);
  color: var(--ink); font: 13px var(--ui-font); line-height: 1.5;
}
.ai-ask-wrap textarea:focus { outline: none; border-color: var(--cyan); }
.ai-ask-wrap #aiSend {
  position: absolute; right: 8px; bottom: 10px;
  background: var(--cyan); color: #fff; font-weight: 800; font-size: 12px;
  border-radius: 8px; padding: 5px 14px; letter-spacing: .05em;
}
.ai-ask-wrap #aiSend:hover { filter: brightness(1.1); }

.ping-nm {
  display: inline-block; background: var(--ink); color: #fff; font-weight: 800; font-size: 11px;
  border-radius: 20px; padding: 2px 10px; margin-right: 5px; letter-spacing: .03em;
}

/* office settings: gmail crowns the pane, AI left · signature right, real borders between */
.os-gmail {
  grid-column: 1 / -1; text-align: center; border: 1.5px solid var(--line); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.os-gmail #gmailBox { justify-content: center; font-size: 14.5px; color: var(--ink); font-weight: 700; }
.os-title { font-size: 11.5px !important; font-weight: 800; letter-spacing: .14em; color: var(--ink) !important; }
.office-settings .os-col { border: 1px dashed var(--line); border-radius: 12px; padding: 12px; }
.office-settings .office-note { color: var(--ink); opacity: .8; font-size: 12px; }

.sent-head { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--ink-dim); padding: 16px 0 10px; }
.sent-row { border-bottom: 1px solid var(--line); }
.sent-top { display: flex; gap: 14px; align-items: baseline; width: 100%; text-align: left; padding: 10px 14px; }
.sent-top:hover { background: var(--sel); }
.sent-date { color: var(--ink-dim); font-size: 12px; flex: none; width: 64px; }
.sent-to { font-weight: 800; font-size: 13px; flex: none; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sent-subj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink); }
.sent-body { padding: 4px 14px 14px 92px; }
.sent-body p { font: var(--fs) var(--body-font); line-height: var(--lh); margin-bottom: var(--pgap); overflow-wrap: anywhere; }
.gmail-warn {
  max-width: 760px; margin: 8px auto 2px; padding: 9px 18px; text-align: center; cursor: pointer;
  border: 1.5px solid var(--gold); border-radius: 12px; background: color-mix(in srgb, var(--gold) 8%, #fff);
  font-weight: 800; font-size: 13px; color: var(--ink); animation: rowdrop .16s ease-out;
}
.gmail-warn:hover { background: color-mix(in srgb, var(--gold) 16%, #fff); }

/* CENTER inbox — the fresh view: subject as headline, from · date beneath, team chips after */
body.list-center .list-head { display: none !important; }
body.list-center .row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 2px 12px; padding: 18px 70px 15px; position: relative;
}
body.list-center .row .rmain { flex: 0 0 100%; order: 1; text-align: center; margin-bottom: 3px; }
body.list-center .row .rfrom { order: 2; font-weight: 800; width: auto; }
body.list-center .row .rdate { order: 3; color: var(--ink-dim); text-align: left; width: auto; }
body.list-center .row .rthread, body.list-center .row .ratt, body.list-center .row .rviewed,
body.list-center .row .rtag, body.list-center .row .rstatus { order: 4; width: auto; overflow: visible; }
body.list-center .row .udot { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); }
body.list-center .row .selbox { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); }
body.list-center .day-divide { justify-content: center; }

.done-key { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; padding-top: 1px; }
.done-key .dk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }

.boss-row { display: flex; gap: 8px; padding: 2px 0 6px; }

.client-search { width: 100%; margin-bottom: 8px; }
.client-search:focus { width: 100%; }

.c-fast { border: 1.5px solid var(--cyan); color: var(--cyan); border-radius: 8px; padding: 3px 9px; font-size: 13px; flex: none; }
.c-fast:hover { background: var(--cyan); color: #fff; }

/* fast hands */
.help-sheet, .pal-wrap { position: fixed; inset: 0; background: rgba(10,10,20,.35); z-index: 96; display: flex; align-items: flex-start; justify-content: center; }
.help-card {
  margin-top: 8vh; background: var(--panel); border-radius: 18px; padding: 22px 28px; width: min(480px, 92vw);
  max-height: 80vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 7px;
}
.help-card > b { letter-spacing: .12em; font-size: 13px; margin: 8px 0 2px; }
.help-row { display: flex; gap: 14px; align-items: baseline; font-size: 13px; }
.help-row kbd { flex: none; min-width: 150px; font: 700 12px Menlo, monospace; color: var(--ink); background: var(--sel); border-radius: 6px; padding: 2px 8px; text-align: center; }
.pal-card { margin-top: 14vh; width: min(560px, 92vw); background: var(--panel); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35); overflow: hidden; }
.pal-in { width: 100%; border: none; outline: none; padding: 16px 20px; font: 16px var(--ui-font); background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--line); }
.pal-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; }
.pal-row { text-align: left; padding: 10px 20px; font-size: 13.5px; color: var(--ink); }
.pal-row.on, .pal-row:hover { background: var(--sel); }
/* morning brief */
.brief-card { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; margin: 14px auto 4px; border: 1.5px solid var(--violet); border-radius: 14px; padding: 12px 16px; }
.brief-go { color: var(--violet); font-weight: 800; font-size: 13px; letter-spacing: .04em; flex: 1; text-align: left; }
.brief-hd { color: var(--violet); font-size: 12px; letter-spacing: .1em; flex: none; }
.brief-text { flex: 1; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; color: var(--ink); }
.brief-sub { color: var(--ink-dim); font-size: 12.5px; }
/* compact rows */
body.compact .row { padding-top: 3px; padding-bottom: 3px; font-size: 12px; }
body.compact .day-divide { padding: 12px 18px 6px; }
body.compact .day-divide .dd-day, body.compact .day-divide .dd-date { font-size: 20px; }

.chat-emails { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.chat-em { background: var(--sel); border: 1.5px solid var(--cyan); color: var(--ink); font-size: 12px; font-weight: 700; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-em:hover { background: var(--cyan); color: #fff; }
.sel-chat { border: 1.5px solid var(--cyan); color: var(--cyan); border-radius: 9px; font-weight: 800; font-size: 11px; padding: 4px 10px; }
.sel-chat:hover { background: var(--cyan); color: #fff; }

.ob-prev { position: fixed; inset: 0; z-index: 97; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; pointer-events: auto; }
.ob-chrome { background: #3c3c46; color: #cfcfd6; font: 600 11.5px -apple-system, Helvetica, Arial, sans-serif; letter-spacing: .06em; padding: 9px 22px; border-radius: 14px 14px 0 0; width: min(640px, 92vw); text-align: center; }
.ob-card { background: #fff; width: min(640px, 92vw); max-height: 70vh; overflow-y: auto; border-radius: 0 0 14px 14px; box-shadow: 0 30px 80px rgba(0,0,0,.4); padding: 22px 28px; }
.ob-hd { font: 13px Helvetica, Arial, sans-serif; color: #555; padding-bottom: 4px; }
.ob-subj { font-weight: 700; color: #111; border-bottom: 1px solid #e2e2e2; margin-bottom: 14px; padding-bottom: 10px; }
.ob-body { font: 14px Helvetica, Arial, sans-serif; color: #111; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.ob-note { margin-top: 18px; font: 11.5px Helvetica, Arial, sans-serif; color: #7ac70c; border-top: 1px dashed #e2e2e2; padding-top: 10px; }

/* ✉ the envelope — ink dries for exactly the undo window */
.env { position: relative; width: 44px; height: 34px; flex: none; }
.env-back { position: absolute; inset: 8px 2px 2px; background: #efe7d6; border-radius: 3px; border: 1px solid #d8cdb4; }
.env-letter {
  position: absolute; left: 7px; right: 7px; top: -14px; height: 26px; background: #fff;
  border: 1px solid #ccc; border-radius: 2px;
  background-image: repeating-linear-gradient(#fff 0 5px, #dfe5ee 5px 6px);
  animation-name: letter-in; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes letter-in { from { transform: translateY(0); } to { transform: translateY(20px); } }
.env-letter.smudged { animation: letter-out .22s ease-out forwards !important; }
@keyframes letter-out { to { transform: translateY(-26px) rotate(-8deg); opacity: 0; } }
.env-front { position: absolute; inset: 14px 2px 2px; background: #f6efdf; border-radius: 0 0 3px 3px; border: 1px solid #d8cdb4; border-top: none; clip-path: polygon(0 0, 50% 42%, 100% 0, 100% 100%, 0 100%); }
.env-stamp {
  position: absolute; right: -8px; top: -10px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #c0392b; color: #c0392b; font: 800 9px Menlo, monospace;
  display: flex; align-items: center; justify-content: center; transform: rotate(-14deg);
  background: rgba(255,255,255,.85); animation: stamp-in .3s cubic-bezier(.2, 2.4, .5, 1);
}
@keyframes stamp-in { from { transform: rotate(-14deg) scale(2.4); opacity: 0; } }
/* 🕊 inbox zero */
.zero-moment {
  position: fixed; inset: 0; z-index: 98; background: var(--bg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; cursor: pointer; animation: arrive-in .5s ease-out;
}
.zm-time { font: 800 72px var(--ui-font); letter-spacing: .06em; color: var(--ink); }
.zm-line { font-size: 22px; font-weight: 700; letter-spacing: .3em; color: var(--ink-dim); text-transform: uppercase; }
.zm-sub { font-size: 14px; color: var(--ink-dim); margin-top: 8px; }
.zm-jazz { font-size: 44px; margin-top: 18px; transition: transform .2s; }
.zm-jazz:hover { transform: scale(1.25) rotate(-8deg); }
.zm-hint { position: absolute; bottom: 26px; font-size: 11px; color: var(--ink-dim); letter-spacing: .1em; }
/* 🗞 the morning paper */
.brief-card.paper { display: block; border: 1px solid #ccc; border-radius: 4px; background: #fbf9f4; box-shadow: 0 2px 0 #eee, 0 4px 0 #f4f4f4; padding: 18px 26px; position: relative; }
.brief-card.paper .mm-x { position: absolute; top: 8px; right: 10px; }
.paper-mast { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 26px; text-align: center; letter-spacing: .04em; border-bottom: 2.5px solid #111; padding-bottom: 6px; color: #111; }
.paper-date { font-family: Georgia, serif; font-size: 10.5px; text-align: center; color: #555; border-bottom: 1px solid #999; padding: 4px 0; margin-bottom: 12px; letter-spacing: .06em; }
.paper-lead { font-family: Georgia, serif; font-weight: 700; font-size: 19px; line-height: 1.35; color: #111; margin-bottom: 10px; }
.paper-p { font-family: Georgia, serif; font-size: 13.5px; line-height: 1.55; color: #222; margin-bottom: 6px; }
.paper-side { display: block; width: 100%; text-align: left; font-family: Georgia, serif; font-size: 12px; color: #333; border-top: 1px solid #999; margin-top: 10px; padding-top: 8px; }
.paper-side:hover { color: #000; text-decoration: underline; }
/* ⌨ typewriter */
.c-body.tw { font-family: 'Courier New', Menlo, monospace !important; letter-spacing: .02em; }
#cType.on { border-color: var(--ink); background: var(--ink); color: #fff; border-radius: 8px; }

.mail-grab { cursor: grab; color: var(--cyan); padding: 2px 6px 0 0; border-radius: 8px; user-select: none; display: inline-flex; align-items: center; flex: none; }
.mail-grab:hover { color: var(--cyan); background: var(--sel); }
.mail-grab:active { cursor: grabbing; }

.focus-out { position: absolute; top: 18px; right: 22px; border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 14px; font-weight: 800; font-size: 12px; letter-spacing: .06em; color: var(--ink-dim); }
.focus-out:hover { color: var(--ink); border-color: var(--ink); }
.focus-subj { display: block; margin: 2px auto 10px; font-weight: 800; font-size: 13px; color: var(--ink-dim); text-decoration: underline dotted; text-underline-offset: 4px; max-width: 70ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-subj:hover { color: var(--ink); }
.focus-peek { max-width: 62ch; margin: 0 auto 16px; padding: 12px 18px; border-left: 3px solid var(--line); color: var(--ink-dim); font-size: 13px; line-height: 1.55; max-height: 30vh; overflow-y: auto; }
.focus-peek p { margin-bottom: 8px; }

.img-box {
  max-width: min(var(--colw), 640px); margin: 18px auto; padding: 16px; text-align: center;
  border: 1.5px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.img-att { max-width: 100%; max-height: 420px; border-radius: 10px; cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.img-note { font-size: 11px; color: var(--ink-dim); letter-spacing: .04em; }
@media print { .img-box { display: none; } }

.ai-pdfs { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-pdfs .tgl { font-size: 11.5px; font-weight: 700; }
.ai-power { display: flex; gap: 4px; align-items: center; margin-bottom: 10px; }
.ai-power button { border: 1.5px solid var(--line); border-radius: 9px; padding: 4px 10px; font-size: 11px; font-weight: 800; color: var(--ink-dim); }
.ai-power button.on { border-color: var(--violet); color: var(--violet); box-shadow: 0 0 0 1px var(--violet) inset; }
.ai-power button:hover { color: var(--ink); border-color: var(--ink); }
.ai-power-note { font-size: 10px; color: var(--ink-dim); margin-left: 6px; }

.views button { position: relative; }
.ch-owner { width: 17px !important; height: 17px !important; font-size: 8px !important; position: absolute; top: -5px; right: -4px; border: 1.5px solid var(--bg); }
.mini-menu.ownmenu { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }

.agenda-card { max-width: 760px; margin: 14px auto 0; border: 1.5px solid var(--cyan); border-radius: 14px; padding: 12px 18px; display: flex; flex-direction: column; gap: 6px; }
.ag-hd { color: var(--cyan); font-size: 12px; letter-spacing: .1em; }
.ag-row { display: flex; gap: 14px; align-items: baseline; }
.ag-time { flex: none; width: 74px; font-weight: 800; font-size: 12.5px; color: var(--ink); }
.ag-what { font-size: 13.5px; color: var(--ink); }
.paper-agenda { font-family: Georgia, serif; font-size: 12px; color: #333; border-top: 1px solid #999; margin-top: 10px; padding-top: 8px; }

/* PREFS overhaul */
#gearBtn { display: none; } /* Aa = the quick door; profile chip holds the other key */
.fmt-sec > label { text-align: center; color: #f59300 !important; font-weight: 800; }
.fmt-drawer .u-label, .fmt-drawer .seg-row > span { color: #f59300; font-weight: 800; }
.fmt-drawer .theme-row { justify-content: center; gap: 14px; }
.fmt-drawer .theme-card { font-size: 0; border: none; display: inline-flex; }
.fmt-drawer .theme-card .sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); }
.fmt-drawer .theme-card.sel .sw { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.fold-btn { display: block; width: 100%; text-align: center; font-weight: 800; font-size: 11.5px; letter-spacing: .1em; padding: 8px; border: 1px dashed var(--line); border-radius: 10px; margin-bottom: 10px; color: var(--ink); }
.fold-btn:hover { border-color: var(--ink); }
.ink-pick { width: 26px; height: 26px; border: none; border-radius: 50%; padding: 0; cursor: pointer; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.ink-pick::-webkit-color-swatch-wrapper { padding: 2px; }
.ink-pick::-webkit-color-swatch { border-radius: 50%; border: none; opacity: 0; }
.row.status-off { opacity: .55; }
body.no-fade .row.status-off { opacity: 1; }
/* your plate in the TASKS dropdown */
.my-mini { width: 100%; border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 6px; }
.my-mini-row { display: flex; gap: 8px; align-items: center; padding: 3px 2px; position: relative; }
.my-mini-row .ttext { flex: 1; font-size: 12.5px; }
.dlg8 { border: 1.5px solid var(--violet); color: var(--violet); font: 800 10px Menlo, monospace; letter-spacing: .08em; border-radius: 8px; padding: 2px 8px; }
.dlg8:hover { background: var(--violet); color: #fff; }

.rprint { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: var(--ink); text-align: center; }

.w-nudge { display: inline-flex; gap: 4px; align-items: center; margin-left: 10px; }
.w-lbl { font-size: 10px; color: var(--ink-dim); letter-spacing: .04em; }
.orig-plain, .r-body p, .bubble p, .sent-body p { overflow-wrap: anywhere; word-break: break-word; }
.orig-plain { white-space: pre-wrap; }

.chat-panel .chat-list, .chat-panel .note-compose, .chat-panel #chatPending, .chat-panel .office-todos, .chat-panel .office-settings, .chat-panel .chat-head {
  width: min(1010px, 100%); margin-left: auto; margin-right: auto;
}

.r-body p, .bubble p, .lp-inner p, .sent-body p, .focus-peek p,
.mast-subj, .lp-subj {
  font-weight: var(--bw, inherit);
  -webkit-text-stroke: var(--bstroke, 0px) currentColor;
}

#lpToggle.on { border-style: solid; border-color: var(--gold); color: var(--gold-text); }

.mast-extra { display: inline-flex; gap: 4px; align-items: center; }
.act.util.on { color: var(--ink); border-color: var(--ink); }