/* =========================================================
   XERION — RESPONSIVE
   ---------------------------------------------------------
   Responsive behavior for the complete XERION application
========================================================= */


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1200px) {

    .page-content {
        padding-left: 28px;
        padding-right: 28px;
    }

    .conversation-sidebar {
        width: 235px;
        min-width: 235px;
    }

    .analytics-overview {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   DESKTOP / TABLET
========================================================= */

@media (max-width: 1000px) {

    :root {
        --sidebar-width: 240px;
    }


    /* -----------------------------------------------------
       SIDEBAR
    ----------------------------------------------------- */

    .sidebar {
        width: var(--sidebar-width);
    }

    .app-main {
        margin-left: var(--sidebar-width);
    }


    /* -----------------------------------------------------
       TOPBAR
    ----------------------------------------------------- */

    .app-topbar {
        padding-left: 22px;
        padding-right: 22px;
    }


    /* -----------------------------------------------------
       CHAT
    ----------------------------------------------------- */

    .conversation-sidebar {
        width: 220px;
        min-width: 220px;
    }

    .chat-empty-state h1 {
        font-size: 29px;
    }


    /* -----------------------------------------------------
       GENERIC GRIDS
    ----------------------------------------------------- */

    .grid-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .grid-3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       SETTINGS
    ----------------------------------------------------- */

    .settings-layout {
        grid-template-columns:
            200px
            minmax(0, 1fr);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    :root {
        --sidebar-width: 260px;
    }


    /* -----------------------------------------------------
       MOBILE SIDEBAR
    ----------------------------------------------------- */

    .sidebar {
        position: fixed;

        top: 0;
        left: 0;
        bottom: 0;

        width: min(
            var(--sidebar-width),
            calc(100vw - 48px)
        );

        margin-left: 0;

        transform: translateX(-100%);

        box-shadow:
            10px 0 35px rgba(15, 23, 42, 0.12);

        z-index: 1000;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .app-main {
        margin-left: 0;
    }


    /* -----------------------------------------------------
       SIDEBAR OVERLAY
    ----------------------------------------------------- */

    .app-main::before {
        content: "";

        position: fixed;

        inset: 0;

        background: rgba(15, 23, 42, 0.25);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        z-index: 900;

        transition:
            opacity 180ms ease,
            visibility 180ms ease;
    }

    #xerion-app.sidebar-open .app-main::before,
    #xerion-app.sidebar-is-open .app-main::before {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;
    }


    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .mobile-menu-button {
        display: inline-flex;
    }


    /* -----------------------------------------------------
       TOPBAR
    ----------------------------------------------------- */

    .app-topbar {
        padding-left: 18px;
        padding-right: 18px;
    }


    /* -----------------------------------------------------
       VIEW CONTAINER
    ----------------------------------------------------- */

    .view-container {
        width: 100%;
        min-width: 0;
    }


    /* -----------------------------------------------------
       CHAT
    ----------------------------------------------------- */

    .conversation-sidebar {
        width: 210px;
        min-width: 210px;
    }

    .chat-composer-area {
        padding-left: 18px;
        padding-right: 18px;
    }


    /* -----------------------------------------------------
       PAGE CONTENT
    ----------------------------------------------------- */

    .page-content {
        padding: 26px 22px 40px;
    }


    /* -----------------------------------------------------
       PROJECTS
    ----------------------------------------------------- */

    .projects-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       FILES
    ----------------------------------------------------- */

    .files-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       ANALYTICS
    ----------------------------------------------------- */

    .analytics-page {
        padding-left: 22px;
        padding-right: 22px;
    }


    /* -----------------------------------------------------
       SETTINGS
    ----------------------------------------------------- */

    .settings-layout {
        grid-template-columns:
            190px
            minmax(0, 1fr);
    }


    /* -----------------------------------------------------
       BILLING
    ----------------------------------------------------- */

    .billing-plans {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       INTEGRATIONS
    ----------------------------------------------------- */

    .integrations-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   SMALL TABLET / LARGE PHONE
========================================================= */

@media (max-width: 760px) {


    /* -----------------------------------------------------
       TOPBAR
    ----------------------------------------------------- */

    .app-topbar {
        height: 60px;

        padding-left: 14px;
        padding-right: 14px;
    }

    .view-title {
        font-size: 15px;
    }

    .topbar-action {
        min-width: 38px;
    }

    .topbar-action span {
        display: none;
    }


    /* -----------------------------------------------------
       CHAT
    ----------------------------------------------------- */

    .conversation-sidebar,
    .conversation-resize-handle {
        display: none;
    }

    .chat-main {
        width: 100%;
        min-width: 0;
    }


    /* -----------------------------------------------------
       CONVERSATIONS IN THE MOBILE DRAWER (2026-10-12, redesigned the
       same day into a single ChatGPT-style scroll -- was a boxed
       panel with its own 42vh-capped internal scroll; the owner found
       that ugly and asked for one continuous drawer scroll instead)
       -----------------------------------------------------
       app.js's initMobileConversationSidebar() physically moves the
       SAME #conversationSidebar node (never a copy) to be the LAST
       CHILD of .sidebar-navigation at this exact breakpoint --
       conversations.js and its live-refresh polling are completely
       unaware of and unaffected by where in the DOM this node
       currently lives. Being a child of .sidebar-navigation (not a
       sibling) means it inherits that element's own existing
       overflow-y:auto -- nav and conversations share ONE scroll
       region, nothing new to size or bound here. The display:none two
       rules above applies by class, so it would otherwise ALSO hide
       this node once it's inside .sidebar -- this narrower,
       ancestor-scoped selector re-shows ONLY the copy that is actually
       inside the drawer; the rule above still correctly hides it in
       its normal desktop position whenever JS hasn't moved it (e.g. JS
       disabled), the same fallback as before this change. !important
       overrides the desktop-only drag-resize feature's own inline
       width/min-width on this same shared node
       (web/frontend/js/conversations.js's setSidebarWidth) -- that
       feature's handle is already hidden on mobile via
       .conversation-resize-handle above, so without this a stored
       desktop width could leak into the drawer with no way to resize
       it back.
    ----------------------------------------------------- */

    .sidebar .conversation-sidebar {
        display: flex !important;
        flex-direction: column;

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

        margin-top: 10px;
        padding-top: 2px;

        border-right: none;
        border-top: 1px solid var(--border);
    }

    /*
       The existing desktop header ("Conversations" label + the
       search-focus icon button, web/frontend/js/conversations.js's
       unchanged #conversationSearchButton handler) is replaced on
       mobile by .mobile-conversations-toggle below -- a single
       tappable row that both labels the section AND expands/collapses
       it, which the plain desktop header doesn't do. Hidden here
       rather than removed, so its own (untouched, shared) JS wiring
       stays harmless and inert instead of needing its own mobile-only
       removal logic.
    */

    .sidebar .conversation-sidebar > .conversation-header {
        display: none;
    }

    .mobile-conversations-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 44px;

        padding: 0 10px;
        margin: 0 0 2px;

        border: none;
        background: none;

        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted);

        cursor: pointer;
    }

    .mobile-conversations-toggle-chevron {
        width: 16px;
        height: 16px;
        flex-shrink: 0;

        color: var(--muted);

        transition: transform 150ms ease;
    }

    .sidebar .conversation-sidebar.is-collapsed .mobile-conversations-toggle-chevron {
        transform: rotate(-90deg);
    }

    /*
       Collapsed: search + list both hidden together (the owner's own
       call -- "kies het meest logische" -- a search box with nothing
       to search while the list itself is hidden would be confusing).
    */

    .sidebar .conversation-sidebar.is-collapsed .conversation-search,
    .sidebar .conversation-sidebar.is-collapsed .conversation-list {
        display: none;
    }

    /*
       No longer its own bounded/scrolling box (that was the 42vh
       panel being replaced) -- flows at its natural height as part of
       .sidebar-navigation's single shared scroll instead.
    */

    .sidebar .conversation-sidebar .conversation-list {
        flex: none;
        min-height: 0;
        overflow: visible;
    }

    .chat-empty-state {
        padding-left: 20px;
        padding-right: 20px;
    }

    .chat-empty-state h1 {
        font-size: 27px;
    }

    .chat-empty-state p {
        font-size: 12px;
    }

    .chat-composer-area {
        padding:
            12px
            14px
            18px;
    }

    .chat-composer {
        max-width: 100%;
    }


    /* -----------------------------------------------------
       PAGE HEADERS
    ----------------------------------------------------- */

    .page-header {
        flex-direction: column;
        align-items: flex-start;

        gap: 14px;
    }

    .page-header-actions {
        width: 100%;
    }


    /* -----------------------------------------------------
       GENERIC GRIDS
    ----------------------------------------------------- */

    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       PROJECTS
    ----------------------------------------------------- */

    .projects-grid {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       FILES
    ----------------------------------------------------- */

    .files-list {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       SETTINGS
    ----------------------------------------------------- */

    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-navigation {
        display: flex;

        gap: 5px;

        overflow-x: auto;

        padding-bottom: 4px;

        scrollbar-width: none;
    }

    .settings-navigation::-webkit-scrollbar {
        display: none;
    }

    .settings-nav-item {
        flex-shrink: 0;
    }


    /* -----------------------------------------------------
       ANALYTICS
    ----------------------------------------------------- */

    .analytics-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .analytics-period {
        width: 100%;
        max-width: 100%;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .analytics-period::-webkit-scrollbar {
        display: none;
    }

    .analytics-period-button {
        flex: 1;
    }


    /* -----------------------------------------------------
       BILLING
    ----------------------------------------------------- */

    .billing-plans {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       DESKTOP
    ----------------------------------------------------- */

    .capability-grid {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       INTEGRATIONS
    ----------------------------------------------------- */

    .integrations-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    :root {
        --topbar-height: 58px;
    }


    /* -----------------------------------------------------
       TOPBAR
    ----------------------------------------------------- */

    .app-topbar {
        height: var(--topbar-height);
    }

    .topbar-right {
        gap: 6px;
    }

    .topbar-account {
        width: 34px;
        height: 34px;
    }

    .topbar-avatar {
        width: 32px;
        height: 32px;
    }


    /* -----------------------------------------------------
       PAGE CONTENT
    ----------------------------------------------------- */

    .page-content {
        padding:
            21px
            16px
            34px;
    }

    .page-header {
        margin-bottom: 21px;
    }

    .page-header h1 {
        font-size: 23px;
    }

    .page-header p {
        font-size: 11px;
    }


    /* -----------------------------------------------------
       CARDS
    ----------------------------------------------------- */

    .card,
    .panel {
        border-radius: 11px;
    }


    /* -----------------------------------------------------
       CHAT
    ----------------------------------------------------- */

    .chat-messages {
        padding-left: 14px;
        padding-right: 14px;
    }

    .chat-message-content {
        font-size: 13px;
    }

    .chat-message-avatar {
        width: 28px;
        height: 28px;
    }

    .chat-empty-state {
        padding:
            20px
            15px
            100px;
    }

    .chat-empty-state-icon {
        width: 48px;
        height: 48px;
    }

    .chat-empty-state h1 {
        font-size: 25px;
    }

    .chat-empty-state p {
        max-width: 300px;

        font-size: 11px;
    }


    /* -----------------------------------------------------
       COMPOSER
    ----------------------------------------------------- */

    .chat-composer-area {
        padding:
            8px
            10px
            12px;
    }

    .chat-composer {
        border-radius: 13px;
    }

    .chat-composer-input {
        min-height: 48px;

        padding:
            13px
            13px
            7px;

        font-size: 13px;
    }

    .chat-composer-tools {
        padding:
            5px
            7px
            7px;
    }

    .chat-composer-tool {
        width: 34px;
        height: 34px;
    }

    .chat-send-button {
        width: 34px;
        height: 34px;
    }


    /* -----------------------------------------------------
       FILES
    ----------------------------------------------------- */

    .page-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .page-toolbar .search-field {
        width: 100%;
    }


    /* -----------------------------------------------------
       MODALS
    ----------------------------------------------------- */

    .modal {
        width: calc(100vw - 28px);

        max-height: calc(100vh - 28px);

        border-radius: 13px;
    }

    .modal-header {
        padding:
            16px
            17px;
    }

    .modal-body {
        padding:
            17px;
    }

    .modal-footer {
        padding:
            13px
            17px;
    }


    /* -----------------------------------------------------
       ANALYTICS
    ----------------------------------------------------- */

    .analytics-page {
        padding:
            21px
            16px
            34px;
    }

    .analytics-overview {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .analytics-stat-card {
        min-height: 108px;

        padding: 13px;
    }

    .analytics-stat-value {
        font-size: 21px;
    }

    .analytics-stat-label {
        font-size: 9px;
    }

    .analytics-chart {
        gap: 6px;
    }

    .analytics-chart-label {
        font-size: 8px;
    }


    /* -----------------------------------------------------
       SETTINGS
    ----------------------------------------------------- */

    .settings-navigation {
        width: 100%;
    }


}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 420px) {


    /* -----------------------------------------------------
       SIDEBAR
    ----------------------------------------------------- */

    .sidebar {
        width: min(
            300px,
            calc(100vw - 30px)
        );
    }


    /* -----------------------------------------------------
       TOPBAR
    ----------------------------------------------------- */

    .app-topbar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .mobile-menu-button {
        width: 34px;
        height: 34px;
    }

    .view-title {
        font-size: 14px;

        max-width: 150px;

        overflow: hidden;

        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .topbar-action {
        padding-left: 8px;
        padding-right: 8px;
    }


    /* -----------------------------------------------------
       CHAT
    ----------------------------------------------------- */

    .chat-empty-state h1 {
        font-size: 23px;
    }

    .chat-empty-state p {
        max-width: 270px;
    }

    .chat-composer-disclaimer {
        font-size: 8px;
    }


    /* -----------------------------------------------------
       ANALYTICS
    ----------------------------------------------------- */

    .analytics-overview {
        grid-template-columns: 1fr;
    }

    .analytics-stat-card {
        min-height: 96px;
    }

    .analytics-period {
        overflow-x: auto;
    }

    .analytics-period-button {
        min-width: 65px;

        flex: 0 0 auto;
    }

    .analytics-panel-header {
        gap: 10px;
    }

    .analytics-panel-title {
        font-size: 12px;
    }


    /* -----------------------------------------------------
       VELYN WIDGET
    ----------------------------------------------------- */

    .velyn-floating-widget {
        right: 10px;
        bottom: 70px;

        width: calc(100vw - 20px);
        max-width: 320px;
    }

}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 350px) {

    .page-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .chat-composer-area {
        padding-left: 7px;
        padding-right: 7px;
    }

    .chat-composer-tools {
        gap: 2px;
    }

    .analytics-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .velyn-floating-widget {
        right: 7px;
        bottom: 66px;

        width: calc(100vw - 14px);
    }

}


/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

    .sidebar {
        width: 280px;
    }

    .chat-empty-state {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .velyn-floating-widget {
        bottom: 14px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .sidebar-item,
    .new-chat-button,
    .topbar-action,
    .velyn-widget-duration,
    .velyn-widget-button,
    .velyn-widget-close,
    .mobile-menu-button {
        min-height: 40px;
    }

    .sidebar-item:hover,
    .new-chat-button:hover,
    .topbar-action:hover,
    .velyn-widget-duration:hover,
    .velyn-widget-button:hover {
        transform: none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sidebar,
    .app-main::before,
    .modal-overlay,
    .modal,
    .velyn-floating-widget,
    .analytics-chart-bar,
    .analytics-breakdown-fill,
    .analytics-period-button {
        transition: none !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}