.call-panel {
            margin-top: 24px;
        }
        .device-panel {
            background: var(--bg-panel);
            border-radius: var(--radius-panel);
            padding: 22px;
            margin-bottom: 20px;
        }
        .device-row, .volume-row, .vu-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }
        .device-row label, .volume-row label, .vu-row label {
            font-weight: 500;
            color: var(--text-secondary);
            width: 100px;
            text-align: right;
        }
        .device-row select {
            flex: 1;
            min-width: 200px;
            padding: 12px 16px;
            border-radius: var(--radius-pill);
            border: 1px solid var(--border-light);
            background: var(--input-bg);
            color: var(--text-primary);
        }
        .volume-row input[type=range] {
            flex: 0 1 360px;
            width: 360px;
            max-width: 100%;
            height: 6px;
            background: linear-gradient(90deg, rgba(96,165,250,.22), rgba(34,197,94,.18));
            border-radius: 999px;
            border: 1px solid rgba(148,163,184,.18);
            -webkit-appearance: none;
            appearance: none;
            outline: none;
        }
        .volume-row input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid var(--accent);
            box-shadow: 0 2px 10px rgba(0,0,0,.18);
            cursor: pointer;
        }
        .volume-row input[type=range]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid var(--accent);
            box-shadow: 0 2px 10px rgba(0,0,0,.18);
            cursor: pointer;
        }
        .volume-row input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            background: var(--accent);
            border-radius: 50%;
            cursor: pointer;
        }
        .volume-value {
            min-width: 60px;
            color: var(--accent);
            font-weight: 600;
            text-align: right;
            cursor: text;
            padding: 2px 4px;
            border-radius: 4px;
        }
        .volume-value:hover {
            background: var(--bg-card);
            outline: 1px solid var(--accent);
        }
        .vu-meter {
            flex: 1;
            height: 20px;
            background: var(--vu-bg);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        .vu-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #22c55e, #eab308, #ef4444);
            transition: width 0.05s linear;
            border-radius: 10px;
        }
        .members-area {
            background: var(--bg-panel);
            border-radius: var(--radius-panel);
            padding: 20px 24px;
            margin-bottom: 20px;
        }
        .members-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .members-header h3 {
            font-weight: 600;
        }
        .badge {
            background: var(--accent);
            color: white;
            font-size: 0.8rem;
            padding: 2px 12px;
            border-radius: 40px;
        }
        .member-list {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .member-list li {
            background: var(--member-bg);
            border: 1px solid var(--member-border);
            border-radius: var(--radius-pill);
            padding: 6px 16px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
            cursor: default;
        }
        .member-list li::before {
            content: "●";
            color: #22c55e;
            font-size: 0.8rem;
        }
        .member-list .self {
            font-weight: bold;
            color: var(--accent);
            border-color: var(--accent);
        }
        .status-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.64));
            border-radius: var(--radius-pill);
            padding: 14px 18px;
            border: 1px solid rgba(148,163,184,.18);
            color: var(--text-secondary);
            box-shadow: 0 12px 24px rgba(15,23,42,.05);
        }
        body.dark .status-bar {
            background: linear-gradient(180deg, rgba(30,41,59,.86), rgba(15,23,42,.82));
            border-color: rgba(71,85,105,.34);
            box-shadow: 0 14px 26px rgba(0,0,0,.18);
        }
        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex: 0 0 auto;
            background: #f59e0b;
            box-shadow: 0 0 0 6px rgba(245,158,11,.14);
        }
        .status-text {
            min-width: 0;
            line-height: 1.5;
        }
        .status-bar[data-status="success"] {
            border-color: rgba(34,197,94,.22);
        }
        .status-bar[data-status="success"] .status-indicator {
            background: #22c55e;
            box-shadow: 0 0 0 6px rgba(34,197,94,.14);
        }
        .status-bar[data-status="warning"] {
            border-color: rgba(245,158,11,.22);
        }
        .status-bar[data-status="warning"] .status-indicator {
            background: #f59e0b;
            box-shadow: 0 0 0 6px rgba(245,158,11,.14);
        }
        .status-bar[data-status="danger"] {
            border-color: rgba(239,68,68,.22);
        }
        .status-bar[data-status="danger"] .status-indicator {
            background: #ef4444;
            box-shadow: 0 0 0 6px rgba(239,68,68,.14);
        }
        .download-buttons {
            display: flex;
            gap: 16px;
            justify-content: center;
            margin-top: 24px;
            flex-wrap: wrap;
        }
        .download-btn {
            background: var(--download-btn-bg);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-pill);
            padding: 10px 24px;
            color: var(--text-primary);
            text-decoration: none;
            font-weight: 500;
            transition: background 0.2s;
        }
        .download-btn:hover {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }
        .hidden {
            display: none !important;
        }
        .footer {
            text-align: center;
            color: var(--text-secondary);
            font-size: 0.85rem;
            margin-top: 24px;
        }
        .logout-btn {
            background: transparent;
            border: 1px solid var(--border-light);
            color: var(--text-primary);
            padding: 8px 16px;
            border-radius: var(--radius-pill);
            cursor: pointer;
            margin-left: 16px;
        }
    
        .control-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:16px; }
        .control-item label { display:block; font-size:0.92rem; margin-bottom:8px; color:var(--text-secondary); }
        .control-item select, .room-password-row input { width:100%; padding:12px 14px; border-radius:var(--radius-control); border:1px solid var(--border-light); background:var(--input-bg); color:var(--text-primary); }
        .control-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
        .control-actions .btn { flex:1 1 180px; }
        .room-self-audio-note { margin:-2px 0 14px; color:var(--text-secondary); font-size:0.82rem; line-height:1.6; }
        .room-password-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
        .room-password-row input { flex:1 1 260px; }
        .mini-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
        .mini-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--bg-panel); border:1px solid var(--border-light); color:var(--text-secondary); font-size:0.85rem; }
        .member-list li { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.member-main { display:flex; flex-direction:column; gap:3px; min-width:0; width:100%; flex:1 1 auto; }
.member-main.is-other { justify-content:flex-start; padding-top:0; }
.member-main.is-other .member-identity {
    transform: translateY(8px);
}
        .member-identity { display:flex; align-items:center; gap:10px; min-width:0; width:100%; }
        .member-avatar { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg, #60a5fa, #2563eb); color:#fff; font-size:0.95rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 10px 20px rgba(37,99,235,.20); flex:0 0 auto; text-transform:uppercase; position:relative; isolation:isolate; overflow:visible; z-index:0; }
        body.dark .member-avatar { box-shadow:0 10px 22px rgba(37,99,235,.28); }
        .member-meta { display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex:1 1 auto; min-width:0; width:100%; }
        .member-primary-line { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0; width:100%; }
        .member-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:none; line-height:1.35; word-break:normal; }
        .member-state-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:0.68rem; font-weight:800; line-height:1.2; flex:0 0 auto; }
        .member-state-badge.muted { background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.22); color:#ef4444; }
        body.dark .member-state-badge.muted { background:rgba(239,68,68,.14); color:#fca5a5; border-color:rgba(239,68,68,.28); }
        .member-secondary-line { display:flex; align-items:center; justify-content:flex-start; gap:6px; min-width:0; width:100%; }
        .member-role-wrap { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; flex:1 1 auto; }
.member-role { display:inline-flex; align-items:center; justify-content:center; min-width:max-content; width:max-content; max-width:100%; font-size:0.78rem; padding:2px 8px; border-radius:999px; background:var(--bg-panel); color:var(--accent); border:1px solid var(--border-light); line-height:1.2; white-space:nowrap; word-break:keep-all; overflow-wrap:normal; writing-mode:horizontal-tb; text-orientation:mixed; flex:0 0 auto; }
        .member-speaking-badge { display:inline-flex; align-items:center; gap:4px; font-size:0.72rem; padding:2px 8px; border-radius:999px; background:rgba(16,185,129,.12); color:#059669; border:1px solid rgba(16,185,129,.24); font-weight:700; }
        body.dark .member-speaking-badge { background:rgba(16,185,129,.18); color:#6ee7b7; border-color:rgba(16,185,129,.30); }
        .member-role.admin { color:#ef4444; border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.08); }
        .member-role.owner { color:#f59e0b; border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.10); }
        .member-role.user { color:#38bdf8; border-color:rgba(56,189,248,.35); background:rgba(56,189,248,.08); }
        .member-role.room-admin { color:#16a34a; border-color:rgba(22,163,74,.35); background:rgba(22,163,74,.09); }
        .member-role.guest { color:#94a3b8; border-color:rgba(148,163,184,.35); background:rgba(148,163,184,.08); }
        .member-gift-badge {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: max-content;
            max-width: 100%;
            padding: 2px 10px;
            border-radius: 999px;
            font-size: 0.74rem;
            font-weight: 800;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            isolation: isolate;
            border: 1px solid transparent;
            box-shadow: 0 8px 16px rgba(15,23,42,.08);
        }
        .member-gift-badge::before,
        .member-gift-badge::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }

        @keyframes gift-rainbow-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes gift-frame-breathe {
            0%, 100% { transform: scale(.985); opacity: .92; }
            50% { transform: scale(1.018); opacity: 1; }
        }
        @keyframes gift-glow-pulse {
            0%, 100% { opacity: .42; transform: scale(.96); }
            50% { opacity: .86; transform: scale(1.04); }
        }
        @keyframes supporter-glimmer {
            0% { background-position: 0% 50%; opacity: .78; }
            50% { background-position: 100% 50%; opacity: 1; }
            100% { background-position: 0% 50%; opacity: .78; }
        }

        .member-gift-badge.beggar {
            color: #15803d;
            box-shadow:
                0 0 0 1px rgba(255,255,255,.56),
                0 0 0 3px rgba(34,197,94,.12),
                0 0 18px rgba(34,197,94,.18);
        }
        .member-gift-badge.sponsor {
            color: #b45309;
            background: linear-gradient(135deg, rgba(255,247,237,.96), rgba(251,191,36,.18));
            border-color: rgba(245,158,11,.34);
            box-shadow: 0 8px 18px rgba(245,158,11,.14);
        }
        .member-gift-badge.tycoon {
            color: #ffffff;
            background: rgba(15,23,42,.82);
            border-color: rgba(255,255,255,.12);
            box-shadow: 0 8px 20px rgba(99,102,241,.22);
        }
        .member-gift-badge.tycoon::before {
            inset: 0;
            z-index: -2;
            border-radius: inherit;
            background: conic-gradient(from 0deg, #f97316, #facc15, #22c55e, #38bdf8, #8b5cf6, #ec4899, #f97316);
            animation: gift-rainbow-spin 2.4s linear infinite;
        }
        .member-gift-badge.tycoon::after {
            inset: 1px;
            z-index: -1;
            border-radius: inherit;
            background: rgba(15,23,42,.88);
        }
        .member-gift-badge.lulu-supporter {
            color: #be185d;
            background: linear-gradient(135deg, rgba(253,242,248,.98), rgba(244,114,182,.24));
            border-color: rgba(244,114,182,.34);
            box-shadow: 0 8px 18px rgba(244,114,182,.18);
        }
        .member-gift-badge.lulu-supporter::before,
        .member-gift-badge.duomo-supporter::before {
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 24%, transparent 48%, rgba(255,255,255,.42) 58%, transparent 78%);
            background-size: 220% 100%;
            animation: supporter-glimmer 2.8s linear infinite;
        }
        .member-gift-badge.duomo-supporter {
            color: #c026d3;
            background: linear-gradient(135deg, rgba(253,244,255,.98), rgba(232,121,249,.22));
            border-color: rgba(232,121,249,.34);
            box-shadow: 0 8px 18px rgba(217,70,239,.16);
        }
        body.dark .member-gift-badge.beggar {
            color: #86efac;
            background: rgba(34,197,94,.18);
            border-color: rgba(134,239,172,.28);
        }
        body.dark .member-gift-badge.sponsor {
            color: #fcd34d;
            background: linear-gradient(135deg, rgba(120,53,15,.66), rgba(245,158,11,.22));
            border-color: rgba(251,191,36,.34);
        }
        body.dark .member-gift-badge.lulu-supporter {
            color: #f9a8d4;
            background: linear-gradient(135deg, rgba(131,24,67,.74), rgba(244,114,182,.24));
            border-color: rgba(244,114,182,.34);
        }
        body.dark .member-gift-badge.duomo-supporter {
            color: #f5d0fe;
            background: linear-gradient(135deg, rgba(112,26,117,.72), rgba(232,121,249,.22));
            border-color: rgba(232,121,249,.34);
        }
        .member-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; width:100%; }
        .member-self-audio-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
        .member-voice-overlay {
            position: absolute;
            inset: 0;
            z-index: 6;
            display: block;
            padding: 0;
            border-radius: inherit;
            text-align: center;
            background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(248,250,252,.42));
            backdrop-filter: blur(14px) saturate(1.08);
            -webkit-backdrop-filter: blur(14px) saturate(1.08);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .22s ease, visibility .22s ease;
        }

        .member-voice-overlay > * {
            margin: 0;
        }
        .member-voice-overlay strong {
            color: var(--text-primary);
            max-width: 100%;
            font-size: 0.94rem;
            font-weight: 800;
            line-height: 1.35;
            word-break: break-word;
            text-align: center;
        }
        .member-voice-overlay span {
            color: var(--text-secondary);
            font-size: 0.82rem;
            line-height: 1.55;
            text-align: center;
        }
        .member-list li.voice-connecting {
            overflow: hidden;
        }
        .member-list li.voice-connecting .member-main {
            filter: none;
            opacity: 0;
            transform: none;
            pointer-events: none;
            user-select: none;
        }
        
        .member-list li.voice-connecting .member-main * {
            pointer-events: none;
        }
        .member-list li.voice-connecting .member-voice-overlay {
         transform: none;
          opacity: 1;
          visibility: visible;
        }

        .member-list li.voice-connecting .member-voice-overlay-content {
           transform: translateY(-24px);
        }
        .member-voice-overlay {
         box-shadow: none;
        }   

        body.dark .member-voice-overlay {
            background: linear-gradient(180deg, rgba(15,23,42,.24), rgba(15,23,42,.42));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
        }
        .member-self-audio-note { display:inline-flex; align-items:center; min-height:34px; padding:6px 10px; border-radius:999px; border:1px dashed rgba(148,163,184,.28); background:rgba(148,163,184,.08); color:var(--text-secondary); font-size:0.74rem; font-weight:700; }
        .self-audio-btn { min-width:100px; font-weight:800; }
        .self-audio-btn.is-active {
            background: rgba(37,99,235,.12);
            border-color: rgba(37,99,235,.26);
            color: var(--accent);
            box-shadow: 0 8px 18px rgba(37,99,235,.10);
        }
        body.dark .self-audio-btn.is-active {
            background: rgba(59,130,246,.16);
            border-color: rgba(96,165,250,.28);
        }
        .member-level-bar { position:relative; height:7px; border-radius:999px; overflow:hidden; background:rgba(148,163,184,.16); border:1px solid rgba(148,163,184,.16); }
        body.dark .member-level-bar { background:rgba(71,85,105,.28); border-color:rgba(71,85,105,.30); }
        .member-level-fill { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, #60a5fa 0%, #22c55e 52%, #f59e0b 100%); box-shadow:0 0 14px rgba(59,130,246,.22); transition:width 0.14s ease, opacity 0.18s ease; opacity:0; }
        .member-volume-control { display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; flex:0 0 auto; color:var(--text-secondary); font-size:0.72rem; font-weight:700; white-space:nowrap; }
        .member-volume-control span { flex:0 0 auto; }
        .member-volume-control input[type=range] { width:clamp(96px, 11vw, 150px); min-width:90px; max-width:150px; height:4px; }
        .room-members-panel .mini-btn { padding:5px 10px; font-size:0.74rem; }

        .recharge-option-head,
        .recharge-option-copy,
        .recharge-option-avatar,
        .recharge-option-avatar-icon,
        .recharge-option-btn small {
            position: relative;
            z-index: 1;
        }

        #room-chat-panel {
            background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
            border: 1px solid rgba(148,163,184,.16);
            box-shadow: 0 18px 40px rgba(15,23,42,.06);
        }
        body.dark #room-chat-panel {
            background: linear-gradient(180deg, rgba(27,35,53,.96), rgba(18,24,38,.96));
            border-color: rgba(71,85,105,.36);
            box-shadow: 0 16px 36px rgba(0,0,0,.22);
        }
        .room-chat-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
        #room-chat-messages {
            max-height: 286px;
            overflow: auto;
            overflow-x: hidden;
            scrollbar-gutter: stable;
            background:
                radial-gradient(circle at top left, rgba(96,165,250,.12), transparent 30%),
                radial-gradient(circle at top right, rgba(167,139,250,.10), transparent 28%),
                linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.98));
            border: 1px solid rgba(148,163,184,.16);
            border-radius: 18px;
            padding: 14px 16px 14px 14px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            scrollbar-width: thin;
        }
        body.dark #room-chat-messages {
            background:
                radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 32%),
                radial-gradient(circle at top right, rgba(129,140,248,.08), transparent 28%),
                linear-gradient(180deg, rgba(20,27,40,.98), rgba(15,23,42,.98));
            border-color: rgba(71,85,105,.36);
        }
        .room-chat-empty {
            text-align:center;
            opacity:.75;
            padding:34px 0;
            color: var(--text-secondary);
        }
        .room-chat-item {
            display:flex;
            width:100%;
            padding-inline: 2px 6px;
            box-sizing: border-box;
        }
        .room-chat-item.system {
            position: relative;
            justify-content:center;
            margin: 6px 0;
        }
        .room-chat-item.system::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            height: 1px;
            transform: translateY(-50%);
            background: linear-gradient(90deg, transparent, rgba(148,163,184,.16) 10%, rgba(148,163,184,.34) 50%, rgba(148,163,184,.16) 90%, transparent);
        }
        body.dark .room-chat-item.system::before {
            background: linear-gradient(90deg, transparent, rgba(71,85,105,.24) 10%, rgba(148,163,184,.24) 50%, rgba(71,85,105,.24) 90%, transparent);
        }
        .room-chat-item.self {
            justify-content:flex-end;
            padding-right: 12px;
        }
        .room-chat-item.image-message .room-chat-line {
            max-width: min(84%, 460px);
        }
        .room-chat-line {
            display:flex;
            flex-direction:column;
            gap:6px;
            width: fit-content;
            max-width: min(74%, 252px);
            min-width:0;
        }
        .room-chat-item:not(.self):not(.system) .room-chat-line {
            align-items:flex-start;
        }
        .room-chat-item.self .room-chat-line {
            margin-left: auto;
            align-items:flex-end;
        }
        .room-chat-item.system .room-chat-line {
            max-width:100%;
            align-items:center;
        }
        .room-chat-content {
            min-width:0;
            display:flex;
            flex-direction:column;
            gap:5px;
        }
        .room-chat-meta {
            display:flex;
            align-items:center;
            gap:8px;
            font-size:12px;
            color: var(--text-secondary);
            padding:0 2px;
            flex-wrap:wrap;
        }
        .room-chat-item.self .room-chat-meta {
            justify-content:flex-end;
        }
        .room-chat-author {
            display:flex;
            align-items:center;
            gap:6px;
            min-width:0;
            font-weight:700;
            color: var(--text-primary);
        }
        .room-chat-role {
            display:inline-flex;
            align-items:center;
            gap:4px;
            padding:2px 8px;
            border-radius:999px;
            background: rgba(148,163,184,.12);
            border: 1px solid rgba(148,163,184,.16);
            font-size:11px;
            font-weight:600;
            color: var(--text-secondary);
        }
        .room-chat-bubble {
            position: relative;
            display: inline-block;
            width: fit-content;
            max-width: 100%;
            padding: 11px 14px;
            border-radius: var(--radius-chat);
            background: #ffffff;
            border: 1px solid rgba(148,163,184,.16);
            box-shadow: 0 14px 28px rgba(15,23,42,.06);
            line-height:1.62;
            white-space:pre-wrap;
            word-break:break-word;
            color: var(--text-primary);
        }
        body.dark .room-chat-bubble {
            background: rgba(30,41,59,.92);
            border-color: rgba(71,85,105,.34);
            box-shadow: 0 12px 26px rgba(0,0,0,.18);
        }
        .room-chat-item.self .room-chat-bubble {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            color: #fff;
            border-color: rgba(37,99,235,.34);
            box-shadow: 0 16px 28px rgba(37,99,235,.22);
        }
        .room-chat-item.self .room-chat-bubble:not(.has-image)::after {
            content: "";
            position: absolute;
            right: -10px;
            bottom: 11px;
            width: 18px;
            height: 16px;
            background: linear-gradient(135deg, #3b82f6, #2563eb);
            clip-path: polygon(0 0, 100% 50%, 0 100%);
            filter: drop-shadow(0 8px 12px rgba(37,99,235,.22));
            pointer-events: none;
        }
        .room-chat-item.system .room-chat-meta {
            display:none;
        }
        .room-chat-item.system .room-chat-bubble {
            z-index: 1;
            padding:6px 14px;
            border-radius:999px;
            background: rgba(255,255,255,.92);
            border: 1px solid rgba(148,163,184,.18);
            box-shadow: 0 10px 18px rgba(15,23,42,.06);
            font-size:12px;
            color: var(--text-secondary);
        }
        body.dark .room-chat-item.system .room-chat-bubble {
            background: rgba(30,41,59,.88);
            border-color: rgba(71,85,105,.34);
            box-shadow: 0 10px 18px rgba(0,0,0,.22);
        }
        .room-chat-bubble.has-image {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 6px;
            max-width: min(100%, 460px);
            background: rgba(255,255,255,.98);
            border-color: rgba(148,163,184,.18);
        }
        body.dark .room-chat-bubble.has-image {
            background: rgba(30,41,59,.94);
        }
        .room-chat-image {
            display: block;
            width: auto;
            max-width: 100%;
            max-height: min(46vh, 360px);
            margin: 0 auto;
            object-fit: contain;
            background: transparent;
            border-radius: 12px;
            cursor: zoom-in;
            box-shadow: 0 10px 20px rgba(15,23,42,.10);
            transition: transform 0.16s ease, box-shadow 0.16s ease;
        }
        .room-chat-image:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 26px rgba(15,23,42,.14);
        }
        body.dark .room-chat-image {
            box-shadow: 0 12px 24px rgba(0,0,0,.26);
        }
        .room-chat-item.self .room-chat-bubble.has-image {
            background: rgba(255,255,255,.98);
            color: var(--text-primary);
            border-color: rgba(59,130,246,.22);
            box-shadow: 0 16px 28px rgba(37,99,235,.14);
        }
        body.dark .room-chat-item.self .room-chat-bubble.has-image {
            background: rgba(30,41,59,.94);
            color: var(--text-primary);
        }
        .room-chat-image-caption {
            margin-top: 0;
            padding: 0 4px 2px;
            line-height: 1.5;
            word-break: break-word;
        }
        .room-chat-attachment-preview {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 12px;
            padding: 12px 14px;
            border-radius: var(--radius-panel);
            border: 1px solid rgba(148,163,184,.18);
            background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92));
        }
        body.dark .room-chat-attachment-preview {
            background: linear-gradient(180deg, rgba(30,41,59,.9), rgba(15,23,42,.92));
            border-color: rgba(71,85,105,.36);
        }
        .room-chat-attachment-card {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            flex: 1 1 auto;
        }
        #room-chat-image-preview {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: var(--radius-control);
            border: 1px solid rgba(148,163,184,.2);
            background: rgba(15,23,42,.06);
            flex: 0 0 auto;
        }
        .room-chat-attachment-meta {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .room-chat-attachment-meta strong,
        .room-chat-attachment-meta span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .room-chat-attachment-meta strong {
            color: var(--text-primary);
            font-size: 0.92rem;
        }
        .room-chat-attachment-meta span {
            color: var(--text-secondary);
            font-size: 0.8rem;
        }
        .room-chat-input-row {
            display:flex;
            gap:12px;
            align-items:flex-end;
            margin-top:16px;
            flex-wrap:nowrap;
        }
        .room-chat-input-wrap {
            flex:1 1 auto;
            min-width:0;
        }
        .room-chat-input-wrap label {
            display:block;
            margin-bottom:8px;
            font-size:12px;
            color: var(--text-secondary);
            font-weight:700;
        }
        #room-chat-input {
            width:100%;
            height:52px;
            padding:0 18px;
            border-radius:var(--radius-control);
            border:1px solid rgba(148,163,184,.18);
            background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.96));
            color: var(--text-primary);
            box-shadow: 0 10px 22px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.75);
        }
        body.dark #room-chat-input {
            background: linear-gradient(180deg, rgba(36,41,51,.95), rgba(24,28,37,.96));
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
            border-color: rgba(71,85,105,.36);
        }
        #room-chat-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12), 0 12px 24px rgba(var(--accent-rgb), .10);
            box-shadow: 0 0 0 4px rgba(59,130,246,.12), 0 12px 24px rgba(37,99,235,.08);
        }
        #room-chat-send-btn {
            min-width: 112px;
            height: 52px;
            border-radius: var(--radius-control);
            font-weight: 800;
            box-shadow: 0 16px 28px rgba(37,99,235,.20);
            white-space: nowrap;
        }
        .room-image-preview-modal {
            position: fixed;
            inset: 0;
            z-index: 1100;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(15,23,42,.58);
            backdrop-filter: blur(12px);
        }
        body.dark .room-image-preview-modal {
            background: rgba(2,6,23,.82);
        }
        .room-image-preview-dialog {
            width: min(1100px, 100%);
            max-height: calc(100vh - 48px);
            display: flex;
            flex-direction: column;
            gap: 14px;
            padding: 16px;
            border-radius: var(--radius-card);
            border: 1px solid rgba(255,255,255,.30);
            background: rgba(255,255,255,.78);
            box-shadow: 0 30px 60px rgba(15,23,42,.26);
        }
        body.dark .room-image-preview-dialog {
            background: rgba(15,23,42,.88);
            border-color: rgba(71,85,105,.42);
            box-shadow: 0 26px 56px rgba(0,0,0,.34);
        }
        .room-image-preview-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }
        .room-image-preview-meta {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
            color: var(--text-secondary);
        }
        .room-image-preview-scale {
            color: var(--text-primary);
            font-size: 1rem;
        }
        .room-image-preview-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .room-image-preview-actions .mini-btn {
            min-width: 56px;
            padding: 8px 12px;
            border-radius: var(--radius-control);
            background: rgba(255,255,255,.72);
            box-shadow: 0 10px 20px rgba(15,23,42,.08);
        }
        body.dark .room-image-preview-actions .mini-btn {
            background: rgba(30,41,59,.92);
        }
        .room-image-preview-stage {
            position: relative;
            min-height: min(72vh, 720px);
            max-height: calc(100vh - 148px);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 22px;
            border-radius: var(--radius-panel);
            touch-action: none;
            user-select: none;
            background:
                radial-gradient(circle at top left, rgba(96,165,250,.14), transparent 26%),
                radial-gradient(circle at top right, rgba(167,139,250,.10), transparent 24%),
                rgba(248,250,252,.72);
        }
        body.dark .room-image-preview-stage {
            background:
                radial-gradient(circle at top left, rgba(59,130,246,.18), transparent 28%),
                radial-gradient(circle at top right, rgba(129,140,248,.12), transparent 24%),
                rgba(15,23,42,.76);
        }
        .room-image-preview-stage.is-pannable {
            cursor: grab;
        }
        .room-image-preview-stage.is-dragging {
            cursor: grabbing;
        }
        .room-image-preview-stage img {
            display: block;
            max-width: none;
            max-height: none;
            width: auto;
            height: auto;
            border-radius: 12px;
            box-shadow: 0 18px 34px rgba(15,23,42,.18);
            transform-origin: center center;
            transition: transform 0.16s ease, box-shadow 0.16s ease;
            user-select: none;
            -webkit-user-drag: none;
            touch-action: none;
            cursor: zoom-in;
            will-change: transform;
        }
        .room-image-preview-stage.is-dragging img {
            transition: none;
        }
        body.dark .room-image-preview-stage img {
            box-shadow: 0 18px 38px rgba(0,0,0,.34);
        }
        #room-chat-status {
            margin-top:8px;
            font-size:12px;
            min-height:16px;
            max-height:16px;
            overflow:hidden;
            color: var(--text-secondary);
        }
        .mute-btn-forced { opacity:.72; cursor:not-allowed; }
        .room-lock-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
        }
        .audio-preference-row {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 12px;
        }
        .audio-preference-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--text-primary);
            font-weight: 600;
        }
        .audio-preference-note {
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-secondary);
            opacity: .86;
        }
        .switch-field {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            min-width: 180px;
            padding: 10px 14px;
            border-radius: var(--radius-control);
            background: rgba(148, 163, 184, 0.08);
            border: 1px solid var(--border-light);
        }
        .switch-label {
            font-weight: 600;
            color: var(--text-primary);
        }
        .switch {
            position: relative;
            width: 48px;
            height: 28px;
            display: inline-block;
            flex: 0 0 auto;
        }
        .switch input {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
        }
        .switch-slider {
            position: absolute;
            inset: 0;
            background: rgba(148, 163, 184, 0.35);
            transition: .2s ease;
            border-radius: 999px;
            pointer-events: none;
        }
        .switch-slider:before {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            left: 3px;
            top: 3px;
            background: #fff;
            border-radius: 50%;
            transition: .2s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,.22);
        }
        .switch input:checked + .switch-slider {
            background: linear-gradient(90deg, #22c55e, #16a34a);
        }
        .switch input:checked + .switch-slider:before {
            transform: translateX(20px);
        }
        .mini-btn { padding:6px 10px; border-radius:var(--radius-control); border:1px solid var(--border-light); background:var(--bg-panel); color:var(--text-primary); cursor:pointer; font-size:0.82rem; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease; }
        .mini-btn.danger { border-color:#ef4444; color:#ef4444; }
        .mini-btn.warn { border-color:#f59e0b; color:#f59e0b; }
        .mini-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 10px 20px rgba(15,23,42,.12); }
        .mini-btn:disabled { opacity:.45; cursor:not-allowed; }