.hodhod-image-viewer{width:min(1120px,calc(100vw - 48px));max-width:none;height:min(900px,calc(100dvh - 48px));max-height:none;padding:0;border:1px solid #ffffff24;border-radius:26px;background:#101923;color:#f0f5fb;box-shadow:0 30px 100px #0008;overflow:hidden;font-family:Vazirmatn,sans-serif}
.hodhod-image-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}.hodhod-image-viewer::backdrop{background:#07111dd9;backdrop-filter:blur(12px)}.image-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;border-bottom:1px solid #ffffff17}.image-viewer-head h2{margin:0;font-size:17px;font-weight:650}.image-viewer-head small{display:block;font-size:10px;color:#aabbd0;margin-top:6px}.image-viewer-head>.image-viewer-action{width:40px;height:40px;padding:0;justify-content:center}.image-viewer-head>.image-viewer-action span{display:none}.image-viewer-stage{display:flex;align-items:center;justify-content:center;overflow:auto;min-height:0;padding:20px;background:radial-gradient(ellipse at center,#1d2e43,#0c141e)}.image-viewer-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 10px 40px #0006;cursor:zoom-in}.image-viewer-stage.is-zoomed{display:block}.image-viewer-stage.is-zoomed img{cursor:zoom-out;height:auto;max-height:none;max-width:none}.image-viewer-toolbar{display:flex;align-items:center;gap:8px;padding:14px 20px;border-top:1px solid #ffffff17;flex-wrap:wrap}.image-viewer-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #ffffff20;background:#ffffff09;color:inherit;border-radius:12px;padding:10px 14px;font:inherit;font-size:12px;cursor:pointer;transition:background .2s,transform .2s}.image-viewer-action svg{width:19px;height:19px;flex-shrink:0}.image-viewer-action:hover{background:#ffffff1a}.image-viewer-action:active{transform:scale(.97)}.image-viewer-action:focus-visible,.image-result-preview:focus-visible{outline:3px solid #a1bcff;outline-offset:3px}.image-viewer-zoom{margin-inline-start:auto;display:flex;gap:6px}.image-viewer-zoom .image-viewer-action{width:38px;height:38px;padding:0}.image-viewer-zoom .image-viewer-action span{display:none}.image-viewer-status{font-size:11px;line-height:1.9;color:#c1cfdf;min-height:0;margin:0;padding:0 20px 12px}.image-viewer-status:empty{padding:0}
html[data-theme=light] .hodhod-image-viewer{background:#fff;color:#1b3049;border-color:#dce5ee}.image-viewer-head .image-viewer-action{flex-shrink:0}html[data-theme=light] .image-viewer-head small{color:#5b6d83}html[data-theme=light] .image-viewer-head,html[data-theme=light] .image-viewer-toolbar{border-color:#e0e6ee}html[data-theme=light] .image-viewer-action{border-color:#d9e2ec;background:#f5f7fb}html[data-theme=light] .image-viewer-action:hover{background:#e7eef8}html[data-theme=light] .image-viewer-status{color:#526579}
html[data-theme] body.hodhod-v2 .image-result-card{display:block;width:min(100%,520px);margin:14px 0;border:1px solid var(--b-line,#d9e2ec);border-radius:22px;background:var(--b-paper,#fff);overflow:hidden}.image-result-preview{display:block;position:relative;width:100%;border:0;padding:0;background:transparent;cursor:zoom-in;overflow:hidden}.image-result-preview img{display:block;width:100%;max-height:620px;object-fit:contain;border-radius:0!important;margin:0!important;transition:transform .45s}.image-result-preview:hover img{transform:scale(1.015)}.image-result-hint{position:absolute;bottom:14px;left:14px;font-size:11px;background:#101c32bc;color:white;padding:7px 12px;border-radius:20px;backdrop-filter:blur(8px)}.image-result-card figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px}.image-result-card figcaption>span{font-size:10px;color:var(--b-muted,#526579)}.image-result-actions{display:flex;gap:6px}.image-result-actions .image-viewer-action{padding:8px;border:0;background:transparent!important;color:var(--b-ink,#182d43)!important}.image-result-actions .image-viewer-action span{display:none}.image-result-actions .image-viewer-action:hover{background:var(--b-soft,#edf2f7)!important}.image-generation-slide{font-size:13px;line-height:2;min-height:4em;color:var(--b-ink,#182d43);margin:0;padding:12px 14px;border-inline-start:2px solid #9c90d5;border-radius:10px;background:var(--b-soft,#edf2f7)}
@media(max-width:600px){.hodhod-image-viewer{width:100vw;height:100dvh;border:0;border-radius:0;margin:0;max-width:100vw;max-height:100dvh}.image-viewer-head{padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top))}.image-viewer-head h2{font-size:15px}.image-viewer-stage{padding:8px}.image-viewer-toolbar{gap:6px;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.image-viewer-toolbar>.image-viewer-action{flex:1;font-size:11px;padding:11px 8px}.image-viewer-toolbar>.image-viewer-action span{white-space:nowrap}.image-viewer-zoom{justify-content:center;width:100%;margin:2px 0 0}.image-viewer-status{padding-inline:15px;font-size:11px}.image-result-card figcaption{padding:10px 12px}.image-generation-slide{font-size:12px}}
@media(prefers-reduced-motion:reduce){.image-viewer-action,.image-result-preview img{transition:none}}