:root {
  --vos-runtime-css-release: "368.0.0-v230" !important;
  --vos-app-height: 100dvh;
  --vos-mobile-dock-height: 64px;
  --vos-safe-top: env(safe-area-inset-top, 0px);
  --vos-safe-right: env(safe-area-inset-right, 0px);
  --vos-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vos-safe-left: env(safe-area-inset-left, 0px);
}

html { min-height: 100%; background: #020814; }
body { min-height: var(--vos-app-height); overscroll-behavior-y: none; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
pre, code, table, .vps-3d-timeline, .vps-video-timeline { max-width: 100%; }
pre, table, .vps-3d-timeline, .vps-video-timeline { overflow: auto; -webkit-overflow-scrolling: touch; }

.vos-mobile-command-dock,
.vos-mobile-parity-sheet { display: none; }

@media (max-width: 780px) {
  html, body { width: 100%; min-width: 0; overflow-x: hidden; }
  body { padding-bottom: calc(var(--vos-mobile-dock-height) + var(--vos-safe-bottom)); }
  input, select, textarea { font-size: 16px !important; }
  button, [role="button"], summary, .btn, .vps-nav-button { min-height: 44px; }
  .vps-shell, .app { min-height: var(--vos-app-height) !important; }
  .vps-main, .main { min-width: 0; padding-bottom: calc(var(--vos-mobile-dock-height) + var(--vos-safe-bottom) + 18px) !important; }
  .vps-header { padding-left: max(8px, var(--vos-safe-left)); padding-right: max(8px, var(--vos-safe-right)); }
  .vps-backdrop.open { display: block !important; position: fixed; inset: 0; background: rgba(1, 6, 16, .72); }

  .vos-mobile-command-dock {
    position: fixed;
    z-index: 1190;
    left: max(8px, var(--vos-safe-left));
    right: max(8px, var(--vos-safe-right));
    bottom: max(8px, var(--vos-safe-bottom));
    height: 56px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(92, 117, 156, .58);
    border-radius: 16px;
    background: rgba(5, 13, 28, .96);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .55);
    backdrop-filter: blur(18px);
  }
  .vos-mobile-command-dock button {
    min-width: 0;
    min-height: 46px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #aebdd1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    font: 750 10px/1.1 Inter, "Segoe UI", sans-serif;
  }
  .vos-mobile-command-dock button[aria-pressed="true"],
  .vos-mobile-command-dock button:focus-visible {
    color: #effcff;
    background: linear-gradient(145deg, rgba(77, 91, 255, .42), rgba(125, 48, 225, .38));
    outline: 2px solid #55dce7;
    outline-offset: -2px;
  }
  .vos-mobile-command-dock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

  .vos-mobile-parity-sheet {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: none;
    align-items: end;
    background: rgba(1, 5, 14, .72);
    backdrop-filter: blur(8px);
    padding-top: max(14px, var(--vos-safe-top));
  }
  .vos-mobile-parity-sheet.open { display: flex; }
  .vos-mobile-parity-panel {
    width: 100%;
    max-height: min(88dvh, calc(var(--vos-app-height) - var(--vos-safe-top) - 12px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(79, 113, 157, .64);
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #0d1a2e, #050d1c);
    box-shadow: 0 -24px 70px rgba(0, 0, 0, .58);
    padding-bottom: var(--vos-safe-bottom);
  }
  .vos-mobile-parity-head {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 13px 8px 18px;
    border-bottom: 1px solid rgba(73, 101, 139, .42);
  }
  .vos-mobile-parity-head strong { color: #f1f7ff; font-size: 15px; }
  .vos-mobile-parity-head small { display: block; margin-top: 3px; color: #8295ae; font-size: 10px; }
  .vos-mobile-parity-close { width: 44px; min-width: 44px; border: 0; border-radius: 50%; background: #15243a; color: #dce9f8; font-size: 24px; }
  .vos-mobile-parity-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 14px; }
  .vos-mobile-action-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .vos-mobile-action-list button {
    width: 100%; min-height: 52px; padding: 10px 12px; text-align: left;
    border: 1px solid rgba(70, 101, 142, .56); border-radius: 10px;
    background: #0c182a; color: #d8e5f5; font-weight: 700;
  }
  .vos-mobile-action-list button small { display: block; margin-top: 4px; color: #7f93ad; font-weight: 500; }
  .vos-mobile-empty { padding: 28px 16px; text-align: center; color: #91a4bc; }

  /* A surface moved into the parity sheet keeps its real handlers and state. */
  .vos-mobile-parity-body > .inspector,
  .vos-mobile-parity-body > .conversation-rail,
  .vos-mobile-parity-body > .vps-global-context,
  .vos-mobile-parity-body > .vps-global-history,
  .vos-mobile-parity-body > .vps-chat-context,
  .vos-mobile-parity-body > .vps-chat-threads,
  .vos-mobile-parity-body > .vps-image-inspector,
  .vos-mobile-parity-body > .vps-video-inspector,
  .vos-mobile-parity-body > .vps-3d-right,
  .vos-mobile-parity-body > .vps-web-browser,
  .vos-mobile-parity-body > .search-insights {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Data is allowed to scroll, never silently disappear. */
  .agent-row { min-width: 690px; grid-template-columns: 1.6fr .8fr .65fr .6fr .8fr .8fr !important; }
  .agent-row span:nth-child(n+4) { display: block !important; }
  .agents-page .card:has(.agent-row), .vps-table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .analysis-card, .world-grid, .search-layout, .vps-library-body { min-width: 0; }
  .search-insights { display: block !important; }
  .world-feed { overflow-x: auto; }

  /* Mobile studio workspaces retain canvases while panels move on demand. */
  .vps-image-studio, .vps-video-studio { grid-template-columns: minmax(0, 1fr) !important; }
  .vps-image-canvas, .vps-video-canvas, .vps-3d-center { min-width: 0 !important; }
  .vps-image-canvas canvas, .vps-video-canvas video, .vps-3d-viewport canvas { max-width: 100%; touch-action: none; }
  .vps-3d-pro { min-height: 0 !important; height: calc(var(--vos-app-height) - 50px - var(--vos-mobile-dock-height) - var(--vos-safe-bottom)) !important; }
  .vps-3d-timeline { width: 100%; max-width: 100vw; }

  .vos-mobile-keyboard-open .vos-mobile-command-dock { transform: translateY(130%); pointer-events: none; }
  .vos-mobile-keyboard-open .vps-global-composer,
  .vos-mobile-keyboard-open .vps-chat-composer,
  .vos-mobile-keyboard-open .vos-chat-composer-wrap { bottom: 0 !important; }
}

@media (max-width: 380px) {
  .vos-mobile-action-list { grid-template-columns: 1fr; }
  .vos-mobile-command-dock button { font-size: 9px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .vos-mobile-parity-panel { max-height: 94dvh; }
  .vos-mobile-command-dock { left: auto; width: min(360px, 54vw); }
}

@media (prefers-reduced-motion: reduce) {
  .vos-mobile-command-dock, .vos-mobile-parity-sheet, .vos-mobile-parity-panel { scroll-behavior: auto; transition: none !important; }
}