/* Widgets in an answer and their proposals (linked last in index.html). */

/* Widgets in an answer (ADR 0070): a card on the answer's paper, its page in a sandboxed frame.
   The card keeps the room the widget asked for before it draws (a calm shimmer after 150 ms),
   the page fades in, a new version fades over the old one, the height eases. */
.message-part:empty { display: none; }
.widget-card { position: relative; margin: 12px 0 14px; border: 1px solid #d6dacb; border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px #292b270d, 0 8px 28px #292b270a; overflow: hidden; animation: widget-in .5s var(--ease) both; }
.widget-card.is-flashing { animation: widget-flash 1.6s ease-out; }
.widget-bar { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 5px 4px 12px; border-bottom: 1px solid #e4e5da; color: var(--ink); }
.widget-mark { width: 22px; height: 22px; border-radius: 7px; display: inline-grid; place-items: center; background: var(--sage); color: var(--olive); flex-shrink: 0; }
.widget-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13.5px/1.35 var(--sans); }
.widget-versions { max-width: 46%; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 12px; text-overflow: ellipsis; cursor: pointer; transition: border-color .15s, color .15s; }
.widget-versions:hover { color: var(--ink); border-color: #c0c5b1; }
.widget-versions[hidden] { display: none; }
.widget-expand { width: 28px; height: 28px; color: var(--muted); }
.widget-expand:hover { color: var(--ink); }
.widget-stage { position: relative; height: 360px; transition: height .38s var(--ease); }
.widget-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; color-scheme: light; opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.widget-frame.is-arriving { opacity: 0; transform: translateY(4px); }
.widget-wait { position: absolute; inset: 18px 20px; display: none; flex-direction: column; gap: 12px; pointer-events: none; }
.widget-stage.is-waiting .widget-wait { display: flex; animation: q-fade-in .3s ease .15s both; }
.widget-wait span { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #e9eadf 0%, #f3f3ec 50%, #e9eadf 100%); background-size: 200% 100%; animation: writing-shimmer 1.6s ease-in-out infinite; }
.widget-wait span:first-child { width: 38%; height: 18px; }
.widget-wait span:nth-child(2) { flex: 1; max-height: 220px; border-radius: 10px; }
.widget-wait span:last-child { width: 62%; }
.widget-failed { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }
.widget-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 4px; padding: 8px 12px; border: 1px solid #dfe1d6; border-radius: 10px; background: #f3f3ec; color: var(--muted); font-size: 13px; animation: widget-in .4s var(--ease) both; }
.widget-note strong { color: var(--ink); font-weight: 550; }
.widget-note .icon { color: var(--olive); }
dialog.viewer--widget .widget-full-stage { position: relative; background: var(--surface); overflow: hidden; scrollbar-gutter: auto; }
dialog.viewer--widget .widget-frame { position: absolute; inset: 0; }
.viewer-badge--widget { background: var(--sage); color: var(--olive); }
@keyframes widget-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes widget-flash { 0%, 30% { box-shadow: 0 0 0 3px #c9d6b3, 0 8px 28px #292b270a; } 100% { box-shadow: 0 1px 2px #292b270d, 0 8px 28px #292b270a; } }
/* Inline (ADR 0073): part of the answer's text, on the message's paper with no border, bar or
   background; its title is for screen readers, its tools a small row that shows on hover or
   focus (faint on touch screens), over the widget's top right corner. */
.widget-card--inline { margin: 8px 0 12px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; overflow: visible; }
.widget-card--inline .widget-bar { position: absolute; z-index: 2; top: -6px; right: -6px; min-height: 0; padding: 2px; gap: 2px; border: 0; border-radius: 9px; background: color-mix(in srgb, var(--paper) 92%, transparent); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.widget-card--inline:hover .widget-bar, .widget-card--inline.is-hover .widget-bar, .widget-card--inline:focus-within .widget-bar { opacity: 1; pointer-events: auto; }
.widget-card--inline .widget-mark { display: none; }
.widget-card--inline .widget-title:not(.widget-title--coming) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.widget-card--inline .widget-wait { inset: 4px 0; }
.widget-card--inline.is-flashing { animation: widget-flash-inline 1.6s ease-out; }
@keyframes widget-flash-inline { 0%, 30% { box-shadow: 0 0 0 6px #dfe4d4; background: #dfe4d4; } 100% { box-shadow: 0 0 0 6px transparent; background: transparent; } }
/* Its place while written: the breathing line and the shimmer, borderless. */
.widget-card--inline.widget-card--coming .widget-bar { position: static; height: 28px; padding: 0; opacity: 1; background: none; pointer-events: none; }
/* Touch screens have no hover: the tools are a quiet row under the widget, covering none of it. */
@media (hover: none) {
  .widget-card--inline:not(.widget-card--coming) { display: flex; flex-direction: column; }
  .widget-card--inline:not(.widget-card--coming) .widget-bar { order: 1; position: static; justify-content: flex-end; min-height: 0; padding: 0; background: none; opacity: .8; pointer-events: auto; }
}
@media (max-width: 720px) {
  .widget-card { margin: 12px -4px 14px; border-radius: 10px; }
  .widget-card--inline { margin: 8px 0 12px; }
  .widget-versions { max-width: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .widget-card, .widget-note, .widget-card.is-flashing { animation: none; }
  .widget-stage, .widget-frame { transition: none; }
  .widget-wait span { animation: none; }
}
.widget-card--coming .widget-title--coming { color: var(--muted); animation: q-breathe 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .widget-card--coming .widget-title--coming { animation: none; } }
/* A proposal's actions (ADR 0073): Popraw, Opublikuj for admins, where it was published. */
.widget-act { flex-shrink: 0; }
.widget-act[hidden] { display: none; }
.widget-card--inline .widget-act, .widget-card--coming .widget-act { display: none; }
:is(.widget-fix, .widget-kreator) { height: 28px; margin: 0; padding: 0 6px; border-radius: 6px; font-size: 12.5px; }
:is(.widget-fix, .widget-kreator):hover { background: #e0e2d5; }
.widget-publish { height: 28px; padding: 0 11px; font-size: 12.5px; }
.widget-where { max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--olive); }
.widget-where[hidden] { display: none; }
@media (max-width: 520px) {
  .widget-card--proposal .widget-mark { display: none; }
  .widget-card--proposal .widget-bar { flex-wrap: wrap; gap: 4px 6px; padding-left: 10px; }
  /* Where it was published: its own line under the title and the actions. */
  .widget-card--proposal .widget-where { order: 9; flex-basis: 100%; max-width: 100%; padding-bottom: 2px; }
}
/* In Kreator's narrow chat the title keeps the room the icon took. */
.kr-proposals .widget-mark { display: none; }
/* Its preview at real size: a computer's width, or a phone's in the middle. */
.widget-sizes { display: flex; gap: 4px; margin-right: 6px; }
.widget-size[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
dialog.viewer--widget .widget-full-stage.is-phone .widget-frame { left: 50%; width: min(390px, 100%); transform: translateX(-50%); border-inline: 1px solid var(--line); }
/* Opublikuj's dialog: what happens, where it goes, then the check's findings if any. */
dialog.wg-publish { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 80px #252c1c26; overflow: auto; }
dialog.wg-publish[open] { animation: viewer-in .24s var(--ease); }
dialog.wg-publish::backdrop { background: #292b2766; backdrop-filter: blur(3px); }
.wg-publish-body { display: grid; gap: 12px; padding: 20px 20px 4px; }
.wg-publish-body h2 { font: 400 22px/1.3 var(--serif); margin: 0; }
.wg-publish-where { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.wg-publish-where legend { font: 600 12px/1.5 var(--sans); color: var(--muted); margin-bottom: 4px; }
.wg-publish-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; }
.wg-publish-fields label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.wg-publish-fields :is(input, select) { width: 100%; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font: 13.5px var(--sans); }
.wg-publish-found { padding: 12px 14px; border-radius: 10px; background: #f1e1db; color: #6e3a2f; font-size: 13px; }
.wg-publish-found ul { margin: 6px 0 10px; padding-left: 18px; }
.wg-publish-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 20px 18px; }
.wg-publish-found .wg-publish-buttons { padding: 0; justify-content: flex-start; }