/* Extracted from public/app.html: main app shell styles. */
/* Aurora 2099 uses the global UI font. JetBrains Mono remains scoped to technical values only. */
/* ── Inline: neue Komponenten ───────────────────────────── */
.bill-subtabs{overflow-x:auto;scrollbar-width:thin;}
.bill-subtabs button{white-space:nowrap;flex:0 0 auto;}
#bill-section-marketing .bm-marketing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#bill-section-marketing .bm-full{grid-column:1/-1;}
#bill-section-marketing .bm-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.bm-endpoint-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:center;}
@media (max-width:640px){
.bill-subtabs{margin-left:-4px;margin-right:-4px;padding-left:4px;padding-right:4px;}
#bill-section-marketing .bm-marketing-grid,.bm-endpoint-row{grid-template-columns:1fr!important;}
#bill-section-marketing #bm-usage{flex-direction:column;align-items:flex-start!important;}
#bill-section-marketing .bm-actions button{flex:1 1 100%;}
}
/* ── Universum Button */
#rail-trigger{display:none!important;}
#btn-universum{color:var(--accent)!important;}
#btn-universum:hover{background:var(--accent-subtle)!important;color:var(--accent)!important;}
#rail-trigger-UNUSED{position:fixed!important;top:8px!important;left:83px!important;z-index:3500!important;cursor:pointer;display:flex!important;align-items:center;gap:7px;padding:7px 13px 7px 10px;background:rgba(17,17,22,0.88)!important;backdrop-filter:blur(14px);border:1px solid rgba(108,99,255,0.4)!important;border-radius:999px!important;color:#6C63FF!important;font-size:0.78rem;font-weight:700;white-space:nowrap;user-select:none;box-shadow:0 2px 16px rgba(0,0,0,0.45);font-family:inherit;transition:transform 0.15s,box-shadow 0.18s;}
#rail-trigger:hover{box-shadow:0 0 0 3px rgba(108,99,255,0.25),0 4px 16px rgba(0,0,0,0.4);transform:translateY(-1px);}
#rail-trigger svg{width:16px;height:16px;color:#6C63FF;flex-shrink:0;}
#rail-trigger span{font-size:0.78rem;font-weight:700;color:#6C63FF;}
/* ── Galaxy Modal */
#galaxy-modal{position:fixed;inset:0;z-index:3000;display:none;flex-direction:column;align-items:center;justify-content:center;}
#galaxy-modal.open{display:flex;}
#galaxy-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* Galaxy Header */
#galaxy-header{position:absolute;top:0;left:0;right:0;height:48px;z-index:10;display:flex;align-items:center;padding:0 12px;gap:8px;background:linear-gradient(to bottom,rgba(4,4,14,0.7),rgba(4,4,14,0));}
#galaxy-modal.pip #galaxy-header{display:none;}
#galaxy-title{flex:1;text-align:center;font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.3);pointer-events:none;white-space:nowrap;}
#galaxy-back-btn{display:none;align-items:center;gap:5px;padding:5px 10px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:20px;color:rgba(255,255,255,0.7);font-size:0.72rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background 0.15s;font-family:inherit;}
#galaxy-back-btn:hover{background:rgba(255,255,255,0.14);}
#galaxy-back-btn.visible{display:flex;}
#galaxy-pip-btn,#galaxy-close-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.7);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;}
#galaxy-pip-btn:hover,#galaxy-close-btn:hover{background:rgba(255,255,255,0.16);}
#galaxy-close-btn{font-size:16px;}
#galaxy-selected-info{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:10;text-align:center;pointer-events:none;font-size:0.82rem;color:rgba(255,255,255,0.55);}
#galaxy-selected-name{font-size:1.1rem;font-weight:700;color:rgba(255,255,255,0.9);margin-bottom:4px;}
/* PiP */
#galaxy-modal.pip{inset:auto;bottom:70px;right:16px;width:300px;height:220px;border-radius:14px;border:1px solid rgba(108,99,255,0.35);overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.7);}
#galaxy-pip-bar{position:absolute;top:0;left:0;right:0;height:28px;z-index:20;display:none;align-items:center;justify-content:space-between;padding:0 8px;background:rgba(8,8,18,0.88);cursor:move;user-select:none;}
#galaxy-modal.pip #galaxy-pip-bar{display:flex;}
.galaxy-pip-label{font-size:0.67rem;font-weight:700;color:rgba(255,255,255,0.55);flex:1;}
.galaxy-pip-action{background:none;border:none;color:rgba(255,255,255,0.5);cursor:pointer;padding:3px 5px;font-size:13px;border-radius:4px;}
/* Milchstrasse */
#milchstrasse-widget{display:none;position:fixed;top:222px;right:8px;bottom:auto;left:auto;z-index:3400;width:88px;height:88px;border-radius:50%;overflow:hidden;border:1.5px solid rgba(255,190,60,0.3);box-shadow:0 2px 14px rgba(0,0,0,0.5);cursor:grab;user-select:none;touch-action:none;transition:box-shadow 0.2s;}
#milchstrasse-widget.visible{display:block;}
#milchstrasse-widget:hover{box-shadow:0 4px 20px rgba(0,0,0,0.6),0 0 0 2px rgba(255,190,60,0.4);}
#milchstrasse-widget.dragging{cursor:grabbing!important;box-shadow:0 8px 30px rgba(0,0,0,0.7),0 0 0 2px rgba(255,190,60,0.5);}
#milchstrasse-canvas{width:100%;height:100%;display:block;pointer-events:none;}
/* Aktiver Zustand: Milchstraße offen → Widget wird blau */
#milchstrasse-widget.milch-active{border-color:var(--accent,#6C63FF)!important;box-shadow:0 0 0 2px rgba(108,99,255,0.4),0 2px 14px rgba(0,0,0,0.5)!important;}
#milchstrasse-widget.milch-active #milchstrasse-canvas{filter:hue-rotate(200deg) saturate(1.4);}
#milch-back-badge{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(108,99,255,0.15);border-radius:50%;font-size:0.6rem;font-weight:800;color:var(--accent,#6C63FF);letter-spacing:0.06em;text-transform:uppercase;pointer-events:none;}
#milchstrasse-widget.milch-active #milch-back-badge{display:flex;}
/* Tooltip bei Klick */
#milch-tooltip{position:fixed;z-index:3401;background:rgba(10,8,2,0.95);backdrop-filter:blur(12px);border:1px solid rgba(255,190,60,0.3);border-radius:10px;padding:10px 14px;font-family:inherit;font-size:0.78rem;color:#fff;pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,0.5);display:none;}
#milch-tooltip.show{display:block;}
#milch-tooltip .mt-title{font-weight:700;color:rgba(255,190,60,0.9);margin-bottom:4px;font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;}
#milch-tooltip .mt-row{display:flex;align-items:center;gap:6px;margin:2px 0;font-size:0.75rem;color:rgba(255,255,255,0.7);}
#milch-tooltip .mt-live{width:7px;height:7px;border-radius:50%;background:#e11d48;flex-shrink:0;}
#milch-tooltip .mt-offline{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.25);flex-shrink:0;}
#milch-tooltip .mt-open{margin-top:8px;width:100%;padding:5px;background:rgba(255,190,60,0.12);border:1px solid rgba(255,190,60,0.25);border-radius:6px;color:rgba(255,190,60,0.9);font-size:0.7rem;font-weight:700;text-align:center;cursor:pointer;letter-spacing:0.04em;pointer-events:all;}
#galaxy-stream-modal{position:fixed;inset:0;z-index:3100;display:none;}
#galaxy-stream-modal.open{display:flex;align-items:center;justify-content:center;}
#galaxy-stream-canvas{position:absolute;inset:0;width:100%;height:100%;}
/* ── Screen Grid ──────────────────────────────────────────── */
.bw-screen-grid {
flex: 1;
background: #111214;
display: flex;
flex-direction: column;
min-height: 180px;
border-bottom: 2px solid var(--border);
}
/* Mic-PiP: Audio-Tile im Screen-Grid */
.wb-mic-pip {
position: relative;
background: linear-gradient(135deg, #1a1a2e, #0d0d1a);
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid rgba(108,99,255,0.3);
min-height: 80px;
animation: wb-mic-pip-in 0.3s ease;
}
@keyframes wb-mic-pip-in {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.wb-mic-pip-avatar {
width: 48px; height: 48px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; font-weight: 800; color: #fff;
border: 2px solid rgba(108,99,255,0.6);
}
.wb-mic-pip-name {
font-size: 0.7rem; color: rgba(255,255,255,0.7);
font-weight: 600;
}
.wb-mic-pip-wave {
display: flex; gap: 3px; align-items: flex-end; height: 16px;
}
.wb-mic-pip-wave span {
width: 3px; background: #6c63ff; border-radius: 2px;
animation: wbMicWave 0.8s ease-in-out infinite;
}
.wb-mic-pip-wave span:nth-child(2) { animation-delay: 0.15s; }
.wb-mic-pip-wave span:nth-child(3) { animation-delay: 0.3s; }
.wb-mic-pip-wave span:nth-child(4) { animation-delay: 0.45s; }
@keyframes wbMicWave {
0%,100% { height: 4px; }
50% { height: 14px; }
}
/* Chat Float Panel in rechter Spalte */
#wb-chat-float {
display: flex;
flex-direction: column;
flex: 1 1 0;
overflow: hidden;
min-height: 180px;
max-height: calc(100vh - 320px); /* Universum + Streams immer sichtbar */
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
#wb-chat-float.wb-chat-detached {
position: fixed;
z-index: 1500;
width: 320px;
height: 460px;
right: 20px;
top: 80px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--surface-1);
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
resize: both;
overflow: hidden;
flex: none;
}
.wb-chat-float-handle {
display: flex;
align-items: center;
padding: 2px 6px;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
cursor: grab;
user-select: none;
font-size: 0.5rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
gap: 4px;
flex-shrink: 0;
}
.wb-chat-float-handle svg { width: 9px !important; height: 9px !important; }
.wb-chat-detach-btn { font-size: 0.65rem !important; padding: 1px 3px !important; }
.wb-chat-float-handle:active { cursor: grabbing; }
/* Chat-Float: ultra-kompakt */
#wb-chat-float .bw-messages-container { padding: 1px 3px 1px; gap: 0; }
#wb-chat-float .bw-message-group { gap: 0; margin-top: 0; padding: 0; }
#wb-chat-float .bw-message-avatar-col { width: 12px; }
#wb-chat-float .bw-avatar { width: 12px !important; height: 12px !important; font-size: 0.35rem !important; }
#wb-chat-float .bw-message-header { margin-bottom: 0; gap: 3px; }
#wb-chat-float .bw-message-username { font-size: 0.72rem; font-weight: 700; }
#wb-chat-float .bw-message-timestamp { font-size: 0.55rem; }
#wb-chat-float .bw-message-bubble { font-size: 0.78rem; padding: 1px 3px; line-height: 1.35; border-radius: 2px; background: transparent !important; font-weight: 500; }
#wb-chat-float .bw-message-own .bw-message-bubble { background: transparent !important; color: var(--fg) !important; }
#wb-chat-float .bw-message-input-area { padding: 2px 4px 3px; }
#wb-chat-float .bw-input-wrapper-chat { min-height: 18px; border-radius: 6px; }
#wb-chat-float .bw-chat-textarea { font-size: 0.52rem; min-height: 12px; padding: 2px 3px; }
#wb-chat-float .bw-send-btn { width: 16px; height: 16px; }
#wb-chat-float .bw-send-btn svg { width: 8px !important; height: 8px !important; }
#wb-chat-float .bw-input-icons-left,
#wb-chat-float .bw-input-icons-right { padding: 0 1px; gap: 0; }
#wb-chat-float .bw-input-action-btn { padding: 0 !important; margin: 0 !important; min-width: 0 !important; width: 10px !important; }
#wb-chat-float .bw-input-action-btn svg { width: 8px !important; height: 8px !important; }
#wb-chat-float #btn-sounds { font-size: 0.45rem !important; line-height: 1; padding: 0 !important; }
#wb-chat-float .bw-chat-header { display: none; }
#wb-chat-float .bw-unread-divider { display: none; }
.wb-chat-detach-btn {
margin-left: auto;
background: none;
border: none;
cursor: pointer;
color: var(--muted);
padding: 2px 5px;
border-radius: 4px;
font-size: 0.8rem;
line-height: 1;
transition: color 0.15s, background 0.15s;
}
.wb-chat-detach-btn:hover { color: var(--fg); background: rgba(255,255,255,0.07); }
/* Cam-Toggle Button im Grid */
.wb-cam-toggle-btn {
position: absolute;
top: 8px; right: 8px;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
color: #fff;
font-size: 0.65rem;
padding: 3px 7px;
cursor: pointer;
z-index: 10;
transition: background 0.15s;
}
.wb-cam-toggle-btn:hover { background: rgba(0,0,0,0.8); }
.wb-cam-toggle-btn.cam-hidden { opacity: 0.5; }
/* Fullscreen: Grid füllt gesamten Bildschirm */
#screen-grid:fullscreen,
#screen-grid:-webkit-full-screen,
#screen-grid:-moz-full-screen {
width: 100vw !important;
height: 100vh !important;
max-width: none !important;
max-height: none !important;
border: none !important;
border-radius: 0 !important;
background: #000 !important;
flex: none !important;
}
#screen-grid:fullscreen .bw-screen-grid-tiles,
#screen-grid:-webkit-full-screen .bw-screen-grid-tiles,
#screen-grid:-moz-full-screen .bw-screen-grid-tiles {
flex: 1 !important;
height: 100% !important;
min-height: 0 !important;
}
/* Chat-Panel Vollbild (wenn kein Grid aktiv) */
#bw-chat-panel:fullscreen,
#bw-chat-panel:-webkit-full-screen,
#bw-chat-panel:-moz-full-screen {
width: 100vw !important;
height: 100vh !important;
max-width: none !important;
background: var(--bg) !important;
flex: none !important;
display: flex !important;
flex-direction: column !important;
}
.bw-screen-grid-tiles {
flex: 1;
display: grid;
gap: 4px;
padding: 6px;
min-height: 0;
overflow: hidden;
}
/* 1: Vollbild */
.bw-screen-grid-tiles[data-count="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
/* 2: Oben / Unten Split */
.bw-screen-grid-tiles[data-count="2"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
/* 3: wird komplett per JS gesteuert */
.bw-screen-grid-tiles[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
/* 4: 4 Quadrate (2×2) */
.bw-screen-grid-tiles[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.bw-screen-grid-tiles[data-count="5"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.bw-screen-grid-tiles[data-count="6"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.bw-screen-tile {
position: relative;
background: #1e1f22;
border-radius: 8px;
overflow: hidden;
min-height: 0;
border: 2px solid transparent;
transition: border-color 0.15s;
}
.bw-screen-tile:hover { border-color: rgba(255,255,255,0.18); }
.bw-screen-tile video { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Portrait-Tiles: schwarze Balken links/rechts, nicht strecken */
.bw-screen-tile.tile-portrait video { object-fit: contain; background: #000; }
/* Landscape-Tiles: passt sich dem Container an */
.bw-screen-tile.tile-landscape video { object-fit: contain; }
.bw-screen-play-overlay:hover svg { transform: scale(1.12); }
.bw-screen-tile-label {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.82));
padding: 22px 8px 7px;
display: flex; align-items: center; justify-content: space-between;
font-size: 0.73rem; color: #fff;
opacity: 0; transition: opacity 0.15s;
}
.bw-screen-tile:hover .bw-screen-tile-label { opacity: 1; }
.bw-screen-tile-name {
font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bw-screen-tile-actions { display: flex; gap: 4px; flex-shrink: 0; }
.bw-screen-tile-btn {
background: rgba(255,255,255,0.15); border: none; border-radius: 50%;
width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #fff; flex-shrink: 0; transition: background 0.15s;
}
.bw-screen-tile-btn:hover { background: rgba(255,255,255,0.3); }
.bw-screen-tile-btn.muted { color: var(--danger, #ef4444); background: rgba(239,68,68,0.2); }
.bw-screen-tile-vol {
width: 64px; height: 3px; cursor: pointer; accent-color: #fff;
opacity: .7; transition: opacity .15s;
}
.bw-screen-tile-vol:hover { opacity: 1; }
.bw-screen-tile-close {
position: absolute; top: 6px; right: 6px;
background: rgba(0,0,0,0.55); border: none; border-radius: 50%;
width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #fff; opacity: 0; transition: opacity 0.15s; z-index: 2;
font-size: 14px; line-height: 1;
}
.bw-screen-tile:hover .bw-screen-tile-close { opacity: 1; }
.bw-screen-tile-close:hover { background: rgba(239,68,68,0.75); }
/* Sharer chip in screen bar */
.bw-screen-sharer-chip {
display: flex; align-items: center; gap: 5px;
background: rgba(255,255,255,0.08); border-radius: 12px;
padding: 2px 8px 2px 4px; font-size: 0.72rem; color: var(--fg);
flex-shrink: 0; cursor: pointer; transition: background 0.15s; user-select: none;
}
.bw-screen-sharer-chip:hover { background: rgba(255,255,255,0.16); }
.bw-screen-sharer-chip.stream-hidden { opacity: 0.42; }
.bw-screen-sharer-chip svg { opacity: 0.7; }
/* ── Screen Share Bar ──────────────────────────────────────── */
.bw-screen-bar { display: none; }
.bw-screen-bar.visible {
display: flex; align-items: center; gap: 8px;
padding: 0 12px; height: 36px;
background: rgba(239,68,68,0.08);
border-top: 1px solid rgba(239,68,68,0.2);
flex-shrink: 0;
}
.bw-screen-bar-room {
display: flex; align-items: center; gap: 6px;
font-size: 0.78rem; font-weight: 600; color: var(--fg);
white-space: nowrap; flex-shrink: 0;
}
.bw-screen-bar-participants {
display: flex; gap: 4px; flex: 1; overflow: hidden;
}
.bw-screen-bar-actions {
display: flex; align-items: center; gap: 4px; margin-left: auto;
}
/* ── Discover Modal ─────────────────────────────────────── */
.bw-discover-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
transition: background 0.12s;
}
.bw-discover-item:last-child { border-bottom: none; }
.bw-discover-item:hover { background: var(--surface-2); }
.bw-discover-icon {
width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1rem; color: #fff; flex-shrink: 0;
}
.bw-discover-info {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.bw-discover-info strong { font-size: 0.9rem; color: var(--fg); }
.bw-discover-info span { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── Community Banner ────────────────────────────────────── */
.bw-community-banner {
position: relative;
height: 56px;
flex-shrink: 0;
overflow: hidden;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
}
.bw-community-banner-img {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
background-color: var(--surface-2);
}
.bw-community-banner-info {
position: absolute; inset: 0;
background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.65));
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 2px;
text-align: center;
}
.bw-community-banner-brand {
display: flex; align-items: center; justify-content: center; gap: 10px;
}
.bw-community-banner-logo {
width: 18px; height: 18px; flex-shrink: 0;
filter: brightness(0) invert(1);
opacity: 0.95;
}
.bw-community-banner-bw {
font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em;
color: rgba(255,255,255,0.7); text-transform: uppercase;
}
.bw-community-banner-sep {
color: rgba(255,255,255,0.45); font-size: 1rem;
}
.bw-community-banner-name {
font-size: 0.95rem; font-weight: 700; color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
letter-spacing: -0.01em;
}
.bw-community-banner-desc {
font-size: 0.7rem; color: rgba(255,255,255,0.65);
text-shadow: 0 1px 3px rgba(0,0,0,.4);
max-width: 500px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── Community-Settings-Modal ────────────────────────────── */
.bw-banner-upload-area {
border: 2px dashed var(--border);
border-radius: var(--radius-md);
padding: 20px;
text-align: center;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
color: var(--muted);
font-size: 0.82rem;
position: relative;
overflow: hidden;
}
.bw-banner-upload-area:hover { border-color: var(--accent); background: var(--surface-2); }
.bw-banner-upload-area img {
max-width: 100%; max-height: 100px; object-fit: cover;
border-radius: 4px; display: block; margin: 0 auto 6px;
}
.bw-banner-upload-area input[type=file] {
position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
/* Rail Tooltip */
.bw-rail-tooltip {
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: var(--surface-3);
border: 1px solid var(--border);
color: var(--fg);
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
padding: 5px 10px;
border-radius: var(--radius-sm);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 300;
box-shadow: var(--shadow-md);
}
.bw-rail-tooltip::before {
content: '';
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-right-color: var(--border);
}
.bw-workspace-item:hover .bw-rail-tooltip,
.bw-workspace-add-wrap:hover .bw-rail-tooltip {
opacity: 1;
}
/* Rail Settings btn */
.bw-rail-settings-btn {
width: 34px;
height: 34px;
border-radius: var(--radius-sm);
background: none;
border: none;
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
}
.bw-rail-settings-btn:hover {
background: var(--surface-3);
color: var(--fg);
}
/* Workspace add wrapper */
.bw-workspace-add-wrap {
position: relative;
}
/* Channel category label */
.bw-ch-category {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
padding: 12px 10px 4px;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
/* Friends */
.bw-friends-tab {
padding: 7px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
background: none; border: none; color: var(--muted); border-bottom: 2px solid transparent;
margin-bottom: -1px; font-family: inherit; transition: color 0.15s;
}
.bw-friends-tab:hover { color: var(--fg); }
.bw-friends-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.bw-friends-tab-count {
display: inline-block; background: var(--surface-3); border-radius: 20px;
padding: 0 6px; font-size: 0.7rem; margin-left: 4px; font-weight: 700;
}
.bw-friends-tab-count:empty { display: none; }
.bw-friend-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 16px; transition: background 0.1s;
}
.bw-friend-item:hover { background: var(--surface-2); }
.bw-friend-info { flex: 1; min-width: 0; }
.bw-friend-name { font-size: 0.875rem; font-weight: 600; }
.bw-friend-status { font-size: 0.72rem; color: var(--muted); }
.bw-friend-actions { display: flex; gap: 6px; flex-shrink: 0; }
.bw-friend-btn {
padding: 4px 10px; border-radius: var(--radius-md); font-size: 0.75rem;
font-weight: 600; cursor: pointer; border: none; font-family: inherit; transition: opacity 0.15s;
}
.bw-friend-btn:hover { opacity: 0.85; }
.bw-friend-btn-accept { background: #16a34a; color: #fff; }
.bw-friend-btn-decline { background: var(--surface-3); color: var(--danger); border: 1px solid var(--border); }
.bw-friend-btn-remove { background: var(--surface-3); color: var(--muted); border: 1px solid var(--border); }
.bw-friend-btn-cancel { background: var(--surface-3); color: var(--muted); border: 1px solid var(--border); }
/* Profil-Popout */
/* ── Voice/Video Lobby ── */
.bw-voice-lobby-wrap { flex-shrink: 0; }
.bw-voice-lobby {
margin: 12px 16px 0;
background: rgba(34,197,94,0.06);
border: 1px solid rgba(34,197,94,0.2);
border-radius: 12px;
padding: 14px 16px;
}
.bw-voice-lobby-header {
display: flex; align-items: center; gap: 7px;
margin-bottom: 10px;
}
.bw-voice-lobby-users {
display: flex; flex-wrap: wrap; gap: 10px;
min-height: 24px;
}
.bw-voice-lobby-user {
display: flex; flex-direction: column; align-items: center;
gap: 4px; font-size: .68rem; color: var(--muted);
width: 52px; text-align: center; overflow: hidden;
}
.bw-voice-lobby-user span {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.bw-voice-lobby-chat-label {
margin-top: 12px; padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.07);
font-size: .72rem; color: var(--muted);
font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
#user-popout {
position: fixed; z-index: 1000;
width: 260px;
max-height: 85vh;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
overflow: hidden;
display: none;
flex-direction: column;
}
#user-popout.visible { display: flex; }
.bw-popout-body { overflow-y: auto; flex: 1; min-height: 0; padding: 0 14px 14px; scrollbar-width: thin; }
.bw-popout-body::-webkit-scrollbar { width: 4px; }
.bw-popout-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.bw-popout-banner {
height: 60px;
background: var(--accent-subtle);
position: relative;
flex-shrink: 0;
}
#popout-close-btn {
position: absolute; top: 6px; right: 6px;
width: 22px; height: 22px;
border-radius: 50%; border: none;
background: rgba(0,0,0,0.4);
color: rgba(255,255,255,0.8);
font-size: 0.75rem; line-height: 1;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
#popout-close-btn:hover { background: rgba(0,0,0,0.7); color: #fff; }
.bw-popout-avatar-wrap {
margin-top: -28px; margin-bottom: 8px;
}
.bw-popout-avatar-wrap .bw-avatar {
width: 56px !important; height: 56px !important;
font-size: 1.2rem !important;
border: 3px solid var(--surface-2);
}
.bw-popout-username {
font-size: 1rem; font-weight: 700; color: var(--fg); line-height: 1.2;
}
.bw-popout-status {
font-size: 0.72rem; color: var(--muted); margin-bottom: 10px;
display: flex; align-items: center; gap: 5px;
}
.bw-popout-status-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.bw-popout-status-dot[data-s="online"] { background: var(--online, #22c55e); }
.bw-popout-status-dot[data-s="away"] { background: var(--away, #f59e0b); }
.bw-popout-status-dot[data-s="offline"] { background: var(--offline, #6b7280); }
.bw-popout-divider { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.bw-popout-actions { display: flex; flex-direction: column; gap: 4px; }
.bw-popout-btn {
width: 100%; padding: 7px 10px; border-radius: var(--radius-md);
border: 1px solid var(--border); background: var(--surface-3);
color: var(--fg); font-size: 0.82rem; font-weight: 600; cursor: pointer;
font-family: inherit; text-align: left;
transition: background 0.12s, border-color 0.12s;
display: flex; align-items: center; gap: 8px;
}
.bw-popout-btn:hover { background: var(--surface-1); border-color: var(--accent); }
.bw-popout-btn.danger { color: var(--danger); }
.bw-popout-btn.danger:hover { border-color: var(--danger); background: rgba(239,68,68,0.08); }
.bw-popout-btn a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 8px; width: 100%; }
/* DM Modal */
.bw-dm-layout {
display: flex; height: 460px; overflow: hidden;
}
.bw-dm-sidebar {
width: 220px; flex-shrink: 0; border-right: 1px solid var(--border);
display: flex; flex-direction: column; overflow: hidden;
}
.bw-dm-sidebar-header {
padding: 12px 14px 10px; font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#dm-conversations-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.bw-dm-conv-item {
display: flex; align-items: center; gap: 9px;
padding: 7px 12px; cursor: pointer; transition: background 0.1s;
border-radius: var(--radius-md); margin: 0 4px;
}
.bw-dm-conv-item:hover { background: var(--surface-2); }
.bw-dm-conv-item.active { background: var(--accent-subtle); }
.bw-dm-conv-info { flex: 1; min-width: 0; }
.bw-dm-conv-name { font-size: 0.84rem; font-weight: 600; color: var(--fg); }
.bw-dm-conv-preview {
font-size: 0.72rem; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bw-dm-conv-badge {
background: var(--danger); color: #fff; border-radius: 20px;
font-size: 0.65rem; font-weight: 700; padding: 1px 6px; flex-shrink: 0;
}
.bw-dm-chat {
flex: 1; display: flex; flex-direction: column; overflow: hidden;
min-width: 0;
}
.bw-dm-chat-empty {
flex: 1; display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: 0.85rem; text-align: center; padding: 20px;
}
.bw-dm-chat-header {
padding: 3px 8px; border-bottom: 1px solid var(--border);
font-size: 0.65rem; font-weight: 700; color: var(--fg);
display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
#dm-messages {
flex: 1; overflow-y: auto; padding: 4px 6px;
display: flex; flex-direction: column; gap: 2px;
}
.bw-dm-msg { display: flex; gap: 4px; align-items: flex-start; }
.bw-dm-msg.own { flex-direction: row-reverse; }
.bw-dm-msg-bubble {
max-width: 85%; background: var(--surface-2); border-radius: 6px;
padding: 3px 6px; font-size: 0.62rem; line-height: 1.35;
word-break: break-word;
}
.bw-dm-msg.own .bw-dm-msg-bubble {
background: var(--accent); color: #fff;
}
.bw-dm-msg-meta {
font-size: 0.55rem; color: var(--muted); margin-top: 1px;
}
.bw-dm-msg.own .bw-dm-msg-meta { text-align: right; }
.bw-dm-input-wrap {
border-top: 1px solid var(--border); padding: 4px 6px;
display: flex; gap: 4px; align-items: flex-end; flex-shrink: 0;
}
.bw-dm-quickbar {
display: flex; gap: 3px; align-items: center; flex-shrink: 0;
}
.bw-dm-quick-btn {
width: 22px; height: 22px; border-radius: 50%;
border: 1px solid var(--border); background: var(--surface-2);
color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
font-size: 0.64rem; line-height: 1; cursor: pointer;
transition: background .12s, color .12s, border-color .12s, transform .12s;
}
.bw-dm-quick-btn:hover {
color: var(--fg); border-color: var(--accent); background: var(--accent-subtle);
transform: translateY(-1px);
}
.bw-dm-status-strip {
padding: 6px 8px; display: flex; gap: 6px; overflow-x: auto;
border-bottom: 1px solid var(--border);
}
.bw-dm-status-chip {
display: flex; flex-direction: column; align-items: center; gap: 3px;
min-width: 42px; cursor: pointer; color: var(--muted); font-size: 0.55rem;
}
.bw-dm-status-ring {
width: 34px; height: 34px; border-radius: 50%; padding: 2px;
background: linear-gradient(135deg, var(--accent), #22c55e);
position: relative;
}
.bw-dm-status-ring > .bw-avatar,
.bw-dm-status-ring > img {
width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
border: 2px solid var(--surface);
}
.bw-dm-media-grid {
display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr));
gap: 5px; margin-top: 5px; max-width: 260px;
}
.bw-dm-media-card {
border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.08);
}
.bw-dm-media-card img,
.bw-dm-media-card video {
width: 100%; max-height: 180px; display: block; object-fit: cover;
}
#dm-input {
flex: 1; resize: none; min-height: 20px; max-height: 50px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 3px 6px;
font-family: inherit; font-size: 0.62rem; color: var(--fg);
outline: none; overflow-y: auto; line-height: 1.3;
}
#dm-input:focus { border-color: var(--accent); }
#dm-send-btn {
height: 20px; padding: 0 7px; background: var(--accent); color: #fff;
border: none; border-radius: var(--radius-md); font-weight: 600;
font-size: 0.58rem; cursor: pointer; flex-shrink: 0; font-family: inherit;
transition: opacity 0.15s;
}
#dm-send-btn:hover { opacity: 0.88; }
/* DM unread badge on button */
.bw-dm-unread-dot {
position: absolute; top: 0; right: 0; width: 8px; height: 8px;
background: var(--danger); border-radius: 50%; border: 2px solid var(--surface-1);
display: none;
}
/* Poke toast */
.bw-poke-toast {
position: fixed; bottom: 80px; right: 20px; z-index: 9999;
background: var(--surface-3); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 10px 16px;
box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px;
font-size: 0.85rem; color: var(--fg);
animation: slideInRight 0.25s ease;
}
@keyframes slideInRight {
from { transform: translateX(40px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.bw-friend-btn-dm { background: var(--accent-subtle); color: var(--accent); border: 1px solid var(--accent); }
.bw-friend-btn-poke { background: var(--surface-3); color: var(--muted); border: 1px solid var(--border); }
/* Community-Invite */
.bw-invite-badge { position:absolute; top:-4px; right:-4px; width:10px; height:10px; background:var(--danger,#ef4444); border-radius:50%; border:2px solid var(--surface-2); }
.bw-invite-toast { position:fixed; bottom:80px; right:20px; z-index:9999; background:var(--surface-3); border:1px solid var(--accent); border-radius:var(--radius-md); padding:12px 16px; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:8px; font-size:0.85rem; color:var(--fg); animation:slideInRight 0.25s ease; min-width:240px; }
.bw-invite-toast-title { font-weight:600; }
.bw-invite-toast-sub { font-size:0.78rem; color:var(--muted); }
.bw-invite-toast-actions { display:flex; gap:8px; margin-top:4px; }
.bw-invite-toast-actions button { flex:1; padding:5px 0; border-radius:var(--radius-sm); border:none; cursor:pointer; font-size:0.8rem; font-weight:600; }
.bw-invite-toast-accept { background:var(--accent); color:#fff; }
.bw-invite-toast-decline { background:var(--surface-1); color:var(--muted); border:1px solid var(--border) !important; }
/* Invite-User Modal */
.bw-invite-user-wrap { display:flex; gap:8px; margin-bottom:12px; }
.bw-invite-user-wrap input { flex:1; }
#invite-user-result { font-size:0.82rem; padding:4px 0; min-height:20px; }
/* Member list in left sidebar */
.bw-sidebar-members {
border-top: 1px solid var(--border);
padding: 4px 4px 6px;
flex-shrink: 0;
max-height: 38vh;
overflow-y: auto;
scrollbar-width: thin;
}
.bw-sidebar-members::-webkit-scrollbar { width: 3px; }
.bw-sidebar-members::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.bw-sidebar-members-header {
display: flex; align-items: center; justify-content: space-between;
padding: 5px 8px 3px; font-size: 0.68rem; font-weight: 700;
color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.bw-sidebar-members-header button {
background: none; border: none; cursor: pointer; color: var(--muted);
font-size: 0.7rem; padding: 1px 4px; border-radius: 3px;
transition: color 0.12s;
}
.bw-sidebar-members-header button:hover { color: var(--fg); }
.bw-members-group-label {
font-size: 0.65rem; font-weight: 700; color: var(--muted);
padding: 4px 8px 2px; text-transform: uppercase; letter-spacing: 0.04em;
display: flex; align-items: center; gap: 5px;
}
.bw-members-group-label span { background: var(--surface-3); border-radius: 8px; padding: 0 5px; font-size: 0.63rem; }
.bw-member-item {
display: flex; align-items: center; gap: 6px;
padding: 3px 8px; border-radius: var(--radius-sm);
cursor: default; transition: background 0.1s; position: relative;
}
.bw-member-item:hover { background: var(--surface-3); }
.bw-member-name {
font-size: 0.8rem; font-weight: 500; flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bw-member-item.offline .bw-member-name { color: var(--muted); opacity: 0.65; }
.bw-role-tag {
font-size: 0.6rem; font-weight: 600; padding: 1px 5px;
border-radius: 8px; white-space: nowrap; flex-shrink: 0;
background: color-mix(in srgb, var(--role-c) 15%, transparent);
color: var(--role-c); border: 1px solid color-mix(in srgb, var(--role-c) 30%, transparent);
}
.bw-badge-premium {
animation: bw-pulse-badge 2s ease-in-out infinite;
background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(59,130,246,0.2));
border-color: rgba(168,85,247,0.5);
}
@keyframes bw-pulse-badge {
0%, 100% { box-shadow: 0 0 4px rgba(168,85,247,0.3); }
50% { box-shadow: 0 0 12px rgba(168,85,247,0.6), 0 0 20px rgba(59,130,246,0.3); }
}
.bw-popout-role-section { margin: 8px 0; }
.bw-popout-role-label { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.bw-popout-role-select {
width: 100%; padding: 5px 8px; font-size: 0.78rem;
background: var(--surface-1); color: var(--fg); border: 1px solid var(--border);
border-radius: var(--radius-sm); cursor: pointer;
}
.bw-popout-role-select:focus { border-color: var(--accent); outline: none; }
/* Actions: absolut rechts, nur bei hover sichtbar */
.bw-member-actions {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; gap: 2px;
background: var(--surface-3); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 2px 3px;
opacity: 0; pointer-events: none;
transition: opacity 0.15s;
}
.bw-member-item:hover .bw-member-actions {
opacity: 1; pointer-events: all;
}
.bw-member-add-friend {
background: none; border: none; cursor: pointer;
color: var(--accent); padding: 2px;
font-size: 0.68rem; font-weight: 700; line-height: 1; flex-shrink: 0;
}
.bw-member-add-friend[data-rel="friends"] { color: var(--muted); }
.bw-member-add-friend[data-rel="pending"] { color: #f59e0b; }
.bw-member-mute-btn {
width: 16px; height: 16px; border: none; background: none;
cursor: pointer; color: var(--muted); border-radius: 3px;
display: flex; align-items: center; justify-content: center;
padding: 0; transition: color 0.12s; flex-shrink: 0;
}
.bw-member-mute-btn:hover { color: var(--accent); }
.bw-member-mute-btn.muted { color: var(--danger); }
/* Monitor-Button Glow wenn User streamt */
/* ── Screen Share Button im User-Panel ──────────────────── */
#btn-screen-room {
transition: color 0.2s, background 0.2s;
}
#btn-screen-room.active {
color: var(--accent) !important;
background: rgba(108, 99, 255, 0.15);
border-radius: 6px;
animation: monitorPulse 2s ease-in-out infinite;
}
/* ── Bottom Bar 2050 ─────────────────────────────────────── */
.bw-bottom-bar {
grid-column: 1 / -1;
display: flex;
align-items: center;
padding: 0 16px;
/* Fallback für Safari < 16.4 (kein color-mix) */
background: var(--surface-2, #18181f);
background: color-mix(in oklab, var(--surface-2) 92%, transparent);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(255,255,255,0.06);
height: 62px;
max-height: 62px;
flex-shrink: 0;
z-index: 50;
overflow: visible;
box-shadow: 0 -1px 0 rgba(108,99,255,0.08);
}
.bw-bottom-bar-left {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
cursor: pointer;
transition: opacity 0.15s;
}
.bw-bottom-bar-left:hover { opacity: 0.8; }
.bw-bottom-bar-name {
font-size: 0.85rem;
font-weight: 700;
color: var(--fg);
white-space: nowrap;
}
.bw-bottom-bar-status {
font-size: 0.68rem;
color: var(--online, #22c55e);
letter-spacing: 0.04em;
}
/* Controls: direkt neben Avatar — flex-start zum Avatar hin */
.bw-bottom-bar-controls {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 2px;
flex: 0 0 auto; /* kein Strecken — bleibt beim Avatar */
}
/* Buttons: größer, mit Label */
.bw-bottom-bar-controls .bw-btn-icon {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
background: none;
border: none;
color: rgba(255,255,255,0.45);
cursor: pointer;
transition: color 0.18s, background 0.18s, transform 0.12s;
position: relative;
font-family: inherit;
}
.bw-bottom-bar-controls .bw-btn-icon:hover {
color: var(--fg);
background: rgba(255,255,255,0.07);
transform: translateY(-1px);
}
.bw-bottom-bar-controls .bw-btn-icon:active { transform: scale(0.94); }
/* Label unter Icon */
.bw-bar-label {
font-size: 0.58rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
opacity: 0.7;
}
.bw-btn-icon:hover .bw-bar-label { opacity: 1; }
/* Universum Button: Accent-Highlight */
#btn-universum { color: var(--accent) !important; }
#btn-universum:hover { background: var(--accent-subtle) !important; }
#btn-universum .bw-bar-label { color: var(--accent); }
/* Separator */
.bw-bottom-bar-sep {
width: 1px;
height: 28px;
background: rgba(255,255,255,0.07);
margin: 0 6px;
flex-shrink: 0;
border-radius: 1px;
}
/* Clock rechts */
.bw-bottom-bar-clock {
font-size: 0.72rem;
font-weight: 600;
color: var(--muted);
font-family: 'JetBrains Mono', monospace;
flex-shrink: 0;
min-width: 160px;
text-align: right;
letter-spacing: 0.04em;
display: none;
}
.bw-bottom-bar-clock.visible { display: block; }
/* Sidebar, rail, chat-main in row 1, bottom-bar in row 2 */
.bw-sidebar, .bw-chat-main {
grid-row: 1;
max-height: 100%;
overflow: hidden;
}
/* Mini-Universum immer am unteren Rand sichtbar */
#sidebar-mini-universe {
position: sticky !important;
bottom: 0 !important;
margin-top: auto !important;
}
.bw-bottom-bar {
grid-row: 2;
}
/* Device picker positions upward from bottom bar */
.bw-bottom-bar .bw-device-picker {
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
}
/* ── Mic/Cam Buttons im User-Panel ──────────────────────── */
#btn-user-mic, #btn-user-cam, #btn-extra-cam {
transition: color 0.2s, background 0.2s;
}
#btn-user-mic.active, #btn-user-cam.active, #btn-extra-cam.active {
color: var(--online, #22c55e) !important;
background: rgba(34, 197, 94, 0.15);
border-radius: 6px;
}
#btn-user-mic.muted {
color: var(--danger) !important;
background: rgba(239, 68, 68, 0.12);
border-radius: 6px;
}
/* ── Device Picker Popup ────────────────────────────────── */
.bw-device-picker {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--surface-2, #18181f);
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px 0;
min-width: 220px;
max-width: 300px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
z-index: 999;
display: none;
}
.bw-device-picker.show { display: block; }
.bw-device-picker-title {
padding: 6px 14px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.bw-device-picker-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
font-size: 0.82rem;
color: var(--fg);
cursor: pointer;
transition: background 0.12s;
border: none;
background: none;
width: 100%;
text-align: left;
}
.bw-device-picker-item:hover { background: rgba(255,255,255,0.06); }
.bw-device-picker-item.selected { color: var(--accent); }
.bw-device-picker-item .dp-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--muted); flex-shrink: 0;
}
.bw-device-picker-item.selected .dp-dot { background: var(--accent); }
.bw-device-picker-sep {
height: 1px;
background: var(--border);
margin: 4px 0;
}
.bw-member-stream-btn.streaming {
color: var(--accent) !important; opacity: 1 !important;
animation: monitorPulse 2s ease-in-out infinite;
}
@keyframes monitorPulse {
0%, 100% { filter: drop-shadow(0 0 2px var(--accent)); transform: scale(1); }
50% { filter: drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 20px var(--accent)); transform: scale(1.2); }
}
.bw-member-vol {
width: 42px; height: 3px; accent-color: var(--accent); cursor: pointer;
}
/* Channel typing indicator */
.bw-ch-typing {
font-size: 0.68rem; color: var(--accent);
padding: 0 0 3px 22px;
display: none; align-items: center; gap: 4px;
}
.bw-ch-typing.active { display: flex; }
.bw-ch-typing-dots { display: flex; gap: 2px; align-items: center; }
.bw-ch-typing-dots span {
width: 3px; height: 3px; border-radius: 50%; background: var(--accent);
animation: typingBounce 1.4s infinite ease-in-out;
}
.bw-ch-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.bw-ch-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
/* Channel presence member rows */
.bw-ch-presence {
display: flex; flex-direction: column; gap: 1px;
padding: 3px 0 4px 10px;
}
.bw-ch-presence-member {
display: flex; align-items: center; gap: 7px;
padding: 3px 8px 3px 6px;
border-radius: 6px; cursor: pointer;
transition: background 0.14s;
}
.bw-ch-presence-member:hover { background: var(--surface-2,rgba(255,255,255,0.06)); }
.bw-ch-presence-avatar {
width: 20px !important; height: 20px !important;
font-size: 0.52rem !important; border-radius: 50%;
flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1);
}
.bw-ch-presence-name {
font-size: 0.78rem; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 120px;
}
.bw-ch-presence-member:hover .bw-ch-presence-name { color: var(--fg); }
/* Screen-Share Banner */
.bw-screen-share-banner {
display: flex; align-items: center; gap: 10px;
margin: 6px 14px; padding: 10px 14px;
background: rgba(108,99,255,0.08);
border: 1px solid rgba(108,99,255,0.25);
border-radius: 10px; font-size: 13px;
}
.ssb-icon { font-size: 18px; flex-shrink: 0; }
.ssb-text { flex: 1; color: var(--fg); }
.ssb-text strong { color: #a78bfa; }
.ssb-btn {
background: #6c63ff; border: none; color: #fff;
padding: 6px 14px; border-radius: 7px;
font-size: 12px; font-weight: 600; cursor: pointer;
transition: background .15s; flex-shrink: 0;
}
.ssb-btn:hover { background: #5a50cc; }
.ssb-btn:disabled { background: #3a3a5c; cursor: default; }
/* Channel Join Ankündigung */
.bw-channel-join-msg {
display: flex; align-items: center; gap: 8px;
padding: 5px 14px;
font-size: 0.78rem; color: var(--muted);
opacity: 1; transition: opacity 1s;
user-select: none; pointer-events: none;
}
.bw-channel-join-msg.fading { opacity: 0; }
.cjm-icon { font-size: 0.9rem; flex-shrink: 0; }
.cjm-text strong { color: var(--fg); font-weight: 600; }
.bw-channel-join-msg.leave { opacity: 0.7; }
.bw-channel-join-msg.leave .cjm-text strong { color: var(--muted); }
/* Sound-Toggle Button im Channel-Header */
#ch-sound-toggle {
background: none; border: none;
color: var(--muted); cursor: pointer;
font-size: 14px; padding: 4px 6px;
border-radius: 6px; transition: all 0.15s;
line-height: 1;
}
#ch-sound-toggle:hover { background: var(--surface-2,rgba(255,255,255,0.06)); color: var(--fg); }
#ch-sound-toggle.muted { color: var(--muted); opacity: 0.45; }
/* Channel Member Card (2-Zeilen kompakt) */
#ch-member-card {
position: fixed; z-index: 2000;
background: var(--surface-1, #1e1e2a);
border: 1px solid var(--border, rgba(255,255,255,0.1));
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
width: 260px;
overflow: hidden;
display: none;
}
#ch-member-card.visible { display: block; }
.cmc-row1 {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px 10px;
border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.cmc-avatar { flex-shrink: 0; }
.cmc-info { flex: 1; min-width: 0; }
.cmc-name {
font-size: 0.88rem; font-weight: 600; color: var(--fg);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmc-status {
font-size: 0.72rem; color: var(--muted); margin-top: 1px;
display: flex; align-items: center; gap: 4px;
}
.cmc-status-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.cmc-status-dot[data-s="online"] { background: #22c55e; }
.cmc-status-dot[data-s="away"] { background: #f59e0b; }
.cmc-status-dot[data-s="offline"] { background: #6b7280; }
.cmc-mute-btn {
width: 32px; height: 32px; border-radius: 8px;
border: 1px solid var(--border,rgba(255,255,255,0.1));
background: none; color: var(--muted); cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 16px; transition: all 0.15s;
}
.cmc-mute-btn:hover { background: rgba(255,255,255,0.08); color: var(--fg); }
.cmc-mute-btn.muted { background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3); }
.cmc-row2 {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px 12px;
}
.cmc-vol-wrap {
display: flex; align-items: center; gap: 6px; flex: 1;
}
.cmc-vol-icon { font-size: 14px; color: var(--muted); flex-shrink: 0; }
.cmc-vol-slider {
flex: 1; height: 3px; accent-color: var(--accent,#6c63ff);
cursor: pointer; border-radius: 4px;
}
.cmc-action-btns {
display: flex; gap: 6px; flex-shrink: 0;
}
.cmc-btn {
height: 30px; padding: 0 10px;
border-radius: 7px;
border: 1px solid var(--border,rgba(255,255,255,0.1));
background: none; color: var(--muted); cursor: pointer;
font-size: 12px; white-space: nowrap;
display: flex; align-items: center; gap: 5px;
transition: all 0.15s;
}
.cmc-btn:hover { background: rgba(255,255,255,0.07); color: var(--fg); }
.cmc-btn.friend { color: #22c55e; border-color: rgba(34,197,94,0.3); }
.cmc-btn.friend:hover { background: rgba(34,197,94,0.12); }
.cmc-btn.dm { color: #6c63ff; border-color: rgba(108,99,255,0.3); }
.cmc-btn.dm:hover { background: rgba(108,99,255,0.12); }
.cmc-btn.follow { color: #0ea5e9; border-color: rgba(14,165,233,0.3); }
.cmc-btn.follow:hover { background: rgba(14,165,233,0.12); }
.cmc-btn.invite { color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.cmc-btn.invite:hover { background: rgba(245,158,11,0.12); }
.cmc-btn.stream-watch { color: #ef4444; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.1); animation: sb-pulse 1.5s infinite; }
.cmc-btn.stream-watch:hover { background: rgba(239,68,68,0.25); }
/* Status-Dot am Avatar */
.cmc-av-status-dot {
position: absolute; bottom: 0; right: 0;
width: 10px; height: 10px; border-radius: 50%;
border: 2px solid var(--surface-1, #1e1e2a);
background: #6b7280;
}
.cmc-av-status-dot[data-s="online"] { background: #22c55e; }
.cmc-av-status-dot[data-s="away"] { background: #f59e0b; }
.cmc-av-status-dot[data-s="offline"] { background: #6b7280; }
.cmc-avatar-wrap:hover > div { opacity: 0.85; }
/* ── Hover-Card ───────────────────────────────────────────── */
#wb-hover-card {
position: fixed; z-index: 5500;
width: 240px;
background: rgba(14,14,22,0.98);
border: 1px solid rgba(108,99,255,0.35);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(108,99,255,0.08);
overflow: hidden;
pointer-events: none;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.18s, transform 0.18s;
}
#wb-hover-card.visible { opacity: 1; transform: translateX(0); pointer-events: auto; }
.whc-banner {
height: 52px;
background: linear-gradient(135deg, #6c63ff44, #1a73e822);
}
.whc-avatar-wrap {
position: relative; margin: -22px 0 0 12px;
display: inline-block;
}
.whc-avatar {
width: 44px; height: 44px; border-radius: 50%;
border: 3px solid rgba(14,14,22,0.98);
object-fit: cover;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; font-weight: 800; color: #fff;
overflow: hidden;
}
.whc-status-dot {
position: absolute; bottom: 2px; right: 2px;
width: 11px; height: 11px; border-radius: 50%;
border: 2px solid rgba(14,14,22,0.98);
background: #6b7280;
}
.whc-status-dot[data-s="online"] { background: #22c55e; }
.whc-status-dot[data-s="away"] { background: #f59e0b; }
.whc-body { padding: 6px 14px 14px; }
.whc-name {
font-size: 0.88rem; font-weight: 700; color: var(--fg);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.whc-sub { font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.whc-bio {
font-size: 0.74rem; color: var(--muted); margin-top: 8px;
line-height: 1.45; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 7px;
}
.whc-row {
display: flex; align-items: center; gap: 6px;
font-size: 0.72rem; color: var(--muted); margin-top: 5px;
}
.whc-row svg { flex-shrink: 0; opacity: 0.5; }
.whc-game-badge {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(108,99,255,0.12); border: 1px solid rgba(108,99,255,0.2);
border-radius: 5px; padding: 2px 7px; font-size: 0.68rem;
color: var(--accent); font-weight: 600; margin-top: 2px; margin-right: 3px;
}
.whc-live-row {
display: flex; align-items: center; gap: 6px; margin-top: 7px;
background: rgba(225,29,72,0.1); border: 1px solid rgba(225,29,72,0.25);
border-radius: 7px; padding: 5px 9px;
}
.whc-live-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #e11d48; flex-shrink: 0;
animation: wbPulse 1.2s ease-in-out infinite;
}
.whc-role-badge {
display: inline-block; font-size: 0.6rem; font-weight: 700;
padding: 1px 5px; border-radius: 4px; margin-left: 5px;
background: rgba(108,99,255,0.2); color: #a78bfa; vertical-align: middle;
}
/* Subchannel indent */
.bw-channel-item.bw-subchannel {
padding-left: 22px;
font-size: 0.82rem;
}
.bw-channel-item.bw-subchannel .bw-channel-icon { font-size: 0.75rem; opacity: 0.7; }
.bw-channel-item .bw-ch-add-sub {
margin-left: auto; opacity: 0; width: 16px; height: 16px;
display: flex; align-items: center; justify-content: center;
border: none; background: none; cursor: pointer; color: var(--muted);
border-radius: 3px; flex-shrink: 0; transition: opacity 0.12s, background 0.12s;
}
.bw-channel-item:hover .bw-ch-add-sub { opacity: 1; }
.bw-channel-item .bw-ch-add-sub:hover { background: var(--border); color: var(--fg); }
/* Voice channel item extras */
.bw-channel-item-voice {
flex-direction: column;
align-items: flex-start;
height: auto;
padding: 6px 10px 6px;
}
/* ── Voice/Video: pulsierendes Icon wenn User anwesend ── */
/* WaveBlue-Wellen-Icon: lila pulsierend bei ungelesenen Nachrichten */
@keyframes wbWavePulse {
0%, 100% { filter: drop-shadow(0 0 0px #6c63ff); color: #6c63ff; }
50% { filter: drop-shadow(0 0 5px #8b83ff); color: #a78bfa; }
}
.bw-channel-item.has-unread .wb-wave-icon { animation: wbWavePulse 1.6s ease-in-out infinite; }
.bw-channel-item.has-unread .bw-channel-name { color: var(--fg) !important; font-weight: 600; }
/* Wellen-Icon WEISS pulsierend wenn Screen-Share aktiv im Kanal */
@keyframes wbWaveStream {
0%, 100% { filter: drop-shadow(0 0 0px #fff); color: #e2e8f0; }
50% { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px rgba(255,255,255,0.5)); color: #fff; }
}
.wb-wave-icon.wb-wave-streaming {
animation: wbWaveStream 1.2s ease-in-out infinite !important;
}
.bw-channel-item:has(.wb-wave-streaming) .bw-channel-name {
color: #fff !important;
font-weight: 600;
}
@keyframes wbVoicePulseBlue {
0%, 100% { filter: drop-shadow(0 0 0px #3b82f6); color: #3b82f6; }
50% { filter: drop-shadow(0 0 6px #3b82f6); color: #60a5fa; }
}
@keyframes wbVoicePulseWhite {
0%, 100% { filter: drop-shadow(0 0 0px #e2e8f0); color: #e2e8f0; }
50% { filter: drop-shadow(0 0 6px #fff); color: #fff; }
}
/* Blau pulsierend wenn jemand im Voice-Kanal ist */
.bw-channel-item-voice[data-chtype="voice"]:has(.bw-voice-member-row) .wb-voice-icon {
animation: wbVoicePulseBlue 1.8s ease-in-out infinite !important;
}
/* Weiß pulsierend wenn jemand im Video-Kanal ist */
.bw-channel-item-voice[data-chtype="video"]:has(.bw-voice-member-row) .wb-voice-icon {
animation: wbVoicePulseWhite 1.8s ease-in-out infinite !important;
}
/* Hover-Tooltip: User-Liste */
.wb-voice-tooltip {
display: none;
position: absolute;
left: 0; right: 0;
top: calc(100% + 4px);
background: var(--surface-2, #1e1f22);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 6px 8px;
font-size: 0.72rem;
color: var(--fg);
z-index: 500;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
pointer-events: none;
min-width: 140px;
}
.bw-channel-item-voice:has(.bw-voice-member-row):hover .wb-voice-tooltip {
display: block;
}
.wb-voice-tooltip-user {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 0;
}
.wb-voice-tooltip-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #22c55e;
flex-shrink: 0;
}
.bw-channel-item-voice .bw-ch-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.bw-voice-users {
display: flex;
align-items: center;
gap: 4px;
padding-left: 28px;
margin-top: 4px;
}
.bw-voice-mini-avatar {
width: 18px;
height: 18px;
border-radius: var(--radius-full);
background: var(--accent);
font-size: 0.55rem;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--surface-2);
}
.bw-voice-join-btn {
margin-left: auto;
background: none;
border: 1px solid var(--border);
color: var(--muted);
border-radius: var(--radius-sm);
padding: 2px 8px;
font-size: 0.72rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.bw-channel-item:hover .bw-voice-join-btn {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-subtle);
}
/* Voice Bar (bottom) */
.bw-voice-bar { display: none; }
.bw-voice-bar.visible { display: flex; align-items: center; gap: 14px; padding: 0 16px; height: 48px; background: rgba(34,197,94,0.07); border-top: 1px solid rgba(34,197,94,0.18); flex-shrink: 0; }
@keyframes bwPulseGlow {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 99,102,241), 0.55); }
50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb, 99,102,241), 0); }
}
@keyframes bwPulseGlowGreen {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94, 0.6); }
50% { box-shadow: 0 0 0 6px rgba(34,197,94, 0); }
}
.bw-header-action-btn.pulsing {
background: rgba(34,197,94,0.15);
color: var(--online, #22c55e);
animation: bwPulseGlowGreen 1.6s ease-in-out infinite;
}
.bw-header-action-btn.active {
background: rgba(var(--accent-rgb, 99,102,241), 0.15);
color: var(--accent);
animation: bwPulseGlow 1.6s ease-in-out infinite;
}
.bw-voice-bar-room {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
color: var(--fg);
}
.bw-voice-bar-room-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--online);
animation: livePulse 2s infinite;
}
.bw-voice-bar-participants {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
}
.bw-voice-bar-participant {
display: flex;
align-items: center;
gap: 6px;
background: var(--surface-3);
border-radius: var(--radius-full);
padding: 3px 10px 3px 4px;
}
.bw-voice-bar-participant .bw-avatar {
width: 24px;
height: 24px;
font-size: 0.65rem;
}
.bw-voice-bar-participant-name {
font-size: 0.78rem;
color: var(--fg);
font-weight: 500;
}
.bw-voice-bar-actions {
display: flex;
align-items: center;
gap: 6px;
}
.bw-voice-ctrl {
width: 34px;
height: 34px;
border-radius: var(--radius-full);
border: none;
background: var(--surface-3);
color: var(--fg);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.bw-voice-ctrl:hover {
background: var(--border);
}
.bw-voice-ctrl.muted {
background: rgba(225,29,72,0.18);
color: var(--danger);
}
.bw-voice-ctrl-disconnect {
background: var(--danger);
color: #fff;
}
.bw-voice-ctrl-disconnect:hover {
background: #c81a40;
}
.bw-voice-ctrl.active {
background: var(--accent);
color: #fff;
}
.bw-voice-ctrl.active:hover {
background: var(--accent-hover, #5752d0);
}
.bw-voice-soon-badge {
font-size: 0.68rem;
font-weight: 700;
background: var(--accent-subtle);
color: var(--accent);
border-radius: var(--radius-full);
padding: 2px 8px;
letter-spacing: 0.04em;
}
/* Chat header description */
.bw-chat-channel-desc {
font-size: 0.72rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
}
/* Typing indicator bar – nur sichtbar wenn JS display:flex setzt */
.bw-typing-bar {
align-items: center;
padding: 0 16px 4px;
font-size: 0.75rem;
color: var(--muted);
gap: 6px;
}
.bw-typing-dots {
display: flex;
gap: 3px;
align-items: center;
}
.bw-typing-dots span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--muted);
animation: typingBounce 1.4s infinite ease-in-out;
}
.bw-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.bw-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
/* Message fade-in */
@keyframes msgFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.bw-messages-container { animation: msgFadeIn 0.22s ease; }
/* Hover reactions bar */
.bw-message-group {
position: relative;
}
.bw-reaction-bar {
display: none;
position: absolute;
right: 12px;
top: -16px;
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: var(--radius-full);
padding: 3px 8px;
gap: 4px;
align-items: center;
font-size: 1rem;
z-index: 5;
box-shadow: var(--shadow-md);
}
.bw-message-group:hover .bw-reaction-bar {
display: flex;
}
.bw-reaction-btn {
cursor: pointer;
background: none;
border: none;
padding: 2px 3px;
border-radius: var(--radius-sm);
font-size: 0.95rem;
line-height: 1;
transition: transform 0.12s ease;
}
.bw-reaction-btn:hover { transform: scale(1.25); }
/* Member group count badge */
.bw-member-group-count {
font-size: 0.68rem;
background: var(--surface-3);
border-radius: var(--radius-full);
padding: 1px 6px;
color: var(--muted);
font-weight: 600;
}
/* Chat empty state */
.bw-chat-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: var(--muted);
padding: 40px 20px;
text-align: center;
}
.bw-chat-empty-icon {
width: 56px;
height: 56px;
background: var(--surface-3);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
}
.bw-chat-empty p {
font-size: 0.85rem;
max-width: 280px;
}
/* Settings Tabs */
.bw-set-tab {
background: none; border: none; cursor: pointer;
padding: 10px 16px; font-size: 0.85rem; font-weight: 600;
color: var(--muted); border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s; margin-bottom: -1px;
}
.bw-set-tab:hover { color: var(--fg); }
.bw-set-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Community manage cards */
.bw-manage-community {
border: 1px solid var(--border); border-radius: var(--radius-md);
overflow: hidden;
}
.bw-manage-community-head {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; background: var(--surface-2);
cursor: pointer; user-select: none;
}
.bw-manage-community-name {
flex: 1; font-weight: 600; font-size: 0.88rem; color: var(--fg);
}
.bw-manage-community-actions { display: flex; gap: 6px; align-items: center; }
.bw-manage-channels { padding: 6px 10px 10px; display: none; }
.bw-manage-channels.open { display: block; }
.bw-manage-channel-row {
display: flex; align-items: center; gap: 8px;
padding: 5px 6px; border-radius: var(--radius-sm);
font-size: 0.82rem; color: var(--muted);
}
.bw-manage-channel-row:hover { background: var(--surface-3); }
.bw-manage-channel-name { flex: 1; }
.bw-manage-channel-name.locked { text-decoration: line-through; opacity: 0.6; }
.bw-manage-btn {
padding: 3px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
background: none; cursor: pointer; font-size: 0.75rem; font-weight: 600;
transition: all 0.15s; white-space: nowrap;
}
.bw-manage-btn-lock { color: #f59e0b; border-color: #f59e0b22; }
.bw-manage-btn-lock:hover { background: #f59e0b22; }
.bw-manage-btn-unlock { color: var(--online); border-color: #22c55e22; }
.bw-manage-btn-unlock:hover { background: #22c55e22; }
.bw-manage-btn-delete { color: var(--danger); border-color: var(--danger-glow,#ef444422); }
.bw-manage-btn-delete:hover { background: rgba(225,29,72,0.12); }
/* No community selected */
.bw-no-community {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
height: 100%;
color: var(--muted);
font-size: 0.85rem;
text-align: center;
padding: 20px;
}
/* Voice channel – member rows under channel item */
.bw-voice-member-row {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 4px 3px 26px;
border-radius: var(--radius-sm);
cursor: default;
position: relative;
transition: background 0.12s ease;
}
.bw-voice-member-row:hover { background: var(--surface-3); }
.bw-voice-member-name {
font-size: 0.77rem;
color: var(--muted);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bw-voice-member-row:hover .bw-voice-member-name { color: var(--fg); }
.bw-voice-member-actions {
display: none;
align-items: center;
gap: 1px;
}
.bw-voice-member-row:hover .bw-voice-member-actions { display: flex; }
.bw-voice-action-btn {
width: 17px; height: 17px;
border: none; background: none; cursor: pointer;
color: var(--muted); border-radius: 3px;
display: flex; align-items: center; justify-content: center;
padding: 0; flex-shrink: 0;
transition: color 0.12s, background 0.12s;
}
.bw-voice-action-btn:hover { color: var(--accent); background: var(--accent-subtle); }
.bw-voice-action-btn.muted { color: var(--danger); }
.bw-voice-vol-slider {
width: 44px; height: 3px;
accent-color: var(--accent); cursor: pointer;
}
/* ── Orbit Avatar Sidebar ──────────────────────────────────── */
.orbit-display {
position: relative;
width: 200px;
height: 200px;
margin: 10px auto 6px;
flex-shrink: 0;
}
.orbit-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px dashed rgba(108,99,255,0.35);
animation: orbitRingSpin 18s linear infinite;
pointer-events: none; /* Ring darf Klicks/Hover NICHT abfangen */
z-index: 0;
}
@keyframes orbitRingSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.orbit-center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 108px; height: 108px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--accent,#6C63FF);
box-shadow: 0 0 16px rgba(108,99,255,0.45);
background: var(--surface-2,#1e1e2e);
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem; font-weight: 700; color: #fff;
cursor: pointer;
z-index: 5; /* Über Ring, aber unter orbit-action Buttons */
}
.orbit-center img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.orbit-action {
position: absolute;
top: 50%; left: 50%;
width: 40px; height: 40px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.14);
background: rgba(18,18,30,0.92);
color: rgba(255,255,255,0.6);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
padding: 0;
z-index: 10;
pointer-events: all;
}
.orbit-action svg { width: 20px !important; height: 20px !important; }
.orbit-action:hover {
color: #fff;
background: rgba(108,99,255,0.35);
border-color: var(--accent,#6C63FF);
box-shadow: 0 0 10px rgba(108,99,255,0.3);
}
@keyframes orbitPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(108,99,255,0.6); }
50% { box-shadow: 0 0 0 6px rgba(108,99,255,0); }
}
.orbit-action.active {
color: #6c63ff;
border-color: #6c63ff;
background: rgba(108,99,255,0.22);
animation: orbitPulse 1.8s ease infinite;
}
.orbit-action.danger.active {
color: var(--danger,#ef4444);
border-color: var(--danger,#ef4444);
background: rgba(239,68,68,0.18);
animation: none;
}
.orbit-user-info {
text-align: center;
padding: 2px 8px 10px;
}
.orbit-username {
font-size: 0.82rem;
font-weight: 700;
color: var(--fg,#e8e8f0);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.orbit-status {
font-size: 0.68rem;
color: var(--online,#22c55e);
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 2px;
}
.orbit-status-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--online,#22c55e);
flex-shrink: 0;
}
.orbit-divider {
border: none;
border-top: 1px solid var(--border,rgba(255,255,255,0.08));
margin: 0 10px 8px;
}
/* ── Mini-Universum am unteren Sidebar-Rand ──────────────── */
#sidebar-mini-universe {
padding: 10px 0 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
border-top: 1px solid rgba(108,99,255,0.12);
margin-top: auto;
cursor: pointer;
transition: opacity 0.2s;
flex-shrink: 0;
}
#sidebar-mini-universe:hover { opacity: 0.8; }
#mini-universe-canvas {
display: block;
width: 170px;
height: 170px;
border-radius: 50%;
border: 1.5px solid rgba(108,99,255,0.3);
box-shadow: 0 0 24px rgba(108,99,255,0.3), 0 0 6px rgba(108,99,255,0.18);
}
.mini-universe-label {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(108,99,255,0.55);
}
/* ── Orbit Flyout Panel ─────────────────────────────── */
#orbit-flyout-panel {
position: fixed; z-index: 9999;
background: rgba(12,12,22,0.98);
border: 1px solid rgba(108,99,255,0.4); border-radius: 12px;
width: 240px; box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(108,99,255,0.08);
pointer-events: none; opacity: 0;
transition: opacity 0.15s ease;
}
#orbit-flyout-panel.visible {
opacity: 1; pointer-events: all;
}
.ofl-header {
display:flex; align-items:center; gap:8px; padding:10px 12px 8px;
border-bottom:1px solid rgba(255,255,255,0.06);
font-size:0.78rem; font-weight:700; color:var(--fg,#e8e8f0);
}
.ofl-header svg { color:var(--accent,#6C63FF); flex-shrink:0; }
.ofl-toggle-btn {
margin-left:auto; padding:3px 10px; border-radius:20px;
font-size:0.65rem; font-weight:700; border:1px solid rgba(108,99,255,0.4);
background:rgba(108,99,255,0.12); color:var(--accent,#6C63FF); cursor:pointer;
}
.ofl-toggle-btn:hover,.ofl-toggle-btn.active { background:var(--accent,#6C63FF); color:#fff; }
.ofl-body { padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.ofl-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ofl-label { font-size:0.72rem; color:var(--muted,#8a8a9a); flex:1; }
.ofl-toggle { position:relative; width:32px; height:18px; flex-shrink:0; }
.ofl-toggle input { opacity:0; width:0; height:0; position:absolute; }
.ofl-toggle-track {
position:absolute; inset:0; border-radius:99px;
background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15);
cursor:pointer; transition:background 0.2s;
}
.ofl-toggle input:checked + .ofl-toggle-track { background:rgba(108,99,255,0.7); border-color:var(--accent,#6C63FF); }
.ofl-toggle-track::after {
content:''; position:absolute; left:2px; top:50%;
width:12px; height:12px; border-radius:50%; background:#fff;
transform:translateY(-50%); transition:left 0.18s;
}
.ofl-toggle input:checked + .ofl-toggle-track::after { left:16px; }
.ofl-slider-wrap { display:flex; flex-direction:column; gap:3px; }
.ofl-slider {
-webkit-appearance:none; appearance:none; width:100%; height:4px;
border-radius:2px; background:rgba(255,255,255,0.12); outline:none; cursor:pointer;
}
.ofl-slider::-webkit-slider-thumb {
-webkit-appearance:none; width:13px; height:13px;
border-radius:50%; background:var(--accent,#6C63FF);
}
.ofl-select {
width:100%; padding:5px 8px; border-radius:7px;
background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
color:var(--fg,#e8e8f0); font-size:0.72rem; font-family:inherit; cursor:pointer; outline:none;
}
.ofl-select:focus { border-color:var(--accent,#6C63FF); }
.ofl-btn-row { display:flex; gap:6px; }
.ofl-action-btn {
flex:1; padding:6px 0; border-radius:8px; border:1px solid rgba(255,255,255,0.12);
background:rgba(255,255,255,0.05); color:var(--fg,#e8e8f0);
font-size:0.7rem; font-weight:600; cursor:pointer; transition:background 0.15s;
}
.ofl-action-btn:hover { background:rgba(108,99,255,0.2); border-color:rgba(108,99,255,0.4); }
.ofl-action-btn.primary { background:rgba(108,99,255,0.25); border-color:rgba(108,99,255,0.5); color:var(--accent,#6C63FF); }
.ofl-divider { height:1px; background:rgba(255,255,255,0.06); margin:2px 0; }
/* Sidebar als Flex-Column damit Mini-Universum unten bleibt */
.bw-sidebar {
display: flex !important;
flex-direction: column !important;
}
.bw-sidebar-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
}
/* ── Custom Status + Mood Panel ───────────────────────────── */
#orbit-status-panel {
display: none;
padding: 10px 12px 12px;
background: rgba(0,0,0,0.25);
border-top: 1px solid rgba(255,255,255,0.06);
animation: orbitPanelIn 0.2s ease;
}
#orbit-status-panel.open { display: block; }
@keyframes orbitPanelIn {
from { opacity:0; transform:translateY(-6px); }
to { opacity:1; transform:translateY(0); }
}
.orbit-panel-label {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: 6px;
}
.orbit-status-input {
width: 100%;
box-sizing: border-box;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: var(--fg, #e8e8f0);
font-size: 0.78rem;
padding: 7px 10px;
outline: none;
transition: border-color 0.2s;
font-family: inherit;
}
.orbit-status-input:focus {
border-color: var(--accent, #6C63FF);
background: rgba(108,99,255,0.08);
}
.orbit-status-input::placeholder { color: rgba(255,255,255,0.25); }
.orbit-mood-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin-top: 8px;
}
.orbit-mood-btn {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 7px;
padding: 6px 4px;
cursor: pointer;
text-align: center;
font-size: 0.85rem;
transition: background 0.15s, border-color 0.15s;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.orbit-mood-btn:hover {
background: rgba(108,99,255,0.2);
border-color: rgba(108,99,255,0.4);
}
.orbit-mood-btn.selected {
background: rgba(108,99,255,0.25);
border-color: var(--accent, #6C63FF);
}
.orbit-mood-btn span.mood-label {
font-size: 0.52rem;
color: rgba(255,255,255,0.45);
font-weight: 600;
letter-spacing: 0.03em;
}
.orbit-panel-row {
display: flex;
gap: 5px;
margin-top: 8px;
}
.orbit-panel-row select {
flex: 1;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 7px;
color: var(--fg);
font-size: 0.75rem;
padding: 5px 8px;
outline: none;
cursor: pointer;
}
.orbit-panel-save {
background: var(--accent, #6C63FF);
border: none;
border-radius: 7px;
color: #fff;
font-size: 0.72rem;
font-weight: 700;
padding: 5px 12px;
cursor: pointer;
transition: opacity 0.15s;
}
.orbit-panel-save:hover { opacity: 0.85; }
/* Toggle-Pfeil am Status-Btn wenn Panel offen */
#orbit-status-wrap { position: relative; }
.ofl-ch-row { display:flex;align-items:center;gap:4px;padding:3px 6px;border-radius:5px;transition:background .12s; }
.ofl-ch-row:hover { background:rgba(255,255,255,0.05); }
.ofl-ch-btn { background:none;border:none;color:var(--muted);cursor:pointer;font-size:11px;padding:1px 4px;border-radius:3px;line-height:1;transition:all .12s;flex-shrink:0; }
.ofl-ch-btn:hover { background:rgba(255,255,255,0.1);color:var(--fg); }
.ofl-ch-btn.danger:hover { background:rgba(239,68,68,0.2);color:#ef4444; }
/* ── Share Hover Popover ──────────────────────────────────────────────── */
#sb-hover-pop {
display: none !important; /* Deaktiviert — Orbit-Flyout übernimmt */
position: fixed;
width: 264px;
background: var(--surface-1, #1e1e2a);
border: 1px solid var(--border, rgba(255,255,255,0.1));
border-radius: 12px;
padding: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,0.55);
z-index: 9100; /* über allem */
flex-direction: column;
gap: 10px;
}
#sb-hover-pop.visible { display: flex; }
#sb-hover-pop::after {
content: '';
position: absolute;
bottom: -6px; left: 50%;
width: 10px; height: 10px;
background: var(--surface-1, #1e1e2a);
border-right: 1px solid var(--border, rgba(255,255,255,0.1));
border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
transform: translateX(-50%) rotate(45deg);
}
.sbp-title {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .5px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.sbp-golive-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: 8px;
border: 1px solid rgba(239,68,68,0.25);
background: rgba(239,68,68,0.06);
cursor: pointer; font-size: 12px; font-weight: 600; color: #e8e8f0;
}
.sbp-golive-row input { width:15px; height:15px; accent-color:#ef4444; cursor:pointer; }
.sbp-dot { width:7px; height:7px; border-radius:50%; background:#ef4444; flex-shrink:0; animation:sb-pulse 1.2s infinite; }
.sbp-target-list { display:flex; flex-direction:column; gap:5px; }
.sbp-target-item {
display:flex; align-items:center; gap:7px;
font-size:12px; color:var(--fg);
padding:6px 8px; border-radius:7px;
border:1px solid var(--border,rgba(255,255,255,0.08));
}
.sbp-target-item input { width:13px; height:13px; accent-color:#6c63ff; cursor:pointer; }
.sbp-target-dest { font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:145px; }
.sbp-loading { font-size:11px; color:var(--muted); text-align:center; padding:6px; }
.sbp-new-form { display:flex; flex-direction:column; gap:6px; padding:8px; background:rgba(255,255,255,0.03); border-radius:7px; border:1px solid rgba(255,255,255,0.07); }
.sbp-new-form select,
.sbp-new-form input { padding:6px 8px; border-radius:6px; background:var(--surface-2,#252530); border:1px solid rgba(255,255,255,0.1); color:var(--fg); font-size:11px; width:100%; }
.sbp-new-form button { padding:6px; border-radius:6px; border:none; background:#6c63ff; color:#fff; font-size:11px; font-weight:600; cursor:pointer; }
.sbp-add-btn { background:none; border:1px dashed rgba(108,99,255,0.4); color:#6c63ff; font-size:11px; padding:5px; border-radius:6px; cursor:pointer; width:100%; transition:all .15s; }
.sbp-add-btn:hover { background:rgba(108,99,255,0.1); }
#sbp-start-btn { padding:9px; border-radius:8px; border:none; background:#6c63ff; color:#fff; font-size:13px; font-weight:700; cursor:pointer; transition:background .15s; }
#sbp-start-btn:hover { background:#5a50cc; }