.peppy-devbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 12px;
  background: #14181b;
  border-bottom: 1px solid #2ee6a6;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.peppy-devbar-brand {
  color: #2ee6a6;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.peppy-devbar-modes {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  border-left: 1px solid #2c3438;
}

.peppy-devbar-premium {
  min-width: 92px;
  height: 26px;
  margin-left: 2px;
  padding: 0 9px;
  border: 1px solid #6c5b25;
  border-radius: 999px;
  background: #272319;
  color: #e5c362;
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.peppy-devbar-premium:hover {
  border-color: #e5c362;
  background: #35301d;
}

.peppy-devbar-premium.is-active {
  border-color: #f0ce68;
  background: #e5c362;
  color: #211b0e;
}

.peppy-devbar-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #8b98a0;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.peppy-devbar-btn:hover {
  background: #1f262a;
  color: #e6f9f2;
}

.peppy-devbar-btn.is-active {
  background: rgba(46, 230, 166, 0.12);
  border-color: #2ee6a6;
  color: #2ee6a6;
}

.peppy-devbar-icon {
  display: block;
  transition: transform 0.25s ease;
}

.peppy-devbar-btn.is-landscape .peppy-devbar-icon {
  transform: rotate(90deg);
}

/* The reactive preview lives in the same document as the app.  Padding the
   body used to add the bar *after* the app had claimed 100dvh: the shell was
   one viewport tall, then the 38px bar pushed its bottom (and therefore the
   dock) below the visible viewport.  Give the bar a real layout reservation
   instead, and keep the shell inside what remains of the viewport. */
body.peppy-devbar-active {
  --p-devbar-height: 38px;
  height: 100dvh;
  min-height: 0;
  padding-top: 0;
  overflow: hidden;
}

body.peppy-devbar-active .p-shell {
  /* Do not depend on the keyboard stabiliser's runtime variable here. This is
     a desktop-only authoring aid, and an auth refresh can briefly clear that
     value; `100dvh` keeps the dock present for that entire transition. */
  height: calc(100vh - var(--p-devbar-height));
  height: calc(100dvh - var(--p-devbar-height));
  margin-top: var(--p-devbar-height);
  margin-bottom: 0;
}

/* In the reactive web preview, the browser page can still be taller than the
   app frame while a view is mounting. An absolutely-positioned dock follows
   that frame's bottom in that case, which makes it look like it is glued to
   the end of the document. Pin the preview dock to the browser viewport
   instead, while keeping its width aligned with Peppy's shell. This selector
   only exists when the web-only developer controls are present; Android keeps
   the normal in-shell dock. */
body.peppy-devbar-active .p-tabbar {
  position: fixed;
  z-index: 31;
  left: 0;
  right: 0;
  bottom: 0;
  width: var(--p-shell-w);
  max-width: 100%;
  margin: 0 auto;
}

/* Drawers are fixed because they sit outside the shell.  They need the same
   top edge as the reactive app frame or their header appears to float under
   the developer controls.  Desktop panels override the regular 24px top in
   peppy-responsive.css, so the matching override is kept there. */
body.peppy-devbar-active .p-drawer {
  top: calc(var(--p-devbar-height) + 26px + var(--p-safe-top));
}

/* Desktop drawers are side panels with a 24px frame inset rather than phone
   sheets with a 26px grab clearance.  This file loads after the responsive
   layer, so keeping the final exception here avoids a source-order race. */
@media (min-width: 1200px) {
  body.peppy-devbar-active .p-drawer {
    top: calc(var(--p-devbar-height) + 24px);
  }
}

.peppy-devbar-stage {
  position: fixed;
  z-index: 999998;
  inset: 38px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  padding: 24px;
  background: #2b2f31;
}

/* The class selector's unconditional display:flex above outranks the
   browser's default [hidden] { display: none } (author styles beat the UA
   stylesheet), so Reactive mode setting stage.hidden would otherwise leave
   this overlay stuck on screen. */
.peppy-devbar-stage[hidden] {
  display: none;
}

.peppy-devbar-frame {
  display: block;
  border: 1px solid #2c3438;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  max-width: 100%;
}

/* Tablet and Mobile emulate a handheld screen, not a window on a desk - no
   padding around it and no rounded corners, unlike Desktop's floating-window
   treatment above. The frame still renders at the device's real pixel size
   (bounded, not stretched to fill the browser window) - only its own edges
   change, so it stays a device-accurate box with its background flush to
   every side instead of inset behind a border/radius. */
.peppy-devbar-stage.is-portable {
  padding: 0;
}

.peppy-devbar-frame.is-portable {
  border: none;
  border-radius: 0;
  box-shadow: none;
}