/* The chat room: the door (sign in, make an account) and the room itself. Builds on style.css. */

.chat-col{padding-bottom:0}
.chat-col [hidden]{display:none !important}
.quiet{color:var(--muted-foreground)}
.wait{padding:2rem 1rem;font-family:var(--font-mono);font-size:var(--text-meta)}

/* ---- the door ---- */
.gate .welcome p{font-size:var(--text-input)}
.gate-entry .rail{min-height:5rem}
.gate-entry .rail .tail{top:calc(2rem - 1px);bottom:0}
.gate-entry .rail .end{display:none}
.gate-entry:last-child .rail .tail{display:none}
.gate-entry .body{padding-bottom:1.25rem}
.form{display:grid;gap:.625rem;margin-top:.625rem;max-width:24rem}
.link-form{margin-top:1.25rem;padding-top:1rem;border-top:1px dashed var(--border)}
.field{display:grid;gap:.3rem;font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground);min-width:0}
.field input{height:2.5rem;padding:0 .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-family:var(--font-sans);font-size:var(--text-body);color:var(--foreground);background:var(--card);min-width:0;width:100%}
.field input:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring-field)}
.row{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap}
.row .field{flex:1 1 8rem}
.row .btn-sm{height:2.5rem}
.btn-sm:disabled{opacity:.6;cursor:default}
.quiet-btn{background:var(--muted);color:var(--foreground)}
.quiet-btn:hover{background:var(--accent)}
.err{color:var(--danger);font-size:var(--text-small);min-height:1.25em;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.125rem}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-flex;align-items:center;height:2rem;padding:0 .75rem;border:1px solid var(--border);border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:var(--text-ui);color:var(--foreground);background:var(--card);transition:background-color .15s,border-color .15s}
.chips input:checked + span{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.chips input:focus-visible + span{box-shadow:var(--ring)}
.more{display:inline-block;margin-top:.25rem;color:var(--primary);font-family:var(--font-mono);font-size:var(--text-meta)}
.more:hover{text-decoration:underline}
.agree{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--text-ui);color:var(--muted-foreground)}
.agree input{margin:.2rem 0 0;accent-color:var(--primary)}
.agree a{color:var(--primary)}
.agree a:hover{text-decoration:underline}
.working{font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground);align-self:center}
.working:not(:empty)::after{content:"…"}

/* ---- the room ---- */
.room{display:flex;flex-direction:column;min-height:calc(100svh - 3.3rem)}
.room-top{position:sticky;top:3.3rem;z-index:9;display:flex;align-items:baseline;gap:.75rem;padding:.625rem 1rem;background:var(--card);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground);flex-wrap:wrap}
.room-top .who{font-family:var(--font-sans);font-size:var(--text-body);font-weight:600;color:var(--foreground);cursor:pointer}
.room-top .here{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leave{margin-left:auto;border:0;background:none;padding:0;font:inherit;color:var(--muted-foreground);cursor:pointer}
.leave:hover{color:var(--foreground);text-decoration:underline}
.bell{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:-.25rem 0;padding:0;border:0;border-radius:var(--radius);background:none;color:var(--muted-foreground);cursor:pointer;flex-shrink:0}
.bell:hover{background:var(--accent);color:var(--foreground)}
.bell[hidden]{display:none}
.bell svg{width:20px;height:20px}
.bell.info{margin-left:auto}
.bell.shut{margin-left:-.25rem}
.panel .note,.panel .k{color:color-mix(in srgb,var(--primary) 60%,var(--muted-foreground))}
.older{padding:.75rem 1rem;text-align:center;font-family:var(--font-mono);font-size:var(--text-meta)}
.older a{color:var(--primary)}
.older a:hover{text-decoration:underline}
.messages{flex:1}
.empty{padding:3rem 1rem;text-align:center;color:var(--muted-foreground)}
.msg .rail{min-height:0}
.msg .rail .tail{top:0;bottom:0}
.msg .rail .dot{position:absolute;top:1.45rem;left:50%;width:.875rem;height:.875rem;transform:translate(-50%,-50%);border-radius:var(--radius-round);background:var(--lane);border:3px solid var(--card);box-shadow:0 0 0 2px var(--lane)}
.msg.last .rail .tail{bottom:auto;height:1.45rem}
.msg .body{padding:.625rem 1rem .625rem 0}
.msg .head .title{font-weight:600;white-space:normal}
.msg .text{white-space:pre-wrap}
.msg.mine .head .title{color:var(--primary)}
.compose{position:sticky;bottom:var(--kb,0px);z-index:8;display:flex;gap:.5rem;align-items:flex-end;padding:.75rem 1rem;background:var(--card);border-top:1px solid var(--border);padding-bottom:calc(.75rem + env(safe-area-inset-bottom))}
.compose textarea{flex:1;min-width:0;resize:none;height:2.5rem;max-height:10rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-size:var(--text-input);line-height:1.4;color:var(--foreground);background:var(--card)}
.compose textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring-field)}
.compose .btn-sm{height:2.5rem}
.room ~ .foot{display:none}
#room:not([hidden]) ~ .foot{display:none}

/* room switcher: only shown to people who are in a private room as well as the lobby */
.room-top .rooms{flex:1 1 100%;display:flex;gap:.375rem;flex-wrap:wrap;margin-bottom:.125rem}
.room-top .rooms[hidden]{display:none}
.room-tab{font:inherit;font-family:var(--font-sans);font-size:var(--text-small);padding:.25rem .625rem;border:1px solid var(--border);border-radius:var(--radius-pill);background:transparent;color:var(--muted-foreground);cursor:pointer}
.room-tab.on{background:var(--foreground);color:var(--card);border-color:var(--foreground)}

/* groups and direct messages (2026-10-26) */
.room-tab.new{position:relative}
.room-tab.new::after{content:"";position:absolute;top:-2px;right:-2px;width:.5rem;height:.5rem;border-radius:var(--radius-round);background:var(--primary);border:2px solid var(--card)}
.room-tab.add{border-style:dashed}
.room-tab .k{opacity:.6;margin-right:.25rem}
.msg .head .title.who-btn,.msg .rail .dot.who-btn{cursor:pointer}
.here button{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.here button:hover{color:var(--foreground);text-decoration:underline}
.panel{padding:.75rem 1rem;background:var(--card);border-bottom:1px solid var(--border);font-size:var(--text-ui);display:grid;gap:.5rem}
.panel .k{font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground)}
.panel .person{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.panel .person .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel .person small{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted-foreground)}
.panel .acts{display:flex;gap:.5rem;flex-wrap:wrap}
.panel .note{color:var(--muted-foreground);font-size:var(--text-small);margin:0}
.panel input{height:2.25rem;padding:0 .625rem;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-size:var(--text-body);background:var(--card);color:var(--foreground);min-width:0;flex:1}
.mini{font:inherit;font-family:var(--font-mono);font-size:var(--text-meta);padding:.2rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--foreground);cursor:pointer}
.mini:hover{background:var(--accent)}
.mini.warn{color:var(--danger)}
.panel .alerts .mini{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2rem;font-size:var(--text-body)}
.panel .alerts .mini svg{width:18px;height:18px}
.panel .alerts .mini.on{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
.menu{position:fixed;z-index:30;display:grid;min-width:9rem;padding:.25rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 24px rgba(0,0,0,.12)}
.menu button{border:0;background:none;text-align:left;padding:.5rem .625rem;border-radius:var(--radius-sm);font:inherit;font-size:var(--text-ui);color:var(--foreground);cursor:pointer}
.menu button:hover{background:var(--accent)}
.menu .warn{color:var(--danger)}

/* the messenger list under Chat in the sidebar; on desktop it replaces the row of room pills (2026-10-26) */
.side-rooms{display:none}

.side-k{padding:.625rem .5rem .25rem;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted-foreground);text-transform:lowercase}
.side-room{position:relative;display:flex;align-items:center;gap:.5rem;width:100%;height:2rem;padding:0 .5rem;border:0;border-radius:var(--radius-sm);background:none;font:inherit;font-size:var(--text-ui);color:var(--muted-foreground);text-align:left;cursor:pointer}
.side-room:hover{background:var(--accent);color:var(--foreground)}
.side-room.on{background:var(--accent);color:var(--foreground);font-weight:600}
.side-room .k{width:1rem;flex-shrink:0;text-align:center;font-family:var(--font-mono);font-size:var(--text-meta);opacity:.6}
.side-room .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-room.new .n{color:var(--foreground);font-weight:600}
.side-room .cnt{margin-left:auto;width:.5rem;height:.5rem;flex-shrink:0;border-radius:var(--radius-round);background:var(--primary)}
.side-room .cnt.count{width:auto;min-width:1.125rem;height:1.125rem;padding:0 .3rem;box-sizing:border-box;color:#fff;font:600 11px/1.125rem var(--font-mono);text-align:center}
.side-room.add{margin-top:.25rem}

/* the room's own line: its name, then whose it is (2026-10-26) */
.room-top .here{flex:1 1 100%;order:5}
/* Prometheus at work in his DM (2026-10-26) */
.working{margin:0;padding:.25rem 1rem .5rem;font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground)}
.working::after{content:"…"}
/* the hamburger and its list of chats, in place of the row of pills (2026-10-26) */
.room-top{align-items:center}
.burger{position:relative;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:-.25rem 0 -.25rem -.5rem;padding:0;border:0;border-radius:var(--radius);background:none;color:var(--foreground);cursor:pointer;flex-shrink:0}
.burger svg{transition:transform .2s}
.burger[aria-expanded="true"] svg{transform:rotate(180deg)}
.burger:hover,.burger[aria-expanded="true"]{background:var(--accent)}
.burger svg{width:20px;height:20px}
.burger.new::after{content:"";position:absolute;top:.25rem;right:.25rem;width:.5rem;height:.5rem;border-radius:var(--radius-round);background:var(--primary);border:2px solid var(--card)}
.burger.new[data-n]::after{content:attr(data-n);top:-.125rem;right:-.25rem;width:auto;min-width:1.125rem;height:1.125rem;padding:0 .25rem;box-sizing:border-box;color:#fff;font:600 11px/calc(1.125rem - 4px) var(--font-mono);text-align:center}
.drawer{position:absolute;left:.5rem;top:calc(100% + .25rem);z-index:8;width:min(17rem,calc(100vw - 2rem));display:flex;flex-direction:column;gap:1px;padding:.375rem;background:#eef3fd;border:1px solid rgba(59,111,224,.25);border-radius:0;box-shadow:var(--shadow-pop);max-height:60vh;overflow-y:auto}
.drawer[hidden]{display:none}
/* in the chat only the room's name line and the box stay pinned, so the keyboard leaves room for the messages (2026-10-26) */
.chat-col .topbar{position:relative}
.room-top{top:0}
.drawer-scrim{position:fixed;inset:0;z-index:7;background:var(--overlay);touch-action:none}
.drawer-scrim[hidden]{display:none}
.drawer-open{overflow:hidden}
.drawer .side-room{height:2.5rem;font-size:var(--text-body);border-radius:0}
/* the developer's footboard stays off the chat page: it peeked out between the typing box and the keyboard (2026-10-26) */
.chat-col .cs-fb{display:none}
.sw-pick{position:relative;display:inline-flex;flex:none;justify-self:start}
.swatches{position:absolute;left:0;top:calc(100% + .375rem);z-index:6;display:flex;gap:.375rem;padding:.5rem;background:var(--card);border:1px solid var(--border);box-shadow:0 8px 24px rgba(18,20,23,.14)}
.swatches[hidden]{display:none}
.sw{width:1.25rem;height:1.25rem;padding:0;border:0;border-radius:0;cursor:pointer}
.sw.on{outline:2px solid var(--foreground);outline-offset:2px}
.drawer .side-k{font-family:var(--font-sans);font-size:var(--text-meta);font-weight:600;text-transform:none;letter-spacing:0}
.drawer .side-room:hover{background:var(--primary-tint)}
.drawer .side-room.on{background:var(--primary-tint)}

/* replies, pictures, statuses, avatars (2026-10-26) */
.compose{flex-wrap:wrap}
.compose .bell{height:2.5rem}
.pending{flex:1 1 100%;display:flex;align-items:center;gap:.5rem;font-size:var(--text-small);color:var(--muted-foreground);min-width:0}
.pending span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pending img{height:3rem;border-radius:var(--radius-xs);border:1px solid var(--border)}
.msg .rail .dot.pic{width:1.5rem;height:1.5rem;background:var(--card) center/cover no-repeat;border-width:2px}
.msg .quote{display:block;margin:.125rem 0 .25rem;padding:.125rem .5rem;border-left:3px solid var(--border);font-size:var(--text-small);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.msg .reply-btn{border:0;background:none;padding:0;margin-left:.5rem;font:inherit;font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground);cursor:pointer}
.msg .reply-btn:hover{color:var(--foreground);text-decoration:underline}
.msg .pic-msg{display:block;max-width:100%;max-height:20rem;margin:.25rem 0;border-radius:var(--radius-sm);border:1px solid var(--border)}
.msg.flash{background:var(--accent)}
.st{display:inline-block;width:.5rem;height:.5rem;margin-right:.25rem;border-radius:var(--radius-pill);vertical-align:middle;background:var(--success)}
.st.away{background:#f59f00}
.st.busy{background:var(--danger)}
/* Report (2026-10-26): a quiet word beside Reply; the panel's form stacks its reason chips, the box and the buttons */
.msg .report-btn{opacity:.75}
.panel .report-form{display:grid;gap:.5rem}
.panel .report-form input{width:100%;box-sizing:border-box}
.panel .mini.chip{border-radius:var(--radius-pill)}

/* a markdown file Prometheus attached, and the reader it opens in (2026-10-26) */
.msg .file-chip{display:inline-block;margin:.25rem .25rem 0 0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;max-width:480px;margin:0 auto;background:var(--card)}
.reader-top{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground)}
.reader-top span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-doc{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1rem 1rem calc(2rem + env(safe-area-inset-bottom));font-size:var(--text-body);line-height:1.55;overflow-wrap:anywhere}
.reader-doc h2,.reader-doc h3,.reader-doc h4,.reader-doc h5{margin:1.25rem 0 .5rem;line-height:1.3}
.reader-doc h2{font-size:var(--text-title)}.reader-doc h3{font-size:var(--text-lead)}.reader-doc h4,.reader-doc h5{font-size:var(--text-input)}
.reader-doc p,.reader-doc ul,.reader-doc ol,.reader-doc pre,.reader-doc blockquote{margin:0 0 .75rem}
.reader-doc ul,.reader-doc ol{padding-left:1.25rem}
.reader-doc li{margin:.25rem 0}
.reader-doc code{font-family:var(--font-mono);font-size:var(--text-small);background:var(--muted);padding:0 .25rem;border-radius:var(--radius-xs)}
.reader-doc pre{overflow-x:auto;padding:.5rem .75rem;background:var(--muted);border-radius:var(--radius-sm)}
.reader-doc pre code{padding:0;background:none}
.reader-doc blockquote{padding-left:.75rem;border-left:3px solid var(--border);color:var(--muted-foreground)}
.reader-doc hr{border:0;border-top:1px solid var(--border);margin:1rem 0}
.reader-doc a{color:var(--primary)}
/* @ suggestions and the / command hint, over the message box (2026-10-26) */
.suggest{position:absolute;left:1rem;right:1rem;bottom:calc(100% + .25rem);z-index:12;display:grid;padding:.25rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 24px rgba(0,0,0,.12);max-height:15rem;overflow-y:auto}
.suggest .sug{display:flex;align-items:center;gap:.5rem;min-height:2.5rem;min-width:0;padding:.25rem .5rem;border:0;border-radius:var(--radius-sm);background:none;text-align:left;font:inherit;font-size:var(--text-ui);color:var(--foreground);cursor:pointer}
.suggest .sug.on{background:var(--accent)}
.suggest .av{flex-shrink:0;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--radius-round);background:var(--muted) center/cover no-repeat;font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground)}
.suggest .n{flex-shrink:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest .h{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground)}
/* threads (2026-10-28): replies, and Prometheus's answers, fork off the line under the message they answer */
.msg.branch{position:relative}
.msg.branch .rail .dot{display:none}
.msg.branch.tail-off .rail .tail{display:none}
.msg.branch .body{position:relative;padding-left:2rem}
.msg.branch.fork-end .body::before{bottom:auto;height:1.45rem}
.msg.branch.fork-start.fork-end .body::before{display:none}
/* the fork (2026-10-29): leaves the main line just under the message it answers and drops straight down the reply's own line,
   no jog; the line is the button that folds the thread */
.msg.fork-root{position:relative}
/* folded (2026-10-29): a gentle curve peels off the line into a rounded tag with the count */
.msg .bdot{position:absolute;top:1.45rem;left:.75rem;width:.75rem;height:.75rem;transform:translate(-50%,-50%);border-radius:var(--radius-round);background:var(--blane,var(--lane));border:2px solid var(--card);box-shadow:0 0 0 2px var(--blane,var(--lane));z-index:1}
.msg .bdot.pic{width:1.25rem;height:1.25rem;background:var(--card) center/cover no-repeat}
/* follow-ups in a run (his ask, 2026-10-29): only the dot; a tap shows the send time and the buttons, never the name again */
.msg.cont .head .name{display:none}
.msg.cont:not(.open) .head{display:none}
.msg.cont.open .head{margin-bottom:.125rem}
.msg.cont .body{cursor:pointer}
/* read receipts (2026-10-29): small faces and "Seen by" under the last message each person has read */
.msg .seen{display:flex;align-items:center;gap:.25rem;margin-top:.25rem;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted-foreground)}
.msg .seen .face{display:inline-grid;place-items:center;width:1rem;height:1rem;border-radius:var(--radius-round);background:var(--muted) center/cover no-repeat;font-size:9px;color:var(--muted-foreground)}
.msg .seen .face:last-of-type{margin-right:.125rem}
/* @names in a message (2026-10-29): coloured and bold; your own on a tinted chip */
.msg .text .mention{font-weight:600;color:var(--primary)}
.msg .text .mention.me{padding:0 .2rem;border-radius:var(--radius-xs);background:color-mix(in srgb,var(--primary) 14%,transparent)}
/* the name line holds only name and time (2026-10-29); the buttons sit on a row a tap opens; swipe left to reply */
.msg .head .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg .head .name{min-width:0;overflow:hidden}
.msg .acts{display:none;gap:1.25rem;margin-top:.375rem}
.msg.open .acts{display:flex}
.msg .acts .reply-btn{margin-left:0;font-size:var(--text-small);padding:.25rem 0}
.msg.open{background:color-mix(in srgb,var(--lane) 6%,transparent)}
.msg{position:relative;overflow-x:clip;touch-action:pan-y}
.msg .body{transition:transform .18s ease-out,clip-path .18s ease-out}
.msg .swipe-hint{position:absolute;right:1rem;top:50%;transform:translateY(-50%) scale(.8);font-size:var(--text-title);color:var(--muted-foreground);opacity:0;transition:opacity .15s,transform .15s;pointer-events:none}
.msg:has(.body[style*="translateX"]) .swipe-hint{opacity:.5}
.msg.swipe-go .swipe-hint{opacity:1;color:var(--lane);transform:translateY(-50%) scale(1)}
.msg .head .when{flex-shrink:0}
/* the fork takes the colour of whoever replied (his ask, 2026-10-29); the main line beside it keeps its own */
.fork-stub{--lane:var(--flane)}
/* the fork, his first drawing (2026-10-29, "out and straight down, dotted, faded"): round dots, straight out from the
   main line and straight down into the reply, in the replier's colour, faded; the dots are the button that folds it */
.msg .fork-curve,.msg.branch .body::before,.fork-stub{--fc:var(--blane,var(--lane));--dots-x:radial-gradient(circle,var(--fc) 1.3px,transparent 1.8px) 9px 0/7px 4px repeat-x;--dots-y:radial-gradient(circle,var(--fc) 1.3px,transparent 1.8px) right 0 top 3px/4px 7px repeat-y}
.msg.branch .body::before{content:"";position:absolute;left:calc(.75rem - 2px);top:0;bottom:0;width:4px;background:var(--dots-y);opacity:.55}
.msg .fork-curve:hover,.msg .fork-curve:focus-visible{opacity:1}
.msg.fork-root .body{padding-bottom:1.25rem}
.fork-stub:hover,.fork-stub:focus-visible{opacity:1}
/* the fork at an angle (his ask, 2026-10-29: "doesn't have to go out that far... shoot down at an angle"): one dotted
   diagonal from the main line straight into the reply's face; folded, a short one ending in a ring, no words */
.msg.fork-root.last .rail .tail{bottom:1rem;height:auto}
.msg.branch.fork-start .body::before{top:1.45rem}
.msg .fork-curve{--dx:calc(var(--rail-width) / 2 + .75rem);--dy:2.45rem;position:absolute;left:calc(var(--rail-width) / 2);top:calc(1.45rem - var(--dy) - 2px);width:hypot(var(--dx), var(--dy));height:4px;padding:0;border:0;background:var(--dots-x);background-position:8px 0;transform-origin:0 50%;transform:rotate(atan2(var(--dy), var(--dx)));opacity:.55;cursor:pointer;z-index:0;transition:opacity .15s}
.msg .fork-curve::after{content:"";position:absolute;inset:-.7rem 0}
.msg.fork-root.folded .body{padding-bottom:1.25rem}
.msg.fork-root.folded.last .rail .tail{bottom:1rem}
.fork-stub{--fc:var(--lane);--dx:calc(var(--rail-width) / 2 + .75rem);--dy:2.45rem;position:absolute;left:calc(var(--rail-width) / 2);top:calc(100% - 1rem - 2px);width:1.3rem;height:4px;padding:0;border:0;background:var(--dots-x);background-position:8px 0;transform-origin:0 50%;transform:rotate(atan2(var(--dy), var(--dx)));opacity:.6;cursor:pointer;z-index:2;transition:opacity .15s}
.fork-stub::before,.msg .fork-curve::before{content:"";position:absolute;left:1.3rem;top:50%;width:.6rem;height:.6rem;transform:translate(-50%,-50%);border:2px solid var(--fc);border-radius:var(--radius-round);background:var(--card)}
.fork-stub::after{content:"";position:absolute;inset:-.8rem -.8rem -.8rem -.2rem}
.fork-stub span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the ring stays on the line when the thread is open, where it sat folded (his ask, 2026-10-29) */
.msg .fork-curve::before{border:2px solid var(--fc);border-radius:var(--radius-round);background:var(--card)}

/* WhatsApp-style list of chats on its own surface; tap in, back arrow out (his ask, 2026-10-29) */
.room.in-list > :not(.chats):not(.panel){display:none !important}
.room:not(.in-list) > .chats{display:none}
.room.in-list .panel{order:-1}
.chats{display:flex;flex-direction:column;background:var(--card);padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
.chats-h{margin:0;padding:1rem 1rem .5rem;font-size:22px;font-weight:600;color:var(--foreground)}
.chat-row{display:flex;align-items:center;gap:.75rem;width:100%;padding:0 1rem;border:0;background:none;text-align:left;font:inherit;color:var(--foreground);cursor:pointer;-webkit-tap-highlight-color:transparent}
.chat-row:hover,.chat-row:active{background:var(--accent)}
.chat-row .face{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;flex-shrink:0;border-radius:var(--radius-round);background:var(--lane) center/cover no-repeat;color:#fff;font-size:18px;font-weight:600}
.chat-row .mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem;padding:.75rem 0;border-bottom:1px solid var(--border)}
.chat-row:last-of-type .mid{border-bottom:0}
.chat-row .top,.chat-row .sub{display:flex;align-items:center;gap:.5rem}
.chat-row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-input);font-weight:500}
.chat-row .t{flex-shrink:0;font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground)}
.chat-row .p{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-ui);color:var(--muted-foreground)}
.chat-row.new .n{font-weight:700}
.chat-row.new .t{color:var(--primary)}
.chat-row.new .p{color:var(--foreground)}
.chat-row .dot-new{width:.625rem;height:.625rem;flex-shrink:0;border-radius:var(--radius-round);background:var(--primary)}
.chat-row .dot-new.count{width:auto;min-width:1.25rem;height:1.25rem;padding:0 .35rem;box-sizing:border-box;color:#fff;font:600 11px/1.25rem var(--font-mono);text-align:center}
.chats-add{display:flex;gap:.5rem;padding:1rem}
.burger.back{margin-right:-.5rem}

/* bot badges (2026-10-29): a gold star on the premium bot (the Cutscene bot), a wrench on Prometheus (developer only) */
.chat-row .face{position:relative}
.chat-row .face.premium::after,.chat-row .face.dev::after{content:"";position:absolute;right:-2px;bottom:-2px;width:1.15rem;height:1.15rem;border-radius:var(--radius-round);border:2px solid var(--background,#fff);background:center/70% no-repeat}
.chat-row .face.premium::after{background-color:#f2b632;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231f2a44' d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E")}
.chat-row .face.dev::after{background-color:var(--muted-foreground);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E")}
.who-badge{display:inline-block;width:.95em;height:.95em;vertical-align:-.1em;background:center/contain no-repeat}
.who-badge.premium{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2b632' d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E")}
.who-badge.dev{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E")}
.side-room .k.premium{color:#f2b632;opacity:1}

/* Chat as an app (2026-10-30): its own menu lists the rooms and direct messages, as a quick switcher */
.side[data-app="chat"] .side-rooms{display:block;padding:0 .25rem}
.side[data-app="chat"] .side-rooms[hidden]{display:none}
.side[data-app="chat"] .sidenav{overflow-y:auto}
.side[data-app="chat"] .side-k{padding:.875rem .75rem .25rem;text-transform:uppercase;letter-spacing:.06em}