/* Nav Pill remains high-contrast for visibility against the new intensity */
.nav-pill {
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.04);
}

/* 1. Base State: The Grey Handle */
#notch-screen {
    width: 60px;
    height: 6px;
    background-color: #d1d5db;
    border-radius: 999px;
    margin-top: 12px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide content when it's just a handle */
#collapsed-info, #progress-container, #expanded-info { 
    opacity: 0; 
    pointer-events: none; 
}

#sticky-notch-bar{
    height: 70px;
}

#notch-logo{
    display: none;
}


/* 2. Stuck State: Reveal Progress + Collapsed Info */
#sticky-notch-bar.is-stuck #notch-screen {
    width: auto;
    min-width: 170px;
    height: 34px;
    background-color: #15171a; /* Slightly lighter than the section background */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Slightly brighter border */
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.8), /* Deep drop shadow to detach it from the background */
        inset 0 1px 1px rgba(255, 255, 255, 0.1); /* Subtle top highlight to give a 3D glass edge */
    backdrop-filter: blur(10px); /* Optional: Adds a glassmorphism effect if anything passes behind it */
    -webkit-backdrop-filter: blur(10px);
}

#sticky-notch-bar.is-stuck #progress-container,
#sticky-notch-bar.is-stuck #collapsed-info {
    opacity: 1;
    pointer-events: auto;
}

/* 3. Expanded State: Keep Progress Visible */
#notch-screen.is-expanded {
    width: 440px !important;
    height: 54px !important;
    background-color: #080808 !important;
}

#notch-screen.is-expanded #collapsed-info { display: none; }
#notch-screen.is-expanded #progress-container,
#notch-screen.is-expanded #expanded-info {
    opacity: 1;
    display: flex;
    pointer-events: auto;
}

/* Typography Density */
#expanded-info .sys-label { font-size: 7px; color: rgba(255,255,255,0.3); letter-spacing: 0.2em; line-height: 1; }
#expanded-info .sys-val { font-size: 9px; color: white; letter-spacing: 0.1em; line-height: 1; margin-top: 2px; }
#expanded-info nav a { font-size: 9px; color: rgba(255,255,255,0.4); letter-spacing: 0.15em; text-decoration: none; transition: color 0.2s; }
#expanded-info nav a:hover { color: white; }

#top-nav {
    opacity: 1;
    transform: translateY(0);
    /* 0.1s is the limit for responsive UI */
    will-change: opacity, transform;
}

#top-nav.fade-out {
    opacity: 0;
    transform: translateY(-15px); /* Short, quick slide */
    pointer-events: none;
}

#notch-status-text, #status-text{
    font-size: 10px;
    padding-right: 12px !important;
}

#os-wallpaper {
    overflow: hidden;
    position: absolute;
    inset: 0;
    z-index: 10;
    background-color: #000;
}

/* Update this in your <style> block */
#os-wallpaper img {
    width: 100%;
    height: 200%;
    object-fit: cover;
    position: absolute;
    bottom: 0;
    top: auto;
    left: 0;
    opacity: 1;
    will-change: transform;

    animation: cinematicPan 10s ease-in-out infinite alternate;
}

@keyframes cinematicPan {
    0% {
        transform: translate3d(0, 50%, 0);
    }
    100% {
        transform: translate3d(0, 0%, 0);
    }
}

.wallpaper-moving {
    /* Changed to 15s for a faster, more noticeable "video" pace */
    animation: cinematicPan 15s ease-in-out infinite alternate;
}

/* Chrome, Safari and Opera hide scrollbar */
body::-webkit-scrollbar {
    /* display: none; */
}
/* Pill nav styles */


/* Bento Glass Cards */
.bento-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 32px 60px -15px rgba(0,0,0,0.06);
}

/* AI Prompt Layout States */
.intro-state {
    transform: translate(-50%, calc(50vh - 54rem)) scale(1.05) !important;
}
.docked-state {
    transform: translate(-50%, 0) scale(1) !important;
}

/* Animations */
.pop-in {
    animation: popIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes popIn {
    0% { transform: scale(0.9) translateY(4px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.fade-slide-up {
    animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeSlideUp {
    0% { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.fade-out {
    animation: fadeOut 0.4s ease-out forwards;
}
@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.98); }
}
.typing-cursor::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background-color: #d1d5db;
    vertical-align: text-bottom;
    margin-left: 4px;
    animation: blink 1s step-start infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* OS Simulation Specifics */
.os-window-anim {
    animation: osWinPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}
@keyframes osWinPop {
    0% { transform: scale(0.97) translateY(10px); opacity: 0; box-shadow: 0 0 0 rgba(0,0,0,0); }
    100% { transform: scale(1) translateY(0); opacity: 1; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15); }
}

/* The human-like cursor transition */
.human-cursor-move {
    transition: left 0.7s cubic-bezier(0.25, 1, 0.35, 1), 
                top 0.7s cubic-bezier(0.25, 1, 0.35, 1);
    will-change: left, top;
}

/* Inline Chip Styles */
.inline-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    vertical-align: baseline;
    margin: 0 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    opacity: 0; /* for animation */
}

/* Subtle grid pattern for OS background */
.os-bg-grid {
    background-size: 24px 24px;
    background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
}

/* Feature Showcase Utilities */
.feature-container {
    perspective: 1000px;
}

.feature-visual {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.feature-text-block.active {
    opacity: 1;
    transform: translateX(0);
}

.feature-text-block:not(.active) {
    opacity: 0.2;
    transform: translateX(-10px);
}

/* Animation for page entry */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-wrapper {
    animation: pageFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.client-view-img{
    width: 5050px !important;
    height: 5500px !important;
}

@media (max-width: 767px) {
    #os-preview-window {
        width: 100% !important;
        min-height: 90% !important;
        margin-top: 0 !important;
        transform: none !important;
        top: -5px !important;
    }
}

#os-preview-window {
    overflow: visible !important;
}




/* Pill nav styles */
.nav-pill {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 20px -2px rgba(0,0,0,0.03);
}

/* Bento Glass Cards */
.bento-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 32px 60px -15px rgba(0,0,0,0.06);
}

/* AI Prompt Layout States */
.intro-state {
    transform: translate(-50%, calc(50vh - 54rem)) scale(1.05) !important;
}
.docked-state {
    transform: translate(-50%, 0) scale(1) !important;
}

/* Essential Animations */
.pop-in { animation: popIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes popIn {
    0% { transform: scale(0.9) translateY(4px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.fade-slide-up { animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes fadeSlideUp {
    0% { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.typing-cursor::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background-color: #d1d5db;
    vertical-align: text-bottom;
    margin-left: 4px;
    animation: blink 1s step-start infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.os-window-anim {
    animation: osWinPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}
@keyframes osWinPop {
    0% { transform: scale(0.97) translateY(10px); opacity: 0; box-shadow: 0 0 0 rgba(0,0,0,0); }
    100% { transform: scale(1) translateY(0); opacity: 1; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15); }
}

.human-cursor-move {
    transition: left 0.7s cubic-bezier(0.25, 1, 0.35, 1), top 0.7s cubic-bezier(0.25, 1, 0.35, 1);
    will-change: left, top;
}

.inline-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    vertical-align: baseline;
    margin: 0 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    opacity: 0;
}

.os-bg-grid {
    background-size: 24px 24px;
    background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
}

/* Premium Scroll Reveal Utilities */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-text-highlight {
    color: #d1d5db;
    transition: color 0.8s ease;
}

.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    color: #111315 !important;
}

/* =========================
   MOBILE FRIENDLY OVERRIDES
   ========================= */

@media (max-width: 1024px) {
    #os-preview-window {
        margin-top: 0 !important;
    }

    #perception-carousel > div {
        min-width: 92vw !important;
    }
}

@media (max-width: 767px) {
    body {
        background-attachment: scroll;
    }

    #top-nav {
        padding: 12px 12px !important;
        align-items: center !important;
    }

    #top-nav > div:first-child {
        max-width: calc(100vw - 24px);
        overflow-x: auto;
        scrollbar-width: none;
    }

    #top-nav > div:first-child::-webkit-scrollbar {
        display: none;
    }

    header {
        min-height: 680px !important;
        padding-top: 76px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 12px !important;
    }

    #os-preview-window {
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
        transform: none !important;
    }

    #hero-header-content {
        margin-top: 78px !important;
        margin-bottom: 20px !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    #hero-download-btn {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    #hero-download-btn button {
        width: 100% !important;
        justify-content: center !important;
    }

    #ai-prompt-container {
        width: calc(100% - 16px) !important;
        max-width: none !important;
        bottom: 12px !important;
        gap: 10px !important;
        transform: translate(-50%, 0) scale(1) !important;
    }

    #intro-logo {
        display: none !important;
    }

    /* top toolbar strip */
    #ai-prompt-container > div:first-child {
        width: 100% !important;
        height: auto !important;
        min-height: 52px !important;
        padding: 8px 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        justify-content: flex-start !important;
        scrollbar-width: none;
    }

    #ai-prompt-container > div:first-child::-webkit-scrollbar {
        display: none;
    }

    /* prompt row */
    #ai-prompt-container > div:last-child {
        width: 100% !important;
        min-height: 64px !important;
        height: auto !important;
        border-radius: 24px !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        align-items: center !important;
    }

    #animated-prompt {
        font-size: 13px !important;
    }

    #animated-cards {
        top: calc(100% + 8px) !important;
    }

    #notch-screen {
        width: 220px !important;
        height: 34px !important;
    }

    #notch-screen .text-\[10px\],
    #notch-screen #status-text,
    #notch-screen #notch-logo {
        font-size: 9px !important;
    }

    .dockable-section {
        min-height: auto !important;
        padding-top: 70px !important;
        padding-bottom: 50px !important;
    }

    .dockable-section .max-w-\[1400px\],
    .dockable-section .max-w-\[1300px\],
    .dockable-section .max-w-\[1100px\],
    .dockable-section .max-w-\[1000px\] {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #features .relative.w-full.h-\[clamp\(40vh\,55vh\,65vh\)\],
    #execution .relative.w-full.h-\[clamp\(40vh\,55vh\,65vh\)\],
    #integrations .w-full.col-span-1.md\:col-span-2.relative.h-\[clamp\(30vh\,45vh\,50vh\)\],
    #security .relative.w-full.h-\[clamp\(40vh\,50vh\,60vh\)\] {
        min-height: 360px !important;
        height: auto !important;
    }

    #features .absolute.bottom-6.right-6.w-\[340px\] {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        width: 100% !important;
        margin-top: 16px !important;
    }

    #execution .absolute.w-6.h-6.z-40 {
        display: none !important;
    }

    #perception-carousel {
        gap: 14px !important;
        padding-bottom: 8px !important;
    }

    #perception-carousel > div {
        min-width: 92vw !important;
        height: 380px !important;
    }

    #integrations .grid.grid-cols-1.md\:grid-cols-4 {
        gap: 24px !important;
    }

    #int-any-app,
    #int-browser,
    #int-proactive,
    #int-legacy,
    #int-ide {
        min-height: 320px !important;
    }

    #qa .qa-trigger {
        padding: 20px !important;
    }

    #qa .qa-content > div {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 20px !important;
    }

    #cta .flex.flex-col.sm\:flex-row {
        width: 100% !important;
    }

    #cta .flex.flex-col.sm\:flex-row button {
        width: 100% !important;
    }

    #pricing-view {
        padding-top: 100px !important;
        padding-bottom: 80px !important;
    }

    #pricing-view .grid.grid-cols-1.md\:grid-cols-3 {
        gap: 18px !important;
    }

    #pricing-view section.max-w-\[1050px\] {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #auth-modal .modal-content {
        max-width: calc(100vw - 24px) !important;
        padding: 24px 18px !important;
        border-radius: 24px !important;
    }

    #pause-btn {
        bottom: 14px !important;
        right: 14px !important;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    header {
        min-height: 620px !important;
    }

    #hero-header-content p {
        font-size: 10px !important;
        margin-bottom: 10px !important;
    }

    #hero-header-content h1 {
        font-size: clamp(2.2rem, 11vw, 3.2rem) !important;
        line-height: 1.05 !important;
    }

    #ai-prompt-container {
        bottom: 10px !important;
    }

    #ai-prompt-container > div:first-child {
        padding: 8px !important;
        border-radius: 18px !important;
    }

    #ai-prompt-container > div:last-child {
        padding: 8px 10px !important;
        min-height: 58px !important;
        border-radius: 20px !important;
    }

    #notch-screen {
        width: 200px !important;
    }

    #perception-carousel > div {
        height: 340px !important;
    }

    #top-nav .nav-pill {
        border-radius: 18px !important;
    }
}

@media (max-width: 767px) {
    #top-nav {
        padding: 12px !important;
        align-items: center !important;
        gap: 10px;
    }

    #top-nav > .nav-pill:first-child {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 58px);
        overflow: hidden;
    }

    #top-nav > .nav-pill:first-child a:first-child {
        flex-shrink: 0;
    }

    #mobile-nav-panel.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    #pricing-view{
        margin-top: 3.5em;
    }
}

#mobile-nav-panel{
    margin-top: -7px;
    background: #ffffff;
    border-radius: 20px;
}

@media (max-width: 767px) {

    /* BOTH toolbar versions */
    #ai-prompt-container > div.flex.items-center.gap-2.w-fit,
    #full-toolbar-dock {
        width: auto !important;
        max-width: calc(100vw - 32px) !important;
        padding: 0 10px !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    /* Hide DELAY button in BOTH toolbars */
    #ai-prompt-container > div.flex.items-center.gap-2.w-fit > div:nth-child(3) > button:nth-child(4),
    #full-toolbar-dock > div:nth-child(3) > button:nth-child(4) {
        display: none !important;
    }

    /* Hide history group */
    #ai-prompt-container > div.flex.items-center.gap-2.w-fit > div:nth-child(5),
    #full-toolbar-dock > div:nth-child(5) {
        display: none !important;
    }

    /* Hide divider after history group */
    #ai-prompt-container > div.flex.items-center.gap-2.w-fit > div:nth-child(6),
    #full-toolbar-dock > div:nth-child(6) {
        display: none !important;
    }

    /* Hide multiclient/settings group */
    #ai-prompt-container > div.flex.items-center.gap-2.w-fit > div:nth-child(7),
    #full-toolbar-dock > div:nth-child(7) {
        display: none !important;
    }

    /* Hide divider before collapse button */
    #ai-prompt-container > div.flex.items-center.gap-2.w-fit > div:nth-child(8),
    #full-toolbar-dock > div:nth-child(8) {
        display: none !important;
    }

    /* Keep collapse button visible in BOTH */
    #ai-prompt-container > div.flex.items-center.gap-2.w-fit > #btn-hide-full-toolbar,
    #full-toolbar-dock > #btn-hide-full-toolbar {
        display: flex !important;
        flex-shrink: 0 !important;
        opacity: 1 !important;
    }

    /* Keep remaining children compact */
    #ai-prompt-container > div.flex.items-center.gap-2.w-fit > *,
    #full-toolbar-dock > * {
        flex-shrink: 0 !important;
    }

    /* Tighten spacing in kept groups */
    #ai-prompt-container > div.flex.items-center.gap-2.w-fit > div:nth-child(1),
    #full-toolbar-dock > div:nth-child(1) {
        gap: 8px !important;
    }

    #ai-prompt-container > div.flex.items-center.gap-2.w-fit > div:nth-child(3),
    #full-toolbar-dock > div:nth-child(3) {
        gap: 2px !important;
    }

    /* Tighten visible divider spacing */
    #ai-prompt-container > div.flex.items-center.gap-2.w-fit > .w-\[1px\],
    #full-toolbar-dock > .w-\[1px\] {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }
}

@media (max-width: 767px) {

    /* message/status pill container */
    #notification-log {
        gap: 8px !important;
        padding-right: 4px !important;
        min-width: 0 !important;
    }

    /* middle text area */
    #notification-log > .flex.flex-col.items-center.justify-center.w-full.mt-0\.5 {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    /* top message line */
    #notification-log > .flex.flex-col.items-center.justify-center.w-full.mt-0\.5 > span:first-child {
        max-width: 100% !important;
    }

    /* success text line */
    #response-text {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* right-side hamburger / logs button */
    #notification-log > button[title="View Logs"] {
        margin-right: 0 !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        width: 30px !important;
        height: 30px !important;
    }

    /* left spacer is too wide on mobile */
    #notification-log > .w-8.shrink-0 {
        width: 10px !important;
        min-width: 10px !important;
    }

    
    .mobileNoShow{
        display: none !important;
    }

    #hero-header-content{
        margin-top: 7em !important;
    }
}

@media (max-width: 767px) {
    #hero-download-btn {
        flex-direction: column !important;
        align-items: center !important;
        width: auto !important;
        gap: 10px !important;
    }

    #hero-download-btn button {
        width: auto !important;
        min-width: 260px !important;
        max-width: none !important;
        justify-content: center !important;
        padding: 12px 22px !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        border-radius: 9999px !important;
        gap: 10px !important;
    }

    #hero-download-btn button svg {
        width: 18px !important;
        height: 18px !important;
    }
}

@media (max-width: 767px) {
    #top-nav {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    #top-nav.fade-out {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .nav-pill{
        background: #fff;
    }
}

@media (max-width: 767px) {
    div:has(> #obvra-top-notch) {
        top: 48px !important; /* move it down */
    }

    #os-wallpaper img {
        width: 100%;
        height: 120%;
        object-fit: cover;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 1;
        will-change: transform;
        animation: cinematicPan 15s ease-in-out infinite alternate;
    }
    
    @keyframes cinematicPan {
        0% {
            transform: translate3d(0, -10%, 0);
        }
        100% {
            transform: translate3d(0, 0%, 0);
        }
    }
}