/* Styled answers (js/pages.js): the pieces a model styles with HTML, set in
 * the flow of the text, and the large view.
 *
 * A piece has no chrome of its own: no card, no head, no border. Its frame is
 * transparent and its text is set in the conversation's own type (pages.js
 * BASE mirrors prose.css), so the Markdown and the HTML read as one answer.
 * The frame bleeds a little past the column on every side and pads its body
 * by as much, which keeps its text on the column's edge while its shadows and
 * focus rings have room. Its tools are in the reply's ⋮ menu (chat.js), not
 * on the piece.
 *
 * A picture is the exception: a small window of its own, topped with the
 * mosaic strip like every Mosaik window, which opens large with a click.
 */

#view-chat .mk-view{
  --bleed-x: 14px;
  --bleed-y: 8px;
  position: relative;
  margin: 0 0 var(--block-gap, 0.95em);
  transition: opacity var(--dur-slow) var(--ease);
}
#view-chat .body > .mk-view:last-child{ margin-bottom: 0; }
#view-chat .mk-view.entering{ opacity: 0; }
#view-chat .part-md:empty{ display: none; }

.mk-view .view-stage{ position: relative; }
.mk-view iframe{
  display: block;
  width: calc(100% + var(--bleed-x) * 2);
  height: 0;
  margin: calc(var(--bleed-y) * -1) calc(var(--bleed-x) * -1);
  border: 0;
  background: transparent;
}

/* -- while nothing is drawn yet: one quiet line ---------------------------- */
#view-chat .mk-view .view-wait{ display: none; }
#view-chat .mk-view.waiting .view-wait{
  display: inline-block;
  font-size: var(--chrome, 13px);
  font-weight: 500;
  line-height: 1.6;
  padding: 1px 0 calc(var(--bleed-y) + 2px);
  background-image: linear-gradient(100deg, var(--text3) 0%, var(--text3) 40%, var(--shimmer) 50%, var(--text3) 60%, var(--text3) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sweep 1.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.reduced-motion #view-chat .mk-view.waiting .view-wait{ animation: none; background-image: none; color: var(--text3); }

/* A citation chip drawn inside a piece hands its card to the conversation's
   own (chat.js citeFromPiece), anchored here. */
#view-chat .mk-view .cite-proxy{ position: absolute; visibility: hidden; pointer-events: none; }

/* -- cut short by the reply's length limit ---------------------------------- */
#view-chat .mk-view .view-note{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: var(--chrome, 13px);
  color: var(--text3);
}
#view-chat .mk-view .view-note[hidden]{ display: none; }
#view-chat .mk-view .view-note .icon{ color: var(--danger); flex: none; }
#view-chat .mk-view .view-note .icon svg{ width: 14px; height: 14px; }

/* Taller than the reader's limit: it scrolls inside, and fades at its foot. */
.mk-view.capped .view-stage::after{
  content: "";
  position: absolute;
  left: 0;
  right: 12px;
  bottom: calc(var(--bleed-y) * -1);
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* -- a picture: a small window of its own --------------------------------------- */
#view-chat .mk-view.image{ width: min(100%, 440px); }
#view-chat .mk-view.image .image-window{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--raised);
  box-shadow: 0 1px 2px var(--shadow-soft), 0 12px 30px -16px var(--shadow-cast);
  overflow: hidden;
}
#view-chat .mk-view.image .image-head{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 5px 5px 12px;
  color: var(--text3);
}
#view-chat .mk-view.image .image-head > .icon svg{ width: 14px; height: 14px; display: block; }
#view-chat .mk-view.image .image-title{
  flex: 1;
  min-width: 0;
  font-size: var(--chrome, 13px);
  font-weight: 560;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-chat .mk-view.image .image-head .ibtn{ width: 26px; height: 26px; color: var(--text3); }
/* Pictures lie on paper in every theme: one with no background was drawn for white. */
#view-chat .mk-view.image .view-stage{
  border-top: 1px solid var(--border);
  background: var(--picture-paper);
}
#view-chat .mk-view.image.waiting .view-stage{ background: color-mix(in srgb, var(--text) 3%, var(--bg)); }
#view-chat .mk-view.image iframe{ width: 100%; margin: 0; }
#view-chat .mk-view.image.waiting .view-stage{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}
#view-chat .mk-view.image.waiting .view-wait{ display: inline-flex; align-items: center; gap: 8px; padding: 0; }
#view-chat .mk-view .view-wait .star-loader{ width: 18px; height: 18px; }
#view-chat .mk-view.image.capped .view-stage::after{ display: none; }

/* -- the large view: a Mosaik window (dialogs.js) ------------------------------ */
.dialog.viewer{ width: min(1120px, 100%); height: min(860px, 90vh); }
.dialog.viewer .dialog-head{ padding-bottom: 12px; }
.dialog.viewer .dialog-title{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog.viewer .head-actions .ibtn{ width: 30px; height: 30px; }
.dialog.viewer .viewer-body{
  position: relative;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.dialog.viewer .viewer-body iframe{ display: block; flex: 1; width: 100%; min-height: 0; border: 0; background: transparent; }
.dialog.viewer.picture .viewer-body{ background: var(--picture-paper); }
/* A sent picture, opened large (js/chat.js openPicture; a dialog, so not under
   #view-chat). Only the picture, in a window of its shape (--pw by --ph, its
   pixels), as large as fits in about five sixths of the app's window and at
   most twice its own size so a small one never turns to mush. No title and
   no mosaic strip (the user, 2026-10-10): Save and Close float in its top
   right corner on a small backing of their own, so they show on any picture. */
.dialog.picture-view{ width: auto; height: auto; max-width: none; max-height: none; border-radius: 14px; }
.dialog.picture-view > .mosaic-strip{ display: none; }
.dialog.picture-view.untitled > .dialog-head{
  top: 10px; right: 10px; gap: 2px; padding: 3px;
  border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--raised) 88%, transparent);
  box-shadow: 0 1px 2px var(--shadow-soft), 0 6px 18px -8px var(--shadow-cast);
}
.dialog.picture-view.untitled > .dialog-head .head-actions{ gap: 2px; }
.dialog.picture-view.untitled > .dialog-head .ibtn{ width: 28px; height: 28px; color: var(--text2); }
.dialog.picture-view.untitled > .dialog-head .ibtn:hover{ color: var(--text); }
.dialog.picture-view.untitled > .picture-view-body{
  flex: none; padding: 0; overflow: hidden;
  width: min(84vw, calc(84vh * var(--pw, 1) / var(--ph, 1)), calc(var(--pw, 1) * 2px));
  aspect-ratio: var(--pw, 1) / var(--ph, 1);
  background: var(--picture-paper, var(--bg));
}
.dialog.picture-view .picture-view-body img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.dialog.viewer .viewer-source{
  flex: 1;
  margin: 0;
  min-height: 0;
  overflow: auto;
  padding: 18px 24px;
  background: var(--code-bg);
  color: var(--code-fg);
  font: 12.5px/1.6 var(--font-mono, monospace);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}

/* -- Settings › Styled answers ----------------------------------------------- */
.settings-page .styled-details{
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: opacity var(--dur) var(--ease);
}
.settings-page .styled-details.muted{ opacity: 0.45; pointer-events: none; }
/* Faint already as a whole: its switches don't fade a second time. */
.settings-page .styled-details.muted .check{ opacity: 1; }
/* The elements, a switch each, two to a row where there is room. */
.settings-page .styled-elements-block{ display: flex; flex-direction: column; gap: 12px; }
.settings-page .styled-elements{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 24px; }
.settings-page .styled-elements .check{ transition: opacity var(--dur) var(--ease); }
.settings-page .styled-elements .check.unavailable{ opacity: 0.45; }