/* room-bridge.css — the shared room-bridge widgets (public/js/room-bridge.js): room audio player + relay box */
.rb-hide, .rb-audio.hide, .rb-say.hide, .rb-jump.hide, .rb-ptt.hide { display: none !important; }
.rb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rb-btn { appearance: none; background: #181818; color: #ddd; border: 1px solid #2b2b2b; border-radius: 8px; padding: 6px 10px;
          font: inherit; font-size: 13px; cursor: pointer; line-height: 1.2; }
.rb-btn:hover, .rb-btn:focus-visible { border-color: var(--ds-green); }
.rb-btn:focus-visible, .rb-vol:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.rb-btn[disabled] { opacity: .5; cursor: not-allowed; }

.rb-audio { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; background: #0d0d0d; border: 1px solid #1f2a20;
            border-radius: 10px; padding: 6px 8px; font-family: var(--ds-font); color: #ccc; }
.rb-audio.on { border-color: #2f6d3a; }
.rb-audio.off { opacity: .6; }
.rb-play { width: 34px; height: 30px; padding: 0; background: var(--ds-green); border-color: var(--ds-green); color: var(--ds-on-ac); font-weight: bold; }
.rb-state { font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: .06em; color: var(--ds-text-muted); min-width: 0; flex: 1 1 90px; }
.rb-state.live { color: #ff8a80; }
.rb-state.live::before { content: "● "; }
.rb-state.wait { color: #ffd54f; }
/* 1.99il: which way the room audio comes in - ⚡ WebRTC (low latency) or the standard MP3 relay */
.rb-mode { font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--ds-line-strong); color: var(--ds-text-muted); white-space: nowrap; }
.rb-mode.rtc { color: var(--ds-focus); border-color: #1f6f6a; }
.rb-mode.hide { display: none; }
.rb-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; width: 24px; }
.rb-meter i { display: block; width: 3px; height: 2px; background: var(--ds-green); border-radius: 1px; transition: height .08s linear; }
.rb-mute { padding: 4px 6px; }
.rb-vol { width: 84px; accent-color: var(--ds-green); }
.rb-jump { font-size: 12px; padding: 4px 8px; color: #ffd54f; border-color: #6b5a20; }

.rb-say { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.rb-say input { background: #0d0d0d; color: #eee; border: 1px solid var(--ds-line-strong); border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 14px; min-width: 0; }
.rb-send { background: var(--ds-green); border-color: var(--ds-green); color: var(--ds-on-ac); font-weight: bold; }
.rb-ptt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rb-talk { padding: 8px 14px; font-weight: bold; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.rb-talk[aria-pressed="true"] { background: #b71c1c; border-color: var(--ds-badge); color: #fff; }
.rb-ptt-txt { color: var(--ds-text-muted); font-size: 12.5px; min-width: 0; }
.rb-mine { color: var(--ds-text-muted); font-size: 12.5px; min-height: 1em; }

/* commands from the relay (1.99): autocomplete + the user's own (private) command feed */
.rb-say-in { position: relative; min-width: 0; }
.rb-say-in input { width: 100%; box-sizing: border-box; }
.rb-ac { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px; list-style: none;
         background: #111; border: 1px solid #2f6d3a; border-radius: 8px; max-height: 240px; overflow-y: auto;
         box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.rb-ac.hide, .rb-hint.hide { display: none; }
.rb-ac-it { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
            font-size: 13px; color: #ddd; }
.rb-ac-it.on, .rb-ac-it:hover { background: #1e3a22; }
.rb-ac-c { font-family: ui-monospace, Consolas, monospace; color: #9be7a1; overflow: hidden; text-overflow: ellipsis; }
.rb-ac-p { color: #ffd54f; font-size: 12px; white-space: nowrap; }
.rb-hint { color: #6f8f72; font-size: 12px; margin-top: 4px; }
.rb-cmdfeed { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.rb-cmd { background: #0d0d0d; border: 1px solid #1f2a20; border-radius: 8px; padding: 6px 8px; font-size: 12.5px; color: #bbb;
          overflow-wrap: anywhere; min-width: 0; }
.rb-cmd.bad { border-color: #5a2a2a; }
.rb-cmd-h { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; }
.rb-cmd-t { font-family: ui-monospace, Consolas, monospace; color: #9be7a1; min-width: 0; }
.rb-cmd-s { color: var(--ds-text-muted); }
.rb-cmd.bad .rb-cmd-s { color: #ff8a80; }
.rb-cmd-r { color: #ddd; margin-top: 3px; }

@media (prefers-reduced-motion: reduce) { .rb-meter { display: none; } .rb-meter i { transition: none; } }
.rb-micsel { background: #0d0d0d; color: #ddd; border: 1px solid var(--ds-line-strong); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 12.5px; max-width: 100%; min-width: 0; flex: 0 1 220px; }
.rb-micsel.hide { display: none !important; }

/* 1.99rh: the 🔊 Soundboard drawer (public/js/pad-soundboard.js) */
.sbd-toggle { margin-top: 8px; }
.sbd-toggle[data-cd]::after { content: " · " attr(data-cd) "s"; color: var(--ds-text-muted, #999); font-weight: 400; }
.sbd { margin-top: 8px; border: 1px solid var(--ds-line, #333); border-radius: 12px; padding: 8px; background: var(--ds-sunken, #151515); }
.sbd.hide { display: none; }
.sbd-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; }
.sbd-tab { flex: none; min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ds-line, #333); background: transparent; color: var(--ds-text-2, #ccc); cursor: pointer; font-size: 13px; }
.sbd-tab.on { background: var(--ds-ac-bg, rgba(80,200,120,.15)); color: var(--ds-text-strong, #fff); border-color: var(--ds-ac, #50c878); }
.sbd-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); max-height: 260px; overflow-y: auto; }
.sbd-it { display: flex; gap: 2px; min-width: 0; }
.sbd-b { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; min-height: 40px; padding: 4px 8px;
         border-radius: 10px; border: 2px solid var(--ds-line, #333); background: var(--ds-card, #1d1d1d); color: var(--ds-text-strong, #fff); cursor: pointer; font-size: 13px; text-align: left; }
.sbd-b.rare { border-color: #3b6fd8; } .sbd-b.epic { border-color: #9b4bd8; } .sbd-b.legendary { border-color: #e5a00d; }
.sbd-b:disabled { opacity: .5; cursor: default; }
.sbd-b:focus-visible, .sbd-tab:focus-visible, .sbd-rep:focus-visible { outline: 2px solid var(--ds-ac, #50c878); outline-offset: 1px; }
.sbd-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbd-p { color: var(--ds-text-muted, #999); font-size: 11.5px; }
.sbd-rep { flex: none; width: 28px; border: 0; background: transparent; cursor: pointer; opacity: .55; font-size: 12px; }
.sbd-rep:hover { opacity: 1; }
.sbd-msg { min-height: 1.2em; margin: 6px 0 0; font-size: 12.5px; color: var(--ds-text-muted, #999); }
.sbd-msg.ok { color: var(--ds-ok, #6c6); } .sbd-msg.bad { color: var(--ds-danger, #e66); }
.sbd-foot { margin: 4px 0 0; font-size: 12.5px; }
.sbd-empty { margin: 4px; color: var(--ds-text-muted, #999); font-size: 13px; }
.sbd-sub { grid-column: 1 / -1; margin: 6px 2px 0; font-size: 12px; font-weight: 700; color: var(--ds-text-muted, #999); } /* 1.99vu */
/* 1.99ye: the native-feeling web chat - your lines on their way (room-bridge.js relay outbox) */
.rb-say { grid-template-columns: minmax(0, 1fr) auto auto; }
.rb-count { font-size: 11.5px; color: var(--ds-text-muted, #999); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rb-count.full { color: var(--ds-danger, #e66); font-weight: 700; }
.rb-count.hide, .rb-note.hide, .rb-offline.hide { display: none; }
.rb-note { color: var(--ds-warn, #e0b44c); font-size: 12.5px; margin-top: 4px; }
.rb-offline { margin: 0 0 6px; padding: 5px 9px; border-radius: 8px; font-size: 12.5px; color: #1b1300; background: var(--ds-warn, #e0b44c); }
.rb-opt-wait { opacity: .6; }
.rb-opt-wait, .rb-opt-sent, .rb-opt-failed { transition: opacity .15s ease; }
.rb-st { margin-left: 6px; font-size: 11.5px; color: var(--ds-text-muted, #999); white-space: nowrap; }
.rb-opt-sent .rb-st { color: var(--ds-ok, #6c6); }
.rb-opt-failed { opacity: 1; }
.rb-opt-failed .rb-st { color: var(--ds-danger, #e66); white-space: normal; }
.rb-opt-failed .body, .rb-opt-failed.rb-optline { box-shadow: inset 2px 0 0 var(--ds-danger, #e66); padding-left: 6px; }
.rb-st-b { margin-left: 6px; padding: 1px 8px; min-height: 24px; border-radius: 999px; border: 1px solid var(--ds-danger, #e66); background: transparent;
           color: var(--ds-danger, #e66); font: inherit; font-size: 11.5px; cursor: pointer; }
.rb-st-b:hover, .rb-st-b:focus-visible { background: rgba(230, 102, 102, .15); outline: none; }
.rb-optline { padding: 3px 0; }
@media (prefers-reduced-motion: reduce) { .rb-opt-wait, .rb-opt-sent, .rb-opt-failed { transition: none; } }