/* Designs: the card in the answer, and the window beside the chat (js/design.js).
 *
 * The card reads like the file cards beside it: a plain bordered card, its
 * kind in a cell of its own, that says what is being designed and opens it
 * with a click. The window slides open by width beside the conversation,
 * like the editor, so the chat stays in reach while the design is changed;
 * Full width lays it over the whole chat area instead of squeezing the
 * conversation to a strip.
 */

/* ---- the card in the answer ------------------------------------------------------ */
/* The same card as a file the model hands back (.out-card in chat.css): a
   cell with the kind's glyph, a line between, the name, and what a click does. */
#view-chat .design-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 440px);
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
#view-chat .design-card:hover { border-color: var(--border-strong, var(--border)); background: var(--surface-hover, var(--card)); }
#view-chat .design-card.shown { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
#view-chat .design-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#view-chat .design-card .dc-main { display: flex; align-items: stretch; min-width: 0; min-height: 54px; }
#view-chat .design-card .dc-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 4%, var(--card));
  color: var(--text2);
}
#view-chat .design-card .dc-icon .icon { width: 18px; height: 18px; }
#view-chat .design-card.shown .dc-icon { color: var(--accent-ink); }
#view-chat .design-card .dc-text { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; padding: 8px 14px; line-height: 1.35; }
#view-chat .design-card .dc-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-chat .design-card .dc-sub { font-size: 12px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
#view-chat .design-card.cut .dc-sub { color: var(--danger); }
/* Being written: the lines in the glyph's cell and the band along the foot,
   as a file card shows them (.pen-lines and .work-band in css/chat.css). */
#view-chat .design-card.writing { cursor: progress; }
#view-chat .design-card .dc-icon .pen-lines,
#view-chat .design-card .work-band { display: none; }
#view-chat .design-card.writing .dc-icon .icon { display: none; }
#view-chat .design-card.writing .dc-icon .pen-lines { display: flex; }
#view-chat .design-card.writing .work-band { display: block; }
/* The window's own working bar (#design.busy below), from the left edge to past the right. */
@keyframes dc-working { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---- the window beside the chat ------------------------------------------------------ */
#design {
  position: relative;
  width: 0;
  flex: none;
  overflow: hidden;
  background: var(--bg);
  /* No border while closed: a closed panel takes no room at all. */
  border-left: 0 solid transparent;
  transition: width var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease);
  --design-w: clamp(400px, 46vw, 1040px);
}
#app.design-open[data-view="chat"] #design { width: var(--design-w); border-left-color: var(--border); border-left-width: 1px; }

#design .dz-inner { display: flex; flex-direction: column; width: var(--design-w); height: 100%; background: var(--bg); }

/* Full width: the window covers the whole chat area, the conversation and its
   message box, rather than squeezing them into a strip beside it. The panel
   keeps its place in the row, so the chat under it is not laid out again:
   only its inner window is laid over the conversation, from the left edge of
   the chat area to the workbench (js/design.js slides it out and back). It
   opens and closes at once under the cover, since nothing of the chat shows. */
#app.design-wide #design { transition: none; }
:is(#app.design-wide.design-open[data-view="chat"] #design, #app.design-wide #design.leaving) { position: static; overflow: visible; }
:is(#app.design-wide.design-open[data-view="chat"] #design, #app.design-wide #design.leaving) .dz-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  width: auto;
}
:is(#app.design-wide.design-open[data-view="chat"].bench-open #design, #app.design-wide.bench-open #design.leaving) .dz-inner {
  right: calc(var(--workbench-w) + 1px);
}
/* What slides past the panel's edge goes under the workbench, not over it. */
#app.design-wide #workbench { z-index: 7; }
#design.sliding .dz-inner { box-shadow: -1px 0 0 var(--border), -18px 0 32px -22px var(--shadow-cast); }
#design .dz-head { display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 8px 0 14px; flex: none; }
#design .dz-kind { display: inline-grid; place-items: center; color: var(--accent); margin-right: 4px; }
#design .dz-kind .icon { width: 16px; height: 16px; }
#design .dz-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-size); font-weight: 600; }
#design .dz-spacer { flex: 1; }
#design .dz-versions { display: inline-flex; align-items: center; margin-right: 6px; }
#design .dz-versions[hidden] { display: none; }
#design .dz-count { min-width: 40px; text-align: center; color: var(--text2); font-size: var(--ui-meta); font-variant-numeric: tabular-nums; }
#design .dz-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
#design .dz-btn:hover:not(:disabled) { background: var(--soft); color: var(--text); }
#design .dz-btn:disabled { opacity: 0.35; cursor: default; }
#design .dz-btn .icon { width: 15px; height: 15px; }
#design .dz-versions .dz-btn { width: 24px; height: 26px; }
#design .dz-note {
  flex: none;
  padding: 0 16px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text3);
  font-size: var(--ui-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#design.busy .dz-note { color: var(--accent-ink); }
#design .dz-stage { position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden; background: var(--bg); }
#design .dz-stage iframe { display: block; flex: 1; width: 100%; min-height: 0; border: 0; background: transparent; }
#design.busy .dz-stage::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-100%);
  animation: dc-working 1.2s linear infinite;
}
html.reduced-motion #design.busy .dz-stage::after { animation: none; width: 100%; transform: none; opacity: 0.5; }