/*
 * ORBITRON OS shared responsive layer
 * Kept separate so every static module receives the same mobile behavior.
 */
:root {
    --orbitron-mobile-gutter: clamp(12px, 3vw, 24px);
}

/* Neural boot sequence: intense, readable, and capped at roughly two seconds. */
.neural-splash {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 46%, rgba(8, 145, 178, 0.2), transparent 25%),
        radial-gradient(circle at 50% 50%, #06152d 0%, #020617 48%, #01030b 100%);
}

.neural-splash::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(34, 211, 238, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.08) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 72%);
    mask-image: radial-gradient(circle at center, black, transparent 72%);
    animation: neuralGrid 2.05s ease-out both;
}

.neural-splash::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(transparent 0%, rgba(103, 232, 249, 0.16) 48%, transparent 52%);
    transform: translateY(-100%);
    animation: neuralScan 1.7s 0.08s ease-out both;
}

.neural-splash-core {
    position: relative;
    width: 112px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(103, 232, 249, 0.85);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.32), rgba(2, 6, 23, 0.8) 60%);
    box-shadow:
        0 0 18px rgba(34, 211, 238, 0.85),
        0 0 65px rgba(6, 182, 212, 0.5),
        inset 0 0 28px rgba(34, 211, 238, 0.38);
    animation: neuralCore 2.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.neural-splash-core::before,
.neural-splash-core::after {
    content: '';
    position: absolute;
    inset: -16px;
    border: 1px solid rgba(34, 211, 238, 0.42);
    border-radius: inherit;
    animation: neuralRing 2.05s ease-out both;
}

.neural-splash-core::after {
    inset: -31px;
    border-color: rgba(59, 130, 246, 0.28);
    animation-delay: 0.1s;
}

.neural-lightning {
    position: absolute;
    z-index: 2;
    width: 3px;
    height: 148px;
    opacity: 0;
    filter: drop-shadow(0 0 5px #67e8f9) drop-shadow(0 0 14px #06b6d4);
    background: linear-gradient(180deg, transparent, #e0f2fe 18%, #22d3ee 50%, #3b82f6 82%, transparent);
    clip-path: polygon(45% 0, 72% 0, 57% 38%, 100% 38%, 28% 100%, 43% 55%, 0 55%);
    transform-origin: center;
}

.neural-lightning.left {
    left: calc(50% - 82px);
    top: calc(50% - 77px);
    transform: rotate(-37deg);
    animation: lightningStrike 1.35s 0.12s ease-out both;
}

.neural-lightning.right {
    right: calc(50% - 82px);
    top: calc(50% - 77px);
    transform: rotate(37deg) scaleX(-1);
    animation: lightningStrikeRight 1.35s 0.3s ease-out both;
}

.neural-splash-shockwave {
    position: absolute;
    z-index: 1;
    width: 210px;
    height: 210px;
    border: 2px solid rgba(103, 232, 249, 0.8);
    border-radius: 999px;
    opacity: 0;
    animation: neuralShockwave 1.55s 0.38s ease-out both;
}

.neural-splash-sparks {
    position: absolute;
    z-index: 2;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #a5f3fc;
    box-shadow:
        68px -54px 0 #22d3ee,
        -70px -42px 0 #60a5fa,
        86px 22px 0 #67e8f9,
        -82px 32px 0 #38bdf8,
        28px 82px 0 #3b82f6,
        -34px 78px 0 #22d3ee;
    animation: neuralSparks 1.55s 0.2s ease-out both;
}

.neural-splash-title {
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.55), 0 0 34px rgba(37, 99, 235, 0.45);
    animation: neuralTitle 1s 0.18s ease-out both;
}

.neural-splash-status {
    animation: neuralStatus 1s 0.38s ease-out both;
}

@keyframes neuralGrid {
    0% { opacity: 0; transform: scale(1.15); }
    100% { opacity: 0.42; transform: scale(1); }
}

@keyframes neuralScan {
    0% { opacity: 0; transform: translateY(-100%); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translateY(100%); }
}

@keyframes neuralCore {
    0% { opacity: 0; transform: scale(0.35); }
    45% { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes neuralRing {
    0% { opacity: 0; transform: scale(0.55); }
    48% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes lightningStrike {
    0%, 12% { opacity: 0; transform: translateY(-18px) rotate(-37deg) scaleY(0.25); }
    18% { opacity: 1; }
    24%, 31% { opacity: 0.2; }
    38% { opacity: 1; }
    48%, 100% { opacity: 0; transform: translateY(18px) rotate(-37deg) scaleY(1); }
}

@keyframes lightningStrikeRight {
    0%, 12% { opacity: 0; transform: translateY(-18px) rotate(37deg) scaleX(-1) scaleY(0.25); }
    18% { opacity: 1; }
    24%, 31% { opacity: 0.2; }
    38% { opacity: 1; }
    48%, 100% { opacity: 0; transform: translateY(18px) rotate(37deg) scaleX(-1) scaleY(1); }
}

@keyframes neuralShockwave {
    0% { opacity: 0.9; transform: scale(0.35); }
    100% { opacity: 0; transform: scale(1.55); }
}

@keyframes neuralSparks {
    0% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    32% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.3) rotate(35deg); }
}

@keyframes neuralTitle {
    0% { opacity: 0; letter-spacing: 0.45em; transform: translateY(8px); }
    100% { opacity: 1; letter-spacing: 0.16em; transform: translateY(0); }
}

@keyframes neuralStatus {
    0% { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

button,
a,
[role="button"],
.app-item,
.outer-nav-item {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Mobile sidebars must not need a blocking backdrop to be usable. */
.overlay,
.sidebar-overlay,
#overlay,
#sidebar-overlay {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* The mobile catalog is a drawer only; it must never create a page backdrop. */
.orbitron-mobile-drawer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto;
}

@media (max-width: 768px) {
    html,
    body {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        overscroll-behavior-x: none;
    }

    .dashboard,
    .main-content,
    .workspace,
    .chat-area,
    .content-area,
    .main-container {
        min-width: 0;
        max-width: 100%;
    }

    .topnav,
    .top-bar,
    .header,
    .app-header {
        padding-left: var(--orbitron-mobile-gutter);
        padding-right: var(--orbitron-mobile-gutter);
    }

    .topnav button,
    .top-bar button,
    #menuBtn,
    #toggleBtn,
    .toggle-btn,
    .brand-toggle,
    .theme-toggle,
    .icon-btn,
    .btn {
        min-width: 44px;
        min-height: 44px;
    }

    .sidebar,
    .outer-sidebar {
        max-width: min(86vw, 320px);
    }

    .app-item,
    .outer-nav-item,
    .outer-nav-item button {
        min-height: 44px;
    }

    .tab-strip,
    .tabs,
    .top-tabs {
        max-width: 100vw;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    iframe,
    .app-frame,
    #main-iframe {
        max-width: 100%;
    }

    input,
    select,
    textarea {
        max-width: 100%;
        font-size: 16px;
    }

    .orbitron-mobile-drawer {
        max-width: 86vw;
        box-shadow: -12px 0 30px rgba(0, 0, 0, 0.22);
    }

    .neural-splash-core {
        width: 94px;
        height: 94px;
    }

    .neural-lightning {
        height: 124px;
    }

    .neural-splash > .relative {
        width: 100%;
        padding: 0 16px;
    }

    .neural-splash-title {
        font-size: clamp(1.45rem, 8vw, 1.875rem);
        white-space: nowrap;
    }

    .neural-splash-status {
        font-size: 8px;
        letter-spacing: 0.2em;
    }
}

@media (max-width: 380px) {
    .neural-splash-core {
        width: 84px;
        height: 84px;
        margin-bottom: 28px;
    }

    .neural-lightning {
        height: 110px;
    }

    .neural-lightning.left {
        left: calc(50% - 68px);
    }

    .neural-lightning.right {
        right: calc(50% - 68px);
    }

    .neural-splash-shockwave {
        width: 174px;
        height: 174px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}