/* Liquid Glass theme — ONEPlan Sandbox (demo.tektonos.co)
   Loaded after styles.css; overrides all layout rules for the glass design.
   TektonOS palette: --warm-white #FAF8F5 | --deep-dark #262626
                     --navy #1B4F72 | --solar-gold #FFC527 */

:root {
  --glass-bg: rgba(38, 38, 38, 0.72);
  --glass-filter: blur(32px) saturate(180%) brightness(1.06);
  --glass-border: 1px solid rgba(250, 248, 245, 0.11);
  --glass-shadow: inset 0 1px 0 rgba(250, 248, 245, 0.22),
                  inset 0 0 0 0.5px rgba(250, 248, 245, 0.05),
                  0 16px 48px rgba(0, 0, 0, 0.55),
                  0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── Glass surface ────────────────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ── Body reset — full viewport, no flex column ───────────────────── */
body.viewer-active {
  display: block !important;
  height: 100dvh;
  overflow: hidden;
  background: var(--deep-dark);
  /* Demo zoom — scales the whole UI uniformly. Chromium/Safari only;
     Firefox ignores `zoom` but the layout still functions at 1x. */
  zoom: 1.2;
}

/* Suppress the traditional <header> if ever present */
body.viewer-active > header { display: none !important; }

/* ── APS viewer fills full viewport ───────────────────────────────── */
/* Canvas sits at brand --deep-dark (#262626). The ::after overlay turns it
   into a spotlight: lifts the center above brand with a faint white wash,
   leaves the mid-radius at pure brand, drops the edges below brand with a
   heavy black vignette. */
#aps-viewer {
  position: fixed !important;
  inset: 0 !important;
  flex: none !important;
  background: var(--deep-dark);
  z-index: 0;
}
#aps-viewer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse 110% 95% at center 50%,
    rgba(255, 255, 255, 0.10) 0%,    /* lift center above brand */
    rgba(255, 255, 255, 0.05) 18%,
    transparent              42%,    /* pure brand gray ring     */
    transparent              55%,
    rgba(0, 0, 0, 0.45)      78%,    /* drop edges below brand   */
    rgba(0, 0, 0, 0.80)      94%,
    rgba(0, 0, 0, 0.94)      100%
  );
}

/* ── Floating glass header pill ────────────────────────────────────── */
.lg-header {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  height: 46px;
  border-radius: 23px;
  padding: 0 8px 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 300;
  white-space: nowrap;
  min-width: 360px;
  max-width: calc(100vw - 28px);
}

.lg-header .wordmark-name {
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1;
  align-self: center;
  color: var(--solar-gold);
  flex-shrink: 0;
}

.lg-h-sep {
  width: 1px;
  height: 18px;
  background: rgba(250, 248, 245, 0.15);
  flex-shrink: 0;
}

/* Plan switcher: inline in the pill, not absolutely centered */
.lg-header .plan-switcher {
  position: relative !important;
  transform: none !important;
  left: auto !important;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lg-header .plan-trigger {
  font-size: 13px;
  font-weight: 500;
  color: rgba(250, 248, 245, 0.75);
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1.2;
}
.lg-header .plan-trigger:hover {
  background: rgba(250, 248, 245, 0.08);
  color: var(--warm-white);
}
.lg-header .plan-trigger-label {
  max-width: 180px;
}

/* Plan dropdown: anchored below the trigger */
.lg-header .plan-dropdown {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
}

/* Static project name (single-plan): inline center */
.lg-header #header-project-name {
  position: static;
  transform: none;
  flex: 1 1 auto;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(250, 248, 245, 0.75);
  pointer-events: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Export wrapper: compact in the pill */
.lg-header .header-export-wrapper {
  flex-shrink: 0;
  position: relative;
}
.lg-header .export-as-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 14px;
  gap: 5px;
}

/* ── Glass views panel ─────────────────────────────────────────────── */
.sheets-panel {
  position: fixed !important;
  top: 74px;
  left: 14px;
  width: 256px;
  max-height: calc(100dvh - 88px - 80px);
  flex: none !important;
  border-radius: 18px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border: var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(250, 248, 245, 0.22),
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 200;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
  margin-left: 0 !important;
}

/* Hidden: slide off screen instead of display:none */
.sheets-panel[hidden] {
  display: flex !important;
  transform: translateX(calc(-100% - 28px)) !important;
  opacity: 0;
  pointer-events: none;
}

.sheets-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 248, 245, 0.15) transparent;
}

/* ── Views open button (shown when panel is hidden) ────────────────── */
.sheets-panel-toggle-open {
  position: fixed !important;
  top: 74px;
  left: 14px;
  z-index: 200;
  border-radius: 12px !important;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(38, 38, 38, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(250, 248, 245, 0.12) !important;
  color: rgba(250, 248, 245, 0.55);
  box-shadow: inset 0 1px 0 rgba(250, 248, 245, 0.12), 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: color 120ms, border-color 120ms;
}
.sheets-panel-toggle-open:hover {
  color: var(--warm-white);
  border-color: rgba(250, 248, 245, 0.25) !important;
}

/* ── Nav chevrons — panel-aware positioning ────────────────────────── */
.view-nav-btn {
  position: fixed;
  z-index: 90;
}
.view-nav-prev {
  left: 14px;
  transition: left 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Push prev button past the open panel */
.sheets-panel:not([hidden]) ~ .view-nav-prev { left: 280px; }
.view-nav-next { right: 74px; }

/* ── APS toolbar — right-edge vertical glass pill ─────────────────────── */
#aps-viewer .adsk-toolbar {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: fit-content !important;
  min-height: 0 !important;
  padding: 2px 0 !important;
  border-radius: 23px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-filter) !important;
  -webkit-backdrop-filter: var(--glass-filter) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  z-index: 90 !important;
}
/* Nuke background-color on every descendant; preserves icon background-images */
#aps-viewer .adsk-toolbar *,
#aps-viewer #guiviewer3d-toolbar * {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Vertical groups with hairline separators between them */
#aps-viewer .adsk-toolbar .adsk-control-group,
#aps-viewer .adsk-toolbar .adsk-toolbar-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(250, 248, 245, 0.12) !important;
  width: 100% !important;
}
#aps-viewer .adsk-toolbar .adsk-control-group:last-child,
#aps-viewer .adsk-toolbar .adsk-toolbar-group:last-child {
  border-bottom: none !important;
}
/* Buttons fill pill width and host the absolutely-centered icon */
#aps-viewer .adsk-toolbar .adsk-button,
#aps-viewer .adsk-toolbar button {
  width: 42px !important;
  height: 36px !important;
  margin: 1px auto !important;
  padding: 0 !important;
  position: relative !important;
}
/* Icon: dead-center via absolute + translate (bypasses flex sibling issues) */
#aps-viewer .adsk-toolbar .adsk-button-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: 20px !important;
  height: 20px !important;
  background-size: 20px 20px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: block !important;
}
/* Tooltips and submenu arrows: out of flow and hidden */
#aps-viewer .adsk-toolbar .adsk-control-tooltip,
#aps-viewer .adsk-toolbar .adsk-button-arrow {
  position: absolute !important;
  display: none !important;
}
/* Hover/active button feedback */
#aps-viewer .adsk-toolbar .adsk-button:hover {
  background-color: rgba(250, 248, 245, 0.08) !important;
  border-radius: 8px !important;
}
#aps-viewer .adsk-toolbar .adsk-button.active {
  background-color: rgba(255, 197, 39, 0.16) !important;
  border-radius: 8px !important;
}

/* ── Custom home button — top-right glass pill ──────────────────────── */
.lg-home-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  border-radius: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(250, 248, 245, 0.75);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  z-index: 250;
  transition: color 120ms, background-color 120ms;
}
.lg-home-btn:hover {
  color: var(--deep-dark);
  background-color: var(--solar-gold);
  border-color: var(--solar-gold);
}
.lg-home-btn svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

/* ── Ask AI tray — Liquid Glass: one soft translucent pill ──────────
   Single surface, single border. Gold only appears on hover/focus.
   No internal headers, dividers, or solid-color buttons. The closed
   bar and the open input row look like the same object — the panel
   simply extends downward when you click. */
#ask-ai-widget {
  position: fixed !important;
  bottom: 18px;
  left: 18px !important;
  transform: none !important;
  top: auto !important;
  width:     clamp(280px, 30vw, 440px);
  min-width: clamp(280px, 30vw, 440px);
  max-width: calc(100vw - 36px);
  /* Cap height so the panel doesn't climb into the model viewport */
  max-height: min(540px, calc(100vh - 120px));
  box-sizing: border-box;
  border-radius: 22px;
  z-index: 300;
  /* Translucent glass — opaque enough to stay readable when a bright wall
     of the model slides under the bar during pan/orbit. */
  background: rgba(26, 26, 28, 0.72);
  backdrop-filter: blur(44px) saturate(150%);
  -webkit-backdrop-filter: blur(44px) saturate(150%);
  /* Single thin warm-white border at rest; gold accent only on focus */
  border: 1px solid rgba(250, 248, 245, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(250, 248, 245, 0.10),
    0 12px 32px rgba(0, 0, 0, 0.40);
  overflow: hidden;
  /* Flex column so the answer area can scroll independently */
  display: flex;
  flex-direction: column;
  /* Reset shared widget styles from styles.css */
  writing-mode: horizontal-tb !important;
  gap: 0 !important;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
/* Focus-within (typing) wakes a soft gold ring */
#ask-ai-widget:focus-within {
  border-color: rgba(255, 197, 39, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(250, 248, 245, 0.12),
    0 0 0 3px rgba(255, 197, 39, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.45);
}

/* Closed: the toggle IS the pill. One row, search glyph + placeholder. */
#ask-ai-widget #ask-ai-toggle {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  width: 100% !important;
  text-align: left;
  padding: 14px 20px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 400;
  /* Bright enough to stay legible when the model passes under the bar */
  color: rgba(250, 248, 245, 0.68);
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 11px;
  line-height: 1;
  letter-spacing: 0;
  transition: color 180ms ease;
}
#ask-ai-widget #ask-ai-toggle::before {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='rgba(250,248,245,0.70)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
#ask-ai-widget #ask-ai-toggle:hover { color: rgba(250, 248, 245, 0.90); }

/* Open: drop the toggle entirely. The input row replaces it in place. */
#ask-ai-widget.open #ask-ai-toggle { display: none !important; }

/* Panel = continuous extension of the pill. Flex column for scrollable answer. */
#ask-ai-panel {
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* Input row: same padding/glyph slot as the closed pill, so the surface
   reads as continuous. Hairline only when the answer area is also visible. */
#ask-ai-form {
  display: flex;
  align-items: stretch;
  background: transparent;
  flex-shrink: 0;
}
#ask-ai-form::before {
  content: '';
  width: 14px; height: 14px;
  flex-shrink: 0;
  align-self: center;
  margin-left: 20px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='rgba(250,248,245,0.78)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
#ask-ai-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--warm-white);
  font-size: 13px;
  padding: 14px 12px 14px 11px;
  min-width: 0;
}
#ask-ai-input::placeholder { color: rgba(250, 248, 245, 0.50); }
/* Submit: text-only "Ask" on the right edge, gold tint on hover */
#ask-ai-btn {
  background: transparent;
  border: none;
  color: rgba(255, 197, 39, 0.78);
  font-size: 12px;
  font-weight: 600;
  padding: 0 22px;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 0;
  letter-spacing: 0.04em;
  transition: color 160ms ease;
}
#ask-ai-btn:hover { color: var(--solar-gold); }
#ask-ai-btn:disabled { color: rgba(250, 248, 245, 0.22); cursor: default; }
/* Hairline appears only when an answer is on screen */
#ask-ai-answer:not([hidden]) { border-top: 1px solid rgba(250, 248, 245, 0.07); }

#ask-ai-answer {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,197,39,0.25) transparent;
  color: rgba(250, 248, 245, 0.90);
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 14px;
}
/* Webkit scrollbar — minimal gold thumb */
#ask-ai-answer::-webkit-scrollbar { width: 4px; }
#ask-ai-answer::-webkit-scrollbar-track { background: transparent; }
#ask-ai-answer::-webkit-scrollbar-thumb { background: rgba(255,197,39,0.30); border-radius: 2px; }

#ask-ai-answer.raw {
  color: var(--warm-white);
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 14px;
  max-height: 240px;
  overflow-y: auto;
  flex-shrink: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 248, 245, 0.15) transparent;
}
#ask-ai-answer.error { color: #f87171; }
#ask-ai-answer.thinking { color: rgba(250,248,245,0.45); font-style: italic; }
#ask-ai-answer .ask-answer-body p { margin-bottom: 0.5em; }
#ask-ai-answer .ask-answer-body p:last-child { margin-bottom: 0; }
#ask-ai-answer .ask-answer-body ul,
#ask-ai-answer .ask-answer-body ol { padding-left: 1.2em; margin-bottom: 0.5em; }

/* ── Download buttons (generated schedules / exports) ───────────────── */
.ask-downloads {
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(250, 248, 245, 0.07);
}
.ask-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--solar-gold);
  text-decoration: none;
  font: 500 12px/1 'Inter', system-ui, sans-serif;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 197, 39, 0.08);
  border: 1px solid rgba(255, 197, 39, 0.22);
  transition: background 150ms ease, border-color 150ms ease;
  cursor: pointer;
}
.ask-download-btn:hover {
  background: rgba(255, 197, 39, 0.16);
  border-color: rgba(255, 197, 39, 0.40);
}
.ask-download-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.ask-download-meta { font-weight: 400; opacity: 0.65; margin-left: 2px; }

/* Hide the standalone info-btn — it now lives as toolbar button 5 */
.info-btn { display: none !important; }

.ask-tool-trace {
  border-top: 1px solid rgba(250, 248, 245, 0.07);
  padding: 6px 14px 10px;
  font-size: 11px;
  color: rgba(250, 248, 245, 0.35);
}
.ask-tool-trace summary { cursor: pointer; padding: 4px 0; }
.ask-tool-trace pre {
  font-size: 10px; margin-top: 4px;
  color: rgba(250, 248, 245, 0.25);
  overflow-x: auto; white-space: pre-wrap;
}

/* ── Viewer tagline — light gray for legibility on dark backdrop ─────── */
.viewer-tagline { color: rgba(250, 248, 245, 0.55); z-index: 100; }
.viewer-tagline-tekton { color: rgba(250, 248, 245, 0.75); }
.viewer-tagline-accent { color: var(--solar-gold); }

/* Prevent display:flex/block rules from overriding the [hidden] attribute.
   Exception: .sheets-panel[hidden] intentionally keeps display:flex for
   its slide-out animation and has higher specificity so it still wins. */
[hidden] { display: none !important; }
/* Belt-and-suspenders: ID selector beats both class and attribute selectors */
#viewer-error[hidden] { display: none !important; }

/* ── Viewer error overlay ──────────────────────────────────────────── */
.viewer-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--warm-white);
  z-index: 10;
  background: rgba(38, 38, 38, 0.85);
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) and (orientation: portrait) {
  .lg-header {
    min-width: 0;
    width: calc(100vw - 28px);
    height: 42px;
    border-radius: 21px;
    padding: 0 6px 0 12px;
  }
  .lg-header .wordmark-name { font-size: 14px; }
  .lg-header #header-project-name { font-size: 11px; }
  .sheets-panel-toggle-open { top: 68px; }
  .sheets-panel { top: 68px; max-height: calc(100dvh - 82px - 80px); }
  #ask-ai-widget { left: 14px !important; width: calc(100vw - 28px); min-width: 0; }
  .viewer-tagline { display: none; }
  .view-nav-btn { width: 32px; height: 46px; font-size: 20px; }
}