/* Strata Platform -- Dock View Panel
 *
 * Slide-out right-edge side panel registered via Strata.registerDockView
 * and invoked via ctx.dock.open. See docs/strata-dock-platform.md.
 *
 * Layer plan (section 6.5):
 *   z-index 7000 -- this dock panel
 *   (7500 is reserved for the Phase 2 launcher popover -- not in this file)
 *
 * Both themes always: every color/background/border resolves via
 * platform tokens (--panel, --panel-2, --text-primary, --border-strong,
 * --accent, --shadow*). No hardcoded hex outside the platform's :root /
 * [data-theme="light"] blocks.
 */

/* ============================================================
   Layout reservation
   ============================================================
   The shell adds .strata-dock-open + sets --strata-dock-width on
   #strata-app when the dock is open. The main content area reserves
   right-side space so the active module is NOT unmounted; the dock
   simply sits to its right. On narrow viewports we drop the reservation
   so the dock overlays.
*/

/* Cross-mount note: --strata-dock-width and .strata-dock-open live on
 * .strata-app (the shell root). The panel itself mounts on document.body
 * so it persists across module navigation. The reservation cascades
 * because .strata-content is inside .strata-app -- if either of those
 * structural relationships changes, this CSS scope breaks silently.
 * The platform/dock.js#setShellOpen / setShellClosed pair owns toggling. */
.strata-app {
  --strata-dock-width: 0px;
}

.strata-app.strata-dock-open .strata-content {
  padding-right: calc(24px + var(--strata-dock-width, 0px));
}

/* ============================================================
   Panel chrome
   ============================================================ */

/* The panel clears the 48px .strata-topbar. It is position:fixed and lives
   OUTSIDE .strata-app, so it does NOT inherit the margin-top that styles.css
   applies to .strata-app when a banner is showing -- the banner-aware overrides
   below exist for exactly that reason. Keep them in step with the
   .strata-has-*-banner .strata-app rules in platform/styles.css. */
.strata-dock-panel {
  position: fixed;
  top: 48px;
  right: 0;
  bottom: 0;
  width: 480px;
  min-width: 320px;
  z-index: 7000;
  background: var(--panel);
  color: var(--text-primary);
  border-left: 1px solid var(--border-strong);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 200ms ease-out;
  will-change: transform;
}

/* Banner-aware top offset.
   ------------------------------------------------------------------
   A banner shifts .strata-topbar DOWN by its own height (styles.css pushes
   .strata-app via margin-top). The panel is fixed and outside .strata-app, so
   without these it stays at top:48px and OVERLAPS the lower part of the
   now-lower topbar -- covering the right-hand topbar controls (Help, Sync,
   Today, Launcher) and making them unclickable while any dock view is open.
   Production has no banner, so this only bit dev/elevation sessions, which is
   also exactly where the app gets verified. It became load-bearing when Help
   moved into the dock: #help-btn is Help's toggle, so a covered topbar means
   no way to click it closed (Escape and the panel's own close button still
   work). Values are topbar 48px + the same shift styles.css applies:
   elevation 32, dev 28, both 60.

   DESKTOP ONLY, and the media query is load-bearing. At the phone breakpoint
   platform/mobile.css turns this panel into a bottom drawer with `top: auto`.
   These banner selectors carry a class MORE than that rule, and specificity beats
   source order, so unscoped they would win even though mobile.css loads later --
   re-anchoring the drawer to the top of the screen with a gap beneath it. The
   phone drawer needs no banner offset anyway: it is bottom-anchored, so a banner
   at the top cannot collide with it. */
@media (min-width: 641px) {
  .strata-has-elevation-banner .strata-dock-panel { top: 80px; }
  .strata-has-dev-banner .strata-dock-panel { top: 76px; }
  .strata-has-dev-banner.strata-has-elevation-banner .strata-dock-panel { top: 108px; }
}

.strata-dock-panel-open {
  transform: translateX(0);
}

.strata-dock-panel-closing {
  transform: translateX(100%);
}

/* Resize handle on the left edge -- platform-provided. Views observe
 * their content area's size via ResizeObserver per spec section 4.3. */
.strata-dock-resize {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  background: transparent;
  z-index: 1;
}

.strata-dock-resize:hover,
.strata-dock-resize:active {
  background: var(--accent-soft);
}

/* Header strip with title + escalate + close. */
.strata-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--panel-2);
  flex-shrink: 0;
}

.strata-dock-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.strata-dock-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.strata-dock-escalate {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  line-height: 1.4;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

.strata-dock-escalate:hover,
.strata-dock-escalate:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  outline: none;
}

.strata-dock-close {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  touch-action: manipulation;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}

.strata-dock-close:hover,
.strata-dock-close:focus-visible {
  background: var(--row-hover);
  color: var(--text-primary);
  outline: none;
}

/* Content area -- the view renders here. The view is responsible for
 * its own scrolling + theme-correct internals. */
.strata-dock-content {
  flex: 1;
  overflow-y: auto;
  position: relative;
  background: var(--panel);
}

.strata-dock-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ============================================================
   Narrow viewport: overlay instead of reserving space
   ============================================================
   At <= 768px the active module is already cramped. Overlaying keeps
   the dock usable without squeezing the underlying view further;
   contract still says no focus trap, so the user can dismiss with the
   close button or Escape and resume work. */

@media (max-width: 768px) {
  .strata-app.strata-dock-open .strata-content {
    padding-right: 24px; /* reset; overlay covers the right edge */
  }

  .strata-dock-panel {
    width: min(420px, 92vw);
  }
}

/* ============================================================
   Phone: touch-size the header controls
   ============================================================
   The close control is ~28px on desktop (16px glyph + 6px padding), which is
   under the 44px phone minimum in .claude/rules/platform.md CSS rule #9. Grow
   the HIT AREA only -- min-width / min-height on the button, glyph untouched --
   the same approach styles.css already uses for the topbar icon buttons
   (.strata-hamburger / .strata-topbar-btn / .strata-theme-toggle) in its
   @media (max-width: 640px) block. This applies to every dock view; it also
   replaces the 44px bump the retired Help modal carried on its own close
   button, so migrating Help into the dock does not shrink its close target. */

@media (max-width: 640px) {
  .strata-dock-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================================
   Reduced-motion preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .strata-dock-panel {
    transition: none;
  }
}