/* Salas de bate-papo: listagem, criação e página da sala (mensagens e composer vêm de social.css). */

.room-page { padding-top: 18px; padding-bottom: 32px; }
.room-crumbs { display: flex; gap: 6px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
.room-crumbs a { color: inherit; }
.room-danger { color: var(--danger); }

/* Listagem */
.room-search { display: flex; gap: 8px; margin: 12px 0 4px; }
.room-search .input { flex: 1; min-width: 0; }
.room-section { margin-top: 22px; }
.room-section h2 { font-size: 1rem; margin: 0 0 10px; }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.room-card { display: flex; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; text-decoration: none; min-width: 0; transition: border-color .15s ease, transform .15s ease; }
.room-card:hover, .room-card:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.room-card-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.room-card-icon img { width: 100%; height: 100%; object-fit: cover; }
.room-card-main { display: grid; gap: 4px; min-width: 0; }
.room-card-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-card-main small { color: var(--muted); }
.room-card-meta { font-size: .85rem; color: var(--muted); }

/* Criar / editar */
.room-form { display: grid; gap: 14px; max-width: 640px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.room-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.room-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.room-radio:has(input:checked) { border-color: var(--accent); }
.room-radio input { margin-top: 4px; }
.room-radio small { display: block; }
.room-check { display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; }
.room-icon-preview { margin-bottom: 8px; }
.room-icon-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: 14px; }
.room-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Página da sala */
.room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.room-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: calc(100dvh - var(--header-height, 64px) - 120px); min-height: 480px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.room-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.room-avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; overflow: hidden; }
.room-avatar img { width: 100%; height: 100%; object-fit: cover; }
.room-head-main { flex: 1; min-width: 180px; }
.room-head-main h1 { margin: 0; font-size: 1.1rem; line-height: 1.25; }
.room-head-meta { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.room-head-meta a { color: inherit; }
.room-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.room-head-actions form { margin: 0; }
.room-thread { flex: 1; min-height: 0; }
.room-main .soc-composer { flex: 0 0 auto; }
.room-older { text-align: center; margin: 0 0 6px; }
.room-older a { font-size: .9rem; }

/* Ações dentro das mensagens */
.room-msg-btn { background: none; border: 0; padding: 0 2px; margin-left: 8px; color: inherit; opacity: .75; font: inherit; font-size: .75rem; cursor: pointer; text-decoration: underline; }
.room-msg-btn:hover, .room-msg-btn:focus-visible { opacity: 1; }
.room-msg-edit { display: grid; gap: 6px; min-width: min(280px, 60vw); }
.room-msg-edit textarea { min-height: 60px; }
.room-msg-edit-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Resposta (prévia da mensagem respondida) */
.room-reply { display: grid; gap: 2px; margin: 0 0 6px; padding: 4px 8px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--surface-2); font-size: .82rem; min-width: 0; }
.room-reply-who { font-weight: 600; }
.room-reply-text { color: var(--muted); overflow-wrap: anywhere; }
.soc-msg.is-mine .room-reply { background: rgba(0, 0, 0, .12); border-left-color: var(--accent-ink); }
.soc-msg.is-mine .room-reply-text { color: inherit; opacity: .85; }
.room-replying { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 0 0 6px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: .85rem; min-width: 0; }
.room-replying[hidden] { display: none; }
.room-replying > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.room-replying .room-msg-btn { margin-left: 0; flex: 0 0 auto; }

/* Ações e horário: quebram por linha inteira, sem partir "· editada" */
.room-main .soc-meta { flex-wrap: wrap; row-gap: 2px; }
.room-main [data-edited] { white-space: nowrap; }

/* Mensagem apagada */
.room-deleted { margin: 0; font-style: italic; color: var(--muted); }
.soc-msg.is-mine .room-deleted { color: inherit; opacity: .85; }

/* Reações */
.room-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.room-reactions:empty { display: none; }
.room-reaction { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; }
.room-reaction:disabled { cursor: default; opacity: .7; }
.room-reaction.is-mine { border-color: var(--accent); background: var(--accent-soft); }
.room-reaction-count { font-size: .78rem; font-weight: 600; }
.room-react-picker { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px 0 0; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); width: fit-content; max-width: 100%; }
.room-react-option { border: 0; background: transparent; padding: 4px 6px; font-size: 1.15rem; border-radius: 8px; cursor: pointer; }
.room-react-option:hover, .room-react-option:focus-visible { background: var(--hover); }

/* Presente (cartão na sala) */
.soc-bubble .room-gift-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; min-width: min(240px, 100%); max-width: 100%; padding: 10px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.room-gift-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; font-size: 2rem; line-height: 1; background: var(--surface); }
.soc-bubble .room-gift-image { display: block; width: 72px; height: 72px; max-width: 72px; max-height: 72px; aspect-ratio: 1; object-fit: contain; padding: 6px; border-radius: 18px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface)); box-shadow: 0 8px 18px -10px rgba(0,0,0,.5); }
.room-gift-main { display: grid; gap: 6px; min-width: 0; }
.room-gift-line { margin: 0; overflow-wrap: anywhere; line-height: 1.4; }
.room-gift-note { margin: 0; padding: 6px 10px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); font-style: italic; overflow-wrap: anywhere; }
.soc-msg.is-gift .soc-bubble { max-width: min(100%, 360px); }

/* Presente (escolha na sala) */
.room-gift { margin: 0 12px 8px; }
.room-gift-toggle { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: .9rem; font-weight: 600; cursor: pointer; }
.room-gift-toggle:hover, .room-gift-toggle:focus-visible { border-color: var(--accent); }
.room-gift-dialog { width: min(600px,calc(100vw - 24px)); max-height: min(80vh,720px); padding: 0; border: 1px solid var(--border); border-radius: 18px; color: var(--text); background: var(--surface); box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.room-gift-dialog::backdrop { background: rgba(17,14,28,.58); backdrop-filter: blur(3px); }
.room-gift-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.room-gift-option img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.room-gift-option small { display: block; color: var(--muted); font-size: .77rem; }
.room-gift-form { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.room-gift-options { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); border: 0; padding: 0; margin: 0; min-width: 0; }
.room-gift-options legend { font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
.room-gift-option { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; min-width: 0; }
.room-gift-option:has(input:checked) { border-color: var(--accent); }
.room-gift-option span { overflow-wrap: anywhere; }

/* Lateral */
.room-side { display: grid; gap: 12px; align-content: start; min-width: 0; }
.room-card-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; min-width: 0; }
.room-card-box h2 { font-size: .95rem; margin: 0 0 8px; }
.room-about { margin: 0 0 10px; font-size: .92rem; overflow-wrap: anywhere; }
.room-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: .9rem; }
.room-facts dt { color: var(--muted); }
.room-facts dd { margin: 0; overflow-wrap: anywhere; }
.room-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.room-members li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0; font-size: .92rem; min-width: 0; }
.room-members li > span:first-child { overflow-wrap: anywhere; min-width: 0; }
.room-member-actions { margin-left: auto; display: flex; gap: 6px; }
.room-member-actions form, .room-members li > form { margin: 0; }
.room-subhead { font-size: .85rem; margin: 14px 0 6px; color: var(--muted); }
.room-inline-form { display: flex; gap: 8px; }
.room-inline-form .input { flex: 1; min-width: 0; }
.room-inline-form button { flex: 0 0 auto; }
.room-report summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; }
.room-report-form { display: grid; gap: 8px; margin-top: 10px; }

@media (max-width: 960px) {
    .room-layout { grid-template-columns: minmax(0, 1fr); }
    .room-side { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (max-width: 760px) {
    .room-page { padding-top: 10px; padding-bottom: calc(var(--bottom-nav-height, 0px) + 16px); }
    .room-main { height: auto; min-height: 0; }
    .room-thread { flex: none; height: min(58dvh, 520px); }
    .room-head { padding: 10px 12px; }
    .room-head-main { min-width: 0; flex-basis: calc(100% - 60px); }
    .room-head-actions { width: 100%; }
    .room-search { flex-wrap: wrap; }
    .room-search .btn { width: 100%; }
    .room-form { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .room-card { transition: none; }
    .room-card:hover, .room-card:focus-visible { transform: none; }
}

/* ===== Fase 6: abas, tema, gerenciar, missões e ranking ===== */
.room-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 6px 0 14px; padding-bottom: 2px; scrollbar-width: thin; }
.room-tab { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; }
.room-tab .icon { width: 16px; height: 16px; }
.room-tab:hover, .room-tab:focus-visible { border-color: var(--accent); }
.room-tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.room-tab-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); font-size: .75rem; text-align: center; }
.room-tab.is-active .room-tab-count { background: rgba(0, 0, 0, .18); }

/* Sala com tema: as variáveis vêm do room-theme.js e valem só dentro da sala */
.room-themed { background: var(--bg); color: var(--text); border-radius: var(--radius-lg); padding-left: 16px; padding-right: 16px; margin-top: 8px; }
.room-themed a:not(.btn):not(.room-tab) { color: var(--accent-text); }
.room-themed .input, .room-themed .select, .room-themed .textarea { background: var(--ui-input-bg, var(--surface)); color: var(--text); border-color: var(--border-strong); }
.room-themed .room-main, .room-themed .room-card-box, .room-themed .room-block, .room-themed .room-form { box-shadow: none; }
.room-topic { font-size: .72rem; vertical-align: middle; }
.room-staff-notice { display: flex; gap: 8px; align-items: center; }
.room-staff-notice .icon { flex: 0 0 auto; }
.room-welcome { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--surface-2); font-size: .9rem; overflow-wrap: anywhere; }
.room-rules { margin: 0 0 10px; font-size: .9rem; }
.room-rules summary { cursor: pointer; font-weight: 600; }
.room-rules p { margin: 6px 0 0; overflow-wrap: anywhere; }
.room-pinned { display: flex; gap: 10px; align-items: flex-start; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--accent-soft); font-size: .88rem; }
.room-pinned p { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.room-pinned form { margin: 0; flex: 0 0 auto; }
.room-pinned-label { flex: 0 0 auto; display: inline-flex; gap: 4px; align-items: center; font-weight: 700; }
.room-pinned-label .icon { width: 14px; height: 14px; }

/* Blocos das páginas de gerenciar, missões e ranking */
.room-block { margin-top: 18px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.room-block > h2 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; margin: 0 0 12px; }
.room-block > h2 .icon { width: 18px; height: 18px; color: var(--accent-text); }
.room-anchors { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.room-anchors a { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text); text-decoration: none; font-size: .88rem; }
.room-anchors a:hover, .room-anchors a:focus-visible { background: var(--accent-soft); }
.room-form--wide { max-width: none; padding: 0; border: 0; background: transparent; }
.room-form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.room-switches { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px 16px; }
.room-switches legend { grid-column: 1 / -1; }
.room-alert { padding: 10px 12px; border-radius: var(--radius); background: var(--accent-soft); margin: 0 0 12px; }
.room-game-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
[data-quest-auto][hidden], [data-quest-period][hidden], [data-quest-winners][hidden] { display: none !important; }

/* Temas */
.room-theme-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.room-theme { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); min-width: 0; }
.room-theme.is-applied { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.room-theme-swatch { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 96px; padding: 12px; border-bottom: 1px solid var(--border); }
.room-swatch-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; }
.room-swatch-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.room-swatch-line { height: 6px; flex: 1; border-radius: 3px; opacity: .7; }
.room-swatch-name { font-weight: 700; font-size: .9rem; }
.room-theme-body { display: grid; gap: 6px; padding: 12px; align-content: start; flex: 1; }
.room-theme-body small { color: var(--muted); }
.room-theme-price { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.room-theme-buy { display: grid; gap: 6px; }
.room-theme-applied { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--accent-text); }

/* Tabelas e listas */
.room-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.room-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.room-table th, .room-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.room-table th { font-size: .78rem; text-transform: none; letter-spacing: 0; color: var(--muted); }
.room-actions-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.room-actions-row form { margin: 0; }
.room-mute-form { display: inline-flex; gap: 4px; align-items: center; }
.room-mute-form .select { min-height: 32px; padding: 2px 8px; }
.room-pos { font-weight: 700; white-space: nowrap; }
.room-rank-table .is-top .room-pos { color: var(--accent-text); }
.room-rank-table .is-top td { background: var(--accent-soft); }
.room-prize-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.room-prize-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: .9rem; }
.room-how { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--muted); display: grid; gap: 4px; }
.room-rank-layout, .room-quest-layout { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.room-rank-layout > *, .room-quest-layout > * { min-width: 0; }
.room-quest-main .room-block:first-child, .room-rank-layout .room-block { margin-top: 0; }
.room-quest-side { display: grid; gap: 14px; align-content: start; }
.room-quest-side .room-block { margin-top: 0; }

/* Desafios da plataforma */
.room-goal-list { display: grid; gap: 10px; }
.room-goal { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); flex-wrap: wrap; }
.room-goal > div:first-child { display: grid; gap: 4px; flex: 1 1 220px; min-width: 0; }
.room-goal small { color: var(--muted); }
.room-goal-side { display: grid; gap: 6px; justify-items: end; align-content: center; }
.room-goal-prize { font-weight: 700; font-size: .9rem; }
.room-progress { width: 100%; height: 8px; accent-color: var(--accent); }
.room-rank-now { padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); }
.room-rank-now p { margin: 0 0 4px; }

/* Missões */
.room-quest-list { display: grid; gap: 10px; }
.room-quest { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.room-quest.is-done { border-color: var(--success); }
.room-quest.is-paused, .room-quest.is-closed, .room-quest.is-full { opacity: .72; }
.room-quest-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.room-quest-head strong { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.room-quest-state { font-size: .8rem; color: var(--muted); }
.room-kind--mission { background: var(--accent-soft); }
.room-quest-desc { margin: 0; overflow-wrap: anywhere; font-size: .92rem; }
.room-quest-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82rem; color: var(--muted); }
.room-quest-reward { color: var(--accent-text); font-weight: 700; }
.room-quest-alert { color: var(--warning); font-weight: 700; }
.room-quest-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.room-quest-actions form { margin: 0; }
.room-proof-form { display: flex; gap: 6px; flex: 1 1 260px; min-width: 0; }
.room-proof-form .input { flex: 1; min-width: 0; }
.room-pending { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--border); }
.room-pending > div:first-child { flex: 1 1 240px; min-width: 0; }
.room-pending-proof { margin: 4px 0 0; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); overflow-wrap: anywhere; font-size: .9rem; }
.room-leaderboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.room-leaderboard li { display: flex; gap: 10px; align-items: center; padding: 4px 0; }
.room-leaderboard li > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 960px) {
    .room-rank-layout, .room-quest-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .room-block { padding: 12px; }
    .room-themed { padding-left: 10px; padding-right: 10px; }
    .room-goal-side { justify-items: start; }
    .room-mute-form { flex-wrap: wrap; }
}

/* Botão de envio da sala: ocupa a linha de baixo do compositor, sem ser espremido no celular */
.soc-composer-row > [data-room-send] { grid-column: 1 / -1; grid-row: 2; justify-self: end; justify-content: center; min-width: 120px; }
.room-form-grid { align-items: start; }

/* ===== Salas v3 (alpha.115): cartões e cabeçalho com mais destaque ===== */
.room-card { position: relative; overflow: hidden; }
.room-card::after { content: ""; position: absolute; inset: auto -20% -70% -20%; height: 80%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent); opacity: 0; transition: opacity .2s; pointer-events: none; }
.room-card:hover::after, .room-card:focus-visible::after { opacity: 1; }
.room-card:hover, .room-card:focus-visible { box-shadow: 0 14px 30px -24px color-mix(in srgb, var(--accent) 80%, transparent); }
.room-card-icon { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, var(--surface-2)), var(--surface-2)); color: var(--accent-text, var(--accent)); }
.room-main { box-shadow: 0 22px 50px -36px rgba(0, 0, 0, .7); }
.room-head { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 70%); }
.room-avatar { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent); }