/*
 * The screenshot, framed as a window, with a wireframe standing in for the
 * image until the capture lands.
 *
 * 16:10, the shape of a maximized editor on the machines the capture comes
 * from. It runs the full width of the column and is lifted off the page,
 * because it is the evidence for the headline and everything else on this
 * band is text.
 *
 * Everything from .cshot-panes down is placeholder and goes with the real
 * image. The frame, the title bar and the caption stay.
 */

.cshot {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-soft);
  /* Two shadows: a tight one that seats the frame on the page, a wide soft
     one that lifts it. A single shadow at this size reads as a sticker. */
  box-shadow:
    0 1px 2px rgba(16, 44, 66, 0.08),
    0 40px 80px -40px rgba(16, 44, 66, 0.30);
}

.cshot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: var(--bg-muted);
  border-bottom: 1px solid var(--rule);
}

.cshot-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule-strong);
}

/* ─── Placeholder ─────────────────────────────────────────────────────
   The three regions the capture will hold, at the sizes they will hold
   them, so the composition being judged is the real one. */

.cshot-panes {
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-columns: 34fr 66fr;
  gap: 1px;
  background: var(--rule);
}

.cshot-right {
  display: grid;
  grid-template-rows: 44fr 56fr;
  gap: 1px;
  background: var(--rule);
  min-height: 0;
}

.cshot-pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: var(--space-6);
  min-height: 0;
  overflow: hidden;
}

.cshot-chat { background: var(--bg); justify-content: space-between; padding: 0; }

/* The turns, scrolled: the conversation runs off the top of the pane the way
   a session in progress does. */
.cshot-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-5) var(--space-5) 0;
  min-height: 0;
  overflow: hidden;
}

.cshot-gap { height: 6px; flex: 0 0 auto; }

.cshot-composer {
  flex: 0 0 auto;
  height: 46px;
  margin: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg-soft);
}
.cshot-term { background: #0D1B28; justify-content: flex-start; }
.cshot-app  { background: var(--bg-soft); justify-content: flex-end; padding-top: 0; }

.cshot-url {
  flex: 0 0 auto;
  height: 22px;
  width: 46%;
  margin: var(--space-4) 0 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.cshot-spacer { flex: 1 1 auto; min-height: 0; }

/* The stand-in marks. Deliberately flat bars rather than lorem text: the
   point is the shape of the regions, and fake words invite reading. */
.cshot-line {
  height: 7px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  flex: 0 0 auto;
}

.cshot-chat .cshot-line.is-agent { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.cshot-term .cshot-line { height: 6px; background: rgba(255, 255, 255, 0.14); }
.cshot-term .cshot-line.is-ok { background: rgba(95, 208, 160, 0.55); }

.cshot-bubble {
  height: 22px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  flex: 0 0 auto;
}

.cshot-app .cshot-bubble.is-me {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  align-self: flex-end;
}

.w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; }
.w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; }
.w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; }
.w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; }

/* Says which variant's capture this is. Sits inside the frame on a tinted
   strip so it reads as a note about the picture rather than as a caption
   the finished page will carry. It goes with the placeholder. */
.cshot-caption {
  margin: 0;
  padding: 10px var(--space-5);
  border-top: 1px solid var(--rule);
  background: var(--bg-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-dim);
}

@media (max-width: 700px) {
  .cshot-bar { padding: 9px 11px; }
  .cshot-dot { width: 8px; height: 8px; }
  .cshot-pane { padding: var(--space-3); gap: 6px; }
  .cshot-line { height: 5px; }
  .cshot-bubble { height: 14px; border-radius: 7px; }
}

/* The real capture. Same box the wireframe occupied, so swapping one for
   the other changes nothing about the page's rhythm. */
.cshot-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}

/* A real capture is already a picture of a window: it has its own title bar
   and its own traffic lights. Our frame is furniture for the wireframe, and
   around a real screenshot it read as a second window drawn around the
   first. So with an image the frame gets out of the way and only the lift
   stays. */
.cshot.has-img {
  border: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.cshot.has-img .cshot-img {
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(16, 44, 66, 0.10),
    0 40px 80px -40px rgba(16, 44, 66, 0.35);
}