/**
 * Full-viewport native app shell — shared by VSWT Apps (Pixel Art Studio, Docs Editor).
 */

:root {
  --native-titlebar-h: 2.5rem;
  --native-menubar-h: 2rem;
  --native-optionsbar-h: 2.25rem;
  --native-statusbar-h: 1.5rem;
  --native-panel-w: 16rem;
  --native-tool-rail-w: 2.75rem;
  --docs-page-w: 816px;
  --docs-page-min-h: 1056px;
  --docs-canvas-bg: color-mix(in srgb, var(--page-fg) 12%, var(--surface));
  --native-chrome-bg: var(--surface);
  --native-chrome-border: var(--border);
  --native-chrome-fg: var(--page-fg);
  --native-chrome-fg-muted: var(--page-fg-muted);
  /* Floating glass + iOS motion */
  --native-float-radius: 14px;
  --native-float-radius-sm: 10px;
  --native-float-inset: 10px;
  --native-float-gap: 8px;
  --native-float-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  --native-float-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);
  --native-glass-bg: color-mix(in srgb, var(--surface) 78%, transparent);
  --native-glass-border: color-mix(in srgb, var(--page-fg) 10%, transparent);
  --native-ios-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --native-ios-press-scale: 0.96;
  --native-ios-press-duration: 0.16s;
  --native-menu-enter-duration: 0.22s;
  --native-drawer-transition: 0.32s;
}

/* Full viewport — disable marketing mesh background */
html.native-app {
  height: 100%;
  overflow: hidden;
}

html.native-app body {
  height: 100%;
  overflow: hidden;
  min-height: 0;
}

html.native-app body::before,
html.native-app body::after {
  display: none;
}

/* Root shell */
.native-app__root {
  display: flex;
  flex-direction: column;
  gap: var(--native-float-gap);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: var(--native-float-inset);
  background: var(--native-chrome-bg);
  color: var(--native-chrome-fg);
}

/* Floating glass card primitive */
.native-app__float {
  border: 1px solid var(--native-glass-border);
  border-radius: var(--native-float-radius);
  background: var(--native-glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--native-float-shadow);
}

/* Smaller float variant for toolbar sub-groups */
.native-app__float-group {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--native-glass-border);
  border-radius: var(--native-float-radius-sm);
  background: color-mix(in srgb, var(--native-glass-bg) 90%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--native-float-shadow-light);
}

/* iOS-style press feedback */
.native-app__pressable {
  transition:
    transform var(--native-ios-press-duration) var(--native-ios-spring),
    opacity 0.12s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.native-app__pressable:active:not(:disabled) {
  transform: scale(var(--native-ios-press-scale));
  opacity: 0.85;
}

/* iOS segmented control (panel tabs) */
.native-app__segmented {
  display: flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: var(--native-float-radius-sm);
  background: color-mix(in srgb, var(--page-fg) 6%, transparent);
}

.native-app__segmented-btn {
  flex: 1;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.35rem 0.5rem;
  border: none;
  border-radius: calc(var(--native-float-radius-sm) - 2px);
  background: transparent;
  color: var(--native-chrome-fg-muted);
  cursor: pointer;
}

.native-app__segmented-btn:hover {
  color: var(--native-chrome-fg);
}

.native-app__segmented-btn.is-active,
.native-app__segmented-btn[aria-selected='true'] {
  background: var(--surface);
  color: var(--header-accent);
  box-shadow: var(--native-float-shadow-light);
}

/* Title bar */
.native-app__titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--native-titlebar-h);
  padding: 0 0.5rem 0 0.75rem;
  flex-shrink: 0;
}

.native-app__titlebar-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--native-chrome-fg);
  text-decoration: none;
  white-space: nowrap;
}

.native-app__titlebar-brand:hover {
  color: var(--header-accent);
}

.native-app__titlebar-brand-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.native-app__titlebar-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-left: 0.5rem;
}

.native-app__tab {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border: none;
  border-radius: var(--native-float-radius-sm);
  background: transparent;
  color: var(--native-chrome-fg-muted);
  cursor: pointer;
  white-space: nowrap;
}

.native-app__tab:hover {
  color: var(--native-chrome-fg);
  background: color-mix(in srgb, var(--header-accent) 8%, transparent);
}

.native-app__tab[aria-selected='true'] {
  color: var(--header-accent);
  background: color-mix(in srgb, var(--header-accent) 12%, var(--surface));
  box-shadow: var(--native-float-shadow-light);
}

.native-app__titlebar-spacer {
  flex: 1;
}

.native-app__titlebar-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.native-app__titlebar-auth {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}

/* Neutralize marketing-page app-auth-bar box when nested in titlebar */
.native-app__titlebar-auth.app-auth-bar {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  justify-content: flex-end;
}

.native-app__titlebar-auth .app-auth-bar__email {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.native-app__titlebar-auth .app-sync-status {
  font-size: 0.75rem;
}

.native-app__titlebar-btn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--native-glass-border);
  border-radius: var(--native-float-radius-sm);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  color: var(--native-chrome-fg);
  cursor: pointer;
  white-space: nowrap;
}

.native-app__titlebar-btn:hover {
  background: color-mix(in srgb, var(--header-accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--header-accent) 25%, transparent);
}

.native-app__titlebar-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.native-app__titlebar-btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 85%, black);
}

.native-app__titlebar-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--header-accent);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}

.native-app__titlebar-link:hover {
  text-decoration: underline;
}

/* Compact theme picker in titlebar */
.native-app__theme-picker {
  display: flex;
  gap: 0.15rem;
}

.native-app__theme-picker .theme-picker__title {
  display: none;
}

.native-app__theme-picker .theme-picker__options {
  display: flex;
  gap: 0.15rem;
}

.native-app__theme-picker .theme-picker__option {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
}

/* Menu bar */
.native-app__menubar {
  display: flex;
  align-items: stretch;
  min-height: var(--native-menubar-h);
  padding: 0 0.35rem;
  flex-shrink: 0;
}

/* Options bar (Pixel Art Studio) */
.native-app__optionsbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--native-optionsbar-h);
  padding: 0.35rem 0.75rem;
  flex-shrink: 0;
}

.native-app__optionsbar-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.native-app__optionsbar-group--end {
  margin-left: auto;
}

/* Toolbar row (Docs Editor) */
.native-app__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--native-float-gap);
  padding: 0.4rem 0.75rem;
  flex-shrink: 0;
}

/* Main body */
.native-app__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.native-app__workspace-row {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Status bar */
.native-app__statusbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--native-statusbar-h);
  padding: 0 0.75rem;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--native-chrome-fg-muted);
  flex-shrink: 0;
  box-shadow: var(--native-float-shadow-light);
}

.native-app__statusbar-message {
  flex: 1;
}

.native-app__toast {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--header-accent);
}

.native-app__toast[hidden],
.native-app__error[hidden] {
  display: none;
}

.native-app__error {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--error, #c0392b);
}

/* Native dropdown menus */
.native-menu {
  position: relative;
}

.native-menu__trigger {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  border: none;
  border-radius: var(--native-float-radius-sm);
  background: transparent;
  color: var(--native-chrome-fg);
  cursor: pointer;
}

.native-menu__trigger:hover,
.native-menu__trigger[aria-expanded='true'] {
  background: color-mix(in srgb, var(--header-accent) 12%, var(--surface));
}

.native-menu__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 11rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border: 1px solid var(--native-glass-border);
  border-radius: var(--native-float-radius-sm);
  background: var(--native-glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--native-float-shadow);
  transform-origin: top left;
  opacity: 1;
  transform: scale(1);
  transition:
    opacity var(--native-menu-enter-duration) var(--native-ios-spring),
    transform var(--native-menu-enter-duration) var(--native-ios-spring);
}

.native-menu__dropdown.is-entering {
  opacity: 0;
  transform: scale(0.92);
}

.native-menu__dropdown[hidden] {
  display: none;
}

.native-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  padding: 0.45rem 0.75rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--native-chrome-fg);
  cursor: pointer;
}

.native-menu__item:hover:not(:disabled) {
  background: color-mix(in srgb, var(--header-accent) 10%, var(--surface));
}

.native-menu__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.native-menu__item-shortcut {
  font-size: 0.72rem;
  color: var(--native-chrome-fg-muted);
  font-variant-numeric: tabular-nums;
}

.native-menu__separator {
  height: 1px;
  margin: 0.35rem 0;
  background: var(--native-chrome-border);
  list-style: none;
}

/* Hamburger drawer (Docs Editor) */
.native-app__drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--native-drawer-transition) var(--native-ios-spring);
  pointer-events: none;
}

.native-app__drawer-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.native-app__drawer-backdrop[hidden] {
  display: none;
}

.native-app__drawer {
  position: fixed;
  top: var(--native-float-inset);
  left: var(--native-float-inset);
  bottom: var(--native-float-inset);
  z-index: 201;
  width: 16rem;
  padding: 1rem;
  transform: translateX(calc(-100% - var(--native-float-inset) * 2));
  transition: transform var(--native-drawer-transition) var(--native-ios-spring);
}

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

.native-app__drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.native-app__drawer-link {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--native-chrome-fg);
  text-decoration: none;
  padding: 0.55rem 0.75rem;
  border-radius: var(--native-float-radius-sm);
  background: transparent;
}

.native-app__drawer-link:hover {
  background: color-mix(in srgb, var(--header-accent) 10%, var(--surface));
  color: var(--header-accent);
}

/* Pressable rollout for chrome controls without explicit class */
html.native-app .native-app__tab,
html.native-app .native-app__titlebar-btn,
html.native-app .native-menu__trigger,
html.native-app .native-menu__item,
html.native-app .native-app__drawer-link,
html.native-app .theme-picker__option {
  transition:
    transform var(--native-ios-press-duration) var(--native-ios-spring),
    opacity 0.12s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

html.native-app .native-app__tab:active:not(:disabled),
html.native-app .native-app__titlebar-btn:active:not(:disabled),
html.native-app .native-menu__trigger:active:not(:disabled),
html.native-app .native-menu__item:active:not(:disabled),
html.native-app .native-app__drawer-link:active,
html.native-app .theme-picker__option:active {
  transform: scale(var(--native-ios-press-scale));
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  html.native-app .native-app__pressable:active:not(:disabled),
  html.native-app .native-app__tab:active:not(:disabled),
  html.native-app .native-app__titlebar-btn:active:not(:disabled),
  html.native-app .native-menu__trigger:active:not(:disabled),
  html.native-app .native-menu__item:active:not(:disabled),
  html.native-app .native-app__drawer-link:active,
  html.native-app .theme-picker__option:active {
    transform: none;
    opacity: 1;
  }

  .native-menu__dropdown {
    transition: none;
  }

  .native-app__drawer,
  .native-app__drawer-backdrop {
    transition: none;
  }
}

/* SEO content — visually hidden, kept in DOM */
.native-app__seo-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visually hidden mode select fallback */
.native-app__mode-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .native-app__titlebar-brand-text {
    display: none;
  }

  .native-app__titlebar-auth .app-auth-bar__email {
    display: none;
  }

  .native-app__titlebar .native-app__theme-picker {
    display: none;
  }
}