/* ==========================================================================
   Dimo Imagine — "My gallery" (templates/imagine/gallery.html)
   Builds on imagine_explore.css (viewer, chips, buttons, empty state).
   ========================================================================== */

.myg { max-width: 80rem; margin: 0 auto; }
.myg svg, .myg-selbar svg, .myg-viewer svg, .myg-snack svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── header + stats ───────────────────────────────────────────────── */
.myg-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.myg-head .page-title { margin-bottom: .55rem; }
.myg-head__sub { font-size: .85rem; color: var(--color-text-muted); line-height: 1.8; }
.myg-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.myg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.25rem; }
@media (max-width: 640px) { .myg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.myg-stat { display: flex; align-items: center; gap: .75rem; padding: .8rem .95rem; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--border-subtle); transition: border-color .2s; }
a.myg-stat:hover { border-color: rgb(var(--primary-rgb) / .45); }
.myg-stat__txt { display: grid; gap: .1rem; min-width: 0; }
.myg-stat__ico { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: var(--radius); background: rgb(var(--primary-rgb) / .1); color: rgb(var(--primary-ink-rgb)); }
.myg-stat__ico--heart { background: rgb(244 63 94 / .1); color: #f43f5e; }
.myg-stat b { font-size: 1.15rem; font-weight: 800; line-height: 1.2; text-align: start; }
.myg-stat small { font-size: .7rem; color: var(--color-text-muted); }

/* ── jobs still rendering ─────────────────────────────────────────── */
.myg-active { margin-bottom: 1.25rem; padding: .9rem 1rem; border-radius: var(--radius-lg); border: 1px solid rgb(var(--primary-rgb) / .3); background: linear-gradient(180deg, rgb(var(--primary-rgb) / .07), transparent), var(--color-surface); }
.myg-active__head { display: flex; align-items: center; gap: .55rem; font-size: .85rem; margin-bottom: .7rem; }
.myg-active__ready { margin-inline-start: auto; font-size: .75rem; font-weight: 700; padding: .4rem .8rem; border-radius: 999px; background: rgb(var(--primary-rgb)); color: var(--color-text-on-primary); animation: myg-in .3s var(--ease-out); }
.myg-pulse { width: .55rem; height: .55rem; border-radius: 50%; background: rgb(var(--primary-rgb)); box-shadow: 0 0 0 0 rgb(var(--primary-rgb) / .6); animation: myg-pulse 1.6s infinite; }
@keyframes myg-pulse { 70% { box-shadow: 0 0 0 .5rem rgb(var(--primary-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--primary-rgb) / 0); } }
.myg-active__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .5rem; }
.myg-job { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .6rem .75rem .8rem; border-radius: var(--radius); background: var(--color-bg-dark); border: 1px solid var(--border-subtle); overflow: hidden; }
.myg-job p { font-size: .76rem; color: var(--color-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.myg-job__kind { font-size: .65rem; padding: .12rem .5rem; border-radius: 999px; background: var(--color-hover-strong); color: var(--color-text-muted); white-space: nowrap; }
.myg-job__clock { font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.myg-job__bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--color-hover-strong); overflow: hidden; }
.myg-job__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 35%; background: rgb(var(--primary-rgb)); animation: myg-indeterminate 1.5s ease-in-out infinite; }
.myg-job__bar.has-progress i { animation: none; transition: width .6s var(--ease-out); }
@keyframes myg-indeterminate { 0% { transform: translateX(110%); } 100% { transform: translateX(-310%); } }
.myg-job.is-done .myg-job__bar i { width: 100% !important; animation: none; }
.myg-job.is-done .myg-job__clock { color: rgb(var(--primary-ink-rgb)); font-weight: 700; }
.myg-job.is-failed .myg-job__bar i { width: 100% !important; animation: none; background: #ef4444; }
.myg-job.is-failed .myg-job__clock { color: #f87171; }

/* ── toolbar ──────────────────────────────────────────────────────── */
.myg-bar { position: sticky; top: calc(var(--header-h, 64px) + .25rem); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .55rem; margin-bottom: 1.25rem; border-radius: var(--radius-lg); background: var(--color-surface-translucent); backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); }
.myg-search { position: relative; flex: 1 1 14rem; }
.myg-search svg { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); color: var(--color-text-subtle); pointer-events: none; }
.myg-search input { width: 100%; padding: .55rem .8rem; padding-inline-start: 2.3rem; border-radius: var(--radius); font-size: .8rem; background: var(--color-bg-dark); border: 1px solid var(--border-subtle); color: var(--color-text-main); }
.myg-search input:focus { outline: none; border-color: rgb(var(--primary-rgb) / .55); }
.myg-chips { display: flex; gap: .3rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.myg-chip { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .75rem; padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--border-subtle); color: var(--color-text-muted); transition: border-color .15s, color .15s, background .15s; }
.myg-chip span { font-size: .66rem; opacity: .7; }
.myg-chip:hover { color: var(--color-text-main); border-color: var(--border-strong); }
.myg-chip.is-on { color: rgb(var(--primary-ink-rgb)); border-color: rgb(var(--primary-rgb) / .5); background: rgb(var(--primary-rgb) / .08); }
.myg-chip svg { width: .85rem; height: .85rem; }
.myg-select-btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; padding: .45rem .8rem; border-radius: var(--radius); border: 1px solid var(--border-subtle); color: var(--color-text-muted); white-space: nowrap; }
.myg-select-btn:hover, .myg-select-btn.is-on { color: rgb(var(--primary-ink-rgb)); border-color: rgb(var(--primary-rgb) / .5); }
.myg-select-btn.is-on { background: rgb(var(--primary-rgb) / .08); }
@media (max-width: 640px) {
    .myg-bar { position: static; }
    .myg-search { flex-basis: 100%; }
    .myg-chips { flex: 1; }
}

/* ── sections + tiles ─────────────────────────────────────────────── */
.myg-section { margin-bottom: 1.75rem; }
.myg-section__title { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 700; margin-bottom: .75rem; color: var(--color-text-main); }
.myg-section__title span { font-size: .68rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; background: var(--color-hover-strong); color: var(--color-text-muted); }
.myg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .75rem; }
@media (max-width: 520px) { .myg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } }

.myg-tile { position: relative; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-dark); border: 1px solid var(--border-subtle); cursor: zoom-in; outline: none; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .2s; }
.myg-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.myg-tile:focus-visible { outline: 2px solid rgb(var(--primary-rgb) / .75); outline-offset: 2px; }
.myg-tile__media { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; }
.myg-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.myg-tile:hover .myg-tile__media img { transform: scale(1.04); }
.myg-tile--audio .myg-tile__media, .myg-tile--speech .myg-tile__media, .myg-tile__media.is-broken {
    background: radial-gradient(120% 90% at 30% 10%, rgb(var(--primary-rgb) / .22), transparent 60%), var(--color-raised);
}
.myg-tile--speech .myg-tile__media { background: radial-gradient(120% 90% at 70% 10%, rgb(45 212 191 / .2), transparent 60%), var(--color-raised); }
.myg-tile__audio-label { font-size: .72rem; color: var(--color-text-muted); }
.myg-tile__play { position: absolute; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: rgb(0 0 0 / .5); color: #fff; backdrop-filter: blur(4px); }
.myg-tile__play svg { width: 1.05rem; height: 1.05rem; fill: currentColor; stroke: none; margin-left: 3px; }

.myg-tile__badge { position: absolute; top: .5rem; inset-inline-start: .5rem; display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; backdrop-filter: blur(6px); }
.myg-tile__badge svg { width: .75rem; height: .75rem; fill: #f43f5e; stroke: #f43f5e; }

.myg-tile__overlay { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; gap: .5rem; padding: 2.5rem .6rem .6rem; background: linear-gradient(to top, rgb(0 0 0 / .82), rgb(0 0 0 / .45) 55%, transparent); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .25s var(--ease-out); }
.myg-tile:hover .myg-tile__overlay, .myg-tile:focus-within .myg-tile__overlay { opacity: 1; transform: none; }
.myg-tile__overlay p { font-size: .72rem; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.myg-tile__actions { display: flex; gap: .3rem; }
.myg-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--radius-sm); background: rgb(255 255 255 / .14); color: #fff; backdrop-filter: blur(6px); transition: background .15s; }
.myg-icon:hover { background: rgb(var(--primary-rgb) / .85); color: var(--color-text-on-primary); }
.myg-icon:disabled { opacity: .5; }
.myg-icon svg { width: .95rem; height: .95rem; }
/* Touch screens have no hover: the viewer carries every action there. */
@media (hover: none) { .myg-tile__overlay { display: none; } }

/* selection */
.myg-tile__check { position: absolute; top: .5rem; inset-inline-end: .5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: none; place-items: center; border: 2px solid #fff; background: rgb(0 0 0 / .35); color: transparent; }
.myg-tile__check svg { width: .85rem; height: .85rem; stroke-width: 2.6; }
.myg.is-selecting .myg-tile { cursor: pointer; }
.myg.is-selecting .myg-tile__check { display: grid; }
.myg.is-selecting .myg-tile__overlay { display: none; }
.myg-tile.is-selected { border-color: rgb(var(--primary-rgb)); box-shadow: 0 0 0 2px rgb(var(--primary-rgb)); }
.myg-tile.is-selected .myg-tile__check { background: rgb(var(--primary-rgb)); border-color: rgb(var(--primary-rgb)); color: var(--color-text-on-primary); }
.myg-tile.is-selected .myg-tile__media { transform: scale(.94); border-radius: var(--radius); overflow: hidden; }
.myg-tile__media { transition: transform .2s var(--ease-out); }

.myg-selbar { position: fixed; z-index: 1050; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .45rem; padding: .5rem .55rem .5rem .9rem; border-radius: 999px; background: var(--color-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); animation: myg-up .3s var(--ease-out); max-width: calc(100vw - 1.5rem); }
.myg-selbar[hidden] { display: none; }
.myg-selbar > span { font-size: .78rem; font-weight: 700; padding-inline: .3rem .5rem; white-space: nowrap; }
.myg-selbar .exp-btn { border-radius: 999px; }
.myg-selbar .exp-btn:disabled { opacity: .45; pointer-events: none; }
.myg-selbar__close { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; color: var(--color-text-muted); }
.myg-selbar__close:hover { background: var(--color-hover-strong); color: var(--color-text-main); }
.myg-danger { color: #f87171 !important; }
.myg-danger:hover { border-color: rgb(248 113 113 / .5) !important; background: rgb(248 113 113 / .08) !important; }
@media (max-width: 767.98px) { .myg-selbar { bottom: 6.5rem; } }
@media (max-width: 479.98px) {
    .myg-selbar { gap: .3rem; padding: .4rem .4rem .4rem .6rem; }
    .myg-selbar > span { padding-inline: .1rem .2rem; }
    .myg-selbar .exp-btn { padding-inline: .6rem; font-size: .74rem; white-space: nowrap; }
}
@keyframes myg-up { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes myg-in { from { opacity: 0; transform: scale(.95); } }

/* ── failed jobs ──────────────────────────────────────────────────── */
.myg-failed { margin-top: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--color-surface); }
.myg-failed summary { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; font-size: .8rem; color: var(--color-text-muted); cursor: pointer; list-style: none; }
.myg-failed summary::-webkit-details-marker { display: none; }
.myg-failed summary svg:first-child { color: #f87171; }
.myg-failed__chev { margin-inline-start: auto; transition: transform .2s; }
.myg-failed[open] .myg-failed__chev { transform: rotate(180deg); }
.myg-failed ul { display: grid; gap: .4rem; padding: 0 1rem 1rem; }
.myg-failed li { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border-radius: var(--radius); background: var(--color-bg-dark); }
.myg-failed li > div { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem .5rem; align-items: center; }
.myg-failed li p { grid-column: 1 / -1; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myg-failed li small { grid-column: 1 / -1; font-size: .7rem; color: #f87171; line-height: 1.7; }
.myg-failed__date { font-size: .68rem; color: var(--color-text-subtle); }

.myg-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

/* ── viewer additions ─────────────────────────────────────────────── */
.myg-viewer__stage { position: relative; }
.myg-viewer__stage [data-stage] { display: grid; place-items: center; width: 100%; height: 100%; }
.myg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .5); color: #fff; backdrop-filter: blur(6px); transition: background .15s; }
.myg-nav:hover { background: rgb(0 0 0 / .75); }
.myg-nav[hidden] { display: none; }
.myg-nav svg { width: 1.2rem; height: 1.2rem; }
.myg-nav--prev { inset-inline-start: .75rem; }
.myg-nav--next { inset-inline-end: .75rem; }
.myg-viewer__pos { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); font-size: .7rem; padding: .15rem .55rem; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; }
.myg-viewer__pos:empty { display: none; }
.myg-viewer__label { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; font-weight: 600; color: var(--color-text-subtle); }
.myg-viewer__label button { font-size: .72rem; color: rgb(var(--primary-ink-rgb)); }
.myg-viewer__facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; font-size: .72rem; color: var(--color-text-muted); }
.myg-viewer__facts b { font-weight: 500; font-family: ui-monospace, monospace; color: var(--color-text-main); text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myg-viewer .exp-viewer__actions .exp-btn[hidden] { display: none; }

.myg-public__cta { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .75rem .85rem; border-radius: var(--radius); text-align: start; border: 1px dashed rgb(var(--primary-rgb) / .5); background: rgb(var(--primary-rgb) / .05); color: rgb(var(--primary-ink-rgb)); transition: background .15s; }
.myg-public__cta:hover { background: rgb(var(--primary-rgb) / .1); }
.myg-public__cta:disabled { opacity: .6; }
.myg-public__cta svg { width: 1.2rem; height: 1.2rem; }
.myg-public__cta span { display: grid; gap: .15rem; }
.myg-public__cta b { font-size: .8rem; }
.myg-public__cta small { font-size: .68rem; color: var(--color-text-muted); line-height: 1.6; }
.myg-public__on { display: flex; align-items: center; gap: .55rem; padding: .65rem .8rem; border-radius: var(--radius); font-size: .76rem; border: 1px solid rgb(var(--primary-rgb) / .35); background: rgb(var(--primary-rgb) / .07); }
.myg-public__on > span:nth-child(2) { flex: 1; }
.myg-public__on a { color: rgb(var(--primary-ink-rgb)); font-weight: 600; }
.myg-public__on button { color: var(--color-text-muted); }
.myg-public__on button:hover { color: #f87171; }
.myg-public__dot { width: .5rem; height: .5rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgb(34 197 94 / .2); }
.myg-public__note { font-size: .74rem; color: var(--color-text-muted); padding: .6rem .8rem; border-radius: var(--radius); background: var(--color-bg-dark); }

/* ── undo snackbar ────────────────────────────────────────────────── */
.myg-snack { position: fixed; z-index: 1300; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; padding: .7rem .8rem .7rem 1.1rem; border-radius: var(--radius); background: #111216; color: #f4f4f5; font-size: .8rem; box-shadow: var(--shadow-lg); border: 1px solid rgb(255 255 255 / .1); animation: myg-up .3s var(--ease-out); transition: opacity .3s; max-width: calc(100vw - 1.5rem); }
.myg-snack button { font-weight: 700; color: rgb(var(--primary-rgb)); padding: .2rem .4rem; white-space: nowrap; }
.myg-snack.is-out { opacity: 0; }
@media (max-width: 767.98px) { .myg-snack { bottom: 6.5rem; } }