/* ===== Telegram-style fullscreen avatar viewer (see modules/avatarviewer.js) =====
   Layers, bottom to top: backdrop → viewport (paging track with the photos) → topbar/dots
   → the single morph <img> that animates between the source circle and the fullscreen photo. */
.av-root{position:fixed;inset:0;z-index:11000;display:none}
.av-backdrop{position:absolute;inset:0;background:#000;opacity:0;will-change:opacity}
.av-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;overscroll-behavior:contain;will-change:transform,opacity}
.av-track{display:flex;width:100%;height:100%;will-change:transform}
.av-slide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.av-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transform-origin:center center;will-change:transform}
.av-img.zoomed{cursor:grab}
.av-topbar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;color:#fff;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0));transition:opacity .2s ease}
.av-counter{font-size:13px;font-weight:700;opacity:.9;flex-shrink:0}
.av-title{font-size:14px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-btn{background:rgba(255,255,255,.12);border:none;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;flex-shrink:0;font-family:inherit}
.av-btn:hover{background:rgba(255,255,255,.22)}
.av-dots{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:3;display:flex;justify-content:center;gap:6px;transition:opacity .2s ease;pointer-events:none}
.av-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.av-dot.active{background:#fff;width:7px;height:7px}
/* The morphing element: position/size/radius are driven from JS, nothing here animates by itself. */
.av-morph{position:absolute;z-index:4;display:none;object-fit:cover;background:var(--bg-tertiary);will-change:left,top,width,height,border-radius}