/* FOURI Global Styles */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #02040a;
    color: #f8fafc;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.4);
}

.chat-input-wrapper {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.chat-input-wrapper:focus-within {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.05), 0 20px 40px rgba(0, 0, 0, 0.5);
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ☀️ AYDINLIK TEMA (LIGHT MODE) OVERRIDES */
body.light-theme {
    background-color: #f4f7fb !important;
    color: #0f172a !important;
}

body.light-theme aside,
body.light-theme .bg-\[\#050814\],
body.light-theme .bg-\[\#0a0c12\] {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .bg-\[\#070a18\] {
    background-color: #f8fafc !important;
}

body.light-theme .text-white {
    color: #0f172a !important;
}

body.light-theme .text-gray-400 {
    color: #64748b !important;
}

body.light-theme .text-gray-300 {
    color: #475569 !important;
}

body.light-theme .text-gray-200 {
    color: #334155 !important;
}

body.light-theme .border-white\/5,
body.light-theme .border-white\/10,
body.light-theme .border-white\/20 {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .bg-white\/5,
body.light-theme .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
}

body.light-theme .bg-black\/50,
body.light-theme .bg-black\/40,
body.light-theme .bg-black\/30 {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .chat-input-wrapper {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .chat-input-wrapper:focus-within {
    background: #ffffff !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.1) !important;
}

body.light-theme textarea,
body.light-theme input[type="text"],
body.light-theme input[type="email"],
body.light-theme input[type="date"],
body.light-theme select {
    color: #0f172a !important;
}

body.light-theme textarea::placeholder,
body.light-theme input::placeholder {
    color: #94a3b8 !important;
}

body.light-theme #auth-card h3,
body.light-theme #settings-card h4,
body.light-theme h1,
body.light-theme h2 {
    color: #0f172a !important;
}

.bg-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, rgba(59, 130, 246, 0.03) 40%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

.sidebar-nav-btn,
.sidebar-primary-btn,
.sidebar-list-item {
    position: relative;
}

.sidebar-nav-btn:hover,
.sidebar-primary-btn:hover,
.sidebar-list-item:hover {
    transform: translateX(1px);
}

.sidebar-current {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.sidebar-current svg {
    color: #34d399;
}

.sidebar-list-item.active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

#left-sidebar .custom-scrollbar {
    scrollbar-width: thin;
}

body.light-theme .sidebar-current {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

.void-type-btn {
    padding: 10px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    color: #9ca3af;
    font-size: 11px;
    font-weight: 700;
    transition: .18s ease;
}

.void-type-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .16);
}

.void-chip {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
    color: #d1d5db;
    font-size: 10px;
    font-weight: 700;
    transition: .18s ease;
}

.void-chip:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
}

/* FOURI Mobile Hardening */
@media (max-width: 767px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body {
        min-height: 100dvh;
        height: auto !important;
        overflow-y: auto !important;
    }

    #left-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(84vw, 320px) !important;
        max-width: 320px;
        height: 100dvh !important;
        z-index: 90 !important;
        box-shadow: 18px 0 48px rgba(0, 0, 0, 0.45);
    }

    #right-panel {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        z-index: 95 !important;
    }

    main {
        min-height: 100dvh;
        width: 100%;
    }

    main > div:first-child {
        min-width: 0;
        width: 100%;
    }

    header {
        padding: 12px !important;
    }

    header .pointer-events-auto {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    #languageSwitcher {
        min-width: 74px !important;
        font-size: 11px !important;
        padding-left: 12px !important;
        padding-right: 28px !important;
    }

    #home-elements {
        padding-top: 8px;
    }

    #welcome-greeting {
        font-size: 1.7rem !important;
        line-height: 1.2 !important;
    }

    #chat-history,
    #input-wrapper,
    #memory-warning {
        max-width: 100% !important;
    }

    #chat-history {
        padding-left: 2px;
        padding-right: 2px;
        padding-bottom: 12px;
    }

    #input-wrapper {
        border-radius: 24px !important;
        padding: 10px !important;
        margin-top: 10px !important;
    }

    #main-chat-input {
        font-size: 16px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 12px !important;
    }

    #model-select {
        max-width: 110px;
        font-size: 12px !important;
    }

    #miniToolsBtn,
    #shareBtn,
    #chatOptionsBtn {
        width: 40px;
        height: 40px;
    }

    #open-left-btn {
        top: 12px !important;
        left: 12px !important;
    }

    #auth-card,
    #help-card,
    #settings-card,
    #pricing-card,
    #projects-card,
    #company-card,
    #my-items-card,
    #app-store-card {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 90dvh !important;
        overflow-y: auto !important;
        padding: 18px !important;
        border-radius: 24px !important;
    }

    #void-game-shell {
        width: calc(100vw - 12px) !important;
        height: 92dvh !important;
        margin-top: 2dvh !important;
        border-radius: 24px !important;
    }

    #void-game-shell > div:last-child {
        display: block !important;
        height: calc(100% - 73px) !important;
    }

    #void-game-shell canvas {
        min-height: 48dvh;
    }

    .text-3xl.md\:text-5xl {
        font-size: 1.7rem !important;
    }

    .text-xl.md\:text-3xl {
        font-size: 1rem !important;
    }
}


/* VOID mobile hardening */
@media (max-width: 767px) {
    #life-void {
        padding-bottom: 10px;
    }

    #life-void > .grid.grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #life-void #void-mode-play .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    #life-void #void-mode-build .grid.grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #life-void #void-mode-build .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    #life-void .void-type-btn {
        min-height: 44px;
        font-size: 12px;
        line-height: 1.2;
    }

    #life-void .void-chip {
        padding: 8px 12px;
        font-size: 11px;
    }

    #life-void textarea,
    #void-build-note {
        font-size: 16px !important;
        min-height: 118px;
    }

    #life-void .rounded-xl,
    #life-void .rounded-lg {
        border-radius: 16px !important;
    }

    #life-void p.text-\[10px\] {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    #life-void p.text-xs,
    #life-void span.text-\[10px\] {
        font-size: 12px !important;
    }

    #void-game-shell {
        width: calc(100vw - 10px) !important;
        height: 94dvh !important;
        margin-top: 1dvh !important;
        border-radius: 20px !important;
    }

    #void-game-shell > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 12px !important;
    }

    #void-game-shell > div:first-child > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    #void-game-shell > div:first-child > div:last-child > * {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }

    #void-game-shell > div:first-child > div:last-child > button:last-child {
        flex: 0 0 42px;
    }

    #void-game-shell > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100% - 112px) !important;
    }

    #void-game-shell > div:last-child > div:first-child {
        min-height: 42dvh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #void-game-shell canvas {
        flex: 1 1 auto;
        min-height: 32dvh !important;
    }

    #void-game-shell > div:last-child > div:first-child > div.absolute {
        position: static !important;
        margin: 10px 12px 0 !important;
        max-width: none !important;
        width: auto !important;
    }

    #void-game-shell > div:last-child > div:last-child {
        width: 100% !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        overflow-y: auto !important;
        padding: 12px !important;
    }
}


/* VOID touch support */
#void-game-overlay,
#void-game-shell {
    overscroll-behavior: contain;
}

#void-game-canvas {
    touch-action: none;
    -ms-touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}