/* hearth Graphite. Dark, calm, plain-language. Customers follow their device: light tokens under .cust when it asks for light. */
:root {
  --bg: #1C1C1F;
  --side: #18181A;
  --card: #212124;
  --card-2: #252529;
  --raise: #2D2D32;
  --line: #2E2E33;
  --line-2: #3B3B41;
  --text: #EDEDEF;
  --text-2: #A3A3AB;
  --text-3: #8B8B93;
  --green: #5BD08A;
  --green-text: #5BD08A;
  --red: #FF7C7C;
  --yellow: #F2C94C;
  --peri: #8E9BFF;
  --mint: #6EDDA6;
  --btn-bg: #EDEDEF;
  --btn-fg: #161618;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.light,
.cust-light {
  --bg: #F6F6F7;
  --side: #EEEEF0;
  --card: #FFFFFF;
  --card-2: #FAFAFB;
  --raise: #E4E4E8;
  --line: #E2E2E6;
  --line-2: #D2D2D8;
  --text: #1B1B1E;
  --text-2: #55555D;
  --text-3: #66666E;
  --green: #22A35A;
  --green-text: #177A43;
  --red: #C93636;
  --yellow: #B7860B;
  --btn-bg: #1B1B1E;
  --btn-fg: #FFFFFF;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { cursor: pointer; }
::placeholder { color: var(--text-3); opacity: 1; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.grow { flex: 1 1 auto; }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* shell */
.app { min-height: 100vh; display: flex; }
.side { flex: 0 0 248px; background: var(--side); border-right: 1px solid var(--line); padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.brand { display: flex; align-items: center; gap: 9px; padding: 2px 10px 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.brand svg { width: 20px; height: 20px; }
.brand .tag { font-size: 12px; font-weight: 500; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 8px; letter-spacing: 0; }
.grp { font-size: 12.5px; color: var(--text-3); padding: 0 10px; margin: 12px 0 2px; }
.item { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border-radius: 8px; text-decoration: none; font-size: 14.5px; color: var(--text); }
.item svg { color: var(--text-2); }
.item:hover { background: var(--card); }
.item.on { background: var(--raise); }
.item .n { margin-left: auto; font-size: 12.5px; color: var(--text-2); }
.sub { margin: 2px 0 6px 17px; padding-left: 10px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.sub a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--text-2); text-decoration: none; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub a.on { background: var(--raise); color: var(--text); }
.side-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 12px 6px 0; display: flex; flex-direction: column; gap: 10px; }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 0 4px; }
.me { display: flex; align-items: center; gap: 10px; }
.av { width: 30px; height: 30px; border-radius: 8px; background: var(--raise); color: var(--text); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none; }
.me .who { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.me .who small { color: var(--text-3); font-size: 12.5px; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { color: var(--text); background: var(--card); }
.newc { margin: 0 2px 6px; justify-content: center; }

.main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 26px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); font-size: 15px; }
.crumbs b { color: var(--text); font-weight: 600; }
.crumbs .sep { color: var(--text-3); }
.content { padding: 6px 26px 32px; display: flex; flex-direction: column; gap: 16px; }
.mbar { display: none; }
@media (max-width: 760px) {
  .side { display: none; }
  .mbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--side); }
  .top { padding: 0 16px; min-height: 46px; }
  .content { padding: 4px 16px 24px; }
}

/* type + parts */
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); min-height: 34px; }
.eyebrow .live { display: inline-flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-3); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--green); }
.dot.warn { background: var(--yellow); }
.dot.bad { background: var(--red); }
.dot.on { background: var(--text); }
.dot.idle { border: 1.5px solid var(--text-2); width: 9px; height: 9px; }
.dot.off { border: 1.5px dashed var(--text-3); width: 9px; height: 9px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.pad { padding: 16px 18px; }
.ttl { font-size: 15px; font-weight: 600; }
.lead { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 112ch; text-wrap: pretty; }
.btn { font: inherit; font-size: 13.5px; font-weight: 600; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); border: 0; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--text); padding: 0 8px; font-weight: 500; }
.btn.ghost svg { color: var(--text-2); }
.btn.line { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn.danger { background: transparent; color: var(--red); border: 1px solid var(--line-2); }
.link { color: var(--text-2); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; min-height: 34px; }
.link:hover { color: var(--text); }
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.seg > * { font: inherit; font-size: 14px; color: var(--text-2); background: transparent; border: 0; border-radius: 7px; min-height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; }
.seg > .on { background: var(--raise); color: var(--text); }
.seg > .dis { color: var(--text-3); text-decoration: line-through; cursor: not-allowed; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.field { font: inherit; font-size: 14px; background: var(--side); border: 1px solid var(--line-2); border-radius: 9px; min-height: 36px; padding: 0 12px; color: var(--text); }
.light .field, .cust-light .field { background: var(--card); }
.field:focus { outline: 2px solid var(--line-2); outline-offset: 1px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 1px 9px; border-radius: 999px; background: var(--raise); color: var(--text-2); white-space: nowrap; }
.pill.ok { background: rgba(91, 208, 138, 0.14); color: var(--green-text); font-weight: 700; letter-spacing: 0.07em; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.stat { display: flex; flex-direction: column; gap: 0; }
.stat .n { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.stat .l { font-size: 13px; color: var(--text-2); }
.bar { height: 5px; background: var(--raise); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.under-red { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.trace { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; line-height: 1.55; }
.trace li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.trace li .dot { margin-top: 7px; }
.trace li.dim { color: var(--text-2); }

/* chat */
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.msg .who { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 14px; }
.msg .who time { color: var(--text-3); font-weight: 400; font-size: 12.5px; }
.msg .body { font-size: 15px; line-height: 1.62; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.msg .body p { margin: 0; }
.msg .av.bot { background: transparent; border: 1px solid var(--line-2); }
.msg .av.bot svg { width: 16px; height: 16px; }
.meta { color: var(--text-3); font-size: 12.5px; }
.code { background: var(--side); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.light .code, .cust-light .code { background: var(--card-2); }
.code .h { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 2px 12px; border-bottom: 1px solid var(--line); color: var(--text-3); font-size: 12px; }
.code pre { margin: 0; padding: 10px 12px; font: 13px/1.55 var(--mono); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd { font: 13px var(--mono); background: var(--raise); border-radius: 6px; padding: 2px 7px; }
.rcard .h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.rcard .row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-top: 1px solid var(--line); text-decoration: none; }
.rcard .row:first-of-type { border-top: 0; }
.composer { border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.composer textarea { display: block; width: 100%; font: inherit; font-size: 15px; background: transparent; color: var(--text); border: 0; resize: none; padding: 14px 16px 6px; }
.composer textarea:focus { outline: none; }
.composer .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px 8px 12px; }
.chip { font: 12.5px var(--mono); color: var(--text-2); background: transparent; border: 1px solid var(--line); border-radius: 7px; min-height: 28px; padding: 0 8px; }
.chip:hover { color: var(--text); border-color: var(--line-2); }
.frame canvas { width: 100%; aspect-ratio: 1; display: block; image-rendering: pixelated; border-radius: 8px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr); } }
/* No side panel: one column of readable width, centred in the room next to the sidebar. */
.split.solo { grid-template-columns: minmax(0, 860px); justify-content: center; }

/* tools graph */
.graph-wrap { overflow-x: auto; }
.graph { min-width: 900px; display: grid; grid-template-columns: 170px 56px 176px minmax(70px, 1fr) minmax(330px, 1.5fr); align-items: center; padding: 8px 0; }
.node { border: 1px solid var(--line-2); border-radius: 12px; background: var(--card-2); padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.node.hub { border: 1.5px solid var(--text); }
.node svg { width: 24px; height: 24px; }
.node b { font-size: 15px; }
.hline { height: 1px; background: var(--line-2); }
.tools-list { display: flex; flex-direction: column; gap: 10px; }
.tool { height: 60px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); padding: 0 14px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.tool.on { border: 1.5px solid var(--text); }
.tool .r1 { display: flex; align-items: center; gap: 10px; }
.tool .r1 b { font-size: 15px; font-weight: 600; }
.tool .r2 { color: var(--text-2); font-size: 13.5px; padding-left: 19px; }
.curves { width: 100%; height: 410px; display: block; }
.curves path { fill: none; stroke: var(--line-2); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.curves path.hot { stroke: var(--green); stroke-width: 1.6; }

/* people */
.list-row { display: grid; grid-template-columns: 34px minmax(160px, 1.1fr) minmax(0, 1.4fr) minmax(150px, auto) auto; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.card > .list-row:first-child, .card > div:first-child > .list-row { border-top: 0; }
.list-row .nm { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.list-row .nm b { font-size: 15px; font-weight: 600; }
.list-row .acts { display: flex; gap: 4px; justify-content: flex-end; }
.av.inv { background: transparent; border: 1.5px dashed var(--line-2); color: var(--text-2); }
@media (max-width: 1000px) { .list-row { grid-template-columns: 34px minmax(0, 1fr); } .list-row > :nth-child(n+3) { grid-column: 2; } .list-row .acts { justify-content: flex-start; } }
.confirm { border: 1px solid rgba(255, 124, 124, 0.45); background: rgba(255, 124, 124, 0.07); border-radius: 10px; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 16px 14px 64px; }

/* usage */
.stats4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats4 > div { padding: 16px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.stats4 > div:nth-child(-n+2) { border-top: 0; }
.stats4 > div:nth-child(odd) { border-right: 1px solid var(--line); }
.chart { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; height: 260px; }
.yax { display: flex; flex-direction: column; justify-content: space-between; color: var(--text-3); font-size: 12px; text-align: right; padding-bottom: 22px; }
.plot { position: relative; display: flex; align-items: flex-end; gap: 10px; padding-bottom: 22px; background: repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 25%); background-size: 100% calc(100% - 22px); background-repeat: no-repeat; }
.col { flex: 1 1 0; display: flex; flex-direction: column-reverse; gap: 2px; position: relative; height: 100%; justify-content: flex-start; }
.col i { display: block; border-radius: 3px; }
.col span { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.legend { display: flex; flex-direction: column; gap: 14px; }
.legend .row { display: flex; flex-direction: column; gap: 6px; }
.legend .row .t { display: flex; align-items: center; gap: 8px; }
.sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.side { min-width: 0; width: 248px; overflow: hidden; }
@media (max-width: 760px) { .crumbs > span, .crumbs .sep { display: none; } }

/* ---------- app additions ---------- */
html, body { min-height: 100%; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; }
.btn.sm { min-height: 30px; font-size: 13px; padding: 0 10px; }
.err { color: var(--red); }
.ok-text { color: var(--green-text); }
.center-msg { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-2); text-align: center; padding: 24px; }
.banner { display: flex; align-items: center; gap: 10px; padding: 8px 26px; font-size: 13.5px; background: var(--card); border-bottom: 1px solid var(--line); color: var(--text-2); }
.banner.bad { color: var(--red); }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--btn-bg); color: var(--btn-fg); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; z-index: 60; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
.item .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.sub a { cursor: pointer; }
.thread-wrap { min-height: 40vh; }
.empty-chat { padding: 40px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.empty-chat h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.caret { display: inline-block; width: 7px; height: 15px; background: var(--text-2); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
.msg .body ul, .msg .body ol { margin: 0; padding-left: 1.3em; }
.msg .body code.inl { font: 13px var(--mono); background: var(--raise); border-radius: 5px; padding: 1px 5px; }
.drawer-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 40; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 41; display: flex !important; overflow-y: auto; }

/* ---------- sign-in sheet (one card on a lit stage) ---------- */
.signin-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: max(32px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: radial-gradient(1200px 500px at 50% -10%, rgba(255, 255, 255, 0.035), transparent 70%), var(--bg); }
.sheet { width: 100%; max-width: 980px; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); overflow: hidden; }
.cust-light .sheet { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.12); }
.sheet-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.sheet-h h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.hpill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 9px; font-size: 13.5px; color: var(--text-2); min-width: 0; max-width: 100%; }
.hpill b { color: var(--text); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sheet-b { display: grid; grid-template-columns: minmax(0, 452px) minmax(0, 1fr); gap: 34px; padding: 24px 24px 28px; align-items: stretch; }
@media (max-width: 860px) { .sheet-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 20px 18px 24px; } .stage { padding: 22px 16px 18px; } .pname { font-size: 28px; } }
.sheet-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 24px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 13px; }

/* The stage: a softly lit panel in the portal's colour, the card centred near the top, extras below. */
.stage { --glow: rgba(255, 255, 255, 0.06); --dots: rgba(255, 255, 255, 0.055); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 30px 26px 26px; border-radius: 14px; border: 1px solid var(--line); background: var(--side); }
.stage.emp { --glow: rgba(214, 151, 72, 0.24); }
.stage.cus { --glow: rgba(84, 190, 170, 0.2); }
.cust-light .stage { --dots: rgba(20, 20, 30, 0.08); --glow: rgba(84, 190, 170, 0.22); background: #F1F2F3; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(var(--dots) 1px, transparent 1.3px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 42%, #000 25%, transparent 100%); mask-image: radial-gradient(75% 65% at 50% 42%, #000 25%, transparent 100%); }
.stage-card { position: relative; }
.stage-card::before { content: ""; position: absolute; inset: -44px -40px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent); }
.stage-more { display: flex; flex-direction: column; gap: 16px; }
.stage .health { background: var(--card); }
.cust-light .stage .health { background: #FFFFFF; }

.pcard { position: relative; width: 100%; min-height: 272px; border-radius: 16px; border: 1px solid var(--line-2); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--text); font: inherit;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 50px rgba(0, 0, 0, 0.5); }
.pcard.emp { background: radial-gradient(140% 120% at 100% 0%, rgba(214, 151, 72, 0.22), transparent 55%), #222124; }
.pcard.cus { background: radial-gradient(140% 120% at 100% 0%, rgba(84, 190, 170, 0.2), transparent 55%), #212325; }
.cust-light .pcard.cus { background: radial-gradient(140% 120% at 100% 0%, rgba(84, 190, 170, 0.22), transparent 55%), #FFFFFF; box-shadow: 0 22px 50px rgba(20, 20, 30, 0.14); }

/* The form column: a short greeting, the form, and (customers) the invitation opener. */
.side-h h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.side-h p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; text-wrap: pretty; }
.invite-inline { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.invite-toggle { font: inherit; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 11px; background: transparent; color: var(--text); text-align: left; }
.invite-toggle:hover { background: var(--card-2); }
.invite-toggle > svg { color: #5CC9B3; }
.cust-light .invite-toggle > svg { color: #1F8A75; }
.invite-toggle .t { flex: 1 1 auto; min-width: 0; font-size: 14.5px; }
.invite-toggle .chev { display: inline-flex; color: var(--text-3); transition: transform 0.15s; }
.invite-inline.open .invite-toggle .chev { transform: rotate(90deg); }
.invite-box { display: flex; flex-direction: column; gap: 10px; }
.invite-box p { margin: 0; font-size: 14px; }
.invite-box .field { flex: 1 1 auto; min-width: 0; min-height: 40px; }
.invite-box .btn { min-height: 40px; }
.invite-box .err { margin: 0; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .invite-toggle .chev { transition: none; } }
.pcard-top { display: flex; align-items: center; gap: 12px; }
.picon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.picon svg { width: 20px; height: 20px; }
.emp .picon { border: 1.5px solid rgba(214, 151, 72, 0.7); color: #E2A660; background: rgba(214, 151, 72, 0.1); }
.cus .picon { border: 1.5px solid rgba(84, 190, 170, 0.7); color: #5CC9B3; background: rgba(84, 190, 170, 0.1); }
.cust-light .cus .picon { color: #1F8A75; }
.cust-light .emp .picon { color: #A86A1E; }
.pcard-top .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pcard-top .who b { font-size: 17px; font-weight: 600; }
.pcard-top .who small { color: var(--text-2); font-size: 13px; }
.ppill { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.ppill.ok { border-color: rgba(91, 208, 138, 0.55); color: var(--green-text); background: rgba(91, 208, 138, 0.1); }
.ppill.bad { border-color: rgba(255, 124, 124, 0.55); color: var(--red); background: rgba(255, 124, 124, 0.08); }
.plabel { margin-top: 26px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--text-3); }
.pname { font: 700 36px/1.15 var(--mono); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 42px; }
.pname.empty { color: var(--text-3); }
.ptag { align-self: flex-start; font: 700 11px/1 var(--mono); letter-spacing: 0.12em; padding: 5px 8px; border-radius: 5px; }
.emp .ptag { color: #E2A660; border: 1px solid rgba(214, 151, 72, 0.55); background: rgba(214, 151, 72, 0.08); }
.cus .ptag { color: #5CC9B3; border: 1px solid rgba(84, 190, 170, 0.55); background: rgba(84, 190, 170, 0.08); }
.cust-light .cus .ptag { color: #1F7A68; }
.cust-light .emp .ptag { color: #8E5916; }
.pfoot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 18px; }
.pmeta { font: 600 11.5px/1.6 var(--mono); letter-spacing: 0.1em; color: var(--text-2); text-transform: uppercase; }
.ring { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ring svg { width: 62px; height: 62px; }
.ring .lbl { font: 600 10.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--text-2); }

.side-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sess { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: 14px; color: var(--text-2); }
.sess b { color: var(--text); font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.sess .bar { height: 6px; }
.health { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--card-2); }
.health .h { display: flex; align-items: center; gap: 10px; }
.health .h .lbl { font: 600 11.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--text-2); }
.sig { margin-left: auto; display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sig i { width: 3px; border-radius: 1px; background: var(--line-2); display: block; }
.sig i.on { background: var(--green); }
.sig-t { font-size: 13.5px; font-weight: 600; color: var(--green-text); }
.sig-t.bad { color: var(--red); }
.strip { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.strip i { flex: 1 1 0; border-radius: 1.5px; background: var(--green); display: block; min-height: 3px; }
.strip i.bad { background: var(--red); }
.strip i.none { background: var(--line); }
.axis { display: flex; justify-content: space-between; font: 11px/1 var(--mono); color: var(--text-3); }
.hstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hstats div { display: flex; flex-direction: column; gap: 2px; }
.hstats span { font-size: 12.5px; color: var(--text-3); }
.hstats b { font: 600 14px/1.3 var(--mono); }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label > span, .form .lab { font-size: 13px; color: var(--text-2); }
.form .field { min-height: 40px; width: 100%; }
.pw { display: flex; gap: 6px; }
.pw .icon-btn { width: 40px; height: 40px; flex: none; }
.check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--green); }
.note { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.note svg { margin-top: 2px; color: var(--text-3); }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.actions .btn { min-height: 40px; padding: 0 18px; }
.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.rules li { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.rules li.met { color: var(--text); }

/* ---------- phone and narrow widths ---------- */
/* Card text truncates instead of running under the badges. */
.pcard-top .who { flex: 1 1 auto; min-width: 0; }
.pcard-top .who b, .pcard-top .who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppill { flex: none; }
.top { flex-wrap: wrap; }
.usage-chart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.cust-conv-grid { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 900px) {
  .usage-chart-grid, .cust-conv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .signin-page { align-items: flex-start;
    padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .sheet { border-radius: 14px; }
  .sheet-h, .sheet-f { padding: 14px 16px; }
  .sheet-b { display: flex; flex-direction: column; padding: 16px 14px 22px; gap: 20px; }
  /* The stage dissolves on phones: card, then the form, then the meters. */
  .stage { display: contents; }
  .stage::before, .stage-card::before { display: none; }
  .stage-card { order: 1; }
  .side-col { order: 2; }
  .stage-more { order: 3; margin-top: 0; }
  .stage .health { background: var(--card-2); }
  .pcard { min-height: 0; padding: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
  .cust-light .pcard.cus { box-shadow: 0 10px 26px rgba(20, 20, 30, 0.1); }
  .pname { font-size: 26px; min-height: 32px; }
  .pcard-top { align-items: flex-start; }
  .pcard-top .who small { white-space: normal; overflow-wrap: anywhere; }
  .plabel { margin-top: 16px; }
  .pfoot { padding-top: 12px; }
  .ring svg { width: 52px; height: 52px; }
  .hpill { font-size: 12.5px; }
  .side-h h2 { font-size: 20px; }
  .sheet-f { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sheet-f .grow { display: none; }
  .actions .btn { width: 100%; justify-content: center; }
  .stats4 { grid-template-columns: minmax(0, 1fr); }
  .stats4 > div { border-right: 0 !important; border-top: 1px solid var(--line) !important; }
  .stats4 > div:first-child { border-top: 0 !important; }
  .eyebrow label .field { width: 100% !important; }
  .eyebrow label { flex: 1 1 100%; }
  .chart { height: 220px; grid-template-columns: 34px minmax(0, 1fr); }
  .plot { gap: 4px; }
  .msg { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .msg .av { width: 26px; height: 26px; }
}
.pcard-top { width: 100%; }
.composer .foot > button[type="submit"] { margin-left: auto; }
.composer .chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.link.crumb { font-size: 15px; min-height: 0; }

/* ---------- usage page (analytics) ---------- */
.u-wrap { padding: 22px 26px 40px; }
.u-panel { background: #19191C; border: 1px solid #2B2B30; border-radius: 22px; padding: 30px 32px 34px; display: flex; flex-direction: column; gap: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.u-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; }
.u-head h1 { margin: 0 0 6px; font-size: 32px; font-weight: 500; letter-spacing: -0.02em; }
.u-head p { margin: 0; font-size: 16px; color: var(--text-2); max-width: 78ch; text-wrap: pretty; }
.u-seg { margin-left: auto; display: inline-flex; padding: 4px; gap: 4px; border-radius: 13px; background: #202024; border: 1px solid #2B2B30; }
.u-seg button { font: inherit; font-size: 15px; min-height: 38px; padding: 0 16px; border-radius: 9px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.u-seg button.on { background: #2E2E33; color: var(--text); }
.u-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 34px 40px; align-items: start; }
@media (max-width: 1100px) { .u-grid { grid-template-columns: minmax(0, 1fr); } }
.u-sec h2 { margin: 0 0 4px; font-size: 16.5px; font-weight: 500; }
.u-sec .u-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--text-3); }
.u-box { background: #1D1D21; border: 1px solid #2B2B30; border-radius: 14px; }
.u-chart { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.u-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.u-chart .say { font-size: 15px; color: var(--text); }
.u-chart svg text { fill: var(--text-3); font: 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.weeks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.wk { font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 10px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.wk.on { background: #202024; border-color: #2E2E33; }
.wk .pct { font-size: 12.5px; color: var(--text-2); }
.wk .track { width: 100%; max-width: 64px; height: 92px; background: #232327; border-radius: 6px; position: relative; overflow: hidden; }
.wk .fill { position: absolute; left: 0; right: 0; bottom: 0; background: #6E6E75; border-radius: 6px 6px 0 0; }
.wk.on .fill { background: #D9D9DE; }
.wk .over { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #FFFFFF; }
.wk .lbl { font-size: 12.5px; color: var(--text-2); }
.wk.on .lbl { color: var(--text); }
.ubar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; gap: 3px; background: transparent; }
.ubar i { display: block; height: 100%; }
.legend-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 14.5px; color: var(--text-2); }
.legend-row span { display: inline-flex; align-items: center; gap: 8px; }
.legend-row b { color: var(--text); font-weight: 500; }
.legend-row i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.big { padding: 6px 18px 12px; }
.big .row { padding: 12px 0 2px; display: flex; flex-direction: column; gap: 8px; }
.big .head { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.big .head .pct { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.big .tag { white-space: nowrap; flex: none; font-size: 11.5px; color: var(--text-3); background: #26262A; border-radius: 6px; padding: 1px 7px; }
.big .bar { height: 5px; background: #26262A; }
.big .bar i { background: #4C8DF6; }
.big .head > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk .lbl { white-space: nowrap; }

@media (max-width: 640px) { .u-wrap { padding: 12px 12px 28px; } .u-panel { padding: 20px 16px 22px; border-radius: 16px; gap: 20px; } .u-head h1 { font-size: 26px; } .u-head p { font-size: 14.5px; } .u-seg { margin-left: 0; } .weeks { gap: 4px; } .wk { padding: 8px 2px 6px; } .wk .pct, .wk .lbl { font-size: 11px; } }
.u-chart svg text.pt { fill: #EDEDEF; font-size: 13.5px; }
@media (max-width: 640px) {
  .u-chart { padding: 12px 10px 10px; }
  .u-chart svg text { font-size: 16.5px; }
  .u-chart svg text.pt { font-size: 18.5px; }
}

/* ---------- phones: iPhone and Android ---------- */
/* Fill the height people can actually see (iOS Safari's bars, Android's keyboard) and keep clear of
   the notch, the rounded corners and the home bar. env() is 0 elsewhere, so desktops are unchanged. */
html { text-size-adjust: 100%; color-scheme: dark; }
/* Native controls (checkboxes, scrollbars, pickers) follow the page's theme class, not just the device. */
html.cust-light { color-scheme: light; }
.app { min-height: 100vh; min-height: 100dvh; }
.center-msg { min-height: 60vh; min-height: 60dvh; }
.side { padding-left: max(12px, env(safe-area-inset-left)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.main { padding-right: env(safe-area-inset-right); }
.drawer { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); overscroll-behavior: contain; }
.toast { bottom: calc(22px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
/* Wide screens and phones on their side: the sidebar stays put while a long conversation scrolls. */
.side:not(.drawer) { position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) {
  .mbar { position: sticky; top: 0; z-index: 30; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .main { padding-right: 0; }
  .top, .content, .banner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .content { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .u-wrap { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  /* Segmented filters scroll sideways inside themselves instead of pushing the page wider. */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg > * { flex: none; }
  .composer .chips { flex: 1 1 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 18px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
  .composer .chips::-webkit-scrollbar { display: none; }
  .composer .chip { flex: none; }
  .list-row .acts-none { display: none; }
  .confirm { margin: 0 12px 12px; }
  /* New invite: one row per field, buttons share the last row. */
  .invite-form > label, .invite-form > fieldset { flex: 1 1 100%; }
  .invite-form > label > span:first-child, .invite-form > fieldset > span.muted { width: 52px; flex: none; }
  .invite-form > label .field { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .invite-form > .grow { display: none; }
  .invite-form > button { flex: 1 1 0; justify-content: center; }
}
/* Touch: 16 px text in fields so iPhone Safari doesn't zoom in, and 44 px targets.
   Short viewports count too: that is a phone on its side. */
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .field, .composer textarea { font-size: 16px; }
  .field, .form .field, .invite-box .field { min-height: 44px; }
  .icon-btn, .pw .icon-btn { width: 44px; height: 44px; }
  .btn, .btn.sm, .invite-box .btn, .actions .btn { min-height: 44px; }
  .chip { min-height: 44px; padding: 0 12px; }
  .seg > * { min-height: 44px; }
  .u-seg button { min-height: 44px; }
  .item { min-height: 44px; }
  .sub a { padding-top: 12px; padding-bottom: 12px; }
  .link, .link.crumb, .crumbs a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
  .link-pill { min-height: 44px; padding: 0 14px; font-size: 13px; }
  .composer .foot > button[type="submit"] { min-width: 44px; justify-content: center; }
  .check { min-height: 44px; }
  .check input { width: 20px; height: 20px; }
}

/* The message box stays at the bottom of the window while a conversation scrolls above it. */
.composer-dock { position: sticky; bottom: 0; z-index: 4; display: flex; flex-direction: column; gap: 8px; margin-top: -6px; padding: 22px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, transparent, var(--bg) 22px); }
.composer-dock .err { margin: 0; }
/* Phones: the conversation fills the screen under the top bar, so the message box sits at the bottom
   from the start instead of straight under the greeting. Long conversations scroll as before. */
@media (max-width: 760px) {
  .content.chat-page { flex: 1 1 auto; padding-bottom: 0; }
  .chat-page > .split { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; }
  .chat-page section[aria-label="Conversation"] { flex: 1 1 auto; }
  .chat-page .composer-dock { margin-top: auto; }
  /* An empty Visual panel would sit below the box, out of sight: it shows once there is a picture.
     !important: the panel sets its display inline. */
  .chat-page .visual-empty { display: none !important; }
}

/* ---------- Conversations, both portals: your words in a bubble, answers as a page (common/chat.jsx),
   the answer text (common/text.jsx), the message box with "/" commands, one Send/Stop button, the
   status above it and ↓ back to the newest. Loaded after chat-dock.css and graphite.css. ---------- */
:root { --acc: #B9CCE3; --acc-rgb: 185, 204, 227; --acc-text: #C6D6EA; }
.light, .cust-light { --acc: #3A5573; --acc-rgb: 58, 85, 115; --acc-text: #2F475F; }

/* one reading column, centred (a picture panel beside it on the customer side when there is one) */
.split.solo.chat-col { grid-template-columns: minmax(0, 780px); }
.chat-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chat-sec > .thread { gap: 24px; padding: 10px 0 26px; }

/* ---- your message ---- */
.msg.you, .msg.ans { display: flex; flex-direction: column; min-width: 0; }
.msg.you { align-items: flex-end; gap: 4px; }
.you-b { max-width: min(80%, 580px); padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: var(--raise); font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.light .you-b, .cust-light .you-b { background: #E6E8EE; }
.you-b.is-cmd { padding: 8px 12px; background: transparent; border: 1px solid var(--line-2); }
.you-b.is-cmd .cmd { background: transparent; padding: 0; }
.you-t { font-size: 12px; color: var(--text-3); padding-right: 6px; opacity: 0; transition: opacity 0.15s; }
.msg.you:hover .you-t, .msg.you:focus-within .you-t { opacity: 1; }
.you-who { font-size: 12.5px; color: var(--text-2); font-weight: 600; padding-right: 6px; }
.you-who time { color: var(--text-3); font-weight: 400; margin-left: 4px; }
.msg.you .att-list { justify-content: flex-end; margin-top: 2px; }

/* ---- an answer ---- */
.msg.ans { gap: 8px; }
.ans-h { display: flex; align-items: center; gap: 9px; min-height: 26px; font-size: 13px; color: var(--text-3); }
.ans-h b { color: var(--text); font-weight: 600; font-size: 13.5px; }
.ans-mk { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--raise); color: var(--text); }
.ans-mk svg { width: 15px; height: 15px; }
.ans-wr { color: var(--green-text); font-size: 12.5px; }
.ans-act { display: flex; align-items: center; gap: 2px; min-width: 0; margin: -4px 0 0 -9px; }
.ans-act button { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 32px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; }
.ans-act button:hover { background: var(--card); color: var(--text); }
.ans-act .meta { min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-act button:first-child + .meta, .ans-act .meta:first-child { margin-left: 9px; }
/* Copy and Retry show on the newest answer, and on any answer you point at. */
@media (hover: hover) {
  .msg.ans .ans-act { opacity: 0; transition: opacity 0.15s; }
  .msg.ans:hover .ans-act, .msg.ans:last-child .ans-act, .ans-act:focus-within { opacity: 1; }
}
.msg.ans > .card, .msg.ans > .err { margin: 0; }
.think { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14.5px; }
.think-t { background: linear-gradient(90deg, var(--text-3) 0%, var(--text) 50%, var(--text-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cx-shimmer 1.6s linear infinite; }
@keyframes cx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.think-d { display: inline-flex; gap: 3px; }
.think-d i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); animation: cx-bob 1s ease-in-out infinite; }
.think-d i:nth-child(2) { animation-delay: 0.15s; }
.think-d i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cx-bob { 50% { transform: translateY(-3px); background: var(--text-2); } }

/* ---- answer text ---- */
.md { font-size: 15.5px; line-height: 1.68; color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.md > * { margin: 0; }
.md > * + * { margin-top: 14px; }
.md > .md-tw, .md > .md-quote, .md > .code, .md > .md-tw + *, .md > .md-quote + *, .md > .code + * { margin-top: 18px; }
.md p { margin: 0; }
.md b { font-weight: 650; }
.md > .md-h { margin: 26px 0 4px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.35; }
.md > .md-h:first-child { margin-top: 0; }
.md-h1 { font-size: 21px; }
.md-h2 { font-size: 18.5px; }
.md-h3 { font-size: 16.5px; }
.md-h4, .md-h5, .md-h6 { font-size: 15.5px; }
.md-list { margin: 0; padding-left: 24px; }
.md-list > li { margin: 5px 0; padding-left: 2px; }
.md-list > li::marker { color: var(--text-3); }
ol.md-list > li::marker { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-2); }
.md-list .md-list { margin: 4px 0 8px; }
ul.md-list { list-style: none; padding-left: 20px; }
ul.md-list > li { position: relative; }
ul.md-list.d0 > li::before, ul.md-list.d1 > li::before { content: ""; position: absolute; left: -14px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
ul.md-list.d2 { border-left: 1px solid var(--line-2); margin-left: -8px; padding-left: 22px; }
ul.md-list.d2 > li::before { content: ""; position: absolute; left: -16px; top: 0.8em; width: 7px; height: 1px; background: var(--line-2); }
/* "1. **host**" with points under it reads as a heading of the answer */
.md > ol.md-list { padding-left: 28px; }
.md > ol.md-list > li.md-titled { margin-top: 22px; }
.md > ol.md-list > li.md-titled:first-child { margin-top: 6px; }
.md > ol.md-list > li.md-titled::marker { color: var(--acc-text); font-size: 16px; }
.md > ol.md-list > li.md-titled > .md-t { display: block; font-size: 16.5px; margin-bottom: 2px; }
.md > ol.md-list > li.md-titled > .md-t code.inl { font-size: 14px; }
.md code.inl { font: 0.85em/1 var(--mono); background: var(--raise); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.md b code.inl, .md .md-h code.inl { color: var(--acc-text); background: rgba(var(--acc-rgb), 0.1); border-color: rgba(var(--acc-rgb), 0.28); }
.md-a { color: var(--acc-text); text-decoration: underline; text-decoration-color: rgba(var(--acc-rgb), 0.45); text-underline-offset: 3px; }
.md-a:hover { text-decoration-color: currentColor; }
.md > .md-hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.md-quote { margin: 0; padding: 10px 14px; border-left: 3px solid rgba(var(--acc-rgb), 0.6); background: rgba(var(--acc-rgb), 0.06); border-radius: 0 10px 10px 0; color: var(--text-2); }
.md-quote > * + * { margin-top: 8px; }
.md-tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); -webkit-overflow-scrolling: touch; }
.md-table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.45; }
.md-table th { font: 600 11px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); text-align: left; padding: 10px 14px; background: var(--card-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.md-table td { padding: 9px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.md-table code.inl { white-space: nowrap; overflow-wrap: normal; }
.md-table tr:first-child td { border-top: 0; }
.md-table tbody tr:hover td { background: var(--card-2); }
.md .code .h { min-height: 30px; padding-top: 0; padding-bottom: 0; }
.md .code.open pre { min-height: 42px; }
.md-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.16em; border-radius: 1px; background: var(--acc); animation: cx-blink 1s steps(2, jump-none) infinite; }
@keyframes cx-blink { 50% { opacity: 0; } }
.md-pending { height: 40px; border: 1px dashed var(--line-2); border-radius: 12px; }

/* ---- the box ---- */
.composer-dock > .cx-jump { position: absolute; left: 50%; top: -30px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 0.15s, transform 0.15s; }
.composer-dock > .cx-jump.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.composer-dock:has(> .cx-status) > .cx-jump { top: -66px; }
.cx-status { align-self: center; display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); }
.light .cx-status, .cust-light .cx-status { box-shadow: 0 6px 22px rgba(20, 24, 40, 0.1); }
.cx-status .faint { margin-left: -4px; }
.cx-status kbd, .cx-cmd kbd { font: 600 11px/1 var(--mono); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text-2); }
.cx-pulse { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(91, 208, 138, 0.5); animation: cx-pulse 1.4s ease-out infinite; }
@keyframes cx-pulse { 70% { box-shadow: 0 0 0 7px rgba(91, 208, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 208, 138, 0); } }
.cx-conn { margin: 0; align-self: center; font-size: 12.5px; color: var(--yellow); }
.composer.cx { position: relative; border-radius: 26px; border-color: var(--line-2); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16); transition: border-color 0.15s, box-shadow 0.15s; }
.light .composer.cx, .cust-light .composer.cx { box-shadow: 0 6px 22px rgba(20, 24, 40, 0.07); }
.composer.cx:focus-within { border-color: rgba(var(--acc-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), 0.12), 0 6px 22px rgba(0, 0, 0, 0.16); }
.composer.cx textarea { min-height: 54px; max-height: 40vh; font-size: 15.5px; line-height: 1.5; padding: 15px 18px 4px; overflow-y: auto; }
.composer.cx .foot { gap: 4px; padding: 4px 8px 8px; flex-wrap: nowrap; }
.cx-cmd { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 32px; padding: 0 11px 0 7px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 13px; }
.cx-cmd:hover, .cx-cmd[aria-expanded="true"] { color: var(--text); border-color: var(--line-2); background: var(--card-2); }
.cx-send { width: 38px; height: 38px; flex: none; display: grid; place-items: center; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); transition: background 0.15s, transform 0.1s; }
.cx-send:active { transform: scale(0.94); }
.cx-send:disabled { background: var(--raise); color: var(--text-3); cursor: default; }
.cx-send:focus-visible, .cx-cmd:focus-visible, .ans-act button:focus-visible, .hp:focus-visible, .cx-jump:focus-visible { outline: 2px solid rgba(var(--acc-rgb), 0.7); outline-offset: 2px; }
.cx-pal { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 8px); z-index: 20; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38); }
.light .cx-pal, .cust-light .cx-pal { box-shadow: 0 18px 50px rgba(20, 24, 40, 0.16); }
.cx-pal-h { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px 8px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.cx-pal-h .faint { font-weight: 400; }
.cx-pi { display: grid; grid-template-columns: 18px 82px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font: inherit; text-align: left; }
.cx-pi svg { color: var(--text-2); }
.cx-pi.on, .cx-pi:hover { background: var(--raise); }
.cx-pc { font: 13px var(--mono); }
.cx-pd { color: var(--text-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-none { margin: 4px 10px 8px; font-size: 13px; }
/* Staff: the month in words, under the box. */
.composer-dock > .em-plain { justify-content: center; font: 12px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
.em-plain .em-pct { color: var(--text-2); }

/* ---- staff header: Context and Tools pills, ⋯ Rename / Delete ---- */
.hp-row { display: inline-flex; align-items: center; gap: 6px; }
.pop-w { position: relative; display: inline-flex; }
.hp { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; white-space: nowrap; }
.hp:hover, .hp[aria-expanded="true"] { color: var(--text); border-color: var(--line-2); background: var(--card); }
.hp-more { width: 30px; padding: 0; }
.pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42); }
.light .pop, .cust-light .pop { box-shadow: 0 18px 50px rgba(20, 24, 40, 0.16); }
.pop-about { width: 340px; max-width: calc(100vw - 24px); max-height: min(70vh, 640px); overflow: auto; padding: 8px; }
.pop-stack { display: flex; flex-direction: column; gap: 8px; }
.pop-menu { width: 190px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.pop-menu button { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; }
.pop-menu button svg { color: var(--text-2); }
.pop-menu button:hover { background: var(--raise); }
.pop-menu .danger, .pop-menu .danger svg { color: var(--red); }
.hp-rename { display: flex; gap: 6px; }
.hp-rename .field { width: 280px; max-width: 50vw; }

@media (prefers-reduced-motion: reduce) {
  .md-caret, .cx-pulse, .think-t, .think-d i { animation: none; }
  .think-t { color: var(--text-2); }
  .composer-dock > .cx-jump { transition: none; }
}
@media (pointer: coarse) { .cx-esc { display: none; } }
@media (max-width: 760px) {
  .chat-sec > .thread { gap: 20px; padding-top: 6px; }
  .you-b { max-width: 88%; font-size: 16px; }
  .you-t { display: none; }
  .md { font-size: 16px; }
  .md-table { font-size: 13.5px; }
  .md-table th, .md-table td { padding: 8px 12px; }
  .composer.cx textarea { min-height: 52px; padding: 14px 16px 2px; }
  .cx-send { width: 44px; height: 44px; }
  .cx-cmd { height: 44px; }
  .cx-pi { grid-template-columns: 18px minmax(0, 1fr); min-height: 52px; padding: 6px 10px; row-gap: 0; }
  .cx-pi svg { grid-row: 1 / span 2; }
  .cx-pi .cx-pc { grid-column: 2; grid-row: 1; }
  .cx-pi .cx-pd { grid-column: 2; font-size: 12.5px; }
  .cx-pal-h .faint { display: none; }
  .cx-status { min-height: 30px; font-size: 12.5px; }
  .pop.pop-about { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-width: none; max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); }
  .hp-t { display: none; }
  .chat-top { flex-wrap: nowrap; }
  .chat-top .crumbs { min-width: 0; flex-wrap: nowrap; }
  .chat-top .crumbs b { display: none; }
  .hp-rename .field { width: auto; flex: 1 1 auto; min-width: 0; }
}
/* Touch (and short windows): 16 px in the box or iOS zooms in, fingertip-sized buttons. */
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .composer.cx textarea { font-size: 16px; }
  .ans-act button { min-height: 44px; }
  .hp { min-height: 40px; min-width: 40px; }
  .hp-more { width: 40px; }
}

/* ---- what hearth did on the way (tools, thinking): one quiet line, opens to the steps ---- */
.ans-work { display: flex; flex-direction: column; gap: 6px; margin: -2px 0 -2px; min-width: 0; }
.ans-work-h { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 32px; padding: 0 10px 0 8px; margin-left: -8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font: inherit; font-size: 13px; text-align: left; }
.ans-work-h span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-work-h:hover { background: var(--card); color: var(--text-2); }
.ans-work-h svg { width: 14px; height: 14px; flex: none; transition: transform 0.15s; }
.ans-work.open .ans-work-h svg { transform: rotate(90deg); }
.ans-work.live .ans-work-h span { color: var(--text-2); }
.ans-work-b { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px 14px; margin-left: 1px; border-left: 2px solid var(--line-2); }
.ans-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ans-steps li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ans-steps li span { min-width: 0; overflow-wrap: anywhere; }
.ans-steps svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.ans-steps li.ok svg { color: var(--green-text); }
.ans-steps li.bad svg { color: var(--text-3); }
.ans-steps li.run { color: var(--text); }
.ans-steps li.run span { background: linear-gradient(90deg, var(--text-3) 0%, var(--text) 50%, var(--text-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cx-shimmer 1.6s linear infinite; }
.ans-thought { margin: 0; max-height: 280px; overflow: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: var(--text-3); overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { .ans-steps li.run span { animation: none; color: var(--text); background: none; } }
/* Touch: the "working" lines breathe (opacity, which the GPU does alone) instead of a moving gradient
   clipped to the text, which repaints the words every frame on a phone. */
@media (pointer: coarse) {
  .think-t, .ans-steps li.run span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); animation: cx-breathe 1.6s ease-in-out infinite; }
  .cx-pulse { box-shadow: none; animation: cx-breathe 1.4s ease-in-out infinite; }
}
@keyframes cx-breathe { 50% { opacity: 0.5; } }
@media (pointer: coarse) { .ans-work-h { min-height: 44px; } }

/* ---- Settings → Memory ---- */
.mem-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mem-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.mem-list li span { min-width: 0; overflow-wrap: anywhere; }
.mem-list time { display: block; font-size: 12px; margin-top: 2px; }
.mem-list button { flex: none; }
@media (pointer: coarse) { .mem-list button { min-width: 44px; min-height: 44px; } }
.mem-empty { margin: 6px 0 0; font-size: 13.5px; }

/* ---------- customer conversations: the sidebar keeps the newest 3, the rest open in a pop-up ---------- */
.item.more .t { color: var(--text-2); }
.item.more.on .t { color: var(--text); }
.item .count { margin-left: auto; font-size: 12px; color: var(--text-2); background: var(--raise); border-radius: 999px; padding: 0 8px; min-width: 24px; text-align: center; flex: none; }
.item.on .count { background: var(--card-2); }
.item .reply-dot + .count { margin-left: 0; }
button.item { font: inherit; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; }
.newc.off { opacity: 0.5; cursor: not-allowed; }
.full-note { margin: -2px 4px 6px; padding: 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

html.modal-open { overflow: hidden; }
.cl-dlg { padding: 0; margin: auto; width: min(580px, calc(100vw - 32px)); max-width: none; max-height: min(680px, calc(100vh - 64px)); max-height: min(680px, calc(100dvh - 64px));
  background: var(--card); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; overscroll-behavior: contain; }
.cl-dlg[open] { display: flex; flex-direction: column; }
.cl-dlg::backdrop { background: rgba(0, 0, 0, 0.5); }
.light .cl-dlg::backdrop, .cust-light .cl-dlg::backdrop { background: rgba(20, 20, 30, 0.28); }
.light .cl-dlg, .cust-light .cl-dlg { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.18); }
.cl-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px 20px; }
.cl-h h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.cl-s { padding: 0 18px 10px 20px; }
.cl-search { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 12px; background: var(--side); border: 1px solid var(--line-2); border-radius: 9px; color: var(--text-2); }
.light .cl-search, .cust-light .cl-search { background: var(--card); }
.cl-search:focus-within { outline: 2px solid var(--line-2); outline-offset: 1px; }
.cl-search input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 14px; color: var(--text); background: transparent; border: 0; outline: 0; padding: 8px 0; -webkit-appearance: none; appearance: none; }
.cl-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cl-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 8px 10px; }
.cl-b ul { list-style: none; margin: 0; padding: 0; }
.cl-note { margin: 0; padding: 0 12px 4px; font-size: 13px; color: var(--text-3); }
.cl-grp { margin: 14px 0 4px; padding: 0 12px; font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.cl-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14.5px; }
.cl-row:hover { background: var(--card-2); }
.cl-row.on { background: var(--raise); }
.cl-row .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-row .n { flex: none; font-size: 12.5px; color: var(--text-2); }
.cl-row .reply-dot { margin-left: 0; }
.cl-f { display: flex; align-items: center; gap: 12px; padding: 12px 18px 14px 20px; border-top: 1px solid var(--line); }
.cl-f .btn:disabled { opacity: 0.5; }
.cl-meter { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-2); }
.cl-meter > span:last-child { flex: 1 1 auto; min-width: 0; }
.cl-meter b { color: var(--text); font-weight: 600; }
.cl-bar { flex: 0 0 120px; height: 5px; background: var(--raise); border-radius: 99px; overflow: hidden; }
.cl-bar i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.cl-meter.full .cl-bar i { background: var(--yellow); }
.cl-limit { margin-top: 32px; max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.cl-limit h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.cl-limit p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.cl-limit .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* search, filter, sort, select */
.cl-kbd { font: 600 11.5px var(--mono); color: var(--text-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; height: 20px; display: inline-flex; align-items: center; flex: none; }
.cl-tools { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-chip { font: inherit; font-size: 13px; min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cl-chip.on { background: var(--raise); border-color: transparent; color: var(--text); }
.cl-chip .reply-dot { margin: 0; width: 7px; height: 7px; box-shadow: none; }
/* shared.css (loaded after this file) sizes every select.field; the toolbar's sort is smaller on desktop */
.cl-tools select.field.cl-sort { min-height: 30px; font-size: 13px; padding-left: 10px; flex: none; }
.cl-all { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 0 12px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.cl-all input, .cl-row.pick input { width: 17px; height: 17px; margin: 0; accent-color: var(--btn-bg); flex: none; }
.cl-row.pick { cursor: pointer; }
.cl-row.pick.on { background: var(--card-2); }
.cl-li { position: relative; }
.cl-acts { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: none; gap: 2px; padding-left: 8px; background: var(--card-2); border-radius: 8px; }
.cl-acts .icon-btn { width: 30px; height: 30px; border-color: transparent; }
.cl-acts .icon-btn:hover { background: var(--raise); }
@media (hover: hover) and (pointer: fine) {
  .cl-li.edit:hover .cl-acts, .cl-li.edit:focus-within .cl-acts { display: flex; }
  .cl-li.edit:hover .cl-row, .cl-li.edit:focus-within .cl-row:not(.on) { background: var(--card-2); }
}
@media (hover: none), (pointer: coarse) { .cl-kbd { display: none; } }
.cl-rename { display: flex; align-items: center; gap: 6px; padding: 3px 6px; }
.cl-rename .field { flex: 1 1 auto; min-width: 0; min-height: 34px; }
.cl-ask { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--text-2); }
.cl-confirm .cl-ask { color: var(--text); }
.btn.danger-fill { background: var(--red); color: #1F0909; }
.light .btn.danger-fill, .cust-light .btn.danger-fill { background: #C93636; color: #fff; }
.btn.danger:disabled, .btn.danger-fill:disabled { opacity: 0.5; cursor: not-allowed; }

/* Phones: a sheet from the bottom of the screen; a phone on its side gets the whole screen. */
@media (max-height: 500px) {
  .cl-dlg { width: 100%; max-height: none; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; border: 0;
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
@media (max-width: 760px), (max-height: 500px), (pointer: coarse) {
  .cl-f .btn { justify-content: center; }
  .cl-chip { min-height: 44px; padding: 0 13px; }
  .cl-tools select.field.cl-sort { min-height: 44px; font-size: 16px; }
  .cl-search { min-height: 44px; }
  .cl-search input { font-size: 16px; min-height: 42px; }
  .cl-row { min-height: 46px; }
  .cl-all { min-height: 44px; }
  .cl-all input, .cl-row.pick input { width: 20px; height: 20px; }
  .cl-rename { flex-wrap: wrap; }
  .cl-rename .field { flex-basis: 100%; min-height: 44px; }
  .cl-f:has(.cl-ask) { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cl-confirm .cl-ask { flex-basis: 100%; }
  .cl-f:has(.cl-ask) .btn { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  .cl-dlg { width: 100%; max-height: none; height: calc(100vh - 56px); height: calc(100dvh - 56px); margin: auto 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .cl-h { padding: 14px 14px 10px 18px; }
  .cl-s { padding: 0 14px 8px 18px; }
  .cl-b { padding: 2px 6px 10px; }
  .cl-f { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 18px max(16px, env(safe-area-inset-bottom)); }
  .cl-bar { flex-basis: 72px; }
  .cl-limit { margin-top: 16px; padding: 18px; }
  .cl-limit .acts .btn { flex: 1 1 auto; justify-content: center; }
}

/* "Your conversations" folds the newest few open and shut; the chevron turns down when open. */
.grp-fold { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; font: inherit; font-size: 12.5px; color: var(--text-3); text-align: left; background: transparent; border: 0; border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.grp-fold:hover, .grp-fold:active { color: var(--text-2); }
.grp-fold .t { flex: 1 1 auto; min-width: 0; }
.grp-fold .reply-dot { margin-left: 0; width: 7px; height: 7px; }
.grp-fold svg { flex: none; transition: transform 0.15s ease; }
.grp-fold[aria-expanded="true"] svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .grp-fold svg { transition: none; } }
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) { .grp-fold { min-height: 44px; margin-top: 2px; margin-bottom: 0; } }

/* The sign-in kit both portals share (front doors, link pages, the customer sign-up). Graphite tokens plus an ice accent. */
.door {
  --ice: #B9CCE3; --ice-rgb: 185, 204, 227; --ice-text: #C6D6EA; --ice-hover: #CBDAEC; --on-ice: #0D1420;
  --d-glow: 0.3; --d-spot: rgba(185, 204, 227, 0.11); --d-dots: rgba(255, 255, 255, 0.045); --d-field: var(--side);
  --d-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  --d-pass: radial-gradient(140% 120% at 100% 0%, rgba(185, 204, 227, 0.19), transparent 55%), #222225;
  position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
}
.cust-light .door {
  --ice: #3A5573; --ice-rgb: 58, 85, 115; --ice-text: #2F475F; --ice-hover: #2F475F; --on-ice: #FFFFFF;
  --d-glow: 0.22; --d-spot: rgba(58, 85, 115, 0.1); --d-dots: rgba(0, 0, 0, 0.05); --d-field: #FFFFFF;
  --d-shadow: 0 20px 50px rgba(20, 20, 30, 0.08);
  --d-pass: radial-gradient(140% 120% at 100% 0%, rgba(58, 85, 115, 0.13), transparent 55%), #FFFFFF;
}
/* a soft light from the top and a dotted grid that fades out */
.door::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 720px; pointer-events: none; background: radial-gradient(640px 360px at 50% -60px, var(--d-spot), transparent 70%); }
.door::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 620px; pointer-events: none; background-image: radial-gradient(var(--d-dots) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(520px 380px at 50% 0, #000, transparent 75%); mask-image: radial-gradient(520px 380px at 50% 0, #000, transparent 75%); }
.door > * { position: relative; z-index: 1; }

.d-reload { min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(var(--ice-rgb), 0.55); background: rgba(var(--ice-rgb), 0.1); color: var(--ice-text); font: inherit; font-size: 12.5px; font-weight: 600; }
.door h1 { margin: 24px 0 6px; font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.d-sub { margin: 0 0 26px; max-width: 34ch; font-size: 15px; color: var(--text-2); }

/* boxes */
.d-panel { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; text-align: left; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--d-shadow); }
.d-label { margin: 0; font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.d-big { position: relative; width: 100%; min-height: 46px; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 500; transition: background 0.12s, border-color 0.12s, transform 0.06s; }
.d-big:hover { border-color: var(--text-3); }
.d-big:active { transform: translateY(1px); }
.d-big.primary { background: var(--ice); border-color: transparent; color: var(--on-ice); box-shadow: 0 4px 14px rgba(var(--ice-rgb), var(--d-glow)), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.d-big.primary:hover { background: var(--ice-hover); }
.d-big:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.d-big:focus-visible, .d-back:focus-visible, .d-tlink:focus-visible, .d-eye:focus-visible, .d-reload:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.d-k { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 4px 6px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-3); font: 500 11px/1 var(--mono); }
.d-big.primary .d-k { border-color: color-mix(in srgb, var(--on-ice) 30%, transparent); background: transparent; color: var(--on-ice); opacity: 0.7; }
.d-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--raise); border: 1px solid var(--line-2); color: var(--text); font-size: 12px; font-weight: 600; }
.d-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-who small { display: block; font-size: 12px; line-height: 1.2; color: var(--text-3); }

/* fields */
.d-fld { display: flex; flex-direction: column; gap: 6px; }
.d-fld label { font-size: 13px; color: var(--text-2); }
.d-labrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.d-field { width: 100%; min-height: 44px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--d-field); color: var(--text); font: inherit; font-size: 15px; transition: border-color 0.12s, box-shadow 0.12s; }
.d-field::placeholder { color: var(--text-3); }
.d-field:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(var(--ice-rgb), 0.25); }
.d-field:-webkit-autofill, .d-field:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--d-field) inset; transition: background-color 9999s; }
.d-fld.bad .d-field { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.d-pw { position: relative; }
.d-pw .d-field { padding-right: 46px; }
.d-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); }
.d-eye:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.d-cb { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.d-cb input { width: 16px; height: 16px; margin: 0; accent-color: var(--ice); }
.d-tlink { padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; }
.d-tlink:hover { color: var(--text); }
.d-back { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; }
.d-back:hover { color: var(--text); }
.d-back svg.i { width: 14px; height: 14px; }
.d-err { margin: 0; text-align: left; font-size: 13.5px; color: var(--red); }
.d-tip { margin: 0; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--card-2); font-size: 13.5px; color: var(--text-2); }

/* choose a password */
.d-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.d-meter i { height: 4px; border-radius: 2px; background: var(--line-2); transition: background 0.2s; }
.d-meter[data-s="1"] i:nth-child(-n + 1) { background: var(--red); }
.d-meter[data-s="2"] i:nth-child(-n + 2) { background: var(--yellow); }
.d-meter[data-s="3"] i:nth-child(-n + 3) { background: var(--green); }
.d-meter[data-s="4"] i { background: var(--green); }
.d-mrow { display: flex; justify-content: space-between; margin-top: -4px; font-size: 12.5px; color: var(--text-3); }
.d-mrow b { font-weight: 500; color: var(--text-2); }
.d-checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.d-checks li { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.d-checks li.met { color: var(--text); }
.d-c { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-2); }
.d-c svg.i { width: 10px; height: 10px; stroke-width: 2.4; opacity: 0; }
.d-checks li.met .d-c { background: var(--green); border-color: var(--green); color: #fff; }
.d-checks li.met .d-c svg.i { opacity: 1; }

/* compact variant: mono host line, the sign-in card's links and the invitation-link box */
.door.compact::after { display: none; }
.door.compact::before { height: 520px; background: radial-gradient(560px 300px at 50% -80px, var(--d-spot), transparent 70%); }
.d-chip { padding: 4px 6px; border-radius: 5px; border: 1px solid rgba(var(--ice-rgb), 0.55); background: rgba(var(--ice-rgb), 0.08); color: var(--ice-text); font: 700 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.door h1.d-h-sm { margin: 18px 0 4px; font-size: 22px; }
.d-mono { max-width: none; font-family: var(--mono); font-size: 13.5px; letter-spacing: 0.02em; margin-bottom: 22px; }
.d-links { margin-top: 8px; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 22px; }
.d-tlink2 { min-height: 36px; padding: 4px 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13.5px; }
.d-tlink2:hover, .d-tlink2[aria-expanded="true"] { color: var(--text); }
.d-tlink2:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.d-disc { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.d-disc-row { display: flex; gap: 8px; }
.d-disc-row .d-field { flex: 1; min-width: 0; }
.d-disc-row .d-big { width: auto; flex: none; }

/* more kinds of field: two side by side, mono, text box, hints */
.d-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.d-fld label em { font-style: normal; color: var(--text-3); }
.d-field.mono { font-family: var(--mono); font-size: 14.5px; letter-spacing: 0.01em; }
textarea.d-field { display: block; min-height: 84px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.d-hint { margin: 0; text-align: left; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.d-hint-row { margin-top: -4px; }
.d-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* the remembered account inside the sign-in box, with "Not you?" */
.d-acct { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--d-field); }
.d-acct .d-who { font-size: 14.5px; font-weight: 500; }

/* sign-up: the welcome note from the link, keep-this-link, what you sent */
.d-welcome { width: 100%; margin: 0 0 12px; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--card) 60%, transparent); }
.d-welcome .d-label { margin-bottom: 7px; }
.d-welcome p:last-child { margin: 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.d-p { margin: 0; text-align: left; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.d-p b { color: var(--text); font-weight: 500; }
.d-code { display: block; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--d-field); font: 12.5px/1.45 var(--mono); overflow-wrap: anywhere; color: var(--text); user-select: all; }
.d-btnrow { display: flex; gap: 8px; }
.d-btnrow .d-big { flex: 1; min-width: 0; padding: 0 12px; }
a.d-big { text-decoration: none; }
.d-big.ghost { min-height: 38px; background: transparent; border-color: transparent; color: var(--text-2); }
.d-big.ghost:hover { color: var(--text); border-color: transparent; background: color-mix(in srgb, var(--text) 6%, transparent); }
.d-small { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.d-facts { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; }
.d-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; min-width: 0; }
.d-facts > div + div { border-top: 1px solid var(--line); }
.d-facts dt { color: var(--text-3); }
.d-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.d-quote { width: 100%; margin: 0; padding: 12px 14px; text-align: left; border-left: 3px solid var(--line-2); border-radius: 0 10px 10px 0; background: var(--card-2); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.d-err-top { width: 100%; margin-bottom: 12px; }
.d-big:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }

/* small phones (320 to 360 px): long buttons stay on one line */
@media (max-width: 420px) { .d-mono { white-space: nowrap; font-size: min(13.5px, 3.6vw); letter-spacing: 0; } }
@media (max-width: 360px) { .d-big { font-size: 13.5px; padding: 0 10px; gap: 6px; } .d-panel { padding: 12px; } }
@media (max-width: 640px) {
  .d-row { grid-template-columns: minmax(0, 1fr); }
  .door h1 { margin-top: 18px; font-size: 22px; }
  .d-sub { margin-bottom: 20px; }
  .d-panel { padding: 14px; }
  .d-k { display: none; }
  /* 16px or iOS zooms in on focus; tap targets of 44px or more, without moving the layout */
  .d-field, .d-field.mono { font-size: 16px; min-height: 46px; }
  .d-tlink { min-height: 32px; }
  .d-tlink, .d-tlink2 { position: relative; }
  .d-tlink::after, .d-tlink2::after { content: ""; position: absolute; inset: -8px -6px; }
  .d-eye { width: 44px; height: 44px; right: 1px; }
  .d-cb { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .d-big, .d-field, .d-meter i { transition: none; } }

/* Attachments: files waiting to send, files in messages, the large picture view, the drop target. */
.att-pending, .att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; min-width: 0; }
.att-pending { padding: 10px 10px 0; }
.att-list { margin-top: 8px; }
.att-chip { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; width: 260px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); padding: 6px 4px 6px 8px; }
.att-chip.gone { opacity: 0.6; }
.att-chip.gone .att-name { text-decoration: line-through; }
.att-chip.bad { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.att-ext { flex: none; width: 38px; height: 38px; border-radius: 7px; background: var(--raise); color: var(--text-2); font: 600 10.5px var(--mono); display: grid; place-items: center; letter-spacing: 0.02em; overflow: hidden; }
.att-mini { flex: none; width: 38px; height: 38px; border-radius: 7px; object-fit: cover; background: var(--raise); }
.att-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.att-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip.bad .att-sub { color: var(--red); white-space: normal; }
.att-prog { height: 3px; border-radius: 99px; background: var(--raise); overflow: hidden; margin-top: 3px; }
.att-prog i { display: block; height: 100%; background: var(--peri); transition: width 0.2s; }
.att-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: none; color: var(--text-2); cursor: pointer; text-decoration: none; }
.att-x:hover { background: var(--raise); color: var(--text); }
.att-pic button { display: block; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card-2); cursor: zoom-in; }
.att-pic img { display: block; max-width: min(260px, 70vw); max-height: 200px; object-fit: cover; }
.att-wait { font-size: 12.5px; }
.att-btn { flex: none; }
.composer .foot .att-btn { margin-left: 0; border: 0; border-radius: 50%; }
.composer .foot .att-btn:hover { background: var(--card-2); }
.att-drop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 2px dashed var(--peri); pointer-events: none; }
.att-drop span { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 18px; }
.att-dialog { padding: 0; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); color: var(--text); max-width: min(96vw, 1100px); max-height: 92vh; width: max-content; overflow: hidden; }
.att-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.att-dialog-bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.att-dialog-bar .att-name { font-weight: 600; }
.att-dialog img { display: block; max-width: min(96vw, 1100px); max-height: calc(92vh - 60px); margin: 0 auto; object-fit: contain; }
.m-files { margin: 8px 0 0; font-size: 13px; }
.m-reply .att-pending { padding: 0 0 8px; }

@media (max-width: 760px) {
  .att-chip { width: 100%; }
  .att-pic img { max-width: 70vw; max-height: 180px; }
}
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .att-x { width: 44px; height: 44px; }
  .att-pic button { min-height: 44px; min-width: 44px; }
}

/* ---------- Files page (customer/files.jsx): a grid of previews. Here, not in customer/, because an
   operator's View as customer shows it in the employee app too. ---------- */
.top.fl-top { width: 100%; max-width: 1040px; margin-inline: auto; }
.content.fl-page { width: 100%; max-width: 1040px; margin-inline: auto; gap: 16px; }
.fl-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.fl-hero h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; }
.fl-hero p { margin: 6px 0 0; max-width: 64ch; line-height: 1.55; }
.fl-meter { display: flex; flex-direction: column; gap: 6px; min-width: 220px; font-size: 12.5px; color: var(--text-2); }
.fl-meter b { color: var(--text); font-weight: 600; }
.fl-meter .pj-bar i { background: var(--peri); }
.fl-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fl-search { position: relative; flex: 1 1 240px; min-width: 0; }
.fl-search .field { width: 100%; padding-left: 34px; }
.fl-search .i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.fl-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 2px; background: var(--card-2); }
.fl-seg button { border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 8px; min-height: 32px; cursor: pointer; white-space: nowrap; }
.fl-seg button:hover { color: var(--text); }
.fl-seg button.on { background: var(--raise); color: var(--text); }
.fl-seg button i { font-style: normal; color: var(--text-3); margin-left: 5px; font-size: 12px; }
.fl-empty { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.fl-empty p { margin: 0; }

.fl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.fl-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; min-width: 0; }
.fl-card:hover { border-color: var(--line-2); }
.fl-open { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.fl-open:focus-visible { outline: 2px solid var(--peri); outline-offset: -2px; border-radius: inherit; }
.fl-prev { height: 128px; background: var(--card-2); border-bottom: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; position: relative; }
.fl-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-big { font: 600 15px var(--mono); padding: 10px 12px; border-radius: 10px; background: var(--raise); color: var(--text-2); letter-spacing: 0.04em; position: relative; }
.fl-big.t-pdf { color: #FF8B6B; }
.fl-big.t-sheet { color: var(--green); }
.fl-big.t-text, .fl-big.t-doc { color: var(--peri); }
.fl-lines { position: absolute; inset: 14px 16px auto; display: flex; flex-direction: column; gap: 6px; opacity: 0.55; }
.fl-lines i { display: block; height: 5px; border-radius: 3px; background: var(--line-2); }
.fl-tag { position: absolute; left: 8px; bottom: 8px; font-size: 11px; padding: 3px 7px; border-radius: 99px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--peri); border: 1px solid var(--line); }
.fl-cb { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 2px; min-width: 0; }
.fl-cb b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-cb .att-sub { font-size: 12px; }
.fl-foot { display: flex; align-items: center; gap: 4px; padding: 2px 6px 6px 12px; min-width: 0; }
.fl-conv { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); text-decoration: none; min-height: 32px; }
.fl-conv:hover { color: var(--text); }
.fl-conv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-conv .i { flex: none; color: var(--text-3); }
.fl-ib { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 0; background: none; color: var(--text-3); cursor: pointer; }
.fl-ib:hover { background: var(--raise); color: var(--red); }

@media (max-width: 760px) {
  .fl-hero { align-items: stretch; }
  .fl-meter { min-width: 0; width: 100%; }
  .fl-seg { width: 100%; }
  .fl-seg button { flex: 1; }
  .fl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fl-prev { height: 96px; }
}
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .fl-seg button { min-height: 44px; }
  .fl-conv { min-height: 44px; }
  .fl-ib { width: 44px; height: 44px; }
  .fl-search .field { font-size: 16px; }
}

/* ---- Forge's long tasks (common/chat.jsx PlanList, AnswerFoot) ---- */
/* The plan: a calm checklist between the steps and the answer; the item being worked on gets a
   pixel square that steps on and off, like the sign-in page's flicker. */
.plan { margin: 2px 0 12px; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); max-width: 560px; }
.plan-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.plan-h .faint { font-weight: 400; font-variant-numeric: tabular-nums; }
.plan ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.plan-i { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 10px; padding: 4px 0; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.plan-b { width: 14px; height: 14px; margin-top: 2px; border: 1.5px solid var(--line-2); border-radius: 3px; display: grid; place-items: center; }
.plan-b svg { width: 11px; height: 11px; stroke-width: 2; }
.plan-i.done .plan-b { border-color: rgba(var(--acc-rgb), 0.7); background: rgba(var(--acc-rgb), 0.16); color: var(--acc); }
.plan-i.done .plan-t { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.plan-i.doing .plan-b { border-color: rgba(var(--acc-rgb), 0.7); }
.plan-i.doing .plan-b::after { content: ""; width: 6px; height: 6px; background: var(--acc); }
.plan.live .plan-i.doing .plan-b::after { animation: plan-on 0.86s steps(2, jump-none) infinite; }
@keyframes plan-on { from { opacity: 1; } to { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .plan.live .plan-i.doing .plan-b::after { animation: none; } }

/* Continue in Forge / Carry on: the first, quiet buttons under an answer */
.ans-act .ans-forge { color: var(--text-2); }
.ans-act .ans-forge canvas.pg { margin: 0 1px; }
@media (max-width: 400px) {
  .ans-act { flex-wrap: wrap; }
}

/* Repeats (common/chat.jsx RepeatBar): what runs on a schedule in this conversation, above the box.
   rpt-, not rp-: rp- is the Report a problem pop-up (report.css), and the two shared a bundle. */
.rpt-bar { display: flex; flex-direction: column; gap: 6px; }
.rpt { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px 4px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 13px; }
.rpt > svg { color: var(--acc); }
.rpt-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-t b { font-weight: 600; }
.rpt-q { color: var(--text-2); }
.rpt-n { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rpt-stop { min-height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; }
.rpt-stop:hover { background: var(--card-2); }
.you-rep { display: inline-flex; align-items: center; gap: 5px; align-self: flex-end; margin-bottom: 4px; font-size: 12px; color: var(--text-3); }
.you-rep svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
  .rpt { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .rpt-n { display: none; }
}
@media (pointer: coarse) { .rpt-stop { min-height: 44px; } }

/* Home at "/" in both portals (customer/home.jsx, employee/home.jsx) and the soft hand-off from the
   sign-in page to it (common/landing.js puts html.landing on for the moment of the switch). */
html.landing .door.px > .px-field, html.landing .door.px > .px-c, html.landing .door.px > .d-fine { opacity: 0; transition: opacity 0.18s ease-in; }
html.landing .door.px > .px-main { opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 0.18s ease-in, transform 0.18s ease-in; }
html.landing .app { animation: hm-land 0.32s ease-out both; }
@keyframes hm-land {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.landing .door.px > * { transition: none; }
  html.landing .app { animation: none; }
}

/* Home fills the window: the greeting (and its cards) at the top, .hm-end (the list, then the message
   box) at the foot. The box is the conversation page's dock (css/chat-dock.css), so when Home is taller
   than the window (small phones, phones on their side) it stays at the bottom and the rest scrolls under
   it; its 14 px fade sits inside the gap above it. .hm-end only groups the foot in the markup: as
   display: contents the box can stick anywhere on the page, not only inside the group. */
.content.hm { flex: 1 1 auto; padding-top: 0; padding-bottom: 16px; }
.hm-wrap { flex: 1 1 auto; width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; padding: 44px 0 0; }
.hm-end { display: contents; }
.hm-hi h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.hm-hi p { margin: 6px 0 0; color: var(--text-2); }
.hm .composer-dock { margin-top: -14px; }
.hm-end > :first-child { margin-top: auto; }
/* A phone on its side has no room to hold the box over the page (the staff box alone is most of the
   screen there): it just comes last. */
@media (max-height: 500px) {
  .hm .composer-dock { position: static; }
}
.hm-lab { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.hm-lab svg { color: var(--text-3); }
.hm-more { margin-left: auto; min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; }
.hm-more:hover { color: var(--text); }
.hm-list { padding: 4px; display: flex; flex-direction: column; }
.hm-row { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0; padding: 0 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14.5px; }
.hm-row:hover { background: var(--card-2); }
.hm-row > svg { color: var(--text-3); flex: none; }
.hm-row .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row .n { flex: none; font-size: 12.5px; color: var(--text-3); }
.hm-row .n.on { font-size: 13px; font-weight: 600; color: var(--text-2); }
.hm-row .reply-dot { margin-left: 0; }
.hm-new { flex: none; font-size: 12px; font-weight: 600; color: var(--green-text); }
.hm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hm-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; color: var(--text); text-decoration: none; }
.hm-card:hover { background: var(--card-2); }
.hm-card .hm-lab { margin: 0 0 4px; }
.hm-card b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-card span { font-size: 13px; color: var(--text-3); }
.hm-row:focus-visible, .hm-card:focus-visible, .hm-more:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; }

@media (max-width: 760px) {
  /* The phone bar already names the page. */
  .top:has(+ .content.hm) { display: none; }
  /* The box sits where a conversation's does on a phone: the dock's own 12 px over the home bar. */
  .content.hm { padding-bottom: 0; }
  .hm-wrap { gap: 22px; padding: 22px 0 0; }
  .hm-hi h1 { font-size: 25px; }
  .hm-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The Lounge (customer/lounge.jsx, employee/lounge.jsx, common/loungefeed.jsx): the room on
   the right, who's here on the left. Narrow screens: who's here folds above the room. Bubbles: yours on
   the right, everyone else's on the left. lo- is the Lounge's own prefix. ---------- */
.top.lo-top { width: 100%; max-width: 1100px; margin-inline: auto; }
.content.lo-page { width: 100%; max-width: 1100px; margin-inline: auto; gap: 14px; flex: 1 1 auto; min-height: 0; padding-bottom: 20px; }
.lo-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 24px; flex-wrap: wrap; }
.lo-hero h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; }
.lo-hero p { margin: 6px 0 0; max-width: 64ch; line-height: 1.55; }
.lo-state { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.lo-state p { margin: 0; }

.lo-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; flex: 1 1 auto; min-height: 0; height: min(720px, calc(100dvh - 190px)); }
/* who's here */
.lo-side { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.lo-side::-webkit-scrollbar { display: none; }
.lo-side summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 32px; font: 600 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 0 2px 6px; cursor: default; pointer-events: none; }
.lo-side summary::-webkit-details-marker { display: none; }
.lo-side summary .lo-chev { display: none; margin-left: auto; width: 14px; height: 14px; transition: transform 0.15s; }
.lo-you { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.lo-you b { color: var(--text); font-weight: 600; }
.lo-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lo-people li { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 2px 4px; border-radius: 8px; font-size: 13.5px; min-width: 0; }
.lo-people li:hover { background: var(--card-2); }
.lo-people .lo-pn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-pres { position: relative; display: inline-flex; flex: none; }
.lo-pres i { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 2px solid var(--bg); }
.lo-people .lo-unnamed { font-size: 12.5px; }
.lo-people .lo-unnamed svg { margin: 0 4px; flex: none; }
.lo-muted { margin: 10px 4px 0; font-size: 12.5px; }
.lo-muted a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }

/* the room: a strip on top, the messages, who's typing, the box */
.lo-room { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.lo-roomhead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }
.lo-live { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 500; }
.lo-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.lo-live i.on { background: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.18); }
.lo-erase { display: inline-flex; align-items: center; gap: 6px; }
.lo-feedwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lo-feed { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 10px; display: flex; flex-direction: column; scrollbar-width: thin; }
.lo-feed:focus-visible { outline: 2px solid var(--line-2); outline-offset: -2px; }
.lo-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-3); text-align: center; max-width: 36ch; }
.lo-empty p { margin: 0; line-height: 1.5; }
.lo-day { margin: 14px 0 6px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-3); }
.lo-day::before, .lo-day::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); }

.lo-msg { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 12px; }
.lo-msg.same { margin-top: 3px; }
.lo-msg.mine { grid-template-columns: minmax(0, 1fr); }
.lo-b { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.lo-msg.mine .lo-b { align-items: flex-end; }
.lo-who { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; margin: 0 4px 3px; }
.lo-who b { font-weight: 600; color: var(--text); }
.lo-who time { font-size: 11.5px; color: var(--text-3); }
.lo-line { display: flex; align-items: center; gap: 4px; max-width: min(78%, 620px); min-width: 0; }
.lo-msg.mine .lo-line { flex-direction: row-reverse; }
.lo-bub { margin: 0; padding: 8px 12px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.lo-msg:not(.mine).same .lo-bub { border-top-left-radius: 6px; }
.lo-msg:not(.mine):not(.last) .lo-bub { border-bottom-left-radius: 6px; }
.lo-msg.mine .lo-bub { background: color-mix(in srgb, var(--green) 16%, var(--card-2)); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.lo-msg.mine.same .lo-bub { border-top-right-radius: 6px; }
.lo-msg.mine:not(.last) .lo-bub { border-bottom-right-radius: 6px; }
.light .lo-bub, .cust-light .lo-bub { background: var(--card-2); }
.light .lo-msg.mine .lo-bub, .cust-light .lo-msg.mine .lo-bub { background: color-mix(in srgb, var(--green) 14%, #fff); }
.lo-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11.5px; font-weight: 650; letter-spacing: 0.02em; color: #fff; background: hsl(var(--h) 42% 38%); }
.lo-av.sm { width: 22px; height: 22px; font-size: 9.5px; }
.light .lo-av, .cust-light .lo-av { background: hsl(var(--h) 48% 46%); }
.lo-av-gap { width: 32px; }
.lo-acts { flex: none; display: inline-flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.lo-msg:hover .lo-acts, .lo-acts:focus-within { opacity: 1; }
.lo-act { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-3); cursor: pointer; font: inherit; }
.lo-act:hover { background: var(--raise); color: var(--text); }
.lo-act.txt { padding: 0 9px; font-size: 12.5px; gap: 6px; display: inline-flex; align-items: center; }
.lo-act:disabled { opacity: 0.5; cursor: default; }
.lo-gone { margin: 6px 0 0 42px; font-size: 13px; font-style: italic; color: var(--text-3); }
.lo-gone.mine { margin-left: 0; text-align: right; }
.lo-jump { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); cursor: pointer; }
.lo-jump:hover { background: var(--raise); }

.lo-typing { flex: none; margin: 0; min-height: 20px; padding: 0 18px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.lo-dots { display: inline-flex; gap: 3px; }
.lo-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: lo-dot 1.2s infinite ease-in-out; }
.lo-dots i:nth-child(2) { animation-delay: 0.15s; }
.lo-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes lo-dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lo-dots i { animation: none; opacity: 0.6; } }

/* the box: one rounded field with the send button inside, like hearth's own message box */
.lo-box { flex: none; margin: 4px 12px 0; display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 6px 14px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card-2); }
.lo-box:focus-within { border-color: color-mix(in srgb, var(--text) 35%, var(--line-2)); }
.light .lo-box, .cust-light .lo-box { background: #fff; }
.lo-box.off { opacity: 0.7; }
.lo-box textarea { flex: 1 1 auto; min-width: 0; min-height: 34px; max-height: 140px; resize: none; field-sizing: content; padding: 7px 0; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.45; }
.lo-box textarea::placeholder { color: var(--text-3); }
.lo-left { flex: none; align-self: center; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lo-left.low { color: var(--red); }
.lo-send { flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.lo-send:disabled { opacity: 0.35; cursor: default; }
.lo-note { flex: none; margin: 0; padding: 6px 18px 12px; font-size: 12px; color: var(--text-3); line-height: 1.45; }
.lo-note.err { color: var(--red); }

/* Settings → Lounge */
.lo-mutes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lo-mutes li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.lo-mutes li > span:not(.lo-av) { flex: 1 1 auto; min-width: 0; }

/* staff watching (employee/lounge.jsx) */
.lo-staffbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.lo-staffbar .grow { flex: 1 1 auto; }
.lo-removed { margin: 12px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }

/* narrow main column (a phone, a phone on its side beside the sidebar, a small window): who's here
   folds above the room (customer/lounge.jsx keeps it open only above 1000 px) */
@media (max-width: 1000px) {
  .lo-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .lo-side { overflow: visible; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--card); }
  .lo-side summary { pointer-events: auto; cursor: pointer; min-height: 44px; padding: 0; }
  .lo-side summary .lo-chev { display: block; }
  .lo-side[open] summary .lo-chev { transform: rotate(180deg); }
  .lo-side[open] { padding-bottom: 10px; }
  .lo-roomhead .lo-live { display: none; }
}
/* short screens (a phone on its side): the room takes the height; the phone bar and the room's strip
   say what the Lounge is */
@media (max-height: 560px) {
  .lo-hero { display: none; }
  .lo-grid { height: calc(100dvh - 90px); min-height: 220px; }
  .lo-note { display: none; }
  .lo-box { margin-bottom: 8px; }
}
/* phones: the room fills what's left of the screen */
@media (max-width: 760px) {
  .content.lo-page { padding-bottom: max(10px, env(safe-area-inset-bottom)); gap: 10px; }
  .lo-hero { display: none; }
  .top.lo-top { min-height: 48px; }
  .lo-top .crumbs { display: none; }
  .lo-grid { height: calc(100dvh - 140px); min-height: 300px; }
  .lo-roomhead { padding: 8px 12px; }
  .lo-feed { padding: 6px 10px 8px; }
  .lo-msg { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .lo-av { width: 28px; height: 28px; }
  .lo-av-gap { width: 28px; }
  /* the buttons go under a bubble rather than squeeze it */
  .lo-line { max-width: 100%; flex-wrap: wrap; }
  .lo-bub { max-width: 88%; }
  .lo-gone { margin-left: 36px; }
  .lo-box { margin: 4px 8px 0; }
  .lo-box textarea { font-size: 16px; }
  .lo-note { padding: 6px 12px 10px; }
}
/* touch: what hover shows on a desktop is always there; 44 px taps */
@media (pointer: coarse) {
  .lo-acts { opacity: 1; }
  .lo-act { min-width: 44px; height: 44px; }
  .lo-box textarea { font-size: 16px; min-height: 36px; }
  .lo-send { width: 44px; height: 44px; }
  .lo-people li { min-height: 36px; }
  .lo-jump { min-height: 44px; }
}

/* ---------- token meter (Ember): one mono line under the message box, and the month used up ---------- */
.em { display: flex; align-items: center; gap: 7px; min-height: 18px; padding: 0 6px; font: 12px/1.2 var(--mono); color: var(--text-3); white-space: nowrap; }
.em-bar { color: var(--text-3); letter-spacing: 0.02em; }
.em-bar i { font-style: normal; display: inline-block; width: 0.62em; text-align: center; opacity: 0.55; }
.em-bar i.f, .em-bar i.p, .em-bar i.e { opacity: 1; }
.em-bar i.f { color: #B9CCE3; }
.em-bar i.p, .em-bar i.e { color: #E2A660; }
.em-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.em-pct { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.em-sep { color: var(--line-2); margin: 0 6px; }
.em-r b, .em-live b { color: var(--text-2); font-weight: 600; }
.em-live { color: #E2A660; font-variant-numeric: tabular-nums; }
.em.warn .em-bar i.f, .em.warn .em-pct, .em.stop .em-bar i.f, .em.stop .em-pct, .em.warn .em-r { color: var(--yellow); }
/* Running out at this pace: the line is a link to Usage and plan. */
a.em-go { color: var(--text-3); text-decoration: none; border-radius: 8px; }
a.em-go:hover .em-r, a.em-go:focus-visible .em-r { text-decoration: underline; text-underline-offset: 3px; }
a.em-go:focus-visible { outline: 2px solid var(--peri); outline-offset: 1px; }
.em.extra .em-bar i.f { color: var(--peri); }
.light .em-bar i.f, .cust-light .em-bar i.f { color: #4E6A8C; }
.light .em-bar i.p, .light .em-bar i.e, .light .em-live, .cust-light .em-bar i.p, .cust-light .em-bar i.e, .cust-light .em-live { color: #A86A1E; }
.em-short { display: none; }
.cl-limit.tm-limit { margin-top: 0; max-width: none; border-color: rgba(242, 201, 76, 0.4); }
.light .cl-limit.tm-limit, .cust-light .cl-limit.tm-limit { border-color: rgba(183, 134, 11, 0.45); }
@media (max-width: 760px) {
  .em-of, .em-long { display: none; }
  .em-short { display: inline; }
}
@media (max-width: 360px) { .em-sep, .em-r { display: none; } }
/* In the message box (customers): right of the paperclip, on the same row as Send. Phones keep it
   to one row: while writing the bar and the count; used up, the box already says "Paused until". */
.composer .foot > .em { flex: 0 1 auto; min-width: 0; min-height: 36px; padding: 0 2px 0 6px; overflow: hidden; }
.composer .foot > .em .grow { display: none; }
.composer .foot > .em .em-live { margin-left: 8px; }
@media (max-width: 400px) {
  .composer .foot > .em.writing .em-pct, .composer .foot > .em.writing .em-sep, .composer .foot > .em.writing .em-r { display: none; }
  .composer .foot > .em.stop .em-sep, .composer .foot > .em.stop .em-r { display: none; }
  .composer .foot > .em.extra .em-pct, .composer .foot > .em.extra .em-sep, .composer .foot > .em.extra .em-bar { display: none; }
}
/* Phones: the month is a small ring and its share instead of the 13-cell bar, which ran out of room
   (and "when" only shows once it is running out). */
@media (max-width: 640px) {
  .composer .foot > .em { gap: 6px; padding: 0 4px; }
  .composer .foot > .em .em-bar, .composer .foot > .em .em-sep { display: none; }
  .composer .foot > .em:not(.warn):not(.stop) .em-r { display: none; }
  .composer .foot > .em .em-r { margin-left: 6px; }
  .composer .foot > .em::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--acc) calc(var(--p, 0) * 360deg), var(--line-2) 0); -webkit-mask: radial-gradient(circle, transparent 4.5px, #000 5px); mask: radial-gradient(circle, transparent 4.5px, #000 5px); }
  .composer .foot > .em.warn::before, .composer .foot > .em.stop::before { background: conic-gradient(var(--yellow) calc(var(--p, 0) * 360deg), var(--line-2) 0); }
  .composer .foot > .em.extra::before { background: conic-gradient(var(--peri) 360deg, var(--line-2) 0); }
}
/* Running out: the bar and when (≤400), then the share and when (≤360), so the row stays one row. */
@media (max-width: 400px) {
  .composer .foot > .em.warn:not(.writing) .em-pct, .composer .foot > .em.warn:not(.writing) .em-sep { display: none; }
}
@media (max-width: 360px) {
  .composer .foot > .em.warn:not(.writing) .em-bar { display: none; }
  .composer .foot > .em.warn:not(.writing) .em-pct, .composer .foot > .em.warn:not(.writing) .em-sep, .composer .foot > .em.warn:not(.writing) .em-r { display: inline; }
}
@media (max-width: 340px) {
  .composer .foot > .em.writing .em-bar { display: none; }
  .composer .foot > .em.writing .em-pct { display: inline; }
  .composer .foot > .em.extra .em-r { display: inline; }
}
/* Phones: Stop is a square icon button, so the row keeps the meter and Send. */
@media (max-width: 400px) {
  .composer .foot .btn.stop-sq { width: 44px; padding: 0; justify-content: center; }
  .composer .foot .btn.stop-sq .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Usage and plan (customers, customer/plan.css) and Plans and billing (staff) share these ---------- */
.bl-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.bl-h { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.bl-plan { display: flex; flex-direction: column; gap: 14px; }
.bl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.bl-facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-facts span { font-size: 12.5px; color: var(--text-3); }
.bl-facts b { font-size: 14px; font-weight: 600; }
.bl-empty { margin: 8px 0 0; font-size: 13.5px; }
/* a switch is a button: on = green with the knob right */
.bl-switch { position: relative; flex: none; width: 44px; height: 26px; padding: 0; border-radius: 999px; background: var(--raise); border: 1px solid var(--line-2); cursor: pointer; }
.bl-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: left 0.15s; }
.bl-switch.on { background: var(--green); border-color: transparent; }
.bl-switch.on i { left: 21px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .bl-switch i { transition: none; } }
@media (max-width: 760px) {
  .bl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px), (pointer: coarse) {
  .bl-switch { width: 52px; height: 32px; }
  .bl-switch i { width: 24px; height: 24px; }
  .bl-switch.on i { left: 23px; }
}

/* ---------- pop-ups with tabs down the side (common/modal.jsx): Settings ----------
   Claude-style: plain tabs on the left, one title per tab, sections laid flat with hairlines.
   Phones: the whole screen, title and × on top, the tabs as a row of pills that scrolls sideways.
   Desktop: up to 1150×825 (25% larger than the first 920×660). */
html.modal-open { overflow: hidden; }
.td { padding: 0; margin: auto; width: min(1150px, calc(100vw - 48px)); height: min(825px, calc(100vh - 48px)); height: min(825px, calc(100dvh - 48px)); max-width: none; max-height: none;
  background: var(--card); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; overscroll-behavior: contain; }
.td.td-sm { width: min(800px, calc(100vw - 48px)); height: min(700px, calc(100vh - 48px)); height: min(700px, calc(100dvh - 48px)); }
.td[open] { display: grid; grid-template-columns: 212px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.td:focus, .td:focus-visible { outline: none; }
.td::backdrop { background: rgba(0, 0, 0, 0.5); }
.light .td::backdrop, .cust-light .td::backdrop { background: rgba(20, 20, 30, 0.28); }
.light .td, .cust-light .td { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.18); }
.td-x { position: absolute; top: 12px; right: 12px; z-index: 2; border-color: transparent; }
.td-x:hover { background: var(--raise); color: var(--text); }
.td-nav { display: flex; flex-direction: column; padding: 22px 12px 16px; min-height: 0; overflow-y: auto; }
.td-nav h2 { margin: 0 10px 14px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.td-tabs { display: flex; flex-direction: column; gap: 2px; }
.td-tab { font: inherit; font-size: 14.5px; color: var(--text-2); background: transparent; border: 0; border-radius: 8px; min-height: 36px; padding: 0 10px; text-align: left;
  display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.td-tab:hover { color: var(--text); background: var(--card-2); }
.td-tab[aria-selected="true"] { background: var(--raise); color: var(--text); font-weight: 500; }
.td-tab:focus-visible { outline: 2px solid var(--line-2); outline-offset: 1px; }
.td-tab .count { margin-left: auto; font-size: 12px; color: var(--text-2); background: var(--raise); border-radius: 999px; padding: 0 7px; min-width: 22px; text-align: center; }
.td-tab[aria-selected="true"] .count { background: var(--card-2); }
.td-tab .reply-dot { margin-left: 0; }
.td-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--line); }
.td-head { display: flex; align-items: center; min-height: 60px; padding: 14px 60px 6px 28px; flex: none; }
.td-head h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.td-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px 28px; }
.td-pane[hidden] { display: none; }
.td-intro { margin: 2px 0 16px; font-size: 14px; line-height: 1.55; max-width: 62ch; }
.td-preview { margin: 0 0 14px; font-size: 13.5px; }

/* the Settings sections, flattened: no card, no icon tile, a hairline between them */
.td .set-sec { background: none; border: 0; border-radius: 0; padding: 20px 0; border-top: 1px solid var(--line); gap: 14px; }
.td .td-pane > .set-sec:first-child { border-top: 0; padding-top: 6px; }
.td .set-ic { display: none; }
.td .set-h h2 { font-size: 15px; }
.td .set-h p { font-size: 13.5px; }
.td .theme-opt { background: var(--side); }
.light .td .theme-opt, .cust-light .td .theme-opt { background: var(--card-2); }
/* rows: words on the left, the control on the right */
.td-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.td-row:first-child { border-top: 0; padding-top: 4px; }
.td-row > div { flex: 1 1 auto; min-width: 0; }
.td-row b { font-weight: 600; font-size: 14.5px; }
.td-row p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; }
.td-row .btn { flex: none; }
.td-bar { height: 6px; background: var(--raise); border-radius: 99px; overflow: hidden; }
.td-bar i { display: block; height: 100%; min-width: 4px; max-width: 100%; background: var(--green); border-radius: 99px; }
.td-bar.full i { background: var(--yellow); }
/* "Discard this report?" pinned under the form */
.td-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px 14px 28px; border-top: 1px solid var(--line); background: var(--card); flex: none; }
.td-ask > span { flex: 1 1 auto; min-width: 0; font-size: 14px; }

/* phones: the whole screen; title + close on top, the tabs scroll sideways under it */
@media (max-width: 760px) {
  .td, .td.td-sm { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .td[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .td-x { top: max(8px, env(safe-area-inset-top)); right: 8px; width: 44px; height: 44px; }
  .td-nav { padding: max(14px, env(safe-area-inset-top)) 0 0; overflow: visible; border-bottom: 1px solid var(--line); }
  .td-nav h2 { margin: 0 64px 10px 18px; font-size: 19px; line-height: 32px; }
  .td-tabs { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 14px 12px; scroll-padding: 0 14px; }
  .td-tabs::-webkit-scrollbar { display: none; }
  .td-tab { flex: none; min-height: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 15px; }
  .td-tab[aria-selected="true"] { border-color: transparent; }
  .td-tab .count { margin-left: 2px; }
  .td-main { border-left: 0; }
  .td-head { display: none; }
  .td-body { padding: 16px 16px max(28px, env(safe-area-inset-bottom)); }
  .td-row { flex-wrap: wrap; }
  .td-row .btn { width: 100%; justify-content: center; min-height: 44px; }
  .td-ask { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); }
  .td-ask .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .td-ask > span { flex-basis: 100%; }
}
/* a phone on its side: the whole screen, tabs stay on the left */
@media (max-height: 500px) and (min-width: 761px) {
  .td, .td.td-sm { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0;
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .td[open] { grid-template-columns: 190px minmax(0, 1fr); }
  .td-nav { padding-top: 14px; }
  .td-head { min-height: 52px; padding-top: 8px; }
}
@media (pointer: coarse) { .td-tab { min-height: 44px; } .td-x { width: 44px; height: 44px; } }

/* ---- Spark / Forge: the model pick in the message box, like Claude's (common/modes.jsx) ---- */
/* Pixel motion like the sign-in page (common/pixelfx.js): pixels gather onto the menu's edge, then the
   menu shows bottom-up in 6 steps and its rows step in; nothing moves while it stands open. */
@keyframes mk-swap { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
canvas.pg { display: block; flex: none; image-rendering: pixelated; }
canvas.pfx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; }
.mk-btn > svg:last-child { width: 12px; height: 12px; transform: rotate(90deg); opacity: 0.65; transition: transform 0.15s ease-out; }
.mk-btn[aria-expanded="true"] > svg:last-child { transform: rotate(-90deg); }
.mk-name { display: inline-block; }
.mk-name.swap { animation: mk-swap 0.18s ease-out both; }
.mk-btn:focus-visible { outline: 2px solid rgba(var(--acc-rgb), 0.7); outline-offset: 2px; }
.mk-row:focus-visible { outline: none; }
.mk-foot kbd { font: 600 11px/1 var(--mono); padding: 3px 5px; border-radius: 5px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text-2); }

/* words for a button, a calm menu */
/* the pick may shrink (the staff model name ellipsizes first), so the box's row never runs off the screen */
.mk { position: relative; flex: 0 1 auto; min-width: 0; display: inline-flex; }
/* Auto and Forge are soft chips in the box's bottom row */
.mk-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 10px; border: 0; border-radius: 999px; background: var(--card-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; }
.mk-btn:hover, .mk-btn[aria-expanded="true"] { background: var(--raise); }
.mk-btn { min-width: 0; max-width: 100%; white-space: nowrap; }
.mk-m { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); font-weight: 400; font-size: 12.5px; }
.mk-pop { position: absolute; right: -40px; bottom: calc(100% + 10px); z-index: 30; width: 300px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--card); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4); opacity: 0; transform: translateY(6px) scale(0.98); transform-origin: 50% 100%; pointer-events: none; }
.light .mk-pop, .cust-light .mk-pop { box-shadow: 0 16px 44px rgba(20, 24, 40, 0.14); }
.mk-pop.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.12s ease-out, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mk-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mk-row:hover, .mk-row:focus-visible { background: var(--card-2); }
.mk-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mk-t b { font-size: 14px; font-weight: 600; }
.mk-t span { font-size: 12.5px; color: var(--text-3); }
.mk-t .mk-mm { font: 11px var(--mono); margin-top: 2px; }
.mk-row canvas.pg { justify-self: center; }
.mk-ck { color: var(--acc); display: grid; place-items: center; } .mk-ck svg { width: 16px; height: 16px; }
.mk-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }

/* phones and touch */
@media (max-width: 640px) {
  .mk-m { display: none; }
}
@media (pointer: coarse) {
  .mk-btn { min-height: 44px; }
  .mk-row { min-height: 52px; }
}
/* phones: menus take the box's width, so they never run off the screen (they did at 401–640 px) */
@media (max-width: 640px) {
  .mk { position: static; }
  .mk-pop { left: 0; right: 0; width: auto; max-width: none; bottom: calc(100% + 8px); }
}
/* phones: Commands shrinks to its "/" key */
@media (max-width: 640px), (max-height: 520px) {
  .composer.cx .cx-cmd > span { display: none; }
  .composer.cx .cx-cmd { padding: 0 9px; }
}
/* short screens (a phone on its side): menus sit in a corner and scroll inside themselves */
@media (max-height: 520px) {
  .mk-pop { position: fixed; right: 12px; bottom: 8px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; z-index: 60; }
}
/* no keyboard hint where there is no keyboard */
@media (pointer: coarse) { .mk-foot { display: none; } }
@media (prefers-reduced-motion: reduce) { .mk-pop, .mk-pop.on, .mk-name.swap, .mk-btn > svg:last-child { transition: none; animation: none; transform: none; } }

/* ---- a steadier chat while hearth writes ---- */
/* The status pill floats over the end of the conversation instead of pushing the box up. */
.composer-dock > .cx-status { position: absolute; left: 50%; top: -30px; z-index: 3; transform: translateX(-50%); white-space: nowrap; }
.composer-dock:has(> .cx-status) > .cx-jump { top: -72px; }
.chat-sec > .thread { padding-bottom: 44px; }
/* The Copy / Retry row is held while the answer is written. */
.ans-act-hold { min-height: 32px; }
@media (max-width: 640px) { .ans-act-hold { min-height: 44px; } }
.chat-sec { overflow-anchor: none; }

/* ---- Plan / Auto / Bypass (common/modes.jsx PermPick, common/chat.jsx Approvals, PlanGo, ChangeList) ---- */
/* The pick sits left of "Forge ⌄" in the box's bottom row, in the same calm menu. Bypass shows in
   yellow so it's never on by surprise. */
.pm-btn > svg:first-child { width: 15px; height: 15px; opacity: 0.85; }
.pm-btn.pm-plan > svg:first-child { color: var(--acc); }
.pm-btn.pm-bypass, .pm-btn.pm-bypass:hover { color: var(--yellow); background: rgba(242, 201, 76, 0.12); }
.pm-pop { right: auto; left: -8px; transform-origin: 0 100%; }
.pm-ic { display: grid; place-items: center; width: 22px; height: 22px; color: var(--text-2); }
.pm-ic svg { width: 17px; height: 17px; }
.pm-row[aria-checked="true"] .pm-ic { color: var(--acc); }
.pm-row.pm-bypass .pm-ic { color: var(--yellow); }

/* What an answer changed: a quiet list under the answer */
.chg { margin: 8px 0 4px; max-width: 560px; font-size: 13px; color: var(--text-2); }
.chg-h { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-2); font-size: 12.5px; }
.chg-h svg { width: 14px; height: 14px; color: var(--green); }
.chg ul { margin: 4px 0 0; padding: 0 0 0 21px; display: flex; flex-direction: column; gap: 2px; }
.chg li { overflow-wrap: anywhere; }
.chg li b { font-weight: 600; color: var(--text); }

/* Held steps (Auto): a card with a tick per step, Approve and Skip */
.ap { margin: 10px 0 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); max-width: 560px; }
.ap.open { border-color: rgba(242, 201, 76, 0.45); }
.ap-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ap-h svg { width: 15px; height: 15px; color: var(--yellow); flex: none; }
.ap:not(.open) .ap-h svg { color: var(--text-3); }
.ap ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ap-i { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ap-i:first-child { border-top: 0; }
.ap-pick { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 32px; cursor: pointer; }
.ap-pick input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--acc); }
.ap-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ap-t b { font-weight: 600; color: var(--text); }
.ap-d { color: var(--text-2); overflow-wrap: anywhere; }
.ap-why { color: var(--text-3); font-size: 12.5px; }
.ap-s { flex: none; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ap-s.ran { color: var(--green); }
.ap-s.failed { color: var(--red); }
.ap-s.waiting { color: var(--yellow); }
.ap-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ap-go .btn svg { width: 14px; height: 14px; }
.ap-n { font-size: 12px; }

/* A Plan mode answer: run it in Auto or Bypass, or keep planning */
.pg-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 4px; padding: 10px 12px; border: 1px solid rgba(var(--acc-rgb), 0.35); border-radius: 12px; background: var(--card); max-width: 560px; }
.pg-go-t { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.pg-go-t .faint { font-size: 12.5px; }
.pg-go-b { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-go .btn svg { width: 14px; height: 14px; }
.pg-go .btn.line svg { color: var(--yellow); }

/* The person's OK on held steps: a quiet line on the right, not a bubble */
.msg.you-ok { align-items: flex-end; }

@media (pointer: coarse) {
  .ap-pick { min-height: 44px; align-items: center; }
  .ap-pick input { width: 20px; height: 20px; margin: 0; }
  .ap-go .btn, .pg-go .btn { min-height: 44px; }
}
@media (max-height: 520px) {
  .pm-pop { left: auto; right: 12px; }
}
/* phones: the pick shows its icon only, so the box's bottom row still fits at 320 px */
@media (max-width: 640px) {
  .pm-pop { left: 0; right: 0; }
}
@media (max-width: 400px) {
  .pm-name { display: none; }
  .pm-btn { padding: 0 6px; gap: 4px; }
  .pg-go-b { width: 100%; }
  .pg-go-b .btn { flex: 1 1 auto; justify-content: center; }
}

/* The pixel page every door sits on (common/pixels.js draws it): the name and version in the top corners,
   the words and the status with the mark, the see-through sign-in card, and the "show" state where only
   the pixels and the mark are up. Loaded after door.css. */
.door.px::before, .door.px::after { display: none; }
.door.px > .px-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.door.px > .px-c { position: absolute; z-index: 1; transition: opacity 0.35s; }
.door.px > .px-main { position: relative; z-index: 2; }
.door.px > a.px-name { z-index: 3; }
.px-tl { top: 24px; left: 28px; top: max(24px, env(safe-area-inset-top)); }
/* the version sits on the name's middle line, with the same gutter */
.px-tr { top: 36px; right: 28px; top: max(36px, env(safe-area-inset-top)); }
.px-name { display: inline-flex; align-items: center; gap: 10px; font-size: 40px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.px-name .d-chip { font-size: 10px; letter-spacing: 0.1em; }
a.px-name { margin: -6px -8px; padding: 6px 8px; color: inherit; text-decoration: none; border-radius: 8px; transition: opacity 0.15s; }
a.px-name:hover { opacity: 0.75; }
a.px-name:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 4px; }
.px-no { font: 500 15px var(--mono); color: var(--text-2); }
/* the hint and the status; pixels.js sets --px-mark-t/-b/-l/-r to where the mark ended up, and reads
   --px-room (space kept under the mark), --px-shift (the mark's offset from the middle) and --px-gap
   (from the mark to the hint) */
.door.px[data-state="show"] { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.px-tap { margin: 0; color: var(--text-3); }
.px-stat { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font: 500 11px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.px-stat > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.px-stat b { font-weight: 600; color: var(--text-2); }
.px-stat b.err { color: var(--red); }
.px[data-state="in"] .px-under, .px[data-state="in"] .px-foot { opacity: 0; }
/* the hint centred under the mark, the status at the foot of the page */
.door.px { --px-room: 110px; --px-gap: 24px; }
.door.px > .px-under { top: calc(var(--px-mark-b, 60%) + var(--px-gap)); left: 24px; right: 24px; text-align: center; }
.door.px > .px-foot { left: 24px; right: 24px; bottom: max(26px, env(safe-area-inset-bottom)); }
.px-tap { font-size: 11px; }
/* short windows (a phone held sideways): a little less room under the mark */
@media (min-width: 641px) and (max-height: 520px) { .door.px { --px-room: 90px; } }

.px-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 100px 20px; }
.px-stage { transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
/* hidden as well as faded once it has faded, so saved-password prompts don't find a field */
.px[data-state="show"] .px-stage { opacity: 0; transform: translateY(24px) scale(0.97); pointer-events: none; visibility: hidden; transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.6s; }
.px[data-state="show"] { cursor: pointer; }
.px-card { width: 400px; max-width: 100%; display: flex; flex-direction: column; padding: 30px 28px 22px; text-align: left; border-radius: 16px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--d-shadow); }
.px-card h1.d-h-sm { margin: 0 0 4px; }
.px-card .d-mono { margin-bottom: 22px; }
.px-fields { display: flex; flex-direction: column; gap: 12px; }
.px-card .d-disc .d-hint { text-align: left; }
/* the sign-in card: centred, the remembered account on top, the password box carries its own arrow */
.px-card.si { align-items: center; text-align: center; padding: 34px 28px 20px; }
.si-top { width: 100%; text-align: left; }
.si-av { width: 52px; height: 52px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: rgba(var(--ice-rgb), 0.14); border: 1px solid rgba(var(--ice-rgb), 0.38); color: var(--ice-text); font-size: 21px; font-weight: 600; }
.px-card.si h1.d-h-sm { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-sub { margin: 6px 0 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text-2); }
.si-sub .d-tlink { font-size: 14px; color: var(--ice-text); }
.si-sub .d-tlink:hover { color: var(--text); }
.si .px-fields { width: 100%; margin-top: 22px; gap: 10px; text-align: left; }
/* the boxes say what they're for; the labels stay for screen readers */
.si .d-labrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.si .d-field { min-height: 48px; border-radius: 12px; }
.si-go { position: relative; }
.si-go .d-pw .d-field { padding-right: 92px; }
.si-go .d-eye { right: 48px; }
.si-arrow { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--ice); color: var(--on-ice); box-shadow: 0 3px 10px rgba(var(--ice-rgb), var(--d-glow)); transition: background 0.12s; }
.si-arrow:hover { background: var(--ice-hover); }
.si-arrow:disabled { background: var(--card-2); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-2); cursor: not-allowed; }
.si-arrow:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.si-arrow svg.i { width: 16px; height: 16px; stroke-width: 2; }
.si-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.si-row .d-tlink { font-size: 13.5px; }
.si-rule { width: 100%; height: 1px; margin: 18px 0 2px; background: var(--line); }
.px-fine { margin: 18px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.px-fine svg.i { width: 13px; height: 13px; }

/* every other door page (sign-up, its status page, invitations, resets) in the same card as the sign-in */
.px-step { margin: 0 0 10px; font: 600 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.px-card .d-mono .dot { margin-right: 8px; vertical-align: 1px; }
/* the host line breaks before its tag, never inside either; a little smaller on phones so it fits on one line at 375 px */
.px-card .d-mono { white-space: normal; }
.px-card .d-mono > span { white-space: nowrap; }
@media (max-width: 420px) { .px-card .d-mono { font-size: min(13px, 3.4vw); } }
.px-text { margin: -8px 0 18px; font-size: 14px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.px-text b { color: var(--text); font-weight: 500; }
.px-card .d-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.px-card .d-acct + .d-panel { margin-top: 14px; }
.px-card .d-quote { margin-bottom: 4px; }
.px-card .d-tip { font-size: 13px; }
.px-card .d-row { grid-template-columns: minmax(0, 1fr); }

/* a newer version is out: a small bar at the top */
.door.px > .px-newer { position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 6px 6px 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); box-shadow: var(--d-shadow); font-size: 13px; color: var(--text-2); white-space: nowrap; }

@media (max-width: 640px) {
  .px-tl { top: max(16px, env(safe-area-inset-top)); left: 18px; }
  .px-tr { top: max(22px, env(safe-area-inset-top)); right: 18px; }
  .px-name { font-size: 28px; }
  .px-no { font-size: 12px; }
  .door.px { --px-gap: 22px; }
  .door.px > .px-under { left: 16px; right: 16px; }
  .door.px > .px-foot { left: 16px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .px-tap { font-size: 10.5px; }
  .px-stat { gap: 4px 14px; font-size: 10.5px; }
  /* the card sits in the middle of the screen; auto margins (not align-items) so a tall card
     still starts under the name and scrolls instead of running off the top */
  .px-main { align-items: flex-start; padding: 66px 16px; }
  .px-stage { width: 100%; margin: auto 0; }
  .px-card { width: 100%; padding: 22px 16px 16px; }
  .px-card.si { padding: 26px 16px 14px; }
  .si .d-field { min-height: 52px; }
  .si-go .d-pw .d-field { padding-right: 100px; }
  .si-go .d-eye { right: 52px; }
  .si-arrow { width: 40px; height: 40px; }
  .si-arrow::after { content: ""; position: absolute; inset: -4px; }
  .door.px > .px-newer { font-size: 12.5px; }
}
/* landscape phones and tablets: the sign-in card's small links get phone-sized taps too */
@media (pointer: coarse) {
  .si .d-tlink2, .si .d-cb { min-height: 44px; }
  .si-row .d-tlink, .si-sub .d-tlink { position: relative; }
  .si-row .d-tlink::after, .si-sub .d-tlink::after { content: ""; position: absolute; inset: -12px -6px; }
}
@media (prefers-reduced-motion: reduce) { .px-stage { transition: none; } }

/* ---------- your profile (both portals): avatar colours, Settings ---------- */
.av.tint { color: hsl(var(--hue) 70% 84%); background: hsl(var(--hue) 30% 26%); box-shadow: inset 0 0 0 1px hsl(var(--hue) 30% 34%); }
.light .av.tint, .cust-light .av.tint { color: hsl(var(--hue) 55% 28%); background: hsl(var(--hue) 62% 90%); box-shadow: inset 0 0 0 1px hsl(var(--hue) 40% 80%); }

.me .who > span, .me .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.av.pf-big { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }

/* The form in Settings. */
.pf-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-sec .pf-form { max-width: 560px; }
.pf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-l { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pf-field .field { width: 100%; }
.pf-field .field[aria-invalid="true"] { border-color: var(--red); }
.pf-h { font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.pf-colors { display: grid; grid-template-columns: repeat(9, 32px); gap: 6px; }
.pf-sw { padding: 0; border: 0; background: transparent; border-radius: 10px; cursor: pointer; line-height: 0; }
.pf-sw .av { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
.pf-sw:hover .av { filter: brightness(1.12); }
.pf-sw.on { outline: 2px solid var(--text); outline-offset: 2px; }
.pf-sw:focus-visible { outline: 2px solid var(--line-2); outline-offset: 2px; }
.pf-sw.on:focus-visible { outline-color: var(--text); }
.pf-sign { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text-2); }
.pf-sign svg { flex: none; color: var(--text-3); }
.pf-sign b { color: var(--text); font-weight: 600; }
.pf-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-acts .btn:disabled { opacity: 0.5; cursor: default; }
.pf-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--green-text); }
.pf-form .err { margin: 0; }

/* ---------- answers per day, a year at a time (GitHub-style grid) ---------- */
:root { --yg0: #2A2A2F; --yg1: #1E4630; --yg2: #2A7347; --yg3: #3FA466; --yg4: #5BD08A; }
.light, .cust-light { --yg0: #E7E7EB; --yg1: #C2EACF; --yg2: #8BD6A6; --yg3: #47B873; --yg4: #24914F; }
.yg-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.yg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.yg-head b { font-size: 15px; font-weight: 600; }
.yg-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--text-3); }
.yg-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2.5px; }
.yg-legend i:first-child { margin-left: 4px; }
.yg-legend i:last-child { margin-right: 4px; }
.yg-body { display: flex; align-items: flex-start; min-width: 0; }
.yg-days { flex: none; display: block; }
.yg-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-bottom: 4px; scrollbar-width: thin; }
.yg { display: block; max-width: none; cursor: pointer; touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; }
.yg-lbl { fill: var(--text-3); font-size: 10px; font-family: inherit; }
.yg rect.yg-c, .yg-legend i.l0 { fill: var(--yg0); background: var(--yg0); }
.yg rect.l1, .yg-legend i.l1 { fill: var(--yg1); background: var(--yg1); }
.yg rect.l2, .yg-legend i.l2 { fill: var(--yg2); background: var(--yg2); }
.yg rect.l3, .yg-legend i.l3 { fill: var(--yg3); background: var(--yg3); }
.yg rect.l4, .yg-legend i.l4 { fill: var(--yg4); background: var(--yg4); }
.yg rect.on { stroke: var(--text); stroke-width: 1.5; }
.yg-wrap .yg-pick { margin: 0; min-height: 20px; font-size: 13.5px; color: var(--text-2); }
.yg-pick b { color: var(--text); font-weight: 600; }
.yg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; }
.yg-stats > div { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.light .yg-stats > div, .cust-light .yg-stats > div { background: var(--bg); }
.yg-stats dt { font-size: 12px; color: var(--text-3); }
.yg-stats dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yg-stats dd small { display: block; font-size: 12px; font-weight: 400; color: var(--text-2); }
.yg-wrap .yg-empty { margin: 0; font-size: 13.5px; }

/* The Usage page and the Usage section in Settings. */
.ug-page { max-width: 920px; gap: 18px; }
.ug-intro h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; }
.ug-intro p { margin: 6px 0 0; max-width: 66ch; line-height: 1.55; }
.ug-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; min-width: 0; }
.set-sec .ug-open { align-self: flex-start; }

@media (max-width: 760px) {
  .pf-field .field { font-size: 16px; min-height: 44px; }
  .pf-colors { grid-template-columns: repeat(5, 48px); gap: 10px; }
  .pf-sw .av { width: 48px; height: 44px; border-radius: 11px; font-size: 15px; }
  .pf-acts .btn { min-height: 44px; padding: 0 18px; }
  .yg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ug-card { padding: 16px 14px; }
  .ug-intro h1 { font-size: 22px; }
}
@media (pointer: coarse) {
  button.me-id { min-height: 44px; }
}

/* Projects: list, holdups, map, outline, people; and the unit-checked calculation card. */
.pj-page { max-width: 1280px; gap: 16px; }
.pj-intro h1, .pj-head h1, .pj-hero h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.pj-intro p, .pj-head p, .pj-hero p { margin: 6px 0 0; max-width: 72ch; line-height: 1.55; }
.pj-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pj-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.pj-row > label { font-size: 14px; color: var(--text-2); }
.pj-new { display: flex; flex-direction: column; gap: 8px; }
.pj-new label { font-weight: 600; }
.pj-new .field { flex: 1 1 260px; min-width: 0; }

.pj-starters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pj-starter { font: inherit; text-align: left; color: inherit; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); min-height: 118px; cursor: pointer; }
.pj-starter:hover { border-color: var(--line-2); }
.pj-starter:disabled { opacity: 0.6; cursor: default; }
.pj-starter-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--raise); display: grid; place-items: center; color: var(--text-2); }
.pj-starter b { font-size: 14px; font-weight: 600; }
.pj-starter span { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.pj-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; align-items: stretch; }
.pj-mcp { display: flex; flex-direction: column; gap: 12px; }
.pj-mcp h2 { margin: 0; font-size: 16px; font-weight: 600; }
.pj-mcp.compact { gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.pj-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-tool { font: 12px var(--mono); padding: 4px 8px; border-radius: 7px; background: var(--side); border: 1px solid var(--line); color: var(--text); }
.pj-tool.chg { color: var(--yellow); border-color: rgba(242, 201, 76, 0.28); }
.pj-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pj-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.pj-num { width: 22px; height: 22px; border-radius: 50%; background: var(--raise); color: var(--text); display: grid; place-items: center; font-size: 11px; font-weight: 650; }
.pj-conn { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text-2); }
.pj-dotok { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.16); flex: none; }
.pj-snip { margin: 0; padding: 10px 12px; font: 11.5px/1.5 var(--mono); color: var(--text-2); background: var(--side); border: 1px solid var(--line); border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pj-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pj-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.pj-tabs button { font: inherit; font-size: 13.5px; font-weight: 600; min-height: 34px; padding: 0 12px; border-radius: 999px; background: transparent; color: var(--text-2); border: 1px solid transparent; }
.pj-tabs button.on { background: var(--raise); color: var(--text); }
.pj-tabs button.narrow { display: none; }
.pj-cols { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; }
.pj-cols.with-tools { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(240px, 300px); }
.pj-toolshed { display: flex; flex-direction: column; gap: 10px; }
.pj-trow { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.pj-trow > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-trow code { font: 12.5px var(--mono); color: var(--text); }
.pj-trow p { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.pj-ask { display: flex; flex-direction: column; gap: 8px; }
.pj-ask-box { min-height: 72px; padding: 10px 12px; resize: vertical; line-height: 1.45; }

.pj-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pj-item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; color: inherit; text-decoration: none; min-height: 44px; }
.pj-item:hover { border-color: var(--line-2); }
.pj-item-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-item-h b { font-size: 15.5px; overflow-wrap: anywhere; }
.pj-item-f { font-size: 13px; }
.pj-bar { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--raise); }
.pj-bar i { display: block; min-width: 4px; }

/* Status colours, shared by pills, the bar, the key and the map's legend. */
.pj-st.done, .k.done, .pj-bar .done { --c: var(--green); }
.pj-st.active, .k.active, .pj-bar .active { --c: var(--peri); }
.pj-st.blocked, .k.blocked, .pj-bar .blocked { --c: var(--red); }
.pj-st.todo, .k.todo, .pj-bar .todo { --c: var(--text-3); }
.pj-st.cancelled, .k.cancelled, .pj-bar .cancelled { --c: var(--line-2); }
.k.chain { --c: var(--yellow); }
.pj-bar i.pj-st { background: var(--c); }
.pill.pj-st { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--text); }
.pill.pj-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.k { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); vertical-align: -1px; }
.k.chain { border-radius: 2px; height: 3px; width: 14px; vertical-align: 2px; }

.pj-grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pj-hold { display: flex; flex-direction: column; gap: 12px; }
.pj-hold-g h3 { margin: 0 0 6px; font-size: 13px; font-weight: 650; color: var(--text-2); letter-spacing: 0.04em; text-transform: uppercase; }
.pj-hold-g ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pj-hold-g li, .pj-hold-g p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.pj-counts { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--text-2); }
.pj-counts span { display: inline-flex; align-items: center; gap: 6px; }
.pj-link { font: inherit; color: var(--text); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; overflow-wrap: anywhere; }
.pj-link:hover { text-decoration-color: var(--text-2); }
.pj-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pj-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 7px; padding: 2px 4px 2px 8px; font-size: 13.5px; }
.pj-chip button { font: inherit; color: var(--text-2); background: none; border: 0; cursor: pointer; min-width: 24px; min-height: 24px; }
.pj-chain { margin: 0; line-height: 1.7; }

.pj-mapcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pm { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pm-bar { display: flex; align-items: center; gap: 6px; }
.pm-stage { position: relative; width: 100%; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); overflow: hidden; touch-action: none; }
.pm-stage canvas { position: absolute; inset: 0; display: block; }
.pm-text { cursor: pointer; }
.pm-key { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.pm-key span { display: inline-flex; align-items: center; gap: 5px; }
.pj-sel { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pj-sel p { margin: 0; line-height: 1.5; }

.pj-outline, .pj-people { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pj-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pj-add .field.grow { flex: 1 1 240px; min-width: 0; }
.pj-hours { width: 84px; }
.pj-tree, .pj-tree ul { list-style: none; margin: 0; padding: 0; }
.pj-tree { border-top: 1px solid var(--line); overflow-x: auto; }
.pj-tree li.on > .pj-tr { background: var(--raise); }
.pj-tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 8px; border-bottom: 1px solid var(--line); min-height: 44px; }
.pj-title { min-width: 120px; }
.pj-kind { font: 11.5px var(--mono); color: var(--text-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.pj-kind.goal { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 40%, transparent); }
.pj-kind.objective { color: var(--peri); border-color: color-mix(in srgb, var(--peri) 40%, transparent); }
.pj-wait { font-size: 13px; }
.pj-wait.held { color: var(--yellow); }
.pj-status { min-height: 30px; padding: 0 8px; }
.pj-acts { display: inline-flex; gap: 2px; }
.pj-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pj-members li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pj-roles { margin: 0; font-size: 13px; line-height: 1.5; }

.pj-calc { display: flex; flex-direction: column; gap: 4px; }
.pj-calc-v { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pj-calc-c { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }

@media (max-width: 1100px) {
  .pj-starters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-split { grid-template-columns: minmax(0, 1fr); }
  .pj-cols, .pj-cols.with-tools { grid-template-columns: minmax(0, 1fr); }
  .pj-cols > :not(.on) { display: none; }
  .pj-tabs button.narrow { display: inline-block; }
  .pj-tabs button.wide { display: none; }
}
@media (max-width: 900px) {
  .pj-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pj-starters { grid-template-columns: minmax(0, 1fr); }
  .pj-head > .pj-conn { display: none; }
}
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .pj-link { min-height: 44px; display: inline-flex; align-items: center; }
  .pj-chip button { min-width: 44px; min-height: 44px; }
  .pj-status { min-height: 44px; }
  .pj-hours { width: 96px; }
  .pj-acts .btn { min-width: 44px; }
}

/* ---------- Report a problem (customer/feedback.jsx): your reports on the left, one report or the new
   one on the right. Phones: the whole screen, the list first, then a report with ‹ Reports.
   The thread pieces (.rp-steps, .rp-msg, .rp-reply, .rp-event, .rp-ctx) are shared with staff. ---------- */
.rp { padding: 0; margin: auto; max-width: none; max-height: none; background: var(--card); color: var(--text); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); overflow: hidden; overscroll-behavior: contain; }
.rp::backdrop { background: rgba(0, 0, 0, 0.5); }
.light .rp::backdrop, .cust-light .rp::backdrop { background: rgba(20, 20, 30, 0.28); }
.light .rp, .cust-light .rp { box-shadow: 0 24px 60px rgba(20, 20, 30, 0.18); }
.rp:focus, .rp:focus-visible { outline: none; }
.rp .icon-btn.rp-x { border-color: transparent; flex: none; }
.rp .icon-btn.rp-x:hover { background: var(--raise); color: var(--text); }
.rp2 { width: min(980px, calc(100vw - 48px)); height: min(700px, calc(100vh - 48px)); height: min(700px, calc(100dvh - 48px)); }
.rp2[open] { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.rp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* the list */
.rp-side { display: flex; flex-direction: column; min-height: 0; background: var(--side); border-right: 1px solid var(--line); }
.light .rp-side, .cust-light .rp-side { background: var(--card-2); }
.rp-side-h { padding: 20px 16px 12px 18px; flex: none; }
.rp-side-h h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.rp-side-h p { margin: 4px 0 14px; font-size: 13px; color: var(--text-3); line-height: 1.45; }
.rp-side .rp-x-list { display: none; }
.rp-new { width: 100%; justify-content: center; min-height: 38px; }
.rp-new.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 14%, transparent); }
.rp-lbl { font: 600 11.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding: 6px 18px; flex: none; display: flex; justify-content: space-between; }
.rp-side .rp-scroll { padding: 0 8px 12px; }
.rp-empty { margin: 6px 10px; font-size: 13.5px; line-height: 1.5; }
.rp-none { margin: 4px 10px; padding: 16px 14px; border: 1px dashed var(--line-2); border-radius: 12px; display: grid; justify-items: start; gap: 4px; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.rp-none svg { width: 18px; height: 18px; margin-bottom: 4px; color: var(--text-3); }
.rp-none b { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.rp-row { font: inherit; color: var(--text); width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 10px; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 4px 10px; cursor: pointer; }
.rp-row:hover { background: var(--card-2); }
.light .rp-row:hover, .cust-light .rp-row:hover { background: var(--card); }
.rp-row.on { background: var(--raise); }
.rp-row:focus-visible { outline: 2px solid var(--line-2); outline-offset: -2px; }
.rp-row > svg { margin-top: 3px; color: var(--red); }
.rp-row > svg:has(path[d^="M6 12.5"]) { color: var(--yellow); }
.rp-row b { font-weight: 600; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.rp-meta { grid-column: 2; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.rp-meta .reply-dot { margin-left: auto; width: 8px; height: 8px; }

/* the right side: a header, what scrolls, what stays at the bottom */
.rp-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rp-mode, .rp-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; }
.rp-mode[hidden] { display: none; }
.rp-pane-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 14px 0 28px; flex: none; }
.rp-pane-h > div { flex: 1 1 auto; min-width: 0; }
.rp-pane-h h3 { margin: 4px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; overflow-wrap: anywhere; }
.rp-pane-h > div > h3:first-child { margin-top: 6px; }
.rp-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.rp-pane .rp-scroll { padding: 18px 28px 24px; }
.rp-back { display: none; }
.rp-pick-one { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--text-3); }
.rp-pick-one p { margin: 0; max-width: 36ch; }

/* the new report: a big title, the words under it, the choices in one row of pickers */
.rp-compose { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; }
.rp-preview { margin: 0 0 12px; font-size: 13.5px; }
.rp-big { font: inherit; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); background: none; border: 0; padding: 0; outline: none; width: 100%; }
.rp-big::placeholder, .rp-plain::placeholder { color: var(--text-3); font-weight: 400; }
.rp-plain { font: inherit; font-size: 15px; line-height: 1.6; color: var(--text); background: none; border: 0; padding: 0; outline: none; width: 100%; resize: none; field-sizing: content; min-height: 4.8em; margin-top: 12px; overflow: hidden; display: block; }
.rp-plain.rp-line { min-height: 0; }
.rp-big:focus-visible, .rp-plain:focus-visible { outline: none; }
.rp-opt { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }
.rp-q { font-size: 13px; color: var(--text-2); }
.rp-q em { font-style: normal; color: var(--text-3); }
.rp-opt .rp-plain { min-height: 3.2em; margin-top: 6px; font-size: 14.5px; }
.rp-opt .rp-plain.rp-line { min-height: 0; }
.rp-compose .att-pending { margin-top: 12px; }
.rp-ctx { margin: 18px 0 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 8px; font-size: 13px; color: var(--text-3); line-height: 1.45; }
.rp-ctx svg { margin-top: 1.5px; }
.rp-ctx > span { min-width: 0; overflow-wrap: anywhere; }
.rp-link { font: inherit; font-size: 13px; color: var(--text-2); background: none; border: 0; padding: 0 2px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; align-items: center; vertical-align: middle; min-height: 28px; }
.rp-link:hover { color: var(--text); }
.rp-compose .err { margin: 12px 0 0; }
.rp-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px 12px 28px; border-top: 1px solid var(--line); }
.rp-pick { position: relative; font: inherit; font-size: 13.5px; color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); border-radius: 999px; min-height: 32px; padding: 0 10px 0 11px;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.light .rp-pick, .cust-light .rp-pick { background: var(--card); }
.rp-pick:focus-within { outline: 2px solid var(--line-2); outline-offset: 1px; }
.rp-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; appearance: none; border: 0; }
.rp-pick select:disabled { cursor: default; }
.rp-pick .rp-k { color: var(--text-3); }
.rp-pick svg.i { width: 14px; height: 14px; }
.rp-pick > svg:first-child { color: var(--red); }
.rp-pick > svg:first-child:has(path[d^="M6 12.5"]) { color: var(--yellow); }
.rp-pick .rp-chev { color: var(--text-3); width: 12px; height: 12px; }
.rp-pick.add { background: transparent; border-style: dashed; color: var(--text-2); }
.rp-pick.add:hover { color: var(--text); }
.rp-foot .att-btn { border-color: transparent; margin-left: -8px; }
.rp-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px 28px; border-top: 1px solid var(--line); background: var(--card); }
.rp-foot .rp-hint { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-3); }
.rp-foot .btn { flex: none; }

/* "Include this chat" (customer/feedback.jsx Composer): a tick, the chat's name, its last two lines.
   rc- is the report's chat; staff see it in employee/feedback.jsx's Chat card. */
.rc-box { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); padding: 10px 12px; min-width: 0; }
.light .rc-box, .cust-light .rc-box { background: var(--card); }
.rc-box.off { background: none; border-style: dashed; }
.rc-tick { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; cursor: pointer; }
.rc-tick input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--green); cursor: pointer; }
.rc-tick b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.rc-tick small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-3); line-height: 1.45; overflow-wrap: anywhere; }
.rc-box.off .rc-tick b { color: var(--text-2); }
.rc-peek { list-style: none; margin: 10px 0 0 28px; padding: 8px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-peek li { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; min-width: 0; }
.rc-peek b { flex: none; font-weight: 600; color: var(--text-2); }
.rc-peek span { min-width: 0; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* staff: the Chat card on a report */
.rc-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-why { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.rc-peek.staff { margin-left: 0; }
.rc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-sub { margin: 0; font-size: 12.5px; color: var(--text-3); }
.fb-chat { display: inline-flex; align-items: center; gap: 4px; }

/* one report: where it is, what was sent, what the team said */
.rp-steps { display: flex; margin: 2px 0 22px; list-style: none; padding: 0; }
.rp-steps li { flex: 1 1 0; min-width: 0; position: relative; padding-top: 16px; font-size: 12.5px; color: var(--text-3); }
.rp-steps li::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: var(--line-2); }
.rp-steps li::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--line-2); box-sizing: border-box; }
.rp-steps li.done { color: var(--text-2); }
.rp-steps li.done::before, .rp-steps li.done::after { background: var(--text-2); border-color: var(--text-2); }
.rp-steps li.now { color: var(--text); font-weight: 600; }
.rp-steps li.now::after { background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(242, 201, 76, 0.18); }
.rp-steps li.now:last-child:not(:first-child)::after { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px rgba(91, 208, 138, 0.18); }
.rp-steps.no li.now:last-child::after { background: var(--text-3); border-color: var(--text-3); box-shadow: none; }
.rp-steps li:last-child { flex: 0 0 auto; }
.rp-steps li:last-child::before { display: none; }
.rp-thread { display: flex; flex-direction: column; gap: 12px; }
.rp-msg { border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); padding: 14px 16px; min-width: 0; }
.rp-msg.fresh { border-color: var(--line-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
.rp-more-msg { margin-right: 28px; }
.rp-who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.rp-who b { color: var(--text); font-weight: 600; }
.rp-msg .rbody dd { font-size: 14px; }
.rp-msg .att-list, .rp-reply .att-list { margin-top: 10px; }
.rp-msg .rp-ctx { margin-top: 12px; }
.rp-reply { margin-left: 28px; border-radius: 12px; padding: 12px 16px; background: rgba(91, 208, 138, 0.08); border: 1px solid rgba(91, 208, 138, 0.25); min-width: 0; }
.rp-reply .rp-who b { color: var(--green-text); }
.rp-text { margin: 0; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.rp-event { margin: 0 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--text-2); }
.rp-event b { font-weight: 600; color: var(--text); }
.rp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); padding: 0; }
.rp-dot.st-new { background: var(--peri); }
.rp-dot.st-plan { background: var(--yellow); }
.rp-dot.st-done { background: var(--green); }
.rp-later { margin: 18px 0 0; font-size: 13px; color: var(--text-3); display: flex; gap: 8px; align-items: center; }
/* answering under a report */
.rp-reply-box { flex: none; border-top: 1px solid var(--line); padding: 10px 16px 12px 20px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.rp-reply-box .err { margin: 0; }
.rp-reply-row { display: flex; align-items: flex-end; gap: 8px; }
.rp-reply-row .att-btn { border-color: transparent; flex: none; }
.rp-reply-row .rp-plain { margin: 0; min-height: 36px; max-height: 160px; overflow-y: auto; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--side); font-size: 14.5px; line-height: 1.5; }
.light .rp-reply-row .rp-plain, .cust-light .rp-reply-row .rp-plain { background: var(--card-2); }
.rp-reply-row .rp-plain:focus-visible { outline: 2px solid var(--line-2); outline-offset: 1px; }
.rp-reply-row .btn { flex: none; min-height: 36px; }
/* "Discard this report?" in place of the buttons */
.rp-ask { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px 14px 28px; border-top: 1px solid var(--line); background: var(--card); }
.rp-ask > span { flex: 1 1 auto; min-width: 0; font-size: 14px; }

/* phones: the whole screen; the list first, a report or the new one over it with ‹ Reports */
@media (max-width: 760px) {
  .rp2, .rp2[open] { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; }
  .rp-side, .rp-pane { flex: 1 1 auto; border-right: 0; }
  .rp2.at-list .rp-pane, .rp2:not(.at-list) .rp-side { display: none; }
  .rp-side, .light .rp-side, .cust-light .rp-side { background: var(--card); }
  .rp-side-h { padding: max(10px, env(safe-area-inset-top)) 6px 12px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rp-side-h h2 { font-size: 20px; }
  .rp-side .rp-x-list { display: inline-flex; }
  .rp-side-h p, .rp-side-h .rp-new { grid-column: 1 / -1; }
  .rp-side-h .rp-new { min-height: 46px; width: calc(100% - 12px); }
  .rp-row { padding: 12px 10px; }
  .rp-pane-h { padding: max(8px, env(safe-area-inset-top)) 6px 0 6px; flex-wrap: wrap; }
  .rp-back { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 15px; color: var(--text-2); background: none; border: 0; min-height: 44px; padding: 0 10px; cursor: pointer; }
  .rp-back svg { transform: rotate(180deg); }
  .rp-pane-h > div { flex-basis: 100%; order: 3; padding: 0 12px; }
  .rp-pane-h > div:empty { display: none; }
  .rp-pane-h .rp-x { margin-left: auto; }
  .rp-pane .rp-scroll { padding: 14px 18px 20px; }
  .rp-reply, .rp-more-msg { margin-left: 14px; margin-right: 0; }
  .rp-more-msg { margin-left: 0; margin-right: 14px; }
  .rp-big, .rp-plain, .rp-opt .rp-plain, .rp-reply-row .rp-plain { font-size: 16px; }
  .rp-pick, .rp-link { min-height: 44px; }
  .rp .icon-btn.rp-x, .rp-foot .att-btn, .rp-reply-row .att-btn { width: 44px; height: 44px; }
  .rp-bar { padding: 10px 16px; gap: 6px; }
  .rp-foot { padding: 10px 16px max(12px, env(safe-area-inset-bottom)); }
  .rp-foot .rp-hint { display: none; }
  .rp-foot .att-btn { margin-left: -6px; }
  .rp-foot .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .rp-foot .btn.ghost { flex: 0 0 auto; padding: 0 14px; }
  .rp-reply-box { padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
  .rp-reply-row .rp-plain { min-height: 44px; padding: 10px 12px; }
  .rp-reply-row .btn { min-height: 44px; }
  .rp-ask { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); }
  .rp-ask .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .rp-ask > span { flex-basis: 100%; }
}
@media (max-width: 400px) { .rp-pick .rp-k { display: none; } }
/* a phone on its side: the whole screen, the list stays on the left */
@media (max-height: 500px) and (min-width: 761px) {
  .rp2 { width: 100%; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .rp2[open] { grid-template-columns: 250px minmax(0, 1fr); }
  .rp-side-h { padding-top: 12px; }
  .rp-side-h p { display: none; }
  .rp-pane-h { padding-top: 10px; }
}
/* touch screens of any width (a phone on its side, a tablet): 16 px text so iOS doesn't zoom, 44 px taps */
@media (pointer: coarse) {
  .rp-big, .rp-plain, .rp-opt .rp-plain, .rp-reply-row .rp-plain { font-size: 16px; }
  .rp-pick, .rp-link, .rp-new, .rp-reply-row .btn, .rp-reply-row .rp-plain, .rp-foot .btn, .rp-ask .btn, .rp-pick-one .btn { min-height: 44px; }
  .rp .icon-btn.rp-x, .rp-foot .att-btn, .rp-reply-row .att-btn { width: 44px; height: 44px; }
}
@media (pointer: coarse) { .rc-tick { min-height: 44px; align-items: center; } }

/* ---------- pop-ups scroll without a scroll bar (common/scroll.js) ----------
   Wheel, trackpad, touch and keys still scroll. A soft fade at the top or bottom edge shows while
   there is more that way: the content fades into the pop-up's own background, in either theme. */
@property --edge-up { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --edge-down { syntax: "<length>"; inherits: false; initial-value: 0px; }
.td-nav, .td-body, .td-tabs, .cl-b, .pf-body, .sh-b, .rp-scroll, .rp-reply-box textarea, .rp textarea { scrollbar-width: none; }
.td-nav::-webkit-scrollbar, .td-body::-webkit-scrollbar, .td-tabs::-webkit-scrollbar, .cl-b::-webkit-scrollbar, .pf-body::-webkit-scrollbar,
.sh-b::-webkit-scrollbar, .rp-scroll::-webkit-scrollbar, .rp textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
.td-nav, .td-body, .cl-b, .pf-body, .sh-b, .rp-scroll {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-up), #000 calc(100% - var(--edge-down)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-up), #000 calc(100% - var(--edge-down)), transparent 100%);
  transition: --edge-up 0.15s, --edge-down 0.15s;
}
@media (prefers-reduced-motion: reduce) { .td-nav, .td-body, .cl-b, .pf-body, .sh-b, .rp-scroll { transition: none; } }

/* ---------- sharing: the dialog (a cl-dlg), the shared view, the public page ---------- */
.sh-dlg { width: min(560px, calc(100vw - 32px)); }
.sh-sub { margin: -6px 0 6px; padding: 0 20px; color: var(--text-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-b { padding: 4px 20px 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }
.sh-opts { display: flex; flex-direction: column; gap: 8px; }
.sh-opt { display: grid; grid-template-columns: 18px 34px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.sh-opt.on { border-color: var(--line-2); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.sh-opt.off { opacity: 0.6; }
.sh-opt > input { margin: 9px 0 0; width: 16px; height: 16px; accent-color: var(--btn-bg); cursor: pointer; }
.sh-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--raise); display: inline-flex; align-items: center; justify-content: center; color: var(--text); flex: none; }
.sh-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-t label { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.sh-opt.off .sh-t label { cursor: default; }
.sh-t b { font-size: 14.5px; font-weight: 600; }
.sh-t small { font-size: 13px; color: var(--text-2); line-height: 1.45; }
.sh-people { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sh-matches { display: flex; flex-direction: column; gap: 2px; padding: 4px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); }
.sh-match { font: inherit; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.sh-match:hover, .sh-match:focus-visible { background: var(--raise); }
.sh-match .nm, .sh-person .nm { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sh-match .nm b { font-size: 14px; }
.sh-match .nm small { font-size: 12.5px; color: var(--text-3); }
.sh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 2px 0 4px; border-radius: 999px; background: var(--raise); font-size: 13px; }
.av.sm { width: 22px; height: 22px; border-radius: 999px; font-size: 11px; }
.sh-chip button { width: 24px; height: 24px; border-radius: 999px; border: 0; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.sh-chip button:hover { color: var(--text); background: var(--card-2); }
.sh-what { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.sh-what p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.sh-what p b { color: var(--text); }
.sh-what .d-label { color: var(--text-3); }
.sh-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--side); border: 1px solid var(--line); }
.light .sh-link, .cust-light .sh-link { background: var(--card-2); }
.sh-link code { flex: 1 1 auto; min-width: 0; font: 12.5px var(--mono); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-b .err { margin: 0; }
.btn.sh-open { margin-right: 2px; }
.sh-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); flex-wrap: wrap; }
.sh-banner > div { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; flex: 1 1 240px; }
.sh-banner .faint { font-size: 13px; }
.sh-ro { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; }
.item .n.sh-from { font-size: 12px; }
@media (max-width: 760px) {
  .cl-dlg.sh-dlg { width: 100%; height: auto; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); }
  .sh-opt { grid-template-columns: 20px minmax(0, 1fr); }
  .sh-opt .sh-ic { display: none; }
  .sh-b { padding: 4px 14px 12px; }
  .sh-sub { padding: 0 18px; }
  .sh-chip { min-height: 36px; }
  .sh-chip button { width: 32px; height: 32px; }
  .sh-banner .btn { width: 100%; justify-content: center; }
}
@media (max-width: 760px), (pointer: coarse) {
  .sh-opt > input { width: 20px; height: 20px; margin-top: 7px; }
  .sh-match { min-height: 46px; }
}

/* the public page: no sidebar, no account */
.pub { min-height: 100vh; min-height: 100dvh; }
.pub-top { display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: var(--side); }
.pub-main { max-width: 820px; margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 20px; }
.pub-h h1 { margin: 8px 0 4px; font-size: 24px; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.pub-h .faint { margin: 0; font-size: 13.5px; }
.pub-f { padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.grp-fold .count { flex: none; font-size: 11.5px; line-height: 18px; color: var(--text-2); background: var(--raise); border-radius: 999px; padding: 0 7px; }

/* ---------- shared additions: settings, theme, reports, staff replies ---------- */
.me .icon-btn { width: 32px; height: 32px; }
.me { gap: 6px; }
.me .who { margin-right: 2px; }
.icon-btn.on { color: var(--text); background: var(--raise); }
.item .badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--green); color: #0F2418; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.light .item .badge { color: #fff; }
.reply-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.18); flex: none; }

/* dropdowns match text boxes everywhere */
select.field, .light select.field, .cust-light select.field { appearance: none; -webkit-appearance: none; min-height: 36px; padding: 0 32px 0 12px; line-height: 1.2;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
select.field:disabled { opacity: 0.6; }

/* settings */
.set-sec { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.set-h { display: flex; gap: 14px; align-items: flex-start; }
.set-h h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.set-h p { margin: 3px 0 0; font-size: 14px; line-height: 1.55; max-width: 70ch; }
.set-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--raise); color: var(--text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.set-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.theme-opt { font: inherit; text-align: left; color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.theme-opt:hover { border-color: var(--text-3); }
.theme-opt.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.16); }
.theme-opt .swatch { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); display: block; }
.theme-opt .theme-l { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14.5px; }
.theme-opt .theme-l svg { color: var(--green); }
.theme-opt .faint { font-size: 12.5px; line-height: 1.4; }
.made { border: 1px solid rgba(91, 208, 138, 0.5); background: rgba(91, 208, 138, 0.08); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.tokline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tokline code { flex: 1 1 260px; overflow-wrap: anywhere; background: var(--side); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.tok-list { display: flex; flex-direction: column; }
.tok { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); font-size: 14px; min-width: 0; }
.tok:first-child { border-top: 0; }
.tok > svg { color: var(--text-2); }
.tok b { font-weight: 600; }
.snips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.snip { border: 1px solid var(--line); border-radius: 10px; background: var(--side); min-width: 0; overflow: hidden; }
.snip-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }
.snip pre { margin: 0; padding: 10px 12px; font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
@media (max-width: 760px) {
  .theme-grid { grid-template-columns: minmax(0, 1fr); }
  .theme-opt { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
  .theme-opt .swatch { grid-row: span 2; }
  .snips { grid-template-columns: minmax(0, 1fr); }
  .set-sec { padding: 16px; }
}

/* MCP: token access and the list of tools */
.tok { flex-wrap: wrap; }
.tok-t { min-width: 0; flex: 1 1 220px; }
.tok-m { display: block; font-size: 13px; margin-top: 1px; }
.mcp-access > button { white-space: nowrap; }
.pill.mcp-chg { color: var(--yellow); background: rgba(242, 201, 76, 0.13); font-weight: 600; }
.pill.mcp-op { color: var(--peri); background: rgba(142, 155, 255, 0.14); font-weight: 600; }
.pill.mcp-dev { color: var(--text); font-weight: 600; }
.pill.mcp-new { color: #B9CCE3; background: transparent; box-shadow: inset 0 0 0 1px rgba(185, 204, 227, 0.45); font-weight: 600; }
.pill.mcp-out { color: #B9CCE3; background: rgba(185, 204, 227, 0.14); font-weight: 600; }
.light .pill.mcp-new, .cust-light .pill.mcp-new { color: #3A5573; box-shadow: inset 0 0 0 1px rgba(58, 85, 115, 0.45); }
.light .pill.mcp-out, .cust-light .pill.mcp-out { color: #3A5573; background: rgba(58, 85, 115, 0.1); }
.light .pill.mcp-op, .cust-light .pill.mcp-op { color: #4B57D6; }
.mcp-find { position: relative; display: flex; align-items: center; min-width: 180px; }
.mcp-find svg { position: absolute; left: 11px; color: var(--text-3); pointer-events: none; }
.mcp-find .field { width: 100%; padding-left: 34px; }
.mcp-cat { columns: 2 320px; column-gap: 24px; }
.mcp-g { break-inside: avoid; margin: 0 0 18px; }
.mcp-gh { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); padding: 0 2px 6px; border-bottom: 1px solid var(--line); }
.mcp-gh span { margin-left: auto; letter-spacing: 0; font-weight: 500; color: var(--text-3); text-transform: none; }
.mcp-t { padding: 8px 2px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mcp-t1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mcp-t1 code { font: 13px var(--mono); color: var(--text); margin-right: auto; overflow-wrap: anywhere; }
.mcp-d { font-size: 13.5px; color: var(--text-3); line-height: 1.45; }
.mcp-kept { margin: 0; font-size: 13.5px; color: var(--text-3); line-height: 1.55; }
.mcp-kept b { color: var(--text-2); font-weight: 600; }
@media (max-width: 760px) {
  .mcp-make > .grow { flex-basis: 100%; }
  .mcp-make .seg, .mcp-filters .seg, .tok .seg { width: 100%; }
  .mcp-make .seg > *, .mcp-filters .seg > *, .tok .seg > * { flex: 1 1 0; justify-content: center; padding: 0 6px; }
  .mcp-make .btn { width: 100%; justify-content: center; }
  .mcp-find { flex-basis: 100%; }
  .mcp-cat { columns: 1; }
  .tok-t { flex-basis: 100%; }
  .tok > svg { display: none; }
}

/* reports: status, kind, form, body */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--raise); color: var(--text-2); }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-new { color: var(--peri); background: rgba(142, 155, 255, 0.14); }
.st-seen { color: var(--text-2); }
.st-plan { color: var(--yellow); background: rgba(242, 201, 76, 0.13); }
.st-done { color: var(--green-text); background: rgba(91, 208, 138, 0.14); }
.st-no { color: var(--text-3); }
.light .st-new { color: #4B57D6; }
.kind { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.kind svg { width: 14px; height: 14px; }
.kind-bug svg { color: var(--red); }
.kind-feature svg { color: var(--yellow); }
.rform { display: flex; flex-direction: column; gap: 14px; }
.rform label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rform label > span { font-size: 13px; color: var(--text-2); }
.rform em { font-style: normal; color: var(--text-3); }
.rform .field { width: 100%; }
.rform textarea.field { padding: 9px 12px; resize: vertical; line-height: 1.5; }
.rrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rkind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rkind button { font: inherit; color: var(--text); text-align: left; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; min-height: 64px; }
.rkind button svg { width: 22px; height: 22px; color: var(--text-2); }
.rkind button span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.rkind button small { color: var(--text-3); font-size: 12.5px; }
.rkind button.on { border-color: var(--green); box-shadow: 0 0 0 3px rgba(91, 208, 138, 0.15); }
.rkind button.on:first-child svg { color: var(--red); }
.rkind button.on:last-child svg { color: var(--yellow); }
.ract { display: flex; justify-content: flex-end; gap: 8px; }
.rbody { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rbody dt { font-size: 12.5px; color: var(--text-3); margin-bottom: 2px; }
.rbody dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
@media (max-width: 560px) { .rrow, .rkind { grid-template-columns: minmax(0, 1fr); } }

/* a message held at a guardrail (common/chat.jsx Card "guard") and the paused message box */
.gd-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(242, 201, 76, 0.38); background: rgba(242, 201, 76, 0.07); max-width: 620px; }
.gd-card.declined { border-color: rgba(255, 124, 124, 0.38); background: rgba(255, 124, 124, 0.06); }
.gd-card.granted { border-color: rgba(91, 208, 138, 0.38); background: rgba(91, 208, 138, 0.06); }
.gd-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(242, 201, 76, 0.16); color: var(--yellow); }
.gd-card.declined .gd-ic { background: rgba(255, 124, 124, 0.14); color: var(--red); }
.gd-card.granted .gd-ic { background: rgba(91, 208, 138, 0.14); color: var(--green-text); }
.gd-card b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.gd-card p { margin: 0; color: var(--text-2); font-size: 14px; }
.gd-chip { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: var(--yellow); background: rgba(242, 201, 76, 0.13); }
.light .gd-chip, .light .gd-ic { color: #8A6508; }
.gd-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-size: 14px; }
.gd-lock .grow { flex: 1; }
@media (max-width: 760px), (pointer: coarse) { .gd-lock .btn { min-height: 44px; } }


@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .me .icon-btn { width: 44px; height: 44px; flex: none; }
  .me { gap: 4px; }
  .me .who { min-width: 0; }
}


/* ---------- The Claude-style "Recents" sidebar both portals share (common/sidebar.jsx): head with
   Hide, rows, Recents with a ⋯ menu per row, you at the bottom with a menu that opens upwards; the
   icon rail it folds to on a desktop; the phone bar. Only the middle scrolls, so the head and you
   stay in view on short windows and phones. ---------- */
.side.sb-side { flex: 0 0 313px; width: 313px; padding: 10px 10px 8px; gap: 1px; overflow: hidden; }
.side.drawer.sb-side { width: min(320px, 88vw); padding: max(10px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.sb-head { flex: none; display: flex; align-items: center; gap: 4px; height: 40px; padding-left: 8px; margin-bottom: 6px; }
.sb-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 650; font-size: 16.5px; letter-spacing: -0.01em; }
.sb-brand svg.i { width: 19px; height: 19px; }
.sb-brand .tag { font-size: 11.5px; font-weight: 500; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 7px; line-height: 18px; letter-spacing: 0; }
.sb-ib { position: relative; width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); text-decoration: none; cursor: pointer; }
.sb-ib:focus-visible, .sb-acct:focus-visible, .sb-r:focus-visible, .sb-dots:focus-visible, .sb-lbl:focus-visible { outline: 2px solid var(--text-2); outline-offset: -2px; }
.sb-nav { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.sb-side .item { min-height: 36px; position: relative; width: 100%; font: inherit; font-size: 14.5px; color: var(--text); text-align: left; background: transparent; border: 0; cursor: pointer; }
.sb-side .item .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-side .item .n, .sb-side .item .badge { flex: none; margin-left: auto; }
.sb-side .item .badge + .n { margin-left: 6px; }
.sb-side .item > .sb-dot { flex: none; margin-left: auto; width: 7px; height: 7px; }
.sb-side .item:focus-visible { outline: 2px solid var(--text-2); outline-offset: -2px; }
/* The page you're on is lit (graphite's .item.on loses to the transparent background above). New
   conversation is an action, never lit. */
.sb-side .item.on:not(.sb-new) { background: var(--raise); }
.sb-kbd { margin-left: auto; font: 11px var(--mono); color: var(--text-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 5px; line-height: 18px; }
/* New conversation: claude.ai's filled + circle */
.sb-new { font-weight: 600; margin-bottom: 2px; }
.sb-plus { width: 22px; height: 22px; margin-left: -3px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--text); color: var(--bg); }
.sb-plus svg.i { color: var(--bg) !important; stroke-width: 2.2; }
.sb-new.off { opacity: 0.5; cursor: not-allowed; }
.sb-new.off:hover { background: transparent; }
.sb-note { list-style: none; margin: 0 0 6px; padding: 0 10px; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.sb-fold > svg.i:last-child { margin-left: 4px; color: var(--text-3); transition: transform 0.15s; }
.sb-fold[aria-expanded="true"] > svg.i:last-child { transform: rotate(90deg); }
.sb-fold .reply-dot { margin-left: auto; width: 7px; height: 7px; }
/* Author display:flex on .sb-sub wins over the UA [hidden] { display:none }, so closed folds
   would still show their children. Force hidden shut. */
[hidden] { display: none !important; }
.sb-sub { display: flex; flex-direction: column; gap: 1px; }
.sb-sub .item { padding-left: 36px; color: var(--text-2); }
.sb-sub .item.on { color: var(--text); }
.sb-sub.flush .item { padding-left: 10px; color: var(--text); }
.sb-sub.flush .item svg.i { color: var(--text-2); }
/* The body: two stacked panes, your pages and Recents, that cross-fade with a small drift, and quiet
   Menu | Recents tabs on top of you with a thin underline that slides to the tab in use. */
.sb-nav:has(> .sb-panes) { overflow: hidden; padding-bottom: 0; }
.sb-panes { --ease: cubic-bezier(0.32, 0.72, 0, 1); flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.sb-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sb-pane { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; transition: transform 0.5s var(--ease), opacity 0.42s ease, filter 0.42s ease; will-change: transform, opacity; }
.on-recents .sb-pane:first-child { transform: translateX(-14px); opacity: 0; filter: blur(4px); }
.on-menu .sb-pane-r { transform: translateX(14px); opacity: 0; filter: blur(4px); }
/* phones: the panes slide and fade without the blur, which is a full repaint per frame there */
@media (pointer: coarse) { .on-recents .sb-pane:first-child, .on-menu .sb-pane-r { filter: none; } .sb-pane { transition: transform 0.32s var(--ease), opacity 0.26s ease; } }
.sb-recents { display: flex; flex-direction: column; min-width: 0; margin-top: auto; }
@keyframes sb-rec-in { from { opacity: 0; transform: translateY(8px); } }
.on-recents .sb-pane-r .sb-li { animation: sb-rec-in 0.55s var(--ease) both; animation-delay: calc(var(--i) * 10ms + 60ms); }
.sb-tabs { position: relative; flex: none; display: flex; align-items: center; gap: 18px; height: 32px; padding: 4px 10px 0; margin-bottom: 6px; border-top: 1px solid var(--line); }
.sb-tabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color 0.35s ease; }
.sb-tabs button::before { content: ""; position: absolute; inset: -9px -6px; }
.sb-tabs button:hover, .sb-tabs button.on { color: var(--text); }
.sb-tabs button:focus-visible { outline: 2px solid var(--text-2); outline-offset: 3px; border-radius: 4px; }
.sb-tabs .reply-dot { width: 7px; height: 7px; margin-left: 0; }
.sb-tab-n { font-size: 10.5px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sb-ul { position: absolute; bottom: 1px; left: 0; height: 2px; width: var(--w, 34px); transform: translateX(var(--x, 10px)); border-radius: 2px; background: var(--text); transition: transform 0.5s var(--ease), width 0.5s var(--ease); }
/* Recents */
.sb-lbl { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: 14px 0 2px; padding: 0 8px 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; cursor: pointer; }
.sb-lbl:hover { color: var(--text-2); }
.sb-lbl > svg.i { opacity: 0; transition: transform 0.15s, opacity 0.15s; }
.sb-lbl:hover > svg.i, .sb-lbl:focus-visible > svg.i, .sb-lbl[aria-expanded="false"] > svg.i { opacity: 1; }
.sb-lbl[aria-expanded="true"] > svg.i { transform: rotate(90deg); }
.sb-lbl .reply-dot { margin-left: 0; width: 7px; height: 7px; }
.sb-lbl .badge { margin-left: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--green); color: #0F2418; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.light .sb-lbl .badge, .cust-light .sb-lbl .badge { color: #fff; }
.sb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-li { position: relative; }
.sb-c { color: var(--text-2) !important; padding-right: 36px; }
.sb-c.on { color: var(--text) !important; }
.sb-c .reply-dot { margin-left: 4px; }
.sb-dots { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); cursor: pointer; opacity: 0; }
.sb-li:hover .sb-dots, .sb-li.open .sb-dots, .sb-li.on .sb-dots, .sb-dots:focus-visible { opacity: 1; }
.sb-li:hover .sb-c, .sb-li.open .sb-c { background: var(--card); }
.sb-li.on .sb-c { background: var(--raise); }
.sb-dots:hover, .sb-li.open .sb-dots { color: var(--text); background: var(--raise); }
.sb-li.on .sb-dots:hover, .sb-li.on.open .sb-dots { background: var(--line-2); }
.sb-all .t { color: var(--text-3); }
.sb-rename { padding: 1px 0; }
.sb-rename .field { width: 100%; min-height: 36px; font-size: 14.5px; }
/* You at the bottom */
.sb-foot { flex: none; display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.sb-acct { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 10px 0 6px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sb-acct.open { background: var(--card); }
.sb-acct .who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-acct .who b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acct .who small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-acct > svg.i { flex: none; color: var(--text-3); }
.sb-avw { position: relative; flex: none; display: inline-flex; }
.av.sb-av { width: 30px; height: 30px; border-radius: 50%; font-size: 12.5px; }
.sb-st { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--side); background: var(--text-3); }
.sb-st.ok { background: var(--green); }
.sb-st.warn { background: var(--yellow, #E6B450); }
.sb-st.bad { background: var(--red); }
.sb-bug, .sb-search { width: 36px; height: 36px; color: var(--text-3); }
/* Menus (account, row ⋯) */
.sb-menu { position: fixed; z-index: 60; display: flex; flex-direction: column; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.light .sb-menu, .cust-light .sb-menu { box-shadow: 0 18px 50px rgba(20, 20, 30, 0.16); }
.sb-mh { padding: 6px 10px 4px; font-size: 13px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-mstat { display: flex; align-items: center; gap: 8px; padding: 0 10px 6px; font-size: 12.5px; color: var(--text-3); }
.sb-mi { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; text-decoration: none; cursor: pointer; }
.sb-mi:focus-visible { background: var(--raise); outline: none; }
.sb-mi > svg.i { color: var(--text-2); }
.sb-mi .t { white-space: nowrap; }
.sb-mi .r { margin-left: auto; padding-left: 10px; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.sb-mi .badge { margin-left: auto; }
.sb-mi.danger, .sb-mi.danger > svg.i { color: var(--red); }
.sb-sep { height: 1px; margin: 5px 10px; background: var(--line); }
.sb-theme { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px; font-size: 14.5px; }
.sb-theme > svg.i { color: var(--text-2); }
.sb-seg { margin-left: auto; display: inline-flex; padding: 2px; background: var(--side); border: 1px solid var(--line-2); border-radius: 8px; }
.sb-seg button { font: inherit; font-size: 11.5px; padding: 2px 7px; border-radius: 6px; color: var(--text-2); background: transparent; border: 0; cursor: pointer; }
.sb-seg button.on { background: var(--raise); color: var(--text); }
.sb-seg button:focus-visible { outline: 2px solid var(--text-2); outline-offset: 1px; }
/* The tooltip (useTips) */
.sb-tip { position: fixed; z-index: 90; pointer-events: none; max-width: 280px; padding: 5px 10px; font-size: 13px; line-height: 1.35; white-space: pre-line; color: var(--text); background: var(--card); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.light .sb-tip, .cust-light .sb-tip { box-shadow: 0 10px 30px rgba(20, 20, 30, 0.14); }
/* The icon rail (desktop, sidebar folded) */
.side.sb-rail { flex: 0 0 60px; width: 60px; padding: 10px 0; align-items: center; gap: 4px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.sb-r { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); text-decoration: none; cursor: pointer; }
.sb-r.on { background: var(--raise); color: var(--text); }
.sb-r.off { opacity: 0.5; cursor: not-allowed; }
.sb-r:first-child { margin-bottom: 6px; }
.sb-rb { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--green); color: #0B2615; font: 600 10px/16px -apple-system, BlinkMacSystemFont, sans-serif; font-style: normal; text-align: center; }
.sb-rdot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.sb-rail .sb-bug, .sb-rail .sb-search { width: 40px; height: 40px; }
.sb-rme { margin-top: 2px; }
@media (hover: hover) {
  .sb-ib:hover, .sb-r:hover { background: var(--card); color: var(--text); }
  .sb-side .item:not(.on):not(.off):hover { background: var(--card); }
  .sb-acct:hover { background: var(--card); }
  .sb-mi:hover { background: var(--raise); }
}
/* The phone bar, like Claude's app: ☰ · title · new */
@media (max-width: 760px) {
  .mbar.sb-bar { gap: 6px; padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left)); background: var(--bg); }
  .sb-mb { width: 44px; height: 44px; color: var(--text); }
  .sb-mb.off { opacity: 0.4; }
  .sb-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; font-size: 15.5px; white-space: nowrap; }
  .sb-title > span { overflow: hidden; text-overflow: ellipsis; }
}
/* Touch and small screens: 44 px rows, ⋯ always shown (no hover to find it). */
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  .sb-side .item, .sb-mi { min-height: 44px; font-size: 15.5px; }
  .sb-ib { width: 44px; height: 44px; }
  .sb-lbl { min-height: 40px; font-size: 13px; }
  .sb-lbl > svg.i { opacity: 1; }
  .sb-dots { width: 40px; height: 40px; right: 2px; opacity: 1; }
  .sb-c { padding-right: 46px; }
  .sb-acct { height: 54px; }
  .sb-theme { min-height: 52px; font-size: 15.5px; }
  .sb-theme { gap: 10px; }
  .sb-seg button { min-height: 36px; padding: 0 8px; font-size: 13px; }
  .sb-rename .field { min-height: 44px; font-size: 16px; }
  .sb-menu { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-fold > svg.i:last-child, .sb-lbl > svg.i, .sb-pane, .sb-ul { transition: none; }
  .on-recents .sb-pane-r .sb-li { animation: none; }
}

/* ---------- "Your sign-up" on the customer front page ---------- */
.d-welcome.d-signup { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.d-welcome.d-signup .d-label { margin: 0; }
.d-welcome.d-signup .d-signup-t { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); white-space: normal; }
.d-signup-t b { display: block; margin-bottom: 2px; color: var(--text); font-weight: 600; }
.d-ask { font-size: inherit; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.d-signup .d-big { justify-content: space-between; }
.d-signup.again { margin-bottom: 16px; }

/* ---------- What hearth did on the way to an answer, on a timeline (common/steps.jsx), both portals.
   Shape says what kind of step: thinking = outline, a tool = solid, writing = stripes, didn't work =
   red outline. Bars are seconds (--t0, --d) against the time window (--win) the component eases.
   Loaded after chat.css (uses its --acc and cx-pulse / cx-shimmer). ---------- */
.sx { --sx-c: var(--acc); --sx-stripe: rgba(28, 28, 31, 0.42); container-type: inline-size; display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: -2px 0 -2px; }
.light .sx, .cust-light .sx { --sx-stripe: rgba(255, 255, 255, 0.5); }

/* every button here shows its own pressed state, so no grey/blue tap flash on phones */
.sx button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* a bar */
.sx-k { position: absolute; display: block; border-radius: 4px; background: var(--sx-c); left: calc(var(--t0, 0) / var(--win, 1) * 100%); width: max(3px, calc(var(--d, 0) / var(--win, 1) * 100%)); }
.sx-k.k-think { background: color-mix(in srgb, var(--sx-c) 18%, transparent); box-shadow: inset 0 0 0 1.5px var(--sx-c); }
.sx-k.k-write { background-image: repeating-linear-gradient(-45deg, var(--sx-stripe) 0 2px, transparent 2px 6px); }
.sx-k.bad { background: color-mix(in srgb, var(--red) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--red); background-image: none; }

/* the line you click: what it's doing, or what it did */
.sx-h { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; padding: 0 10px 0 8px; margin-left: -8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font: inherit; font-size: 13px; text-align: left; }
.sx-h:hover { background: var(--card); color: var(--text-2); }
.sx.live .sx-h { color: var(--text-2); }
.sx-hi { display: grid; place-items: center; width: 14px; height: 14px; flex: none; }
.sx-hi svg { width: 14px; height: 14px; transition: transform 0.18s; }
.sx.open .sx-hi svg { transform: rotate(90deg); }
.sx-ht { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sx-mini { position: relative; flex: none; width: 96px; height: 6px; border-radius: 3px; background: var(--raise); overflow: hidden; }
.sx-mini .sx-k { top: 0; bottom: 0; border-radius: 1px; box-shadow: none; }
.sx-mini .sx-k.k-think { background: color-mix(in srgb, var(--sx-c) 45%, transparent); }
.sx-mini .sx-k.bad { background: var(--red); }

/* the steps */
.sx-b { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 6px 6px; margin-left: 1px; border-left: 2px solid var(--line-2); }
.sx-wrap { position: relative; }
.sx-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sx-scale, .sx-btn, .sx-x { display: grid; grid-template-columns: 16px minmax(0, 1fr) 48px minmax(120px, 34%); column-gap: 10px; align-items: center; }
.sx-scale { padding: 0 8px; min-height: 22px; font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sx-scale > .sx-gap { grid-column: 2 / 4; }
.sx-scale .sx-tr { position: relative; align-self: stretch; min-height: 22px; overflow: hidden; border-bottom: 1px solid var(--line); }
.sx-scale .sx-tr span { position: absolute; bottom: 4px; left: calc(var(--x) / var(--win, 1) * 100%); transform: translateX(-50%); white-space: nowrap; }
.sx-scale .sx-tr span:first-child { transform: none; }
.sx-scale .sx-tr span::before { content: ""; position: absolute; left: 50%; bottom: -4px; width: 1px; height: 4px; background: var(--line-2); }
.sx-scale .sx-tr span:first-child::before { left: 0; }
.sx-btn { width: 100%; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; line-height: 1.45; text-align: left; }
.sx-btn:hover, .sx-row.sel > .sx-btn { background: var(--card); }
.sx-btn:focus-visible { outline: 2px solid var(--line-2); outline-offset: -2px; }
.sx-ico { display: grid; place-items: center; color: var(--text-3); }
.sx-ico svg { width: 14px; height: 14px; }
.sx-row.bad .sx-ico, .sx-row.bad .sx-s { color: var(--red); }
.sx-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-l b { font-weight: 500; color: var(--text); }
.sx-s { color: var(--text-3); }
.sx-d { text-align: right; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-row.run .sx-d { color: var(--text); }
.sx-btn .sx-tr { position: relative; align-self: stretch; min-height: 34px; }
.sx-btn .sx-k { top: 50%; height: 8px; transform: translateY(-50%); }
.sx-row.run .sx-l b { background: linear-gradient(90deg, var(--text-3) 0%, var(--text) 50%, var(--text-3) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cx-shimmer 1.6s linear infinite; }
@media (pointer: coarse) { .sx-row.run .sx-l b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); animation: cx-breathe 1.6s ease-in-out infinite; } }
/* the running step's bar has a bright leading edge: that edge is "now" */
.sx-row.run .sx-btn .sx-k::after { content: ""; position: absolute; right: -1px; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--text); }
.sx-row.in { animation: sx-in 0.26s ease-out both; }
@keyframes sx-in { from { opacity: 0; transform: translateY(3px); } }
.sx-now { position: absolute; top: 21px; bottom: 0; width: 1.5px; margin-left: -0.75px; border-radius: 1px; background: var(--text); opacity: 0.7; pointer-events: none; }

/* an opened step: what it found, its thinking, the numbers */
.sx-x { padding: 0 8px; }
.sx-xb { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 2px 0 12px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.sx-found { color: var(--text); overflow-wrap: anywhere; }
.sx-row.bad .sx-found { color: var(--red); }
.sx-meta { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sx-meta.mono { font-family: var(--mono); font-size: 11.5px; }
.sx-thought { margin: 0; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-3); overscroll-behavior: contain; }
.sx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 8px 0; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sx-foot button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: 12.5px; }
.sx-foot button:hover { background: var(--card); color: var(--text); }
.sx-foot button svg { width: 13px; height: 13px; }

/* a narrow column (phones): the bar sits under the words, the scale keeps lining up with it */
@container (max-width: 560px) {
  .sx-btn, .sx-x { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .sx-scale { grid-template-columns: 16px minmax(0, 1fr); }
  .sx-scale > .sx-gap { display: none; }
  .sx-scale .sx-tr { grid-column: 2; }
  .sx-btn { padding: 8px 8px 7px; align-items: start; }
  .sx-btn > .sx-ico { margin-top: 2px; }
  .sx-l { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .sx-btn > .sx-tr { grid-column: 2 / 4; min-height: 12px; margin-top: 5px; }
  .sx-btn .sx-k { height: 5px; }
  .sx-xb { grid-column: 2 / 4; }
  .sx-now { display: none; }
}
@container (max-width: 420px) { .sx-mini { display: none; } }
@media (pointer: coarse) { .sx-h, .sx-foot button { min-height: 44px; } .sx-btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .sx-row.run .sx-l b { animation: none; color: var(--text); background: none; }
  .sx-row.in { animation: none; }
  .sx-hi svg { transition: none; }
}

/* ---------- touch: fingertip-sized controls (44 px) ----------
   Loaded after the other files in src/css (alphabetical), so it wins over rules that size controls
   for a mouse, e.g. shared.css's 36 px select.field. Same conditions as graphite.css's touch block. */
@media (max-width: 760px), (pointer: coarse), (max-height: 500px) {
  select.field, .light select.field, .cust-light select.field { min-height: 44px; }
  /* "Forgot?" on the sign-in pages: a 44 px tap area without moving anything. */
  .d-tlink { padding: 12px 8px; margin: -12px -8px; }
  /* 16px or iOS zooms in on focus: the sign-up's text box too, on a phone held sideways */
  textarea.d-field { font-size: 16px; }
  /* Project page tabs (Holdups, Outline, Tools, Map). */
  .pj-tabs button { min-height: 44px; }
  /* Inline links in the Projects MCP card and its steps: a 44 px tap area without moving the text. */
  .pj-mcp p a, .pj-steps a { padding-block: 14px; }
}

/* The version in the sign-in's top-right corner as a button, and the "What's new" panel it drops
   (common/whatsnew.jsx): just the number in the corner, and a small quiet card over the pixels. */
.door.px > button.px-no { z-index: 5; display: inline-flex; align-items: center; gap: 7px; margin: -7px -10px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--text-3); font: 500 13px var(--mono); cursor: pointer; transition: opacity 0.35s, color 0.15s; }
.door.px > button.px-no:hover, .door.px > button.px-no[aria-expanded="true"] { color: var(--text); }
.door.px > button.px-no:focus-visible { outline: 2px solid rgba(var(--ice-rgb), 0.7); outline-offset: 2px; }
.wn-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--ice); }

.door.px > .wn-pop { position: absolute; z-index: 6; top: max(68px, calc(env(safe-area-inset-top) + 40px)); right: 22px; width: 312px; max-width: calc(100% - 24px); padding: 12px 6px 6px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32); text-align: left; cursor: auto; animation: wn-in 0.18s ease-out; max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px); overflow-y: auto; scrollbar-width: none; }
.cust-light .door.px > .wn-pop { box-shadow: var(--d-shadow); }
.door.px > .wn-pop::-webkit-scrollbar { display: none; }
@keyframes wn-in { from { opacity: 0; transform: translateY(-6px); } }
.wn-h { margin: 0 12px 2px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--text-3); }
.wn-i { padding: 8px 12px 10px; }
.wn-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.wn-v { font: 500 12px var(--mono); color: var(--text-2); }
.wn-row time { margin-left: auto; white-space: nowrap; }
/* the version you have */
.wn-now { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ice); }
.wn-t { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.wn-i:first-of-type .wn-t { color: var(--text); }

/* touch: a 44 px tap area round the small version */
@media (hover: none) { .door.px > button.px-no { padding: 15px 14px; margin: -15px -14px; } }
@media (max-width: 640px) {
  .door.px > button.px-no { font-size: 12px; }
  .door.px > .wn-pop { left: auto; right: 12px; width: min(312px, calc(100% - 24px)); top: max(54px, calc(env(safe-area-inset-top) + 32px)); }
}
@media (prefers-reduced-motion: reduce) { .door.px > .wn-pop { animation: none; } }

/* Pages narrower than the room next to the sidebar sit in the middle of it, like the conversation
   column, with each page's title bar lined up over its content. */
.content.ug-page, .content.pj-page { width: 100%; margin-inline: auto; }
.top:has(+ .content.ug-page) { width: 100%; max-width: 920px; margin-inline: auto; }
.top:has(+ .content.pj-page) { width: 100%; max-width: 1180px; margin-inline: auto; }

/* ---- The Lounge's rules (customer/loungerules.jsx): a small pop-up before the first visit ---- */
.lr { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); overflow: hidden; }
.light .lr, .cust-light .lr { box-shadow: 0 24px 64px rgba(20, 24, 40, 0.18); }
.lr::backdrop { background: rgba(0, 0, 0, 0.5); }
.light .lr::backdrop, .cust-light .lr::backdrop { background: rgba(20, 20, 30, 0.28); }
.lr[open] { animation: lr-in 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes lr-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.lr-body { display: flex; flex-direction: column; gap: 14px; max-height: inherit; padding: 20px 20px 14px; overflow-y: auto; scrollbar-width: none; }
.lr-body::-webkit-scrollbar { display: none; }
.lr-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) 32px; gap: 12px; align-items: start; }
.lr-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--acc-rgb), 0.14); color: var(--acc); }
.lr-ic svg { width: 18px; height: 18px; }
.lr-head h2 { margin: 2px 0 4px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.lr-head p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.lr-x { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); }
.lr-x:hover { background: var(--card-2); color: var(--text); }
.lr-x::after { content: ""; position: absolute; inset: -6px; }
.lr-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lr-rule, .lr-agree { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 0.12s ease-out, background 0.12s ease-out; }
.lr-rule:hover { background: var(--card-2); }
.lr-rule.on { border-color: rgba(var(--acc-rgb), 0.5); background: rgba(var(--acc-rgb), 0.06); }
.lr-rule input, .lr-agree input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--acc); }
.lr-rule > span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.45; }
.lr-rule b { font-weight: 600; }
.lr-rule > span > span { color: var(--text-2); }
.lr-agree { font-size: 14px; font-weight: 550; }
.lr-agree.on { border-color: rgba(var(--acc-rgb), 0.6); }
.lr-agree.off { opacity: 0.55; cursor: default; }
.lr-err { margin: 0; }
.lr-foot { display: flex; justify-content: flex-end; gap: 8px; }
.lr-note { margin: -4px 0 0; font-size: 12px; text-align: right; }

/* phones: the whole screen, big ticks and buttons, the buttons always in reach */
@media (max-width: 560px) {
  .lr { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  .lr-body { height: 100%; padding: 16px 16px max(14px, env(safe-area-inset-bottom)); }
  .lr-list { flex: 1 0 auto; }
  .lr-foot { position: sticky; bottom: 0; padding-top: 8px; background: var(--card); }
  .lr-foot .btn { flex: 1; justify-content: center; min-height: 44px; }
  .lr-rule, .lr-agree { min-height: 44px; }
}
@media (pointer: coarse) {
  .lr-rule, .lr-agree { min-height: 44px; }
  .lr-rule input, .lr-agree input { width: 20px; height: 20px; }
  .lr-foot .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .lr[open] { animation: none; } }

/* ---------- Usage and plan (customer/plan.jsx): pl- = parts, pb- = the "Story" layout ---------- */
.content.ug-page.pb { max-width: 900px; }
.top.pb-topbar:has(+ .content.pb) { max-width: 900px; }
.pb-col { display: flex; flex-direction: column; gap: 16px; }
.pb-p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.pb-p b { color: var(--text); }
.pb-act { align-self: flex-start; justify-content: center; }

/* the hearth team's answer to a budget request, once */
.pb-notice { display: flex; flex-direction: column; gap: 8px; }
.pb-notice.ok { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: color-mix(in srgb, var(--green) 6%, var(--card)); }
.pb-notice.warn { border-color: color-mix(in srgb, var(--yellow) 45%, var(--line)); }
.pb-notice-by { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 11px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.pb-notice.ok .bl-h { color: var(--green-text); }
.pb-quote { margin: 0; padding: 8px 12px; border-left: 2px solid var(--line-2); font-size: 13.5px; line-height: 1.5; color: var(--text); background: var(--card-2); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }

/* the plan: what's left, the reset, one bar (used solid, at this pace hatched, a tick at an even pace) */
.pb-hero { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; }
.pb-hero .d-label { margin: 0; }
.pb-big-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }
.pb-big { margin: 0; font-size: 40px; font-weight: 650; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; }
.pb-big span { font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.pb-reset { margin: 0; font-size: 14px; color: var(--text-2); }
.pb-reset b { color: var(--text); font-weight: 600; }
.pb-meter { --fill: var(--text); --proj: var(--text-3); position: relative; height: 14px; border-radius: 99px; background: var(--raise); margin-top: 6px; }
.pb-meter.near, .pb-meter.out { --proj: var(--yellow); }
.pb-meter.extra { --fill: var(--peri); }
.pb-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.pb-meter i.used { background: var(--fill); }
.pb-meter i.proj { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--proj) 70%, transparent) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--proj) 60%, transparent); }
.pb-meter .even { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--text-2); box-shadow: 0 0 0 2px var(--card); }
.pb-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pb-scale b { color: var(--text); font-weight: 600; }
.pb-say { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 0; font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); }
.pb-say .dot { margin-top: 6px; flex: none; }
.pb-say.near, .pb-say.out { border-color: color-mix(in srgb, var(--yellow) 45%, var(--line)); }

/* extra usage: one row at the foot of the plan card */
.pb-extra { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pb-extra-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.pb-extra-h { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.pb-extra .pb-act { flex: none; }
.pl-state { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--raise); color: var(--text-2); letter-spacing: 0.01em; white-space: nowrap; }
.pl-state.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-text); }
.pl-state.warn { background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow); }

/* the month as a running total against the plan */
.pb-card { display: flex; flex-direction: column; gap: 14px; }
.pb-burn { display: flex; flex-direction: column; gap: 6px; }
.pb-burn-plot { position: relative; height: 190px; margin-right: 6px; }
.pb-burn-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pb-burn-plot .plan { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; }
.pb-burn-plot .even { stroke: var(--line-2); stroke-width: 1; }
.pb-burn-plot .area { fill: color-mix(in srgb, var(--text) 8%, transparent); }
.pb-burn-plot .used { fill: none; stroke: var(--text); stroke-width: 2.25; stroke-linejoin: round; }
.pb-burn-plot .proj { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 5 5; }
.pb-burn-plot .proj.near, .pb-burn-plot .proj.out { stroke: var(--yellow); }
.pb-burn-plot .proj.extra { stroke: var(--peri); }
.pb-burn-lab { position: absolute; left: 0; transform: translateY(calc(-100% - 4px)); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.pb-burn-lab.under { transform: translateY(4px); left: 16px; }
.pb-burn-now { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--card); }
.pb-burn-x { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -5px); }
.pb-burn-x i { width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--yellow); }
.pb-burn-x b { position: absolute; top: 14px; right: 4px; font-size: 12px; font-weight: 600; color: var(--yellow); white-space: nowrap; }
.pb-burn-axis { position: relative; height: 16px; font-size: 11.5px; color: var(--text-3); }
.pb-burn-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.pb-burn-axis span:first-child { transform: none; }
.pb-burn-axis span:last-child { transform: translateX(-100%); }
.pb-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-3); }
.pb-key span { display: inline-flex; align-items: center; gap: 6px; }
.pb-key i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--text); }
.pb-key i.k-proj { border-top: 2px dashed var(--text-3); }
.pb-key i.k-proj.near, .pb-key i.k-proj.out { border-top-color: var(--yellow); }
.pb-key i.k-proj.extra { border-top-color: var(--peri); }
.pb-key i.k-even { border-top: 1px solid var(--line-2); }
.pb-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pb-nums div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-nums span { font-size: 12.5px; color: var(--text-3); }
.pb-nums b { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* where the tokens went: one bar split by conversation, then rows with a matching swatch */
.pb-stack { display: flex; gap: 2px; height: 12px; border-radius: 99px; overflow: hidden; }
.pb-stack i { flex-basis: 0; min-width: 3px; }
.pb-stack .s0, .pb-where .s0 { --o: 100%; }
.pb-stack .s1, .pb-where .s1 { --o: 72%; }
.pb-stack .s2, .pb-where .s2 { --o: 52%; }
.pb-stack .s3, .pb-where .s3 { --o: 38%; }
.pb-stack .s4, .pb-where .s4 { --o: 28%; }
.pb-stack .s5, .pb-where .s5 { --o: 20%; }
.pb-stack i, .pb-where .sw { background: color-mix(in srgb, var(--text) var(--o), var(--raise)); }
.pb-stack i.f, .pb-where .sw.f { background: repeating-linear-gradient(135deg, var(--text-3) 0 2px, transparent 2px 4px); }
.pb-where { display: flex; flex-direction: column; margin-top: 4px; }
.pb-tr { display: grid; grid-template-columns: 10px minmax(0, 1fr) 64px 48px; gap: 12px; align-items: center; min-height: 42px; border-top: 1px solid var(--line); font-size: 14px; color: inherit; text-decoration: none; }
.pb-where .pb-tr:first-child { border-top: 0; }
.pb-tr .sw { width: 10px; height: 10px; border-radius: 3px; }
.pb-tr .t { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pb-tr .t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-tr .t svg { flex: none; color: var(--text-3); }
.pb-tr b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
a.pb-tr:hover .t span { text-decoration: underline; text-underline-offset: 3px; }
.pl-pct { font-size: 12.5px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }

/* how tokens are counted: a quiet link at the foot */
.pb-how { padding: 4px 4px 12px; font-size: 13.5px; }
.pb-how summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--text-2); list-style: none; }
.pb-how summary::-webkit-details-marker { display: none; }
.pb-how summary svg:last-child { transition: transform 0.15s; }
.pb-how[open] summary svg:last-child { transform: rotate(90deg); }
.pb-how p { margin: 8px 0 0; line-height: 1.55; font-size: 13px; }

/* asking for a budget: a pop-up, a bottom sheet on phones */
.pl-ask { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.pl-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-amt { font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; text-align: left; min-width: 0; }
.pl-amt b { font-size: 15px; font-weight: 600; }
.pl-amt span { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.pl-amt:hover { border-color: var(--text-3); }
.pl-amt.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: var(--card-2); }
.pl-amt:focus-visible { outline: 2px solid var(--peri); outline-offset: 2px; }
.pl-other { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.pl-other .field { width: 110px; }
.pl-buys { margin: 0; font-size: 14px; color: var(--text-2); }
.pl-buys b { color: var(--text); font-weight: 600; }
.pl-note { width: 100%; }
.pl-fine { margin: 0; font-size: 12.5px; }
.pb-dlg { padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); color: var(--text); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; scrollbar-width: none; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45); }
.pb-dlg::-webkit-scrollbar { display: none; }
.pb-dlg::backdrop { background: rgba(0, 0, 0, 0.55); }
.pb-dlg-in { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; }

@media (max-width: 760px) {
  .pb-hero { padding: 18px 16px; }
  .pb-big { font-size: 34px; }
  .pb-big-row { flex-direction: column; align-items: flex-start; }
  .pb-extra { flex-wrap: wrap; }
  .pb-extra .pb-act { width: 100%; }
  .pb-burn-plot { height: 150px; }
  .pb-nums b { font-size: 17px; }
  .pb-tr { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .pb-tr .pl-pct { display: none; }
  .pl-amt { min-height: 54px; }
  .pl-note, .pl-other .field { font-size: 16px; min-height: 44px; }
  .pb-dlg { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .pb-dlg-in { padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); }
  .pb-dlg .icon-btn { width: 44px; height: 44px; margin: -8px -8px -8px 0; }
}
@media (max-width: 760px), (pointer: coarse) {
  .pb-act, .pb-dlg .pf-acts .btn { min-height: 44px; }
  .pb-how summary { min-height: 40px; }
}
@media (max-width: 360px) {
  .pl-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-big { font-size: 30px; }
  .pb-nums { gap: 8px; }
  .pb-nums b { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .pb-how summary svg { transition: none; } }