/* The song list reserves a separate column while the chat drawer is open. */
/* layout.css gives every motion.js button `button.feel { position: relative }`; button.* ties it and wins by load order. */
button.room-chat-toggle { position: fixed; right: 0; top: 45%; z-index: 1101; max-width: 9em; padding: 8px; }
body:not(:has(#songselect:not([hidden]))) button.room-chat-toggle[aria-expanded="true"] { display: none; }
/* Song select: a tile at the left end of the command bar, which keeps 96 px free for it (layout.css). The full label stays in the title. */
body:has(#songselect:not([hidden])) button.room-chat-toggle { top: auto; bottom: 12px; left: 8px; right: auto; width: 80px; height: 44px; padding: 2px 8px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.room-chat-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 360px; max-width: calc(100vw - 24px); z-index: 1100; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; padding: 0 12px 12px; box-sizing: border-box; }
/* osu!lazer NotificationOverlay: the full width over 600 ms, the fade over 300 ms, both OutQuint.
   A hidden drawer stays laid out off screen so closing can slide; visibility drops once it is gone.
   layout.css hides every [hidden] with display: none !important, which would skip both slides. */
.room-chat-panel { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
.room-chat-panel[hidden] { display: grid !important; transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 600ms; }
@media (prefers-reduced-motion: reduce) { .room-chat-panel, .room-chat-panel[hidden] { transition: none; } }
:root[data-performance] :is(.room-chat-panel, .room-chat-panel[hidden]) { transition: none; }
.room-chat-head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px; padding: 16px 0 12px; }
.room-chat-context { grid-column: 1 / -1; overflow-wrap: anywhere; }
.room-chat-tabs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.room-chat-tabs[hidden], .room-chat-tab[hidden] { display: none; }
.room-chat-tab { padding: 4px 10px; }
.room-chat-tab-close { padding: 4px 6px; margin-left: -6px; }
.room-chat-picker { display: grid; align-content: start; overflow-y: auto; min-height: 0; }
.room-chat-picker[hidden] { display: none; }
.room-chat-channel { text-align: left; padding: 8px; }
.room-chat-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; }
.room-chat-head h2, .room-chat-head p { margin: 0; }
.room-chat-body { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 12px 0; }
.room-chat-log { overflow-y: auto; min-height: 0; overflow-wrap: anywhere; padding: 0; margin: 0; }
/* osu!lazer StandAloneMessage: 45 px time, 5+90+5 px name, the rest for text; 2 px row padding. */
.room-chat-message { display: grid; grid-template-columns: 40px 112px minmax(0, 1fr); align-items: start; padding: 5px 2px; margin: 0; gap: 6px; }
.room-chat-name { display: flex; justify-content: flex-end; justify-self: end; max-width: 100%; min-width: 0; white-space: nowrap; }
.room-chat-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.room-chat-name[data-colon]::after { content: ":"; flex: none; }
.room-chat-new { width: 100%; }
.room-chat-compose { display: grid; gap: 0; padding-top: 0; }
/* The count and the status take no row until they have something to say. */
.room-chat-actions:has(> .room-chat-count:empty), .room-chat-status:empty { display: none; }
.room-chat-compose textarea { box-sizing: border-box; width: 100%; height: 30px; min-height: 30px; max-height: 224px; padding: 2px 7px; border-radius: 5px; line-height: 20px; resize: none; }
.room-chat-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.room-chat-count { flex: 1; min-width: 0; }
.room-chat-status { margin: 0; min-height: 1.3em; overflow-wrap: anywhere; }
button.room-chat-ticker, button.room-chat-popup { position: fixed; right: 12px; width: 336px; max-width: calc(100vw - 48px); z-index: 1102; padding: 12px; overflow-wrap: anywhere; text-align: left; }
/* Alerts move like the toasts (scenes/notification.js, osu!lazer NotificationOverlayToastTray): in from their own
   width over 500 ms OutQuint while fading in over 200 ms; a timeout sends them 400 px right fading over 600 ms
   OutQuint, a click fades them over 100 ms (decision of 2026-10-28). Hidden alerts stay laid out for the exit. */
.room-chat-ticker, .room-chat-popup { transition: translate 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms linear, visibility 0s; }
:is(.room-chat-ticker, .room-chat-popup).entering { translate: 100% 0; opacity: 0; transition: none; }
:is(.room-chat-ticker, .room-chat-popup)[hidden] { display: block !important; translate: 400px 0; opacity: 0; visibility: hidden; transition: translate 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 600ms; }
:is(.room-chat-ticker, .room-chat-popup).clicked[hidden] { translate: none; transition: opacity 100ms linear, visibility 0s 100ms; }
@media (prefers-reduced-motion: reduce) { .room-chat-ticker, .room-chat-popup, :is(.room-chat-ticker, .room-chat-popup)[hidden] { transition: none; } }
:root[data-performance] :is(.room-chat-ticker, .room-chat-popup) { transition: none; }
.room-chat-ticker { bottom: 24px; }
.room-chat-popup { top: 80px; }
.chat-settings { display: grid; padding: 8px 0; }
.chat-settings > p { display: flex; gap: 12px; align-items: center; margin: 0; }
.chat-settings-dialog { width: min(520px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; }