:root {
  --bg: #f4f1ea;
  --panel: #ffffff;
  --ink: #1b1f23;
  --muted: #5d646b;
  --line: #ddd7cc;
  --in: #ffffff;
  --out: #d9f5d0;
  --en: #eef4fb;
  --en-ink: #1d3b5c;
  --accent: #0f7b5f;
  --accent-ink: #ffffff;
  --warn-bg: #fff3cd;
  --warn-ink: #6b4e00;
  --err: #b3261e;
  --chip: #e8e3d8;
  --ok-bg: #dff3e8;
  --ok-ink: #0b5a42;
  --bad-bg: #fbe3e1;
  --bad-ink: #8c1d18;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b141a;
    --panel: #111b21;
    --ink: #e9edef;
    --muted: #9aa5ac;
    --line: #25323a;
    --in: #1f2c34;
    --out: #144d37;
    --en: #172a3a;
    --en-ink: #cfe3f7;
    --accent: #21c08b;
    --accent-ink: #06231a;
    --warn-bg: #3d3212;
    --warn-ink: #ffe28a;
    --err: #ff8a80;
    --chip: #1f2c34;
    --ok-bg: #12382b;
    --ok-ink: #9fe6c5;
    --bad-bg: #3f1a18;
    --bad-ink: #ffb4ab;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* the app keeps the reading position itself (measure + compensate), the same way on every browser */
html, body, #msgs, #reply { overflow-anchor: none; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }
h1 { font-size: 22px; margin: 0; }
h2 { font-size: 18px; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.error { color: var(--err); }
button, input, textarea { font: inherit; color: inherit; }

.btn {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn.big { min-height: 52px; font-size: 18px; flex: 1; }
.btn.small { min-height: 36px; font-size: 15px; padding: 6px 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

input[type=text], input[type=search], input[type=password], textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 10px 12px;
  font-size: 17px;
}
textarea { resize: vertical; min-height: 64px; }

#banners { position: relative; z-index: 1; }
.banner { padding: 10px 16px; font-size: 15px; background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid var(--line); }
.banner code { font-size: 12px; word-break: break-all; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 13px; }
.tag.warn { background: var(--warn-bg); color: var(--warn-ink); }

.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.bar h1 { flex: 1; }
.bar .title { flex: 1; min-width: 0; }
#chat-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* login */
.login-card { max-width: 380px; margin: 18vh auto 0; padding: 24px 16px; display: flex; flex-direction: column; gap: 10px; }

/* list */
.search { padding: 10px 16px 0; }
.filter { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; }
.chip { border: 0; background: var(--chip); border-radius: 999px; padding: 6px 14px; min-height: 36px; white-space: nowrap; }
.chip.on { background: var(--accent); color: var(--accent-ink); }
.chats { list-style: none; margin: 0; padding: 0; }
.chats li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.chats li:active { background: var(--chip); }
.chats .main { flex: 1; min-width: 0; }
.chats .top { display: flex; gap: 8px; align-items: baseline; }
.chats .name { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chats .time { color: var(--muted); font-size: 13px; white-space: nowrap; }
.chats .preview, .chats .preview-en {
  font-size: 15px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chats .preview-en { color: var(--en-ink); }
.chats .name.unread { font-weight: 700; }
.chats .waiting { font-size: 12px; color: var(--muted); margin-top: 2px; }
.badge { background: var(--accent); color: var(--accent-ink); border-radius: 999px; font-size: 13px; padding: 1px 8px; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 7px; flex: none; }
.dot.off { background: transparent; }

/* thread: the page scrolls, and its foot leaves room for the pinned reply box (and the keyboard) */
.thread { padding: 10px 10px calc(var(--reply-h) + var(--kb) + 12px); display: flex; flex-direction: column; gap: 6px; }
#msgs { display: flex; flex-direction: column; gap: 8px; }
.day { align-self: center; font-size: 13px; color: var(--muted); background: var(--chip); padding: 2px 10px; border-radius: 8px; margin: 6px 0; }
.msg {
  max-width: 88%;
  background: var(--in);
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  overflow-wrap: anywhere;
}
.msg.me { align-self: flex-end; background: var(--out); }
.msg.them { align-self: flex-start; }
.msg .who { font-size: 13px; font-weight: 600; color: var(--accent); }
.msg .body { white-space: pre-wrap; }
.msg .meta { font-size: 12px; color: var(--muted); text-align: right; margin-top: 2px; }
.en {
  margin-top: 6px; padding: 6px 8px; border-radius: 10px;
  background: var(--en); color: var(--en-ink); white-space: pre-wrap;
}
.en .lbl, .lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.msg .body.caption { margin-top: 6px; }
.transcript { white-space: pre-wrap; margin-top: 6px; font-style: normal; }
details.orig { margin-top: 6px; }
details.orig > summary { font-size: 14px; color: var(--accent); cursor: pointer; min-height: 32px; line-height: 32px; }
details.orig > .body, details.orig > .transcript { margin-top: 2px; }
.msg.has-media { width: 88%; }
/* photos get their box before they load (width/height from the server), so nothing jumps */
.msg img.thumb { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain;
  border-radius: 10px; margin-top: 4px; background: #0003; }
.msg img.thumb.unsized { height: 240px; }
.msg video { display: block; width: 100%; max-height: 360px; aspect-ratio: 16 / 9; border-radius: 10px; margin-top: 4px; background: #0003; }
.msg audio { width: 100%; min-width: 240px; margin-top: 4px; }
.pending { font-size: 14px; color: var(--muted); margin-top: 4px; }
.msg .gone { font-size: 14px; color: var(--muted); font-style: italic; margin-top: 2px; }
.msg .err { font-size: 14px; color: var(--err); margin-top: 4px; }
/* deleted for everyone by the sender */
.msg.deleted .del { color: var(--muted); font-style: italic; }
.msg.deleted .orig-body { opacity: .75; }
.msg.deleted.mine { padding: 4px 10px; font-size: 14px; opacity: .8; }
.chats .preview.deleted { font-style: italic; }

/* reply: pinned to the bottom of the screen, WhatsApp-style. Only the conversation above it moves.
   --kb is the height of the on-screen keyboard where the browser hides it behind one (iOS Safari);
   app.js measures it. --reply-h is this box's own height, kept up to date as the textarea grows, so
   the thread's last message is never behind it. */
:root { --kb: 0px; --reply-h: 150px; }
.reply {
  position: fixed; left: 0; right: 0; bottom: var(--kb); z-index: 25;
  background: var(--panel); border-top: 1px solid var(--line);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}
/* above the keyboard there is no home indicator to dodge */
body.kbup .reply { padding-bottom: 8px; }
/* "Reply" and the language chip on one line, then the label and the box with its Send airplane */
.reply-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.reply-head h2 { font-size: 16px; }
/* the reply language is sticky per chat; this chip says which one, and a tap changes it */
#reply-lang.langchip {
  flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--chip); color: var(--muted);
  font: inherit; font-size: 13px; line-height: 1; padding: 6px 10px; min-height: 32px; cursor: pointer;
}
#reply-lang .chip-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#reply-lang .chip-swap { flex: none; font-size: 14px; opacity: .8; }
.compose { display: flex; flex-direction: column; gap: 6px; }
.compose label { font-weight: 600; font-size: 14px; }
/* the pill rides above the pinned reply box, not behind it */
.newpill {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 30;
  bottom: calc(var(--reply-h) + var(--kb) + 12px);
  border: 0; border-radius: 999px; padding: 10px 16px; min-height: 44px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* sent / sending messages in the thread, WhatsApp-style */
.msg.outbox { opacity: .96; }
.msg .status { font-size: 12px; }
.msg .status.sending { color: var(--muted); }
.msg .status.sent { color: var(--muted); }
/* sent or not? unknown: an earlier try never got WhatsApp's answer (never offered as a retry) */
.msg .status.unconfirmed { color: var(--warn-ink); font-weight: 600; }
.msg .status.failed {
  border: 0; background: transparent; color: var(--err); font: inherit; padding: 0; cursor: pointer;
  text-decoration: underline;
}

/* notifications: the bell in the chat header */
.bell { min-width: 44px; padding: 6px 8px; font-size: 20px; line-height: 1; }
.bell.off { opacity: .55; }

/* the compose line: the box, the "put the keyboard away" chevron, and the Send airplane */
.compose-line { display: flex; gap: 6px; align-items: flex-end; }
/* one line to start, growing to about five and then scrolling inside itself */
.compose-line textarea {
  flex: 1; min-width: 0; min-height: 40px; max-height: 118px; resize: none;
  padding: 8px 12px; overflow-y: auto;
}
/* always the Send button: dimmed until there is something to send */
.send {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.send svg { width: 20px; height: 20px; display: block; }
.send:disabled { opacity: .4; cursor: default; }
/* "put the keyboard away": only while the box has focus, so it is out of the way the rest of the time */
.kbdone {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--chip); color: var(--ink);
  font-size: 20px; line-height: 1; padding: 0; cursor: pointer;
}
.msg .vn { font-size: 13px; font-weight: 600; color: var(--muted); }

/* replies (WhatsApp's quote): the quoted message, recessed at the top of the reply's bubble.
   A grey wash rather than a token, so it shows on both bubble colours in light and dark. */
.quote {
  margin: 2px 0 6px; padding: 4px 8px; border-left: 3px solid var(--accent); border-radius: 8px;
  background: rgba(127, 127, 127, .14); font-size: 14px; line-height: 1.35;
}
.quote .q-who { font-size: 13px; font-weight: 600; color: var(--accent); }
.quote .q-text {
  color: var(--muted); white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.quote.missing .q-text { font-style: italic; }
/* ↩ by a bubble's time: reply to it. Shown on hover where there is one, always (faintly) on a phone */
.msg .replybtn {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; line-height: 1;
  padding: 4px 8px; margin: -4px 2px -4px 0; cursor: pointer; opacity: .6;
}
@media (hover: hover) {
  .msg .replybtn { opacity: 0; }
  .msg:hover .replybtn, .msg .replybtn:focus-visible { opacity: 1; }
}
/* "Replying to ..." at the top of the reply box, with ✕ to cancel */
.replyto {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 4px 2px 4px 8px;
  border-left: 3px solid var(--accent); border-radius: 8px; background: var(--chip);
}
.replyto-main { flex: 1; min-width: 0; }
.replyto-who { font-size: 13px; font-weight: 600; color: var(--accent); }
.replyto-text { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replyto-x {
  flex: none; width: 36px; height: 36px; border-radius: 18px; border: 0; background: transparent;
  color: var(--muted); font-size: 16px; line-height: 1; padding: 0; cursor: pointer;
}

/* chat list: pinned, muted, hidden; press and hold (or ⋯) for actions */
.chats li { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.chats .pin, .chats .mutedico { font-size: 13px; flex: none; }
.badge.muted { background: var(--chip); color: var(--muted); }
.chats .rowmore {
  flex: none; align-self: center; border: 0; background: transparent; color: var(--muted);
  min-width: 36px; min-height: 36px; margin-right: -8px; font-size: 20px; line-height: 1; cursor: pointer;
}
.chats .tagline { font-size: 12px; color: var(--muted); }
.more { min-width: 44px; padding: 6px 8px; font-size: 22px; line-height: 1; }

/* action sheets */
.sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sheet-head h2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-x {
  flex: none; width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--chip);
  color: var(--ink); font-size: 18px; cursor: pointer;
}
.sheet-body { display: flex; flex-direction: column; gap: 8px; }
.sheet-body .btn.action { text-align: left; min-height: 48px; }
.sheet-body .hidden-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 6px 0; }
.sheet-body .hidden-row .name { flex: 1; min-width: 0; font-weight: 600; background: transparent; border: 0; text-align: left;
  padding: 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

/* Add to calendar */
.calchip {
  display: inline-block; margin-top: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--accent);
  border-radius: 999px; padding: 4px 12px; min-height: 32px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.calform { display: flex; flex-direction: column; gap: 6px; }
.calform label { font-size: 14px; font-weight: 600; margin-top: 4px; display: block; }
.calrow { display: flex; gap: 10px; }
.calform .row { flex-wrap: nowrap; }
.calform .row > * { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
.calrow > div { flex: 1 1 0; min-width: 0; }
.calform input[type=date], .calform input[type=time], .calform select {
  width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  padding: 8px 10px; font-size: 17px; -webkit-appearance: none; appearance: none; color: var(--ink);
}

/* Send to Claude */
#claude-len { padding: 4px 0 8px; flex-wrap: wrap; overflow: visible; }
.linkbtn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.linkbtn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
#claude-text { font-size: 13px; line-height: 1.35; min-height: 160px; max-height: 38vh; }

/* menu */
.sheet-card h3 { font-size: 15px; margin: 16px 0 4px; }
.menu-sec p { margin: 6px 0; }
#usage { white-space: pre-line; }
.guide { background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px; padding: 8px 10px; }

/* sheet */
.sheet { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet-card {
  width: 100%; max-width: 560px;
  max-height: calc(100dvh - env(safe-area-inset-top) - 16px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--panel); border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
}

/* full-screen photo, WhatsApp style: always a visible way out (the bar sits below the notch) */
.viewer {
  position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / 1);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;            /* iOS only sends taps (click) to elements that look clickable */
  touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none;
}
.viewer img {
  max-width: 100%; max-height: 100%; cursor: default; transform-origin: center center;
  will-change: transform; -webkit-touch-callout: none; -webkit-user-drag: none;
}
.viewer-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 10px calc(10px + env(safe-area-inset-left));
  background: linear-gradient(rgb(0 0 0 / .65), rgb(0 0 0 / 0));
  cursor: default;
}
.viewer-btn {
  min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 22px;
  background: rgb(255 255 255 / .2); color: #fff; font-size: 22px; line-height: 44px; cursor: pointer;
}
.viewer-btn.text { font-size: 17px; }
.viewer-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.noscroll { overflow: hidden; position: fixed; width: 100%; }
.sheet { cursor: pointer; }
.sheet-card { cursor: default; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 70;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; max-width: 90vw;
}

@media (min-width: 900px) {
  body { max-width: 760px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 100vh; }
}

/* Two panes on a wide window, the way WhatsApp Desktop does it: the chat list stays on the left and
   scrolls itself, the open conversation fills the rest and keeps the page scroll it has always used
   (so the reading position, the reply box and the keyboard behave exactly as on a phone). Narrower
   than this the app is unchanged: one screen at a time, with the "Chats" button to go back. */
@media (min-width: 720px) {
  body.two {
    --pane: 340px;
    max-width: none; margin: 0; border-left: 0; border-right: 0;
    padding-left: var(--pane);
  }
  body.two > #list {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--pane); z-index: 25;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); border-right: 1px solid var(--line);
  }
  body.two #back { display: none; }          /* the list is right there; nothing to go back to */
  body.two .chats li.on { background: var(--chip); }
  /* the reply box is pinned to the bottom of the conversation pane, not across the list */
  body.two .reply { left: var(--pane); }
  body.two .newpill { left: calc(50% + var(--pane) / 2); }
  body.two #empty {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 100vh; min-height: 100dvh; padding: 24px;
  }
}
@media (min-width: 1000px) {
  body.two { --pane: 380px; }
}

/* setup wizard (joining with an invite) */
.setup { min-height: 100vh; min-height: 100dvh; }
.setup-card {
  max-width: 520px; margin: 0 auto;
  padding: calc(20px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
}
.setup-head h1 { font-size: 26px; margin: 6px 0 14px; }
.setup-head p { margin: 0; }
.steps { display: flex; gap: 6px; margin: 8px 0 4px; }
.steps span { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.steps span.done { background: var(--accent); opacity: .55; }
.steps span.now { background: var(--accent); }
.setup-body { display: flex; flex-direction: column; gap: 12px; }
.setup-body p { margin: 0; }
.setup-body h2 { font-size: 18px; margin: 10px 0 0; }
.setup-body .lead { font-size: 20px; font-weight: 600; }
.setup-body .btn.big { flex: none; width: 100%; }
.setup-body .btn.ghost { align-self: center; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-weight: 600; font-size: 15px; }
.field .hint { margin: 0; }
.howto { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.howto li { padding-left: 2px; }
.howto .linkbtn { display: flex; width: fit-content; margin-top: 6px; color: var(--accent); font-weight: 600; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.check.small { font-size: 15px; min-height: 36px; }
.okline { color: var(--ok-ink); background: var(--ok-bg); border-radius: 10px; padding: 8px 10px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }
.keyline { display: flex; gap: 8px; align-items: center; }
.keyline input { flex: 1; min-width: 0; }
.keyform, .keybox { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.select, input[type=number], input[type=tel] {
  width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  padding: 8px 12px; font-size: 17px; color: var(--ink);
}
.wa-area { display: flex; flex-direction: column; gap: 12px; }
.wa-main { display: flex; flex-direction: column; gap: 12px; }
.wa-main > p { margin: 0; font-weight: 600; }
.pickphone { display: flex; gap: 10px; }
.pickphone .btn { flex: 1 1 0; min-height: 52px; font-size: 17px; }
.pickphone .btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.qrbox { display: flex; justify-content: center; }
.qr {
  width: min(264px, 72vw); height: auto; aspect-ratio: 1; image-rendering: pixelated;
  background: #fff; padding: 10px; border-radius: 14px; border: 1px solid var(--line);
}
.wa-state { text-align: center; font-weight: 600; margin: 0; }
details.alt { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px 12px; background: var(--panel); }
details.alt > summary { min-height: 44px; padding: 11px 0; line-height: 1.3; font-weight: 600; color: var(--accent); cursor: pointer; }
details.alt > * + * { margin-top: 10px; }
.codebox { display: flex; flex-direction: column; align-items: center; }
.codebox .code {
  font: 700 34px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; text-align: center;
  padding: 14px; border-radius: 12px; background: var(--en); color: var(--en-ink); margin: 6px 0;
  align-self: stretch; user-select: all; -webkit-user-select: all;
}
.codebox p { margin: 0 0 6px; text-align: center; }

/* Menu: your account, People */
.menu-sec h4 { font-size: 14px; margin: 14px 0 4px; }
#account-body .row { margin-top: 6px; }
.capline { align-items: center; flex-wrap: nowrap; }
.capline input { max-width: 120px; }
.danger-text { color: var(--err); }
.btn.danger { background: var(--err); border-color: var(--err); color: #fff; font-weight: 600; }
.danger-box { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 12px;
  background: var(--bad-bg); color: var(--bad-ink); }
.invite { display: flex; flex-direction: column; gap: 10px; }
.invite h3, .sheet-body h3 { margin: 12px 0 0; font-size: 16px; }
.linkout { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--en); color: var(--en-ink); }
.linkout input { font-size: 13px; }
.person { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--bg); }
.person.off { opacity: .65; }
.person p { margin: 6px 0 0; }
.person .row { margin-top: 8px; }
.stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.stat { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: var(--chip); color: var(--ink); }
.stat.ok { background: var(--ok-bg); color: var(--ok-ink); }
.stat.warn { background: var(--warn-bg); color: var(--warn-ink); }
.stat.bad { background: var(--bad-bg); color: var(--bad-ink); }
.stat.muted { color: var(--muted); }
.invite-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 6px 0;
  border-bottom: 1px solid var(--line); }
.banner .btn.small { margin-left: 4px; min-height: 32px; padding: 4px 10px; }

/* Smart translation off: the free translation carries a small "Basic" tag */
.en .lbl + .tag-basic { margin: -2px 0 3px; }
.tag-basic { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; opacity: .7; margin-bottom: 3px; }
.btn.try-smart { margin-top: 4px; }
.note-smart { margin-top: 4px; }
/* Menu → Settings and Cost */
.setting { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.setting-name { font-weight: 600; flex: 1 1 140px; }
.setting-toggle { width: 22px; height: 22px; }
.setting-state { min-width: 2em; }
.cost-line { font-weight: 600; margin: 2px 0; }

/* the agreement at joining, and the legal links */
.legal { display: flex; flex-direction: column; gap: 20px; }
.legal h2 { font-size: 17px; margin: 0 0 8px; }
.legal-sum { background: var(--ok-bg); color: var(--ok-ink); border-radius: 16px; padding: 16px 18px; }
.legal-sum p { margin: 0; font-size: 16px; line-height: 1.55; }
.legal-links { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; }
.legal-links li { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 0; }
.legal-links li + li { border-top: 1px solid var(--line); }
.legal-doc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 14px 8px 14px 18px;
  color: var(--ink); text-decoration: none; }
.legal-doc-name { font-weight: 600; font-size: 16px; color: var(--accent); }
.legal-doc-hint { font-size: 14px; line-height: 1.4; color: var(--muted); }
.legal-doc:hover .legal-doc-name { text-decoration: underline; }
.legal-alt { flex: none; font-size: 13px; color: var(--muted); text-decoration: none; padding: 5px 10px; border-radius: 999px;
  background: var(--chip); }
.legal-alt:hover { color: var(--ink); }
.legal-doc:focus-visible, .legal-alt:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.legal-check { align-items: flex-start; gap: 12px; font-weight: 400; font-size: 16px; line-height: 1.5; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.legal-check:has(input:checked) { border-color: var(--accent); }
.legal-check input { margin-top: 2px; }
.legal-foot a { color: var(--accent); }
/* the screen shown once at sign-in when the terms are new to someone */
.consent-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.consent-head h1 { margin: 0 0 4px; }
.consent-mark { border-radius: 12px; }
.consent-body { gap: 20px; }
.consent-intro { font-size: 18px; line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) { .consent-head { padding-top: 28px; } }
.yourdata { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.yourdata p { margin: 0; }
.yourdata .danger-box { align-self: stretch; }
.login-new { margin: 14px 0 0; text-align: center; }
.login-new a { color: var(--accent); }
.login-legal { margin: 12px 0 0; text-align: center; }
.login-legal a { color: var(--accent); }

/* the two plans: the chooser in the wizard and the month's-use bar in Your account */
.plan-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.plan-card h2 { margin: 0; }
.plan-box { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.plan-bar { width: 100%; height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; }
.plan-bar-fill { height: 100%; background: var(--accent); border-radius: 6px; }
.plan-bar-fill.warn { background: #c98a00; }
.plan-bar-fill.full { background: var(--err); }