/* ==================================================================
   COM-497 · The chat's Images tab, its pointer card in the chat, and the
   filmstrip zoom. Visual contract: .claude/prototypes/com-497-images-in-work-area.html
   (section 1). Prints reuse the Gallery's .gallery-photo from styles.css.
   ================================================================== */

/* The artifact pane hands itself to the sheet. The monitor carries an inline
   display, so images-tab.js hides that one itself. */
.artifact-page.images-active > .pane-header,
.artifact-page.images-active > .version-banner,
.artifact-page.images-active > .inline-edit-toolbar,
.artifact-page.images-active > .output-content,
.artifact-page.images-active > .output-status { display: none; }

.image-sheet {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; position: relative;
}
.image-sheet[hidden] { display: none; }

/* The tab's bar: prod's pane header, count on the left, the chat's image
   actions on the right. It stays put while the sets scroll under it. */
/* 38px sides clear the page's 28px folded corner, which sits top left or top
   right depending on which side the document is parked. */
.image-sheet-head {
  height: 44px; flex-shrink: 0; padding: 0 38px;
  border-bottom: 1px solid rgba(180, 170, 150, 0.1);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.image-sheet-count { font-variant-numeric: tabular-nums; }
.image-sheet-actions { display: flex; align-items: center; gap: 8px; }
.image-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 26px; }
.image-sheet > .image-sheet-state { padding: 22px 26px; }

/* More below: a dark ink chip resting on the bottom of the sheet while there's
   another set to see. It lifts on hover like every other button here. */
.sheet-more {
  position: absolute; left: 50%; bottom: 18px; z-index: 3;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 12px var(--sans); color: var(--surface);
  background: var(--text); border: 1px solid var(--text);
  border-radius: 999px; padding: 6px 12px 6px 14px; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring), color 0.15s;
}
.sheet-more[hidden] { display: none; }
.sheet-more:hover { transform: translate(-50%, -2px); box-shadow: var(--shadow-lg); }
.sheet-more:active { transform: translateX(-50%) scale(0.97); }
.sheet-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet-more svg { width: 13px; height: 13px; }

.sheet-note {
  margin-top: 18px; max-width: 960px;
  font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
}
.sheet-note[hidden] { display: none; }

/* One set: a quiet label, then a row of up to three prints that share the
   pane's width, capped so a wide pane doesn't blow them up. */
.sheet-round + .sheet-round { margin-top: 26px; }
/* A set the More below chip jumps to lands where the first one sits. */
.sheet-round { scroll-margin-top: 22px; }
.sheet-round-label {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: 960px; margin: 0 0 12px; padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.sheet-round-label b { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--text); }
.sheet-round-label > span { font-size: 12px; color: var(--text-muted); }
.sheet-round:first-child .sheet-round-label > span { color: var(--accent); }

.sheet-grid {
  display: grid; gap: 22px 16px; align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 960px;
}
.sheet-grid .gallery-photo { position: relative; padding-bottom: 0; cursor: default; }
/* The Gallery's print is always 4:5. An image here is the shape it was made
   in: feed 4:5, story 9:16, square 1:1. */
.sheet-grid .gallery-photo-frame { aspect-ratio: var(--ad-ratio, 1 / 1); }
.sheet-grid .gallery-photo-frame[data-act="zoom"],
.sheet-grid .gallery-photo-frame[data-act="zoom"] * { cursor: pointer; }
.sheet-grid .gallery-photo-frame.is-free-ratio img { object-fit: contain; }
/* Space below as margin, not padding: a clamped caption shows its third line through bottom padding. */
.sheet-grid .gallery-photo .gallery-photo-caption { padding: 8px 2px 0; margin-bottom: 0; font-size: 12.5px; color: var(--text-dim); }
/* Save is written on the print's bottom edge, not a button laid on top of it:
   no border, no fill, no shadow. The tape across the top already says a print
   is yours, so Saved only confirms it. */
/* A hairline across the whole print, past its 8px inset, sets Save apart
   from the caption above. */
.sheet-add {
  margin: 8px -8px 0; padding: 4px 8px 6px;
  border-top: 1px solid rgba(180, 170, 150, 0.18);
  /* A tinted strip along the print's foot, so Save reads as the thing to do
     there. It warms to the accent once the print is saved. */
  background: var(--bg);
  border-radius: 0 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px);
}
.sheet-print.is-added .sheet-add { background: var(--accent-dim); border-top-color: rgba(139, 111, 71, 0.16); }
/* The whole row is the button: the words on the left, lined up with the
   caption, and the + (or the tick once saved) on the right. */
.sheet-add .sheet-btn {
  width: 100%; justify-content: space-between;
  background: none; border: none; box-shadow: none;
  font-weight: 500; color: var(--text-muted); padding: 4px 2px;
}
.sheet-add .sheet-btn > svg, .sheet-add .sheet-btn .add-icon { order: 2; }
.sheet-add .sheet-btn:hover { transform: translateY(-1px); box-shadow: none; color: var(--text); }
.sheet-add .sheet-btn.is-on { background: none; border: none; color: var(--accent); }
.sheet-add .sheet-btn.is-on:hover { color: var(--accent); }
.sheet-print-foot { height: 8px; }

/* A saved print is taped down: the physical sign that it's yours now. */
.sheet-print .tape-strip { display: none; }
.sheet-print.is-added .tape-strip { display: block; }

/* A frame still being made. Same shimmer language as the chat rail's
   skeleton, on paper stock. */
.sheet-pending {
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%; height: 100%; padding-bottom: 12%;
  background: linear-gradient(100deg, var(--surface3) 30%, var(--surface2) 50%, var(--surface3) 70%);
  background-size: 300% 100%;
  animation: sheetShimmer 1.6s linear infinite;
}
.sheet-pending span { font-family: var(--hand); font-size: 14px; color: var(--text-muted); }
@keyframes sheetShimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* A frame that didn't come out. Quiet, not an error box. The agent offers the
   retry in the chat. */
.sheet-failed {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 14px; text-align: center;
  background: repeating-linear-gradient(135deg, var(--surface2) 0 8px, var(--surface3) 8px 9px);
  color: var(--text-muted); font-size: 12.5px; line-height: 1.4;
}

.image-sheet-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  max-width: 480px; font-size: 13px; color: var(--text-dim); line-height: 1.5;
}
.image-sheet-state .sheet-state-shimmer { height: 120px; border-radius: 8px; padding-bottom: 20px; }

.sheet-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 12px var(--sans); color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring), color 0.15s;
}
.sheet-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--accent); }
.sheet-btn:active { transform: scale(0.97); }
.sheet-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.sheet-btn svg { width: 13px; height: 13px; }
.sheet-btn.is-on { color: var(--accent); border-color: rgba(139, 111, 71, 0.35); background: var(--accent-dim); }

/* Saved reads "Saved to gallery"; on hover it says what a click does. */
.sheet-btn .add-off, .gallery-lb-action .add-off { display: none; }
.sheet-btn.is-on:hover .add-on, .gallery-lb-action.is-on:hover .add-on { display: none; }
.sheet-btn.is-on:hover .add-off, .gallery-lb-action.is-on:hover .add-off { display: inline; }
/* The icon swaps with the words: a tick while saved, a minus for Take it out. */
.sheet-btn .add-icon, .gallery-lb-action .add-icon { display: inline-flex; }
.sheet-btn .add-icon.add-off, .gallery-lb-action .add-icon.add-off { display: none; }
.sheet-btn.is-on:hover .add-icon.add-off, .gallery-lb-action.is-on:hover .add-icon.add-off { display: inline-flex; }
.gallery-lb-action.is-on { color: var(--accent); }

/* Another angle: the next move once a branded set lands. Filled accent so it
   reads as the thing to do; hover is a lift, never a colour change. */
.angle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 12.5px var(--sans); color: #fff;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border: 0; border-radius: 999px; padding: 6px 13px 6px 10px; cursor: pointer;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}
.angle-btn svg { width: 14px; height: 14px; stroke-width: 2.4; }
.angle-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.angle-btn:active { transform: scale(0.97); }
.angle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.angle-btn *, .sheet-btn *, .sheet-more * { cursor: pointer; }
/* While the agent is finding angles the button says so and waits. */
.angle-btn:disabled { opacity: 0.72; cursor: default; transform: none; box-shadow: var(--shadow-sm); }
.angle-btn:disabled * { cursor: default; }

/* ---- Another angle: three index cards above the newest set ----
   Visual contract: .claude/prototypes/com-497-another-angle.html. Same width
   cap and label rule as a set, so the deck reads as the next thing in line. */
.angle-deck { max-width: 960px; margin: 0 0 30px; }
.angle-deck-label {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.angle-deck-label b { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--text); }
.angle-deck-label > span { font-size: 12px; color: var(--accent); }
.angle-deck-dismiss {
  margin-left: auto; font: 500 12px var(--sans); color: var(--text-muted);
  background: none; border: 0; padding: 2px 0; cursor: pointer;
}
.angle-deck-dismiss:hover { color: var(--text); text-decoration: underline; }

.angle-cards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }

/* An index card: cream stock, a red rule under the name. Hover is a lift off
   the desk, never a colour change. */
.angle-card {
  position: relative; text-align: left; font: inherit; color: var(--text);
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 15px 12px; min-height: 216px;
  background: var(--cream);
  border: 1px solid var(--border); border-radius: 4px;
  box-shadow: var(--shadow-sm); cursor: pointer;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring), opacity 0.25s ease;
}
.angle-card * { cursor: pointer; }
.angle-card:nth-child(1) { --tilt: -0.6deg; }
.angle-card:nth-child(2) { --tilt: 0.4deg; }
.angle-card:nth-child(3) { --tilt: -0.3deg; }
.angle-card:hover { transform: translateY(-4px) rotate(0deg); box-shadow: var(--shadow-lg); }
.angle-card:active { transform: scale(0.98); }
.angle-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.angle-card-head {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 -15px; padding: 0 15px 9px;
  border-bottom: 1px solid rgba(196, 92, 72, 0.4);
}
.angle-card-who { font-size: 11.5px; color: var(--text-muted); line-height: 1.3; padding-right: 58px; min-height: 2.6em; }
.angle-card-name { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.angle-card-hook { font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.4; margin-top: 4px; }
.angle-card-why { font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.angle-card-why i { font-family: var(--hand); font-style: normal; font-size: 14px; color: var(--accent); margin-right: 2px; }
.angle-card-foot {
  margin-top: auto; padding-top: 4px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--accent);
}
.angle-card-foot svg { width: 13px; height: 13px; }

/* The agent's pick: a sticky note on the corner, in its handwriting. */
.angle-card-pick {
  position: absolute; top: -9px; right: 10px;
  padding: 3px 9px 2px; background: var(--sticky);
  font-family: var(--hand); font-size: 14px; color: var(--text);
  box-shadow: var(--shadow-sm); transform: rotate(3deg);
}

/* While the agent looks: blank cards, each saying what it's reading. */
.angle-card.is-thinking { cursor: default; pointer-events: none; justify-content: flex-end; align-items: center; }
.angle-card.is-thinking::after {
  content: ''; position: absolute; inset: 20px 15px 44px; border-radius: 4px;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.035) 30%, rgba(0, 0, 0, 0.07) 50%, rgba(0, 0, 0, 0.035) 70%);
  background-size: 300% 100%; animation: sheetShimmer 1.6s linear infinite;
}
.angle-card.is-thinking span { font-family: var(--hand); font-size: 14px; color: var(--text-muted); }

/* A card lands, or leaves when another is picked. */
.angle-card.is-landing { animation: angleCardIn 0.45s var(--spring) both; }
.angle-card.is-landing:nth-child(2) { animation-delay: 0.08s; }
.angle-card.is-landing:nth-child(3) { animation-delay: 0.16s; }
@keyframes angleCardIn { from { opacity: 0; transform: translateY(14px) rotate(var(--tilt, 0deg)); } }
.angle-card.is-picked { transform: translateY(-4px) rotate(0deg); box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); }
.angle-card.is-leaving { opacity: 0; transform: translateY(10px) rotate(var(--tilt, 0deg)); pointer-events: none; }

.angle-deck-other { margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.angle-deck-other button {
  font: 600 12.5px var(--sans); color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.angle-deck-other button:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .angle-cards { grid-template-columns: minmax(0, 1fr); }
  .angle-card { min-height: 0; }
  .angle-card-who { min-height: 0; }
}

/* ---- The chat's pointer card: prod's page-deployed-card, as one button ---- */
.image-work-card {
  display: block; width: 100%; max-width: 360px; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
}
.chat-log > .image-work-card { max-width: 768px; margin-inline: auto; }
.image-work-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.image-work-card:active { transform: scale(0.99); }
.image-work-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.image-work-card .page-deployed-header { margin-bottom: 12px; }
.image-work-card .page-deployed-title,
.image-work-card .page-deployed-subtitle { display: block; }
.image-work-card .page-deployed-subtitle { color: var(--accent); }
.image-work-card.is-making .page-deployed-subtitle { color: var(--green); }
.iwc-thumbs { display: flex; align-items: center; gap: 6px; }
.iwc-thumb {
  display: block; height: 64px; aspect-ratio: var(--ad-ratio, 1 / 1);
  border-radius: 5px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface3);
}
.iwc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iwc-thumb .sheet-pending, .iwc-thumb .sheet-failed { padding: 0; }
.iwc-more { font-size: 12px; color: var(--text-muted); padding-left: 2px; }
.iwc-open {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--accent);
}
.iwc-open svg { width: 13px; height: 13px; }

/* ---- Filmstrip zoom (image-zoom.js openImageStripZoom) ---- */
.image-strip-zoom { cursor: default; }
.image-strip-stage {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  max-width: calc(100vw - 140px); max-height: 100vh; padding: 28px 0 20px;
}
.image-strip-zoom .image-zoom-image {
  min-height: 0; max-height: calc(100vh - 300px); max-width: 100%;
  border: 6px solid #fff; border-radius: 8px;
}
/* The Gallery viewer's cream card (COM-516), kept under the image here:
   title and count on one row, the buttons on the next. */
.image-strip-main { display: flex; flex-direction: column; align-items: center; gap: 18px; min-height: 0; }
/* The image scales in, so its shadow paints late; lift the card above it. */
.image-strip-meta { position: relative; width: 100%; box-sizing: border-box; cursor: default; }
.image-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* Captions run to 200 characters; two lines keeps the buttons on screen. */
.image-strip-zoom .image-strip-title {
  margin: 0; min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.image-strip-count { flex: none; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.image-strip-count:empty { display: none; }
.image-strip-actions { margin-top: 12px; flex-wrap: wrap; }
/* Download and Save to gallery split the row evenly. On a phone the card is
   too narrow for both, so each takes its own row rather than break a word. */
.image-strip-actions .gallery-lb-action { flex: 1 1 0; justify-content: center; white-space: nowrap; }
@media (max-width: 600px) { .image-strip-actions .gallery-lb-action { flex-basis: 100%; } }
/* White on cream disappears; Save gets the brown outline so it reads as a button. */
.image-strip-actions .gallery-lb-action:not(.primary) { background: transparent; border-color: var(--accent); color: var(--accent); }
.image-strip-actions .gallery-lb-action:not(.primary):hover { background: rgba(139, 111, 71, 0.08); }
.image-strip-actions:empty { display: none; }
.image-strip-film[hidden] { display: none; }
.zoom-arrow {
  position: fixed; top: 50%; margin-top: -21px; z-index: 1;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.9); color: var(--text); box-shadow: var(--shadow-md);
  display: grid; place-items: center; cursor: pointer;
  transition: transform 0.3s var(--spring);
}
.zoom-arrow[hidden] { display: none; }
.zoom-arrow:hover { transform: translateY(-2px); }
.zoom-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.zoom-arrow.is-left { left: 26px; }
.zoom-arrow.is-right { right: 26px; }

.lb-strip { display: flex; gap: 8px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.lb-set { display: flex; gap: 8px; }
.lb-set + .lb-set { margin-left: 10px; padding-left: 14px; border-left: 1px dashed rgba(255, 255, 255, 0.35); }
.lb-thumb {
  position: relative; flex: none; height: 64px; aspect-ratio: var(--ad-ratio, 1 / 1);
  border-radius: 6px; overflow: hidden; padding: 0;
  border: 2px solid transparent; background: var(--surface3); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring), border-color 0.15s;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lb-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-thumb.is-active { border-color: var(--accent); }
.lb-thumb.is-added::after {
  content: ''; position: absolute; top: 3px; right: 3px; z-index: 3;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 8px no-repeat;
  box-shadow: 0 0 0 1.5px #fff;
}

@media (prefers-reduced-motion: reduce) {
  .sheet-pending, .angle-card.is-thinking::after, .angle-card.is-landing { animation: none; }
  .sheet-btn, .angle-btn, .sheet-more, .image-work-card, .lb-thumb, .zoom-arrow, .angle-card { transition: none; }
}