/* Scoped to cloud task images; other personal-center dialogs keep their layout. */
#resultModal {
    --preview-surface: #fff;
    --preview-ink: #202632;
    --preview-muted: #7a8190;
    --preview-border: #e8eaee;
    --preview-canvas: #f2f3f5;
    padding: 24px;
    background: rgba(19, 24, 34, .64);
    backdrop-filter: blur(12px);
}
#resultModal .modal-content {
    width: min(1120px, 100%);
    height: min(900px, 92vh);
    height: min(900px, 92dvh);
    max-height: none;
    border-radius: 22px;
    border: 1px solid var(--preview-border);
    background: var(--preview-surface);
    color: var(--preview-ink);
    box-shadow: 0 32px 100px rgba(0, 0, 0, .24);
}
#resultModal .modal-header { padding: 22px 26px 20px; background: var(--preview-surface); border-color: var(--preview-border); flex-shrink: 0; }
#resultModal .modal-title-wrap { gap: 5px; }
#resultModal .modal-title { font-size: 19px; font-weight: 650; color: var(--preview-ink); }
#resultModal .modal-subtitle { color: var(--preview-muted); font-size: 12px; line-height: 1.5; }
#resultModal .close-modal { width: 34px; height: 34px; flex: 0 0 34px; border: 0; border-radius: 10px; color: var(--preview-muted); background: transparent; box-shadow: none; }
#resultModal .close-modal:hover { color: var(--preview-ink); background: var(--preview-canvas); }
#resultModal .modal-body { display: flex; flex-direction: column; padding: 0 18px 18px; flex: 1; min-height: 0; overflow: hidden; }
#resultModal .history-image-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 6px; min-height: 46px; flex-shrink: 0; font-size: 11px; color: var(--preview-muted); }
#resultModal .history-image-info, #resultModal .history-image-view { display: flex; align-items: center; gap: 14px; min-width: 0; }
#resultModal #historyImageTaskId { font-variant-numeric: tabular-nums; opacity: .7; }
#resultModal #historyImageArchiveStatus { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
#resultModal #historyImageArchiveStatus::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #3b9875; }
#resultModal #historyImageArchiveStatus[data-pending="true"]::before { background: #c69440; }
#resultModal #historyImageDimensions { font-variant-numeric: tabular-nums; white-space: nowrap; }
#resultModal #historyImageZoom, #resultModal #historyImageReload { border: 1px solid var(--preview-border); background: var(--preview-surface); color: var(--preview-ink); padding: 5px 10px; border-radius: 7px; font: inherit; cursor: pointer; white-space: nowrap; }
#resultModal #historyImageZoom[aria-pressed="true"] { background: var(--preview-ink); color: var(--preview-surface); border-color: transparent; }
#resultModal button:disabled { opacity: .45; cursor: default; }
#resultModal button:focus-visible { outline: 2px solid #737be6; outline-offset: 3px; }
#resultModal .image-preview-stage {
    display: flex; flex: 1; min-height: 100px; max-height: none; padding: 24px;
    border-radius: 12px; border: 1px solid var(--preview-border); overflow: auto;
    background-color: var(--preview-canvas);
    background-image: conic-gradient(rgba(128, 136, 152, .055) 25%, transparent 0 50%, rgba(128, 136, 152, .055) 0 75%, transparent 0);
    background-size: 20px 20px;
}
#resultModal .image-preview-stage img { width: auto; height: auto; min-width: 0; max-width: 100%; max-height: 100%; flex-shrink: 0; border-radius: 2px; background: transparent; object-fit: contain; box-shadow: 0 6px 28px rgba(0, 0, 0, .08); }
#resultModal .image-preview-stage.is-original-size { display: block; }
#resultModal .image-preview-stage.is-original-size img { max-width: none; max-height: none; margin: 0 auto; }
#resultModal .history-image-loading, #resultModal .history-image-error { display: none; align-items: center; justify-content: center; color: var(--preview-muted); font-size: 13px; }
#resultModal [data-image-state="loading"] > img, #resultModal [data-image-state="error"] > img { display: none; }
#resultModal [data-image-state="loading"] > .history-image-loading { display: flex; gap: 10px; min-height: 100%; }
#resultModal .history-image-loading i { width: 16px; height: 16px; border: 2px solid var(--preview-border); border-top-color: var(--preview-muted); border-radius: 50%; animation: history-image-spin 1s linear infinite; }
#resultModal [data-image-state="error"] > .history-image-error { display: flex; flex-direction: column; gap: 12px; min-height: 100%; text-align: center; }
#resultModal .history-image-error strong { font-size: 15px; color: var(--preview-ink); font-weight: 600; }
#resultModal .history-image-error button { margin-top: 6px; }
#resultModal .modal-footer { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 24px 18px; flex-shrink: 0; background: var(--preview-surface); border-color: var(--preview-border); }
#resultModal .history-image-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#resultModal .modal-footer-meta { color: var(--preview-muted); font-size: 11px; line-height: 1.6; }
#resultModal .modal-footer-actions { align-items: center; gap: 12px; flex-wrap: nowrap; }
#resultModal .history-image-send-group { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--preview-border); }
#resultModal .history-image-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 13px; border: 1px solid var(--preview-border); border-radius: 10px; background: var(--preview-surface); color: var(--preview-ink); font-family: inherit; font-size: 12px; font-weight: 550; white-space: nowrap; cursor: pointer; transition: background .16s, border-color .16s; }
#resultModal .history-image-button:hover:not(:disabled) { background: var(--preview-canvas); border-color: #b1b7c2; }
#resultModal .history-image-button img { display: block; width: 24px; height: 24px; object-fit: contain; }
#resultModal .history-image-button.is-primary { color: var(--preview-surface); background: var(--preview-ink); border-color: transparent; padding: 0 20px; }
#resultModal .history-image-button.is-primary:hover:not(:disabled) { background: #414b5e; color: #fff; }
#resultModal #historyImageActionStatus { min-height: 0; color: var(--preview-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
#resultModal #historyImageActionStatus:not(:empty) { padding-top: 12px; }
#resultModal #historyImageActionStatus[data-kind="error"] { color: #bf5653; }
#resultModal #historyImageActionStatus[data-kind="success"] { color: #34856a; }
html[data-ui-theme="dark"] #resultModal { --preview-surface: #1c222d; --preview-ink: #e5e9f1; --preview-muted: #98a3b5; --preview-border: #303948; --preview-canvas: #141a23; }
html[data-ui-theme="dark"] #resultModal #historyImageActionStatus[data-kind="error"] { color: #ed9690; }
html[data-ui-theme="dark"] #resultModal #historyImageActionStatus[data-kind="success"] { color: #79c9ab; }
@keyframes history-image-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
    #resultModal .history-image-footer-row { align-items: stretch; flex-direction: column; gap: 12px; }
    #resultModal .modal-footer-actions { justify-content: flex-end; }
}
@media (max-width: 560px) {
    #resultModal { padding: 10px; }
    #resultModal .modal-content { height: calc(100vh - 20px); height: calc(100dvh - 20px); border-radius: 16px; }
    #resultModal .modal-header { padding: 18px 16px 12px; }
    #resultModal .modal-body { padding: 0 10px 10px; }
    #resultModal .history-image-toolbar { gap: 8px; padding: 10px 2px; }
    #resultModal .history-image-info, #resultModal .history-image-view { gap: 8px; font-size: 10px; }
    #resultModal #historyImageTaskId { display: none; }
    #resultModal .image-preview-stage { padding: 10px; }
    #resultModal .modal-footer { padding: 12px; }
    #resultModal .modal-footer-actions { width: 100%; flex-wrap: wrap; gap: 10px; }
    #resultModal .history-image-download { flex: 1; }
    #resultModal .history-image-send-group { width: 100%; order: -1; border-left: 0; padding-left: 0; gap: 6px; }
    #resultModal .history-image-send { flex: 1; padding: 0 6px; font-size: 11px; gap: 6px; }
    #resultModal .history-image-send img { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { #resultModal .history-image-loading i { animation: none; } }