/* ============ 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; --accent: var(--cyan); /* --accent = the signed-in user's own colour, set at login */
  --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(--accent) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 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(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.acct-center.dropover .acct-line { color: var(--accent); }
.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; }
.nl-left { display: flex; gap: 6px; align-items: center; justify-self: end; }
.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(--accent); }
.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(--accent); }
.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(--accent); }
.views .count { background: var(--sel); }
/* 🗄 the category drawer — vertical, named, counted, owned (phone) */
.cat-btn { display: none; }
#catScrim { z-index: 89; }
.cat-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 84vw); z-index: 90; background: var(--panel);
  border-right: 1px solid var(--line); box-shadow: 14px 0 40px rgba(0,0,0,.2); overflow-y: auto;
  padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); animation: drawer-in .18s ease-out;
}
@keyframes drawer-in { from { transform: translateX(-100%); } }
.cat-head { font-size: 11px; letter-spacing: .14em; color: var(--ink-dim); font-weight: 800; padding: 8px 8px 4px; }
.cat-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 8px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--ink); }
.cat-row.active { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.cat-row .ch-ico { font-size: 20px; width: 28px; text-align: center; flex: none; }
.cat-row .cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row .count { background: var(--sel); border-radius: 9px; padding: 0 7px; font-size: 11px; }
.cat-row .count.unread { background: var(--violet); color: #fff; }
.cat-row .vb { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.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 calc(18px + var(--padx, 0px)) 6px calc(12px + var(--padx, 0px)); border-bottom: 1px solid var(--line); background: var(--panel); } /* same margin as the rows — the columns line up */
.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 calc(18px + var(--padx, 0px)) 12px calc(12px + var(--padx, 0px)); 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; }
/* done = a green check in the dot's place — the box says it and the dot says it */
.udot.done.check { width: 15px; height: 15px; background: var(--lime); color: #fff; font-size: 10px; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.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; } }

/* everything black by default (v106); the old flip — grey once eyes got it — lives behind the "Grey out opened mail" switch */
.row .rfrom { font-weight: 600; font-size: var(--rfrom-fs, 13.5px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.row .rsubj { color: var(--ink); }
body.read-grey .row:not(.unread) .rfrom, body.read-grey .row:not(.unread) .rsubj, body.read-grey .row:not(.unread) .rdate { 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); font-size: var(--rdate-fs, 12px); white-space: nowrap; text-align: right; }
.rchips { display: inline-flex; gap: 6px; align-items: center; }
.rchips .chip.att { display: none; } /* the desktop has its own 📎 column — the chip is for the phone row */
/* you just left this one — a border around the whole line until the next tap */
.row.was { box-shadow: inset 0 0 0 2px var(--accent); }
.row.bigdates .rdate { font-size: calc(var(--rdate-fs, 12px) + 2px); font-weight: 700; }
.rmain { min-width: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.row .rsubj { font-size: var(--rsubj-fs, 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; }
/* v107 structure: on a desktop the groups melt into the one-line bar; on a phone they stack (see the phone pass) */
.sel-bar .sb-head, .sel-bar .sb-big, .sel-bar .sb-task-line { display: contents; }
.sel-bar .sb-fold { display: none; }
.sel-bar .sb-head .sb-x { order: 99; }
.sel-bar button.tassign { padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* round faces: initials dead centre, no bar padding */
.search-btn { display: none; } /* the 🔎 icon is phone furniture */
.date-parts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.date-parts .tgl { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; }
/* categories inside the ⋮ actions menu (phone) */
.r-actions .acts-cats { display: none; flex-wrap: wrap; gap: 5px; padding: 8px 4px 2px; border-top: 1px dashed var(--line); margin-top: 4px; }
.acts-cats .ac-title { flex-basis: 100%; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--ink-dim); }
.acts-cats .tchip { padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 800; letter-spacing: .04em; border: 1px solid var(--line); color: var(--ink-dim); }
.acts-cats .tchip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.acts-cats .tchip.rule { border: 1.5px dashed var(--ink); color: var(--ink); }
.acts-cats .tchip.add { border-style: dashed; }
.acts-cats .tchip.mode { border-radius: 16px; }
.acts-cats .tchip.mode.on { background: var(--gold); border-color: var(--gold); color: #fff; }

/* 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: var(--chat-pad, 62px) 26px 16px; /* the real firm-name row sits inside this frame, with air — the pad is measured from the row (it wraps to two lines on phones) */
}
.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(--accent); }
#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; }
/* the chat ✕ lives OUTSIDE the frame (a sibling) so it stacks above the raised firm-name row — pinned to the frame's top-right corner */
#chatClose { position: fixed; top: calc(var(--chat-top, 88px) + 12px); right: calc(2vw + 12px); z-index: 81; }
body:not(.chat-open) #chatClose { display: none; }

.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 */
/* the raised row must not swallow taps meant for the frame's ✕ — only its real children catch the pointer */
body.chat-open .acct-row, body.chat-open .acct-row .az.right { pointer-events: none; }
body.chat-open .acct-row > *, body.chat-open .acct-row .az.right .search-box { pointer-events: auto; }
.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(--accent); text-decoration: none; font-weight: 800; }
.acct-line { cursor: pointer; }
.chat-panel.dragover { outline: 2px dashed var(--accent); outline-offset: -6px; }
.chat-pending {
  display: flex; gap: 8px; align-items: center; margin: 6px 0; padding: 7px 10px;
  border: 1.5px dashed var(--accent); 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; }
/* "tidied" — the polish is the reader's, not the writer's; tap to see what was typed */
.tidied { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; margin-left: 6px; cursor: pointer; vertical-align: middle; }
.tidied:hover { color: var(--ink); border-color: var(--ink); }
/* 👍 — one tap says got it */
.cm-react { display: flex; gap: 6px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.react-chip { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 12px; padding: 1px 7px; font-size: 12px; }
.react-chip.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.react-chip .vb { width: 15px; height: 15px; font-size: 7px; }
.react-add { opacity: .3; font-size: 13px; padding: 0 4px; }
.chat-msg:hover .react-add { opacity: 1; }
@media (pointer: coarse) { .react-add { opacity: .55; } }

/* 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(--accent); color: var(--accent); }
.chip.draft { background: transparent; border: 1.5px dashed var(--accent); color: var(--accent); }
.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 { color: var(--ink); font-weight: 800; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 10px; letter-spacing: .06em; font-size: 12.5px; justify-self: start; }
#backBtn:hover { border-color: var(--ink); background: var(--sel); color: var(--ink); }
#backBtn .bk-arrow { font-size: 16px; line-height: 1; }
.read-door, .acts-btn { display: none; } /* phone-only furniture — see the phone pass */
.nav-btn.arr {
  font-size: 20px; line-height: 1; padding: 3px 14px;
  border: 1.5px solid var(--accent); border-radius: 9px; color: var(--accent);
}
.nav-btn.arr:hover { background: var(--accent); color: #fff; }
.nav-arrows { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.nav-pos { color: var(--accent); font-weight: 700; font-size: 12px; margin-right: 6px; white-space: nowrap; }

.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; }
/* the email's story — faces who saw it, then who did what, in order (verbs carry a time; looks never carry a count) */
.story { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; align-items: center; font-size: 11.5px; color: var(--ink-dim); margin: 4px 0 2px; }
.story .sv { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.story .sv b { color: var(--ink); font-weight: 700; }
.story .vb { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.story .st-time { font-size: 10px; }
.story .sv.seen .vb { margin-left: -4px; border: 1.5px solid var(--bg); }
.story .sv.seen .vb:first-of-type { margin-left: 0; }
.story .sv.first { 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 calc(40px + var(--padx, 0px)) 80px; }
.reading-inner { max-width: none; margin: 0; --inner-w: max(calc(var(--colw) + 140px), 900px); }
/* the column (and its left/centre/right) belongs to the letter's pieces — the verbs row and the reply line stay put */
.reading-inner > .r-body, .reading-inner > .tchat, .reading-inner > .tasks-wrap, .reading-inner > .img-box, .reading-inner > .orig-holder,
.reading-inner > .collision, .reading-inner > .warn-line, .reading-inner > .notes-print, .reading-inner > .att-row-print,
.reader-sticky > .mast-line, .reader-sticky > .story,
.convo > .reply-bubble, .convo > h3, .convo > .reply-btn, .convo > .resp-box { max-width: var(--inner-w); margin-left: auto; margin-right: auto; }
.reading-inner > .r-body { max-width: var(--colw); } /* the letter itself keeps the Column width */
body[data-bl="left"] .reading-inner > .r-body, body[data-bl="left"] .reading-inner > .tchat, body[data-bl="left"] .reading-inner > .tasks-wrap, body[data-bl="left"] .reading-inner > .img-box, body[data-bl="left"] .reading-inner > .orig-holder,
body[data-bl="left"] .reading-inner > .collision, body[data-bl="left"] .reading-inner > .warn-line, body[data-bl="left"] .reader-sticky > .mast-line, body[data-bl="left"] .reader-sticky > .story, body[data-bl="left"] .convo > .reply-bubble, body[data-bl="left"] .convo > h3, body[data-bl="left"] .convo > .reply-btn, body[data-bl="left"] .convo > .resp-box { margin-left: 0; margin-right: auto; }
body[data-bl="right"] .reading-inner > .r-body, body[data-bl="right"] .reading-inner > .tchat, body[data-bl="right"] .reading-inner > .tasks-wrap, body[data-bl="right"] .reading-inner > .img-box, body[data-bl="right"] .reading-inner > .orig-holder,
body[data-bl="right"] .reading-inner > .collision, body[data-bl="right"] .reading-inner > .warn-line, body[data-bl="right"] .reader-sticky > .mast-line, body[data-bl="right"] .reader-sticky > .story, body[data-bl="right"] .convo > .reply-bubble, body[data-bl="right"] .convo > h3, body[data-bl="right"] .convo > .reply-btn, body[data-bl="right"] .convo > .resp-box { margin-left: auto; margin-right: 0; }
.reply-btn { display: block; }
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 > .r-body { border-left: 2px solid #d86a6a; padding-left: 22px; } /* the red rule hugs the letter, not the pane */

/* 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: var(--from-fs, 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;
  /* the verbs span the whole reader (v109): the letter column lives inside .reading-inner's children now, so nothing here moves with Column width */
  flex-wrap: nowrap; margin-left: 0; margin-right: 0; width: 100%;
}
.r-actions .act.phone-only { display: none; } /* discuss · notes — on a phone they ride the ⋮ menu */
@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(--accent); color: var(--accent); 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; }
.pnote.pquote { font-size: 11px; }
.r-body p:hover .pnote, .r-body p.showplus .pnote { opacity: 1; }
.pnote:hover { background: var(--accent); color: #fff; }
.r-body p.flash { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); transition: background .3s; }
.r-body p.has-note { box-shadow: inset 2px 0 0 var(--accent); }
.r-body .plink {
  color: var(--accent); 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 0 8px; /* pinned to the reader like the verbs (v109) — never dances with the column */
}
.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(--accent); border-right: none;
  border-radius: 10px 0 0 10px; color: var(--accent); font-weight: 800; font-size: 12px; letter-spacing: .1em;
  background: var(--panel);
}
.notes-fab:hover { background: var(--accent); 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(--accent); 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(--accent); color: #fff; font-weight: 800; }
.compose-anchor { font-size: 12px; color: var(--accent); 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); width: auto; padding: 0 9px; border-radius: 12px; letter-spacing: .06em; }
.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(--accent); 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; flex-direction: column; align-items: stretch; gap: 2px; font-size: 12.5px; } /* v108: a column of lines — subject, then the sender line */
.mast-subj { font-family: var(--head-font); font-size: var(--subj-fs, 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; font-size: var(--date-fs, 12.5px); }
.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: calc(100% - 110px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the subject keeps the room; the snippet takes what's left */
.compose-panel .cdrafts { margin: 6px 0 0; justify-content: center; }

/* tasks list docks under the nav — 🎯 toggles it without the mouse moving an inch */
/* ☑ TASKS — drops down like the 🔔 pings panel: same spot, same size, same frame */
.my-panel {
  position: fixed; right: 14px; top: 58px; z-index: 40; width: 340px; max-width: 94vw; 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);
}
.my-panel.dragover { outline: 2px dashed var(--accent); outline-offset: -4px; }
.my-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.my-head b { letter-spacing: .14em; font-size: 12px; }
.my-hint { flex: 1; font-size: 10px; color: var(--ink-dim); line-height: 1.3; }
.my-head .icon-btn { width: 28px; height: 28px; font-size: 12px; }
.my-sec { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--ink-dim); padding: 8px 14px 2px; }
.my-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.my-row .ttext { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.my-row.tdone .ttext { color: var(--ink-dim); text-decoration: line-through; }
.my-row .my-link { font-size: 11.5px; color: var(--accent); font-weight: 700; text-decoration: underline dotted; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-row .my-act { font-size: 12px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-dim); }
.my-row .my-act:hover { border-color: var(--ink); color: var(--ink); }
.my-row .my-act.no:hover { border-color: #e5252c; color: #e5252c; }
.my-row { position: relative; }
.my-row .mini-menu { right: 8px; left: auto; }
.my-zero { padding: 18px; text-align: center; color: var(--ink-dim); font-size: 13px; }
/* the envelope that rides the pointer when you drag a subject */
.drag-env { position: fixed; top: -300px; left: -300px; font-size: 34px; line-height: 1; padding: 10px 16px; background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
/* the font picker like Word's: one line in the current face; press → the whole book drops */
.font-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; text-align: left; background: var(--panel); color: var(--ink); }
.font-head::after { content: '▾'; margin-left: auto; font-size: 12px; color: var(--ink-dim); font-family: var(--ui-font); }
.font-head.open::after { content: '▴'; }
.font-head .fh-aa { font-size: 20px; width: 34px; }
.font-head.part { padding: 6px 12px; font-size: 14px; margin-bottom: 4px; }
.font-head.part .fh-aa { font-size: 16px; width: 28px; }
.font-drop { margin-top: 6px; }
.out-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; }
.out-row .out-lab { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.out-row .out-size { width: 90px; margin: 0; }
.out-row .out-banner { font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.ob-link { color: var(--accent); font-weight: 800; text-decoration: underline dotted; cursor: pointer; }
.ob-banner { height: 44px; display: block; margin: 12px 0 6px; }
/* boldness reaches the inbox: the slider's extra weight (+ stroke) rides every row and day header; unread stays a step heavier */
.row .rfrom, .row .rsubj, .row .rdate { font-weight: min(900, calc(600 + var(--bwx, 0))); -webkit-text-stroke: var(--bstroke, 0px) currentColor; }
.row.unread .rfrom, .row.unread .rsubj { font-weight: min(900, calc(800 + var(--bwx, 0))); }
.day-divide .dd-day, .day-divide .dd-date { font-weight: min(900, calc(800 + var(--bwx, 0))); -webkit-text-stroke: var(--bstroke, 0px) currentColor; }
/* desktop masthead in three lines: subject / sender · date · 📎 · show original · ⋯ / seen + story — all following the header alignment */
.mast-top { display: flex; justify-content: center; }
.mast-meta { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 12.5px; margin-top: 2px; }
body[data-hs="left"] .mast-top { justify-content: flex-start; } body[data-hs="right"] .mast-top { justify-content: flex-end; }
body[data-hm="left"] .mast-meta { justify-content: flex-start; } body[data-hm="right"] .mast-meta { justify-content: flex-end; }
body[data-hy="left"] .story { justify-content: flex-start; } body[data-hy="right"] .story { justify-content: flex-end; }
.reader-sticky .orig-wrap.top { display: contents; }
/* desktop columns: the subject gets the room; FROM's right edge is a grip */
.list-head .from-col { position: relative; }
.list-head .col-grip { position: absolute; right: -7px; top: 0; bottom: 0; width: 12px; cursor: col-resize; }
.list-head .col-grip::after { content: ''; position: absolute; left: 5px; top: 20%; bottom: 20%; width: 2px; background: var(--line); border-radius: 1px; }
.list-head .col-grip:hover::after { background: var(--ink); }
.ratt { text-align: center; }
.list-head .hcol.att-col { text-align: center; }

/* 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: -3px; align-self: flex-end; padding-bottom: 3px; } /* -3px eats the N's trailing letter-spacing — .email sits against 0N */
/* the zero is a zero: Menlo/Consolas slash it themselves on desktop; the phone's fallback font does not — see the phone pass */
.brand-text .z0 { position: relative; display: inline-block; }
.ai-top { border-color: #8845f5; color: #8845f5; margin-left: 10px; }
.ai-top:hover { background: #8845f5; color: #fff; }
.ai-top:hover .ai-prov { color: #fff !important; } /* purple on purple vanished the label */

.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 calc(18px + var(--padx, 0px)) 12px; border-bottom: 1px solid var(--line);
}
.day-divide .dd-day { font-size: 30px; font-weight: min(900, calc(800 + var(--bwx, 0))); letter-spacing: .14em; color: var(--ink); } /* past days stay black (v106) — only today wears your colour; the boldness slider adds on top (v108) */
.day-divide .dd-date { font-size: 30px; font-weight: min(900, calc(800 + var(--bwx, 0))); letter-spacing: .14em; color: var(--ink); text-transform: uppercase; }
.day-divide.dd-today .dd-day, .day-divide.dd-today .dd-date { color: var(--accent); }

.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(--accent); }
/* a date in the body is tappable like a phone number — it books itself */
.dately { color: var(--ink); font-weight: 800; text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
.dately::before { content: '📅 '; } /* decoration, not text — the printed page keeps the sender's words only */
.dately:hover { color: var(--accent); }
@media print { .dately::before { content: none; } .dately { text-decoration: none; font-weight: inherit; } }
.cal-sheet {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 97;
  width: min(440px, 94vw); max-height: 92vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35); padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.cal-sheet .cs-title { font-weight: 800; letter-spacing: .12em; font-size: 12px; color: var(--ink-dim); }
.cal-sheet .c-field { margin: 0; font: 600 14px var(--ui-font); }
.cal-sheet textarea.c-field { min-height: 92px; resize: vertical; font-weight: 500; line-height: 1.45; }
.cal-sheet .cs-row { display: flex; gap: 8px; }
.cal-sheet .cs-row .c-field { flex: 1; min-width: 0; }
.cal-sheet .cs-foot { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.cal-sheet .cs-go { background: var(--accent); color: #fff; font-weight: 800; border-radius: 10px; padding: 9px 16px; letter-spacing: .04em; }
.cal-sheet .cs-ai { border: 1.5px solid var(--violet); color: var(--violet); border-radius: 10px; padding: 8px 12px; font-weight: 800; font-size: 12px; margin-right: auto; }
.cal-sheet .cs-ai:hover { background: var(--violet); color: #fff; }
.cal-sheet .cs-x { color: var(--ink-dim); font-weight: 700; padding: 8px 10px; }
.cal-sheet .cs-note { font-size: 11px; color: var(--ink-dim); }
.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(--accent); }
.ai-ask-wrap #aiSend {
  position: absolute; right: 8px; bottom: 10px;
  background: var(--accent); 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; 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(--accent); color: var(--accent); border-radius: 8px; padding: 3px 9px; font-size: 13px; flex: none; }
.c-fast:hover { background: var(--accent); 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(--accent); 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(--accent); color: #fff; }
.sel-chat { border: 1.5px solid var(--accent); color: var(--accent); border-radius: 9px; font-weight: 800; font-size: 11px; padding: 4px 10px; }
.sel-chat:hover { background: var(--accent); 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; }

/* the subject line IS the handle — press & drag it onto the firm name or the chat (v106; the envelope icon retired) */
.mast-subj[draggable="true"] { cursor: grab; }
.mast-subj[draggable="true"]: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(--accent); border-radius: 14px; padding: 12px 18px; display: flex; flex-direction: column; gap: 6px; }
.ag-hd { color: var(--accent); 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: #ff8a00 !important; font-weight: 800; text-shadow: 0 0 7px rgba(255, 138, 0, .45); }
.fmt-drawer .u-label, .fmt-drawer .seg-row > span { color: #ff8a00; font-weight: 800; text-shadow: 0 0 6px rgba(255, 138, 0, .4); }
.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); }

/* ---- 📱 the phone pass: first contact fixes ---- */
@media (max-width: 760px) {
  .date-bar { display: none; }                     /* the phone's status bar already tells time */
  .topbar { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .logo, .brand { font-size: 17px; }
  .icon-btn { width: 34px; height: 34px; font-size: 14px; }
  .acct-row { flex-wrap: wrap; row-gap: 8px; padding: 0 8px; }
  .acct-center { order: -1; flex-basis: 100%; justify-content: center; margin: 0; }
  .az { flex: 1 1 auto; justify-content: center; }
  .az.right { justify-content: center; }
  .az .search-box { width: min(100%, 200px); }
  .resp-btns { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .mast-subj { font-size: calc(var(--subj-fs, 23px) * .83); white-space: normal; max-width: 100%; }
  /* the AI button: ✨ and AI pulled together, centered — the 34px icon width was squeezing them apart */
  .ai-top { width: auto; padding: 0 8px; gap: 3px; margin-left: 4px; justify-content: center; }

  /* ---- 💬 chat is ONE window on a phone (v106): firm name + chips pinned on top, tabs under, only messages scroll;
          the keyboard shrinks the frame (interactive-widget=resizes-content + --vvh) so the composer rides above it ---- */
  html.chat-lock, body.chat-open { overflow: hidden; }
  body.chat-open .acct-row {
    position: fixed; top: var(--vvt, 0px); left: 0; right: 0; z-index: 80; margin: 0;
    background: var(--panel); border-bottom: 1px solid var(--line);
    padding: 8px 44px 7px; row-gap: 6px; /* 44px each side: room for the ✕ on the right, symmetry on the left */
  }
  body.chat-open .acct-center { min-width: 0; max-width: 100%; }
  body.chat-open .acct-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.chat-open .acct-row .az.right { display: none; }
  body.chat-open .acct-row .az { flex: 1 1 100%; justify-content: center; }
  body.chat-open .acct-center { border: none; padding: 0; }
  body.chat-open .acct-line { font-size: 19px; }
  .chat-panel {
    top: var(--vvt, 0px); left: 0; transform: none; width: 100%; height: 100dvh; height: var(--vvh, 100dvh);
    border-radius: 0; border: none; box-shadow: none;
    padding: var(--chat-pad, 96px) 10px calc(6px + env(safe-area-inset-bottom));
  }
  #chatScrim { display: none; } /* the frame is the screen — nothing to dim behind it (the drawer keeps its own scrim) */
  #chatClose { top: calc(var(--vvt, 0px) + 7px); right: 6px; width: 32px; height: 32px; font-size: 14px; }
  .chat-head { margin-bottom: 4px; gap: 2px; }
  .chat-tabs { gap: 0; width: 100%; justify-content: space-around; }
  .chat-tabs button { padding: 6px 6px; font-size: 12.5px; white-space: nowrap; letter-spacing: .03em; }
  .chat-head .fmt-sub { font-size: 10px; text-align: center; line-height: 1.3; }
  .chat-panel .note-compose { gap: 5px; margin-top: 6px; }
  .chat-panel .chat-att { width: 32px; flex: none; font-size: 14px; }
  .chat-panel .note-compose .chat-ce { min-width: 0; padding: 8px 9px; }
  .chat-panel .note-compose .chat-ce:empty::before { content: 'say something'; }
  .chat-panel #chatSend { padding: 0 10px; font-size: 12px; }
  .office-settings { grid-template-columns: 1fr; }

  /* ---- 📥 the inbox list on a phone (v106): sender · date small on top, subject big under, box left of the dot, chips at the right edge ---- */
  body.list-center .row { padding: 11px 70px 11px 58px; gap: 1px 8px; justify-content: flex-start; align-items: baseline; }
  body.list-center .row .rfrom { order: 1; flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; }
  body.list-center .row .rdate { order: 1; flex: none; font-size: 12px; font-weight: 600; }
  body.list-center .row .rmain { order: 2; text-align: left; margin: 0; gap: 4px 8px; }
  body.list-center .row .rsubj { font-size: 17px; font-weight: 800; max-width: 100%; white-space: normal; line-height: 1.25; }
  body.list-center .row .rsnip { display: none; }
  body.list-center .row .selbox { left: 14px; right: auto; width: 17px; height: 17px; }
  body.list-center .row .udot { left: 40px; }
  body.list-center .row .rchips { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
  body.list-center .row .chip.who { order: 3; }
  .rchips .chip.att { display: inline-block; }
  body.roomy .row .rsubj { font-size: 17px; }
  /* the day header: TUESDAY on one line, SEP 29 on the next */
  .day-divide { flex-wrap: wrap; gap: 0 10px; padding: 20px 12px 8px; justify-content: center; }
  .day-divide .dd-day { font-size: 22px; letter-spacing: .12em; flex-basis: 100%; text-align: center; }
  .day-divide .dd-dash { display: none; }
  .day-divide .dd-date { font-size: 22px; letter-spacing: .12em; flex-basis: 100%; text-align: center; }
  /* every category on one line: the emoji and its count; the name shows under the one you're in */
  .views { flex-wrap: nowrap; gap: 0; padding: 8px 4px 0; margin-bottom: 8px; justify-content: space-between; overflow-x: auto; scrollbar-width: none; } /* 8px up top so the count badges aren't clipped by the scroll box */
  .views::-webkit-scrollbar { display: none; }
  .views button { min-width: 0; flex: 1 0 30px; padding: 4px 1px 2px; }
  .views button .ch-ico { font-size: 19px; }
  .views button .ch-lab { display: none; }
  .views button.active .ch-lab { display: block; font-size: 8.5px; white-space: nowrap; }
  .views button .ch-icow .count { right: -10px; top: -6px; }
  .inbox-line { gap: 6px; }

  /* ---- 📖 reading on a phone (v106): the email gets the whole screen ---- */
  .read-overlay { top: 0 !important; z-index: 50; border-top: none; }
  .read-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 8px; }
  #backBtn { order: 1; border: none; padding: 4px 8px; font-size: 20px; }
  #backBtn .bk-word { display: none; }
  .read-door { display: block; order: 2; flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 8px; border: 1.5px solid var(--line); border-radius: 12px; color: var(--ink); }
  .read-door.dropover { border-color: var(--accent); }
  .acts-btn { display: block; order: 3; font-size: 24px; line-height: 1; padding: 0 10px; color: var(--ink); }
  .acts-btn.on { color: var(--accent); }
  #openedBy { display: none; }
  .nav-arrows { order: 4; flex-basis: 100%; justify-content: center; gap: 12px; }
  .nav-btn.arr { padding: 2px 18px; }
  .r-actions { display: none; }
  body.acts-open .r-actions {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; margin: 0; padding: 8px; /* nowrap: a tall list scrolls, it never folds into a second column */
    position: fixed; top: var(--acts-top, 52px); right: 8px; z-index: 66; min-width: 210px; max-width: calc(100vw - 16px); max-height: 72vh; overflow-y: auto;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.22);
    animation: rowdrop .14s ease-out;
  }
  body.acts-open .r-actions .act { text-align: left; font-size: 12.5px; padding: 9px 12px; margin-left: 0; } /* .act.util's margin-left:auto is a row trick — in the column every verb lines up */
  .r-actions .act.phone-only { display: block; }
  .r-actions .mini-menu.assign { position: static; margin: 2px 0 6px; }
  .notes-fab { display: none !important; }
  .reading { padding: 12px 14px 70px; }
  .reader-sticky { top: -8px; padding-top: 4px; }
  .reader-sticky .orig-wrap.top { margin-top: 2px; }
  .mast-line { gap: 4px 10px; }
  .ptools { position: static; flex-direction: row; justify-content: flex-end; margin-top: 2px; }
  .notes-panel { width: 100%; max-width: 100%; }
  .cal-sheet { top: 8px; transform: translateX(-50%); }

  /* ---- 🗄 the category drawer: the cabinet button beside NEW EMAIL, or swipe in from the left edge ---- */
  .cat-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; padding: 6px 0; font-size: 15px; border-width: 1.5px; }
  .new-email { padding: 7px 10px; }

  /* ---- the top bar on a phone: the logo never wraps, the ✨AI keeps its width, ? and ⤢ step aside ---- */
  .brand { flex: none; white-space: nowrap; }
  .brand-cell { gap: 6px; }
  .brand-text { font-size: 22px; letter-spacing: 2px; }
  .brand-text .z0::after { content: ''; position: absolute; left: 50%; top: 13%; height: 74%; width: .085em; margin-left: -.0425em; background: var(--ink); transform: rotate(30deg); border-radius: 1px; }
  #helpBtn { display: none; } /* the ? sheet lives in the profile menu on a phone; ⤢ stays */
  .icon-btn { width: 30px; height: 30px; font-size: 13px; }
  .icon-btn.ai-top { width: auto; padding: 0 6px; } /* never squeezed back to the icon width */
  .me-chip { width: 32px; height: 32px; font-size: 10px; }
  .top-actions { gap: 3px; }
  .brand-text { font-size: 20px; }
  .brand-tld { font-size: 12.5px; }

  /* ---- 🔎 search on a phone: a small glass at the right end of the firm-name line; tap → the box opens as its own line under the chips ---- */
  .az.right { display: block; position: absolute; right: 6px; top: 3px; flex: none; width: auto; } /* out of the flow — TASKS/CLIENTS/CALENDAR centre on the true middle */
  .search-btn { display: flex; width: 30px; height: 30px; }
  body.search-open .az.right { position: static; display: flex; flex-basis: 100%; order: 5; justify-content: center; align-items: center; gap: 6px; }
  body.search-open .az.right .search-box { display: block; flex: 1; width: auto; max-width: none; font-size: 15px; padding: 9px 12px; }
  body.search-open .search-btn { background: var(--ink); color: var(--bg); }
  /* the frame hugs the name (not the whole line) so the 🔎 at the right end never sits on its border */
  .acct-center { border: none; padding: 0; }
  .acct-line { font-size: 18px; border: 1.5px solid var(--line); border-radius: 14px; padding: 4px 14px; max-width: calc(100% - 76px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---- rows: read = medium, unread = bold (v107); the boldness slider adds on top (v108) ---- */
  body.list-center .row .rsubj, body.list-center .row .rfrom { font-weight: min(900, calc(600 + var(--bwx, 0))); }
  body.list-center .row.unread .rsubj, body.list-center .row.unread .rfrom { font-weight: min(900, calc(800 + var(--bwx, 0))); }
  .my-panel { right: 6px; left: 6px; width: auto; }
  .mast-meta { gap: 6px 10px; }

  /* ---- the pinned subject block sits flush at the top — nothing scrolls past above it ---- */
  .reading { padding-top: 0; } /* sticky sticks to the scroll pane's content edge — any top padding here becomes a see-through strip */
  .reader-sticky { top: 0; padding-top: 10px; }
  .rule-plus { display: none; } /* categories live in the actions menu on a phone */
  .acts-btn { font-size: 12px; font-weight: 800; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; }
  .acts-btn .acts-dots { font-size: 22px; line-height: 1; }
  .r-actions .acts-cats { display: flex; min-width: 0; }

  /* ---- the selection sheet on a phone: a bottom sheet, folded to one line until asked ---- */
  body.reader-open .sel-bar, body.chat-open .sel-bar { display: none; }
  .sel-bar {
    left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; width: auto;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    max-height: 72vh; overflow-y: auto;
  }
  .sel-bar .sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .sel-bar .sb-head .sn { font-size: 14px; }
  .sel-bar .sb-fold { display: inline-flex; margin-left: auto; font-size: 16px; padding: 4px 10px; }
  .sel-bar .sb-big { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .sel-bar .sb-big button { width: 100%; max-width: 300px; padding: 9px 12px; font-size: 13px; }
  .sel-bar .sel-tags { justify-content: center; }
  .sel-bar .sb-task-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
  .sel-bar .sb-task { width: min(100%, 260px); }
  .sel-bar.folded > *:not(.sb-head) { display: none; }
}

/* the font list — a real specimen book, one face per row */
#allFontRow { display: flex; flex-direction: column; gap: 3px; }
#allFontRow .font-card { display: flex; align-items: center; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 9px 14px; border-radius: 10px; }
#allFontRow .font-card .aa { font-size: 20px; width: 34px; }
#allFontRow .font-card .fl { font-size: 16px; }
/* roomy rows — the armchair inbox */
body.roomy .row { padding-top: 13px; padding-bottom: 13px; font-size: 14.5px; }
body.roomy .row .rfrom { font-size: calc(var(--rfrom-fs, 13.5px) * 1.11); }
body.roomy .row .rsubj { font-size: calc(var(--rsubj-fs, 13.5px) * 1.11); }

/* ---- v109 ---- */
.resp-box textarea, .c-body, #focusTa { font-weight: var(--bw, inherit); -webkit-text-stroke: var(--bstroke, 0px) currentColor; letter-spacing: var(--ls); } /* what you type looks like what you read */
.prefs-head { flex-wrap: wrap; row-gap: 2px; }
.prefs-title { color: var(--review); font-size: 24px; letter-spacing: .22em; flex: 1; }
.prefs-tag { flex-basis: 100%; font-size: 12px; color: #6a6a6a; letter-spacing: .04em; }
[data-theme="chambers"] .prefs-tag { color: #9aa0ad; }
.fmt-drawer .fold-btn#prefsMoreBtn { margin: 6px 0 10px; }
.sliders-top { margin-top: 4px; }
.seg-row.sub > span { font-size: 10px; color: #ff8a00; opacity: .8; }
.seg-row.sub .seg button { font-size: 10px; padding: 4px 2px; }
.grey-row { justify-content: flex-start; margin-bottom: 6px; }
.out-sig-seg { max-width: 220px; }
/* the font book as one scrolling list — every face in itself, its maker under it */
.font-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; }
.font-list .fl-sec { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); padding: 8px 12px 2px; position: sticky; top: 0; background: var(--panel); }
.font-list .fl-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.font-list .fl-row:hover { background: var(--sel); }
.font-list .fl-row.sel { box-shadow: inset 3px 0 0 var(--accent); background: var(--sel); }
.font-list .fl-aa { font-size: 20px; width: 34px; flex: none; }
.font-list .fl-nm { font-size: 16px; display: block; }
.font-list .fl-cr { font-size: 10px; color: var(--ink-dim); font-family: var(--ui-font); display: block; margin-top: 1px; }
#fontFilter { margin-top: 6px; }
.ttt-short { display: none; }
.my-tag { color: var(--accent); letter-spacing: .08em; margin-right: 6px; }
.mini-menu.undo { min-width: 200px; }
.mini-menu.undo .mm-title { color: var(--ink); }
.r-actions .mini-menu.undo { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.story .st-more { font-size: 11px; font-weight: 800; color: var(--accent); text-decoration: underline dotted; }
@media (max-width: 760px) {
  .ttt-long { display: none; } .ttt-short { display: inline; }
  /* a desktop-sized margin must not eat a phone — clamp it to 8vw here */
  .reading { padding-left: calc(14px + min(var(--padx, 0px), 8vw)); padding-right: calc(14px + min(var(--padx, 0px), 8vw)); }
  body.list-center .row { padding-left: calc(58px + min(var(--padx, 0px), 8vw)); padding-right: calc(70px + min(var(--padx, 0px), 8vw)); }
  .list-head, .day-divide { padding-left: calc(12px + min(var(--padx, 0px), 8vw)); padding-right: calc(12px + min(var(--padx, 0px), 8vw)); }
  body.list-center .row .rsubj { font-size: calc(var(--rsubj-fs, 13.5px) * 1.26); }
  body.list-center .row .rfrom { font-size: calc(var(--rfrom-fs, 13.5px) * 0.93); }
  body.list-center .row .rdate { font-size: calc(var(--rdate-fs, 12px) * 1); }
  .r-actions .mini-menu.undo { position: static; transform: none; margin: 2px 0 6px; }
}

/* ---- v110 ---- */
.rule-plus { display: none !important; } /* retired: categories live with the actions on every screen */
/* the verbs ride the nav line on a desktop: between ← INBOX and the arrows, two short rows when the window is narrow */
.read-nav .opened-by { min-width: 0; }
.read-nav .r-actions { flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; row-gap: 4px; margin: 0; padding: 0; border: 0; width: auto; max-width: 62vw; }
.read-nav .r-actions .act { padding: 3px 8px; font-size: 10px; }
.read-nav .r-actions .act.util { margin-left: 0; } /* no auto margin — the wrapped second row stays centred */
.read-nav .r-actions .act.phone-only { display: none; }
.read-nav .r-actions .mini-menu.undo, .read-nav .r-actions .mini-menu.assign { top: calc(100% + 6px); }
/* categories on the desktop: a 🗂 button at the end of the verb row, the block drops as a popover */
.cats-btn { white-space: nowrap; }
.r-actions .acts-cats.open { display: flex; }
.read-nav .r-actions .acts-cats { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: min(640px, 90vw); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.18); padding: 10px 12px; z-index: 70; margin: 0; }
/* Hebrew reads right-to-left: by its own words, or everywhere with the Prefs switch */
.row .rsubj.rtl, .r-body p.rtl, .bubble p.rtl { direction: rtl; text-align: right; }
/* a Hebrew subject sits on the mirrored side of a left/right header choice; a centred header stays centred */
body[data-hs="left"] .mast-top.rtl { justify-content: flex-end; }
body[data-hs="right"] .mast-top.rtl { justify-content: flex-start; }
body.rtl .mast-top, body.rtl .mast-meta, body.rtl .story, body.rtl .r-body p, body.rtl .bubble p, body.rtl .row .rsubj, body.rtl .row .rfrom, body.rtl .resp-box textarea, body.rtl .c-body, body.rtl #focusTa, body.rtl .chat-ce, body.rtl .cm-text { direction: rtl; }
body.rtl .r-body p, body.rtl .bubble p, body.rtl .row .rsubj { text-align: right; }
body.rtl .resp-box textarea, body.rtl .c-body, body.rtl #focusTa, body.rtl .chat-ce { unicode-bidi: isolate; } /* dir=auto's plaintext mode would otherwise ignore the forced direction */
@media (max-width: 760px) {
  .cats-btn { display: none; } /* the ⋮ menu already shows the categories */
  .r-actions .acts-cats { position: static; transform: none; width: auto; box-shadow: none; border: 0; border-top: 1px dashed var(--line); border-radius: 0; padding: 8px 4px 2px; }
}

/* ======================= v111 — the last polish stack ======================= */
/* 1. "✓ calendared" in the story is a door */
.story .sv.cal-link { cursor: pointer; }
.story .sv.cal-link b { text-decoration: underline dotted; text-underline-offset: 2px; }
.story .sv.cal-link:hover b { color: var(--accent); }
/* 2. the date is the calendar door — the clock line (desktop), the TODAY header (phone); the chip retired */
.date-bar { pointer-events: auto; cursor: pointer; border-radius: 8px; padding: 2px 8px; } /* the clock takes taps now — it was a label before */
.date-bar:hover .dtime { color: var(--accent); }
.topbar { position: relative; }
.topbar > .mini-menu.cal { left: 50%; transform: translateX(-50%); right: auto; top: calc(100% + 2px); min-width: 320px; max-width: 92vw; text-align: left; cursor: default; z-index: 90; }
.day-divide { position: relative; }
.day-divide.cal-door { cursor: pointer; }
.day-divide .mini-menu { left: 50%; transform: translateX(-50%); right: auto; top: calc(100% - 4px); min-width: 300px; max-width: 94vw; font-size: 12.5px; letter-spacing: 0; font-weight: 500; text-transform: none; text-align: left; cursor: default; }
.day-divide.bump { animation: chbump .5s ease-out 1; }
.date-bar.bump { animation: dbump .5s ease-out 1; } /* the clock is centred by a transform — its pulse carries that along */
@keyframes dbump { 30% { transform: translateX(-50%) scale(1.12); } }
/* 3. the TAG column is emoji — the words ride the hover; + ends the stack */
.rtag { display: flex; flex-wrap: nowrap; gap: 2px 4px; align-items: center; justify-content: flex-start; align-self: center; cursor: pointer; }
.rtag-em { font-size: 15px; line-height: 1; }
.rtag-more { font-size: 9.5px; font-weight: 800; color: var(--ink-dim); }
.rtag-btn.has { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink-dim); font-size: 11px; padding: 0; display: inline-flex; letter-spacing: 0; }
.rtag-btn.has:hover { border-color: var(--review); color: var(--review); }
.rtag:hover .rtag-btn.has { border-color: var(--review); color: var(--review); }
.rtag .mini-menu, .rtag .tag-bar { cursor: default; }
/* 4. three headers say it with one glyph */
.list-head span.hcol.hcol-em { text-align: center; font-size: 13px; letter-spacing: 0; }
.rthread, .rprint, .ratt { text-align: center; }
.rthread { font-size: 11px; }
.rprint { font-size: 13px; }
.ratt-btn { padding: 1px 4px; font-size: 11px; }
/* 5. TEAM above the faces — one press lights them all */
.roster { flex-direction: column; gap: 3px; }
.roster-faces { display: flex; gap: 9px; align-items: center; justify-content: center; }
.roster-team { font-size: 9.5px; font-weight: 800; letter-spacing: .22em; color: var(--ink-dim); padding: 1px 8px; border-radius: 7px; border: 1px solid transparent; }
.roster-team:hover { color: var(--ink); border-color: var(--line); }
.roster-team.on { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.roster .vb.lit { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--ink); transform: scale(1.08); }
.roster .vb.away.lit { opacity: .75; }
.ts-lane.team { background: var(--ink); }
/* 6 + 12. the tasks head: TASKS big and centred, the tag under it, the drop hint on one faint line */
.my-head { align-items: flex-start; padding: 12px 10px 9px 14px; }
.my-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding-left: 28px; } /* the ✕ is 28px — the title centres on the panel, not on the gap */
.my-head .my-title b { font-size: 17px; letter-spacing: .22em; }
.my-tag { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--accent); margin: 0; }
.my-tag .z0 { position: relative; display: inline-block; }
.my-tag .z0::after { content: ''; position: absolute; left: 50%; top: 14%; height: 72%; width: .09em; margin-left: -.045em; background: currentColor; transform: rotate(30deg); border-radius: 1px; }
.my-hint { flex: none; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; color: var(--ink-dim); }
.my-zero-hint { padding: 0 18px 16px; text-align: center; color: var(--ink-dim); font-size: 10.5px; }
/* 13. FROM THE TEAM rows carry the asker's face */
.my-row .vb.ask { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* 8. older days wear the deep shade of your colour — today the bright one */
.day-divide .dd-day, .day-divide .dd-date { color: var(--accent-deep, var(--ink)); }
.day-divide.dd-today .dd-day, .day-divide.dd-today .dd-date { color: var(--accent); }
/* 10. desktop rows are the subject alone — one line, every row the same height; the chips cut with it */
@media (min-width: 761px) {
  .rmain { flex-wrap: nowrap; overflow: hidden; }
  .rmain .rsubj { flex: 0 1 auto; min-width: 40px; max-width: 100%; }
  .rmain .rchips, .rmain .chip { flex: none; flex-wrap: nowrap; white-space: nowrap; } /* the chips never fold — the subject gives way first */
}
.row .chip.note { display: inline-block; margin: 0; }
@media (min-width: 761px) { .row .rmain .chip { line-height: 12px; padding: 1px 7px; } } /* chips sit inside the text line — a row with chips and a row without stand the same height */ /* the ✎ chip shares a class name with the reader's note block — that block's margin made every commented row taller */
@media (min-width: 761px) {
  .row .rsnip { flex: 1 1 60px; }
}
/* 11. the meta line is one touching cluster; ⋯ keeps the edge */
.mast-meta { position: relative; padding: 0 30px; } /* symmetric — the centred cluster lines up under the subject */
body[data-hm="left"] .mast-meta { padding-left: 0; }
.mast-cluster { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: inherit; }
.mast-cluster .orig-wrap.top { display: inline-flex; gap: 8px; align-items: center; }
.mast-cluster .from-val { gap: 0; }
.mast-date { color: var(--accent); font-weight: 600; }
.mast-meta > .act.util { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
body[data-hm="left"] .mast-cluster { justify-content: flex-start; } body[data-hm="right"] .mast-cluster { justify-content: flex-end; }
@media (max-width: 760px) {
  .mast-meta { padding: 0 26px; }
  .day-divide.slim { padding-top: 10px; padding-bottom: 6px; }
  .day-divide.slim .dd-day, .day-divide.slim .dd-date { font-size: 16px; }
  .roster { flex-direction: column; }
}
@media (max-width: 760px) {
  .rtag { display: none; } /* the phone row never had a tag cell — the emoji column is a desktop thing */
  .roster-row { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 16px); gap: 8px 12px; }
  .roster-row .quick-task { width: calc(100vw - 150px); max-width: 250px; }
}

/* ======================= v112 — the front door · tell 0N ======================= */
.pin-home { text-decoration: none; color: inherit; display: inline-block; cursor: pointer; }
.help-row.link { cursor: pointer; text-align: left; width: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; }
.help-row.link:hover kbd { background: var(--accent); color: #fff; }
.tell-sheet { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 97; width: 440px; max-width: 94vw; max-height: 90vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.25); padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.tell-sub { font-size: 11.5px; color: var(--ink-dim); line-height: 1.4; margin-top: -4px; }
.tell-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.tell-sheet textarea.c-field { min-height: 96px; resize: vertical; }
.tell-drop { border: 1.5px dashed var(--line); border-radius: 10px; padding: 12px; text-align: center; font-size: 12px; color: var(--ink-dim); cursor: pointer; }
.tell-drop.over { border-color: var(--accent); color: var(--accent); }
.tell-drop.has { border-style: solid; border-color: var(--accent); color: var(--ink); }

/* ======================= v113 ======================= */
/* 1. today as a column of hours */
.cal-day { padding: 8px 10px 6px; border-bottom: 1px solid var(--line); }
.cal-day-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cal-day-head b { font-size: 11px; letter-spacing: .16em; color: var(--accent); }
.cal-day-date { font-size: 11px; color: var(--ink-dim); }
.cal-allday { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.cal-hours { position: relative; }
.cal-hr { display: flex; align-items: stretch; height: 22px; border-top: 1px solid var(--line); }
.cal-hr-lab { flex: none; width: 44px; font-size: 9.5px; color: var(--ink-dim); padding-top: 2px; letter-spacing: .04em; }
.cal-slot { flex: 1; min-width: 0; display: flex; gap: 3px; align-items: center; cursor: pointer; padding: 1px 2px; overflow: hidden; }
.cal-slot:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mini-menu .cal-ev { font-size: 10.5px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 6px; padding: 1px 7px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mini-menu .cal-ev:hover { background: var(--accent); filter: brightness(1.1); }
.mini-menu .cal-ev.all, .mini-menu .cal-ev.all:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.cal-evening .cal-hr { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.mini-menu .cal-fold { display: block; width: 100%; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--ink-dim); padding: 4px 0 2px; border-top: 1px solid var(--line); border-radius: 0; }
.mini-menu .cal-fold:hover { color: var(--ink); background: none; }
.acct-row > .mini-menu.cal { left: 50%; transform: translateX(-50%); right: auto; } /* the chip's menu lands under the row's middle, not the far left */
.cal-now { position: absolute; left: 40px; right: 0; height: 0; border-top: 2px solid var(--accent); pointer-events: none; z-index: 2; }
.cal-now::before { content: ''; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.cal-now-t { position: absolute; right: 0; top: -14px; font-size: 9.5px; font-weight: 800; color: var(--accent); background: var(--panel); padding: 0 4px; border-radius: 4px; }
.mini-menu.cal { min-width: 340px; }
.day-divide .dd-now { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--accent); flex-basis: 100%; text-align: center; margin-top: 2px; }
/* 3. breathing room in the masthead */
.mast-line { gap: calc(6px + var(--padx, 0px) / 10); }
.mast-meta { margin-top: 4px; }
/* 4. the story is a strip — seen and done, in a soft band of your colour */
.story { margin: 10px 0 4px; padding: 7px 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.story.foot { margin-top: 22px; margin-bottom: 8px; max-width: var(--colw); } /* the foot strip follows the letter column */
.reading-inner > .story.foot { margin-left: auto; margin-right: auto; }
body[data-bl="left"] .reading-inner > .story.foot { margin-left: 0; margin-right: auto; }
body[data-bl="right"] .reading-inner > .story.foot { margin-left: auto; margin-right: 0; }
.reader-sticky > .story:first-child { margin-top: 0; margin-bottom: 10px; }
/* 5. detailed rows: subject, then two lines of the email */
.row.detailed .rmain { flex-wrap: wrap; align-items: flex-start; }
.row.detailed .rline { flex: 1 0 100%; min-width: 0; display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; overflow: hidden; }
.row.detailed .rline .rsubj { flex: 0 1 auto; min-width: 40px; }
.row.detailed .rline .rchips, .row.detailed .rline .chip { flex: none; }
.row .rdet { flex: 1 0 100%; text-align: start; font-size: 12.5px; line-height: 1.3; height: 2.6em; color: var(--ink-dim); white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 2px; }
.row.unread .rdet { color: var(--ink); }
@media (min-width: 761px) { .row.detailed .rmain { overflow: hidden; } body.list-center .row .rdet { text-align: center; } }
body.rtl .row .rdet { direction: rtl; }
@media (max-width: 760px) { body.list-center .row .rdet { display: -webkit-box; order: 3; } }
/* 6. the react + */
.react-add { opacity: .35; font-size: 13px; font-weight: 800; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-dim); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.react-add:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }
@media (pointer: coarse) { .react-add { opacity: .7; border-color: var(--ink-dim); } }
.react-pick { display: inline-flex; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 2px 6px; box-shadow: 0 8px 24px rgba(0,0,0,.14); animation: rowdrop .12s ease-out; }
.react-pick button { font-size: 16px; padding: 2px 4px; border-radius: 8px; }
.react-pick button:hover { background: var(--sel); transform: scale(1.2); }
/* 7 + 8. office settings in bands; the letter */
.office-settings { grid-template-columns: 1fr; gap: 12px; }
.os-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.os-top .os-col { min-width: 0; }
.os-mail #gmailBox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.os-mail .wide-btn { margin-top: 0; }
.os-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.os-tools .c-field { margin: 0; width: auto; }
.os-tools .out-banner { font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.letter { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px; line-height: 1.5; box-shadow: 0 8px 30px rgba(0,0,0,.08); font-family: inherit; }
[data-theme="chambers"] .letter { background: #fdfcf8; }
.letter .lt-subj { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #999; margin-bottom: 12px; font-family: var(--ui-font); }
.letter .lt-body p { margin: 0 0 10px; }
.letter .lt-edit { display: block; width: 100%; box-sizing: border-box; border: 1px dashed transparent; border-radius: 6px; background: transparent; font: inherit; color: #555; resize: none; padding: 3px 6px; margin: 10px 0 0; line-height: 1.45; overflow: hidden; }
.letter .lt-edit::placeholder { color: #b5b5b5; }
.letter .lt-edit:hover { border-color: #ddd; }
.letter .lt-edit:focus { border-color: var(--accent); background: #fafafa; outline: none; }
.letter .lt-usig { text-align: var(--lt-ual, left); }
.letter .lt-osig { text-align: var(--lt-al, left); min-height: 4.2em; }
.letter .lt-banner { margin-top: 10px; cursor: pointer; text-align: var(--lt-al, left); position: relative; }
.letter .lt-banner img { max-height: 54px; max-width: 320px; display: inline-block; }
.letter .lt-banner.off img { opacity: .3; }
.letter .lt-ban-hint { display: block; border: 1px dashed #ddd; border-radius: 8px; padding: 10px; text-align: center; font-size: 11px; color: #999; font-family: var(--ui-font); }
.letter .lt-banner:hover .lt-ban-hint { border-color: var(--accent); color: var(--accent); }
.letter .lt-ban-x { position: absolute; top: -6px; right: 0; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #888; display: none; }
.letter .lt-banner:hover .lt-ban-x { display: inline-flex; align-items: center; justify-content: center; }
@media (hover: none), (pointer: coarse) { .letter .lt-ban-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 13px; top: -10px; } }
#bossDesk { position: relative; }
.code-pop { left: 50%; right: auto; top: 40px; transform: translateX(-50%); min-width: 260px; }
.code-big { font: 800 34px Menlo, monospace; letter-spacing: .3em; text-align: center; color: var(--accent); padding: 6px 0 2px; }
.os-people .person.gone .person-name { color: var(--ink-dim); font-weight: 500; }
.os-letter .wide-btn:disabled { opacity: .4; cursor: default; }
.os-people .person { display: flex; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px dashed var(--line); font-size: 13px; }
.os-people .person .vb { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.os-people .person-name { flex: 1; font-weight: 600; }
.os-people .my-act { font-size: 11.5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-dim); }
.os-people .my-act:hover { border-color: var(--ink); color: var(--ink); }
.os-people .my-act.no:hover { border-color: #e5252c; color: #e5252c; }
@media (max-width: 760px) { .os-top { grid-template-columns: 1fr; } .letter { padding: 16px; } .mini-menu.cal { min-width: 0; } }
@media (max-width: 760px) { .acct-row > .mini-menu.cal, .views-strip .mini-menu.cal { left: 8px !important; right: 8px !important; width: auto; min-width: 0; max-width: none; transform: none; } } /* v113: the chip's menu fills the phone width */

/* ======================= v114 ======================= */
/* 2. the subject wraps, never cuts (two lines; three on a phone) */
.mast-subj { white-space: normal; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; }
@media (max-width: 760px) { .mast-subj { -webkit-line-clamp: 3; } }
/* 3. sender · time · show original belong to the subject; the air sits between them and the story */
.mast-line { gap: 2px; }
.mast-meta { margin-top: 2px; }
.story { margin-top: 14px; }
.reader-sticky > .story:first-child { margin-top: 0; }
/* 4. the strip never leaves the screen */
.story { max-width: min(var(--inner-w, 100%), 100%); box-sizing: border-box; overflow-wrap: anywhere; }
.story.foot { max-width: min(var(--colw), 100%); }
/* 6. the letter in Hebrew */
.letter.heb { direction: rtl; }
.letter.heb .lt-subj { letter-spacing: 0; }
.letter.heb .lt-edit { direction: rtl; }
#ltLang button { min-width: 36px; }

/* ======================= v115.1 — the envelope and the magnifying categories ======================= */
.drag-env { position: fixed; top: -200px; left: -200px; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); pointer-events: none; z-index: -1; letter-spacing: 0; } /* rendered off-screen so the browser can paint it as the drag image */
.views button, .inbox-row button { transition: transform .12s ease-out, background .12s; }
.views button.dropover, .inbox-row button.dropover { transform: scale(1.3); background: color-mix(in srgb, var(--accent) 14%, transparent); border-bottom-color: var(--accent); z-index: 3; position: relative; }
.drawer button.dropover, .cat-drawer button.dropover { transform: scale(1.15); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.drag-env { overflow: visible; }
.drag-env .env-n { position: absolute; top: -6px; right: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #3b6cff; color: #fff; border: 2px solid #fff; font: 800 12px/20px var(--ui-font); text-align: center; letter-spacing: 0; box-shadow: 0 4px 12px rgba(0,0,0,.25); } /* how many are riding along */

/* the day header sits in the middle of its band (was 30px above, 12px below) */
.day-divide { padding-top: 20px; padding-bottom: 20px; }
body.compact .day-divide { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 760px) { .day-divide { padding-top: 14px; padding-bottom: 14px; } }

/* v115.2: printing an open email — no empty first page: the app shell stops being a 100vh column, the list and side panels go, the sticky head sits still */
@media print {
  .app { height: auto !important; display: block !important; }
  .main, .chat-panel, .chat-scrim, .my-panel, .cal-sheet, .tell-sheet, .help-sheet, .pal-wrap, .undo-bar, .roster-row, #chatClose, .sel-bar, .drag-env, .ai-panel, .live-prev { display: none !important; }
  .read-overlay { position: static !important; inset: auto !important; height: auto !important; overflow: visible !important; }
  .reader-sticky { position: static !important; top: auto !important; padding-top: 0 !important; margin: 0 0 10px !important; }
  .story { background: none !important; padding: 0 !important; }
  html, body { height: auto !important; overflow: visible !important; }
}

/* v115.2: the conversation keeps the letter's column — one page, one left edge */
.convo > h3, .convo > .reply-bubble, .convo > .reply-btn, .convo > .resp-box, .reading-inner > .tchat, .story.foot { max-width: var(--colpx, var(--colw)); }

/* v115.3: REPLY · to · cc · bcc sit centred over the box, inside the letter's column */
.reply-line { max-width: var(--colpx, var(--colw)); margin-left: auto; margin-right: auto; justify-content: center; }
.reply-line .rcpt-box { flex: 0 1 auto; min-width: 0; }

/* ======================= v116 ======================= */
/* my words */
.words-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.word-row { display: flex; gap: 6px; align-items: center; }
.word-row .c-field { margin: 0; flex: 1; min-width: 0; font-size: 12px; padding: 5px 8px; }
.word-row .c-field:first-child { flex: 0 0 34%; }
.word-arrow { color: var(--ink-dim); font-size: 12px; }
.words-list .my-act { align-self: flex-start; font-size: 11.5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-dim); }
.os-mail #offPhone { margin-top: 6px; }
/* filed mail stays, tinted */
.row.filed { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.row.filed:hover, .row.filed.sel { background: var(--sel); }
/* phone: boxes hidden until a press-and-hold */
@media (max-width: 760px) {
  body.list-center:not(.sel-mode) .row .selbox { display: none; }
  body.list-center:not(.sel-mode) .row { padding-left: 34px; }
  body.list-center:not(.sel-mode) .row .udot { left: 14px; }
  body.sel-mode .row.sel-on { background: var(--sel); }
  .day-divide .dd-now { flex-basis: auto; font-size: 22px; letter-spacing: .12em; color: var(--accent-deep, var(--accent)); margin: 0 0 0 12px; }
  .day-divide.cal-door .dd-day:first-child { flex-basis: auto; }
}
/* channel chips in chat */
.chan-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--accent); border: 1px solid var(--accent); border-radius: 9px; padding: 0 7px; margin: 0 1px; vertical-align: baseline; line-height: 1.5; }
.chan-chip:hover { background: var(--accent); color: #fff; }
.chan-chip .chan-n { background: var(--accent); color: #fff; border-radius: 8px; padding: 0 5px; font-size: 10px; }
.chan-chip:hover .chan-n { background: #fff; color: var(--accent); }
.hash-pick { bottom: calc(100% + 6px); top: auto; left: 46px; right: auto; min-width: 180px; }
/* the docket (print only) */
.docket { display: none; }
@media print {
  body.print-docket > *:not(.docket) { display: none !important; }
  body.print-docket .docket { display: block; font: 11.5px Georgia, 'Times New Roman', serif; color: #000; padding: 0; }
  .docket h2 { font: 800 18px Menlo, monospace; letter-spacing: .14em; margin: 18px 0 2px; }
  .docket .dk-date { font-size: 10.5px; color: #555; margin-bottom: 8px; }
  .docket table { width: 100%; border-collapse: collapse; margin-bottom: 14px; page-break-inside: auto; }
  .docket th { text-align: left; font: 800 9.5px Menlo, monospace; letter-spacing: .12em; border-bottom: 1.5px solid #000; padding: 4px 6px; }
  .docket td { padding: 5px 6px; border-bottom: 1px solid #ddd; vertical-align: top; }
  .docket td:nth-child(2) { font-weight: 700; }
  .docket tr.done td { color: #888; text-decoration: line-through; }
}
/* AIM mode */
.convo.bubbles .reply-bubble { max-width: min(78%, var(--colpx, var(--colw))); margin-left: auto; margin-right: 0; border-radius: 16px 16px 4px 16px; color: #fff; border-width: 1px; border-left-width: 1px; }
.convo.bubbles .reply-bubble .reply-meta { color: rgba(255,255,255,.8); }
.convo.bubbles .reply-bubble .reply-text, .convo.bubbles .reply-bubble .sig-block { color: #fff; }
.convo.bubbles .reply-bubble .sig-block { border-top-color: rgba(255,255,255,.35); }
.convo.bubbles > h3 { text-align: center; }
.convo.bubbles .resp-box textarea { border-radius: 18px; min-height: 48px; }
body[data-bl="left"] .convo.bubbles .reply-bubble { margin-left: auto; margin-right: 0; }

/* v116.1: the tasks block rides the head when the story leads it */
.reader-sticky > .tasks-wrap { max-width: var(--inner-w); margin: 0 auto 8px; }
.reader-sticky > .tasks-wrap:empty { display: none; }

/* v116.2 — the Settings tab scrolls inside the frame (a real office closing is long; the grid used to run out the bottom of the panel) */
.chat-panel .office-settings { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* v116.3 — the brain box tells you it is on */
.ai-state { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-weight: 700; margin-bottom: 2px; }
.ai-state .ai-state-what { color: var(--ink); opacity: .75; font-weight: 600; }
#aiKey.haskey { background: var(--sel); }
#aiKey.haskey::placeholder { color: var(--ink-dim); letter-spacing: .05em; }

/* v116.6 — show original: the remote-pictures ask sits above the frame */
.orig-pics { display: block; margin: 0 auto 6px; font-size: 11px; }

/* v116.8 — agenda lines open the calendar */
.ag-row { cursor: pointer; border-radius: 6px; padding: 1px 6px; margin: 0 -6px; }
.ag-row:hover { background: var(--sel); }
.ag-row:hover .ag-what { text-decoration: underline; text-underline-offset: 3px; }

/* v116.9 — show original + STAY on one centred line, touching the top of the email */
.orig-line { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 10px 0 0; }
.orig-line .act.util { margin: 0; font-size: 10.5px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; }
.orig-line .orig-stay.on { color: var(--accent); border-color: var(--accent); font-weight: 800; }
.reading-inner > .orig-holder:not(:empty) { margin-top: 6px; }
.orig-line + .orig-holder:empty + .r-body, .orig-line + .orig-holder:empty + .tchat { margin-top: 6px; }

/* v116.10 — the remote-pictures ask is a banner on the frame */
.orig-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; margin-bottom: 6px; border: 1px dashed var(--accent); border-radius: 10px; background: var(--sel); font-size: 11.5px; }
.orig-ask-txt { color: var(--ink); font-weight: 700; }
.orig-ask button { font: 700 11px var(--ui-font); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: var(--panel); cursor: pointer; }
.orig-ask button.orig-pics { background: var(--accent); color: #fff; }
.orig-ask button:hover { filter: brightness(1.08); }