/*
 * DGxOne Responsive Layout Ownership
 *
 * Loaded last. Owns only responsive geometry, spacing, overflow,
 * touch sizing, and safe-area behavior.
 *
 * It does not own workspace logic, runtime behavior, navigation
 * events, Knowledge Vault ingestion, Settings, or conversation state.
 */

/* ------------------------------------------------------------
   Universal geometry protection
   ------------------------------------------------------------ */

body.dgx-v2,
body.dgx-v2 *,
body.dgx-v2 *::before,
body.dgx-v2 *::after {
    box-sizing: border-box;
}

body.dgx-v2 {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    overflow: hidden;
}

body.dgx-v2 img,
body.dgx-v2 video,
body.dgx-v2 canvas,
body.dgx-v2 svg {
    max-width: 100%;
}

body.dgx-v2 button,
body.dgx-v2 input,
body.dgx-v2 textarea,
body.dgx-v2 select {
    max-width: 100%;
}

body.dgx-v2 .dgx-app,
body.dgx-v2 .dgx-app-shell,
body.dgx-v2 .dgx-shell,
body.dgx-v2 #app,
body.dgx-v2 #workspaceHost,
body.dgx-v2 .dgx-workspace-host,
body.dgx-v2 #workspaceCanvas,
body.dgx-v2 .dgx-workspace-canvas,
body.dgx-v2 #workspaceCanvas > *,
body.dgx-v2 .dgx-main,
body.dgx-v2 main {
    min-width: 0 !important;
    min-height: 0 !important;
}

body.dgx-v2 #workspaceCanvas,
body.dgx-v2 .dgx-workspace-canvas {
    overflow: hidden !important;
}

/* Never allow content to create a horizontal page overflow. */

body.dgx-v2 .dgx-command-surface,
body.dgx-v2 .dgx-command-header,
body.dgx-v2 .dgx-command-stream,
body.dgx-v2 .dgx-command-footer,
body.dgx-v2 .dgx-command-composer,
body.dgx-v2 .knowledge-workspace,
body.dgx-v2 .dgx-knowledge-workspace,
body.dgx-v2 .settings-workspace,
body.dgx-v2 .dgx-settings-workspace {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.dgx-v2 .dgx-user-message,
body.dgx-v2 .dgx-system-message,
body.dgx-v2 .dgx-message-copy,
body.dgx-v2 .dgx-attachment-copy,
body.dgx-v2 td,
body.dgx-v2 th,
body.dgx-v2 p,
body.dgx-v2 li {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ------------------------------------------------------------
   Balanced desktop and tablet spacing
   ------------------------------------------------------------ */

@media (min-width: 901px) {
    body.dgx-v2 .dgx-sidebar {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        max-height: 100% !important;
    }

    body.dgx-v2 #workspaceCanvas > * {
        padding-inline:
            clamp(0px, 0.6vw, 12px);
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
    body.dgx-v2 .dgx-sidebar {
        width: clamp(184px, 19vw, 224px) !important;
    }

    body.dgx-v2 .dgx-nav-item {
        min-width: 0;
    }

    body.dgx-v2 .dgx-project-card,
    body.dgx-v2 .dgx-founder-card {
        padding-inline: 14px !important;
    }
}

/* ------------------------------------------------------------
   Mobile and tablet shell
   ------------------------------------------------------------ */

@media (max-width: 900px) {
    html,
    body,
    body.dgx-v2 {
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        overflow: hidden !important;
    }

    body.dgx-v2 .dgx-app,
    body.dgx-v2 .dgx-app-shell,
    body.dgx-v2 .dgx-shell {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows:
            auto
            minmax(0, 1fr) !important;

        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    body.dgx-v2 #topbarHost,
    body.dgx-v2 .dgx-topbar {
        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.dgx-v2 #workspaceHost,
    body.dgx-v2 .dgx-workspace-host,
    body.dgx-v2 .dgx-main,
    body.dgx-v2 main {
        grid-column: 1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        padding-bottom:
            calc(76px + env(safe-area-inset-bottom)) !important;

        overflow: hidden !important;
    }

    /*
     * Convert the existing sidebar into a bottom navigation dock.
     * No JavaScript or duplicate mobile navigation is introduced.
     */

    body.dgx-v2 #sidebarHost {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom:
            max(8px, env(safe-area-inset-bottom)) !important;

        width: auto !important;
        height: auto !important;

        z-index: 1000 !important;
        pointer-events: none;
    }

    body.dgx-v2 .dgx-sidebar {
        position: relative !important;
        inset: auto !important;

        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 620px !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 auto !important;
        padding: 7px !important;

        overflow: visible !important;
        pointer-events: auto;

        border:
            1px solid rgba(128, 190, 236, 0.2) !important;
        border-radius: 20px !important;

        background:
            rgba(5, 14, 27, 0.94) !important;

        box-shadow:
            0 18px 50px rgba(0, 0, 0, 0.46),
            inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }

    body.dgx-v2 .dgx-sidebar > .dgx-logo,
    body.dgx-v2 .dgx-sidebar > .dgx-project-card,
    body.dgx-v2 .dgx-sidebar > .dgx-founder-card {
        display: none !important;
    }

    body.dgx-v2 .dgx-sidebar .dgx-nav {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch !important;

        width: 100% !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.dgx-v2 .dgx-sidebar .dgx-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;

        gap: 3px !important;
        margin: 0 !important;
        padding: 7px 4px !important;

        border-radius: 14px !important;

        font-size: 11px !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    body.dgx-v2 .dgx-sidebar .dgx-nav-item > span {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.dgx-v2 .dgx-sidebar .dgx-nav-icon {
        display: inline-grid !important;
        place-items: center !important;

        width: 19px !important;
        height: 19px !important;

        font-size: 15px !important;
        line-height: 1 !important;
    }

    /* Top bar remains readable without forcing horizontal overflow. */

    body.dgx-v2 .dgx-topbar {
        min-height: 54px !important;
        padding:
            max(8px, env(safe-area-inset-top))
            10px
            8px !important;
    }

    body.dgx-v2 .dgx-topbar > * {
        min-width: 0 !important;
    }

    /* Command workspace receives the complete available width. */

    body.dgx-v2 .dgx-brain-v60,
    body.dgx-v2 .dgx-brain-v25 {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        padding: 6px !important;
    }

    body.dgx-v2 .dgx-command-surface {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        border-radius: 14px !important;
        overflow: hidden !important;
    }

    body.dgx-v2 .dgx-command-header {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 54px !important;

        gap: 8px !important;
        padding: 9px 11px !important;
    }

    body.dgx-v2 .dgx-command-stream {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        padding: 14px 10px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.dgx-v2 .dgx-user-message,
    body.dgx-v2 .dgx-system-message {
        width: auto !important;
        min-width: 0 !important;
        max-width: 92% !important;

        padding: 10px 12px !important;

        font-size: 14px !important;
        line-height: 1.48 !important;
    }

    body.dgx-v2 .dgx-command-attachments:not([hidden]) {
        width: 100% !important;
        min-width: 0 !important;

        padding: 0 8px 7px !important;
    }

    body.dgx-v2 .dgx-attachment-chip {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.dgx-v2 .dgx-command-footer {
        width: 100% !important;
        min-width: 0 !important;

        padding:
            7px
            7px
            max(8px, env(safe-area-inset-bottom)) !important;
    }

    body.dgx-v2 .dgx-command-composer {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            38px !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        gap: 6px !important;
        margin: 0 !important;
        padding: 6px !important;

        border-radius: 15px !important;
    }

    body.dgx-v2 #observations {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        max-height: 104px !important;

        padding: 9px 5px !important;

        font-size: 16px !important;
        line-height: 20px !important;
    }

    body.dgx-v2 .dgx-composer-tool,
    body.dgx-v2 .dgx-composer-send {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    body.dgx-v2 .dgx-command-hint {
        display: none !important;
    }

    /* Knowledge Vault and Settings spacing normalization. */

    body.dgx-v2 .knowledge-workspace,
    body.dgx-v2 .dgx-knowledge-workspace,
    body.dgx-v2 .settings-workspace,
    body.dgx-v2 .dgx-settings-workspace {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100% !important;

        padding: 10px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.dgx-v2 .knowledge-workspace *,
    body.dgx-v2 .dgx-knowledge-workspace *,
    body.dgx-v2 .settings-workspace *,
    body.dgx-v2 .dgx-settings-workspace * {
        min-width: 0;
    }

    body.dgx-v2 .knowledge-workspace table,
    body.dgx-v2 .dgx-knowledge-workspace table,
    body.dgx-v2 .settings-workspace table,
    body.dgx-v2 .dgx-settings-workspace table {
        width: 100%;
        max-width: 100%;
    }

    /* Intelligence drawer must not cover the entire phone screen. */

    body.dgx-v2 .dgx-intelligence-drawer {
        left: 8px !important;
        right: 8px !important;
        bottom:
            calc(80px + env(safe-area-inset-bottom)) !important;

        width: auto !important;
        max-width: none !important;
        max-height: min(62dvh, 560px) !important;

        border-radius: 18px !important;
    }
}

/* ------------------------------------------------------------
   Small phones
   ------------------------------------------------------------ */

@media (max-width: 560px) {
    body.dgx-v2 .dgx-topbar {
        min-height: 50px !important;
        padding-inline: 8px !important;
    }

    body.dgx-v2 .dgx-command-header {
        min-height: 50px !important;
        padding: 8px 9px !important;
    }

    body.dgx-v2 .dgx-command-title p {
        display: none !important;
    }

    body.dgx-v2 .dgx-command-stream {
        padding: 11px 8px !important;
    }

    body.dgx-v2 .dgx-user-message,
    body.dgx-v2 .dgx-system-message {
        max-width: 96% !important;
    }

    body.dgx-v2 #sidebarHost {
        left: 6px !important;
        right: 6px !important;
    }

    body.dgx-v2 .dgx-sidebar {
        padding: 5px !important;
        border-radius: 17px !important;
    }

    body.dgx-v2 .dgx-sidebar .dgx-nav {
        gap: 4px !important;
    }

    body.dgx-v2 .dgx-sidebar .dgx-nav-item {
        min-height: 49px !important;
        padding: 6px 2px !important;
        font-size: 10px !important;
    }
}

/* ------------------------------------------------------------
   Landscape phones and short tablet windows
   ------------------------------------------------------------ */

@media (max-width: 900px) and (max-height: 560px) {
    body.dgx-v2 .dgx-topbar {
        min-height: 44px !important;
        padding-block: 5px !important;
    }

    body.dgx-v2 .dgx-command-header {
        display: none !important;
    }

    body.dgx-v2 #workspaceHost,
    body.dgx-v2 .dgx-workspace-host,
    body.dgx-v2 .dgx-main,
    body.dgx-v2 main {
        padding-bottom:
            calc(62px + env(safe-area-inset-bottom)) !important;
    }

    body.dgx-v2 .dgx-sidebar .dgx-nav-item {
        min-height: 43px !important;
    }

    body.dgx-v2 .dgx-intelligence-drawer {
        max-height: 54dvh !important;
    }
}

/* ------------------------------------------------------------
   Accessibility and device behavior
   ------------------------------------------------------------ */

@media (pointer: coarse) {
    body.dgx-v2 button,
    body.dgx-v2 [role="button"] {
        touch-action: manipulation;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.dgx-v2 *,
    body.dgx-v2 *::before,
    body.dgx-v2 *::after {
        scroll-behavior: auto !important;
    }
}