/* =============================================================
   Platform feed previews — realistic chrome for LinkedIn, X, IG.
   Loaded only by index-preview.html. Each .pv-* root is theme-
   contained: colors, fonts, and spacing match each platform's
   actual feed UI as closely as is reasonable in CSS.

   Sizing is fluid — the card fills its parent column, so the
   side-by-side editor + preview layout works at any panel width.
   ============================================================= */

/* Side-by-side container that hosts the editor on the left and the
   realistic preview on the right. Collapses to a stack on narrow widths. */
.tab-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.tab-split > .tab-split-edit { min-width: 0; }
.tab-split > .tab-split-preview { min-width: 0; position: sticky; top: 80px; }
@media (max-width: 980px) {
  .tab-split { grid-template-columns: 1fr; }
  .tab-split > .tab-split-preview { position: static; }
}

.preview-frame-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Action row above each realistic preview card.
   Layout: label · counter (if any) · Regenerate (right-aligned). */
.pv-action-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}
.pv-char-counter {
  font-family: 'Manrope', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-muted);
}
/* Aspect / variant pickers in the action row — match the workshop's
   ghost-toolbar feel (not the dark-glass style used inside images). */
.pv-row-select {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bg-elev-2);
  color: var(--text-2);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.pv-row-select:hover { color: var(--text); border-color: var(--accent); }
.pv-row-select option { color: var(--text); background: var(--bg-elev); }
/* (Auto-margin alignment trick removed — action row is now justify-content:
   center, all controls cluster in the middle above the card.) */
/* Below-card hint on the single-image tabs — explains that the card's
   text body is sourced from Hook #1, since that connection isn't obvious. */
.pv-image-hint {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
  opacity: 0.85;
  font-family: 'Inter Tight', sans-serif;
}

/* Card host — wraps the realistic card and any edit-mode controls
   (Save/Cancel bar) so they share a stacking context below the card. */
.pv-card-host { display: flex; flex-direction: column; gap: 8px; }

/* Visual-source dropdown — leftmost control in the action row. The base
   .pv-row-select styling already gives it the same look as aspect / variant;
   the modifier below keeps a subtle accent so the source picker reads as
   the "primary" choice on the row. */
.pv-source-select { border-color: var(--accent); }

/* Per-source control panel host — sits between the action row and the card.
   Only renders content when source !== 'brand'. The stub note inside is the
   Phase 1 placeholder until library / AI editors land. */
.pv-source-panel-host { display: flex; flex-direction: column; justify-content: center; }

/* Slide text list — shown below the card in carousel tab */
.carousel-slide-list { width: 100%; margin-top: 20px; }
.carousel-slide-list-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.pv-source-panel {
  width: 100%;
  max-width: 520px;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
}
.pv-source-panel-stub {
  display: flex; align-items: center; gap: 8px;
  font-style: italic;
}

/* Composite media stub — shown when a non-brand source is picked but the
   supporting data isn't filled in yet (e.g. library image not picked). */
.tp-bladestack .cx-media-slot .cx-media-stub {
  margin: auto;
  font-family: var(--tp-display);
  font-size: 28px; font-weight: 500;
  color: var(--tp-text-muted);
  text-align: center;
  letter-spacing: -0.005em;
  padding: 0 60px;
}

/* Brand-library picker — thumbnail grid that sits inside the source panel
   when source === 'library'. Click a tile to pick; the picked tile gets an
   accent-colored border. Empty state shows a status line above the grid. */
.pv-library-picker { display: flex; flex-direction: column; gap: 8px; }
.pv-library-status {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11.5px; color: var(--text-muted);
  font-style: italic;
}
.pv-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 2px;
}
.pv-library-tile {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.pv-library-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.pv-library-tile--picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.pv-library-tile img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.pv-library-tile-tags {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 3px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,0.78));
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 9.5px; color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  pointer-events: none;
}

/* AI editor — style preset + mode badge + prompt textarea. Saves on a
   debounce; in-memory updates flush sync on every keystroke so a Generate
   click within the debounce window still uses the latest prompt. */
.pv-ai-editor { display: flex; flex-direction: column; gap: 8px; }
.pv-ai-editor-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pv-ai-mode-badge {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.02em;
  flex: 1;
  font-style: italic;
}
.pv-ai-prompt {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12.5px; line-height: 1.5;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-strong);
  outline: none;
  resize: vertical;
  min-height: 88px;
}
.pv-ai-prompt:focus { border-color: var(--accent); }

/* =============================================================
   Interactive image slot — fills the .pv-li-image / .pv-x-image /
   .pv-ig-image wrapper. Empty state shows a centered Generate
   button with aspect/variant controls below. Filled state shows
   the cached PNG with a hover overlay exposing the same controls
   plus Regenerate / Download.
   ============================================================= */
.pv-img-slot {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* In empty state, stack the label + Generate button + control row vertically
   (flex-direction: row was leaving the controls overflow-clipped beside the
   button on narrow columns). */
.pv-img-slot--empty {
  flex-direction: column;
  gap: 12px;
}
@keyframes pvImgFadeUp {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pv-img-slot-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  animation: pvImgFadeUp 0.4s ease forwards;
}

/* Empty state — generate prompt sits center-stage. */
.pv-img-slot-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}
.pv-img-slot-empty-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}
.pv-li-image .pv-img-slot--empty .pv-img-slot-empty-label { color: rgba(0, 0, 0, 0.45); }
.pv-img-slot-generate-btn {
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}
.pv-img-slot-generate-btn:hover { transform: translateY(-1px); }
.pv-img-slot-generate-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Hover overlay (filled state) sits top-right and fades in.
   In empty state, it's repositioned inline below the Generate button. */
.pv-img-slot-overlay {
  position: absolute;
  top: 8px; right: 8px;
  display: flex; gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.pv-img-slot--filled:hover .pv-img-slot-overlay,
.pv-img-slot--filled:focus-within .pv-img-slot-overlay,
.pv-carousel-slot--filled:hover .pv-img-slot-overlay,
.pv-carousel-slot--filled:focus-within .pv-img-slot-overlay,
.platform-panel:hover .pv-carousel-slot--filled .pv-img-slot-overlay {
  opacity: 1;
  pointer-events: auto;
}
.pv-img-slot--empty .pv-img-slot-overlay {
  position: static;
  opacity: 1;
  pointer-events: auto;
  justify-content: center;
  margin-top: 4px;
}

.pv-img-control {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  backdrop-filter: blur(6px);
}
.pv-img-control:hover { background: rgba(0, 0, 0, 0.85); }
.pv-img-btn { background: rgba(0, 0, 0, 0.7); }
.pv-img-control option { color: #000; background: #fff; }

/* In empty state the controls sit on the card's own background, so
   light/dark surfaces need different chroma for legibility. */
.pv-img-slot--empty .pv-img-control {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Rendering state — pulse + label while the PNG is being captured. */
.pv-img-slot--rendering {
  pointer-events: none;
}
.pv-img-slot--rendering::after {
  content: 'Rendering…';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  z-index: 2;
}

/* Reposition mode */
.pv-repos-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 3;
}
.pv-repos-img:active { cursor: grabbing; }
.pv-repos-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.55);
  z-index: 4;
  transition: opacity 150ms ease;
}
.pv-repos-bar--dragging {
  opacity: 0.08;
  pointer-events: none;
}
.pv-repos-hint {
  flex: 1;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Carousel rendering state — same overlay as single-post. */
.pv-carousel-slot--rendering {
  pointer-events: none;
}
.pv-carousel-slot--rendering::after {
  content: 'Rendering…';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  z-index: 2;
}

/* ── Fields panel (AI sources) ────────────────────────────────────────── */

/* The fields panel container — lives inside the empty state or edit overlay. */
.pv-img-slot-fields-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
/* Each label + input pair */
.pv-slot-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* Make the empty state's inner container stretch full-width so the
   fields panel fills the available space rather than centring narrow. */
.pv-img-slot-empty:has(.pv-img-slot-fields-panel) {
  align-items: stretch;
  justify-content: flex-end;
  padding-bottom: 20px;
}
/* The generate button should sit below the fields, centred. */
.pv-img-slot-empty:has(.pv-img-slot-fields-panel) .pv-img-slot-generate-btn {
  align-self: center;
  margin-top: 4px;
}

/* ── Edit mode (filled + editing) ─────────────────────────────────────── */
.pv-img-slot--editing .pv-img-slot-img {
  filter: blur(8px);
  opacity: 0.35;
  transition: filter 180ms ease, opacity 180ms ease;
}
.pv-img-slot--editing .pv-img-slot-overlay {
  display: none;
}
/* Overlay that sits on top of the blurred image */
.pv-img-slot-edit-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  gap: 10px;
  z-index: 5;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}
/* Action row at the bottom of the edit overlay */
.pv-img-slot-edit-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Per-platform background tint of the empty image slot — subtle, picks
   up each platform's neutral surface so the empty state doesn't feel
   like a hole in the card. */
.pv-li-image .pv-img-slot { background: #f3f2ef; }
.pv-x-image .pv-img-slot { background: rgb(22, 24, 28); }
.pv-x-image .pv-img-slot--empty .pv-img-slot-empty-label { color: rgba(255, 255, 255, 0.55); }
.pv-ig-image .pv-img-slot { background: #1a1a1a; }
.pv-ig-image .pv-img-slot--empty .pv-img-slot-empty-label { color: rgba(255, 255, 255, 0.55); }

/* =============================================================
   Swipeable carousel slot — extends the single-image slot pattern
   with arrows, pagination dots, slide counter, and click-to-edit
   per slide. Mounted inside the realistic preview's image area
   (LinkedIn / IG carousels).
   ============================================================= */
.pv-carousel-slot { /* inherits .pv-img-slot — no overrides needed for layout */ }

.pv-li-image .pv-carousel-slot { background: #f3f2ef; }
.pv-ig-image .pv-carousel-slot { background: #1a1a1a; }

/* Slide counter — top-left, small platform-neutral badge */
.pv-carousel-counter {
  position: absolute;
  top: 10px; left: 10px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

/* Pagination dots — bottom center, IG/LinkedIn style. Active dot
   gets a stronger fill and a slight scale-up. */
.pv-carousel-dots {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 1;
}
.pv-carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  padding: 0; cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.pv-carousel-dot:hover { background: rgba(255, 255, 255, 0.85); }
.pv-carousel-dot.active {
  background: #fff;
  transform: scale(1.25);
}
/* On IG light cards, dots default to a darker fill so they're visible
   against the typically-lighter slide imagery. */
.pv-ig-image .pv-carousel-dot { background: rgba(0, 0, 0, 0.35); }
.pv-ig-image .pv-carousel-dot:hover { background: rgba(0, 0, 0, 0.65); }
.pv-ig-image .pv-carousel-dot.active { background: rgba(0, 0, 0, 0.85); }

/* Arrows — float on the left/right edges, hover-reveal so they don't
   crowd the slide. Sized large enough to hit reliably. */
.pv-carousel-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 22px; line-height: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease, background 120ms ease;
  z-index: 1;
  backdrop-filter: blur(4px);
}
.pv-carousel-slot--filled:hover .pv-carousel-arrow,
.pv-carousel-slot--filled:focus-within .pv-carousel-arrow { opacity: 1; }
.pv-carousel-arrow:hover { background: rgba(0, 0, 0, 0.8); }
.pv-carousel-arrow-prev { left: 8px; padding-right: 2px; }
.pv-carousel-arrow-next { right: 8px; padding-left: 2px; }

/* Slide-edit mode — the slide image disappears, a labeled textarea
   sits in its place. The Save/Cancel bar goes outside the slot
   (in editHost) so the slot's overflow:hidden doesn't clip it. */
.pv-carousel-slot--editing { padding: 12px; flex-direction: column; align-items: stretch; gap: 8px; }
.pv-carousel-edit-panel {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%;
}
.pv-carousel-edit-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}
.pv-li-image .pv-carousel-edit-label { color: rgba(0, 0, 0, 0.55); }
.pv-x-image .pv-carousel-edit-label  { color: rgba(255, 255, 255, 0.55); }
.pv-ig-image .pv-carousel-edit-label { color: rgba(0, 0, 0, 0.55); }
.pv-carousel-edit-area {
  /* Carousel slide text is short — keep min-height modest. */
  min-height: 100px;
  font-size: 13px;
  line-height: 1.4;
}
.pv-x-image .pv-carousel-edit-area {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgb(231, 233, 234);
}

/* =============================================================
   X 4-image grid slot — 2×2 layout matching X's tweet-media grid
   for 4-image tweets. Square cells, ~3px gaps, all clipped by the
   tweet card's rounded corner radius. Click any cell to edit the
   matching slide's text. Empty/edit/rendering states inherit the
   shared .pv-img-slot-* CSS conventions.
   ============================================================= */
.pv-x-grid-slot {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: rgb(22, 24, 28);
}
/* Empty state — render the 2×2 grid as dashed placeholders so the user
   can see what they'll get, with a centered CTA floating over it. */
.pv-x-grid-slot--empty .pv-img-slot-empty-label { color: rgba(255, 255, 255, 0.65); }
.pv-x-grid--placeholder { background: rgb(22, 24, 28); }
.pv-x-grid-cell--placeholder {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  cursor: default;
}
.pv-x-grid-cell--placeholder:hover { filter: none; }
.pv-x-grid-empty-cta {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.pv-x-grid-empty-cta .pv-img-slot-empty-label,
.pv-x-grid-empty-cta .pv-img-slot-generate-btn { pointer-events: auto; }

.pv-x-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  width: 100%; height: 100%;
  background: rgb(22, 24, 28);
}
.pv-x-grid-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: rgb(15, 17, 21);
  transition: filter 120ms ease;
}
.pv-x-grid-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pv-x-grid-cell:hover { filter: brightness(1.06); }
/* Edit hint — small label centered on the cell, fades in on hover so
   the click-to-edit affordance is discoverable without persistent chrome. */
.pv-x-grid-edit-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.pv-x-grid-cell:hover .pv-x-grid-edit-hint { opacity: 1; }

/* Edit-mode styling reuses the swipe carousel's edit panel/area look. */
.pv-x-grid-slot--editing {
  flex-direction: column;
  align-items: stretch;
  padding: 12px;
  gap: 8px;
}
.pv-x-grid-slot--editing .pv-carousel-edit-label { color: rgba(255, 255, 255, 0.55); }
.pv-x-grid-slot--editing .pv-carousel-edit-area {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgb(231, 233, 234);
}

/* Rendering state shares the look of the single-image slot. */
.pv-x-grid-slot.pv-img-slot--rendering { pointer-events: none; }
.pv-x-grid-slot.pv-img-slot--rendering::after {
  content: 'Rendering…';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  z-index: 2;
}

/* Click-to-edit affordances. Display state: subtle cursor change.
   Hover state: light platform-tinted background to hint editability. */
.pv-editable { cursor: text; transition: background-color 120ms ease; }
.pv-li-body.pv-editable:hover     { background: rgba(10, 102, 194, 0.05); }
.pv-x-body.pv-editable:hover      { background: rgba(29, 155, 240, 0.06); }
.pv-ig-caption.pv-editable:hover  { background: rgba(0, 55, 107, 0.05); }
.pv-li-body.pv-editing,
.pv-x-body.pv-editing,
.pv-ig-caption.pv-editing { background: transparent; }

/* Edit textarea — fits flush inside the card's existing body padding,
   inherits the card's font + color so the visual transition between
   display and edit is barely perceptible. */
.pv-edit-area {
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  line-height: inherit;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  padding: 6px 8px;
  resize: none;
  outline: none;
  min-height: 64px;
  box-sizing: border-box;
}
.pv-li-body .pv-edit-area:focus { border-color: #0a66c2; box-shadow: 0 0 0 2px rgba(10,102,194,0.15); }
.pv-x .pv-edit-area {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.pv-x .pv-edit-area:focus { border-color: rgb(29,155,240); box-shadow: 0 0 0 2px rgba(29,155,240,0.25); }
.pv-ig-caption .pv-edit-area:focus { border-color: #00376B; box-shadow: 0 0 0 2px rgba(0,55,107,0.18); }

/* Edit-mode footer: subtle "click outside to save" hint on the right and
   a Discard escape hatch on the left. Sits under the card on the workshop
   background; doesn't disturb the platform chrome. */
.pv-edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px;
}
.pv-discard-link {
  font-family: 'Inter Tight', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  transition: color var(--t);
}
.pv-discard-link:hover { color: #ff6b6b; }
.pv-discard-link:disabled { opacity: 0.6; cursor: not-allowed; }
.pv-edit-hint {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-dim, var(--text-muted));
  opacity: 0.75;
}

/* Hashtag / mention / link styling shared across previews — each
   platform overrides the color via its own scope. */
.pv-tag, .pv-mention, .pv-link { font-weight: 600; cursor: pointer; }

/* Realistic feed cards cap their width so the rendered card fits on
   standard laptop viewports without scrolling. The viewport-relative
   ceiling (50vh × 4/5 ≈ 0.4 × 100vh) keeps a 4:5 portrait image area
   at roughly half-viewport tall, which is the dominant size driver
   for both LinkedIn and Instagram cards. */
.pv-li, .pv-ig {
  max-width: min(380px, 34vh);
  margin-left: auto;
  margin-right: auto;
}
/* X has its own wider panel — larger than LinkedIn/Instagram but not full-width. */
.pv-x {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.pv-x, .pv-li, .pv-ig { width: 100%; }

/* =============================================================
   Strip the workshop "panel" chrome on platform sections — the
   realistic feed card IS the canvas; nesting it inside another
   bordered/colored box is redundant. Applies only inside the
   Workshop's Platform-posts row, leaving Building-blocks panels
   (Hooks / Headlines / Video / etc.) untouched.
   ============================================================= */
/* Platform panels sit side-by-side with horizontal scroll */
#tab-workshop .ws-platform-grid {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 20px;
  padding-top: 4px;
  padding-bottom: 12px;
  /* override the grid layout the .ws-grid base rule would impose */
  grid-template-columns: unset;
}
#tab-workshop .ws-platform-grid > .panel.platform-panel {
  flex: 0 0 600px;
  min-width: 0;
}
#tab-workshop .ws-platform-grid > .panel.platform-panel[data-platform="x"] {
  flex: 0 0 780px;
}

#tab-workshop .ws-grid > .panel.platform-panel {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  /* The .panel base rule sets display:flex with gap:12px between children
     (panel-head and panel-body). For platform panels that 12px stacks on
     top of panel-head's margin-bottom and breaks the symmetry of dashed
     separators — drop it so spacing is purely controlled by margins. */
  gap: 0 !important;
}

/* Center the tab content (action row + card host) at the card's
   intended max-width so the LIVE-PREVIEW label, char counter, and
   Regenerate button align flush above the card instead of stretching
   across the empty panel margins. */
.platform-panel[data-platform="linkedin"] .platform-tab-content,
.platform-panel[data-platform="instagram"] .platform-tab-content {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.platform-panel[data-platform="x"] .platform-tab-content {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

/* The platform header (LINKEDIN / INSTAGRAM / X label + tab buttons)
   aligns with the centered card column. The realistic feed card is
   already unambiguously branded, so the redundant caps platform label
   gets hidden — frees the row for the tab buttons. */
.platform-panel[data-platform="linkedin"] .platform-panel-head,
.platform-panel[data-platform="instagram"] .platform-panel-head {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.platform-panel[data-platform="x"] .platform-panel-head {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Side panel: card + controls in a flex row ─────────────────────────── */
/* has-side-panel lives on .platform-tab-content; :has() hoists it to the
   panel column so the width expands only when that tab is actually visible */
/* Let the panel auto-size to its grid content so everything centers over the
   real card + side panel width (no hardcoded 940px that creates empty space) */
#tab-workshop .ws-platform-grid > .panel.platform-panel:has(.platform-tab-content.has-side-panel:not([hidden])) {
  flex: 0 0 auto;
  width: fit-content;
}
/* Grid: row 1 = action row spanning both cols (centered over combined width)
         row 2 = card (col 1) side-by-side with source panel (col 2)
   col 1 is auto so the column shrinks to the card's actual rendered width,
   eliminating the gap between card edge and side panel. */
.platform-tab-content.has-side-panel:not([hidden]) {
  display: grid !important;
  grid-template-columns: auto 300px;
  grid-template-rows: auto 1fr;
  column-gap: 24px;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Action row spans full grid width and centers over both columns */
.platform-tab-content.has-side-panel:not([hidden]) .pv-action-row {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-content: center;
  margin-bottom: 12px;
}
/* Slide list top margin is for stacked layout — remove when side-by-side */
.platform-tab-content.has-side-panel:not([hidden]) .carousel-slide-list {
  margin-top: 0;
}
/* Tools (source panel) pinned to col 1 (LEFT); mockup (card host) pinned
   to col 2 (RIGHT). Swap these two values to flip sides. */
.platform-tab-content.has-side-panel:not([hidden]) .pv-source-panel-host {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  justify-content: flex-start;
}
.platform-tab-content.has-side-panel:not([hidden]) .pv-card-host {
  grid-column: 2;
  grid-row: 2;
  width: fit-content;
}
/* Panel-head (logo + pills) spans full panel width so it centers over both columns */
.platform-panel:has(.platform-tab-content.has-side-panel:not([hidden])) .platform-panel-head {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Re-center the pills row within the now-wider panel-head */
.platform-panel:has(.platform-tab-content.has-side-panel:not([hidden])) .platform-tabs {
  align-self: center;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Platform-panel title is now an SVG brand mark, not text — strip the
   caps/letter-spacing styling so the badge sits cleanly. Adds a dashed
   underline to mirror the separator already sitting below the pills. */
.platform-panel .platform-panel-title {
  text-transform: none;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0 14px;
  width: 100%;
  border-bottom: 1px dashed var(--border);
}
.platform-mark {
  display: inline-flex;
  align-items: center;
  /* Muted gray so all three brand marks render uniformly — color comes
     through `currentColor` on the SVG fills/strokes. */
  color: var(--text-muted);
}
.platform-mark svg {
  width: 26px; height: 26px; display: block;
}
/* Stack the platform header: title row on top (brand mark), tab
   buttons below, both center-aligned above the card. The padding-bottom
   and margin-bottom override matches the title's padding-bottom + the
   stack gap above the pills, so the dashed lines + spacing are
   symmetric on both sides of the tab pills. */
.platform-panel .platform-panel-head {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
  padding-bottom: 14px;
  margin-bottom: 14px;
}
/* Clamp post body / caption in display mode to mimic real platform
   "...see more" / "...more" truncation. Keeps cards compact and roughly
   height-matched. When the user clicks to edit, the textarea takes
   over and isn't clamped. */
.pv-li-body.pv-editable {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pv-ig-caption.pv-editable {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pv-li-body.pv-editing,
.pv-ig-caption.pv-editing,
.pv-li-body.pv-expanded,
.pv-ig-caption.pv-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Platform-native "...see more" / "...more" expand link. Sits as a
   sibling immediately after the clamped body/caption so it isn't
   clipped by the line-clamp. Auto-hidden when the text doesn't
   actually overflow the clamp. */
.pv-see-more {
  display: block;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0;
}
.pv-see-more[hidden] { display: none; }
.pv-see-more:hover { text-decoration: underline; }
/* Hide the see-more link while the body/caption is in edit mode — the
   textarea already shows the full text, so the link is redundant. The
   body's repaint after save rebuilds a fresh see-more in display mode. */
.pv-li-body.pv-editing + .pv-see-more,
.pv-ig-caption.pv-editing + .pv-see-more { display: none; }
/* LinkedIn — muted secondary text color, body padding */
.pv-see-more--li {
  padding: 4px 16px 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
}
/* Instagram — same muted-grey as the comments / time chrome */
.pv-see-more--ig {
  padding: 0 14px 4px;
  font-size: 14px;
  color: #8e8e8e;
  font-weight: 400;
}

/* =============================================================
   LINKEDIN  ·  light theme, blue accent #0A66C2
   ============================================================= */
.pv-li {
  font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #fff;
  color: rgba(0,0,0,0.9);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.04);
}
.pv-li-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 0; }
.pv-li-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  /* Surface comes from the brand's Settings "Background color" (--pv-avatar-bg),
     set per-build; falls back to a neutral dark so the mark still reads when a
     brand has no color set. --pv-avatar-fg keeps the monogram legible on it. */
  background: var(--pv-avatar-bg, #1a1a1a); color: var(--pv-avatar-fg, #f5f5f5);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
}
.pv-li-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-li-id { flex: 1; min-width: 0; }
.pv-li-name {
  font-weight: 600; color: rgba(0,0,0,0.9);
  font-size: 14px; line-height: 1.25;
  display: flex; align-items: center; gap: 4px;
}
.pv-li-name::after {
  content: "• 1st";
  font-weight: 400;
  color: rgba(0,0,0,0.6);
  font-size: 12px;
  margin-left: 2px;
}

/* Verified badge — same scalloped-check SVG across all three platforms,
   tinted per platform's accent for consistency with their real designs.
   X already has its own .pv-x-verified mark inline; LinkedIn and IG
   use this shared .pv-verified rendered by VERIFIED_BADGE_SVG. */
.pv-verified {
  width: 14px; height: 14px;
  flex-shrink: 0;
  display: inline-block;
}
.pv-li-name .pv-verified { color: #0a66c2; }   /* LinkedIn blue */
.pv-ig-name .pv-verified { color: #0095F6; margin-left: 4px; vertical-align: middle; }   /* IG blue */
.pv-li-sub {
  color: rgba(0,0,0,0.6);
  font-size: 12px; line-height: 1.33;
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-li-time {
  color: rgba(0,0,0,0.6);
  font-size: 12px; line-height: 1.33;
  margin-top: 1px;
  display: flex; align-items: center; gap: 4px;
}
.pv-li-time::after {
  content: "🌐";
  font-size: 11px;
  opacity: 0.6;
}
.pv-li-more {
  color: rgba(0,0,0,0.6); cursor: pointer;
  font-weight: 700; font-size: 18px; line-height: 1;
  padding: 4px; align-self: flex-start; margin-top: -4px;
}
.pv-li-body {
  padding: 12px 16px 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: rgba(0,0,0,0.9);
  font-size: 14px;
  line-height: 1.5;
}
.pv-li-body .pv-tag,
.pv-li-body .pv-mention,
.pv-li-body .pv-link { color: #0a66c2; font-weight: 600; }
.pv-li-image {
  margin-top: 12px;
  background: #f3f2ef;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1.91 / 1; /* default to LinkedIn's typical link/image aspect */
}
.pv-li-image[data-aspect="4:5"]    { aspect-ratio: 4 / 5; }
.pv-li-image[data-aspect="1:1"]    { aspect-ratio: 1 / 1; }
.pv-li-image[data-aspect="16:9"]   { aspect-ratio: 16 / 9; }
.pv-li-image[data-aspect="1.91:1"] { aspect-ratio: 1.91 / 1; }
.pv-li-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-li-reactions {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  font-size: 12px; color: rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.pv-li-reactions-stack {
  display: inline-flex; align-items: center;
}
.pv-li-reactions-stack .pv-li-react {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1;
  border: 1.5px solid #fff;
  margin-left: -3px;
}
.pv-li-reactions-stack .pv-li-react:first-child { margin-left: 0; }
.pv-li-reactions-stack .pv-li-react svg { width: 10px; height: 10px; display: block; }
.pv-li-reactions-stack .pv-li-react.like { background: #378fe9; color: #fff; }
.pv-li-reactions-stack .pv-li-react.love { background: #df704d; color: #fff; }
.pv-li-reactions-stack .pv-li-react.insightful { background: #f5bb5c; color: #fff; }
.pv-li-actions {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 4px 8px;
}
.pv-li-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 4px;
  font-size: 13px; font-weight: 600;
  color: rgba(0,0,0,0.6);
  cursor: pointer;
  border-radius: 4px;
}
.pv-li-action:hover { background: rgba(0,0,0,0.08); }
.pv-li-action svg { width: 18px; height: 18px; flex-shrink: 0; }

/* =============================================================
   X (Twitter)  ·  dark theme, blue accent #1D9BF0
   ============================================================= */
.pv-x {
  font-family: 'TwitterChirp', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #000;
  color: rgb(231, 233, 234);
  border: 1px solid rgb(47, 51, 54);
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.4;
}
.pv-x-row { display: flex; gap: 12px; }
.pv-x-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--pv-avatar-bg, rgb(22, 24, 28)); color: var(--pv-avatar-fg, rgb(29, 155, 240));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; flex-shrink: 0;
  overflow: hidden;
}
.pv-x-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-x-main { flex: 1; min-width: 0; padding-right: 12px; }
.pv-x-head { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pv-x-name {
  font-weight: 700; color: rgb(231, 233, 234);
  font-size: 15px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 60%;
}
.pv-x-verified {
  display: inline-flex; align-items: center;
  color: rgb(29, 155, 240);
}
.pv-x-verified svg { width: 16px; height: 16px; }
.pv-x-handle, .pv-x-time, .pv-x-dot {
  color: rgb(113, 118, 123);
  font-size: 15px; line-height: 1.3;
}
.pv-x-more {
  margin-left: auto;
  color: rgb(113, 118, 123); cursor: pointer;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pv-x-body {
  margin-top: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: rgb(231, 233, 234);
  font-size: 15px;
  line-height: 1.4;
}
.pv-x-body .pv-tag,
.pv-x-body .pv-mention,
.pv-x-body .pv-link { color: rgb(29, 155, 240); font-weight: 400; }
.pv-x-image {
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgb(47, 51, 54);
  background: rgb(22, 24, 28);
  aspect-ratio: 16 / 9; /* X image-tweet default */
}
.pv-x-image[data-aspect="4:5"]    { aspect-ratio: 4 / 5; }
.pv-x-image[data-aspect="1:1"]    { aspect-ratio: 1 / 1; }
.pv-x-image[data-aspect="16:9"]   { aspect-ratio: 16 / 9; }
.pv-x-image[data-aspect="1.91:1"] { aspect-ratio: 1.91 / 1; }
.pv-x-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-x-actions {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: 12px;
}
.pv-x-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: rgb(113, 118, 123);
  cursor: pointer;
}
.pv-x-action svg { width: 18px; height: 18px; flex-shrink: 0; }
.pv-x-action:hover { color: rgb(29, 155, 240); }
.pv-x-action.last { justify-self: end; }

/* =============================================================
   INSTAGRAM  ·  dark theme (matches IG's native dark mode)
   surface #000  ·  border #262626  ·  text #f5f5f5
   secondary text #a8a8a8  ·  link #e0f1ff
   ============================================================= */
.pv-ig {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #000;
  color: #f5f5f5;
  border: 1px solid #262626;
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.4;
}
.pv-ig-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #262626;
}
.pv-ig-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  /* Brand-driven surface (--pv-avatar-bg) — matches the LI / X avatars. */
  background: var(--pv-avatar-bg, #1a1a1a);
  padding: 0; flex-shrink: 0;
}
.pv-ig-avatar-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--pv-avatar-bg, #1a1a1a);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--pv-avatar-fg, #f5f5f5); font-weight: 700; font-size: 13px;
}
.pv-ig-avatar-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-ig-id { flex: 1; min-width: 0; line-height: 1.2; }
.pv-ig-name {
  font-weight: 600;
  font-size: 14px; color: #f5f5f5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-ig-sub {
  font-size: 12px; color: #a8a8a8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-ig-more {
  color: #f5f5f5; cursor: pointer;
  font-weight: 700; font-size: 16px; line-height: 1;
  padding: 4px;
}
.pv-ig-image {
  background: #1a1a1a;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  color: #6b6b6b; font-size: 12px;
  position: relative;
  overflow: hidden;
}
.pv-ig-image[data-aspect="4:5"] { aspect-ratio: 4 / 5; }
.pv-ig-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-ig-actions {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px 4px;
}
.pv-ig-action { color: #f5f5f5; cursor: pointer; }
.pv-ig-action svg { width: 24px; height: 24px; display: block; stroke: #f5f5f5; }
.pv-ig-action.save { margin-left: auto; }
.pv-ig-likes {
  padding: 4px 14px;
  font-weight: 600; font-size: 14px; color: #f5f5f5;
}
.pv-ig-caption {
  padding: 0 14px;
  font-size: 14px; color: #f5f5f5;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.45;
}
.pv-ig-caption .pv-ig-handle {
  font-weight: 600;
  margin-right: 4px;
}
.pv-ig-caption .pv-tag,
.pv-ig-caption .pv-mention,
.pv-ig-caption .pv-link { color: #e0f1ff; font-weight: 400; }
.pv-ig-comments {
  padding: 6px 14px 0;
  font-size: 14px; color: #a8a8a8;
  cursor: pointer;
}
.pv-ig-time {
  padding: 6px 14px 12px;
  font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a8a8a8;
}

/* Image headline text field — sits above the card, persists across regenerations */
.pv-card-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.pv-card-text-label {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.45));
}
.pv-card-text-field {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter Tight', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary, #fff);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 10px;
  resize: none;
  outline: none;
  transition: border-color 120ms;
  min-height: 40px;
}
.pv-card-text-field:focus {
  border-color: var(--accent, rgba(255,255,255,0.35));
}
.pv-card-text-field::placeholder {
  color: rgba(255,255,255,0.25);
}

/* Lightbox — full-screen image expand */
.pv-lightbox {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
  animation: pv-lb-in 120ms ease;
}
@keyframes pv-lb-in {
  from { opacity: 0; } to { opacity: 1; }
}
.pv-lightbox img {
  max-width: 90vw; max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.pv-lightbox-close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 32px; line-height: 1;
  cursor: pointer; padding: 4px 8px;
  transition: color 100ms;
}
.pv-lightbox-close:hover { color: #fff; }

/* All panels dimmed at rest; hovered one snaps to full, siblings drop to 20% */
#tab-workshop .ws-platform-grid > .panel.platform-panel {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
#tab-workshop .ws-platform-grid:has(.platform-panel:hover) > .panel.platform-panel {
  opacity: 0.2;
}
#tab-workshop .ws-platform-grid:has(.platform-panel:hover) > .panel.platform-panel:hover {
  opacity: 1;
}

/* Building blocks cards — same hover fade */
#tab-workshop .ws-grid:not(.ws-platform-grid) > .panel {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
#tab-workshop .ws-grid:not(.ws-platform-grid):has(> .panel:hover) > .panel {
  opacity: 0.2;
}
#tab-workshop .ws-grid:not(.ws-platform-grid):has(> .panel:hover) > .panel:hover {
  opacity: 1;
}

/* Platform panel rounded containers — must come after the strip rule (.ws-grid) above */
#tab-workshop .ws-platform-grid > .panel.platform-panel {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 20px 24px 28px !important;
  gap: 0 !important;
}
#tab-workshop .ws-platform-grid > .panel.platform-panel:hover {
  border-color: rgba(255,255,255,0.12) !important;
}
/* Wider side padding when carousel tab is active */
#tab-workshop .ws-platform-grid > .panel.platform-panel:has(.platform-tab-content[data-tab="carousel"]:not([hidden])) {
  padding-left: 75px !important;
  padding-right: 75px !important;
}

/* "Edit caption" button below preview cards */

/* ===========================================================================
   THEME-FOLLOW OVERRIDES — make the social mockups track the app's light/dark.
   The three mockups above are each hardcoded to one look (LinkedIn light, X + IG
   dark). These rules sit LAST so they win on equal specificity, re-driving the card
   chrome — surface, text, borders, dividers, empty image placeholders — from the
   app's theme variables. Platform-brand accents (verified/link blues, reaction
   colours) and the on-image overlay controls are deliberately left untouched.
   =========================================================================== */
/* Card surface + base text + outer border */
.pv-li, .pv-x, .pv-ig {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border);
}
/* Primary text */
.pv-li-name, .pv-li-body,
.pv-x-name, .pv-x-body,
.pv-ig-name, .pv-ig-more, .pv-ig-action, .pv-ig-likes, .pv-ig-caption {
  color: var(--text);
}
.pv-ig-action svg { stroke: var(--text); }
/* Secondary / muted text */
.pv-li-name::after, .pv-li-sub, .pv-li-time, .pv-li-more, .pv-li-reactions, .pv-li-action,
.pv-x-handle, .pv-x-time, .pv-x-dot, .pv-x-more, .pv-x-action,
.pv-ig-sub, .pv-ig-comments {
  color: var(--text-muted);
}
/* Dividers / inner borders */
.pv-li-avatar { border-color: var(--border); }
.pv-li-reactions { border-bottom-color: var(--border); }
.pv-ig-head { border-bottom-color: var(--border); }
.pv-x-image { border-color: var(--border); }
/* Reaction-stack ring should match the card surface */
.pv-li-reactions-stack .pv-li-react { border-color: var(--bg-elev); }
/* Empty image placeholders + their labels */
.pv-li-image, .pv-x-image, .pv-ig-image { background: var(--bg); }
.pv-ig-image { color: var(--text-dim); }
.pv-li-image .pv-img-slot, .pv-x-image .pv-img-slot, .pv-ig-image .pv-img-slot,
.pv-li-image .pv-carousel-slot, .pv-ig-image .pv-carousel-slot { background: var(--bg); }
.pv-li-image .pv-img-slot--empty .pv-img-slot-empty-label,
.pv-x-image .pv-img-slot--empty .pv-img-slot-empty-label,
.pv-ig-image .pv-img-slot--empty .pv-img-slot-empty-label { color: var(--text-dim); }
/* Subtle action hover that reads on both themes */
.pv-li-action:hover { background: var(--border); background: color-mix(in srgb, var(--text) 8%, transparent); }
/* IG caption links → a blue legible on both themes (was a dark-mode-only pale blue) */
.pv-ig-caption .pv-tag, .pv-ig-caption .pv-mention, .pv-ig-caption .pv-link { color: #0095F6; }

/* ===========================================================================
   PLATFORM LOGO STRIP — a slim brand header atop each mockup so it reads at a
   glance as LinkedIn / X / Instagram. Logo only (no nav chrome), theme-aware.
   =========================================================================== */
.pv-platform-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.pv-ph-logo { height: 20px; width: auto; display: block; flex-shrink: 0; }
.pv-ph-wordmark {
  font-family: 'Grand Hotel', cursive;
  font-size: 22px; line-height: 1;
}
/* X's card root is padded (unlike LI/IG), so bleed the strip to the card edges and
   round its top corners to match the 16px card radius. */
.pv-ph--x {
  margin: -12px -16px 12px;
  padding: 8px 16px;
  border-radius: 16px 16px 0 0;
}
.pv-ph--x .pv-ph-logo { height: 18px; }