/* GlomaxGPT mobile experience: one predictable responsive layer for the app. */

@media (max-width: 768px) {

  :root {

    --gx-mobile-gutter: 16px;

    --gx-mobile-radius: 18px;

    --gx-mobile-header: 56px;

  }



  html,

  body {

    width: 100% !important;

    min-width: 320px !important;

    max-width: 100% !important;

    margin: 0 !important;

    overflow-x: hidden !important;

    -webkit-text-size-adjust: 100%;

    text-size-adjust: 100%;

  }



  body:has(.app-with-sidebar) {

    height: 100dvh !important;

    min-height: 0 !important;

    overflow: hidden !important;

    overscroll-behavior: none;

  }



  body :is(img, video, canvas, iframe) {

    max-width: 100%;

  }



  body :is(.app-with-sidebar, .main-content, #main, #main-content, .page-main,

    .page-content, .content-wrap, .profile-layout, .settings-layout) {

    min-width: 0 !important;

    box-sizing: border-box !important;

  }



  html body .app-with-sidebar {

    position: relative !important;

    display: flex !important;

    flex: 1 1 auto !important;

    flex-direction: column !important;

    gap: 0 !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    height: 100dvh !important;

    min-height: 0 !important;

    max-height: 100dvh !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;

    border-radius: 0 !important;

  }



  html body .app-with-sidebar > #main,

  html body .app-with-sidebar > .main-content,

  html body .app-with-sidebar > #main-content {

    position: relative !important;

    display: flex !important;

    flex: 1 1 auto !important;

    flex-direction: column !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    height: 100dvh !important;

    min-height: 0 !important;

    max-height: 100dvh !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

  }



  /* One off-canvas navigation pattern, shared by chat and inner pages. */

  html body .app-with-sidebar > aside#sidebar,

  html body .app-with-sidebar > .sidebar,

  html body #sidebar {

    position: fixed !important;

    inset: 0 auto 0 0 !important;

    display: flex !important;

    flex-direction: column !important;

    width: min(86vw, 320px) !important;

    min-width: 0 !important;

    max-width: 320px !important;

    height: 100dvh !important;

    max-height: 100dvh !important;

    margin: 0 !important;

    padding-top: env(safe-area-inset-top, 0px) !important;

    padding-bottom: env(safe-area-inset-bottom, 0px) !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    overscroll-behavior: contain;

    transform: translate3d(-105%, 0, 0) !important;

    visibility: hidden !important;

    pointer-events: none !important;

    /* Keep the drawer above fixed page controls (composer, topbar menus, FABs). */

    z-index: 1000001 !important;

    isolation: isolate;

    touch-action: pan-y;

    border: 1px solid var(--border-default, rgba(255, 255, 255, 0.09)) !important;

    border-left: 0 !important;

    border-radius: 0 20px 20px 0 !important;

    background: var(--bg-sidebar, #090a0f) !important;

    box-shadow: 0 18px 54px rgba(0, 0, 0, .28) !important;

    transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility .24s !important;

    -webkit-overflow-scrolling: touch;

  }



  html body .app-with-sidebar > aside#sidebar.open,

  html body .app-with-sidebar > aside#sidebar.show,

  html body .app-with-sidebar > .sidebar.open,

  html body .app-with-sidebar > .sidebar.show,

  html body #sidebar.open,

  html body #sidebar.show,

  html body.sidebar-open #sidebar,

  html body.sidebar-open .sidebar {

    transform: translate3d(0, 0, 0) !important;

    visibility: visible !important;

    pointer-events: auto !important;

  }



  html body .sidebar-overlay,

  html body #sidebar-overlay {

    position: fixed !important;

    inset: 0 !important;

    display: block !important;

    visibility: hidden !important;

    opacity: 0 !important;

    z-index: 1000000 !important;

    background: rgba(14, 15, 20, 0.85) !important;

    -webkit-backdrop-filter: blur(3px);

    backdrop-filter: blur(3px);

    pointer-events: none !important;

    touch-action: manipulation;

    cursor: pointer;

    transition: opacity .2s ease, visibility .2s ease !important;

  }



  html body.sidebar-open .sidebar-overlay,

  html body.sidebar-open #sidebar-overlay,

  html body .sidebar-overlay.show,

  html body .sidebar-overlay.active,

  html body #sidebar-overlay.show,

  html body #sidebar-overlay.active {

    visibility: visible !important;

    opacity: 1 !important;

    pointer-events: auto !important;

  }



  html body .sidebar-collapse-btn,

  html body #sidebar-collapse-btn,

  html body .sidebar-collapse-btn-desktop {

    display: none !important;

  }



  html body .mobile-page-header {

    display: none !important;

  }



  html body #main > #topbar,

  html body #main > header.topbar,

  html body .main-content > #topbar,

  html body .main-content > header.topbar,

  html body .main-content > .topbar,

  html body #main-content > #topbar,

  html body #main-content > header.topbar,

  html body #main-content > .topbar {

    position: relative !important;

    inset: auto !important;

    display: flex !important;

    flex: 0 0 calc(var(--gx-mobile-header) + env(safe-area-inset-top, 0px)) !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: calc(var(--gx-mobile-header) + env(safe-area-inset-top, 0px)) !important;

    max-height: none !important;

    height: auto !important;

    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 12px)) 0 max(12px, env(safe-area-inset-left, 12px)) !important;

    gap: 8px !important;

    overflow: visible !important;

    border-bottom: 1px solid var(--border-subtle, var(--border-default, rgba(255, 255, 255, 0.09))) !important;

    background: var(--bg-main, #0e0f14) !important;

    z-index: 100 !important;

  }



  html body .sidebar-toggle-btn,

  html body #sidebar-toggle-btn,

  html body .mobile-hamburger {

    display: inline-flex !important;

    flex: 0 0 44px !important;

    align-items: center !important;

    justify-content: center !important;

    width: 44px !important;

    min-width: 44px !important;

    height: 44px !important;

    min-height: 44px !important;

    padding: 0 !important;

    border-radius: 13px !important;

    touch-action: manipulation;

  }



  html body #main > header.topbar :is(.topbar-left, .topbar-center, .topbar-right),

  html body .main-content > header.topbar :is(.topbar-left, .topbar-center, .topbar-right),

  html body #main-content > header.topbar :is(.topbar-left, .topbar-center, .topbar-right) {

    min-width: 0 !important;

    gap: 6px !important;

  }



  html body #main > header.topbar .topbar-center,

  html body .main-content > header.topbar .topbar-center,

  html body #main-content > header.topbar .topbar-center {

    flex: 1 1 auto !important;

  }



  html body #main > header.topbar .topbar-right,

  html body .main-content > header.topbar .topbar-right,

  html body #main-content > header.topbar .topbar-right {

    flex: 0 1 auto !important;

    max-width: 56vw !important;

    overflow-x: auto !important;

    scrollbar-width: none;

  }



  /* App pages scroll in their content pane, never the document body. */

  html body .app-with-sidebar .page-main,

  html body .app-with-sidebar main.page-main,

  html body .app-with-sidebar .explore-main,

  html body .app-with-sidebar .profile-main,

  html body .app-with-sidebar .settings-main {

    position: relative !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 0 !important;

    max-width: 100% !important;

    height: auto !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 20px var(--gx-mobile-gutter) calc(28px + env(safe-area-inset-bottom, 0px)) !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    overscroll-behavior-y: contain;

    -webkit-overflow-scrolling: touch;

  }



  html body .app-with-sidebar .page-main > :is(.profile-layout, .profile-wrap,

    .settings-layout, .pricing-layout, .content-wrap, .page-content) {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 auto !important;

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

  }



  html body .page-main :is(.page-header, .section-header, .settings-header) {

    flex-wrap: wrap !important;

    gap: 12px !important;

    margin-bottom: 20px !important;

  }



  html body .page-main :is(h1, .page-title, .page-header h1) {

    max-width: 100% !important;

    font-size: clamp(1.55rem, 6vw, 2rem) !important;

    line-height: 1.18 !important;

    overflow-wrap: anywhere;

  }



  /* Chat: keep the message stream scrollable and the composer in the layout. */

  html body #main #chat-area,

  html body #main .chat-area {

    display: flex !important;

    flex: 1 1 auto !important;

    flex-direction: column !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 0 !important;

    max-width: 100% !important;

    overflow: hidden !important;

  }



  html body #main #messages,

  html body #main #work-messages {

    display: flex !important;

    flex: 1 1 auto !important;

    flex-direction: column !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 0 !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 14px 14px max(130px, calc(110px + env(safe-area-inset-bottom, 20px))) !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    overscroll-behavior-y: contain;

    -webkit-overflow-scrolling: touch;

    scroll-padding-bottom: max(150px, calc(130px + env(safe-area-inset-bottom, 20px))) !important;

  }



  html body #main #work-messages {

    padding: 12px 14px max(130px, calc(110px + env(safe-area-inset-bottom, 20px))) !important;

  }



  html body #main #messages > *:last-child,

  html body #main #work-messages > *:last-child {

    margin-bottom: max(28px, env(safe-area-inset-bottom, 20px)) !important;

  }



  html body #main #messages > *,

  html body #main .msg-wrapper,

  html body #main .message-inner,

  html body #main .message {

    box-sizing: border-box !important;

    min-width: 0 !important;

    max-width: 100% !important;

  }



  html body #main .msg-content,

  html body #main .message-content,

  html body #main .msg-bubble,

  html body #main .markdown-body {

    max-width: 100% !important;

    min-width: 0 !important;

    overflow-wrap: anywhere;

    word-break: normal !important;

  }



  html body #main #messages pre,

  html body #main #work-messages pre,

  html body #main .code-block,

  html body #main .table-wrap {

    max-width: 100% !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;

  }



  html body #main #input-area {

    position: relative !important;

    inset: auto !important;

    display: block !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 8px max(12px, env(safe-area-inset-right, 12px)) max(10px, env(safe-area-inset-bottom, 10px)) max(12px, env(safe-area-inset-left, 12px)) !important;

    overflow: visible !important;

    border-top: 1px solid var(--border-subtle, var(--border-default, rgba(255, 255, 255, 0.09))) !important;

    background: var(--bg-main, #0e0f14) !important;

    box-shadow: 0 -8px 26px rgba(0, 0, 0, .07) !important;

    z-index: 30 !important;

  }



  html body #main #work-input-area {

    position: relative !important;

    inset: auto !important;

    display: block !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 8px max(12px, env(safe-area-inset-right, 12px)) max(10px, env(safe-area-inset-bottom, 10px)) max(12px, env(safe-area-inset-left, 12px)) !important;

    border-top: 1px solid var(--border-subtle, var(--border-default, rgba(255, 255, 255, 0.09))) !important;

    background: var(--bg-main, #0e0f14) !important;

    z-index: 30 !important;

  }



  html body #main #work-input-area .input-container,

  html body #main #work-input-area .input-disclaimer,

  html body #main #work-input-area #work-input-topbar {

    width: 100% !important;

    max-width: 100% !important;

    margin-right: 0 !important;

    margin-left: 0 !important;

  }



  html body #main #work-input-area textarea#work-message-input,

  html body #main #gx-work-input-wrap textarea#gx-work-textarea {

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 42px !important;

    max-height: min(32dvh, 180px) !important;

    padding: 10px 8px !important;

    font-size: 16px !important;

    line-height: 1.45 !important;

    white-space: pre-wrap !important;

    overflow-wrap: anywhere !important;

    word-break: normal !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    resize: none !important;

  }



  html body #main #work-input-area .input-toolbar {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 6px !important;

    min-width: 0 !important;

  }



  html body #main #gx-work-input-wrap .gx-work-top-row {

    display: flex !important;

    align-items: flex-end !important;

    width: 100% !important;

    min-width: 0 !important;

    gap: 6px !important;

  }



  html body #main #gx-work-input-wrap .gx-work-top-right {

    flex: 0 0 auto !important;

    min-width: 0 !important;

    gap: 4px !important;

  }



  html body #main #gx-work-input-wrap .gx-work-bar-btn,

  html body #main #gx-work-input-wrap .gx-work-top-right button {

    flex: 0 0 40px !important;

    width: 40px !important;

    min-width: 40px !important;

    height: 40px !important;

    min-height: 40px !important;

  }



  html body #main #work-input-area .input-toolbar :is(button, .input-model-pill, .input-btn) {

    min-height: 42px !important;

    touch-action: manipulation;

  }



  html body #main #chat-input-container,

  html body #main #chat-input-container.gx-gemini-bar,

  html body #main .input-container#chat-input-container {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    min-height: 58px !important;

    margin: 0 !important;

    padding: 7px 8px !important;

    border-radius: 20px !important;

    box-sizing: border-box !important;

  }



  html body #main #chat-input-container .gx-bar-row {

    display: flex !important;

    align-items: flex-end !important;

    flex-wrap: nowrap !important;

    width: 100% !important;

    min-width: 0 !important;

    gap: 6px !important;

  }



  html body #main #chat-input-container textarea#message-input,

  html body #main .gx-bar-row textarea#message-input {

    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;

    min-width: 0 !important;

    min-height: 42px !important;

    max-height: min(32dvh, 180px) !important;

    margin: 0 !important;

    padding: 10px 6px !important;

    border: 0 !important;

    border-radius: 12px !important;

    font-size: 16px !important;

    line-height: 1.45 !important;

    white-space: pre-wrap !important;

    overflow-wrap: anywhere !important;

    word-break: normal !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    resize: none !important;

    -webkit-appearance: none !important;

  }



  /* Compact round mobile action buttons: prevents crushing textarea or overlapping */

  html body #main #input-add-btn,

  html body #main .gx-plus-btn,

  html body #main #btn-send,

  html body #main .input-send-btn,

  html body #main #gx-main-mic-btn,

  html body #main .input-mic-btn,

  html body #main #stop-btn,

  html body #main .input-stop-btn {

    flex: 0 0 34px !important;

    width: 34px !important;

    min-width: 34px !important;

    max-width: 34px !important;

    height: 34px !important;

    min-height: 34px !important;

    max-height: 34px !important;

    padding: 0 !important;

    border-radius: 50% !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    touch-action: manipulation;

  }



  /* Reasoning Button on Mobile (<= 768px): Compact Icon-Only to save ~70px of horizontal space */

  html body #main #reasoning-level-wrap {

    flex: 0 0 auto !important;

    display: inline-flex !important;

    align-items: center !important;

  }



  html body #main #rl-trigger-btn {

    flex: 0 0 34px !important;

    width: 34px !important;

    min-width: 34px !important;

    max-width: 34px !important;

    height: 34px !important;

    min-height: 34px !important;

    padding: 0 !important;

    border-radius: 10px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

  }



  html body #main #rl-trigger-btn .rl-trigger-label,

  html body #main #rl-trigger-btn .rl-trigger-caret {

    display: none !important;

  }



  html body #main #rl-trigger-btn .rl-trigger-icon {

    margin: 0 !important;

    width: 15px !important;

    height: 15px !important;

  }



  html body #main .gx-bar-right {

    display: inline-flex !important;

    flex: 0 0 auto !important;

    align-items: center !important;

    gap: 4px !important;

    min-width: 0 !important;

  }



  /* Çift mikrofon butonunu kesin olarak gizle */

  html body #main .gx-bar-right .gx-mobile-mic {

    display: none !important;

  }



  /* Tekil ana mikrofon (#gx-main-mic-btn) mobilde kusursuz boyutlandır */

  html body #main .gx-bar-right #gx-main-mic-btn {

    flex: 0 0 34px !important;

    width: 34px !important;

    min-width: 34px !important;

    max-width: 34px !important;

    height: 34px !important;

    min-height: 34px !important;

    padding: 0 !important;

    border-radius: 50% !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    border: none !important;

    background: transparent !important;

    color: var(--text-secondary, #94a3b8) !important;

    touch-action: manipulation;

  }



  html body #main .gx-bar-right #gx-main-mic-btn svg {

    width: 17px !important;

    height: 17px !important;

    stroke: currentColor !important;

  }



  html body #main .gx-bar-right #stop-btn {

    flex: 0 0 34px !important;

    width: 34px !important;

    min-width: 34px !important;

    max-width: 34px !important;

    height: 34px !important;

    min-height: 34px !important;

    padding: 0 !important;

    border-radius: 50% !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    border: none !important;

    touch-action: manipulation;

  }



  html body #main .gx-bar-right #btn-send {

    flex: 0 0 34px !important;

    width: 34px !important;

    min-width: 34px !important;

    max-width: 34px !important;

    height: 34px !important;

    min-height: 34px !important;

    padding: 0 !important;

    border-radius: 50% !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    border: none !important;

    touch-action: manipulation;

  }



  html body #main #input-add-menu,

  html body #main .input-add-menu,

  html body #main #work-add-menu {

    position: fixed !important;

    inset: auto 10px calc(76px + env(safe-area-inset-bottom, 0px)) 10px !important;

    width: auto !important;

    min-width: 0 !important;

    max-width: none !important;

    max-height: min(62dvh, 520px) !important;

    overflow-y: auto !important;

    border-radius: 20px !important;

    z-index: 1500 !important;

    -webkit-overflow-scrolling: touch;

  }



  html body #main #welcome-screen {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 0 !important;

    max-width: 100% !important;

    padding: 24px 16px 20px !important;

    overflow-y: auto !important;

  }



  html body #main #welcome-screen .gx-work-welcome,

  html body #main .gx-work-welcome {

    width: 100% !important;

    max-width: 620px !important;

    gap: 14px !important;

    margin: auto !important;

  }



  html body #main .gx-work-title {

    max-width: min(92vw, 680px) !important;

    font-size: clamp(1.15rem, 4.5vw, 1.42rem) !important;

    line-height: 1.3 !important;

    letter-spacing: -0.02em !important;

    text-wrap: balance !important;

    margin: 0 auto 6px !important;

    text-align: center !important;

    font-weight: 600 !important;

  }



  html body #main .gx-work-subtitle {

    max-width: min(90vw, 480px) !important;

    font-size: 0.82rem !important;

    line-height: 1.4 !important;

    text-wrap: balance !important;

    margin: 0 auto 16px !important;

    text-align: center !important;

  }



  html body #main .gx-work-box {

    width: 100% !important;

    max-width: 100% !important;

    border-radius: 20px !important;

  }



  html body #main :is(.work-integration-suggestions, .welcome-suggestions,

    .welcome-quick-actions, .wqa-list, .gx-work-suggs) {

    display: grid !important;

    grid-template-columns: 1fr !important;

    width: 100% !important;

    max-width: 100% !important;

    gap: 8px !important;

  }



  html body #main :is(.wsg-card, .work-integ-item, .suggestion-card, .wqa-card, .gx-work-sugg) {

    width: 100% !important;

    min-width: 0 !important;

    min-height: 44px !important;

    padding: 10px 12px !important;

    white-space: normal !important;

    text-align: left !important;

  }



  /* Forms, data grids and long content adapt without shrinking controls. */

  html body .page-main :is(.grid, .grid-2, .grid-3, .grid-4, .grid-two,

    .two-col, .two-column, .form-grid, .form-grid-2, .form-grid-3, .form-grid-4,

    .stats-grid, .stats-grid-4, .cards-grid, .card-grid, .tools-grid, .plugins-grid,

    .projects-grid, .models-grid, .plans-grid, .plan-grid, .pricing-grid,

    .profile-stats, .settings-grid, .faq-grid, .prompt-grid, .exp-tools-grid,

    .exp-trend-grid, .exp-prompt-grid, .work-integration-grid) {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    min-width: 0 !important;

    gap: 12px !important;

  }



  html body .page-main :is(.card, .panel, .gx-card, .settings-section,

    .settings-card, .profile-section, .model-card, .plan-card, .tool-card,

    .plugin-card, .project-card, .file-card, .history-card, .stat-card) {

    min-width: 0 !important;

    max-width: 100% !important;

    padding: 16px !important;

    border-radius: var(--gx-mobile-radius, 18px) !important;

  }



  html body .page-main :is(form, .form-row, .settings-row, .profile-hero,

    .page-actions, .toolbar, .filter-bar) {

    min-width: 0 !important;

    max-width: 100% !important;

    flex-wrap: wrap !important;

    gap: 12px !important;

  }



  html body .page-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),

    textarea, select) {

    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    min-height: 46px !important;

    font-size: 16px !important;

  }



  html body .page-main :is(button, .btn, [role="button"], .tab-btn) {

    min-height: 44px !important;

    touch-action: manipulation;

  }



  html body .page-main :is(.table-wrap, .table-responsive, .table-container,

    .data-table-wrap, .overflow-x-auto) {

    width: 100% !important;

    max-width: 100% !important;

    overflow-x: auto !important;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;

  }



  html body .page-main table {

    max-width: 100% !important;

    border-collapse: separate !important;

    border-spacing: 0 !important;

  }



  html body .page-main :is(.tab-nav, .tabs, .filter-tabs, .category-tabs,

    .model-tabs, .segmented-control) {

    max-width: 100% !important;

    overflow-x: auto !important;

    flex-wrap: nowrap !important;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

  }



  html body :is(.modal-overlay, .modal-backdrop, .gx-modal-backdrop) {

    align-items: flex-end !important;

    padding: 0 !important;

  }



  html body :is(.modal-content, .modal-box, .gx-modal, .dialog, .popup-panel) {

    width: 100% !important;

    max-width: 100% !important;

    max-height: min(90dvh, 760px) !important;

    margin: 0 !important;

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

    border-radius: 22px 22px 0 0 !important;

    overflow-y: auto !important;

  }



  html body.auth-page .auth-page-wrap {

    align-items: flex-start !important;

    min-height: 100dvh !important;

    padding: max(20px, env(safe-area-inset-top, 20px)) 16px max(24px, env(safe-area-inset-bottom, 24px)) !important;

  }



  html body.auth-page :is(.auth-card, .auth-card-new, .login-card, .register-card) {

    width: 100% !important;

    max-width: 480px !important;

    padding: 22px 18px !important;

    border-radius: 22px !important;

  }



  html body pre,

  html body .code-block,

  html body .markdown-body table {

    max-width: 100% !important;

    overflow-x: auto !important;

  }



  html body :is(.toast, .notification-toast, .gx-toast) {

    left: max(12px, env(safe-area-inset-left, 12px)) !important;

    right: max(12px, env(safe-area-inset-right, 12px)) !important;

    width: auto !important;

    max-width: none !important;

    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;

  }

}



@media (max-width: 520px) {

  :root { --gx-mobile-gutter: 14px; }



  html body .app-with-sidebar .page-main,

  html body .app-with-sidebar main.page-main,

  html body .app-with-sidebar .explore-main {

    padding: 17px var(--gx-mobile-gutter) calc(24px + env(safe-area-inset-bottom, 0px)) !important;

  }



  html body .page-main :is(.grid, .grid-2, .grid-3, .grid-4, .grid-two,

    .two-col, .two-column, .form-grid, .form-grid-2, .form-grid-3, .form-grid-4,

    .stats-grid, .stats-grid-4, .cards-grid, .card-grid, .tools-grid, .plugins-grid,

    .projects-grid, .models-grid, .plans-grid, .plan-grid, .pricing-grid,

    .profile-stats, .settings-grid, .faq-grid, .exp-trend-grid, .work-integration-grid) {

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 10px !important;

  }



  html body .page-main :is(.card, .panel, .gx-card, .settings-section,

    .settings-card, .profile-section, .model-card, .plan-card, .tool-card,

    .plugin-card, .project-card, .file-card, .history-card, .stat-card) {

    padding: 14px !important;

  }



  html body .page-main :is(.settings-section-body, .settings-section-header,

    .profile-section-body, .card-body) {

    padding: 14px !important;

  }



  html body .profile-hero,

  html body .profile-hero-card {

    align-items: flex-start !important;

    flex-direction: column !important;

  }



  html body .profile-hero-actions {

    align-items: stretch !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    width: 100% !important;

  }



  html body #main #messages,

  html body #main #work-messages { padding: 12px 12px 18px !important; }



  html body #main #input-area {

    padding-right: max(10px, env(safe-area-inset-right, 10px)) !important;

    padding-left: max(10px, env(safe-area-inset-left, 10px)) !important;

  }



  html body #main #chat-input-container { border-radius: 18px !important; }

  html body #main #chat-input-container .gx-bar-row { gap: 4px !important; }



  html body #main #work-input-area {

    padding-right: max(10px, env(safe-area-inset-right, 10px)) !important;

    padding-left: max(10px, env(safe-area-inset-left, 10px)) !important;

  }



  html body #main #input-add-btn,

  html body #main #btn-send,

  html body #main .gx-plus-btn {

    flex-basis: 40px !important;

    width: 40px !important;

    min-width: 40px !important;

    height: 40px !important;

    min-height: 40px !important;

  }



  html body #main .gx-work-title { font-size: clamp(1.20rem, 3.2vw, 1.42rem) !important; font-weight: 600 !important; }

  html body #main #welcome-screen { padding: 20px 14px 16px !important; }

}



@media (max-width: 360px) {

  :root { --gx-mobile-gutter: 12px; }



  html body #main > #topbar,

  html body #main > header.topbar,

  html body .main-content > #topbar,

  html body .main-content > header.topbar,

  html body #main-content > #topbar,

  html body #main-content > header.topbar {

    gap: 4px !important;

    padding-right: 8px !important;

    padding-left: 8px !important;

  }



  html body #main > header.topbar .topbar-right,

  html body .main-content > header.topbar .topbar-right,

  html body #main-content > header.topbar .topbar-right {

    max-width: 50vw !important;

  }



  html body #main .itb-pill-btn { max-width: 42vw !important; }

  html body #main #messages,

  html body #main #work-messages { padding-right: 10px !important; padding-left: 10px !important; }

  html body.auth-page .auth-page-wrap { padding-right: 12px !important; padding-left: 12px !important; }

}



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

  html body .app-with-sidebar > aside#sidebar,

  html body .app-with-sidebar > .sidebar,

  html body #sidebar { width: min(72vw, 340px) !important; }



  html body #main #welcome-screen { padding-top: 12px !important; padding-bottom: 12px !important; }

  html body #main .gx-work-title { font-size: clamp(1.20rem, 3.2vw, 1.42rem) !important; font-weight: 600 !important; }

  html body #main .gx-work-subtitle { margin-bottom: 2px !important; }

}



@media (max-width: 768px) and (prefers-reduced-motion: reduce) {

  html body .app-with-sidebar > aside#sidebar,

  html body .app-with-sidebar > .sidebar,

  html body #sidebar,

  html body .sidebar-overlay,

  html body #sidebar-overlay { transition: none !important; }

}



/* Admin area uses a separate shell and stylesheet, so give it the same mobile rules. */

@media (max-width: 900px) {

  html body:has(.adm-sidebar) {

    width: 100% !important;

    min-width: 320px !important;

    height: 100dvh !important;

    max-width: 100% !important;

    margin: 0 !important;

    overflow: hidden !important;

  }



  html body:has(.adm-sidebar) .adm-sidebar {

    position: fixed !important;

    inset: 0 auto 0 0 !important;

    width: min(86vw, 320px) !important;

    min-width: 0 !important;

    max-width: 320px !important;

    height: 100dvh !important;

    padding-top: env(safe-area-inset-top, 0px) !important;

    padding-bottom: env(safe-area-inset-bottom, 0px) !important;

    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .25s !important;

    z-index: 1000001 !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    visibility: hidden !important;

    pointer-events: none !important;

    touch-action: pan-y;

    -webkit-overflow-scrolling: touch;

  }



  html body:has(.adm-sidebar) .adm-sidebar.open {

    transform: translateX(0) !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s !important;

  }



  html body:has(.adm-sidebar) .adm-sidebar-overlay {

    z-index: 1000000 !important;

    touch-action: manipulation;

    cursor: pointer;

  }



  html body:has(.adm-sidebar) .adm-main {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    min-width: 0 !important;

    height: 100dvh !important;

    max-height: 100dvh !important;

    margin: 0 !important;

    overflow: hidden !important;

  }



  html body:has(.adm-sidebar) .adm-topbar {

    flex: 0 0 auto !important;

    min-width: 0 !important;

    min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;

    height: auto !important;

    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 12px)) 0 max(12px, env(safe-area-inset-left, 12px)) !important;

    gap: 10px !important;

  }



  html body:has(.adm-sidebar) .adm-content {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    min-height: 0 !important;

    padding: 16px max(14px, env(safe-area-inset-right, 14px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 14px)) !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

  }



  html body:has(.adm-sidebar) :is(.adm-grid, .adm-grid-2, .adm-grid-3, .adm-grid-4,

    .adm-stats, .adm-stats-grid, .adm-cards-grid) {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    min-width: 0 !important;

  }



  html body:has(.adm-sidebar) :is(.adm-table-wrap, .adm-table-responsive, .table-wrap) {

    max-width: 100% !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;

  }



  html body:has(.adm-sidebar) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {

    max-width: 100% !important;

    min-width: 0 !important;

    font-size: 16px !important;

  }

}



@media (max-width: 520px) {

  html body:has(.adm-sidebar) :is(.adm-grid, .adm-grid-2, .adm-grid-3, .adm-grid-4,

    .adm-stats, .adm-stats-grid, .adm-cards-grid) {

    grid-template-columns: minmax(0, 1fr) !important;

  }



  html body:has(.adm-sidebar) .adm-topbar {

    gap: 8px !important;

  }



  html body:has(.adm-sidebar) .adm-topbar-actions {

    max-width: 48vw !important;

    overflow-x: auto !important;

  }

}



/* ── Mobile Popup & Dropdown Z-Index Fix (Above Sidebar 1000001 & Overlay 1000000) ── */

@media (max-width: 768px) {

  html body #sb-more-popup,

  html body .sb-more-popup,

  html body #model-popup,

  html body .model-popup,

  html body .gx-model-popup,

  html body .tb-more-menu,

  html body .tb-more-dropdown,

  html body .msg-more-dropdown,

  html body #tb-notif-panel,

  html body .tb-notif-panel {

    position: fixed !important;

    left: 12px !important;

    right: 12px !important;

    bottom: 16px !important;

    top: auto !important;

    width: auto !important;

    max-width: 380px !important;

    margin: 0 auto !important;

    max-height: 75vh !important;

    z-index: 2000005 !important;

    border-radius: 20px !important;

    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--border-default, rgba(255,255,255,0.12)) !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

    isolation: isolate !important;

  }

}





/* ═══════════════════════════════════════════════════════════════

   LIGHT THEME MOBILE EQUALIZATION (100% DESKTOP PARITY)

   ═══════════════════════════════════════════════════════════════ */

html[data-theme="light"] body #main {

  background: var(--bg-main, #ffffff) !important;

  color: var(--text-primary, #0f172a) !important;

}



html[data-theme="light"] body #main > #topbar,

html[data-theme="light"] body #main > header.topbar,

html[data-theme="light"] body .main-content > #topbar,

html[data-theme="light"] body .main-content > header.topbar {

  background: var(--bg-main, #ffffff) !important;

  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06)) !important;

  color: var(--text-primary, #0f172a) !important;

}



html[data-theme="light"] body #main #input-area,

html[data-theme="light"] body #main #work-input-area {

  background: var(--bg-main, #ffffff) !important;

  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06)) !important;

  color: var(--text-primary, #0f172a) !important;

}



html[data-theme="light"] body .app-with-sidebar > aside#sidebar,

html[data-theme="light"] body .app-with-sidebar > .sidebar,

html[data-theme="light"] body #sidebar {

  background: var(--bg-sidebar, #f8fafc) !important;

  border-right: 1px solid var(--border-default, rgba(0, 0, 0, 0.09)) !important;

  color: var(--text-primary, #0f172a) !important;

}



html[data-theme="light"] body #main #chat-input-container,

html[data-theme="light"] body #main .gx-gemini-bar,

html[data-theme="light"] body #main #gx-work-input-wrap,

html[data-theme="light"] body #main .gx-work-box {

  background: #ffffff !important;

  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.10)) !important;

  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;

}



html[data-theme="light"] body #main #chat-input-container:focus-within,

html[data-theme="light"] body #main .gx-gemini-bar:focus-within,

html[data-theme="light"] body #main #gx-work-input-wrap:focus-within,

html[data-theme="light"] body #main .gx-work-box:focus-within {

  border-color: rgba(0, 0, 0, 0.20) !important;

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;

}



html[data-theme="light"] body #main #message-input,

html[data-theme="light"] body #main #work-message-input,

html[data-theme="light"] body #main #gx-work-textarea {

  color: #0f172a !important;

}

html[data-theme="light"] body #main #message-input::placeholder,

html[data-theme="light"] body #main #work-message-input::placeholder,

html[data-theme="light"] body #main #gx-work-textarea::placeholder {

  color: #94a3b8 !important;

}



html[data-theme="light"] body #main .gx-work-title,

html[data-theme="light"] body #main .welcome-title {

  color: #0f172a !important;

}

html[data-theme="light"] body #main .gx-work-subtitle,

html[data-theme="light"] body #main .welcome-subtitle {

  color: #64748b !important;

}



@media (max-width: 1024px) {

  #messages {

    padding-bottom: max(160px, calc(var(--gx-input-area-height, 136px) + 32px + env(safe-area-inset-bottom, 0px))) !important;

    scroll-padding-bottom: max(160px, calc(var(--gx-input-area-height, 136px) + 32px + env(safe-area-inset-bottom, 0px))) !important;

  }

}



html body #main #messages .message-actions-bar,

html body #main #messages .msg-wrapper .msg-actions {

  max-height: 0 !important;

  min-height: 0 !important;

  overflow: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

  padding-top: 0 !important;

  padding-bottom: 0 !important;

  transition: max-height .18s ease, opacity .15s ease, padding .15s ease !important;

}



html body #main #messages .message:hover .message-actions-bar,

html body #main #messages .message:focus-within .message-actions-bar,

html body #main #messages .message.gx-actions-visible .message-actions-bar,

html body #main #messages .msg-wrapper:hover .msg-actions,

html body #main #messages .msg-wrapper:focus-within .msg-actions,

html body #main #messages .msg-wrapper.gx-actions-visible .msg-actions {

  max-height: 72px !important;

  opacity: 1 !important;

  pointer-events: auto !important;

  padding-top: 4px !important;

  padding-bottom: 4px !important;

}