.design-html-replay[hidden] { display: none !important; }
.design-html-replay {
    display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 10px; padding: 0;
    color: #475569;
    font: 12px/1.5 system-ui, sans-serif;
}
.design-html-replay-label { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; white-space: nowrap; }
.design-html-replay input[type="range"] {
    flex: 1; min-width: 40px; height: 5px; margin: 8px 0; padding: 0; border: 0;
    appearance: none; -webkit-appearance: none; border-radius: 8px; cursor: pointer;
    background: linear-gradient(to right, #3b82f6 var(--replay-progress, 100%), #dbe3ee var(--replay-progress, 100%));
    touch-action: pan-y;
}
.design-html-replay input::-webkit-slider-thumb { appearance: none; width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 1px 5px #1e40af55; }
.design-html-replay input::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #2563eb; }
.design-html-replay input:focus-visible { outline: 2px solid #60a5fa; outline-offset: 6px; }
.design-html-replay-count { min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.design-html-replay button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; padding: 0; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #475569; font: inherit; cursor: pointer; }
.design-html-replay button:hover { border-color: #60a5fa; color: #2563eb; }
.design-html-result-bar[hidden] { display: none !important; }
.design-html-result-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.design-html-result-bar > .design-html-replay { flex: 1 1 200px; min-width: 160px; }
.design-html-result-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.trace-preview-footer.design-html-result-bar { display: none; }
.trace-preview-footer.design-html-result-bar.active { display: flex; }
/* Same icon, 36px height, rounded border and indigo palette as the canvas DesktopAppSendButton. */
.design-html-send {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px;
    height: 36px; min-width: 142px; padding: 0 12px; border: 1px solid #c7d2fe; border-radius: 12px;
    background: rgba(255,255,255,.9); color: #4f46e5; font: 12px/1.5 system-ui,sans-serif; white-space: nowrap;
    cursor: pointer; transition: background-color .15s, border-color .15s;
}
.design-html-send:hover { background: #eef2ff; border-color: #a5b4fc; }
.design-html-send img { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; transform: scale(1.18); }
.design-html-send:focus-visible, .design-html-history:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; }
.design-html-history { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; height: 28px; padding: 0; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: #64748b; cursor: pointer; }
.design-html-result-actions .design-html-history { flex-basis: 36px; height: 36px; border-radius: 10px; }
#traceImageSlotsMount, #designImageSlotsMount { padding: 0 12px 12px; }
#traceImageSlotsMount:empty, #designImageSlotsMount:empty { display: none; }
html[data-ui-theme="dark"] .design-html-result-bar { background: #182130; border-color: #37465b; }
html[data-ui-theme="dark"] .design-html-replay { color: #9caec4; }
html[data-ui-theme="dark"] .design-html-replay button,
html[data-ui-theme="dark"] .design-html-history { background: #1d2532; border-color: #37465b; color: #cbd5e1; }
html[data-ui-theme="dark"] .design-html-send { background: #272b4a; border-color: #484b80; color: #c7d2fe; }
html[data-ui-theme="dark"] .design-html-send:hover { background: #343863; border-color: #818cf8; }
.design-preview-loading[hidden] { display: none !important; }
.design-preview-loading { position: absolute; inset: 0; z-index: 40; display: flex; justify-content: center; align-items: flex-start; padding: 82px 20px 20px; background: rgba(248,250,252,.82); cursor: progress; border-radius: inherit; }
.design-preview-loading-card { width: min(360px, 100%); padding: 20px; border: 1px solid #dbe7f5; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(30,64,175,.10); }
.design-preview-loading-label { color: #334155; font-size: 14px; font-weight: 600; }
.design-preview-loading progress { display: block; width: 100%; height: 7px; margin: 14px 0 10px; border: 0; border-radius: 8px; overflow: hidden; accent-color: #3b82f6; }
.design-preview-loading progress::-webkit-progress-bar { background: #e2e8f0; border-radius: 8px; }
.design-preview-loading progress::-webkit-progress-value { background: #3b82f6; border-radius: 8px; transition: width .12s linear; }
.design-preview-loading progress:indeterminate { background: repeating-linear-gradient(110deg, #dbeafe 0 10px, #60a5fa 10px 20px); }
.design-preview-loading progress:indeterminate::-webkit-progress-bar { background: repeating-linear-gradient(110deg, #dbeafe 0 10px, #60a5fa 10px 20px); background-size: 40px 100%; animation: design-preview-wait 1s linear infinite; }
@keyframes design-preview-wait { to { background-position: 40px 0; } }
@media (prefers-reduced-motion: reduce) { .design-preview-loading progress:indeterminate::-webkit-progress-bar { animation: none; } }
.design-preview-loading-detail { color: #64748b; font-size: 12px; line-height: 1.5; }
@media (max-width: 1180px) {
    .trace-preview-panel[aria-busy="true"] { position: relative; top: auto; }
}
@media (max-width: 1100px) {
    .design-preview-card[aria-busy="true"] { position: relative; top: auto; }
}
/* An opened history file can be inspected in the page, including outside the desktop host. */
html:not(.desktop-app) #designPreviewPanel.design-html-preview-ready #designPreviewStage,
html:not(.desktop-app) #tracePreviewPanel.design-html-preview-ready .trace-preview-stage { display: block !important; }
html:not(.desktop-app) #tracePreviewPanel.design-html-preview-ready .trace-preview-toolbar,
html:not(.desktop-app) #tracePreviewPanel.design-html-preview-ready .trace-preview-footer.active { display: flex !important; }
#designPreviewPanel.design-html-preview-ready .desktop-download-only,
html:not(.desktop-app) #tracePreviewPanel.design-html-preview-ready .trace-web-preview-message { display: none !important; }
@media (max-width: 600px) {
    .design-html-result-bar { padding: 10px; gap: 8px; }
    .design-html-result-bar > .design-html-replay { flex-basis: 100%; }
    .design-html-replay { gap: 6px; }
    .design-html-replay-label { gap: 0; font-size: 0; }
    .design-html-replay-count { min-width: 44px; font-size: 11px; }
    #traceImageSlotsMount, #designImageSlotsMount { padding: 0 8px 8px; }
}