/* Next Kopi · round 30 · Talk and Message the host (additions, after r28.css)
   Every colour is an existing token: Talk's unread mark is round 9's --talk-new, the fills are round 9's talk fills. No new hex values, no new faces.
   Hard rule: no inbox look. Talk is round 9's thread; Customers is a list of sentences with faces, not a table. */
:root,[data-theme]{--tk30-new:var(--talk-new);--tk30-fill:var(--talk-fill)}
/* the Talk line on the circle page: under the WhatsApp group line, the same outline, the last message as a sentence */
.tl30{margin:0 16px;display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:64px;padding:10px 16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--tk30-fill);text-align:left}
.tl30 b{display:block;font:600 16px/1.3 var(--font-body);color:var(--ink)}.tl30 .d{display:block;font-size:14px;line-height:1.4;color:var(--ink);text-wrap:pretty}
.tl30 small{align-self:start;padding-top:3px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.ud30{width:10px;height:10px;border-radius:5px;background:var(--tk30-new);display:inline-block;flex:none}.ud30.off{background:transparent}
.cg30{display:flex;flex-direction:column;gap:10px}
/* the Talk page: round 9's bubbles, a sitting's messages carry their sitting as a small link */
.tp30{display:flex;flex-direction:column;gap:8px;padding:4px 16px 12px}
.lb30{display:block;font:600 12px/1.3 var(--font-body);color:var(--kopi);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px;margin-bottom:2px}
.ab30{display:block;width:max-content;max-width:100%;white-space:nowrap;font:600 12px/1.3 var(--font-body);color:var(--ink-2);border:1px solid var(--line-strong);border-radius:8px;padding:1px 7px;margin-bottom:4px}
.sh30{align-self:flex-end;display:flex;align-items:center;gap:6px;font:600 13px var(--font-body);color:var(--kopi);margin-top:-2px}
/* the pin: one post at the top, said in words */
.pn30{margin:0 16px 4px;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-raised)}
.pn30 .av{width:28px;height:28px;font-size:11px}.pn30 em{font-style:normal;display:block;font:600 12px var(--font-body);color:var(--ink-2)}.pn30 p{font-size:15px;line-height:1.4;color:var(--ink)}
.pn30 .pks15{margin-top:4px}
/* the foot of Talk and a thread: quick lines, the writing line, the lock line */
.ft30{display:flex;flex-direction:column;gap:8px;padding:10px 16px 8px;border-top:1px solid var(--line);background:var(--paper-raised)}
.rp30{font-size:13px;line-height:1.4;color:var(--ink-2);background:var(--paper-sunk);border-radius:10px;padding:6px 10px;text-wrap:pretty}
/* a big circle's posts: a host's post, its replies as a sentence link */
.ps30{margin:0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper-raised);display:flex;flex-direction:column;gap:6px}
.ps30 .w{display:flex;align-items:center;gap:8px;font:600 14px var(--font-body)}.ps30 .w .av{width:28px;height:28px;font-size:11px}.ps30 .w small{font-weight:400;font-size:12px;color:var(--ink-2)}
.ps30 p{font-size:15px;line-height:1.45;color:var(--ink);text-wrap:pretty}
/* a thread: what they bought, at the top */
.ob30{margin:0 16px;padding:10px 14px;border-radius:var(--r-card);background:var(--paper-sunk);display:flex;flex-direction:column;gap:4px}
.ob30 h3{font:600 12px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}.ob30 p{font-size:15px;line-height:1.4;color:var(--ink)}
:lang(zh-Hans) .ob30 h3,:lang(my) .ob30 h3{letter-spacing:0;text-transform:none}
/* Customers: one sentence a person, a face, the newest first */
.cu30{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.cu30>.fc30{display:flex}.cu30 .t{display:flex;align-items:baseline;gap:8px}.cu30 b{font:600 16px var(--font-body);color:var(--ink)}
.cu30 .mg{display:block;font-size:15px;line-height:1.4;color:var(--ink);text-wrap:pretty}.cu30 small{display:block;font-size:13px;color:var(--ink-2);padding-top:2px}
.cu30.rd .mg{color:var(--ink-2)}
/* a message shown on its order */
.om30{margin-top:6px;display:flex;flex-direction:column;gap:6px}
:lang(my) :is(.tl30 .d,.pn30 p,.ps30 p,.cu30 .mg,.ob30 p,.rp30){line-height:1.8}
/* a message opened from a link: briefly marked */
.hl30{outline:2px solid var(--kopi);outline-offset:2px;border-radius:var(--r-card)}
/* round 30.1 note 2: a circle with no mark and a long name (“Rendang Fridays”) pushed the header row past the phone's width.
   The name now shrinks and wraps instead; the buttons and the face keep their size. */
.hd .bar:has(>.lt){height:auto;min-height:44px}
.hd .bar>.lt{min-width:0;flex:1 1 auto;white-space:normal;text-wrap:balance}
.hd .bar>.lt+*{flex:none}