/* VoiceRelay theme. */

:root {
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

    --bg:        #0a0f1a;
    --bg-deep:   #050c18;
    --bg-panel:  #070e1c;
    --bg-side:   #060d1a;
    --bg-card:   #0a1828;
    --line:      #0d2033;
    --neon:      #4dffda;
    --neon-dim:  #2a6080;
    --text:      #c8e0ff;
    --text-soft: #7aa8cc;
    --danger:    #ff6b8a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
    font-family: var(--font-mono);
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}

.ts-root {
    height: 100vh;
    background: var(--bg);
    overflow: hidden;
    display: grid;
    grid-template-rows: 48px 1fr;
    grid-template-columns: 220px 1fr;
    position: relative;
}

.topbar {
    grid-column: 1 / -1;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center;
    padding: 0 16px; gap: 16px;
    z-index: 20;
}
.logo {
    font-size: 13px; font-weight: 500; letter-spacing: 0.15em;
    color: var(--neon); text-shadow: 0 0 8px #4dffda88;
    display: flex; align-items: center; gap: 8px;
}
.logo-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--neon); box-shadow: 0 0 6px var(--neon);
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.version { font-size: 10px; color: #1a4060; letter-spacing: 0.1em; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.status-badge {
    font-size: 10px; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 3px;
    border: 1px solid #4dffda44; color: var(--neon); text-transform: uppercase;
    box-shadow: 0 0 8px #4dffda22;
}
.user-self { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-soft); }
.avatar-sm {
    width: 24px; height: 24px; border-radius: 50%;
    background: #0d2a3f; border: 1px solid #4dffda55;
    display: flex; align-items: center; justify-content: center;
    color: var(--neon);
}
.avatar-sm svg { width: 14px; height: 14px; }
.icon-btn {
    width: 30px; height: 30px; border-radius: 5px;
    border: 1px solid var(--line); background: transparent;
    color: var(--neon-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.icon-btn:hover { color: var(--neon); border-color: #4dffda44; }
.icon-btn svg { width: 16px; height: 16px; }

.sidebar {
    grid-row: 2; grid-column: 1;
    background: var(--bg-side);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    min-height: 0;
}
.sidebar-header {
    padding: 8px 10px 6px 14px; font-size: 9px; letter-spacing: 0.18em;
    color: var(--neon-dim); text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
}
.ch-edit-toggle {
    width: 20px; height: 20px; padding: 0; border: none; border-radius: 3px;
    background: transparent; color: #1a4060; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.ch-edit-toggle:hover { color: var(--neon); }
.ch-edit-toggle.on { color: var(--neon); background: #0d3030; box-shadow: 0 0 6px #4dffda33; }
.ch-edit-toggle svg { width: 12px; height: 12px; }
.ch-edit-toggle[hidden] { display: none; }
.channel-meta .ch-edit-toggle { width: 24px; height: 24px; }
.channel-meta .ch-edit-toggle svg { width: 14px; height: 14px; }
.channel-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.channel {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px; cursor: pointer; font-size: 12px;
    color: #4a7a9b; border-left: 2px solid transparent;
    transition: all 0.15s;
}
.channel:hover { background: #0d1f30; color: #7ab8d8; }
.channel.active { background: #0a1e35; color: var(--neon); border-left-color: var(--neon); }
.channel .ch-hash { width: 11px; height: 11px; opacity: 0.6; flex-shrink: 0; }
.channel .ch-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel .ch-count {
    font-size: 10px; color: var(--neon-dim); background: var(--line);
    padding: 1px 5px; border-radius: 8px;
}
.channel.active .ch-count { color: var(--neon); background: #0d3030; }

.channel.editing { cursor: grab; }
.channel.editing:active { cursor: grabbing; }
.channel.editing .ch-grip { width: 11px; height: 11px; opacity: 0.5; flex-shrink: 0; }
.channel.drop-target { background: #0d3030; border-left-color: var(--neon); }
.ch-action {
    width: 18px; height: 18px; padding: 0; border: none; border-radius: 3px;
    background: transparent; color: var(--neon-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: color 0.15s;
}
.ch-action:hover { color: var(--neon); }
.ch-action.danger:hover { color: var(--danger); }
.ch-action svg { width: 11px; height: 11px; }
.channel.editor { cursor: default; padding-top: 4px; padding-bottom: 4px; }
.ch-edit-input {
    flex: 1; min-width: 0; padding: 2px 6px;
    background: var(--bg-deep); border: 1px solid #4dffda44; border-radius: 3px;
    color: var(--text); font-family: inherit; font-size: 12px; outline: none;
}
.ch-edit-input:focus { border-color: var(--neon); box-shadow: 0 0 6px #4dffda22; }
.ch-add { color: #3a6a88; font-style: italic; }
.ch-add:hover { color: var(--neon); font-style: normal; }

.ch-users { padding: 2px 0 4px 28px; }
.ch-user-row {
    display: flex; align-items: center; gap: 7px;
    padding: 3px 14px 3px 0; font-size: 11px; color: #3a6a88;
}
.ch-user-row.in-channel { color: #6db3cc; }
.ch-user-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 4px var(--neon); flex-shrink: 0; }
.ch-user-row.muted, .ch-user-row.muted .ch-user-dot { color: var(--danger); }
.ch-user-dot.muted { background: var(--danger); box-shadow: 0 0 4px #ff6b8a55; }

.sidebar-footer { border-top: 1px solid var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.status-line { font-size: 10px; color: var(--neon-dim); font-style: italic; letter-spacing: 0.04em; }
.legal-link {
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: none; padding: 0; cursor: pointer;
    color: #3a6a88; font-family: inherit; font-size: 10px; letter-spacing: 0.06em;
    text-align: left; transition: color 0.15s;
}
.legal-link:hover { color: var(--neon); }
.legal-link-icon { width: 12px; height: 12px; flex-shrink: 0; }

.main {
    grid-row: 2; grid-column: 2;
    display: flex; flex-direction: column;
    background: var(--bg-panel);
    min-height: 0;
}
.channel-header {
    padding: 12px 20px 10px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.channel-title { font-size: 14px; font-weight: 500; color: var(--neon); letter-spacing: 0.05em; }
.channel-desc { font-size: 11px; color: var(--neon-dim); letter-spacing: 0.04em; margin-top: 1px; }
.channel-meta { margin-left: auto; display: flex; gap: 8px; }
.meta-chip {
    font-size: 10px; padding: 3px 8px; border-radius: 3px;
    border: 1px solid #0d2a3f; color: var(--neon-dim); letter-spacing: 0.06em;
}

.user-grid {
    flex: 2 1 0; min-height: 0; overflow-y: auto;
    padding: 20px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px; align-content: start;
}
.grid-empty {
    grid-column: 1 / -1; color: var(--neon-dim);
    font-size: 12px; letter-spacing: 0.08em; padding: 20px 0; text-align: center;
}
.user-card {
    background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px;
    padding: 16px 12px 12px; display: flex; flex-direction: column; align-items: center;
    gap: 8px; position: relative; transition: border-color 0.15s;
}
.user-card:hover { border-color: #4dffda33; }
.user-card.self { border-color: #4dffda55; box-shadow: 0 0 8px #4dffda0f; }
.user-card.speaking { border-color: #4dffda88; box-shadow: 0 0 12px #4dffda18; }
.user-card.muted { border-color: #ff6b8a33; }

.avatar-ring {
    width: 52px; height: 52px; border-radius: 50%;
    border: 2px solid var(--line); position: relative;
    display: flex; align-items: center; justify-content: center;
}
.user-card.self .avatar-ring { border-color: #4dffda66; background: #0a2030; }
.user-card.speaking .avatar-ring { border-color: var(--neon); box-shadow: 0 0 0 3px #4dffda22, 0 0 16px #4dffda33; }
.user-card.muted .avatar-ring { border-color: #ff6b8a44; }

.avatar-icon { width: 30px; height: 30px; color: var(--neon-dim); }
.user-card.self .avatar-icon, .user-card.speaking .avatar-icon { color: var(--neon); }
.user-card.muted .avatar-icon { color: #a05a6d; }

.status-dot {
    position: absolute; bottom: 1px; right: 1px;
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--bg-card); background: var(--neon); box-shadow: 0 0 5px var(--neon);
}
.status-dot.muted { background: var(--danger); box-shadow: 0 0 5px var(--danger); }

.user-name {
    font-size: 11px; color: var(--text-soft); letter-spacing: 0.06em;
    text-align: center; line-height: 1.3; word-break: break-word;
}
.user-card.self .user-name, .user-card.speaking .user-name { color: var(--neon); }

.voice-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.bar { width: 3px; border-radius: 1px; background: var(--neon); opacity: 0.3; }
.bar.b1 { height: 4px; } .bar.b2 { height: 10px; } .bar.b3 { height: 14px; }
.bar.b4 { height: 7px; } .bar.b5 { height: 4px; }
.user-card.speaking .bar { opacity: 1; animation: voicebar 0.6s ease-in-out infinite alternate; }
.bar.b2 { animation-delay: 0.1s; } .bar.b3 { animation-delay: 0.2s; }
.bar.b4 { animation-delay: 0.15s; } .bar.b5 { animation-delay: 0.05s; }
@keyframes voicebar { from { transform: scaleY(0.4); opacity: 0.6; } to { transform: scaleY(1); opacity: 1; } }

.tile-muted { font-size: 9px; color: var(--danger); letter-spacing: 0.1em; height: 14px; }

.user-tag {
    position: absolute; top: 7px; right: 7px; font-size: 8px; padding: 1px 4px;
    border-radius: 2px; letter-spacing: 0.08em; text-transform: uppercase;
    border: 1px solid #1a3a50; color: var(--neon-dim); background: var(--bg-deep);
}
.user-tag.host { border-color: #4dffda44; color: var(--neon); }
.user-tag.group { right: auto; left: 7px; }
.user-tag.group.banned { border-color: #ff6b8a55; color: var(--danger); }

.tile-grant { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 2px; }
.grant-btn {
    width: 24px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 3px;
    background: var(--bg-deep); color: var(--neon-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.grant-btn:hover { color: var(--neon); border-color: #4dffda44; }
.grant-btn.ban:hover { color: var(--danger); border-color: #ff6b8a55; }
.grant-btn:disabled { color: #14293a; border-color: #0d2032; background: transparent; cursor: default; }
.grant-btn:disabled:hover { color: #14293a; border-color: #0d2032; }
.grant-btn svg { width: 13px; height: 13px; }

.tile-ctl { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 2px; }
.tile-label { font-size: 8px; letter-spacing: 0.08em; color: var(--neon-dim); width: 22px; flex-shrink: 0; }
.tile-slider { flex: 1; min-width: 0; }
.tile-vol { font-size: 9px; color: var(--neon-dim); width: 30px; text-align: right; flex-shrink: 0; }

.chat-panel {
    flex: 1 1 0; min-height: 120px;
    border-top: 1px solid var(--line);
    display: flex; flex-direction: column;
    background: #060c16;
}
.chat-head {
    padding: 8px 16px 6px; font-size: 9px; letter-spacing: 0.16em;
    color: var(--neon-dim); text-transform: uppercase;
}
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 8px; font-size: 12px; line-height: 1.5; }
.chat-msg { margin: 2px 0; }
.chat-msg .meta { color: var(--neon-dim); margin-right: 8px; font-size: 11px; }
.chat-msg .body { color: var(--text-soft); }
.chat-form { display: flex; gap: 8px; padding: 8px 16px; border-top: 1px solid var(--line); }
.chat-form input {
    flex: 1; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 4px;
    color: var(--text); font-family: inherit; font-size: 12px; padding: 7px 10px; outline: none;
}
.chat-form input:focus { border-color: #4dffda55; }
.chat-form input:disabled { opacity: 0.4; }
.chat-form button {
    background: transparent; border: 1px solid #4dffda44; border-radius: 4px;
    color: var(--neon); font-family: inherit; font-size: 11px; letter-spacing: 0.08em;
    padding: 0 14px; cursor: pointer; transition: all 0.15s;
}
.chat-form button:hover:not(:disabled) { background: #0d3a3a; }
.chat-form button:disabled { opacity: 0.3; cursor: default; }

/* bottom bar */
.bottom-bar {
    border-top: 1px solid var(--line); padding: 9px 20px; flex-shrink: 0;
    display: flex; align-items: center; gap: 16px;
    font-size: 11px; color: var(--neon-dim); background: var(--bg-deep);
}
.mic-btn {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid #4dffda44; background: #0d2a3f; color: var(--neon);
    border-radius: 5px; padding: 6px 14px; cursor: pointer;
    font-family: inherit; font-size: 11px; letter-spacing: 0.08em; transition: all 0.15s;
}
.mic-btn svg { width: 16px; height: 16px; }
.mic-btn:hover:not(:disabled) { background: #0d3a3a; border-color: var(--neon); }
.mic-btn.muted { border-color: #ff6b8a55; color: var(--danger); background: #2a0d18; }
.mic-btn:disabled { opacity: 0.4; cursor: default; }
/* throughput + latency readout, right-aligned, all one uniform style */
.bb-meters { display: flex; gap: 16px; margin-left: auto; color: #1a5050; letter-spacing: 0.06em; }
.bb-meters b { color: var(--neon); font-weight: 500; }

/* scan-line effect */
.scanline {
    pointer-events: none; position: absolute; inset: 0; z-index: 30;
    background: repeating-linear-gradient(to bottom,
        transparent 0px, transparent 3px,
        rgba(0,255,200,0.012) 3px, rgba(0,255,200,0.012) 4px);
}

/* ===== range sliders (tiles + settings) ===== */
input[type=range] {
    -webkit-appearance: none; appearance: none;
    height: 4px; background: var(--line); border-radius: 2px; outline: none; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--neon); box-shadow: 0 0 6px #4dffda88; border: none;
}
input[type=range]::-moz-range-thumb {
    width: 12px; height: 12px; border-radius: 50%; border: none;
    background: var(--neon); box-shadow: 0 0 6px #4dffda88;
}

/* ===== OVERLAYS ===== */
.overlay {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(2, 6, 14, 0.72); backdrop-filter: blur(3px);
}
.ov-card {
    background: var(--bg-deep); border: 1px solid #4dffda44; border-radius: 10px;
    box-shadow: 0 0 40px #4dffda22, 0 20px 60px rgba(0,0,0,0.6);
    padding: 26px 28px; width: 340px; max-width: calc(100vw - 32px);
    position: relative;
}
.ov-card.account { display: flex; flex-direction: column; gap: 12px; }
.ov-glitch { font-size: 10px; letter-spacing: 0.2em; color: var(--danger); text-shadow: 0 0 8px #ff6b8a55; }
.ov-title { font-size: 16px; letter-spacing: 0.1em; color: var(--neon); text-shadow: 0 0 10px #4dffda55; }
.ov-sub { font-size: 11px; color: var(--neon-dim); margin-bottom: 4px; }
.ov-field { display: flex; flex-direction: column; gap: 5px; }
.ov-label { font-size: 9px; letter-spacing: 0.14em; color: var(--neon-dim); text-transform: uppercase; }
.ov-input {
    background: var(--bg); border: 1px solid var(--line); border-radius: 5px;
    color: var(--text); font-family: inherit; font-size: 14px; padding: 9px 12px; outline: none;
}
.ov-input:focus { border-color: var(--neon); box-shadow: 0 0 8px #4dffda22; }
.ov-input:disabled { opacity: 0.5; }
.ov-btn {
    background: #0d2a3f; border: 1px solid #4dffda66; border-radius: 5px;
    color: var(--neon); font-family: inherit; font-size: 12px; letter-spacing: 0.1em;
    padding: 10px; cursor: pointer; transition: all 0.15s;
}
.ov-btn:hover:not(:disabled) { background: #0d3a3a; box-shadow: 0 0 12px #4dffda33; }
.ov-btn:disabled { opacity: 0.5; cursor: default; }
.ov-btn.danger { background: #2a0d18; border-color: #ff6b8a55; color: var(--danger); }
.ov-btn.danger:hover { box-shadow: 0 0 12px #ff6b8a33; }
.ov-status { font-size: 11px; min-height: 14px; color: var(--neon-dim); }
.ov-status.busy { color: var(--neon); animation: pulse 1.2s infinite; }
.ov-status.error { color: var(--danger); }

.ov-head { display: flex; align-items: center; margin-bottom: 16px; }
.ov-close {
    margin-left: auto; background: transparent; border: none; color: var(--neon-dim);
    cursor: pointer; display: flex; padding: 2px;
}
.ov-close:hover { color: var(--neon); }
.ov-close svg { width: 16px; height: 16px; }
.ov-body { display: flex; flex-direction: column; gap: 14px; }
.ov-slider-row { display: flex; align-items: center; gap: 10px; }
.ov-slider-row .ov-label { flex: 0 0 110px; text-transform: none; font-size: 11px; }
/* min-width:0 lets the range shrink below its intrinsic size; without it the
   slider pushes the value text out of the card (e.g. the Frame size row) */
.ov-range { flex: 1; min-width: 0; }
.ov-out { flex: 0 0 64px; text-align: right; font-size: 11px; color: var(--text-soft); }
.ov-hint { font-size: 10px; color: #4a6a80; line-height: 1.5; }
.ov-profile { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.ov-profile-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-profile-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--bg);
    color: var(--neon-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: 14px; transition: all 0.15s;
}
.ov-profile-btn svg { width: 26px; height: 26px; }
.ov-profile-btn:hover { border-color: #4dffda44; color: var(--neon); }
.ov-profile-btn.active {
    border-color: var(--neon); color: var(--neon);
    background: #0a1e35; box-shadow: 0 0 8px #4dffda33;
}
.ov-danger-zone {
    border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px;
    display: flex; flex-direction: column; gap: 8px;
}

/* legal overlay (Impressum + Datenschutz) */
.ov-card.legal { width: 560px; display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.legal-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.legal-tab {
    background: transparent; border: 1px solid var(--line); border-radius: 5px;
    color: var(--neon-dim); font-family: inherit; font-size: 11px; letter-spacing: 0.08em;
    padding: 6px 14px; cursor: pointer; transition: all 0.15s;
}
.legal-tab:hover { color: var(--neon); border-color: #4dffda44; }
.legal-tab.active { color: var(--neon); border-color: var(--neon); background: #0a1e35; }
.legal-body { overflow-y: auto; gap: 0; padding-right: 6px; }
.legal-block { margin-bottom: 16px; }
.legal-block:last-child { margin-bottom: 0; }
.legal-h {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--neon); margin-bottom: 8px;
}
.legal-p { font-size: 12px; line-height: 1.6; color: var(--text-soft); margin: 0 0 6px; }
.legal-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.legal-row { display: flex; gap: 10px; font-size: 12px; }
.legal-key { flex: 0 0 90px; color: var(--neon-dim); letter-spacing: 0.04em; }
.legal-val { color: var(--text-soft); word-break: break-word; }
.legal-list { margin: 0; padding-left: 18px; }
.legal-list li { font-size: 12px; line-height: 1.55; color: var(--text-soft); margin-bottom: 6px; }

/* ===== mobile (light pass) ===== */
@media (max-width: 720px) {
    body { overflow: auto; }
    .ts-root {
        height: auto; min-height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: 44px auto 1fr;
    }
    .topbar { padding: 0 10px; gap: 10px; }
    .topbar .version { display: none; }
    .user-self span { display: none; }
    .sidebar {
        grid-row: 2; grid-column: 1;
        border-right: none; border-bottom: 1px solid var(--line);
        max-height: 38vh;
    }
    .main { grid-row: 3; grid-column: 1; }
    .user-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); padding: 12px; }
    .chat-panel { min-height: 160px; }
    .bottom-bar { flex-wrap: wrap; gap: 10px; }
    .bb-meters { margin-left: 0; }
}