/* Slirc landing demos: the app's own chat UI rendered inside a framed box.
   Every rule below is lifted from app/public/style.css and adjusted for a container:
   position: fixed -> absolute, viewport media queries -> .frame--phone / .frame--desktop,
   env(safe-area-inset-*) -> 0. Sources by app/public/style.css line:
   tokens 1-17 · header 87-150 · desktop docked 271-341 · rooms 344-433 · chat 441-700
   composer 869-980 · mobile nav 547-556 · agent-mark 1057 · message grids 1218-1254 · members 1438-1456
   When the app UI changes, re-check those ranges. */

.frame {
  --bg: #11111b;
  --bg-glow: radial-gradient(34rem 34rem at 50% -10rem, #1e1e2e, var(--bg));
  --blur-medium: blur(9px);
  --panel: #181825;
  --panel-hi: #313244;
  --text: #cdd6f4;
  --muted: #7f849c;
  --line: var(--panel-hi);
  --brand: #a6e3a1;
  --accent: var(--brand);
  --mine: #94e2d5;
  --danger: #f38ba8;
  --nav-h: 4.1rem;
  --nav-lift: .5rem;
  --header-h: 3.625rem;
  --composer-h: 3.25rem;
  --composer-bottom: 1rem;
  --rail: 15rem;
  --gutter: 3rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--panel-hi) 70%, transparent);
  border-radius: 1rem;
  background: var(--bg-glow);
  color: var(--text);
  font: 1rem/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.frame * { box-sizing: border-box; }
.frame [hidden] { display: none !important; }
.frame button { font: inherit; color: inherit; }
.frame img { max-width: none; }

/* Phone frame: a 9:19.5 iPhone shell. Desktop frame: 16:9.5, laid out at 64rem and zoomed to fit. */
.frame--phone { width: 20.5rem; max-width: 100%; aspect-ratio: 8.4 / 20.5; --header-h: 6.25rem; --nav-lift: 1.15rem; --composer-bottom: calc(var(--nav-h) + var(--nav-lift) + .5rem); border: 7px solid #090a0e; border-radius: 2.5rem; background: #11111b; box-shadow: 0 1.5rem 3.5rem #000a, inset 0 0 0 1px #000; }
.frame--desktop { width: 64rem; aspect-ratio: 16 / 9.5; zoom: var(--frame-scale, 1); }
.frame .iphone-status { display: none; }
.frame--phone .iphone-status { position: absolute; z-index: 30; top: .95rem; left: 1.35rem; right: 1.35rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #f5f5f7; font: 700 .82rem/1 system-ui, -apple-system, BlinkMacSystemFont, sans-serif; pointer-events: none; }
.frame--phone .iphone-time { padding-left: .15rem; }
.frame--phone .iphone-island { width: 6.4rem; height: 1.55rem; border-radius: 999px; background: #050506; box-shadow: inset 0 0 0 1px #17171b; }
.frame--phone .iphone-icons { display: flex; align-items: center; justify-content: end; gap: .28rem; }
.frame--phone .iphone-icons img { display: block; width: auto; height: .6rem; }
.frame--phone .iphone-icons img:last-child { height: .65rem; }

/* Header (style.css:87-124, docked 271-341) */
.frame header {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--panel) 68%, transparent);
  backdrop-filter: var(--blur-medium) saturate(1.15);
  -webkit-backdrop-filter: var(--blur-medium) saturate(1.15);
}
.frame .header-logo { display: inline-flex; align-items: center; gap: .3rem; color: var(--text); }
.frame .header-logo .header-mark { width: 1.25rem; height: 1.25rem; }
.frame .room-heading { min-width: 0; margin-left: auto; display: grid; justify-items: end; }
.frame .room-heading-main { min-width: 0; display: flex; align-items: flex-start; gap: .65rem; }
.frame .room-title { display: inline-flex; align-items: center; gap: .45rem; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; }
.frame .room-mark { position: relative; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--panel-hi); color: var(--muted); font: 750 .85rem/1 system-ui, sans-serif; }
.frame .room-mark img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.frame .room-title-text { display: grid; min-width: 0; }
.frame .room-subtitle { display: none; }
.frame .mobile-back { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; margin-left: -.35rem; border: 0; border-radius: .6rem; background: transparent; color: var(--text); }
.frame .mobile-back svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.frame .members-icon { display: block; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: url(/img/ui/members.svg) center / contain no-repeat; mask: url(/img/ui/members.svg) center / contain no-repeat; }
.frame .members-toggle { flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: var(--muted); display: grid; place-items: center; }
.frame .members-toggle.active { color: var(--brand); }
.frame .members-toggle .members-icon { width: 1.2rem; height: 1.2rem; }
.frame .header-dms { display: flex; align-items: center; }
.frame .header-dm { position: relative; width: 1.9rem; height: 1.9rem; margin-left: -.55rem; padding: 0; border: 0; border-radius: 50%; background: var(--panel-hi); color: var(--text); font: 700 .7rem/1 system-ui, sans-serif; display: grid; place-items: center; overflow: hidden; }
.frame .header-dm:first-child { margin-left: 0; }
.frame .header-dm img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.frame--phone header { gap: .5rem; padding-top: 1.75rem; padding-inline: 12px; }
.frame--phone .header-logo, .frame--phone .members-toggle, .frame--phone .header-dms { display: none; }
.frame--desktop header { z-index: 22; padding-inline: calc(var(--rail) + var(--gutter)) var(--gutter); }
.frame--desktop .mobile-back { display: none; }
.frame--desktop .room-heading { order: -1; margin-left: 0; margin-right: auto; justify-items: start; }
.frame--desktop .room-title { color: var(--text); }
.frame--desktop .room-title-text { justify-items: start; text-align: left; line-height: 1.2; }
.frame--desktop .room-title-text > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame--desktop .room-subtitle { display: block; overflow: hidden; max-width: 34rem; color: var(--muted); font-size: .75rem; font-weight: 400; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.frame--desktop .header-logo { position: absolute; left: 1rem; top: 50%; gap: .4rem; translate: 0 -50%; }
.frame--desktop .header-logo .header-mark { width: 1.5rem; height: 1.5rem; }
.frame--desktop .header-dms { order: 1; }
.frame--desktop .members-toggle { order: 3; }

/* Rooms rail, desktop only (style.css:344-433, docked 272-276) */
.frame .rooms-sheet {
  position: absolute;
  z-index: 21;
  inset: 0 auto 0 0;
  width: var(--rail);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4rem 14px 5.5rem;
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  backdrop-filter: var(--blur-medium) saturate(1.2);
  -webkit-backdrop-filter: var(--blur-medium) saturate(1.2);
}
.frame--phone .rooms-sheet { display: none; }
.frame .section-row { display: flex; align-items: center; margin: 14px 0 5px; }
.frame .section-title { display: flex; align-items: center; gap: .25rem; flex: 1; min-width: 0; margin: 0; padding: 0 10px; border: 0; background: transparent; color: var(--muted); font: 650 .75rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; text-transform: uppercase; letter-spacing: .09em; }
.frame .section-title svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
.frame .section-add { flex: 0 0 auto; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: 8px; padding: 0; border: 0; border-radius: .4rem; background: transparent; }
.frame .section-add img { width: 1rem; aspect-ratio: 1; opacity: .5; }
.frame .channel-row { position: relative; display: flex; align-items: center; border-radius: 6px; }
.frame .channel-row:has(.room.active) { background: var(--bg); }
.frame .channel-row:has(.room.active) .room { color: var(--text); }
.frame .room { width: 100%; flex: 1; min-width: 0; display: flex; align-items: center; gap: 1.05rem; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; text-align: left; }
.frame .room small { color: var(--muted); }
.frame .rooms-sheet .room-mark { translate: .6rem 0; }
.frame .room.active .room-mark:not(:has(img[src$="pi.svg"])) { box-shadow: 0 0 0 2px var(--brand); }
.frame .room > span:not(.room-mark):not(.unread-badge) { display: flex; align-items: baseline; gap: .3rem; flex: 1; min-width: 0; overflow: hidden; }
.frame .room-name, .frame .thread-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame .nested-thread { padding-left: 1.25rem; }
.frame .thread-room { color: var(--muted); font-size: .9rem; }
.frame .thread-room .room-mark { background: transparent; }
.frame .thread-room .room-mark svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
.frame .unread-badge { min-width: 1.25rem; margin-left: auto; padding: .14rem .38rem; border-radius: 999px; background: var(--brand); color: var(--bg); font: 750 .68rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; }
.frame .panel-footer { position: absolute; z-index: 2; left: 14px; bottom: 1rem; width: calc(var(--rail) - 28px); }
.frame .profile-card { min-width: 0; display: flex; align-items: center; border-radius: .65rem; }
.frame .profile-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; border: 0; border-radius: inherit; background: transparent; color: inherit; text-align: left; }
.frame .profile-avatar { position: relative; width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--panel-hi); color: var(--bg); font: 750 .72rem/1 system-ui, sans-serif; }
.frame .profile-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .profile-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; }
.frame .profile-copy strong { display: flex; align-items: center; gap: .35rem; color: var(--text); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame .profile-copy small { display: block; color: var(--muted); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame .admin-badge { width: .9rem; height: .9rem; flex: 0 0 auto; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Chat list (style.css:441-700) */
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.frame .history-settled .msg { animation: msg-in .26s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .12s; }
.frame .chat {
  position: absolute;
  font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace;
  inset: var(--header-h) 0 calc(var(--composer-bottom) + var(--composer-h) + .5rem);
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
  padding: 1rem;
}
.frame--desktop .chat { left: calc(var(--rail) + var(--gutter)); right: calc(var(--rail) + var(--gutter)); width: auto; margin-inline: 0; }
.frame .chat { display: flex; flex-direction: column; justify-content: flex-end; }
.frame .messages { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; transition: opacity .7s ease; }
.frame .messages.fading { opacity: 0; }
.frame .lock-icon { display: block; width: .6rem; height: .85rem; background: currentColor; -webkit-mask: url(/img/ui/lock.svg) center / contain no-repeat; mask: url(/img/ui/lock.svg) center / contain no-repeat; }
.frame .message-entry { display: contents; }
.frame .date-divider { display: flex; align-items: center; gap: .75rem; margin: 1.15rem 0 .65rem; color: var(--muted); font: 650 .75rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.frame .date-divider::before, .frame .date-divider::after { content: ""; height: 1px; flex: 1; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.frame .msg {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 3.25rem minmax(5.25rem, auto) minmax(0, 1fr);
  column-gap: 9px;
  align-items: start;
  line-height: 1.6;
  padding: 2px .25rem;
  border-radius: .3rem;
}
.frame .message-add { grid-column: 1; align-self: start; justify-self: end; width: .875rem; height: .875rem; margin: .3rem 0 0; padding: 0; border: 0; background: transparent; color: var(--muted); opacity: 0; }
.frame .msg .time { grid-column: 2; color: color-mix(in srgb, var(--muted) 52%, transparent); font-size: 1rem; font-weight: 200; text-align: right; white-space: nowrap; }
.frame .msg .nick { grid-column: 3; min-width: 0; max-width: 100%; display: flex; align-items: center; gap: .35rem; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 700; justify-self: end; text-align: right; white-space: nowrap; }
.frame .msg .nick > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.frame .msg .nick > small { flex: 0 0 auto; padding: .15rem .3rem; border: 1px solid color-mix(in srgb, var(--muted) 55%, transparent); border-radius: 999px; color: var(--muted); font: 700 .58rem/1 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.frame .mobile-time { display: none; color: var(--muted); font-size: .68rem; white-space: nowrap; }
.frame .message-avatar { display: none; position: relative; place-items: center; overflow: hidden; border-radius: 50%; background: var(--panel-hi); color: var(--bg); font: 750 .9rem/1 system-ui, sans-serif; }
.frame .message-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .message-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.frame .message-avatar:has(img[src$="pi.svg"]), .frame .room-mark:has(img[src$="pi.svg"]), .frame .message-avatar:has(img[src$="claude.svg"]), .frame .room-mark:has(img[src$="claude.svg"]) { background: transparent; border-radius: 0; }
.frame .message-avatar:has(img[src$="pi.svg"]) > span, .frame .message-avatar:has(img[src$="claude.svg"]) > span { display: none; }
.frame img[src$="pi.svg"], .frame img[src$="claude.svg"] { object-fit: contain !important; border-radius: 0 !important; }
.frame .msg .body { grid-column: 4; min-width: 0; overflow-wrap: anywhere; }
.frame .message-copy { display: block; }
.frame .msg .body .body-seg > span:first-child { white-space: pre-wrap; }
.frame .msg .body a { color: var(--mine); text-decoration: none; }
.frame .msg .body .mention { display: inline; padding: .08rem .35rem; border: 0; border-radius: .35rem; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); font: inherit; font-weight: 600; }
.frame .msg .body code { display: inline-block; max-width: 100%; vertical-align: bottom; white-space: nowrap; padding: .08rem .28rem; margin: 0 -.28rem; border-radius: .25rem; background: var(--panel-hi); color: var(--mine); font: .9em ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace; }
.frame .msg .body img { display: block; max-width: min(100%, 440px); max-height: 300px; border-radius: 7px; }
.frame .image-preview { position: relative; width: fit-content; margin-top: .45rem; }
.frame .image-preview summary { position: absolute; z-index: 1; top: .5rem; right: 1rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--panel-hi) 92%, #000); color: #fff; box-shadow: 0 .15rem .5rem #0008; list-style: none; opacity: .92; }
.frame .image-preview summary::-webkit-details-marker { display: none; }
.frame .image-preview summary svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; }
.frame .demo-photo { width: 15rem; height: 10rem; border-radius: 7px; background: linear-gradient(135deg, #313244, #1e1e2e 55%, #45475a); }
.frame .reaction-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 0; }
@keyframes reaction-in { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: .5; } }
@keyframes stamp { 0% { transform: scale(.65); } 55% { transform: scale(1.28); filter: drop-shadow(0 0 8px var(--brand)); } 100% { transform: scale(1); filter: none; } }
.frame .reaction-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 1.75rem; padding: .15rem .35rem; border: 0; background: transparent; color: var(--text); font: .85rem/1 ui-monospace, monospace; white-space: nowrap; animation: reaction-in .15s ease-out; }
.frame .reaction-chip small { color: var(--muted); font-size: .72rem; }
.frame .reaction-chip.mine { color: var(--brand); }
.frame .reaction-chip.stamp { animation: stamp .38s cubic-bezier(.12,.8,.25,1); }
.frame .thread-link { display: inline-flex; align-items: center; gap: .4rem; margin: .35rem 0 0; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; text-align: left; }
.frame .thread-link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: scaleX(-1); }
.frame .thread-avatars { display: flex; flex-direction: row-reverse; }
.frame .thread-avatars span { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-left: -.3rem; border: 1px solid var(--bg); border-radius: 50%; color: var(--bg); font: 750 .55rem/1 system-ui, sans-serif; }
.frame .thread-avatars img { width: 1.1rem; height: 1.1rem; margin-left: -.3rem; border: 1px solid var(--bg); border-radius: 50%; object-fit: cover; }

/* Embed cards (style.css:1664-1733): YouTube renders as a thumbnail with a play button. */
.frame .embed-card { position: relative; width: min(100%, 440px); margin-top: .45rem; }
.frame .embed-thumb { position: relative; width: min(100%, 440px); padding: 0; border: 0; border-radius: .65rem; overflow: hidden; background: #000; cursor: pointer; }
.frame .embed-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; max-height: none; border-radius: 0; }
.frame .embed-player { display: grid; min-height: 6rem; }
.frame .embed-player img, .frame .embed-player .embed-player-copy, .frame .embed-player .embed-play { grid-area: 1 / 1; }
.frame .embed-player .embed-player-copy { z-index: 1; align-self: end; display: grid; gap: .1rem; padding: .6rem .75rem; background: linear-gradient(transparent, #000c); color: #fff; }
.frame .embed-player .embed-player-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .85rem/1.25 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.frame .embed-player .embed-player-copy small { font: .7rem/1.2 system-ui, sans-serif; opacity: .8; }
.frame .embed-play { position: absolute; inset: 0; display: grid; place-items: center; }
.frame .embed-play::before { content: ""; width: 3rem; height: 3rem; border-radius: 50%; background: #0009; box-shadow: 0 0 0 6px #0005; transition: transform .12s ease; }
.frame .embed-play::after { content: ""; position: absolute; width: 0; height: 0; margin-left: .2rem; border-left: .85rem solid var(--brand); border-top: .55rem solid transparent; border-bottom: .55rem solid transparent; }
.frame .embed-thumb:hover .embed-play::before { transform: scale(1.12); }
.frame .message-link { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }

/* Live rail: the two rooms respond to clicks, nothing else does. */
.frame--live .room[data-room] { cursor: pointer; }
.frame--live .room[data-room]:hover { background: color-mix(in srgb, var(--panel-hi) 55%, transparent); }
.frame--live .channel-row:has(.room.active):hover { background: color-mix(in srgb, var(--bg) 90%, #000); }

/* Phone message row (style.css:1218-1226) */
.frame--phone .msg { grid-template-columns: 1.25rem 2.25rem minmax(0, 1fr) auto; column-gap: .4rem; }
.frame--phone .msg .time, .frame--phone .msg .nick { display: none; }
.frame--phone .message-avatar { display: grid; grid-column: 2; grid-row: 1; align-self: start; width: 1.5rem; height: 1.5rem; }
.frame--phone .mobile-time { display: inline; grid-column: 4; grid-row: 1; align-self: baseline; }
.frame--phone .msg .body { grid-column: 3; grid-row: 1; }

/* Desktop message row (style.css:1228-1254, nick sans 289, mention 293) */
.frame--desktop .msg { grid-template-columns: 2rem 2.25rem auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .6rem; padding: 1px .25rem 1.5rem; }
.frame--desktop .message-entry:has(.msg:not(.cont)) { margin-top: .55rem; }
.frame--desktop .message-entry:has(+ .message-entry .msg.cont) .msg { padding-bottom: .25rem; }
.frame--desktop .message-avatar { display: grid; grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 2.25rem; height: 2.25rem; margin-top: .1rem; font-size: 1rem; }
.frame--desktop .msg .nick { grid-column: 3; grid-row: 1; justify-self: start; text-align: left; font: 500 .92rem/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .01em; }
.frame--desktop .msg .time { grid-column: 4; grid-row: 1; align-self: baseline; justify-self: start; text-align: left; transform: translateY(.1875rem); color: color-mix(in srgb, var(--muted) 45%, transparent); font: 400 .75rem/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.frame--desktop .msg .body { grid-column: 3 / span 2; grid-row: 2; line-height: 1.55; }
.frame--desktop .msg.cont .message-avatar, .frame--desktop .msg.cont .nick { display: none; }
.frame--desktop .msg.cont .body { grid-row: 1; }
.frame--desktop .msg.cont .time { grid-row: 1; justify-self: end; align-self: start; margin-top: .3rem; opacity: 0; }
.frame--desktop .msg .body .mention { padding: .1rem .35rem; background: transparent; font-weight: 500; opacity: .72; }

/* Composer (style.css:869-980) */
.frame .composer {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: var(--composer-bottom);
  width: calc(100% - 1rem);
  min-height: var(--composer-h);
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--panel) 62%, transparent);
  box-shadow: 0 .5rem 1.5rem #0007;
  backdrop-filter: var(--blur-medium) saturate(1.2);
  -webkit-backdrop-filter: var(--blur-medium) saturate(1.2);
  translate: -50% 0;
}
.frame--phone .composer { gap: .25rem; width: calc(100% - 2rem); }
.frame--desktop .composer { left: calc(var(--rail) + var(--gutter)); right: calc(var(--rail) + var(--gutter)); width: auto; translate: none; }
.frame .composer-editor { position: relative; flex: 1; min-width: 0; min-height: 1.5rem; }
.frame .composer-input { display: block; width: 100%; height: 1.5rem; padding: 0 .25rem; color: var(--muted); opacity: .78; font: 1rem/1.5 ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace; white-space: nowrap; overflow: hidden; }
.frame .composer-input.typing { color: var(--text); opacity: 1; }
.frame .composer-input.typing::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; background: var(--brand); vertical-align: -.2em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.frame .composer-plus { order: -1; flex: 0 0 auto; width: 2.125rem; height: 2.5rem; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); }
.frame .composer-plus img { display: block; width: 1.2rem; height: 1.2rem; }
.frame .composer-send { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; padding: 0; position: relative; border: 0; border-radius: 50%; background: transparent; color: var(--brand); }
.frame .composer-send img { display: block; width: 1.5rem; height: 1.5rem; }
.frame--desktop .composer-send { opacity: .2; transition: opacity .15s ease; }
.frame--desktop .composer:has(.typing) .composer-send { opacity: 1; }
.frame .bot-thinking { position: absolute; bottom: 100%; left: calc(1rem + .25rem + 2rem + 9px); display: flex; align-items: center; gap: .35rem; margin-bottom: .3rem; padding: .3rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--panel) 94%, transparent); color: var(--muted); font: 500 .78rem/1 system-ui, sans-serif; animation: thinking-in .15s ease-out; }
.frame .thinking-dots { display: inline-flex; gap: .15rem; }
.frame .thinking-dots i { width: .2rem; height: .2rem; border-radius: 50%; background: currentColor; animation: thinking 1.2s ease-in-out infinite; }
.frame .thinking-dots i:nth-child(2) { animation-delay: .15s; }
.frame .thinking-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes thinking { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes thinking-in { from { opacity: 0; } }

/* Mobile nav (style.css:547-556) */
.frame .mobile-nav { position: absolute; z-index: 30; inset: auto 1rem var(--nav-lift); height: var(--nav-h); display: grid; grid-template-columns: repeat(3, 1fr); padding: .3rem .5rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--panel) 62%, transparent); backdrop-filter: var(--blur-medium) saturate(1.2); -webkit-backdrop-filter: var(--blur-medium) saturate(1.2); }
.frame--desktop .mobile-nav { display: none; }
.frame .mobile-nav button { position: relative; display: grid; place-items: center; justify-items: center; gap: .2rem; min-height: 3.4rem; padding: .45rem 0 .5rem; border: 0; background: transparent; color: var(--muted); font: 650 .78rem/1 system-ui, sans-serif; }
.frame .mobile-nav button .menu-icon { display: block; width: 2.1rem; height: 1.6rem; object-fit: contain; filter: grayscale(1) opacity(.62); }
.frame .mobile-nav button.active .menu-icon { filter: none; }
.frame .mobile-nav button.active .nav-label { color: var(--brand); }

/* Members rail, desktop only (style.css:1438-1456, docked 318-325, agent-mark 1057) */
.frame .members-panel { position: absolute; z-index: 19; top: var(--header-h); right: 0; bottom: 0; width: var(--rail); overflow: hidden; padding: .75rem .6rem 1.5rem; background: color-mix(in srgb, var(--panel) 62%, transparent); backdrop-filter: var(--blur-medium) saturate(1.2); -webkit-backdrop-filter: var(--blur-medium) saturate(1.2); }
.frame--phone .members-panel { display: none; }
.frame .members-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .25rem .5rem .6rem; }
.frame .members-head strong { font: 700 .9rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.frame .members-head small { color: var(--muted); font-size: .72rem; }
.frame .members-group { margin-bottom: .6rem; }
.frame .members-label { display: flex; justify-content: space-between; margin: 0; padding: .35rem .5rem .2rem; color: var(--muted); font: 700 .65rem/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.frame .member-row { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.5rem; padding: .3rem .5rem; border: 0; border-radius: .5rem; background: transparent; color: var(--text); text-align: left; }
.frame .member-row.offline { opacity: .55; }
.frame .member-row .room-mark { width: 1.6rem; height: 1.6rem; overflow: hidden; color: var(--bg); font: 750 .72rem/1 system-ui, sans-serif; }
.frame .member-copy { min-width: 0; display: grid; }
.frame .member-nick { display: flex; align-items: center; gap: .35rem; overflow: hidden; font-size: .88rem; white-space: nowrap; }
.frame .member-nick > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.frame .member-nick .admin-badge { width: .85rem; height: .85rem; }
.frame .agent-mark { flex: 0 0 auto; padding: .12rem .3rem; border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 999px; color: var(--brand); font: 750 .52rem/1 system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.frame .member-copy small { color: var(--muted); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes row-in { from { opacity: 0; translate: 0 6px; } }
.frame .member-row.arrive { animation: row-in .3s cubic-bezier(.2, .7, .2, 1) both; }

/* IRC frame: what Halloy shows for the same room. Halloy ships Catppuccin Mocha, so the same palette holds. */
.frame--irc { width: 64rem; aspect-ratio: 16 / 9.5; zoom: var(--frame-scale, 1); display: grid; grid-template-columns: 13rem minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); background: #1e1e2e; font: .95rem/1.5 ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace; }
.frame--irc .irc-side { padding: .9rem .6rem; background: #181825; border-right: 1px solid #313244; color: var(--muted); font-size: .85rem; }
.frame--irc .irc-server { display: flex; align-items: center; gap: .4rem; padding: .25rem .5rem .6rem; color: var(--text); font-weight: 700; }
.frame--irc .irc-server::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); }
.frame--irc .irc-buffer { display: block; padding: .28rem .5rem .28rem 1.3rem; border-radius: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame--irc .irc-buffer.active { background: #313244; color: var(--text); }
.frame--irc .irc-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.frame--irc .irc-title { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-bottom: 1px solid #313244; color: var(--text); font-size: .85rem; }
.frame--irc .irc-title small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame--irc .irc-lines { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: .75rem .9rem; overflow: hidden; transition: opacity .7s ease; }
.frame--irc .irc-lines.fading { opacity: 0; }
.frame--irc .irc-line { display: grid; grid-template-columns: 3rem minmax(6.5rem, auto) minmax(0, 1fr); column-gap: .75rem; padding: .1rem 0; overflow-wrap: anywhere; animation: msg-in .26s cubic-bezier(.2, .7, .2, 1) both; }
.frame--irc .irc-line > span { min-width: 0; }
.frame--irc .irc-line time { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.frame--irc .irc-line b { font-weight: 700; text-align: right; white-space: nowrap; }
.frame--irc .irc-line a { color: var(--mine); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.frame--irc .irc-line.event { color: var(--muted); }
.frame--irc .irc-line.event b { color: var(--muted); font-weight: 400; }
.frame--irc .irc-input { display: flex; align-items: center; gap: .6rem; margin: .5rem .9rem .9rem; padding: .45rem .7rem; border: 1px solid #313244; border-radius: .4rem; color: var(--muted); font-size: .9rem; }
.frame--irc .irc-input::before { content: "bitbonsai"; color: var(--brand); }
.frame--irc .irc-input::after { content: ""; width: 1px; height: 1.1em; background: var(--brand); animation: caret 1s steps(1) infinite; }

/* Busy Halloy buffer for the IRC chapter: fills its column, no zoom, denser type. */
.frame--irc.frame--busy { width: 100%; zoom: 1; aspect-ratio: 4 / 3; grid-template-columns: 10rem 1fr; font-size: .82rem; }
.frame--irc.frame--busy .irc-side { font-size: .78rem; }
.frame--irc.frame--busy .irc-line { grid-template-columns: 2.7rem minmax(5.5rem, auto) minmax(0, 1fr); column-gap: .55rem; padding: .05rem 0; }
.frame--irc.frame--busy .irc-lines { transition: opacity .7s ease; }
.frame--irc.frame--busy.fading .irc-lines { opacity: 0; }
@media (max-width: 640px) {
  .frame--irc.frame--busy { grid-template-columns: 1fr; aspect-ratio: 9 / 12; }
  .frame--irc.frame--busy .irc-side { display: none; }
}

/* Narrow viewports: the desktop frame drops the members rail and lays out at 44rem before zooming;
   the IRC frame is text, so it renders at native size, one column, no sidebar. */
@media (max-width: 759px) {
  .frame--desktop { width: 44rem; aspect-ratio: 16 / 11; --rail: 12rem; --gutter: 1.25rem; }
  .frame--desktop .members-panel, .frame--desktop .panel-footer { display: none; }
  .frame--desktop .chat, .frame--desktop .composer { right: var(--gutter); }
  .frame--desktop header { padding-inline: calc(var(--rail) + var(--gutter)) var(--gutter); }
  .frame--irc { width: 100%; zoom: 1; grid-template-columns: 1fr; aspect-ratio: 9 / 13; font-size: .78rem; }
  .frame--irc .irc-side { display: none; }
  .frame--irc .irc-line { grid-template-columns: 2.6rem minmax(4.5rem, auto) minmax(0, 1fr); column-gap: .5rem; }
  .frame--irc .irc-lines { padding: .6rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .frame .history-settled .msg, .frame .reaction-chip, .frame .reaction-chip.stamp, .frame .member-row.arrive, .frame--irc .irc-line, .frame .bot-thinking, .frame .composer-input.typing::after, .frame--irc .irc-input::after { animation: none; }
  .frame .thinking-dots i { animation: none; opacity: .6; }
}