/* =====================================================================
   AGENTS LENS STUDIO -- Instagram preview frame.
   The DOM chrome InstagramFrame.jsx draws around the live canvas, and the
   switch that turns it on and off. Every class here is prefixed ig-.

   Sized in cqw (percent of the frame's own inline width) rather than in
   fixed pixels, because the frame renders anywhere from about 230px wide
   on a short phone to well past that on a desktop stage, and a fixed size
   would read as oversized chrome at one end and a toy at the other. The
   ratios themselves are measured off a real Instagram dark-mode post
   screenshot, not invented; see the long comment at the top of
   InstagramFrame.jsx for how that measurement was taken.
   ===================================================================== */

:root {
  --ig-bg: #0A1015;
  --ig-ink: #F5F6F7;
  --ig-ink-2: rgba(245, 246, 247, 0.55);
  --ig-line-strong: rgba(255, 255, 255, 0.34);
  --ig-blue: #4E7FFF;
  --ig-pad: 2.6cqw;
}

/* ------------------------------------------------------------------ frame */

.ig-frame {
  container-type: inline-size;
  width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  /* Mirrors .ed-canvas's own cap in editor.css (that file is owned elsewhere and is
     not edited here) so the card sits at the same width whether the frame is on or
     off and never jumps sideways when the toggle is pressed. The frame is taller
     than the bare canvas once the header and footer are added, so this is an
     approximation of that rule rather than a copy with the same guarantee; if the
     extra chrome ever crowds a short screen, the fix belongs in editor.css, where
     the real constant lives. */
  max-width: min(100%, calc((100dvh - 190px) * 0.8));
}

@media (max-width: 900px) {
  .ig-frame { max-width: min(100%, 360px); }
}

@media (max-width: 900px) and (max-height: 700px) {
  .ig-frame { max-width: min(100%, 240px); }
}

/* The card slot. children lands here exactly as it arrived: no transform, no clone,
   no read. line-height: 0 is the same fix .thumb and .lp-thumb use elsewhere in this
   portal for the sliver of baseline gap a block-level image or canvas otherwise
   leaves under itself. */
.ig-card {
  display: block;
  width: 100%;
  line-height: 0;
  background: #ffffff;
}

/* The canvas already carries its own rounded corners and drop shadow for the case
   where it stands alone (see .ed-canvas in editor.css). Sandwiched between this
   frame's header and footer, both of those become a seam rather than a finish: a
   shadow a card would not cast on the chrome directly above it, and two corners
   rounded against a straight edge. Reset only inside this slot, scoped to when the
   canvas is actually inside the frame, so the plain toggled-off canvas elsewhere is
   untouched. This changes paint only, nothing the export path reads. */
.ig-card .ed-canvas {
  border-radius: 0;
  box-shadow: none;
}

/* -------------------------------------------------------------------- head */

.ig-head {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 2.6cqw var(--ig-pad);
  background: var(--ig-bg);
}

.ig-avatar {
  flex-shrink: 0;
  width: 7cqw;
  height: 7cqw;
  min-width: 26px;
  min-height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: #262b33;
}
.ig-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ig-avatar-fallback {
  color: var(--ig-ink);
  font-weight: 700;
  font-size: 2.8cqw;
}

.ig-who {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ig-username {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  min-width: 0;
  max-width: 100%;
}
.ig-username-text {
  color: var(--ig-ink);
  font-size: 3.3cqw;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ig-tick { flex-shrink: 0; width: 2.6cqw; height: 2.6cqw; min-width: 12px; min-height: 12px; }

.ig-follow {
  flex-shrink: 0;
  padding: 1.6cqw 3cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--ig-ink);
  font-size: 2.5cqw;
  font-weight: 600;
  white-space: nowrap;
}

.ig-menu {
  flex-shrink: 0;
  width: 4.4cqw;
  height: 4.4cqw;
  min-width: 18px;
  min-height: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ig-ink-2);
}
.ig-menu svg { width: 100%; height: 100%; }

/* -------------------------------------------------------------------- foot */

.ig-foot {
  background: var(--ig-bg);
  padding: 2.9cqw var(--ig-pad) 3.7cqw;
}

.ig-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9cqw;
  margin-bottom: 3cqw;
}
.ig-dot {
  width: 1.1cqw; height: 1.1cqw;
  min-width: 4px; min-height: 4px;
  border-radius: 50%;
  background: var(--ig-line-strong);
}
.ig-dot.is-on {
  width: 1.5cqw; height: 1.5cqw;
  min-width: 6px; min-height: 6px;
  background: var(--ig-blue);
}

.ig-actions {
  display: flex;
  align-items: center;
  gap: 3.2cqw;
  color: var(--ig-ink);
}
.ig-actions svg {
  width: 4.6cqw; height: 4.6cqw;
  min-width: 18px; min-height: 18px;
  display: block;
}
/* Pushed to the far edge, matching the reference: the save mark is the one action
   that is not part of the like / comment / repost / send run, and Instagram sets it
   off from the rest the same way. */
.ig-save { margin-left: auto; }

.ig-caption {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-top: 3.5cqw;
  color: var(--ig-ink);
  font-size: 2.7cqw;
  line-height: 1.4;
}
/* One line, truncated with a real ellipsis, the way Instagram's own caption line
   behaves before you tap it open. flex + min-width: 0 is what lets overflow:hidden
   bite on a flex child; without it the line refuses to shrink below its text's own
   natural width and the ellipsis never has anything to do. */
.ig-cap-line {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ig-cap-user { font-weight: 700; margin-right: 0.4em; }
.ig-cap-more { flex-shrink: 0; color: var(--ig-ink-2); }

.ig-date {
  margin-top: 2.3cqw;
  color: var(--ig-ink-2);
  font-size: 1.9cqw;
}

/* ------------------------------------------------------------------ switch */

/* Normal flow, not a float. A corner overlay was the first attempt, anchored to
   .ed-stage with position: absolute, and it looked fine until a longer handle or a
   shorter caption line pushed real content (the "more" cue, a save mark) up
   underneath it. A control that sometimes hides part of the very thing it is
   letting you judge is worse than the collision it was trying to avoid. Centred
   below the card in the stage's own flow, it never sits on top of anything.

   .ed-stage lays its child out with justify-content: center on a flex row by
   default; a second child would sit beside the card instead of under it, which on
   a 375px phone leaves no room for either. flex-direction: column here fixes that
   for the case that matters (the card plus this switch) without touching the case
   .ed-stage already owns: .is-adjusting sets its own column layout for the cropper
   and is left alone, and the older single-child state (no switch, no frame) looks
   identical in a row or a column, so nothing that worked before this file existed
   can have changed. This is the one rule here that reaches outside the ig- prefix. */
.ed-stage:not(.is-adjusting) { flex-direction: column; gap: 14px; }

.ig-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  /* Enough side padding to keep "Instagram preview" off the pill's own rounded
     ends: at 999px radius the corners eat into the text before the border does. */
  padding: 6px 16px;
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ig-ink);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.ig-switch-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* The word this control was missing. A camera glyph and a bare switch read as
   decoration until pressed; this names the feature so looking is enough. Fixed px
   rather than cqw, same as the rest of the switch: it answers to the viewport, not
   to the card's own width. white-space: nowrap keeps it one line at the 240px
   floor, where the switch already sizes down with everything else on the page
   rather than the label wrapping under the icon. */
.ig-switch-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ig-switch-track {
  position: relative;
  flex-shrink: 0;
  width: 28px; height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  transition: background 0.16s ease;
}
.ig-switch.is-on .ig-switch-track { background: var(--ig-blue); }

.ig-switch-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.16s ease;
}
.ig-switch.is-on .ig-switch-knob { transform: translateX(12px); }

/* ------------------------------------------------------------- pointers */

/* Guarded the same way every hover rule in this portal is guarded (see the foot of
   editor.css and base.css): a touchscreen fakes hover by latching it on tap, which
   would leave this switch lit after the finger has already lifted. */
@media (hover: hover) and (pointer: fine) {
  .ig-switch:hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(8, 8, 8, 0.78); }
}
.ig-switch:active { transform: scale(0.96); }