/* roomtools.css · 11-04 (hype-crypto-web lane), STAGED with roomtools.js. Loads after bubbles.css; culture tokens only; targets ≥ 44 px, text ≥ 13 px. */

/* room bar chips: Announcements · Shield on */
.rt-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink) }
.rt-chip svg { width: 15px; height: 15px }
.rt-chip.shield { border-color: var(--acc); color: var(--ink) }

/* the Hype train: real joins in the last hour, levels at 3 · 10 · 25 · 50 */
.rt-train { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; margin: 0 0 10px; padding: 10px 14px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line) }
.rt-train[hidden] { display: none }
.rt-train-k { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ink) }
.rt-lv { font-size: 13px; font-weight: 700; color: var(--acc) }
.rt-bar { position: relative; height: 10px; border-radius: 999px; background: var(--bg3); overflow: hidden }
.rt-bar i { position: absolute; inset: 0 auto 0 0; width: 4%; border-radius: 999px; background: var(--acc); transition: width .4s ease }
.rt-train-n { grid-column: 1 / -1; font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums }
.rt-train[data-lv="4"] .rt-bar i { background: linear-gradient(90deg, var(--acc), var(--live)) }

/* the typing line, the announcement note */
.rt-typing { margin: 4px 0 8px; min-height: 18px; font-size: 13px; color: var(--ink2); font-style: italic }
.rt-typing[hidden] { display: none }
.rt-note { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 10px 14px; border-radius: 14px; background: var(--acc-soft); font-size: 14px; color: var(--ink) }
.rt-note svg { width: 16px; height: 16px; flex: none }

/* the chat list: badges and Remove */
.rt-badge { display: inline-flex; align-items: center; flex: none; padding: 1px 8px; border-radius: 999px; background: var(--acc-soft); color: var(--ink); font-size: 13px; font-style: normal; font-weight: 700; line-height: 1.5 }
.rt-badge.host { background: var(--acc); color: var(--acc-ink) }
.msg .rt-rm { margin-left: auto; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: -12px; margin-bottom: -12px; border: 0; border-radius: 50%; background: transparent; color: var(--ink2); cursor: pointer; opacity: .65 }
.msg .rt-rm:hover, .msg .rt-rm:focus-visible { opacity: 1; background: var(--bg2) }
.msg .rt-rm svg { width: 16px; height: 16px }

/* host and mod tools */
.rt-host { display: grid; gap: 8px; margin: 4px 0 10px }
.rt-sw { display: flex; flex-wrap: wrap; gap: 8px }
.rt-t { display: inline-flex; align-items: center; gap: 6px; min-height: 44px }
.rt-t svg { width: 16px; height: 16px }
.rt-t[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); border-color: var(--acc) }
.rt-help { margin: 0; font-size: 13px; color: var(--ink2) }
.rt-mods { display: grid; gap: 6px }
.rt-mods > b { font-size: 14px }
.rt-mod { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; font-size: 14px }
.rt-mod span { min-width: 0; overflow-wrap: anywhere }
.rt-mod .btn { min-height: 44px; flex: none }
.rt-mod .btn[aria-pressed="true"] { border-color: var(--acc) }

@media (prefers-reduced-motion: reduce) { .rt-bar i { transition: none } }

/* Q&A mode (rank 8): questions for the host */
.rt-qa { margin: 10px 0; padding: 12px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--card) }
.rt-qa-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 15px }
.rt-qa-h span { font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums }
.rt-ql { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none }
.rt-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 8px 10px; border-radius: 14px; background: var(--bg2); font-size: 14px }
.rt-q b { grid-column: 1; font-size: 13px; color: var(--ink2) }
.rt-q span { grid-column: 1; overflow-wrap: anywhere; color: var(--ink) }
.rt-q .btn { grid-column: 2; grid-row: 1 / span 2; min-height: 44px }
.rt-q.done span { color: var(--ink2) }
.rt-qd summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; cursor: pointer }
.rt-ask { display: flex; gap: 8px }
.rt-ask input { flex: 1; min-width: 0; min-height: 44px; font-size: 15px }
.rt-badge.q { background: var(--bg3) }

/* the Shoutout card (rank 9) */
.rt-shout { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 8px 0; padding: 10px 14px; min-height: 64px; border-radius: 18px; border: 1px solid var(--acc); background: var(--acc-soft); color: var(--ink); text-decoration: none }
.rt-shout-pic { display: grid; place-items: center; width: 64px; height: 64px }
.rt-shout-pic > * { width: 100%; height: 100% }
.rt-shout-x { display: grid; gap: 1px; min-width: 0 }
.rt-shout-x small { font-size: 13px; color: var(--ink2) }
.rt-shout-x b { font-size: 16px; overflow-wrap: anywhere }
.rt-shout-x span { font-size: 13px; color: var(--ink2); overflow-wrap: anywhere }
.rt-shout > svg { width: 18px; height: 18px }

/* the goal bar (rank 16) */
.rt-goal { display: grid; gap: 6px; margin: 0 0 10px; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg2) }
.rt-goal-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 14px }
.rt-goal-h span { font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums }
.rt-goal small { font-size: 13px; color: var(--ink2) }
.rt-goal.won .rt-bar i { background: var(--ok, var(--acc)) }

/* the host's welcome note (rivals A27) */
.rt-wf { display: grid; gap: 6px }
.rt-wl { font-size: 14px; font-weight: 700 }
.rt-wf textarea { min-height: 64px; font: inherit; font-size: 15px; resize: vertical }
.rt-wf .btn { justify-self: start; min-height: 44px }