/* Chat rooms in team projects (public/chat.js). Theme tokens only. */
.chat { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 520px; height: min(72vh, 820px); border: 1px solid var(--line); background: var(--paper); }
.chat-rooms { border-right: 1px solid var(--line); background: var(--wash); display: flex; flex-direction: column; min-height: 0; }
.chat-rooms-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 6px 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.chat-rl { list-style: none; margin: 0; padding: 2px 6px 10px; overflow: auto; }
.chat-rl li { display: flex; align-items: center; }
.chat-room { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 7px 8px; background: none; border: 0; border-radius: 4px; color: var(--mute); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.chat-room i { display: grid; flex: none; opacity: .75; }
.chat-room span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-room:hover { background: var(--paper); color: var(--ink); }
.chat-room.on { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
.chat-room.unread { color: var(--ink); font-weight: 600; }
.chat-room b { flex: none; min-width: 18px; padding: 0 5px; background: var(--gold); color: var(--on-gold); font-size: 11px; line-height: 18px; text-align: center; border-radius: 9px; }
.chat-ib { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; background: none; border: 0; color: var(--mute); cursor: pointer; border-radius: 4px; }
.chat-ib:hover, .chat-ib:focus-visible { color: var(--ink); background: var(--paper); }
.chat-ib.sm { width: 24px; height: 24px; opacity: 0; }
.chat-rl li:hover .chat-ib.sm, .chat-ib.sm:focus-visible { opacity: 1; }
.chat-empty { padding: 8px; font-size: 13px; color: var(--mute); }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); min-height: 48px; }
.chat-head h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 16px; }
.chat-head h3 i { display: grid; color: var(--mute); }
.chat-head > p { margin: 0; font-size: 13px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-scroll { flex: 1; overflow: auto; padding: 8px 0 4px; overscroll-behavior: contain; }
.chat-more { display: block; margin: 6px auto 10px; font-size: 13px; }
.chat-list { list-style: none; margin: 0; padding: 0; }
.chat-day, .chat-new { display: flex; align-items: center; gap: 10px; margin: 14px 18px 6px; font-size: 12px; color: var(--mute); }
.chat-day::before, .chat-day::after, .chat-new::before, .chat-new::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.chat-new { color: var(--ft-red); font-weight: 600; } .chat-new::before, .chat-new::after { background: var(--ft-red); opacity: .5; }
.chat-start { display: grid; gap: 4px; padding: 30px 18px 10px; } .chat-start b { font-size: 18px; } .chat-start span { color: var(--mute); font-size: 14px; }
.chat-msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 6px 18px 4px; margin-top: 8px; }
.chat-msg.join { margin-top: 0; padding-top: 1px; }
.chat-msg:hover { background: var(--wash); }
.chat-av { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.chat-av.me { background: var(--gold); color: var(--on-gold); }
.chat-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.chat-meta b { font-size: 14.5px; }
.chat-meta time, .chat-t { font-size: 11.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.chat-t { grid-column: 1; text-align: right; padding-top: 3px; opacity: 0; }
.chat-msg.join:hover .chat-t { opacity: 1; }
.chat-body { grid-column: 2; font-size: 14.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.chat-body a { color: var(--ft-blue); text-decoration: underline; text-underline-offset: 2px; }
.chat-body .mention { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--ink); padding: 0 2px; border-radius: 3px; }
.chat-body .mention.me { background: color-mix(in srgb, var(--gold) 40%, transparent); font-weight: 600; }
.chat-ed { font-size: 11px; color: var(--mute); }
.chat-edit { width: 100%; font: inherit; font-size: 14.5px; padding: 6px 8px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); resize: vertical; }
.chat-body small { display: block; font-size: 11.5px; color: var(--mute); }
.chat-rp { grid-column: 2; position: relative; display: flex; gap: 6px; font-size: 12.5px; color: var(--mute); margin: 0 0 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-rp::before { content: ''; position: absolute; left: -30px; top: 8px; width: 24px; height: 10px; border: solid var(--faint); border-width: 1.5px 0 0 1.5px; border-top-left-radius: 6px; }
.chat-rp b { color: var(--ink); font-weight: 600; } .chat-rp span { overflow: hidden; text-overflow: ellipsis; }
.chat-reacts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-react { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 14px; cursor: pointer; color: var(--ink); }
.chat-react b { font-size: 12px; font-weight: 600; }
.chat-react.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--paper)); }
.chat-tools { position: absolute; right: 16px; top: -14px; display: none; gap: 0; padding: 2px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); z-index: 2; }
.chat-msg:hover .chat-tools, .chat-msg:focus-within .chat-tools { display: flex; }
.chat-msg.editing .chat-tools { display: none; }
.chat-tools button { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; background: none; border: 0; border-radius: 4px; color: var(--mute); font-size: 16px; cursor: pointer; }
.chat-tools button:hover, .chat-tools button:focus-visible { background: var(--wash); color: var(--ink); }
.chat-pick { position: absolute; right: 16px; top: 20px; z-index: 3; display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; padding: 6px; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .5); }
.chat-pick button { height: 34px; background: none; border: 0; border-radius: 4px; font-size: 18px; cursor: pointer; } .chat-pick button:hover { background: var(--wash); }
.chat-typing { min-height: 18px; margin: 0; padding: 0 18px; font-size: 12.5px; color: var(--mute); display: flex; align-items: center; gap: 8px; }
.chat-typing.on { padding-top: 6px; padding-bottom: 8px; animation: chatTypIn .18s ease-out; }
.chat-tav { width: 26px; height: 26px; font-size: 10.5px; margin: 0 0 0 -14px; grid-row: auto; border: 2px solid var(--paper); box-sizing: content-box; }
.chat-tav:first-child { margin-left: 0; }
.chat-dots { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; background: var(--wash); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; }
.chat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); opacity: .35; animation: chatDot 1.2s ease-in-out infinite; }
.chat-dots i:nth-child(2) { animation-delay: .16s; } .chat-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes chatDot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes chatTypIn { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .chat-dots i { animation: none; opacity: .7; } .chat-typing.on { animation: none; } }
.chat-compose { position: relative; padding: 4px 14px 14px; }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); }
.chat-form:focus-within { border-color: var(--ink); }
.chat-form textarea { flex: 1; border: 0; padding: 6px 0; background: none; color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.45; resize: none; outline: none; max-height: max(180px, min(40vh, 340px)); }
.chat-send { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 6px; background: var(--ink); color: var(--on-ink); cursor: pointer; }
.chat-replying { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; margin-bottom: 6px; background: var(--wash); border-left: 3px solid var(--gold); font-size: 12.5px; color: var(--mute); }
.chat-replying span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-replying .chat-ib.sm { opacity: 1; }
.chat-at { position: absolute; left: 14px; bottom: 100%; margin: 0; padding: 4px; list-style: none; min-width: 220px; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .5); z-index: 4; }
.chat-at button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: none; border: 0; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.chat-at button.on, .chat-at button:hover { background: var(--wash); }
.chat-at i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: 10px; font-weight: 600; }
.chat-ro { margin: 0; padding: 10px 12px; background: var(--wash); color: var(--mute); font-size: 13.5px; text-align: center; }
.chat-first { padding: 20px 4px; max-width: 520px; } .chat-first h3 { margin: 0 0 6px; } .chat-first p { margin: 0 0 12px; color: var(--mute); font-size: 14px; line-height: 1.5; }
.chat-first form { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; } .chat-first input { flex: 1 1 auto; min-width: 0; width: auto; font-size: 15px; } .chat-first button { flex: none; } /* a phone: the input kept its own width and pushed Make the room off the screen */
@media (max-width: 820px) {
  .chat { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 210px); min-height: 420px; border-width: 1px 0; margin: 0 -16px; }
  .chat-rooms { border-right: 0; border-bottom: 1px solid var(--line); min-width: 0; } /* many rooms scroll sideways; a plain 1fr column let them stretch the whole chat past the screen */
  .chat-rl li { flex: none; }
  /* the + (new room, or propose one) stays at the start of the strip; hidden with the heading until 4 Oct 2026, so a phone had no way to add a room */
  .chat-rooms { flex-direction: row; align-items: center; }
  .chat-rooms-h { flex: none; padding: 0; }
  .chat-rooms-h span { display: none; }
  .chat-rooms-h .chat-ib { width: 34px; height: 34px; margin-left: 10px; border: 1px dashed var(--ink); border-radius: 999px; background: var(--paper); }
  .chat-rl { flex: 1; min-width: 0; }
  .chat-askf form { display: flex; gap: 6px; } .chat-askf input { width: 150px; min-width: 0; }
  .chat-rl { display: flex; gap: 4px; padding: 6px 10px; overflow-x: auto; }
  .chat-room { padding: 6px 10px; white-space: nowrap; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; font-size: 14px; }
  .chat-room.on { box-shadow: none; border-color: var(--ink); }
  .chat-ib.sm { opacity: 1; }
  .chat-head { padding: 8px 14px; min-height: 0; }
  .chat-msg { grid-template-columns: 34px minmax(0, 1fr); padding: 6px 12px 4px; column-gap: 10px; }
  .chat-av { width: 32px; height: 32px; }
  .chat-tools { right: 8px; }
  .chat-form textarea { font-size: 16px; }
  /* at the end of the messages a swipe moves the page (it was held inside the list, so on a page that needed scrolling nothing moved at all) */
  .chat-scroll { overscroll-behavior: auto; }
}
@media (prefers-reduced-motion: reduce) { .chat-scroll { scroll-behavior: auto; } }

/* attachments: the project's links, photos and whiteboards (migration *_chat_attach.sql) */
.chat-form { padding-left: 4px; }
.chat-form .chat-ib { flex: none; width: 32px; height: 34px; }
.chat-atts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chat-card { display: flex; align-items: center; gap: 10px; max-width: 340px; padding: 8px 12px 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.chat-card:hover, .chat-card:focus-visible { border-color: var(--ink); border-left-color: var(--gold); }
.chat-card i { display: grid; flex: none; color: var(--mute); }
.chat-card span { display: grid; min-width: 0; }
.chat-card b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-card small { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-card.gone { cursor: default; border-left-color: var(--line); opacity: .7; }
/* a reminder in a message: the bell at the end means it rings the reader */
.chat-card.rem em { display: grid; flex: none; margin-left: 4px; color: var(--gold); font-style: normal; }
.chat-card.rem em svg { width: 15px; height: 15px; }
.chat-card.rem.done b { text-decoration: line-through; color: var(--mute); }
.chat-remdl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 4px 0 10px; font-size: 14px; }
.chat-remdl dt { color: var(--mute); } .chat-remdl dd { margin: 0; overflow-wrap: anywhere; } .chat-remdl small { color: var(--mute); margin-left: 4px; }
.chat-remdlg h2 { overflow-wrap: anywhere; }
.chat-ph { padding: 0; border: 1px solid var(--line); background: var(--wash); cursor: zoom-in; line-height: 0; }
.chat-ph img { display: block; width: auto; height: 132px; max-width: 240px; object-fit: cover; }
.chat-ph:hover, .chat-ph:focus-visible { border-color: var(--ink); }
.chat-stk { display: block; width: 128px; height: 128px; }
.chat-stk .stk, .chat-stks .stk { width: 100%; height: 100%; display: block; }
.chat-staged { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chat-staged[hidden] { display: none; }
.chat-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 3px 4px 3px 8px; border: 1px solid var(--ink); background: var(--paper); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-chip i { display: grid; color: var(--mute); } .chat-chip i svg, .chat-chip button svg { width: 14px; height: 14px; }
.chat-chip button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--mute); cursor: pointer; }
.chat-drawer { position: absolute; left: 14px; right: 14px; bottom: calc(100% - 4px); z-index: 5; max-height: min(52vh, 420px); display: flex; flex-direction: column; background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .55); }
.chat-dtabs { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.chat-dtabs button { padding: 6px 10px; border: 0; background: none; color: var(--mute); font: inherit; font-size: 13.5px; cursor: pointer; border-bottom: 2px solid transparent; }
.chat-dtabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }
.chat-dq { margin-left: auto; width: min(200px, 40%); padding: 5px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 13.5px; }
.chat-dlist { overflow: auto; padding: 6px; }
.chat-dlist.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.chat-drow { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.chat-drow i { display: grid; color: var(--mute); flex: none; }
.chat-drow span { display: grid; min-width: 0; } .chat-drow b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-drow small { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-drow:hover { background: var(--wash); }
.chat-drow.on, .chat-dph.on { box-shadow: inset 0 0 0 2px var(--gold); background: var(--wash); }
.chat-dph { aspect-ratio: 1; padding: 0; border: 1px solid var(--line); background: var(--wash); cursor: pointer; overflow: hidden; }
.chat-dph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-dempty { margin: 10px 6px; color: var(--mute); font-size: 13.5px; }
.chat-dh { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px 4px; } .chat-dh small { color: var(--mute); font-size: 12px; }
.chat-stks { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; padding: 6px 8px 10px; overflow: auto; }
.chat-stks button { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border: 0; background: none; color: var(--mute); font: inherit; cursor: pointer; border-radius: 6px; }
.chat-stks button:hover, .chat-stks button:focus-visible { background: var(--wash); color: var(--ink); }
.chat-stks button svg { width: 72px; height: 72px; }
.chat-stks small { font-size: 11.5px; text-align: center; line-height: 1.25; }

/* office cats (public/stickers.js): only the moving parts move */
.stk [class^="stk-"], .stk [class*=" stk-"] { transform-box: fill-box; transform-origin: center; }
.stk .stk-steam { animation: stkSteam 2.4s ease-in-out infinite; }
.stk .stk-tap { animation: stkTap .5s ease-in-out infinite; } .stk .stk-tap.b { animation-delay: .25s; }
.stk .stk-dot { animation: stkDot 1.2s ease-in-out infinite; } .stk .stk-dot.b { animation-delay: .2s; } .stk .stk-dot.c { animation-delay: .4s; }
.stk .stk-drop { animation: stkDrop 1.6s ease-in infinite; }
.stk .stk-spin { transform-origin: 0 50%; animation: stkSpin 1.4s linear infinite; }
.stk .stk-pop { animation: stkPop 1.8s ease-in-out infinite; }
.stk .stk-wag { transform-origin: 0% 100%; animation: stkWag 1s ease-in-out infinite; }
.stk .stk-z { animation: stkZ 2.6s ease-in-out infinite; }
.stk .stk-bob { animation: stkBob 1.1s ease-in-out infinite; }
.stk .stk-wave { transform-origin: 0% 100%; animation: stkWave .9s ease-in-out infinite; }
.stk .stk-jump { animation: stkJump 1.2s ease-in-out infinite; } .stk .stk-jump.b { animation-delay: .4s; }
.stk .stk-bow { transform-origin: 50% 100%; animation: stkBow 2s ease-in-out infinite; }
.stk .stk-heart { animation: stkHeart 1.6s ease-in-out infinite; }
@keyframes stkSteam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes stkTap { 50% { transform: translateY(-3px); } }
@keyframes stkDot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes stkDrop { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
@keyframes stkSpin { to { transform: rotate(360deg); } }
@keyframes stkPop { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(.96); } }
@keyframes stkWag { 50% { transform: rotate(14deg); } }
@keyframes stkZ { 0% { opacity: 0; transform: translate(-3px, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -6px); } }
@keyframes stkBob { 50% { transform: translateY(2px) rotate(-2deg); } }
@keyframes stkWave { 50% { transform: rotate(-18deg); } }
@keyframes stkJump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes stkBow { 0%, 60%, 100% { transform: rotate(0); } 30% { transform: rotate(-8deg) translateY(2px); } }
@keyframes stkHeart { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.12) translateY(-2px); opacity: 1; } }
/* pixel stickers: whole-pixel moves in steps (stickers.js PS) */
.chat-pk { margin-left: auto; display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 2px; gap: 2px; }
.chat-pk button { border: 0; background: none; color: var(--mute); font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.chat-pk button[aria-checked="true"] { background: var(--ink); color: var(--on-ink); }
.chat-pk button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.chat-stks.px button svg { width: 64px; height: 64px; }
.stk.px { image-rendering: pixelated; }
.stk.px .pa { animation: stkPxA .9s steps(1) infinite; }
.stk.px .pb { animation: stkPxA .9s steps(1) -.45s infinite; }
.stk.px .f0, .stk.px .f1, .stk.px .f2, .stk.px .f3 { animation: stkPx4 1.6s steps(1) infinite; }
.stk.px .f1 { animation-delay: -1.2s; } .stk.px .f2 { animation-delay: -.8s; } .stk.px .f3 { animation-delay: -.4s; }
.stk.px .pdot { animation: stkPxDot 1.2s steps(1) infinite; } .stk.px .d1 { animation-delay: -.8s; } .stk.px .d2 { animation-delay: -.4s; }
.stk.px .pbob { animation: stkPxBob .7s steps(1) infinite; }
.stk.px .ppop { animation: stkPxPop 1.6s steps(1) infinite; }
.stk.px .pdrop { animation: stkPxDrop 1.5s steps(1) infinite; }
.stk.px .pjump { animation: stkPxJump 1s steps(1) infinite; } .stk.px .j2 { animation-delay: -.5s; }
.stk.px .pbow { animation: stkPxBow 2s steps(1) infinite; }
@keyframes stkPxA { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes stkPx4 { 0% { opacity: 1; } 25% { opacity: 0; } }
@keyframes stkPxDot { 0% { opacity: 1; } 33% { opacity: .25; } }
@keyframes stkPxBob { 0% { transform: none; } 50% { transform: translateY(1px); } }
@keyframes stkPxPop { 0% { transform: none; } 60% { transform: translateY(-1px); } 80% { transform: none; } }
@keyframes stkPxDrop { 0% { transform: none; opacity: 1; } 33% { transform: translateY(1px); } 66% { transform: translateY(2px); } 90% { opacity: 0; } }
@keyframes stkPxJump { 0% { transform: none; } 50% { transform: translateY(-2px); } }
@keyframes stkPxBow { 0% { transform: none; } 60% { transform: translateY(1px); } 85% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .stk * { animation: none !important; } .stk.px .pb, .stk.px .f1, .stk.px .f2, .stk.px .f3 { display: none; } }
@media (max-width: 820px) { .chat-stk { width: 104px; height: 104px; } .chat-stk:has(.stk.px) { width: 96px; height: 96px; } .chat-drawer { left: 6px; right: 6px; } .chat-ph img { height: 110px; } }

/* rooms people proposed (members propose, owners and admins make them) */
.chat-askh { padding: 12px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.chat-ask { gap: 6px; padding: 5px 8px; font-size: 14px; color: var(--ink-2); }
.chat-ask > i { display: grid; opacity: .5; } .chat-ask > i svg { width: 15px; height: 15px; }
.chat-ask > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-ask small { margin-left: 6px; font-size: 11.5px; color: var(--mute); }
.chat-ib.sm.on { opacity: 1; }
.chat-askf { padding: 6px 8px; } .chat-askf form { display: flex; gap: 6px; width: 100%; } .chat-askf input { flex: 1; min-width: 0; font-size: 14px; }

/* bubbles (3 Oct 2026): every message a bubble, yours on the right. Tokens only: --note-green carries --ink at 7:1 in every theme. */
.chat-scroll { padding: 8px 0 6px; }
.chat-msg { display: flex; align-items: flex-start; gap: 8px; padding: 0 16px; margin-top: 10px; }
.chat-msg.join { margin-top: 3px; padding-top: 0; }
.chat-msg:hover { background: none; }
.chat-msg.mine { justify-content: flex-end; }
.chat-msg .chat-av { flex: none; width: 30px; height: 30px; margin: 0 0 2px; font-size: 11.5px; }
.chat-msg .chat-av.gap { background: none; }
.chat-col { display: grid; justify-items: start; min-width: 0; max-width: min(78%, 620px); }
.chat-msg.mine .chat-col { justify-items: end; }
.chat-bub { position: relative; min-width: 64px; max-width: 100%; padding: 7px 11px 5px; background: var(--wash); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; color: var(--ink); }
.chat-msg.join .chat-bub { border-radius: 14px; }
.chat-msg.mine .chat-bub { background: var(--note-green); border-color: transparent; border-radius: 14px 4px 14px 14px; }
.chat-msg.mine.join .chat-bub { border-radius: 14px; }
.chat-msg.bare .chat-bub { background: none; border-color: transparent; padding: 0; }
.chat-msg.editing .chat-col { width: 100%; } .chat-msg.editing .chat-bub { width: 100%; }
.chat-bub .chat-meta { margin-bottom: 1px; }
.chat-bub .chat-meta b { font-size: 13px; color: var(--ink); }
.chat-role { padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--mute); background: var(--paper); }
.chat-bub .chat-body { font-size: 14.5px; line-height: 1.45; }
.chat-msg.mine .chat-body a { color: var(--ink); }
.chat-bub .chat-rp { display: block; margin: 2px 0 4px; padding: 3px 8px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 3px; color: var(--ink); white-space: normal; max-height: 3.1em; }
.chat-bub .chat-rp::before { content: none; }
.chat-bub .chat-rp b { display: block; font-size: 12px; }
.chat-bub .chat-rp span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.chat-bub .chat-atts { margin-top: 4px; }
.chat-bt { display: block; margin-top: 1px; text-align: right; font-size: 10.5px; line-height: 1.3; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ink) 68%, transparent); white-space: nowrap; }
.chat-col .chat-reacts { margin-top: 3px; }
.chat-msg.mine .chat-reacts { justify-content: flex-end; }
.chat-tools { top: -32px; }
.chat-msg:not(.mine) .chat-tools { right: auto; left: 54px; }
.chat-mods { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-mods svg { width: 14px; height: 14px; flex: none; }
.chat-modf { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--line); }
.chat-modf legend { padding: 0 6px; font-size: 12.5px; font-weight: 600; }
.chat-modf p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--mute); }
.chat-modl { display: grid; gap: 2px; max-height: 190px; overflow: auto; }
.chat-modl label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 4px; font-size: 14px; cursor: pointer; }
.chat-modl label:hover { background: var(--wash); }
.chat-modl input { width: 16px; height: 16px; flex: none; margin: 0; }
.chat-modl i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: 10px; font-weight: 600; }
@media (max-width: 820px) {
  .chat-msg { display: flex; padding: 0 10px; }
  .chat-msg .chat-av { width: 28px; height: 28px; }
  .chat-col { max-width: 84%; }
  .chat-msg:not(.mine) .chat-tools { left: 46px; }
  .chat-mods { display: none; }
}

/* touch screens: no hover. The room's settings stay visible, and a tap on a bubble shows its buttons (chat.js `tools-on`) */
@media (hover: none) {
  .chat-ib.sm { opacity: 1; }
  .chat-msg:hover .chat-tools { display: none; }
  .chat-msg.tools-on .chat-tools, .chat-msg:focus-within .chat-tools { display: flex; }
  .chat-tools button { min-width: 38px; height: 38px; }
  .chat-tools { top: -40px; }
}

/* back to the newest, with what arrived while reading older messages */
.chat-main { position: relative; }
.chat-jump { position: absolute; right: 16px; bottom: 78px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-width: 36px; height: 36px; padding: 0 10px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--paper); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .5); }
.chat-jump[hidden] { display: none; }
.chat-jump.new { background: var(--ink); color: var(--on-ink); }
/* a photo from this device */
.chat-dnew { display: grid; place-items: center; align-content: center; gap: 4px; border: 1.5px dashed var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; aspect-ratio: 1; }
.chat-dnew small { font-size: 11px; text-align: center; line-height: 1.2; }
.chat-chip.up { border-style: dashed; color: var(--mute); }
.chat-send:disabled { opacity: .45; cursor: default; }
.chat.chat-dropping .chat-main, .chat-dropping .chat-main { outline: 2px dashed var(--gold); outline-offset: -6px; }
/* touch: the message's buttons sit under its bubble, in the flow, instead of over the next message */
@media (hover: none) {
  .chat-msg.tools-on { flex-wrap: wrap; }
  .chat-msg.tools-on .chat-tools { position: static; flex: 0 0 100%; flex-wrap: wrap; gap: 3px; padding: 4px 0 2px 42px; border: 0; background: none; box-shadow: none; }
  .chat-msg.mine.tools-on .chat-tools { justify-content: flex-end; padding-left: 0; }
  .chat-msg.tools-on .chat-tools button { min-width: 34px; height: 36px; border: 1px solid var(--line); background: var(--paper); }
}

/* bots (migration *_chat_bots.sql): a message that came through a room's address, and the box in Room settings */
.chat-av.bot { background: var(--wash); color: var(--ink); border: 1px solid var(--line); }
.chat-av.bot svg { width: 18px; height: 18px; }
.chat-botmark { letter-spacing: .06em; color: var(--ink); border-color: var(--ink); cursor: help; }
.chat-botl { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.chat-botl:empty { display: none; }
.chat-botl li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.chat-botl li > span { flex: 1 1 180px; }
.chat-botl .chat-av { width: 30px; height: 30px; margin: 0; }
.chat-botl span { display: grid; min-width: 0; }
.chat-botl b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-botl small { font-size: 12px; color: var(--mute); }
.chat-botl .chat-botrest { color: var(--ft-amber); }
.chat-botadd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.chat-botadd[hidden] { display: none; }
.chat-botadd input, .chat-boturl input { margin: 0; min-width: 0; }
.chat-botnew { margin-top: 10px; padding: 10px 12px; background: var(--wash); border: 1px solid var(--line); }
.chat-botnew b { font-size: 13.5px; }
.chat-botnew p { margin: 4px 0 8px; }
.chat-boturl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.chat-boturl input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.chat-botact { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--mute); }
.chat-botf .chat-botwarn { margin: 8px 0 0; font-size: 12.5px; color: var(--ink); }
.chat-botf a { color: inherit; }
.chat-dlg .chat-modl label { display: flex; flex-direction: row; align-items: center; text-align: left; }
.chat-dlg .chat-modl input[type="checkbox"] { width: 16px; }

/* sticker packs: a row of small faces (cats, pixel cats, ducks, penguins, dogs, bears) */
.chat-pks { display: flex; gap: 6px; padding: 2px 10px 8px; overflow-x: auto; }
.chat-pks button { flex: none; display: grid; justify-items: center; gap: 2px; width: 64px; padding: 4px 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--mute); font: inherit; font-size: 11px; cursor: pointer; }
.chat-pks button[aria-checked="true"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.chat-pks .stk { width: 34px; height: 34px; }
.chat-pks .stk * { animation: none !important; }
.chat-pks .stk.px .pb, .chat-pks .stk.px .f1, .chat-pks .stk.px .f2, .chat-pks .stk.px .f3 { display: none; }

/* moderator tools (migration *_chat_mod_tools.sql): announcement rooms, the pinned message, the removal log */
.chat-ann { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; margin: 2px 0 12px; cursor: pointer; }
.chat-ann input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; }
.chat-ann span { display: grid; gap: 2px; }
.chat-ann b { font-size: 14px; color: var(--ink); }
.chat-ann small { font-size: 12.5px; line-height: 1.4; color: var(--mute); }
.chat-pinbar { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 14px; border-bottom: 1px solid var(--line); background: var(--wash); }
.chat-pinbar[hidden] { display: none; }
.chat-pinb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.chat-pinb i { display: grid; flex: none; color: var(--gold); }
.chat-pinb span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute); }
.chat-pinb b { color: var(--ink); font-weight: 600; }
.chat-msg.flash .chat-bub { outline: 2px solid var(--gold); outline-offset: 2px; }
.chat-rmd { margin: 4px 0 12px; padding: 8px 12px; border: 1px solid var(--line); }
.chat-rmd summary { cursor: pointer; font-size: 12.5px; font-weight: 600; }
.chat-rmd p { margin: 8px 0; font-size: 13px; line-height: 1.45; color: var(--mute); }
.chat-rml { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 220px; overflow: auto; }
.chat-rml li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.chat-rml li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chat-rml small { display: block; font-size: 12px; color: var(--mute); }
.chat-body code { padding: 1px 4px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 10%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* several pins, mute and report (migration *_chat_pins_mute_report.sql) */
.chat-pinb em { flex: none; font-style: normal; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--mute); }
.chat-flagb { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 8px; border: 1px solid var(--ft-red); border-radius: 999px; background: none; color: var(--ft-red); font: inherit; font-size: 12.5px; cursor: pointer; }
.chat-flagb svg { width: 14px; height: 14px; }
.chat-mods + .chat-flagb { margin-left: 8px; }
.chat-tools button.on { color: var(--ft-red); }
.chat-dp { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--mute); }
.chat-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chat-rpl { max-height: 50vh; }
.chat-rpa { display: grid; gap: 6px; flex: none !important; }
.chat-pks.px .stk { image-rendering: pixelated; }

/* the news bot form in Room settings (shown only to accounts the server allows) */
.chat-newsf { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.chat-newsf[hidden] { display: none; }
.chat-newsf > b { font-size: 13.5px; }
.chat-newsf p { margin: 4px 0 10px; }
.chat-newsf select { margin: 0; }

/* private rooms (4 Oct 2026): a lock beside the name, locked rooms you are not in, the people list */
.chat-lk { display: inline-grid; margin-left: 4px; opacity: .6; font-style: normal; } .chat-lk svg { width: 13px; height: 13px; }
.chat-lockd { display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 14px; color: var(--mute); }
.chat-lockd > i { display: grid; opacity: .6; } .chat-lockd > i svg { width: 15px; height: 15px; }
.chat-lockd > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-lockd small, .chat-lockd .link { font-size: 12px; white-space: nowrap; }
.chat-pplb { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--line); background: none; color: var(--ink-2); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.chat-pplb:hover, .chat-pplb:focus-visible { border-color: var(--ink); color: var(--ink); } .chat-pplb svg { width: 13px; height: 13px; }
.chat-pnote { margin: 0 0 10px; font-size: 13px; color: var(--mute); }
.chat-pbody h4 { margin: 12px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.chat-pl { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }
.chat-pl li { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 14px; }
.chat-pl li > i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; background: var(--wash); font-style: normal; font-size: 11px; font-weight: 600; }
.chat-pl li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pl li small { margin-left: 6px; font-size: 11.5px; color: var(--mute); }
.chat-accf label { margin-bottom: 4px; }
.chat-ph.wait { display: inline-block; width: 132px; height: 132px; cursor: default; }

/* a long room form on a short window: Save stays in reach (owner's laptop, 4 Oct 2026: the button sat half under the edge) */
/* no negative margins here: a sticky box may not leave its form, so a bar pulled into the form's padding was pushed back up over the last rows (People dialog on a phone, 4 Oct 2026) */
.chat-dlg form > .row-actions { position: sticky; bottom: 0; margin: 0; padding: 10px 0; background: var(--paper); border-top: 1px solid var(--line); }

/* voice in a room (voice.css draws the bar itself): its place in the room's head */
.chat-voice { position: relative; display: flex; align-items: center; margin-left: auto; align-self: center; flex: none; }
.chat-von, .chat-vback { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-left: auto; align-self: center; flex: none; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--mute); font: inherit; font-size: 13px; cursor: pointer; }
.chat-von:hover, .chat-vback:hover { background: var(--wash); color: var(--ink); }
.chat-vback { color: var(--ink); border-color: var(--ft-green); max-width: 46%; }
.chat-vback span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-vback svg { color: var(--ft-green); flex: none; }
.chat-head h3 { flex: none; } .chat-head > p { min-width: 0; }

/* read marks under my own message: one check sent, two read (+ how many), darker when everyone has read */
.chat-ck { display: inline-flex; align-items: center; gap: 2px; margin-left: 5px; vertical-align: -1px; font-style: normal; }
.chat-ck svg { display: block; }
.chat-ck b { font-weight: 600; font-size: 10.5px; }
.chat-ck.wait { opacity: .45; }
.chat-ck.all { color: var(--ink); }
.chat-ck.all svg { stroke-width: 2.6; }

.chat-ck[role="button"] { cursor: pointer; padding: 3px 2px; margin: -3px -2px -3px 3px; border-radius: 4px; }
.chat-ck[role="button"]:hover, .chat-ck[role="button"]:focus-visible { background: color-mix(in srgb, var(--ink) 10%, transparent); outline: none; }
.chat-readby h3 { margin: 12px 0 4px; font-size: 13px; color: var(--mute); font-weight: 600; }
.chat-rbl { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chat-rbl li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14.5px; }
.chat-rbl.no li { color: var(--mute); }
.chat-av.sm { width: 26px; height: 26px; font-size: 10.5px; flex: none; }
.chat-rbl.no .chat-av { background: var(--wash); color: var(--ink-2); }

/* a private conversation (japri): no room list, the person's initials in the head, a quiet lock line */
.chat.dm, .ca .chat.dm { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.chat.dm .chat-rooms { display: none; }
.chat.dm .chat-head { align-items: center; }
.chat.dm .chat-head > p { display: flex; align-items: center; gap: 5px; flex: 1; }
.chat.dm .chat-head > p svg { width: 14px; height: 14px; flex: none; }
.chat.dm .chat-head > p span { overflow: hidden; text-overflow: ellipsis; }
.chat-head h3 i.chat-hav { width: 28px; height: 28px; margin: 0 4px 0 0; font-size: 11px; color: var(--on-ink); }
.chat-dmstop { flex: none; color: var(--mute); }
/* long messages, lists and formatting (owner, 6 Oct 2026). A list item's number or mark has its own column, so the item wraps under its words. */
.chat-li { display: flex; gap: 6px; }
.chat-li > i { flex: none; min-width: 1.5em; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.chat-li.u > i { text-align: center; }
.chat-li > span { min-width: 0; }
.chat-li.in { margin-left: 1.3em; }
.chat-li.q { gap: 0; margin: 3px 0; padding: 1px 0 1px 9px; border-left: 3px solid color-mix(in srgb, var(--ink) 32%, transparent); }
.chat-li.q > i { display: none; }
.chat-body.long { max-height: 17.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.chat-rm { display: block; margin: 2px 0 0; padding: 5px 0 3px; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* editing: the box is as tall as its words, with Save and Cancel (a phone has no Esc, and its Enter is a new line) */
.chat-edit { min-height: 64px; line-height: 1.45; }
.chat-edact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.chat-body .chat-edact small { display: inline; }
/* the message box once it holds more than a line: the words get the whole width, the buttons a row beneath, with the format buttons */
.chat-fmt, .chat-count { display: none; }
.chat-form.tall { flex-wrap: wrap; align-items: center; row-gap: 2px; padding: 8px 8px 6px 10px; }
.chat-form.tall textarea { order: -1; flex: 1 0 100%; padding: 2px 2px 6px; }
.chat-form.tall .chat-fmt { display: inline-flex; gap: 1px; margin-left: 2px; padding-left: 6px; border-left: 1px solid var(--line); }
.chat-fb { min-width: 30px; height: 32px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--mute); font: inherit; font-size: 14.5px; cursor: pointer; }
.chat-fb:hover, .chat-fb:focus-visible { background: var(--wash); color: var(--ink); }
.chat-fb.f-b { font-weight: 700; } .chat-fb.f-i { font-style: italic; } .chat-fb.f-s { text-decoration: line-through; }
.chat-form.tall .chat-send { margin-left: auto; }
.chat-form.tall .chat-count:not([hidden]) { display: inline; margin-left: auto; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.chat-form.tall .chat-count:not([hidden]) ~ .chat-send { margin-left: 8px; }
.chat-count.full { color: var(--ft-red); font-weight: 600; }

/* the open room's settings in its own head, where the rooms are a strip (phones, narrow windows): a cog after every chip was ten marks nobody could
   tell apart (owner's walk, 6 Oct 2026). On a wide window the list keeps its cog per row on hover. */
.chat-hset { display: none; order: 9; flex: none; align-self: center; margin-left: auto; color: var(--mute); }
.chat-head:has(.chat-voice, .chat-von, .chat-vback, .chat-flagb) .chat-hset { margin-left: 0; }
/* the attach drawer on a phone: tabs on one line, the find box on its own (Whiteboards wrapped to two lines and the box was 60 px wide) */
@media (max-width: 820px) { .chat-dtabs { flex-wrap: wrap; } .chat-dtabs button { flex: none; white-space: nowrap; padding: 6px 8px; } .chat-dq { order: 9; flex: 1 0 100%; width: auto; margin: 2px 4px 0; padding: 7px 2px; } }
@media (max-width: 820px) { .chat-hset { display: grid; } .chat-rl li > .chat-ib.sm[data-c="roomedit"] { display: none; } }

.chat-dmph { cursor: pointer; }
.chat-ro .link { margin-left: 6px; }

/* a grid that scrolls inside a max-height keeps each row at its full height (owner, 27 Oct 2026: the Move to list squeezed its rows and cut the words in half) */
.chat-modl, .chat-rml, .chat-pl { grid-auto-rows: max-content; }