/* Screen styles: inbox and contact thread (design pass 2, 31 Oct 2026; inbox and thread rebuilt 6 Nov,
   section "Inbox and thread (6 Nov rebuild)" at the end)
   Inbox (contacts/inbox.html + _inbox_row.html) and thread (contacts/timeline.html). Jobs: screens/jobs.css.
   Loaded on every app page after jeevz.css (core/templates/core/base.html), so every rule is scoped to this area's own classes:
   .ib (inbox), .th (thread), .avt (the tinted avatar from contacts/_av.html).
   Read --jz-* tokens only. Never read --ink --text --font --brand --accent --on-brand --on-accent --needs-bg --needs-fg.
   Rules: system font only (no mono), sentence-case 13/600 headers (no tracked caps), no stripes or dashed boxes,
   one accent per screen. Learnings: streams/jeevz/app/docs/design-learnings.md "## inbox". */

/* ---------- Shared: soft-tint avatar, two initials, colour picked from the last initial ---------- */
.avt{--avbg:#e6ece6;flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--avbg);color:#17211d;font:600 17px/1 var(--jz-sans);letter-spacing:-.01em;font-variant-numeric:normal}
.avt .av{all:unset;font:inherit;color:inherit}
.avt.xl{width:72px;height:72px;font-size:26px;font-weight:600;letter-spacing:-.02em}
.avt:is([data-k=A],[data-k=G],[data-k=M],[data-k=S],[data-k=Y]){--avbg:#d9f3e6}
.avt:is([data-k=B],[data-k=H],[data-k=N],[data-k=T],[data-k=Z]){--avbg:#dbe9f6}
.avt:is([data-k=C],[data-k=I],[data-k=O],[data-k=U]){--avbg:#f4e8d2}
.avt:is([data-k=D],[data-k=J],[data-k=P],[data-k=V]){--avbg:#f6dfe3}
.avt:is([data-k=E],[data-k=K],[data-k=Q],[data-k=W]){--avbg:#e6e0f5}
.avt:is([data-k=F],[data-k=L],[data-k=R],[data-k=X]){--avbg:#e4e7df}

/* Jobs and the job card moved to their own kit, static/jeevz/screens/jobs.css (6 Nov rebuild, step 3a). */

/* ======================================================================================================================
   Inbox and thread (6 Nov rebuild). Mockups: docs/redesign/light|night/inbox.html, thread.html, thread-picked.html.
   Built from the shared components (jeevz.css 40-59: .jz-danger, .jz-list/.jz-li, .jz-chip, .jz-btn, .jz-card,
   .jz-lock). This kit only lays them out and adds the inbox's filter chips, the waiting rows, the thread's "left to you"
   card, the big message, the price picker and the reply tray. Every colour is a role token, so both looks follow.
   ====================================================================================================================== */
#app .ib,#app .th{padding:var(--jz-s2) var(--jz-gutter) var(--jz-s6)}

/* ---------- Inbox: title, one plain line, filter chips ---------- */
#app .ib-head{margin:0 0 var(--jz-s4)}
#app .ib-head .jz-over{margin:0 0 4px}
#app .ib-title{margin:0;padding:0;font:800 42px/1 var(--jz-display);letter-spacing:-.03em;color:var(--jz-ink)}
#app .ib-lede{margin:10px 0 0;font:500 var(--jz-t-body)/1.4 var(--jz-sans);color:var(--jz-ink-2);text-wrap:pretty}
#app .ib-lede b{font-weight:700;color:var(--jz-ink)}
#app .ib-chips{display:flex;gap:8px;margin:0 calc(-1 * var(--jz-gutter)) var(--jz-s5);padding:2px var(--jz-gutter) 6px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
#app .ib-chips::-webkit-scrollbar{display:none}
#app .ib-chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 8px 0 18px;border-radius:var(--jz-r-full);background:var(--jz-surface);box-shadow:var(--jz-shadow);color:var(--jz-ink);font:600 17px/1 var(--jz-sans);text-decoration:none;white-space:nowrap;scroll-snap-align:start;transition:transform var(--jz-dur-press) var(--jz-ease-out)}
#app .ib-chip:not(:has(.cnt)){padding-right:18px}
#app .ib-chip:active{transform:scale(.97)}
#app .ib-chip .jz-ic{width:19px;height:19px;stroke-width:2.4;margin-left:-4px}
#app .ib-chip .cnt{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 8px;box-sizing:border-box;border-radius:var(--jz-r-full);background:var(--jz-surface-2);color:var(--jz-ink);font:700 15px/1 var(--jz-sans);font-variant-numeric:tabular-nums}
#app .ib-chip.is-danger{color:var(--jz-danger)}
#app .ib-chip.is-danger .cnt{background:var(--jz-chip-danger);color:var(--jz-on-chip-danger)}
#app .ib-chip.is-on{background:var(--jz-ink);color:var(--jz-page);box-shadow:none}
#app .ib-chip.is-on .cnt{background:color-mix(in srgb,var(--jz-page) 22%,transparent);color:inherit}

/* ---------- Inbox: the danger card, compact (call first, one tap to ring) ---------- */
#app .ib-danger{padding:18px 18px 20px}
#app .ib-danger .jz-danger-eye .jz-chip{background:var(--jz-danger-call);color:var(--jz-on-danger-call);box-shadow:none}
#app .ib-danger-row{display:flex;align-items:center;gap:14px;margin-top:12px}
#app .ib-danger-open{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none}
#app .ib-danger-open .jz-name{font-size:30px}
#app .ib-danger-say{font:600 17px/1.32 var(--jz-sans);text-wrap:pretty}
#app .ib-call{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:24px;background:var(--jz-danger-call);color:var(--jz-on-danger-call);box-shadow:0 10px 22px -12px rgba(0,0,0,.45);transition:transform var(--jz-dur-press) var(--jz-ease-out)}
#app .ib-call:active{transform:scale(.94)}
#app .ib-call .jz-ic{width:28px;height:28px;stroke-width:2.3}

/* ---------- Inbox: the people waiting (one card of rows; paper at night) and Earlier ---------- */
#app .ib-list{margin-bottom:14px}
#app .ib-row{align-items:flex-start;padding:18px 18px 18px 16px}
#app .ib-row .jz-li-t{gap:4px}
#app .ib-row .jz-li-av{margin-top:2px;border-radius:18px}
#app .ib-row.is-quiet{align-items:center;padding-top:14px;padding-bottom:14px}
#app .ib-row.is-quiet .jz-li-av{margin-top:0;border-radius:50%;font:700 19px/1 var(--jz-display)}
#app .ib-r1{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
#app .ib-r1 b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 19px/1.25 var(--jz-sans)}
#app .ib-wait{flex:none;display:inline-flex;align-items:center;gap:5px;font:700 15px/1 var(--jz-sans);font-variant-numeric:tabular-nums;color:var(--jz-ink-2)}
#app .ib-wait .jz-ic{width:16px;height:16px;stroke-width:2.4}
#app .ib-wait.is-late{color:var(--jz-late)}
#app .ib-when{flex:none;font:500 var(--jz-t-meta)/1 var(--jz-sans);font-variant-numeric:tabular-nums;color:var(--jz-ink-2)}
#app .ib-row .pv{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;text-overflow:clip;font:500 16px/1.38 var(--jz-sans);color:var(--jz-ink-2);overflow-wrap:anywhere}
#app .ib-row.is-quiet .pv{-webkit-line-clamp:1;display:-webkit-box}
#app .ib-row .src{font-weight:600;color:var(--jz-ink)}
#app .ib-row .src::after{content:"\00b7";margin:0 6px;font-weight:500;color:var(--jz-ink-2)}
#app .ib-flag{font-weight:600;color:var(--jz-forest)}
#app .ib-flag::after{content:"\00b7";margin:0 6px;font-weight:500;color:var(--jz-ink-2)}
#app .ib-tag{display:flex;margin-top:8px}
#app .ib-sec{margin-top:var(--jz-s7)}
#app .ib-sec>span{font-variant-numeric:tabular-nums}
#app .ib-clear{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:16px 18px;border-radius:var(--jz-r-card);background:var(--jz-wash);color:var(--jz-ink);font:500 var(--jz-t-body)/1.35 var(--jz-sans)}
#app .ib-clear b{font-weight:700}

/* ---------- Thread: who ---------- */
#app .th-who{margin:var(--jz-s1) 0 var(--jz-s4)}
#app .th-name{margin:0;padding:0;font:800 34px/1.05 var(--jz-display);letter-spacing:-.025em;color:var(--jz-ink);overflow-wrap:anywhere}
#app .th-meta{display:flex;flex-wrap:wrap;margin:6px 0 0;font:500 16px/1.4 var(--jz-sans);font-variant-numeric:tabular-nums;color:var(--jz-ink-2)}
#app .th-meta span+span::before{content:"\00b7";margin:0 7px}
#app .th-dnt{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:10px 14px;border-radius:var(--jz-r-inner);background:var(--jz-danger-soft);color:var(--jz-danger);font:600 16px/1.3 var(--jz-sans)}
#app .th-dnt .jz-ic{width:18px;height:18px;stroke-width:2.6}

/* ---------- Thread: why it is yours ---------- */
#app .th-card{margin:0 0 14px}
#app .th-card .jz-danger{margin:0}
#app .th-left{margin:0 0 14px;padding:16px 18px 18px;border-radius:var(--jz-r-card);background:var(--jz-night);color:var(--jz-on-night);box-shadow:0 0 0 1.5px var(--jz-night-line),var(--jz-shadow)}
#app .th-left-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:0;font:700 18px/1.25 var(--jz-sans)}
#app .th-left-top b{color:var(--jz-highlight)}
#app .th-left-chip{background:var(--jz-highlight);color:var(--jz-on-accent)}
#app .th-left-why{margin:10px 0 0;font:500 16px/1.4 var(--jz-sans);color:var(--jz-night-muted);text-wrap:pretty}
#app .th-draft{display:flex;flex-direction:column;gap:10px;padding:18px}
#app .th-draft-top{display:flex;align-items:center;gap:10px;font:700 18px/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .th-draft-say{font:500 17px/1.42 var(--jz-sans);color:var(--jz-ink);text-wrap:pretty}
#app .th-draft-go{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding-top:6px;border-top:1.5px solid var(--jz-hair);font:600 16px/1.2 var(--jz-sans);color:var(--jz-forest)}
#app .th-draft-go .jz-ic{width:20px;height:20px}

/* ---------- Thread: what they are waiting on, big ---------- */
#app .th-said{margin:0 0 var(--jz-s2)}
#app .th-bubble{margin:0;padding:18px 20px;border-radius:8px var(--jz-r-card) var(--jz-r-card) var(--jz-r-card);font:600 22px/1.32 var(--jz-sans);letter-spacing:-.01em;white-space:pre-line;overflow-wrap:anywhere}
#app .th-bubble>span{display:block;margin-top:6px;font-size:19px;font-weight:500}
#app .th-bubble .th-lead{display:block;font:700 22px/1.25 var(--jz-sans)}
#app .th-bubble .th-pc{display:inline-flex;margin-top:10px;padding:4px 12px;border-radius:var(--jz-r-full);background:var(--jz-surface-2);font:600 15px/1.4 var(--jz-sans)}
#app .th-amt{padding:0 5px;border-radius:8px;background:var(--jz-surface-2);color:var(--jz-ink);font-weight:700}
#app .th-amt.is-quote{background:var(--jz-wash);color:var(--jz-forest)}
#app .th-amt.is-ask{background:color-mix(in srgb,var(--jz-late-fill) 28%,transparent);color:var(--jz-late)}
#app .th-said-meta{display:flex;align-items:center;gap:7px;margin:10px 6px 0;font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2)}
#app .th-said-meta .jz-ic{width:17px;height:17px}
#app .th-said-meta b{font-weight:700;color:var(--jz-late);white-space:nowrap}

/* ---------- Thread: the price picker (Keep your quote / Say yes to their ask / your own) ---------- */
#app .th-pick{margin:0}
#app .th-pick .jz-sechead{margin-top:var(--jz-s6)}
#app .th-pts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#app .th-pt{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:124px;padding:14px 18px 16px;box-sizing:border-box;border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow);color:var(--jz-ink);cursor:pointer;transition:transform var(--jz-dur-press) var(--jz-ease-out),box-shadow var(--jz-dur-quick) var(--jz-ease-out)}
#app .th-pt:active{transform:scale(.97)}
#app .th-pt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#app .th-pt:has(input:focus-visible){outline:3px solid var(--jz-forest);outline-offset:3px}
#app .th-pt-v{font:600 16px/1.2 var(--jz-sans);color:var(--jz-ink-2)}
#app .th-pt-n{margin:10px 0 6px;font-size:50px;line-height:.9}
#app .th-pt-s{font:500 15px/1.25 var(--jz-sans);color:var(--jz-ink-2)}
#app .th-pt-k{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--jz-chev);color:transparent}
#app .th-pt-k .jz-ic{width:18px;height:18px;stroke-width:3}
#app .th-pt.is-on,#app .th-pt:has(input:checked){box-shadow:0 0 0 3px var(--jz-forest),var(--jz-shadow)}
#app .th-pt.is-on :is(.th-pt-v,.th-pt-s),#app .th-pt:has(input:checked) :is(.th-pt-v,.th-pt-s){color:var(--jz-forest)}
#app .th-pt.is-on .th-pt-k,#app .th-pt:has(input:checked) .th-pt-k{background:var(--jz-forest);color:var(--jz-on-forest);box-shadow:none}
#app .th-pick-go{margin-top:10px}
.jz-js #app .th-pick-go{display:none}
#app .th-own{margin:10px 0 0;border-radius:var(--jz-r-card);background:var(--jz-surface);box-shadow:var(--jz-shadow);overflow:hidden}
#app .th-own-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 18px 0 10px;list-style:none;cursor:pointer;font:600 18px/1.2 var(--jz-sans);color:var(--jz-ink)}
#app .th-own-row::-webkit-details-marker{display:none}
#app .th-own-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--jz-surface-2)}
#app .th-own-ic .jz-ic{width:20px;height:20px}
#app .th-own-t{flex:1;min-width:0}
#app .th-own-row>.jz-ic{width:20px;height:20px;color:var(--jz-ink-2);transition:transform var(--jz-dur-quick) var(--jz-ease-out)}
#app .th-own[open] .th-own-row>.jz-ic{transform:rotate(90deg)}
#app .th-own-in{display:flex;flex-direction:column;gap:10px;padding:4px 16px 16px}
#app .th-own-in .jz-field{margin:0}
#app .th-reply{margin:14px 0 0;padding-top:calc(var(--jz-s5) + var(--jz-band))}
#app .th-reply::after{content:"";position:absolute;left:0;right:0;top:0;height:var(--jz-band);background:var(--jz-highlight)}
#app .th-reply .jz-card-top{margin:0}
#app .th-reply-say{margin:12px 0 0;font:600 19px/1.4 var(--jz-sans);color:var(--jz-ink);text-wrap:pretty}
#app .th-reply-state{display:flex;align-items:center;gap:6px;margin:10px 0 0}
#app .th-reply-state .jz-ic{width:17px;height:17px}

/* ---------- Thread: I've answered (in the page, above the history, never under the tray) ---------- */
#app .ctv-answered{margin:14px 0 0}
#app .th-done .jz-ic{width:21px;height:21px;stroke-width:2.8}
#app .th-hint{margin:8px 0 0;font:500 var(--jz-t-meta)/1.35 var(--jz-sans);color:var(--jz-ink-2);text-align:center}

/* ---------- Thread: the messages ---------- */
#app .th-sec{margin-top:var(--jz-s7)}
#app .th .tv{min-height:0;background:none}
#app .th .thread{display:flex;flex-direction:column;gap:8px;padding:0}
#app .th .ctv-day{align-self:center;margin:var(--jz-s3) 0 var(--jz-s1);padding:0 12px;font:600 var(--jz-t-label)/1.6 var(--jz-sans);color:var(--jz-ink-2)}
#app .th .msg{max-width:84%;padding:12px 16px;border:0;border-radius:22px;font:500 var(--jz-t-body)/1.42 var(--jz-sans);white-space:pre-line;overflow-wrap:anywhere}
#app .th .msg.in{align-self:flex-start;background:var(--jz-surface);color:var(--jz-ink);border-bottom-left-radius:6px;box-shadow:var(--jz-shadow)}
#app .th .msg.out{align-self:flex-end;background:var(--jz-wash);color:var(--jz-ink);border-bottom-right-radius:6px;box-shadow:none}
#app .th .msg.out[data-by=jeevz],#app .th .msg.out[data-by=assistant]{background:var(--jz-surface);box-shadow:inset 0 0 0 1.5px var(--jz-wash-edge)}
#app .th .msg small{display:block;margin-top:6px;font:500 var(--jz-t-label)/1.3 var(--jz-sans);font-variant-numeric:tabular-nums;color:var(--jz-ink-2)}
#app .th .msg.out small{text-align:right}
#app .th .msg[data-by=jeevz] small,#app .th .msg[data-by=assistant] small{color:var(--jz-forest);font-weight:600}
#app .th .msg-cap{align-self:flex-end;margin:-2px 6px 4px;font:500 var(--jz-t-label)/1.3 var(--jz-sans);color:var(--jz-ink-2)}
#app .th .msg-cap.is-fail{color:var(--jz-danger);font-weight:600}
#app .th .evt{align-self:stretch;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-height:0;margin:4px 0;padding:10px 14px;border-radius:var(--jz-r-inner);background:var(--jz-surface-2);box-shadow:none;font:500 15px/1.35 var(--jz-sans);color:var(--jz-ink-2);text-align:left}
#app .th .evt b{font-weight:700;color:var(--jz-ink)}
#app .th .evt span{flex:1 1 60%;min-width:0;color:var(--jz-ink);overflow-wrap:anywhere}
#app .th .evt small{margin-left:auto;font:500 var(--jz-t-label)/1.35 var(--jz-sans);font-variant-numeric:tabular-nums;color:var(--jz-ink-2)}
#app .th .evt[data-kind=missed_call]{background:var(--jz-danger-soft)}
#app .th .evt[data-kind=missed_call] b{color:var(--jz-danger)}
#app .th .jz-empty{margin:var(--jz-s4) 0}

/* ---------- Thread: the reply tray (Call, then the one main action) ---------- */
#app .th .dock.ctv-reply{padding-top:6px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#app .th .dock.ctv-reply::before{content:none}
#app .th-tray{padding:10px 12px 12px;border-radius:32px;background:var(--jz-bar-solid);box-shadow:var(--jz-shadow-2)}
#app .th-tray .jz-lock{display:block;margin:2px 8px 10px;font-size:15px;text-wrap:balance}
#app .th-tray .jz-lock .jz-ic{margin:-3px 6px 0 0;vertical-align:middle}
#app .th-tray-row{display:flex;align-items:center;gap:10px}
#app .th-tray-row>.jz-btn{flex:1;min-width:0;width:auto;min-height:var(--jz-btn-l)}
#app .th-sq{width:var(--jz-btn-l);height:var(--jz-btn-l);background:transparent;color:var(--jz-ink);box-shadow:inset 0 0 0 2px var(--jz-btn2-ring);transition:transform var(--jz-dur-press) var(--jz-ease-out)}
#app .th-sq:active{transform:scale(.94)}
#app .th-sq .jz-ic{width:24px;height:24px;stroke-width:2.2}
#app .th-main .jz-mark{width:26px;height:26px}
#app .th-main .ctv-ph{overflow:hidden;text-overflow:ellipsis}
#app .th-lock{margin:var(--jz-s6) 0 0}

/* ---------- Thread: more for this person (Quote, Book, New job, Price check) ---------- */
#app .th-more{display:flex;flex-wrap:wrap;gap:8px;margin:var(--jz-s6) 0 0}
#app .th-act{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border-radius:var(--jz-r-full);background:var(--jz-surface);box-shadow:var(--jz-shadow);color:var(--jz-ink);font:600 16px/1 var(--jz-sans);text-decoration:none;list-style:none;cursor:pointer}
#app .th-act::-webkit-details-marker{display:none}
#app .th-act .jz-ic{width:20px;height:20px;color:var(--jz-forest)}
#app .th-more .ctv-more{position:relative}
#app .th-menu{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#app .th-more:has(.ctv-more[open]){flex-direction:column;align-items:flex-start}
@media (prefers-reduced-motion:reduce){#app :is(.ib-chip,.ib-call,.th-pt,.th-sq){transition:none}#app .th-own-row>.jz-ic{transition:none}}
#app .th .dock.ctv-reply{z-index:31;bottom:calc(var(--jz-tabbar) + var(--jz-safe-b) + 10px)}
#app .th .msg .th-lead{display:block;font-weight:700}
#app .th .msg .th-lead-l{display:block;margin-top:4px}
/* a danger card names the person in big type; the page title stays for screen readers only */
#app .th.is-danger .th-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#app .th.is-danger .th-who{margin-top:0}
#app .ib-row .jz-li-av .av{all:unset;font:inherit;color:inherit}
#app .th-meta .ctv-mail{flex-basis:100%}
#app .th-meta .ctv-mail::before{content:none}