#loadingOverlay.design-progress-card {
    position: fixed;
    inset: auto auto max(24px, env(safe-area-inset-bottom)) 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: min(420px, calc(100vw - 28px));
    padding: 22px 24px 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 1px solid rgba(99, 102, 241, .14);
    border-radius: 20px;
    background: linear-gradient(145deg, #fff 25%, #f8faff);
    box-shadow: 0 16px 56px rgba(30, 41, 59, .14), 0 2px 8px rgba(30, 41, 59, .04);
    color: #1e293b;
    z-index: 9999;
    text-align: left;
}
.design-progress-header { display: flex; align-items: center; gap: 12px; padding-right: 18px; }
.design-progress-symbol {
    width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
    border-radius: 12px; background: #eef2ff; color: #6366f1;
}
.design-progress-spinner { width: 17px; height: 17px; border: 2px solid #c7d2fe; border-top-color: #6366f1; border-radius: 50%; animation: design-progress-spin 1.1s linear infinite; }
.design-progress-symbol::after { display: none; font-size: 20px; line-height: 1; }
.design-progress-heading { min-width: 0; flex: 1; }
.design-progress-eyebrow { margin-bottom: 4px; color: #94a3b8; font-size: 10px; letter-spacing: .14em; }
.design-progress-title { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 650; color: #1e293b; overflow-wrap: anywhere; }
.design-progress-time { align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.design-progress-time span { color: #94a3b8; font-size: 10px; }
.design-progress-time time { font: 500 18px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.04em; color: #475569; }
.design-progress-close {
    position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0;
    display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent;
    color: #94a3b8; font-size: 20px; cursor: pointer;
}
.design-progress-close:hover { background: #eef2ff; color: #4f46e5; }
.design-progress-close:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.design-progress-track { height: 5px; margin-top: 20px; overflow: hidden; position: relative; border-radius: 99px; background: #e8edf8; }
#progressBar.design-progress-fill { position: absolute; inset: 0 auto 0 0; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a5b4fc, #6366f1, #818cf8); animation: design-progress-travel 2.8s ease-in-out infinite; }
#progressBar.design-progress-fill::after { content: none; }
.design-progress-steps { display: flex; justify-content: space-between; margin-top: 10px; color: #a1a9ba; font-size: 10px; }
.design-progress-steps span { display: inline-flex; align-items: center; gap: 5px; }
.design-progress-steps span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1; }
.design-progress-steps .is-active { color: #6366f1; }
.design-progress-steps .is-active::before { background: #818cf8; }
.design-progress-steps .is-done { color: #64748b; }
.design-progress-steps .is-done::before { background: #94a3b8; }
#humorText.design-progress-description { margin: 16px 0 0; color: #64748b; font-size: 12px; line-height: 1.7; }
.design-progress-hint { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #e9edf5; color: #94a3b8; font-size: 11px; line-height: 1.75; overflow-wrap: anywhere; }
.design-progress-card[data-phase="completed"] .design-progress-symbol { color: #059669; background: #ecfdf5; }
.design-progress-card[data-phase="completed"] .design-progress-symbol::after { content: '✓'; display: block; }
.design-progress-card[data-phase="completed"] .design-progress-spinner,
.design-progress-card[data-phase="failed"] .design-progress-spinner,
.design-progress-card[data-phase="clarification"] .design-progress-spinner,
.design-progress-card[data-phase="cancelled"] .design-progress-spinner { display: none; }
.design-progress-card[data-phase="completed"] #progressBar { width: 100%; transform: none; animation: none; background: linear-gradient(90deg, #34d399, #10b981); }
.design-progress-card[data-phase="failed"] .design-progress-symbol,
.design-progress-card[data-phase="clarification"] .design-progress-symbol,
.design-progress-card[data-phase="cancelled"] .design-progress-symbol { color: #b45309; background: #fffbeb; }
.design-progress-card[data-phase="failed"] .design-progress-symbol::after { content: '!'; display: block; }
.design-progress-card[data-phase="clarification"] .design-progress-symbol::after { content: '?'; display: block; }
.design-progress-card[data-phase="cancelled"] .design-progress-symbol::after { content: '−'; display: block; }
.design-progress-card[data-phase="reconnecting"] #progressBar { background: #cbd5e1; }
.design-progress-card[data-phase="failed"] #progressBar,
.design-progress-card[data-phase="cancelled"] #progressBar,
.design-progress-card[data-phase="clarification"] #progressBar { animation: none; transform: none; width: 100%; background: #e2e8f0; }
@keyframes design-progress-spin { to { transform: rotate(360deg); } }
@keyframes design-progress-travel { 0% { transform: translateX(-105%); } 100% { transform: translateX(365%); } }
@media (max-width: 420px) {
    #loadingOverlay.design-progress-card { padding: 19px 18px 16px; bottom: max(14px, env(safe-area-inset-bottom)); border-radius: 16px; }
    .design-progress-header { gap: 10px; }
    .design-progress-title { font-size: 13px; }
    .design-progress-time time { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .design-progress-spinner { animation: none; }
    #progressBar.design-progress-fill { animation: none; left: 30%; }
    .design-progress-card[data-phase="completed"] #progressBar { left: 0; }
}