/* ==========================================================================
   Schmobin VDO Studio - Custom Broadcast Styling & Design System
   Compatible with VDO.Ninja Core WebRTC Engine
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
    --schmobin-bg: #09090b;
    --schmobin-surface: #141418;
    --schmobin-surface-elevated: #1c1c24;
    --schmobin-border: rgba(255, 255, 255, 0.08);
    --schmobin-border-hover: rgba(99, 102, 241, 0.45);
    --schmobin-indigo: #6366f1;
    --schmobin-indigo-hover: #4f46e5;
    --schmobin-violet: #8b5cf6;
    --schmobin-emerald: #10b981;
    --schmobin-emerald-hover: #059669;
    --schmobin-amber: #f59e0b;
    --schmobin-rose: #ef4444;
    --schmobin-rose-hover: #dc2626;
    --schmobin-text: #f4f4f5;
    --schmobin-text-muted: #a1a1aa;
    --schmobin-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --schmobin-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --schmobin-font-mono: 'JetBrains Mono', monospace;
}

/* 1. Global Reset & Ambient Dark Canvas */
html, body, body.darktheme {
    background-color: var(--schmobin-bg) !important;
    background-image: 
        radial-gradient(circle at 10% 15%, rgba(99, 102, 241, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 90% 85%, rgba(139, 92, 246, 0.06) 0%, transparent 45%),
        radial-gradient(circle at 50% 0%, rgba(20, 20, 28, 0.95) 0%, transparent 75%) !important;
    background-attachment: fixed !important;
    color: var(--schmobin-text) !important;
    font-family: var(--schmobin-font-sans) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
::-webkit-scrollbar-track {
    background: #09090b !important;
}
::-webkit-scrollbar-thumb {
    background: #27272a !important;
    border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: #3f3f46 !important;
}

/* 2. Top Header Navigation */
#header {
    background: rgba(9, 9, 11, 0.82) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--schmobin-border) !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.5) !important;
    z-index: 1000 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
}

/* Brand Logo Container */
#logoname {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#logoname:hover {
    transform: scale(1.02) !important;
}

.schmobin-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.brand-badge {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #9333ea 100%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4) !important;
    color: #ffffff !important;
    font-size: 18px !important;
}

.brand-text {
    font-family: var(--schmobin-font-heading) !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    color: #ffffff !important;
    letter-spacing: -0.025em !important;
    line-height: 1 !important;
}

.brand-accent {
    color: #818cf8 !important;
}

.brand-tag {
    font-family: var(--schmobin-font-mono) !important;
    font-size: 0.65rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #a1a1aa !important;
    margin-left: 2px !important;
}

/* WebRTC Status Pip Indicator (id="qos") */
#qos, .status-pip {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: var(--schmobin-emerald) !important;
    display: inline-block !important;
    box-shadow: 0 0 10px var(--schmobin-emerald) !important;
    position: relative !important;
    margin-left: 6px !important;
    animation: statusPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Header Join Room Pill Input */
#head1 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(18, 18, 23, 0.85) !important;
    border: 1px solid var(--schmobin-border) !important;
    border-radius: 12px !important;
    padding: 3px 5px 3px 12px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#head1:focus-within {
    border-color: var(--schmobin-indigo) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

#joinroomID {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-family: var(--schmobin-font-sans) !important;
    font-size: 0.85rem !important;
    outline: none !important;
    padding: 5px 8px !important;
    width: 180px !important;
}

#joinroomID::placeholder {
    color: #71717a !important;
}

#jumptoroomButton {
    background: linear-gradient(135deg, var(--schmobin-indigo) 0%, var(--schmobin-indigo-hover) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: var(--schmobin-font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.15s ease-in-out !important;
}

#jumptoroomButton:hover {
    filter: brightness(1.15) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Header Action Link Badges */
#head3a, #head9 {
    background: rgba(18, 18, 24, 0.8) !important;
    border: 1px solid var(--schmobin-border) !important;
    border-radius: 10px !important;
    padding: 4px 10px !important;
    font-family: var(--schmobin-font-mono) !important;
    font-size: 0.8rem !important;
}

#reshare, #inviteLinkURL {
    color: #818cf8 !important;
    text-decoration: none !important;
}

/* 3. Main Landing Screen Cards & Layout */
#mainmenu {
    max-width: 1360px !important;
    margin: 40px auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
}

.column.card, .column {
    background: rgba(20, 20, 26, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--schmobin-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: var(--schmobin-text) !important;
    padding: 30px 24px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.darktheme .column.card, .darktheme .column {
    background: rgba(20, 20, 26, 0.75) !important;
    border: 1px solid var(--schmobin-border) !important;
}

.column.card:hover:not(.skip-animation):not(.in-animation),
.column:hover:not(.skip-animation):not(.in-animation) {
    transform: translateY(-5px) scale(1.01) !important;
    border-color: var(--schmobin-border-hover) !important;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.8), 0 0 32px rgba(99, 102, 241, 0.18) !important;
}

/* Landing Card Titles */
.column h2, .column h2 span {
    font-family: var(--schmobin-font-heading) !important;
    font-weight: 800 !important;
    font-size: 1.35rem !important;
    color: #ffffff !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 14px !important;
}

/* Landing Card Icons */
.column.card > i, .largeDarkIcon {
    color: #818cf8 !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s !important;
}

.column.card:hover > i {
    transform: scale(1.12) !important;
    color: #a5b4fc !important;
}

/* Broadcast Action Buttons */
.gobutton, .gowebcam {
    background: linear-gradient(135deg, var(--schmobin-emerald) 0%, var(--schmobin-emerald-hover) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    font-family: var(--schmobin-font-heading) !important;
    font-weight: 800 !important;
    padding: 14px 28px !important;
    box-shadow: 0 8px 24px -4px rgba(16, 185, 129, 0.4) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.85rem !important;
}

.gobutton:hover, .gowebcam:hover:not([disabled]) {
    background: linear-gradient(135deg, #34d399 0%, var(--schmobin-emerald) 100%) !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 14px 32px -4px rgba(16, 185, 129, 0.5) !important;
}

.gobutton:disabled, .gowebcam:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    background: #27272a !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: #71717a !important;
}

/* Form Controls & Inputs */
input[type="text"], input[type="password"], select {
    background: rgba(14, 14, 18, 0.85) !important;
    border: 1px solid var(--schmobin-border) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-family: var(--schmobin-font-sans) !important;
    font-size: 0.9rem !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-sizing: border-box !important;
}

input[type="text"]:focus, input[type="password"]:focus, select:focus {
    border-color: var(--schmobin-indigo) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

/* Close & Back Button */
.outer.close {
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--schmobin-border) !important;
    color: var(--schmobin-text-muted) !important;
    font-family: var(--schmobin-font-heading) !important;
    font-weight: 700 !important;
    transition: all 0.2s !important;
}

.outer.close:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

/* 4. Camera Preview Monitor (Add your Camera screen) */
#previewWebcam {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
    background: #000000 !important;
    overflow: hidden !important;
}

.container-inner {
    background: rgba(16, 16, 22, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
}

.videoMenu, .form-group {
    background: rgba(16, 16, 22, 0.6) !important;
    border: 1px solid var(--schmobin-border) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin-top: 10px !important;
}

#guestTips {
    background: rgba(18, 18, 23, 0.8) !important;
    border: 1px solid var(--schmobin-border) !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

#guestTips li {
    color: #d4d4d8 !important;
}

#guestTips i {
    color: #818cf8 !important;
}

.randomRoomName {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--schmobin-border) !important;
    color: #818cf8 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.randomRoomName:hover {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #ffffff !important;
}

.roomnotes-toggle {
    background: transparent !important;
    border: 1px solid var(--schmobin-border) !important;
    color: #a1a1aa !important;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.roomnotes-toggle:hover {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 5. Floating Control Dock (#controlButtons) */
#controlButtons {
    background: rgba(14, 14, 18, 0.88) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9999px !important;
    padding: 7px 16px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999 !important;
}

#controlButtons .float {
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: #e4e4e7 !important;
    cursor: pointer !important;
}

#controlButtons .float:hover {
    background: rgba(99, 102, 241, 0.25) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

/* Mute Microphone (Toggle active / inactive) */
#mutebutton.red, #mutebutton[data-state="muted"] {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #f87171 !important;
}

/* Mute Video Camera (Toggle active / inactive) */
#mutevideobutton.red, #mutevideobutton[data-state="muted"] {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #f87171 !important;
}

/* Hangup Button */
#hangupbutton, #hangupbutton2 {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}

#hangupbutton:hover, #hangupbutton2:hover {
    background: var(--schmobin-rose) !important;
    border-color: var(--schmobin-rose) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4) !important;
}

/* Settings button hover rotate */
#settingsbutton:hover i {
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

/* 6. Video Elements & Guest Frames */
video {
    border-radius: 12px;
}

.video-label, .guest-label {
    font-family: var(--schmobin-font-sans) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    background: rgba(9, 9, 11, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    color: #ffffff !important;
}

/* 7. Hide 3rd-Party Promotional & Distracting Tiles */
#container-5, #container-6, #container-7, #container-8,
#container-9, #container-10, #container-11, #container-12, 
#container-13, #container-14, #container-15, #container-16,
#container-17, #container-18, #container-19, #container-20,
#container-21, #container-22, #legal, #dropButton, #helpbutton, #reportbutton, #info {
    display: none !important;
}

/* 8. Modern Custom Studio Footer */
.schmobin-studio-footer {
    text-align: center;
    padding: 40px 16px 50px;
    font-size: 0.75rem;
    color: #71717a;
    font-family: var(--schmobin-font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.schmobin-studio-footer .badge-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--schmobin-border);
    border-radius: 9999px;
    padding: 5px 16px;
}

.schmobin-studio-footer .badge-row span.indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--schmobin-emerald);
    box-shadow: 0 0 8px var(--schmobin-emerald);
}

.schmobin-studio-footer a {
    color: #818cf8;
    text-decoration: none;
    transition: color 0.2s;
}

.schmobin-studio-footer a:hover {
    color: #a5b4fc;
    text-decoration: underline;
}