/* =========================================================================
   aittsvoice / konusma - Premium Design CSS stylesheet
   Color Tokens, Glassmorphism, Micro-Animations & Responsive layouts
   ========================================================================= */

:root {
    --bg-primary: #313338;       /* Discord Message Area */
    --bg-secondary: #2b2d31;     /* Discord Sidebar */
    --bg-tertiary: #1e1f22;      /* Discord Server List & Channels */
    --bg-darker: #111214;        /* Discord User Footer */
    --accent-blue: #5865f2;      /* Discord Blurple */
    --accent-blue-hover: #4752c4;
    --accent-green: #23a55a;     /* Discord Active / Speaking Status */
    --accent-green-glow: rgba(35, 165, 90, 0.45);
    --accent-red: #f23f43;       /* Discord DND / Danger */
    --accent-red-hover: #da373c;
    --accent-yellow: #f0b232;    /* Host / Crown color */
    --text-primary: #f2f3f5;
    --text-secondary: #b5bac1;
    --text-muted: #949ba4;
    --border-light: rgba(255, 255, 255, 0.06);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-round: 50%;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --font-stack: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 1. BASE STYLES */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-stack);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
}

input, button {
    font-family: inherit;
}

.hidden {
    display: none !important;
}

/* 2. ENTRANCE MODAL STYLES (Glassmorphic Glow) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 18, 20, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-card {
    background: linear-gradient(135deg, #2b2d31 0%, #1e1f22 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    width: 440px;
    max-width: 90%;
    padding: 40px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    animation: zoomIn var(--transition-normal);
}

.modal-header {
    text-align: center;
    margin-bottom: 30px;
}

.logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.logo-icon {
    font-size: 2.2rem;
    color: var(--accent-blue);
    animation: float 3s ease-in-out infinite;
}

.logo-area h2 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.logo-area h2 span {
    color: var(--accent-blue);
    font-weight: 300;
}

.modal-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.input-group {
    margin-bottom: 24px;
}

.input-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper i {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.input-wrapper input {
    width: 100%;
    height: 48px;
    background-color: var(--bg-darker);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: 0 16px 0 46px;
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
    transition: var(--transition-fast);
}

.input-wrapper input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.25);
}

.input-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px;
    height: 44px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: var(--transition-fast);
}

.btn-primary {
    background-color: var(--accent-blue);
    color: var(--text-primary);
}

.btn-primary:hover {
    background-color: var(--accent-blue-hover);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.btn-icon-only {
    padding: 0;
    width: 40px;
    height: 40px;
}

.btn-block {
    display: flex;
    width: 100%;
    height: 48px;
}

/* 3. APPLICATION GRID LAYOUT */
.app-layout {
    display: flex;
    width: 100vw;
    height: 100vh;
}

/* SIDEBAR STYLES */
.sidebar {
    width: 320px;
    min-width: 320px;
    background-color: var(--bg-secondary);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sidebar-header {
    height: 64px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
}

.room-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80%;
}

.room-badge i {
    color: var(--text-muted);
}

.channel-section {
    padding: 20px 8px 10px;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 0 8px 8px;
}

.online-indicator {
    color: var(--accent-green);
    display: flex;
    align-items: center;
    gap: 4px;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent-green);
    border-radius: var(--radius-round);
    display: inline-block;
    animation: pulse 1.8s infinite;
}

.voice-channel-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition-fast);
}

.voice-channel-item.active {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.voice-channel-item:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

/* USERS SIDEBAR CONTAINER */
.users-list-section {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
}

.users-sidebar-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.sidebar-user-card:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.sidebar-user-left {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    min-width: 0;
    flex: 1;
}

.sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    background-color: var(--accent-blue);
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-fast);
    box-shadow: 0 0 0 0px var(--accent-green);
}

.sidebar-avatar.speaking {
    box-shadow: 0 0 0 2px var(--accent-green);
    animation: speaking-glow 1.5s infinite alternate;
}

.sidebar-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-card.speaking .sidebar-name {
    color: var(--accent-green) !important;
    font-weight: 700;
    text-shadow: 0 0 8px var(--accent-green-glow);
}

.peer-card.speaking .peer-name {
    color: var(--accent-green) !important;
    font-weight: 700;
    text-shadow: 0 0 8px var(--accent-green-glow);
}

.sidebar-user-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.crown-icon {
    color: var(--accent-yellow);
    font-size: 0.8rem;
    animation: crown-glow 2s infinite alternate;
}

.mute-indicator-icon {
    color: var(--accent-red);
    font-size: 0.8rem;
}

.speaking-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-green);
    border-radius: var(--radius-round);
    box-shadow: 0 0 8px var(--accent-green);
}

/* SIDEBAR MY PROFILE FOOTER */
.profile-footer {
    height: 72px;
    background-color: var(--bg-darker);
    padding: 0 8px 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-round);
    background-color: #3b4252;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-details {
    overflow: hidden;
    min-width: 0;
    flex: 1;
}

.user-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

.user-status {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.status-green {
    color: var(--accent-green);
    font-size: 0.55rem;
}

.profile-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn-action-icon {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.btn-action-icon:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.btn-action-icon.active {
    color: var(--accent-red);
}

.btn-action-icon.danger:hover {
    background-color: var(--accent-red);
    color: var(--text-primary);
}

/* MAIN CONTENT WINDOW */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    overflow-y: auto;
    gap: 24px;
}

/* PEER VOICE CARDS GRID */
.grid-section {
    flex: 1;
    min-height: 250px;
    display: flex;
}

.voice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    width: 100%;
    align-content: start;
}

.peer-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: var(--transition-normal);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.peer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    border-color: rgba(255, 255, 255, 0.1);
}

.peer-card.speaking {
    border-color: var(--accent-green);
    box-shadow: 0 0 15px var(--accent-green-glow);
}

.peer-avatar-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.peer-grid-avatar {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-round);
    background-color: var(--accent-blue);
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: var(--transition-fast);
}

.peer-card.speaking .peer-grid-avatar {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px var(--accent-green);
}

.peer-card-crown {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background-color: var(--bg-darker);
    border-radius: var(--radius-round);
    border: 1px solid var(--accent-yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.peer-name {
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.peer-card.speaking .peer-name {
    color: var(--text-primary);
}

.peer-card-status {
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.peer-card-status.muted i {
    color: var(--accent-red);
}

.peer-card-status.speaking {
    color: var(--accent-green);
}

/* YOUTUBE SYNC CARD */
.youtube-sync-section {
    width: 100%;
    margin-top: auto;
}

.sync-card {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(43,45,49,0.8) 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sync-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.yt-red-icon {
    color: #ff0000;
    font-size: 1.8rem;
}

.sync-header h3 {
    font-size: 1.15rem;
    font-weight: 600;
}

.host-badge {
    background-color: rgba(240, 178, 50, 0.1);
    color: var(--accent-yellow);
    border: 1px solid rgba(240, 178, 50, 0.3);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-bar {
    display: flex;
    gap: 12px;
}

.search-bar input {
    flex: 1;
    height: 42px;
    background-color: var(--bg-darker);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 0 16px;
    outline: none;
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.search-bar input:focus {
    border-color: var(--accent-blue);
}

/* YOUTUBE IFRAME container */
.youtube-player-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 380px;
    background-color: var(--bg-darker);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.03);
}

.player-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}

.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
}

.placeholder-content i {
    font-size: 3rem;
    color: rgba(255,255,255,0.07);
    margin-bottom: 8px;
}

.placeholder-content p {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.host-notice {
    font-size: 0.8rem;
    max-width: 320px;
    line-height: 1.4;
}

.youtube-player-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#yt-player-wrapper {
    width: 100%;
    height: 100%;
}


/* CUSTOM SYNCED PLAYER CONTROLS */
.custom-player-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--bg-darker);
    padding: 12px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.player-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-player {
    width: 36px;
    height: 36px;
    background-color: rgba(255,255,255,0.05);
    border: none;
    border-radius: var(--radius-round);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.btn-player:hover:not(:disabled) {
    background-color: var(--accent-blue);
    transform: scale(1.05);
}

.btn-player:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.time-display {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scrub-slider-container {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Dynamic range input styling */
.scrub-slider-container input[type=range] {
    width: 100%;
    -webkit-appearance: none;
    background: transparent;
}

.scrub-slider-container input[type=range]:focus {
    outline: none;
}

.scrub-slider-container input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    transition: var(--transition-fast);
}

.scrub-slider-container input[type=range]:hover::-webkit-slider-runnable-track {
    background: rgba(255,255,255,0.18);
}

.scrub-slider-container input[type=range]::-webkit-slider-thumb {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--accent-blue);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -3.5px;
    transition: var(--transition-fast);
}

.scrub-slider-container input[type=range]:disabled::-webkit-slider-thumb {
    background: var(--text-muted);
    cursor: not-allowed;
}

.scrub-slider-container input[type=range]:disabled::-webkit-slider-runnable-track {
    background: rgba(255,255,255,0.04);
    cursor: not-allowed;
}

/* Local YouTube Volume Slider */
.yt-volume-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

.yt-volume-container input[type=range] {
    width: 70px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    accent-color: var(--accent-blue);
    -webkit-appearance: none;
    transition: var(--transition-fast);
}

.yt-volume-container input[type=range]:focus {
    outline: none;
}

.yt-volume-container input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: transparent;
}

.yt-volume-container input[type=range]::-webkit-slider-thumb {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: var(--accent-blue);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -3px;
    transition: var(--transition-fast);
}

.yt-volume-container input[type=range]:hover {
    background: rgba(255,255,255,0.25);
}

/* 4. PUSH-TO-TALK FLOATING BAR (Discord overlay style) */
.ptt-floating-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-darker);
    border: 1px solid var(--accent-blue);
    box-shadow: 0 10px 25px rgba(88, 101, 242, 0.35);
    border-radius: 50px;
    padding: 8px 16px;
    z-index: 99;
    animation: slideUp var(--transition-normal);
}

.btn-ptt-trigger {
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 40px;
    height: 48px;
    padding: 0 32px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.btn-ptt-trigger:hover {
    background-color: var(--accent-blue-hover);
}

.btn-ptt-trigger:active, .btn-ptt-trigger.speaking-active {
    background-color: var(--accent-green) !important;
    box-shadow: 0 0 15px var(--accent-green-glow);
    transform: scale(0.98);
}

/* 5. DYNAMIC ALERTS / TOAST MESSAGES */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

.toast {
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 12px 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    font-size: 0.9rem;
    font-weight: 500;
    min-width: 240px;
    max-width: 320px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideLeft var(--transition-normal);
    transition: var(--transition-normal);
}

.toast.success { border-left-color: var(--accent-green); }
.toast.danger { border-left-color: var(--accent-red); }
.toast.info { border-left-color: var(--accent-blue); }

/* KEYFRAMES FOR BEAUTIFUL ANIMATIONS */
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0px); }
}

@keyframes pulse {
    0% { transform: scale(0.9); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.4; }
}

@keyframes speaking-glow {
    from { box-shadow: 0 0 2px var(--accent-green), 0 0 0px var(--accent-green-glow); }
    to { box-shadow: 0 0 4px var(--accent-green), 0 0 8px var(--accent-green-glow); }
}

@keyframes crown-glow {
    from { filter: drop-shadow(0 0 1px var(--accent-yellow)); }
    to { filter: drop-shadow(0 0 4px rgba(240, 178, 50, 0.8)); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes slideLeft {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 900px) {
    .app-layout {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        height: auto;
        max-height: 280px;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
    .sidebar-header {
        height: 54px;
    }
    .profile-footer {
        height: 60px;
    }
    .main-content {
        padding: 16px;
    }
    .ptt-floating-bar {
        bottom: 16px;
    }
}

/* =========================================================================
   6. RIGHT CHAT SIDEBAR STYLES (Discord Text Channel Style)
   ========================================================================= */
.chat-sidebar {
    width: 340px;
    min-width: 340px;
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-header {
    height: 64px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.chat-header i {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.chat-messages-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Custom Scrollbar for Chat & Sidebar */
.chat-messages-body::-webkit-scrollbar,
.users-list-section::-webkit-scrollbar {
    width: 6px;
}

.chat-messages-body::-webkit-scrollbar-track,
.users-list-section::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages-body::-webkit-scrollbar-thumb,
.users-list-section::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Chat Message layout */
.chat-message-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    animation: zoomIn var(--transition-fast);
}

.chat-msg-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.chat-msg-author {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-msg-time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.chat-msg-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
    background-color: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-radius: 0 12px 12px 12px;
    width: fit-content;
    max-width: 100%;
}

.chat-message-row.self-message .chat-msg-text {
    background-color: rgba(88, 101, 242, 0.15);
    border: 1px solid rgba(88, 101, 242, 0.2);
    border-radius: 12px 0 12px 12px;
    align-self: flex-end;
}

.chat-message-row.self-message {
    align-items: flex-end;
}

.chat-system-message {
    font-size: 0.78rem;
    color: var(--text-muted);
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    text-align: center;
    width: 100%;
    margin: 4px 0;
}

.chat-footer {
    padding: 16px;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
}

.chat-input-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--bg-darker);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 2px 6px 2px 12px;
    transition: var(--transition-fast);
}

.chat-input-wrapper:focus-within {
    border-color: var(--accent-blue);
}

.chat-input-wrapper input {
    flex: 1;
    height: 38px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.btn-chat-send {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-chat-send:hover {
    color: var(--accent-blue);
    transform: scale(1.05);
}

/* =========================================================================
   7. VOICE SETTINGS MODAL & SELECT STYLES
   ========================================================================= */
.settings-card {
    width: 480px !important;
}

.select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.select-wrapper i {
    position: absolute;
    left: 16px;
    color: var(--text-muted);
    font-size: 1.1rem;
    pointer-events: none;
}

.select-wrapper select {
    width: 100%;
    height: 48px;
    background-color: var(--bg-darker);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: 0 40px 0 46px;
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    cursor: pointer;
    transition: var(--transition-fast);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select-wrapper::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 18px;
    color: var(--text-muted);
    pointer-events: none;
}

.select-wrapper select:focus {
    border-color: var(--accent-blue);
}

/* Hotkey binder custom controls */
.hotkey-wrapper {
    margin-top: 4px;
}

#btn-bind-hotkey {
    background-color: var(--bg-darker);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    height: 48px;
    font-weight: 600;
}

#btn-bind-hotkey:hover {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--accent-blue);
}

#btn-bind-hotkey.binding-active {
    border-color: var(--accent-yellow);
    color: var(--accent-yellow);
    animation: pulse 1.5s infinite;
}

.hotkey-badge {
    background-color: var(--accent-blue);
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 6px;
    box-shadow: 0 2px 6px rgba(88, 101, 242, 0.3);
}

.red-text {
    color: var(--accent-red) !important;
}

.settings-modal-footer {
    margin-top: 32px;
}

/* RESPONSIVE LAYOUT ADDITIONS FOR CHAT */
@media (max-width: 1200px) {
    .chat-sidebar {
        width: 280px;
        min-width: 280px;
    }
}

@media (max-width: 900px) {
    .app-layout {
        flex-direction: column;
    }
    .chat-sidebar {
        width: 100%;
        min-width: 100%;
        height: auto;
        max-height: 300px;
        border-left: none;
        border-top: 1px solid var(--border-light);
    }
}

/* =========================================================================
   8. DYNAMIC ROOM LIST STYLING (Sidebar Voice Channels)
   ========================================================================= */
.btn-create-room-sidebar {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.btn-create-room-sidebar:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.08);
}

.rooms-sidebar-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.room-channel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition-fast);
}

.room-channel-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

.room-channel-item.active {
    background-color: rgba(88, 101, 242, 0.15);
    color: var(--text-primary);
    font-weight: 600;
}

.room-channel-left {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.room-channel-left i {
    color: var(--text-muted);
    transition: var(--transition-fast);
}

.room-channel-item.active .room-channel-left i {
    color: var(--accent-blue);
}

.room-user-count-badge {
    background-color: var(--bg-darker);
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.room-channel-item.active .room-user-count-badge {
    background-color: var(--accent-blue);
    color: white;
}

/* =========================================================================
   9. LOCAL USER PREMIUM INTERFACE STYLING
   ========================================================================= */
.local-avatar-style {
    background: linear-gradient(135deg, #8a2be2 0%, #4a00e0 100%) !important;
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4) !important;
}

.peer-card.local-card {
    border-color: rgba(138, 43, 226, 0.2);
}

.peer-card.local-card.speaking {
    border-color: var(--accent-green);
    box-shadow: 0 0 15px var(--accent-green-glow);
}

#side-avatar-local {
    background: linear-gradient(135deg, #8a2be2 0%, #4a00e0 100%) !important;
}

#side-avatar-local.speaking {
    box-shadow: 0 0 0 2px var(--accent-green);
    animation: speaking-glow 1.5s infinite alternate;
}

/* =========================================================================
   10. PLAYLIST QUEUE STYLES
   ========================================================================= */
.queue-container {
    margin-top: 16px;
    background-color: var(--bg-darker);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}

.queue-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.queue-title i {
    color: var(--accent-blue);
}

.btn-clear-queue {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: var(--transition-fast);
}

.btn-clear-queue:hover {
    color: var(--accent-red);
}

.queue-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Custom Scrollbar for Queue */
.queue-list::-webkit-scrollbar {
    width: 4px;
}
.queue-list::-webkit-scrollbar-track {
    background: transparent;
}
.queue-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.queue-empty-message {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
}

.queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    transition: var(--transition-fast);
}

.queue-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

.queue-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    flex: 1;
}

.queue-item-thumb {
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.queue-item-info {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.queue-item-title {
    font-size: 0.85rem;
    font-weight: 550;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.queue-item-by {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.queue-item-right {
    display: flex;
    align-items: center;
    margin-left: 12px;
}

.btn-remove-queue-item {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.btn-remove-queue-item:hover {
    color: var(--accent-red);
    background-color: rgba(242, 63, 67, 0.1);
}

/* =========================================================================
   11. VIDEO STREAMING & SCREEN SHARING PREMIUM STYLES
   ========================================================================= */

/* Action button glowing status colors */
.btn-action-icon.active-green {
    color: var(--accent-green) !important;
    filter: drop-shadow(0 0 4px var(--accent-green));
}

.btn-action-icon.active-blue {
    color: var(--accent-blue) !important;
    filter: drop-shadow(0 0 4px var(--accent-blue));
}

/* Voice Grid layout transition when streams are loaded */
.peer-card.has-video, .peer-card.has-screen-share {
    padding: 0 !important;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    background-color: #0c0f1d !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Screen sharing triggers a massive block representation, similar to Discord */
.peer-card.has-screen-share {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 340px;
    border-color: rgba(88, 101, 242, 0.4) !important;
}

@media (max-width: 768px) {
    .peer-card.has-screen-share {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 200px;
    }
}

/* Absolute containers for stream overlays */
.peer-video-container, .peer-screen-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #070913;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.peer-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Webcams fill card aspect ratio perfectly */
}

.peer-screen-video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Screen shares fit perfectly inside to prevent text clipping */
    background-color: #020308;
}

/* Adjust labels on top of stream feeds */
.peer-card.has-video .peer-avatar-wrapper,
.peer-card.has-screen-share .peer-avatar-wrapper {
    display: none !important; /* Hide avatar when feed is active */
}

.peer-card.has-video .peer-name,
.peer-card.has-screen-share .peer-name {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    background-color: rgba(10, 12, 22, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.peer-card.has-video .peer-card-status,
.peer-card.has-screen-share .peer-card-status {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background-color: rgba(10, 12, 22, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    margin: 0;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Glowing screen share tag banner overlay */
.screen-share-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background-color: rgba(88, 101, 242, 0.85);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
    color: white;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* MICROPHONE TESTING BUTTON GLOOMY/GLOWING ACTIVE STATE */
#btn-test-mic.mic-testing-active {
    background-color: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    color: white !important;
    box-shadow: 0 0 12px var(--accent-green-glow) !important;
    animation: speaking-glow 1.5s infinite alternate;
}

/* PEER LOCAL VOLUME SLIDER */
.peer-volume-control {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    width: 90%;
    max-width: 170px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-normal);
    z-index: 2;
}

.peer-volume-control:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
}

.peer-volume-control i {
    font-size: 0.82rem;
    color: var(--text-muted);
    min-width: 16px;
    text-align: center;
    transition: var(--transition-fast);
}

.peer-volume-control i:hover {
    color: var(--text-primary);
}

.peer-volume-slider {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    cursor: pointer;
    accent-color: var(--accent-blue);
    outline: none;
    border: none;
}

.peer-volume-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 34px;
    text-align: right;
}

/* Adjust local volume control inside active video modes */
.peer-card.has-video .peer-volume-control,
.peer-card.has-screen-share .peer-volume-control {
    position: absolute;
    bottom: 12px;
    right: 12px;
    margin: 0;
    z-index: 2;
    background-color: rgba(10, 12, 22, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 10px;
    width: auto;
    max-width: 140px;
}

/* Animation Overlay Canvas */
.animation-canvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999999;
    display: block;
}

/* Tactical Strike Toolbar above Chat Input */
.tactical-strike-toolbar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 8px;
}

.tactical-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    gap: 5px;
}

.tactical-title i {
    color: var(--accent-red);
}

.tactical-actions {
    display: flex;
    gap: 8px;
}

.btn-strike {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    outline: none;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-strike-nuke {
    background: linear-gradient(135deg, #e63946, #b70919);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-strike-nuke:hover {
    background: linear-gradient(135deg, #ff4d5a, #d61c2b);
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(230, 57, 70, 0.5);
}

.btn-strike-nuke:active {
    transform: translateY(1px);
}

.btn-strike-artillery {
    background: linear-gradient(135deg, #f5a623, #d07b00);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-strike-artillery:hover {
    background: linear-gradient(135deg, #ffb83d, #e68d00);
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.5);
}

.btn-strike-artillery:active {
    transform: translateY(1px);
}

/* Screen Shaking Effect */
.screen-shake-nuke {
    animation: nuke-shake-anim 6.5s cubic-bezier(.36,.07,.19,.97) both;
}

.screen-shake-artillery {
    animation: artillery-shake-anim 0.25s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes nuke-shake-anim {
    0% { transform: translate(0, 0) rotate(0deg); }
    1% { transform: translate(-8px, 6px) rotate(-1.5deg); }
    2% { transform: translate(7px, -7px) rotate(1deg); }
    3% { transform: translate(-9px, 8px) rotate(-2deg); }
    4% { transform: translate(8px, -6px) rotate(1.5deg); }
    5% { transform: translate(-6px, 5px) rotate(-1deg); }
    6% { transform: translate(6px, -5px) rotate(1deg); }
    8% { transform: translate(-4px, 4px) rotate(-0.5deg); }
    10% { transform: translate(4px, -4px) rotate(0.5deg); }
    12% { transform: translate(-3px, 3px) rotate(0deg); }
    14% { transform: translate(3px, -3px) rotate(0deg); }
    16% { transform: translate(-2px, 2px) rotate(0deg); }
    18% { transform: translate(2px, -2px) rotate(0deg); }
    20% { transform: translate(-1px, 1px) rotate(0deg); }
    22% { transform: translate(1px, -1px) rotate(0deg); }
    25% { transform: translate(-10px, 9px) rotate(-2deg); } /* detonation rumble starts */
    27% { transform: translate(12px, -11px) rotate(2deg); }
    29% { transform: translate(-15px, 13px) rotate(-3deg); }
    31% { transform: translate(14px, -14px) rotate(2.5deg); }
    33% { transform: translate(-12px, 11px) rotate(-2deg); }
    35% { transform: translate(10px, -9px) rotate(1.5deg); }
    38% { transform: translate(-8px, 7px) rotate(-1deg); }
    41% { transform: translate(7px, -6px) rotate(1deg); }
    45% { transform: translate(-5px, 5px) rotate(-0.5deg); }
    50% { transform: translate(4px, -4px) rotate(0.5deg); }
    55% { transform: translate(-3px, 3px) rotate(0deg); }
    60% { transform: translate(3px, -3px) rotate(0deg); }
    70% { transform: translate(-2px, 2px) rotate(0deg); }
    80% { transform: translate(1px, -1px) rotate(0deg); }
    90% { transform: translate(-0.5px, 0.5px) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes artillery-shake-anim {
    10%, 90% { transform: translate(-3px, 2px) rotate(-0.5deg); }
    20%, 80% { transform: translate(4px, -3px) rotate(0.5deg); }
    30%, 50%, 70% { transform: translate(-5px, 4px) rotate(-1deg); }
    40%, 60% { transform: translate(5px, -4px) rotate(1deg); }
}

/* =========================================================================
   16. SQUAD LOBBY HYPE ("HAZIR OL!") SYSTEM STYLES
   ========================================================================= */

.lobby-hype-trigger-section {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: center;
}

.btn-lobby-hype {
    width: 100%;
    height: 42px;
    background: linear-gradient(135deg, #f0b232 0%, #f23f43 100%);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(242, 63, 67, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    outline: none;
}

.btn-lobby-hype:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(242, 63, 67, 0.55), 0 0 10px rgba(240, 178, 50, 0.3);
    background: linear-gradient(135deg, #f3be4c 0%, #f45054 100%);
}

.btn-lobby-hype:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(242, 63, 67, 0.3);
}

.btn-lobby-hype i {
    font-size: 1.1rem;
}

.fa-spin-slow {
    animation: fa-spin 4s linear infinite;
}

/* Red Alert Fullscreen Background Pulse */
.modal-overlay.red-alert-active {
    animation: red-alert-bg-pulse 2.2s infinite ease-in-out;
    background: rgba(17, 18, 20, 0.96);
    z-index: 1100;
}

@keyframes red-alert-bg-pulse {
    0% { background: rgba(17, 18, 20, 0.96); }
    50% { background: rgba(85, 12, 16, 0.97); }
    100% { background: rgba(17, 18, 20, 0.96); }
}

/* Ready Check Portal Card */
.ready-check-card {
    background: rgba(22, 22, 26, 0.82);
    border: 2px solid rgba(242, 63, 67, 0.4);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 480px;
    padding: 0 0 24px 0;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 35px rgba(242, 63, 67, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    animation: alarm-shake-anim 0.6s cubic-bezier(.36,.07,.19,.97) both;
    position: relative;
}

/* Hazard Stripe Decoration */
.ready-hazard-stripe {
    height: 6px;
    background: repeating-linear-gradient(
        -45deg,
        #f0b232,
        #f0b232 10px,
        #111214 10px,
        #111214 20px
    );
    width: 100%;
}

.ready-check-header {
    text-align: center;
    padding: 24px 24px 16px 24px;
}

.ready-check-header h2 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin-top: 8px;
    text-shadow: 0 0 12px rgba(242, 63, 67, 0.4);
}

.ready-check-sub {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

.ready-check-sub strong {
    color: #f0b232;
}

.alarm-blink-icon {
    font-size: 2.5rem;
    color: #f23f43;
    animation: alarm-blink 1.1s infinite steps(1);
    text-shadow: 0 0 15px rgba(242, 63, 67, 0.7);
}

@keyframes alarm-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.08); }
}

@keyframes alarm-shake-anim {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Peers checklist inside modal */
.ready-peers-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 24px;
    max-height: 240px;
    overflow-y: auto;
}

.ready-peer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.ready-peer-item.peer-is-ready {
    background: rgba(35, 165, 90, 0.08);
    border: 1px solid rgba(35, 165, 90, 0.3);
    box-shadow: 0 0 12px rgba(35, 165, 90, 0.1);
}

.ready-peer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ready-peer-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-round);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
}

.ready-peer-item.peer-is-ready .ready-peer-avatar {
    border-color: var(--accent-green);
    background: rgba(35, 165, 90, 0.2);
}

.ready-peer-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ready-peer-status {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ready-peer-status.status-pending {
    background: rgba(240, 178, 50, 0.1);
    color: #f0b232;
    border: 1px solid rgba(240, 178, 50, 0.25);
    animation: status-pulse-amber 1.5s infinite steps(1);
}

.ready-peer-status.status-confirmed {
    background: rgba(35, 165, 90, 0.15);
    color: #23d160;
    border: 1px solid rgba(35, 165, 90, 0.3);
}

@keyframes status-pulse-amber {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.ready-check-status-text {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 12px 0 16px 0;
}

.ready-check-status-text span {
    color: #f0b232;
    font-weight: 700;
}

/* Actions */
.ready-check-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 24px;
}

.btn-ready-confirm-pulse {
    background: linear-gradient(135deg, #23a55a 0%, #1a7a42 100%);
    color: var(--text-primary);
    border: none;
    border-radius: var(--radius-md);
    height: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(35, 165, 90, 0.35);
    transition: all 0.25s ease;
    outline: none;
    animation: ready-confirm-pulse-glowing 2s infinite ease-in-out;
}

.btn-ready-confirm-pulse:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(35, 165, 90, 0.55), 0 0 15px rgba(35, 165, 90, 0.3);
    background: linear-gradient(135deg, #28bd67 0%, #1e8d4c 100%);
}

.btn-ready-confirm-pulse:active {
    transform: scale(0.99);
}

@keyframes ready-confirm-pulse-glowing {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(35, 165, 90, 0.35); }
    50% { transform: scale(1.018); box-shadow: 0 4px 25px rgba(35, 165, 90, 0.65), 0 0 15px rgba(35, 165, 90, 0.2); }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(35, 165, 90, 0.35); }
}

.btn-ready-cancel-btn {
    height: 38px;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
}

.btn-ready-cancel-btn:hover {
    background: rgba(242, 63, 67, 0.1);
    color: var(--accent-red);
    border-color: rgba(242, 63, 67, 0.25);
}

/* Voice Activity Sensitivity Settings & Visualizer */
.voice-activity-bar-container {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    background: rgba(0,0,0,0.3) !important;
}

#voice-input-fill {
    transition: width 0.08s ease, background-color 0.2s ease;
    box-shadow: 0 0 10px rgba(35, 165, 90, 0.4);
}

#voice-threshold-marker {
    box-shadow: inset -2px 0 6px rgba(88, 101, 242, 0.3);
}

.premium-badge-text {
    background: rgba(88, 101, 242, 0.15);
    border: 1px solid rgba(88, 101, 242, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}