/* ============================================================
   SHADES//TTS — CYBERPUNK 2077 NEURAL INTERFACE
   ============================================================ */

:root {
    /* Cyberpunk 2077 Palette */
    --cp-yellow: #FCE94F;
    --cp-yellow-dim: #d4b82e;
    --cp-cyan: #00f0ff;
    --cp-magenta: #ff2d6f;
    --cp-red: #ff3b3b;
    --cp-green: #39FF14;
    --cp-bg-deep: #0a0a0c;
    --cp-bg: #0e0e12;
    --cp-bg-panel: #111116;
    --cp-bg-card: #16161c;
    --cp-border: #2a2a35;
    --cp-border-active: #FCE94F33;
    --cp-text: #c8c8d0;
    --cp-text-dim: #6a6a78;
    --cp-text-bright: #f0f0f5;

    /* Fonts */
    --font-display: 'Orbitron', monospace;
    --font-body: 'Rajdhani', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;

    /* Ambient Glow System */
    --cp-glow-yellow: rgba(252, 233, 79, 0.15);
    --cp-glow-cyan: rgba(0, 240, 255, 0.12);
    --cp-glow-magenta: rgba(255, 45, 111, 0.10);
    --cp-neon-yellow: 0 0 20px rgba(252, 233, 79, 0.25), 0 0 60px rgba(252, 233, 79, 0.10);
    --cp-neon-cyan: 0 0 20px rgba(0, 240, 255, 0.25), 0 0 60px rgba(0, 240, 255, 0.10);
    --cp-neon-magenta: 0 0 20px rgba(255, 45, 111, 0.25), 0 0 60px rgba(255, 45, 111, 0.10);

    /* CP2077 Extended Palette */
    --cp-orange: #FF6B00;
    --cp-orange-dim: rgba(255, 107, 0, 0.12);
    --cp-danger: #FF003C;
    --cp-danger-dim: rgba(255, 0, 60, 0.10);
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

::selection {
    background: var(--cp-yellow);
    color: var(--cp-bg-deep);
}

body {
    font-family: var(--font-body);
    background: var(--cp-bg-deep);
    color: var(--cp-text);
    overflow: hidden;
    height: 100vh;
}

/* ===== SCANLINES ===== */
.scanlines {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.06) 2px,
            rgba(0, 0, 0, 0.06) 4px);
}

/* ===== NOISE ===== */
.noise-overlay {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    opacity: 0.12;
    background-image: url('images/noise-texture.png');
    background-repeat: repeat;
    background-size: 256px;
    mix-blend-mode: overlay;
    animation: noiseDrift 0.15s steps(1) infinite;
}

@keyframes noiseDrift {
    0% {
        background-position: 0px 0px;
    }

    25% {
        background-position: -8px 4px;
    }

    50% {
        background-position: 6px -3px;
    }

    75% {
        background-position: -4px 8px;
    }

    100% {
        background-position: 2px -6px;
    }
}

/* ===== LAYOUT ===== */
.app-container {
    display: flex;
    height: 100vh;
    position: relative;
    z-index: 1;
}

/* ===== SIDEBAR ===== */
.sidebar {
    width: 320px;
    background:
        linear-gradient(180deg,
            rgba(16, 16, 22, 0.95) 0%,
            rgba(16, 16, 22, 0.88) 50%,
            rgba(16, 16, 22, 0.95) 100%),
        url('images/hud-overlay.png');
    background-size: cover, 180%;
    background-position: center, center 30%;
    border-right: 1px solid var(--cp-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 0;
    position: relative;
}

/* Corner cuts */
.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, transparent 50%, var(--cp-bg-deep) 50%);
    z-index: 2;
}

/* Top energy line */
.sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--cp-yellow) 0%, rgba(252, 233, 79, 0.4) 50%, transparent 100%);
    z-index: 3;
    animation: sidebarTopGlow 4s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes sidebarTopGlow {
    0% {
        opacity: 0.4;
    }

    100% {
        opacity: 0.9;
    }
}

/* Brand */
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 20px;
    background: linear-gradient(180deg, rgba(252, 233, 79, 0.06) 0%, transparent 100%);
}

.brand-icon {
    color: var(--cp-yellow);
    flex-shrink: 0;
    position: relative;
}

.brand-icon-svg {
    filter: drop-shadow(0 0 6px rgba(252, 233, 79, 0.4));
    animation: brandIconPulse 4s ease-in-out infinite;
    transition: filter 0.3s;
}

.brand:hover .brand-icon-svg {
    filter: drop-shadow(0 0 14px rgba(252, 233, 79, 0.8)) drop-shadow(0 0 28px rgba(252, 233, 79, 0.3));
}

@keyframes brandIconPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 4px rgba(252, 233, 79, 0.3));
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(252, 233, 79, 0.65)) drop-shadow(0 0 20px rgba(252, 233, 79, 0.2));
    }
}

.brand-text h1 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--cp-text-bright);
    line-height: 1;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
}

.brand-text h1 .accent {
    color: var(--cp-yellow);
}

.brand-sub {
    font-family: var(--font-mono);
    font-size: 8.5px;
    color: var(--cp-orange);
    letter-spacing: 2px;
    opacity: 0.7;
    text-transform: uppercase;
    margin-top: 3px;
}


/* Divider */
.divider-line {
    height: 1px;
    background: linear-gradient(90deg, var(--cp-yellow) 0%, rgba(252, 233, 79, 0.5) 25%, var(--cp-border) 65%, transparent 100%);
    margin: 0 20px;
    opacity: 0.8;
}

/* Login */
.login-section {
    padding: 25px 20px;
    flex: 1;
}

.terminal-text {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--cp-text-dim);
    line-height: 2;
    margin-bottom: 25px;
}

.prompt {
    color: var(--cp-yellow);
}

.btn-connect {
    display: block;
    text-decoration: none;
    margin-top: 10px;
}

.btn-connect-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--cp-yellow);
    color: var(--cp-bg-deep);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    transition: all 0.2s;
}

.btn-connect:hover .btn-connect-inner {
    background: #fff;
    box-shadow: 0 0 30px rgba(252, 233, 79, 0.3);
}

/* User Profile */
.user-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
}

.avatar-frame {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.profile-img {
    width: 48px;
    height: 48px;
    clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    position: relative;
    z-index: 1;
}

.avatar-ring {
    position: absolute;
    inset: -2px;
    border: 1px solid var(--cp-yellow);
    clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    animation: ringPulse 3s ease-in-out infinite;
}

@keyframes ringPulse {

    0%,
    100% {
        border-color: var(--cp-yellow);
        opacity: 1;
    }

    50% {
        border-color: var(--cp-cyan);
        opacity: 0.5;
    }
}

.user-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cp-yellow);
    letter-spacing: 2px;
}

.user-info h2 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--cp-text-bright);
    letter-spacing: 1px;
}

.btn-disconnect {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cp-red);
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.2s;
}

.btn-disconnect:hover {
    color: #ff6666;
}

/* Controls */
.controls {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-cyber {
    position: relative;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid var(--cp-yellow);
    background: transparent;
    color: var(--cp-yellow);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    transition: all 0.15s;
    overflow: hidden;
}

.btn-cyber::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cp-yellow);
    opacity: 0;
    transition: opacity 0.15s;
}

.btn-cyber:hover::before {
    opacity: 0.1;
}

.btn-cyber:hover {
    box-shadow: 0 0 25px rgba(252, 233, 79, 0.22), 0 0 60px rgba(252, 233, 79, 0.09), inset 0 0 20px rgba(252, 233, 79, 0.06);
}

.btn-cyber:active {
    transform: scale(0.97);
    box-shadow: 0 0 8px rgba(252, 233, 79, 0.1), inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

.btn-cyber.secondary {
    border-color: var(--cp-border);
    color: var(--cp-text-dim);
}

.btn-cyber.secondary:hover {
    border-color: var(--cp-cyan);
    color: var(--cp-cyan);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
}

.btn-cyber.connected {
    border-color: var(--cp-red);
    color: var(--cp-red);
}

.btn-cyber-glitch {
    position: relative;
    z-index: 1;
}

/* Stats */
.stats-panel {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
}

.stat-label {
    color: var(--cp-text-dim);
    letter-spacing: 1.5px;
}

.stat-value {
    color: var(--cp-yellow);
    font-size: 22px;
    font-weight: 900;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px rgba(252, 233, 79, 0.35);
    transition: text-shadow 0.3s;
}

.stat-value.read {
    color: var(--cp-green);
}

.stat-value.skip {
    color: var(--cp-red);
}

/* Sidebar Footer */
.sidebar-footer {
    margin-top: auto;
    padding: 15px 20px;
    border-top: 1px solid rgba(42, 42, 53, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.sidebar-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 55%;
    height: 1px;
    background: linear-gradient(90deg, rgba(252, 233, 79, 0.5) 0%, transparent 100%);
    pointer-events: none;
}

.sys-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--cp-cyan);
    letter-spacing: 1px;
}

.version-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--cp-text-dim);
    letter-spacing: 1px;
    background: var(--cp-bg-deep);
    padding: 3px 8px;
    border: 1px solid rgba(42, 42, 53, 0.8);
    animation: versionFlicker 9s ease-in-out infinite;
}

@keyframes versionFlicker {

    0%,
    94%,
    100% {
        color: var(--cp-text-dim);
        border-color: rgba(42, 42, 53, 0.8);
    }

    95% {
        color: var(--cp-cyan);
        border-color: rgba(0, 240, 255, 0.35);
    }

    96% {
        color: var(--cp-text-dim);
        border-color: rgba(42, 42, 53, 0.8);
    }

    98% {
        color: var(--cp-yellow);
        border-color: rgba(252, 233, 79, 0.3);
    }

    99% {
        color: var(--cp-text-dim);
        border-color: rgba(42, 42, 53, 0.8);
    }
}

/* ===== CHAT AREA ===== */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 700px 350px at 100% 0%, rgba(0, 240, 255, 0.035) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 0% 100%, rgba(252, 233, 79, 0.02) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M30 2 L58 17 L58 35 L30 50 L2 35 L2 17 Z' fill='none' stroke='%232a2a35' stroke-width='0.5' opacity='0.35'/%3E%3C/svg%3E"),
        linear-gradient(180deg,
            rgba(10, 10, 12, 0.92) 0%,
            rgba(10, 10, 12, 0.80) 40%,
            rgba(10, 10, 12, 0.88) 100%),
        url('images/night-city-bg.png');
    background-size: auto, auto, 60px 52px, auto, cover;
    background-position: center, center, center, center, center bottom;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
    min-width: 0;
    position: relative;
    overflow-y: auto;
}

.chat-area::-webkit-scrollbar {
    width: 4px;
}

.chat-area::-webkit-scrollbar-track {
    background: transparent;
}

.chat-area::-webkit-scrollbar-thumb {
    background: var(--cp-yellow);
}

/* Gradient line at top */
.chat-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cp-yellow), var(--cp-cyan), var(--cp-magenta), var(--cp-cyan), var(--cp-yellow));
    background-size: 400% 100%;
    animation: gradientFlow 3s linear infinite;
    box-shadow: 0 0 10px rgba(252, 233, 79, 0.4), 0 0 20px rgba(0, 240, 255, 0.2);
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 400% 0%;
    }
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 25px;
    border-bottom: 1px solid var(--cp-border);
    background: rgba(17, 17, 22, 0.8);
    backdrop-filter: blur(10px);
}

.chat-header h3 {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--cp-text-bright);
}

.header-sep {
    color: var(--cp-yellow);
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cp-red);
}

.status-dot.online {
    background: var(--cp-green);
    box-shadow: 0 0 8px var(--cp-green);
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.status-disconnected {
    color: var(--cp-red);
}

.status-connected {
    color: var(--cp-green);
}

/* Chat Logs */
.chat-logs {
    flex: 1;
    overflow-y: auto;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-logs::-webkit-scrollbar {
    width: 4px;
}

.chat-logs::-webkit-scrollbar-track {
    background: transparent;
}

.chat-logs::-webkit-scrollbar-thumb {
    background: var(--cp-yellow);
    border-radius: 0;
}

/* Messages */
.message {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 10px 14px;
    background: var(--cp-bg-card);
    border-left: 2px solid transparent;
    line-height: 1.6;
    animation: msgIn 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    position: relative;
}

@keyframes msgIn {
    0% {
        opacity: 0;
        transform: translateX(-10px);
    }

    60% {
        opacity: 1;
        transform: translateX(3px);
    }

    80% {
        transform: translateX(-1px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.message .msg-prefix {
    color: var(--cp-cyan);
    margin-right: 6px;
}

.message .hl {
    color: var(--cp-yellow);
}

.message.speaking {
    border-left-color: var(--cp-cyan);
    border-left-width: 3px;
    background: rgba(0, 240, 255, 0.07);
    box-shadow: inset 0 0 40px rgba(0, 240, 255, 0.05), -3px 0 18px rgba(0, 240, 255, 0.2);
    animation: speakingPulse 1.6s ease-in-out infinite;
}

@keyframes speakingPulse {

    0%,
    100% {
        box-shadow: inset 0 0 40px rgba(0, 240, 255, 0.05), -3px 0 18px rgba(0, 240, 255, 0.2);
    }

    50% {
        box-shadow: inset 0 0 40px rgba(0, 240, 255, 0.09), -3px 0 30px rgba(0, 240, 255, 0.45);
    }
}

.message.skipped {
    opacity: 0.3;
    border-left-color: var(--cp-red);
}

.system-msg {
    color: var(--cp-text-dim);
    border-left-color: var(--cp-border);
    font-style: normal;
}

/* Welcome Screen */
.welcome-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100%;
    padding: 28px 30px 30px;
    text-align: center;
    position: relative;
    background-image:
        linear-gradient(180deg,
            rgba(10, 10, 12, 0.82) 0%,
            rgba(10, 10, 12, 0.60) 35%,
            rgba(10, 10, 12, 0.78) 70%,
            rgba(10, 10, 12, 0.95) 100%),
        url('images/night-city-bg.png');
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
}

.welcome-glitch {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 900;
    letter-spacing: 10px;
    color: var(--cp-text-bright);
    position: relative;
    text-shadow: 0 0 50px rgba(252, 233, 79, 0.35), 0 0 100px rgba(252, 233, 79, 0.1);
    animation: glitchText 5s infinite;
    -webkit-text-stroke: 0.5px rgba(252, 233, 79, 0.15);
}

@keyframes glitchText {

    0%,
    95%,
    100% {
        text-shadow: 0 0 40px rgba(252, 233, 79, 0.2);
    }

    96% {
        text-shadow: -3px 0 var(--cp-cyan), 3px 0 var(--cp-magenta);
        transform: translate(2px, -1px);
    }

    97% {
        text-shadow: 3px 0 var(--cp-magenta), -3px 0 var(--cp-cyan);
        transform: translate(-2px, 1px);
    }

    98% {
        text-shadow: 0 0 40px rgba(252, 233, 79, 0.2);
        transform: translate(0);
    }
}

.welcome-sub {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 6px;
    color: var(--cp-yellow);
    margin-top: 10px;
}

.welcome-line {
    width: 60px;
    height: 1px;
    background: var(--cp-yellow);
    margin: 14px 0;
    opacity: 0.4;
}

.welcome-desc {
    font-family: var(--font-body);
    color: var(--cp-text-dim);
    font-size: 15px;
    line-height: 1.8;
}

.welcome-terminal {
    margin-top: 12px;
}

.cursor-blink {
    color: var(--cp-yellow);
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* ===== INFO GRID (Welcome Screen) ===== */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
    width: 100%;
    max-width: 100%;
    text-align: left;
    position: relative;
}

/* HUD overlay behind info cards — subtle CP2077 targeting grid */
.info-grid::before {
    content: '';
    position: absolute;
    inset: -20px;
    background-image: url('images/hud-overlay.png');
    background-size: cover;
    background-position: center;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

.info-grid>* {
    position: relative;
    z-index: 1;
}


.info-card {
    background: rgba(22, 22, 28, 0.85);
    border: 1px solid var(--cp-border);
    border-top: 2px solid rgba(252, 233, 79, 0.5);
    padding: 16px 18px;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
    transition: border-top-color 0.2s, box-shadow 0.2s, transform 0.25s;
    animation: msgIn 0.35s ease both;
    position: relative;
    backdrop-filter: blur(6px);
}

/* CP2077 corner bracket decoration on info cards */
.info-card::before {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 14px;
    height: 14px;
    border-bottom: 1px solid rgba(252, 233, 79, 0.25);
    border-right: 1px solid rgba(252, 233, 79, 0.25);
    pointer-events: none;
    transition: border-color 0.2s;
}

.info-card:hover::before {
    border-color: rgba(0, 240, 255, 0.5);
}

.info-card:hover {
    border-top-color: var(--cp-cyan);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.07);
}

.info-card:nth-child(1) {
    animation-delay: 0.05s;
}

.info-card:nth-child(2) {
    animation-delay: 0.10s;
}

.info-card:nth-child(3) {
    animation-delay: 0.15s;
}

.info-card:nth-child(4) {
    animation-delay: 0.20s;
}

.info-card:nth-child(5) {
    animation-delay: 0.25s;
}

.info-card:nth-child(6) {
    animation-delay: 0.30s;
}

.info-card-icon {
    font-size: 18px;
    margin-bottom: 8px;
    line-height: 1;
}

.info-card-title {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--cp-yellow);
    margin-bottom: 8px;
}

.info-card-body {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--cp-text);
}

.info-card-body strong {
    color: var(--cp-text-bright);
}

.info-list {
    list-style: none;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-list li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 11.5px;
}

.info-perm {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cp-cyan);
    background: rgba(0, 240, 255, 0.08);
    padding: 1px 5px;
    border: 1px solid rgba(0, 240, 255, 0.2);
    white-space: nowrap;
    flex-shrink: 0;
}

.info-steps {
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
}

.info-steps li::marker {
    color: var(--cp-yellow);
    font-family: var(--font-mono);
}

/* Featured Card (7. kart — tam genişlik) */
.info-card-featured {
    grid-column: 1 / -1 !important;
    clip-path: none !important;
    border: 1px solid var(--cp-border) !important;
    border-top: 2px solid var(--cp-cyan) !important;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.05) 0%, var(--cp-bg-card) 50%);
    animation-delay: 0.35s;
    padding: 20px 24px;
}

.info-card-featured:hover {
    border-top-color: var(--cp-yellow) !important;
    box-shadow: 0 0 30px rgba(252, 233, 79, 0.07);
}

.info-card-featured-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.featured-lead {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--cp-text);
    line-height: 1.65;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cp-border);
}

.feature-pill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
}

.feature-pill {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--cp-border);
    border-left: 2px solid rgba(252, 233, 79, 0.3);
    padding: 9px 11px;
    transition: border-left-color 0.15s, background 0.15s;
}

.feature-pill:hover {
    border-left-color: var(--cp-cyan);
    background: rgba(0, 240, 255, 0.06);
    transform: translateX(3px);
    box-shadow: -2px 0 14px rgba(0, 240, 255, 0.12);
}

.feature-pill {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--cp-border);
    border-left: 2px solid rgba(252, 233, 79, 0.3);
    padding: 9px 11px;
    transition: border-left-color 0.18s, background 0.18s, transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.18s;
}

.pill-icon {
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1.4;
}

.feature-pill>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.feature-pill strong {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--cp-text-bright);
    line-height: 1.3;
}

.feature-pill small {
    font-family: var(--font-body);
    font-size: 10.5px;
    color: var(--cp-text-dim);
    line-height: 1.5;
}

/* ===== MODAL ===== */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 5000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px) saturate(0.8);
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.99) 0%, rgba(20, 20, 30, 0.99) 100%);
    border: 1px solid var(--cp-border);
    width: 1200px;
    max-width: 98vw;
    height: 850px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px));
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.9), 0 0 30px rgba(252, 233, 79, 0.1);
    animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    border-bottom: 1px solid var(--cp-border);
    background: linear-gradient(180deg, rgba(252, 233, 79, 0.04) 0%, transparent 100%);
}

.modal-header h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 6px;
    color: var(--cp-yellow);
    text-shadow: 0 0 14px rgba(252, 233, 79, 0.3);
}

.modal-header h2 .accent {
    color: #fff;
    opacity: 0.8;
}

.modal-close {
    background: none;
    border: none;
    color: var(--cp-text-dim);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s;
}

.modal-close:hover {
    color: var(--cp-red);
}

.modal-body {
    display: flex;
    /* Sidebar + Content */
    flex: 1;
    overflow: hidden;
    padding: 0;
    /* Removing original padding */
}

/* Tabs Sidebar */
.tabs {
    width: 240px;
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.tabs::-webkit-scrollbar {
    width: 2px;
}

.tab-btn {
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    padding: 22px 30px;
    color: var(--cp-text-dim);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    position: relative;
}

.tab-btn::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.tab-btn:hover {
    color: var(--cp-text-bright);
    background: rgba(255, 255, 255, 0.02);
    padding-left: 35px;
    /* Subtle movement */
}

.tab-btn.active {
    color: var(--cp-yellow);
    background: linear-gradient(90deg, rgba(252, 233, 79, 0.12) 0%, transparent 100%);
    border-left: 4px solid var(--cp-yellow);
    text-shadow: 0 0 16px rgba(252, 233, 79, 0.7), 0 0 4px rgba(252, 233, 79, 0.4);
    padding-left: 35px;
    box-shadow: inset 3px 0 20px rgba(252, 233, 79, 0.06);
}

.tab-content-container {
    flex: 1;
    overflow-y: auto;
    padding: 50px 70px;
    background: radial-gradient(circle at top left, rgba(252, 233, 79, 0.02) 0%, transparent 40%);
}

.tab-content {
    display: none;
    animation: tabFade 0.3s ease;
}

@keyframes tabFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-content.active {
    display: block;
    animation: tabFade 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Form Elements */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cp-text-dim);
    margin-bottom: 6px;
    letter-spacing: 1.5px;
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--cp-bg-deep);
    border: 1px solid var(--cp-border);
    color: var(--cp-text-bright);
    font-family: var(--font-mono);
    font-size: 13px;
    transition: border-color 0.2s;
    outline: none;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--cp-yellow);
    box-shadow: 0 0 15px rgba(252, 233, 79, 0.08), 0 0 0 1px rgba(252, 233, 79, 0.18);
    outline: none;
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.form-group .hint {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cp-text-dim);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* Range */
.range-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.range-wrap input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--cp-border);
    outline: none;
}

.range-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--cp-yellow);
    cursor: pointer;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: 0 0 8px rgba(252, 233, 79, 0.5);
    transition: box-shadow 0.2s;
}

.range-wrap input[type="range"]:hover::-webkit-slider-thumb,
.range-wrap input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 18px rgba(252, 233, 79, 0.95), 0 0 36px rgba(252, 233, 79, 0.4);
}

.range-wrap input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(90deg, rgba(252, 233, 79, 0.3) 0%, var(--cp-border) 100%);
}

.range-wrap .range-val {
    font-family: var(--font-display);
    font-size: 14px;
    min-width: 30px;
    text-align: right;
    color: var(--cp-yellow);
}

/* Chips */
.chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--cp-bg-deep);
    border: 1px solid var(--cp-border);
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--cp-text);
    letter-spacing: 0.5px;
    transition: border-color 0.15s, color 0.15s;
    cursor: default;
}

.chip:hover {
    border-color: rgba(252, 233, 79, 0.3);
    color: var(--cp-text-bright);
}

.chip .chip-remove {
    background: none;
    border: none;
    color: var(--cp-red);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    line-height: 1;
}

.add-chip-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.add-chip-row input {
    flex: 1;
    padding: 8px 12px;
    background: var(--cp-bg-deep);
    border: 1px solid var(--cp-border);
    color: var(--cp-text-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    outline: none;
}

.add-chip-row input:focus {
    border-color: var(--cp-yellow);
}

.btn-add-chip {
    background: var(--cp-yellow);
    border: none;
    color: var(--cp-bg-deep);
    padding: 8px 14px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 900;
    transition: background 0.2s;
}

.btn-add-chip:hover {
    background: #fff;
}

/* Section Title */
.section-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--cp-cyan);
    margin-bottom: 12px;
    padding-bottom: 6px;
    padding-left: 10px;
    border-bottom: 1px solid var(--cp-border);
    border-left: 2px solid var(--cp-cyan);
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

/* Toggle */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(42, 42, 53, 0.4);
}

.toggle-row:last-child {
    border-bottom: none;
}

.toggle-label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--cp-text);
}

.toggle-label small {
    display: block;
    font-family: var(--font-mono);
    color: var(--cp-text-dim);
    font-size: 10px;
    margin-top: 3px;
    letter-spacing: 0.5px;
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 22px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--cp-border);
    cursor: pointer;
    transition: background 0.25s;
    clip-path: polygon(0 4px, 4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%);
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--cp-text-dim);
    transition: all 0.25s;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.toggle-switch input:checked+.toggle-slider {
    background-color: rgba(252, 233, 79, 0.3);
}

.toggle-switch input:checked+.toggle-slider::before {
    background-color: var(--cp-yellow);
    transform: translateX(22px);
    box-shadow: 0 0 10px rgba(252, 233, 79, 0.7), 0 0 22px rgba(252, 233, 79, 0.3);
}

/* Modal Footer */
.modal-footer {
    padding: 15px 25px;
    border-top: 1px solid var(--cp-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn-save {
    background: var(--cp-yellow);
    color: var(--cp-bg-deep);
    border: none;
    padding: 10px 28px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    transition: background 0.2s;
}

.btn-save:hover {
    background: #fff;
}

.btn-cancel {
    background: transparent;
    color: var(--cp-text-dim);
    border: 1px solid var(--cp-border);
    padding: 10px 28px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover {
    border-color: var(--cp-red);
    color: var(--cp-red);
}

/* Modal scrollbar */
.modal::-webkit-scrollbar {
    width: 4px;
}

.modal::-webkit-scrollbar-track {
    background: transparent;
}

.modal::-webkit-scrollbar-thumb {
    background: var(--cp-yellow);
}

/* ===== PHASE 1: QUEUE CONTROLS ===== */
.queue-controls {
    padding: 0 20px 10px;
    display: flex;
    gap: 6px;
}

.btn-ctrl {
    flex: 1;
    padding: 9px 6px;
    border: 1px solid var(--cp-border);
    background: transparent;
    color: var(--cp-text-dim);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    position: relative;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.btn-ctrl:hover {
    border-color: var(--cp-cyan);
    color: var(--cp-cyan);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.1);
}

.btn-ctrl:active {
    transform: scale(0.96);
}

.btn-ctrl.skip:hover {
    border-color: var(--cp-yellow);
    color: var(--cp-yellow);
    box-shadow: 0 0 12px rgba(252, 233, 79, 0.15);
}

.btn-ctrl.pause-active {
    border-color: var(--cp-magenta);
    color: var(--cp-magenta);
    background: rgba(255, 45, 111, 0.08);
    box-shadow: 0 0 12px rgba(255, 45, 111, 0.15);
}

.btn-ctrl.clear:hover {
    border-color: var(--cp-red);
    color: var(--cp-red);
    box-shadow: 0 0 12px rgba(255, 59, 59, 0.15);
}

.btn-ctrl .shortcut-key {
    display: block;
    font-size: 8px;
    opacity: 0.5;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

/* Paused indicator badge */
.paused-badge {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 20px;
    margin: 0 20px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--cp-magenta);
    border: 1px solid var(--cp-magenta);
    background: rgba(255, 45, 111, 0.06);
    animation: pausePulse 2s ease-in-out infinite;
}

.paused-badge.active {
    display: flex;
}

@keyframes pausePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ===== PHASE 1: CONNECTION STATES ===== */
.status-reconnecting {
    color: var(--cp-yellow);
    animation: reconnectBlink 1s step-end infinite;
}

@keyframes reconnectBlink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0.3;
    }
}

.status-dot.reconnecting {
    background: var(--cp-yellow);
    box-shadow: 0 0 8px var(--cp-yellow);
    animation: dotPulse 0.8s ease-in-out infinite;
}

/* Uptime display */
.uptime-display {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cp-green);
    letter-spacing: 1px;
}

.uptime-display .uptime-label {
    color: var(--cp-text-dim);
    margin-right: 4px;
}

/* ===== PHASE 1: TTS TEST BUTTON ===== */
.btn-test-voice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--cp-cyan);
    color: var(--cp-cyan);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 10px;
}

.btn-test-voice:hover {
    background: rgba(0, 240, 255, 0.08);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
}

.btn-test-voice:active {
    transform: scale(0.97);
}

.btn-test-voice.testing {
    border-color: var(--cp-magenta);
    color: var(--cp-magenta);
    pointer-events: none;
}

/* ===== PHASE 1: SPAM PROTECTION SECTION ===== */
.inline-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.inline-input-row label {
    margin-bottom: 0 !important;
    white-space: nowrap;
    min-width: 0;
}

.inline-input-row input[type="number"] {
    width: 80px;
    padding: 6px 10px;
    background: var(--cp-bg-deep);
    border: 1px solid var(--cp-border);
    color: var(--cp-text-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    outline: none;
}

.inline-input-row input[type="number"]:focus {
    border-color: var(--cp-yellow);
}

.inline-input-row .unit {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cp-text-dim);
    letter-spacing: 0.5px;
}

/* ===== PHASE 1: MUTED BADGE ===== */
.muted-badge {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 6000;
    padding: 8px 18px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--cp-red);
    border: 1px solid var(--cp-red);
    background: rgba(10, 10, 12, 0.9);
    backdrop-filter: blur(10px);
    animation: mutedPulse 2s ease-in-out infinite;
}

.muted-badge.active {
    display: block;
}

@keyframes mutedPulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 59, 59, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 59, 59, 0.4);
    }
}

/* ===== PHASE 2: PER-USER VOICE BADGES ===== */
.voice-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 1px 6px;
    margin-left: 6px;
    border: 1px solid var(--cp-border);
    color: var(--cp-text-dim);
    letter-spacing: 0.5px;
    vertical-align: middle;
    opacity: 0.7;
}

/* ===== PHASE 2: ALERT MESSAGES ===== */
.message.alert-bits {
    border-left: 2px solid var(--cp-yellow);
    background: rgba(252, 233, 79, 0.08);
    box-shadow: inset 0 0 30px rgba(252, 233, 79, 0.05), -2px 0 14px rgba(252, 233, 79, 0.15);
}

.message.alert-bits .msg-prefix {
    color: var(--cp-yellow);
}

.message.alert-sub {
    border-left: 2px solid #9146FF;
    background: rgba(145, 70, 255, 0.08);
    box-shadow: inset 0 0 30px rgba(145, 70, 255, 0.05), -2px 0 14px rgba(145, 70, 255, 0.15);
}

.message.alert-sub .msg-prefix {
    color: #9146FF;
}

.message.alert-gift {
    border-left: 2px solid var(--cp-magenta);
    background: rgba(255, 45, 111, 0.08);
    box-shadow: inset 0 0 30px rgba(255, 45, 111, 0.05), -2px 0 14px rgba(255, 45, 111, 0.15);
}

.message.alert-gift .msg-prefix {
    color: var(--cp-magenta);
}

/* ===== PHASE 2: COMMAND LOG ===== */
.message.cmd-msg {
    border-left: 2px solid var(--cp-cyan);
    background: rgba(0, 240, 255, 0.04);
    opacity: 0.7;
}

.message.cmd-msg .msg-prefix {
    color: var(--cp-cyan);
}

/* ===== PHASE 2: VOICE POOL SETTINGS ===== */
.voice-pool-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    max-height: 160px;
    overflow-y: auto;
    padding: 8px;
    background: var(--cp-bg-deep);
    border: 1px solid var(--cp-border);
}

.voice-pool-list::-webkit-scrollbar {
    width: 3px;
}

.voice-pool-list::-webkit-scrollbar-thumb {
    background: var(--cp-border);
}

.voice-pool-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--cp-text);
    border: 1px solid var(--cp-border);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.voice-pool-item:hover {
    border-color: var(--cp-cyan);
}

.voice-pool-item.active {
    border-color: var(--cp-yellow);
    color: var(--cp-yellow);
    background: rgba(252, 233, 79, 0.08);
}

.voice-pool-item .pool-check {
    font-size: 8px;
}

/* ===== PHASE 2: ALERT SETTINGS ===== */
.alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(42, 42, 53, 0.4);
}

.alert-row:last-child {
    border-bottom: none;
}

.alert-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--cp-text);
}

.alert-icon {
    font-size: 16px;
}

/* Stats: bits/subs counters */
.stat-value.bits {
    color: var(--cp-yellow);
}

.stat-value.subs {
    color: #9146FF;
}

/* Phase 4: Pronunciation Dictionary */
.dict-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 2px solid var(--cp-cyan);
    margin-bottom: 5px;
    font-size: 13px;
}

.dict-item .orig {
    color: var(--cp-text-main);
    font-weight: bold;
}

.dict-item .sep {
    color: var(--cp-cyan);
    margin: 0 10px;
}

.tab-content-container::-webkit-scrollbar {
    width: 4px;
}

.tab-content-container::-webkit-scrollbar-track {
    background: transparent;
}

.tab-content-container::-webkit-scrollbar-thumb {
    background: var(--cp-yellow);
}


.dict-btn-remove {
    background: none;
    border: none;
    color: var(--cp-red);
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.dict-btn-remove:hover {
    opacity: 1;
}

/* Phase 4: Leaderboard */
.leaderboard-panel {
    padding: 0 10px;
    margin-bottom: 20px;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 400px;
    overflow-y: auto;
}

.leaderboard-list::-webkit-scrollbar {
    width: 2px;
}

.lb-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid var(--cp-cyan);
    margin-bottom: 2px;
    transition: all 0.2s;
}

@keyframes rowIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.lb-row:hover {
    background: rgba(0, 255, 255, 0.05);
    border-left-color: var(--cp-yellow);
    padding-left: 17px;
}

.lb-user {
    color: var(--cp-text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.lb-count {
    color: var(--cp-cyan);
    font-weight: 700;
}

/* ===== LEADERBOARD RANK COLORS ===== */
.lb-row:nth-child(1) {
    border-left-color: #FCE94F;
}

.lb-row:nth-child(1) .lb-user {
    color: var(--cp-yellow);
}

.lb-row:nth-child(1) .lb-count {
    color: var(--cp-yellow);
    text-shadow: 0 0 10px rgba(252, 233, 79, 0.5);
}

.lb-row:nth-child(2) {
    border-left-color: var(--cp-cyan);
}

.lb-row:nth-child(2) .lb-user {
    color: var(--cp-cyan);
    opacity: 0.9;
}

.lb-row:nth-child(3) {
    border-left-color: var(--cp-magenta);
}

.lb-row:nth-child(3) .lb-user {
    color: var(--cp-magenta);
    opacity: 0.9;
}

/* ===== STAT ROW HOVER ===== */
.stat-row {
    cursor: default;
    transition: background 0.2s, padding-left 0.2s;
    padding: 4px 6px;
    border-radius: 0;
    margin: 0 -6px;
}

.stat-row:hover {
    background: rgba(255, 255, 255, 0.025);
    padding-left: 10px;
}

/* ===== STAT POP ANIMATION ===== */
@keyframes statPopAnim {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.18);
        text-shadow: 0 0 20px rgba(252, 233, 79, 0.8);
    }

    70% {
        transform: scale(0.96);
    }

    100% {
        transform: scale(1);
        text-shadow: 0 0 14px rgba(252, 233, 79, 0.35);
    }
}

.stat-pop {
    animation: statPopAnim 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both !important;
}

/* ===== WELCOME SCREEN AMBIENT ===== */
.welcome-screen {
    background:
        radial-gradient(ellipse 500px 300px at 50% 0%, rgba(252, 233, 79, 0.04) 0%, transparent 70%);
}

/* ===== INFO CARD HOVER GLOW UPGRADE ===== */
.info-card:hover {
    border-top-color: var(--cp-cyan);
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.10), 0 4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
    transition: all 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.info-card {
    transition: border-top-color 0.2s, box-shadow 0.2s, transform 0.25s;
}

/* ===== MODAL CORNER BRACKETS ===== */
.modal::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-top: 1px solid rgba(252, 233, 79, 0.35);
    border-right: 1px solid rgba(252, 233, 79, 0.35);
    pointer-events: none;
    z-index: 1;
}

/* ===== FORM SELECT CUSTOM ARROW ===== */
.form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0 L5 6 L10 0' fill='none' stroke='%23FCE94F' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

/* ===== MESSAGE TIMESTAMP ===== */
.msg-ts {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--cp-text-dim);
    opacity: 0;
    letter-spacing: 0.5px;
    transition: opacity 0.2s;
    pointer-events: none;
}

.message {
    position: relative;
}

.message:hover .msg-ts {
    opacity: 0.6;
}

/* ===== LEADERBOARD RANK ===== */
.lb-rank {
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
}

.lb-rank-num {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--cp-text-dim);
    min-width: 14px;
    text-align: center;
}

.lb-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   BÖLÜM 1 — CP2077 ATMOSFER SİSTEMİ
   ============================================================ */

/* Data stream particle — sidebar sağ kenarı */
@keyframes dataFlowDown {
    0% {
        top: -8%;
        opacity: 0;
    }

    8% {
        opacity: 0.9;
    }

    90% {
        opacity: 0.7;
    }

    100% {
        top: 108%;
        opacity: 0;
    }
}

.data-stream-particles {
    position: absolute;
    right: -1px;
    top: 0;
    width: 2px;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}

.data-particle {
    position: absolute;
    left: 0;
    width: 2px;
    border-radius: 1px;
    animation: dataFlowDown linear infinite;
    opacity: 0;
}

/* Coordinate HUD overlay — chat area köşe */
.coord-overlay {
    position: absolute;
    bottom: 14px;
    right: 16px;
    font-family: var(--font-mono);
    font-size: 8px;
    color: rgba(252, 233, 79, 0.18);
    letter-spacing: 0.5px;
    line-height: 1.7;
    text-align: right;
    pointer-events: none;
    z-index: 1;
    user-select: none;
}

.coord-overlay .coord-line-active {
    color: rgba(0, 240, 255, 0.35);
    animation: coordBlink 2.5s ease-in-out infinite;
}

@keyframes coordBlink {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

/* Boot sequence overlay */
#boot-overlay {
    position: fixed;
    inset: 0;
    background: var(--cp-bg-deep);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 80px;
    font-family: var(--font-mono);
    pointer-events: none;
}

.boot-line {
    font-size: 13px;
    color: var(--cp-yellow);
    letter-spacing: 1.5px;
    opacity: 0;
    margin-bottom: 6px;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.boot-line.active {
    opacity: 1;
    transform: translateX(0);
}

.boot-line.dim {
    color: var(--cp-text-dim);
    font-size: 11px;
}

.boot-line.ok::after {
    content: ' [OK]';
    color: #39FF14;
}

.boot-line.warn::after {
    content: ' [WARN]';
    color: var(--cp-orange);
}

.boot-progress-bar {
    width: 320px;
    height: 2px;
    background: rgba(252, 233, 79, 0.1);
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

.boot-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cp-yellow), var(--cp-cyan));
    width: 0%;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px var(--cp-yellow);
}

/* HUD target reticle — welcome screen */
.hud-reticle {
    position: fixed;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    pointer-events: none;
    opacity: 0.06;
    animation: reticlePulse 4s ease-in-out infinite;
}

@keyframes reticlePulse {

    0%,
    100% {
        opacity: 0.04;
    }

    50% {
        opacity: 0.12;
    }
}

/* CP2077 diagonal cut header band */
.sys-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(252, 233, 79, 0.35);
    padding: 3px 0;
    margin-bottom: 4px;
}

.sys-panel-header::before {
    content: '▶';
    color: var(--cp-yellow);
    font-size: 6px;
    opacity: 0.6;
}

.sys-panel-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(252, 233, 79, 0.15), transparent);
    margin-left: 6px;
}

/* ============================================================
   BÖLÜM 2 — CP2077 İKONİK UI ELEMENTLERİ
   ============================================================ */

/* ── A) Custom CP2077 Crosshair Cursor ─────────────────── */
html,
body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 4 L20 16 L16 28 L12 16 Z' stroke='%23FCE94F' stroke-width='1.2' fill='none' opacity='0.9'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23FCE94F' opacity='0.85'/%3E%3Ccircle cx='16' cy='16' r='6' stroke='%23FCE94F' stroke-width='0.4' fill='none' opacity='0.3'/%3E%3Cline x1='16' y1='0' x2='16' y2='9' stroke='%23FCE94F' stroke-width='0.8' opacity='0.7'/%3E%3Cline x1='16' y1='23' x2='16' y2='32' stroke='%23FCE94F' stroke-width='0.8' opacity='0.7'/%3E%3Cline x1='0' y1='16' x2='9' y2='16' stroke='%23FCE94F' stroke-width='0.8' opacity='0.7'/%3E%3Cline x1='23' y1='16' x2='32' y2='16' stroke='%23FCE94F' stroke-width='0.8' opacity='0.7'/%3E%3C/svg%3E") 16 16, crosshair;
}

a,
button,
select,
label,
[role="button"],
input[type="range"],
input[type="checkbox"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 4 L20 16 L16 28 L12 16 Z' stroke='%23FF6B00' stroke-width='1.4' fill='rgba(255%2C107%2C0%2C0.12)' opacity='0.95'/%3E%3Ccircle cx='16' cy='16' r='2' fill='%23FF6B00' opacity='0.9'/%3E%3Ccircle cx='16' cy='16' r='6' stroke='%23FF6B00' stroke-width='0.5' fill='none' opacity='0.4'/%3E%3Cline x1='16' y1='0' x2='16' y2='9' stroke='%23FF6B00' stroke-width='1' opacity='0.8'/%3E%3Cline x1='16' y1='23' x2='16' y2='32' stroke='%23FF6B00' stroke-width='1' opacity='0.8'/%3E%3Cline x1='0' y1='16' x2='9' y2='16' stroke='%23FF6B00' stroke-width='1' opacity='0.8'/%3E%3Cline x1='23' y1='16' x2='32' y2='16' stroke='%23FF6B00' stroke-width='1' opacity='0.8'/%3E%3C/svg%3E") 16 16, pointer;
}

/* ── B) Corner Bracket Sistemi ─────────────────────────── */
.cp-bracket {
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 5;
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
}

.cp-bracket-tl {
    top: 5px;
    left: 5px;
    border-top: 1px solid rgba(252, 233, 79, 0.35);
    border-left: 1px solid rgba(252, 233, 79, 0.35);
}

.cp-bracket-tr {
    top: 5px;
    right: 5px;
    border-top: 1px solid rgba(252, 233, 79, 0.35);
    border-right: 1px solid rgba(252, 233, 79, 0.35);
}

.cp-bracket-bl {
    bottom: 5px;
    left: 5px;
    border-bottom: 1px solid rgba(252, 233, 79, 0.35);
    border-left: 1px solid rgba(252, 233, 79, 0.35);
}

.cp-bracket-br {
    bottom: 5px;
    right: 5px;
    border-bottom: 1px solid rgba(252, 233, 79, 0.35);
    border-right: 1px solid rgba(252, 233, 79, 0.35);
}

.cp-bracketed:hover .cp-bracket {
    width: 18px;
    height: 18px;
    border-color: rgba(0, 240, 255, 0.7);
}

/* ── C) SYSTEM_ID Band ──────────────────────────────────── */
.sys-id-band {
    font-family: var(--font-mono);
    font-size: 7.5px;
    letter-spacing: 2.5px;
    padding: 5px 0 6px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.sys-id-band::before {
    content: '▶';
    font-size: 6px;
    flex-shrink: 0;
}

.sys-id-band::after {
    content: '';
    flex: 1;
    height: 1px;
}

.sys-id-band[data-color="yellow"] {
    color: rgba(252, 233, 79, 0.38);
}

.sys-id-band[data-color="yellow"]::before {
    color: var(--cp-yellow);
}

.sys-id-band[data-color="yellow"]::after {
    background: linear-gradient(90deg, rgba(252, 233, 79, 0.2), transparent);
}

.sys-id-band[data-color="cyan"] {
    color: rgba(0, 240, 255, 0.38);
}

.sys-id-band[data-color="cyan"]::before {
    color: var(--cp-cyan);
}

.sys-id-band[data-color="cyan"]::after {
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.2), transparent);
}

.sys-id-band[data-color="orange"] {
    color: rgba(255, 107, 0, 0.38);
}

.sys-id-band[data-color="orange"]::before {
    color: var(--cp-orange);
}

.sys-id-band[data-color="orange"]::after {
    background: linear-gradient(90deg, rgba(255, 107, 0, 0.2), transparent);
}

/* ── D) Segmented Stat Bars ─────────────────────────────── */
.stat-bar {
    display: flex;
    gap: 2px;
    margin: 4px 0 3px;
    flex: 1;
}

.stat-bar-seg {
    flex: 1;
    height: 7px;
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
    background: rgba(42, 42, 53, 0.7);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.stat-bar-yellow .stat-bar-seg.filled {
    background: var(--cp-yellow);
    box-shadow: 0 0 5px rgba(252, 233, 79, 0.5);
}

.stat-bar-green .stat-bar-seg.filled {
    background: #39FF14;
    box-shadow: 0 0 5px rgba(57, 255, 20, 0.5);
}

.stat-bar-danger .stat-bar-seg.filled {
    background: var(--cp-danger);
    box-shadow: 0 0 5px rgba(255, 0, 60, 0.5);
}

.stat-row {
    flex-direction: column;
}

.stat-row-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* ── E) Corpo Badge ─────────────────────────────────────── */
.corpo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 1.5px;
    color: rgba(252, 233, 79, 0.3);
    border: 1px solid rgba(252, 233, 79, 0.12);
    padding: 2px 8px;
    margin-top: 5px;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
    transition: color 0.2s, border-color 0.2s;
}

.corpo-badge::before {
    content: '◆';
    font-size: 5px;
    color: var(--cp-yellow);
    opacity: 0.5;
}

.brand:hover .corpo-badge {
    color: rgba(252, 233, 79, 0.55);
    border-color: rgba(252, 233, 79, 0.25);
}

/* ── F) Chat Header hidden sys text ────────────────────── */
.chat-header {
    position: relative;
    overflow: hidden;
}

/* ===== SFX UPLOAD UI ===== */
.sfx-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sfx-upload-cmd {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.sfx-prefix {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--cp-cyan);
    padding: 8px 4px 8px 12px;
    white-space: nowrap;
    user-select: none;
}

.sfx-upload-cmd input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--cp-text-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 8px 12px 8px 4px;
    width: 120px;
}

.sfx-upload-cmd input::placeholder {
    color: var(--cp-text-dim);
    opacity: 0.5;
}

.sfx-file-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    color: var(--cp-text-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sfx-file-label:hover {
    border-color: var(--cp-yellow);
    color: var(--cp-yellow);
}

/* Custom SFX List */
.sfx-custom-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sfx-custom-list::-webkit-scrollbar {
    width: 3px;
}

.sfx-custom-list::-webkit-scrollbar-thumb {
    background: var(--cp-yellow);
}

.sfx-custom-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--cp-bg-card);
    border: 1px solid var(--cp-border);
    border-left: 2px solid var(--cp-cyan);
    font-family: var(--font-mono);
    font-size: 11px;
    transition: border-color 0.2s, background 0.2s;
}

.sfx-custom-item:hover {
    border-color: var(--cp-yellow);
    background: rgba(252, 233, 79, 0.04);
}

.sfx-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.sfx-item-cmd {
    color: var(--cp-cyan);
    font-weight: 600;
    white-space: nowrap;
}

.sfx-item-file {
    color: var(--cp-text-dim);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sfx-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.sfx-btn-play,
.sfx-btn-delete {
    background: transparent;
    border: 1px solid var(--cp-border);
    color: var(--cp-text-dim);
    font-size: 13px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}

.sfx-btn-play:hover {
    border-color: var(--cp-green);
    color: var(--cp-green);
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.15);
}

.sfx-btn-delete:hover {
    border-color: var(--cp-red);
    color: var(--cp-red);
    box-shadow: 0 0 10px rgba(255, 59, 59, 0.15);
}

/* =========================================
   PHASE 7 - ULTRADESIGN CYBER UI PACK
   [1] Audio Spectrum Visualizer
   [2] AI Neural Core Processing Box
   [3] Now Speaking Hologram Card
========================================= */

/* 1. Audio Visualizer */
.spectrum-visualizer {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding-bottom: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 50;
    background: linear-gradient(0deg, rgba(8, 10, 15, 0.8) 0%, transparent 100%);
    border-bottom: 2px solid var(--cp-magenta);
}

.spectrum-visualizer.active {
    opacity: 1;
}

.spectrum-visualizer .bar {
    width: 8px;
    background: var(--cp-magenta);
    height: 5px;
    box-shadow: 0 0 10px var(--cp-magenta);
    border-radius: 1px 1px 0 0;
    transition: height 0.05s ease;
}

/* Base Bar Animations - only active when speaking */
.spectrum-visualizer.active .b1 { animation: v-bounce 0.6s infinite alternate; }
.spectrum-visualizer.active .b2 { animation: v-bounce 0.8s infinite alternate 0.1s; }
.spectrum-visualizer.active .b3 { animation: v-bounce 0.4s infinite alternate 0.2s; }
.spectrum-visualizer.active .b4 { animation: v-bounce 0.7s infinite alternate 0.3s; }
.spectrum-visualizer.active .b5 { animation: v-bounce 0.5s infinite alternate 0.4s; }
.spectrum-visualizer.active .b6 { animation: v-bounce 0.9s infinite alternate 0.5s; background: var(--cp-cyan); box-shadow: 0 0 10px var(--cp-cyan);}
.spectrum-visualizer.active .b7 { animation: v-bounce 0.6s infinite alternate 0.6s; background: var(--cp-cyan); box-shadow: 0 0 10px var(--cp-cyan);}
.spectrum-visualizer.active .b8 { animation: v-bounce 0.8s infinite alternate 0.2s; }
.spectrum-visualizer.active .b9 { animation: v-bounce 0.5s infinite alternate 0.1s; }
.spectrum-visualizer.active .b10 { animation: v-bounce 0.7s infinite alternate 0.3s; }
.spectrum-visualizer.active .b11 { animation: v-bounce 0.4s infinite alternate 0.7s; }
.spectrum-visualizer.active .b12 { animation: v-bounce 0.9s infinite alternate 0.4s; }

@keyframes v-bounce {
    0% { height: 5px; }
    50% { height: 18px; }
    100% { height: 35px; }
}

/* 2. AI Processing Box */
.cyber-warning-box {
    margin: 15px;
    padding: 12px;
    border: 1px solid var(--cp-yellow);
    background: repeating-linear-gradient(
        45deg,
        rgba(252, 233, 79, 0.05),
        rgba(252, 233, 79, 0.05) 10px,
        rgba(0, 0, 0, 0.4) 10px,
        rgba(0, 0, 0, 0.4) 20px
    );
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    box-shadow: 0 0 15px rgba(252, 233, 79, 0.2) inset;
    transition: all 0.3s;
}

.warning-glitch-icon {
    font-size: 24px;
    animation: glitch-skew 2s infinite linear alternate-reverse;
    text-shadow: 2px 0 var(--cp-red), -2px 0 var(--cp-cyan);
}

.warning-content {
    flex: 1;
}

.warning-title {
    font-family: 'Orbitron', sans-serif;
    color: var(--cp-yellow);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 6px;
    animation: flash-text 1s infinite alternate;
}

.warning-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.warning-progress {
    width: 50%;
    height: 100%;
    background: var(--cp-yellow);
    box-shadow: 0 0 10px var(--cp-yellow);
    animation: slide-bar 1.5s infinite linear;
}

@keyframes slide-bar {
    0% { transform: translateX(-100%); width: 20%; }
    50% { width: 50%; }
    100% { transform: translateX(300%); width: 20%; }
}
@keyframes flash-text {
    0% { opacity: 0.7; }
    100% { opacity: 1; text-shadow: 0 0 10px var(--cp-yellow); }
}

/* 3. Now Speaking Hologram Card */
.hologram-card {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 280px;
    background: rgba(8, 10, 15, 0.85);
    border: 1px solid var(--cp-cyan);
    box-shadow: 0 0 20px rgba(50, 219, 240, 0.15), 0 0 10px rgba(50, 219, 240, 0.3) inset;
    backdrop-filter: blur(5px);
    z-index: 100;
    transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.hologram-card.hidden {
    opacity: 0;
    transform: translateX(50px) scale(0.95);
    pointer-events: none;
}

.holo-header {
    background: var(--cp-cyan);
    color: #000;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    letter-spacing: 2px;
}

.holo-body {
    display: flex;
    padding: 12px;
    gap: 15px;
    align-items: center;
}

.holo-avatar {
    width: 45px;
    height: 45px;
    border: 1px solid var(--cp-cyan);
    background: repeating-linear-gradient(0deg, rgba(50, 219, 240, 0.1), rgba(50, 219, 240, 0.1) 1px, transparent 1px, transparent 4px);
    position: relative;
    overflow: hidden;
}

.holo-glitch-img {
    width: 100%;
    height: 100%;
    background-color: var(--cp-cyan);
    opacity: 0.3;
    animation: holo-flicker 3s infinite steps(1);
}

@keyframes holo-flicker {
    0% { transform: scale(1); opacity: 0.2; }
    5% { transform: scale(1.1) translateX(2px); opacity: 0.8; }
    10% { transform: scale(0.9) translateY(-2px); opacity: 0.2; }
    15% { transform: scale(1); opacity: 0.5; }
    20% { opacity: 0.2; }
}

.holo-info {
    flex: 1;
}

.holo-username {
    font-family: 'Orbitron', monospace;
    color: var(--cp-text-bright);
    font-size: 16px;
    text-shadow: 0 0 5px var(--cp-cyan);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.holo-voice {
    font-family: 'Share Tech Mono', monospace;
    color: var(--cp-border);
    font-size: 11px;
    text-transform: uppercase;
}