/* Inline Editor Inspector — shared shell.
   Geometry, animation, dark mode. Pane content is provided by registered adapters.
   All colours from --ds-* / --public-* / --theme-* tokens. */

.editor-inspector {
  position: fixed;
  z-index: 9800;
  top: var(--ds-space-5);
  right: var(--ds-space-5);
  bottom: var(--ds-space-5);
  width: min(420px, 38vw);
  display: flex;
  flex-direction: column;
  background: var(--public-card-bg, var(--ds-surface));
  color: var(--ds-text);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-xl);
  transform: translateX(calc(100% + var(--ds-space-6)));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.editor-inspector.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.editor-inspector.is-closing {
  transition:
    transform 160ms ease-in,
    opacity 140ms ease-in;
}

.editor-inspector__backdrop {
  position: fixed;
  inset: 0;
  z-index: 9700;
  background: rgba(15, 23, 42, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* Desktop has no backdrop (Inspector floats, page stays interactive).
   Backdrop appears only on mobile via the breakpoint rules below. */

.editor-inspector__grab {
  display: none;
}

.editor-inspector__header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  padding: var(--ds-space-4) var(--ds-space-5);
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-surface);
  border-top-left-radius: var(--ds-radius-lg);
  border-top-right-radius: var(--ds-radius-lg);
  position: sticky;
  top: 0;
  z-index: 1;
}

.editor-inspector__title-block {
  flex: 1;
  min-width: 0;
}

.editor-inspector__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ds-text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-inspector__context {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--ds-text-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-inspector__icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ds-text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.editor-inspector__icon:hover {
  background: var(--ds-surface-2);
  color: var(--ds-text);
  border-color: var(--ds-border);
}

.editor-inspector__icon:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}

.editor-inspector__tabs {
  display: flex;
  gap: var(--ds-space-1);
  padding: var(--ds-space-2) var(--ds-space-3);
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-surface);
  overflow-x: auto;
  scrollbar-width: none;
}

.editor-inspector__tabs::-webkit-scrollbar { display: none; }

.editor-inspector__tab {
  flex: 0 0 auto;
  padding: var(--ds-space-2) var(--ds-space-3);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ds-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.editor-inspector__tab:hover {
  background: var(--ds-surface-2);
  color: var(--ds-text);
}

.editor-inspector__tab[aria-selected="true"] {
  background: var(--ds-accent);
  color: var(--ds-accent-text);
}

.editor-inspector__tab:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}

.editor-inspector__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ds-space-5);
  scrollbar-gutter: stable;
  /* Prevent iOS scroll chaining — keep scroll contained inside the body */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.editor-inspector__body:focus { outline: none; }

/* ── Mobile: bottom sheet ──────────────────────────────────────────────── */

@media (max-width: 767px) {
  .editor-inspector {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 88vh;
    border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
    border-bottom: none;
    transform: translateY(calc(100% + var(--ds-space-3)));
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* Prevent the page from scrolling when the user touches the inspector
       chrome (grab handle, header, footer areas). The body slot and tabs
       strip re-enable pan-y below so they stay independently scrollable. */
    touch-action: none;
  }

  .editor-inspector.is-open {
    transform: translateY(0);
  }

  /* Re-enable vertical scroll inside the content body. */
  .editor-inspector__body {
    touch-action: pan-y;
    /* Extra bottom padding so Apply buttons / last items aren't flush
       against the rounded bottom edge of the sheet. */
    padding-bottom: calc(var(--ds-space-5) + 1.5rem);
  }
  /* Tab bar scrolls horizontally — must use pan-x, not pan-y. */
  .editor-inspector__tabs {
    touch-action: pan-x;
  }

  .editor-inspector__grab {
    display: block;
    width: 2.5rem;
    height: 4px;
    margin: var(--ds-space-2) auto 0;
    background: var(--ds-border);
    border-radius: var(--ds-radius-full);
    flex: 0 0 auto;
  }

  .editor-inspector__header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: var(--ds-space-3);
  }

  /* Backdrop visible only on mobile, and only when an Inspector pane is
     actually open (not when a bridged pane like Layout Library or Hero
     Drawer is open — those have their own chrome). */
  body.editor-inspector-pane-open .editor-inspector__backdrop {
    opacity: 1;
    pointer-events: auto;
    /* Prevent page scroll for touches on the backdrop (the dark overlay
       behind the bottom sheet). */
    touch-action: none;
  }

  /* Larger touch targets on mobile (WCAG ≥ 44px) */
  .editor-inspector__icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1rem;
  }

  .editor-inspector__tab {
    padding: 0.65rem var(--ds-space-3);
    font-size: 0.85rem;
    min-height: 2.75rem;
  }

  .editor-inspector__back[hidden] { display: none; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .editor-inspector,
  .editor-inspector.is-closing,
  .editor-inspector__backdrop {
    transition: none;
  }
}

/* ── Dark mode (class-based, follows the platform pattern) ────────────── */

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector {
  background: var(--public-card-bg, #0f172a);
  color: var(--public-text-strong, #f8fafc);
  border-color: var(--public-divider-color, rgba(148, 163, 184, 0.16));
}

/* Header and tabs: explicit dark values so the heading never stays white
   if --public-card-bg fails to cascade (e.g. preset-mode vs visitor toggle). */
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__header,
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__tabs {
  background: var(--public-card-bg, #0f172a);
  border-color: var(--public-divider-color, rgba(148, 163, 184, 0.16));
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__title {
  color: var(--public-text-strong, #f8fafc);
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__context {
  color: var(--public-text-muted, rgba(226, 232, 240, 0.86));
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__grab {
  background: rgba(148, 163, 184, 0.3);
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__tab {
  color: var(--public-text-muted, rgba(226, 232, 240, 0.86));
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--public-text-strong, #f8fafc);
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__tab[aria-selected="true"] {
  background: var(--ds-accent, var(--theme-primary, #6366f1));
  color: #fff;
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__icon {
  color: var(--public-text-muted, rgba(226, 232, 240, 0.78));
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__icon:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--public-text-strong, #f8fafc);
  border-color: rgba(148, 163, 184, 0.2);
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__backdrop {
  background: rgba(2, 6, 23, 0.55);
}

/* ── Opt-in form helpers (no baseline auto-styling) ─────────────────────
   We deliberately do NOT auto-style raw <input>/<select>/<textarea> inside
   the Inspector body — that would override pane-specific styles like
   .ds-style-select / .hsd-input (specificity 0,0,5,1 vs 0,0,1,0 would
   always win). Panes opt in via the helper classes below, OR ship their
   own CSS scoped to a pane class. */

.editor-inspector__section {
  margin-bottom: var(--ds-space-5);
}

.editor-inspector__section:last-child { margin-bottom: 0; }

.editor-inspector__section-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-text-soft);
  margin: 0 0 var(--ds-space-2);
}

.editor-inspector__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-space-1);
}

/* The `__section > label` shortcut keeps the Typography template clean
   without auto-styling labels everywhere inside the body. */
.editor-inspector__section > label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ds-text-muted);
  margin-bottom: var(--ds-space-1);
}

.editor-inspector__select,
.editor-inspector__input,
.editor-inspector__textarea {
  width: 100%;
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--public-input-bg, var(--ds-surface-2));
  color: var(--ds-text);
  border: 1px solid var(--public-input-border, var(--ds-border));
  border-radius: var(--ds-radius-md);
  font-size: 0.875rem;
  line-height: 1.4;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.editor-inspector__select:focus,
.editor-inspector__input:focus,
.editor-inspector__textarea:focus {
  outline: none;
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px rgba(var(--ds-accent-rgb, 37, 99, 235), 0.18);
}

.editor-inspector__hint {
  margin: 0 0 var(--ds-space-4);
  font-size: 0.78rem;
  color: var(--ds-text-muted);
  line-height: 1.45;
}

.editor-inspector__status {
  margin-top: var(--ds-space-3);
  font-size: 0.72rem;
  color: var(--ds-text-soft);
  line-height: 1.4;
}

.editor-inspector__status[hidden] { display: none; }

.editor-inspector__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
}

.editor-inspector__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--ds-surface-2);
  color: var(--ds-text);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.editor-inspector__chip:hover {
  background: var(--ds-surface);
  border-color: var(--ds-accent);
  color: var(--ds-accent);
}

.editor-inspector__chip:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .editor-inspector__chip {
    min-height: 2.5rem;
    padding: var(--ds-space-2) var(--ds-space-4);
    font-size: 0.85rem;
  }
}

/* ── Dark mode: body / helper classes ───────────────────────────────────
   The token chain (--ds-* → --public-*) should handle this automatically,
   but we add explicit fallbacks so the body content stays legible if the
   cascade is broken (same root cause as the header issue above). */
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__body {
  background: var(--public-card-bg, #0f172a);
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__section-title,
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__label,
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__section > label {
  color: var(--public-text-muted, rgba(226, 232, 240, 0.86));
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__hint,
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__status {
  color: var(--public-text-muted, rgba(226, 232, 240, 0.72));
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__select,
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__input,
:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__textarea {
  background: var(--public-input-bg, rgba(4, 10, 24, 0.90));
  color: var(--public-input-text, #f8fafc);
  border-color: var(--public-input-border, rgba(148, 163, 184, 0.20));
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__chip {
  background: rgba(255, 255, 255, 0.06);
  color: var(--public-text-strong, #f8fafc);
  border-color: rgba(148, 163, 184, 0.18);
}

:is(body.theme-dark, body.ui-mode-dark, body.preset-mode-dark) .editor-inspector__chip:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--ds-accent, var(--theme-primary, #6366f1));
  color: var(--ds-accent, var(--theme-primary, #6366f1));
}

/* ── Toolbar button "active" reflection ─────────────────────────────────
   The EditorPanel controller sets body[data-editor-panel="<paneId>"] when a
   pane is open. Toolbar buttons that opened a pane carry data-toggles-pane
   with the same id, so this rule applies the active-state styling without
   any per-button JS state management. */
body[data-editor-panel] [data-toggles-pane] {
  /* No styling unless the body attr matches the button's pane id (rule below) */
}

body[data-editor-panel="element.ai"]          [data-toggles-pane="element.ai"],
body[data-editor-panel="element.font"]        [data-toggles-pane="element.font"],
body[data-editor-panel="page.theme.style"]    [data-toggles-pane="page.theme.style"],
body[data-editor-panel="page.theme"]          [data-toggles-pane="page.theme"],
body[data-editor-panel="page.sections"]       [data-toggles-pane="page.sections"],
body[data-editor-panel="block.settings.hero"] [data-toggles-pane="block.settings.hero"],
body[data-editor-panel="block.layout"]        [data-toggles-pane="block.layout"] {
  background: var(--ds-accent);
  color: var(--ds-accent-text);
  border-color: var(--ds-accent);
  box-shadow: 0 4px 14px rgba(var(--ds-accent-rgb, 37, 99, 235), 0.25);
}