/* Cosmo Lab chrome ----------------------------------------------------- */

/* Console trigger: absolutely positioned to the right of the host. Out of normal
   flow so parent layout (column flex, vertical sidebar, etc.) cannot push it
   onto a second line. */
.cosmo-lab-trigger {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  pointer-events: none;
  /* No transition until body.cosmo-lab-ready is set after first paint.
     Prevents the trigger from animating in on every page load / navigation. */
}
body.cosmo-lab-ready .cosmo-lab-trigger {
  transition: opacity var(--dur-fast, 120ms) var(--ease-out, ease-out),
              transform var(--dur-fast, 120ms) var(--ease-out, ease-out),
              color var(--dur-fast, 120ms) var(--ease-out, ease-out);
}
.cosmo-lab-trigger svg { width: 14px; height: 14px; }
.cosmo-lab-host:hover .cosmo-lab-trigger,
.cosmo-lab-trigger:focus,
.cosmo-lab-trigger.is-open,
.cosmo-lab-trigger.is-revealed {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}
.cosmo-lab-trigger:hover { color: var(--ink); border-color: var(--ink-300); }

/* The .cosmo-lab-host wraps the logo so the trigger has a sized anchor for
   absolute positioning. `inline-block + relative` matches the natural inline
   sizing of an svg / img logo without changing the parent layout flow. The
   trigger is absolute so it contributes zero size and cannot wrap onto a new
   line in column-oriented parents. */
.cosmo-lab-host {
  display: inline-block;
  position: relative;
  vertical-align: top;
  line-height: 0;
}

/* Console menu floating popover */
.cosmo-lab-console {
  position: absolute;
  top: 60px; /* below default 60px topbar */
  left: 0;
  min-width: 220px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  z-index: 200;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.cosmo-lab-console.is-open { display: flex; }
.cosmo-lab-console-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
}
.cosmo-lab-console-item:hover { background: var(--bg-sunken); }
.cosmo-lab-console-item[disabled] {
  color: var(--ink-muted);
  cursor: not-allowed;
}
.cosmo-lab-console-item-coming-soon {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Panel host: a sibling column to the right of the page content */
#cosmo-lab-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 100vh;
  background: var(--bg-panel);
  /* border-left only when panel is open; otherwise a 1px line paints across
     the full viewport-right edge and looks like a stray drop shadow. */
  border-left: 0;
  z-index: 100;
  overflow: hidden;
  transition: width var(--dur-med, 180ms) var(--ease-out, ease-out);
  display: flex;
  flex-direction: column;
}
body.cosmo-lab-open #cosmo-lab-panel {
  width: var(--cosmo-lab-width, 440px);
  border-left: 1px solid var(--line);
}

/* Shrink the page content when a panel is open, so the panel sits as a sibling */
body.cosmo-lab-open {
  padding-right: var(--cosmo-lab-width, 440px);
  transition: padding-right var(--dur-med, 180ms) var(--ease-out, ease-out);
}

/* Fixed-positioned product slide-outs (.so) anchor to viewport right edge by
   default. When the lab is open they would render behind it. Shift their right
   anchor by the lab width so the product UX stays usable next to the lab.
   Add more selectors here as new fixed right-anchored product panels appear. */
body.cosmo-lab-open .so,
body.cosmo-lab-open .so-overlay,
body.cosmo-lab-open .floating-panel,
body.cosmo-lab-open .quota-popover {
  right: var(--cosmo-lab-width, 440px);
}

/* Drag handle on the left edge of the panel */
.cosmo-lab-resize {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
}
.cosmo-lab-resize:hover { background: var(--accent-soft, var(--bg-sunken)); }

/* Panel header (shared) */
.cosmo-lab-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.cosmo-lab-header-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.cosmo-lab-header-spacer { flex: 1; }
.cosmo-lab-sync-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cosmo-lab-sync-status.is-synced { color: var(--green-600, var(--ink)); }
.cosmo-lab-sync-status.is-local { color: var(--amber-600, var(--ink-muted)); }
.cosmo-lab-close {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
}
.cosmo-lab-close:hover { color: var(--ink); background: var(--bg-sunken); }

/* Panel body scroll area */
.cosmo-lab-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

/* Milestone feature-flag: any element tagged data-mst that does not include
   the active milestone id is hidden. JS sets the class on non-matching nodes
   when a milestone becomes active. */
.cosmo-lab-mst-hidden { display: none !important; }