:root {
  --pwa-safe-top: env(safe-area-inset-top, 0px);
  --pwa-safe-right: env(safe-area-inset-right, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-safe-left: env(safe-area-inset-left, 0px);
  --pwa-viewport-height: 100dvh;
  background: #02050b;
}

html, body { min-height: 100%; min-height: 100dvh; }
body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
.agents-page, .agents-app { height: var(--pwa-viewport-height); }
.command-shell, .rail { max-height: var(--pwa-viewport-height); }

html:not(.pwa-ready) body::before {
  position: fixed; z-index: 10000; inset: 0; pointer-events: none; content: ""; background: #02050b; animation: pwa-splash-away .2s .85s forwards;
}
html:not(.pwa-ready) body::after {
  position: fixed; z-index: 10001; top: 50%; left: 50%; width: 56px; height: 56px;
  border: 1px solid rgba(160,231,255,.58); border-radius: 50%; content: "";
  background: radial-gradient(circle,#fff 0 8%,#9ce6ff 9% 19%,rgba(80,190,239,.22) 21% 48%,transparent 50%);
  box-shadow: 0 0 52px rgba(93,204,249,.24), inset 0 0 22px rgba(126,222,255,.17);
  pointer-events: none; transform: translate(-50%,-50%); animation: pwa-core-ready .55s ease-out both, pwa-splash-away .2s .72s forwards;
}

.pwa-connectivity, .pwa-update, .pwa-install {
  position: fixed; z-index: 9998; left: max(12px, var(--pwa-safe-left)); right: max(12px, var(--pwa-safe-right));
  display: flex; gap: 12px; align-items: center; justify-content: center;
  max-width: 620px; min-height: 46px; margin: auto; padding: 9px 11px 9px 15px;
  border: 1px solid rgba(147,218,246,.25); border-radius: 15px; color: #dcecf2;
  background: rgba(8,15,24,.94); box-shadow: 0 18px 60px rgba(0,0,0,.38); backdrop-filter: blur(18px);
  font: 600 12px/1.35 ui-sans-serif,system-ui,sans-serif;
}
.pwa-connectivity { top: max(10px, calc(var(--pwa-safe-top) + 8px)); }
.pwa-update, .pwa-install { bottom: max(12px, calc(var(--pwa-safe-bottom) + 10px)); }
.pwa-connectivity[hidden], .pwa-update[hidden], .pwa-install[hidden] { display: none; }
.pwa-connectivity i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #f08a91; box-shadow: 0 0 12px rgba(240,126,131,.6); }
.pwa-connectivity[data-state="online"] i { background: #66d7a4; box-shadow: 0 0 12px rgba(102,215,164,.6); }
.pwa-connectivity span, .pwa-update span, .pwa-install span { flex: 1; }
.pwa-connectivity button, .pwa-update button, .pwa-install button, .pwa-offline-actions button, .pwa-offline-actions a {
  min-height: 36px; padding: 0 13px; border: 1px solid rgba(173,229,250,.3); border-radius: 10px;
  color: #dff7ff; background: rgba(116,210,246,.1); font: inherit; text-decoration: none; cursor: pointer;
}
.pwa-update button:last-child, .pwa-install button:last-child { border-color: transparent; color: #91a4ad; background: transparent; }

.pwa-offline-page { box-sizing: border-box; width: 100%; min-width: 0; display: grid; margin: 0; padding: max(20px,var(--pwa-safe-top)) max(20px,var(--pwa-safe-right)) max(20px,var(--pwa-safe-bottom)) max(20px,var(--pwa-safe-left)); color-scheme: dark; color: #eef7fa; background: radial-gradient(circle at 50% 10%,#102c40,transparent 38%),#02050b; font-family: ui-sans-serif,system-ui,sans-serif; }
.pwa-offline-card { box-sizing: border-box; width: min(520px,calc(100vw - 40px)); min-width: 0; margin: auto; padding: clamp(28px,8vw,54px); border: 1px solid rgba(149,218,246,.18); border-radius: 32px; text-align: center; background: rgba(8,15,24,.78); box-shadow: inset 0 1px rgba(255,255,255,.06),0 28px 100px rgba(0,0,0,.38); }
.pwa-offline-card img { display: block; margin: 0 auto 24px; border-radius: 24px; box-shadow: 0 0 52px rgba(93,204,249,.16); }
.pwa-eyebrow { margin: 0 0 12px; color: #7edcf9; font-size: 11px; font-weight: 750; letter-spacing: .14em; }
.pwa-offline-card h1 { margin: 0 0 14px; font-size: clamp(2rem,8vw,3.4rem); letter-spacing: -.055em; }
.pwa-offline-card > p:not(.pwa-eyebrow):not(.pwa-offline-state) { margin: 0; color: #94a6ae; line-height: 1.65; }
.pwa-offline-actions { display: flex; gap: 9px; justify-content: center; margin-top: 26px; }
.pwa-offline-actions button, .pwa-offline-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; }
.pwa-offline-state { margin: 20px 0 0; color: #6f838d; font-size: 12px; }

:focus-visible { outline: 2px solid #8de2ff !important; outline-offset: 3px; }

@media (display-mode: standalone) {
  body.dashboard-page { padding-top: var(--pwa-safe-top); }
  .agents-app { padding-top: max(8px,var(--pwa-safe-top)); padding-left: max(8px,var(--pwa-safe-left)); padding-right: max(8px,var(--pwa-safe-right)); }
  .command-shell { padding-top: var(--pwa-safe-top); padding-right: max(10px,var(--pwa-safe-right)); padding-left: max(10px,var(--pwa-safe-left)); }
  .auth-page { padding-top: max(10px,var(--pwa-safe-top)); padding-right: max(10px,var(--pwa-safe-right)); padding-bottom: max(10px,var(--pwa-safe-bottom)); padding-left: max(10px,var(--pwa-safe-left)); }
}

@media (pointer: coarse) {
  button:not(.connection-handle):not(.avatar-choice), input, select, .jarvis-nav a { min-height: 44px; }
  .avatar-choice { min-height: 76px; }
}

@media (max-width: 720px) {
  html, body, .command-shell, .main-grid, .stage-panel, .starter-prompts, .agent-stage, .inspector, .message-scroll, .modal-card, .sheet-content, textarea {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar, .command-shell::-webkit-scrollbar, .main-grid::-webkit-scrollbar, .stage-panel::-webkit-scrollbar,
  .starter-prompts::-webkit-scrollbar, .agent-stage::-webkit-scrollbar, .inspector::-webkit-scrollbar, .message-scroll::-webkit-scrollbar,
  .modal-card::-webkit-scrollbar, .sheet-content::-webkit-scrollbar, textarea::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .agents-page { overflow: hidden; }
  .message-scroll { scroll-padding-bottom: 24px; }
  .message-composer { margin-bottom: max(0px,var(--pwa-safe-bottom)); }
  .starter-prompts { scroll-snap-type: x proximity; }
  .starter-prompts button { scroll-snap-align: start; }
  dialog, .modal { max-height: calc(var(--pwa-viewport-height) - var(--pwa-safe-top) - var(--pwa-safe-bottom) - 12px) !important; }
  .modal-card, .sheet-content { max-height: calc(var(--pwa-viewport-height) - var(--pwa-safe-top) - var(--pwa-safe-bottom) - 18px) !important; }
  .pwa-connectivity, .pwa-update, .pwa-install { font-size: 11px; }
  .pwa-offline-actions { flex-wrap: wrap; }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .agents-workspace { grid-template-columns: minmax(240px,30vw) minmax(0,1fr); }
  .avatar-grid { grid-template-columns: repeat(6,minmax(64px,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@keyframes pwa-core-ready { from { opacity: 0; transform: translate(-50%,-50%) scale(.86); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes pwa-splash-away { to { opacity: 0; visibility: hidden; } }