/* «عرض الصور في الشات (بشكل جروك بوت)» — public/chat-album.js. Every colour / size reads the --album-* tokens in
   theme-tokens.css (light + dark); buttons are the standard .btn / .icon-btn / .badge from theme-components.css (layout only here). */
.ca{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:100%;margin:2px 0 var(--space-1)}
.mwrap.user .ca{align-items:flex-end}
.ca [data-ca]{cursor:zoom-in;-webkit-tap-highlight-color:transparent;outline:0}
.ca [data-ca]:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--album-radius)}
/* A — the fanned deck: the top card straight, up to three behind it tilted toward the middle of the chat (the app lays the chat
   out bot-left / owner-right in every language, so a bot deck fans right and the owner's own deck fans left) */
.ca-stk{--s:1;--f:1;position:relative;height:calc(var(--album-card-h) + var(--space-3));width:calc(var(--album-card-w) + var(--album-spread))}
.ca-stk[data-n="3"]{width:calc(var(--album-card-w) + var(--album-shift) + var(--album-spread))}
.ca-stk[data-n="4"]{width:calc(var(--album-card-w) + var(--album-shift) * 2 + var(--album-spread))}
.ca-card{--k:0;position:absolute;top:0;left:0;width:var(--album-card-w);height:var(--album-card-h);border-radius:var(--album-radius);overflow:hidden;
  background:var(--album-card-bg);border:.5px solid var(--album-card-border);box-shadow:var(--album-card-shadow);transform-origin:0 100%;
  transform:translateX(calc(var(--s) * var(--album-shift) * var(--k) * var(--f))) rotate(calc(var(--s) * var(--album-tilt) * var(--k) * var(--f)));
  transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.ca-c0{z-index:4}.ca-c1{--k:1;z-index:3}.ca-c2{--k:2;z-index:2}.ca-c3{--k:3;z-index:1}
/* swipe through the deck in the chat: vertical drags still scroll the chat; pictures past the 4th wait hidden behind */
.ca-stk{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ca-cx{--k:3;z-index:0;opacity:0;pointer-events:none}
.ca-card:not(.ca-c0) .ca-name,.ca-card:not(.ca-c0) .ca-fail{display:none}
.ca-card:not(.ca-c0).ca-ld{animation:none}
.mwrap.user .ca-stk{--s:-1}
.mwrap.user .ca-card{left:auto;right:0;transform-origin:100% 100%}
@media (hover:hover){.ca-stk:hover{--f:1.45}}
.ca-stk:active{--f:.8}
.ca-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;user-select:none;-webkit-user-drag:none;transition:opacity .25s}
.ca-on{box-shadow:0 0 0 2px var(--album-on-ring),var(--album-card-shadow)}
/* «لوحة القرار» letter badge + the option name on the top card */
.ca-letter{position:absolute;top:var(--space-2);inset-inline-end:var(--space-2);width:var(--album-letter);height:var(--album-letter);border-radius:50%;
  background:var(--album-letter-bg);color:var(--album-letter-ink);box-shadow:0 0 0 2px var(--album-letter-ring);display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);line-height:1}
.ca-name{position:absolute;bottom:var(--space-2);inset-inline-start:var(--space-2);max-width:calc(100% - var(--space-4));height:24px;padding:0 10px;border-radius:var(--radius-pill);
  background:var(--album-chip-bg);color:var(--album-chip-ink);box-shadow:var(--album-chip-shadow);font-size:var(--fs-xs);font-weight:var(--fw-bold);display:flex;align-items:center;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* ONE picture: its own ratio (no crop), clamped; a very tall / wide one fits inside the frame with a hint */
.ca-single{position:relative;width:min(var(--album-one-w),78vw,calc(var(--album-one-h) * var(--ca-ratio,1.3333)));aspect-ratio:var(--ca-ratio,var(--album-ratio));
  border-radius:var(--album-radius);overflow:hidden;background:var(--album-card-bg);border:.5px solid var(--album-card-border);box-shadow:var(--album-card-shadow)}
.ca-single img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none;transition:opacity .25s}
.ca-fit img{object-fit:contain;background:var(--album-view-frame)}
.ca-hint{position:absolute;bottom:var(--space-2);inset-inline-start:var(--space-2);padding:3px 10px;border-radius:var(--radius-pill);background:var(--album-chip-bg);color:var(--album-chip-ink);
  font-size:var(--fs-xxs);font-weight:var(--fw-bold);box-shadow:var(--album-chip-shadow)}
.ca-hint[hidden]{display:none}
/* loading: a soft shimmer instead of an empty grey box; error: a clear message + «أعد المحاولة» */
.ca-ld{background:var(--album-shimmer);background-size:220% 100%;animation:caShim 1.3s linear infinite}
.ca-ld img,.ca-bad img{opacity:0}
@keyframes caShim{from{background-position:120% 0}to{background-position:-120% 0}}
.ca-fail{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);text-align:center;
  background:var(--album-fail-bg);border:1px dashed var(--album-fail-border);border-radius:inherit;color:var(--text3);font-size:var(--fs-sm)}
.ca-fail svg{width:24px;height:24px}
.ca-bad .ca-fail{display:flex}
.ca-bad{cursor:default}
.ca-single.ca-bad{width:min(var(--album-card-w),78vw);aspect-ratio:auto;height:calc(var(--album-card-h) / 2)}
.ca-cap{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text3);max-width:min(86vw,var(--album-one-w));line-height:1.45;unicode-bidi:plaintext}
.ca-cap svg{width:15px;height:15px;flex:none}
.ca-chosen svg{width:14px;height:14px}
.ca-pos{font-variant-numeric:tabular-nums}
.ca-pos:before{content:"\00b7";margin-inline-end:6px}
.ca-dots{display:flex;gap:5px;align-items:center;padding-inline:var(--space-2)}
.mwrap.user .ca-dots{align-self:flex-end}
.ca-dots i{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--album-view-dot);transition:width .2s,background .2s}
.ca-dots i.on{width:16px;background:var(--album-view-dot-on)}

/* the viewer: full screen, white by day / near-black at night, the picture is never cropped */
.cav{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--album-view-bg);color:var(--album-view-ink);opacity:0;transition:opacity .16s ease;outline:0;overscroll-behavior:contain}
.cav.cav-in{opacity:var(--cav-fade,1)}
.cav.cav-out{opacity:0}
.cav-top{display:grid;grid-template-columns:var(--icon-btn) 1fr var(--icon-btn);align-items:center;gap:var(--space-2);padding:calc(var(--space-3) + var(--st)) var(--space-4) var(--space-2)}
.cav-sp{width:var(--icon-btn)}
.cav-title{justify-self:center;display:flex;flex-direction:column;align-items:center;max-width:100%;min-width:0;padding:6px 18px;border-radius:var(--radius-pill);background:var(--album-view-pill);box-shadow:var(--shadow-pill);line-height:1.3}
.cav-title b{font-size:var(--fs-lg);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cav-title small{font-size:var(--fs-xs);color:var(--album-view-sub);max-width:60vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cav-stage{flex:1;min-height:0;position:relative;display:flex;padding:var(--space-2) var(--space-4);overflow:hidden;touch-action:none}
.cav-frame{position:relative;flex:1;align-self:stretch;width:100%;min-height:0}
/* absolutely centred inside a frame of definite size, so max-width / max-height always fit the WHOLE picture (never cropped) */
.cav-frame img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--radius-md);user-select:none;-webkit-user-drag:none;transform-origin:center;will-change:transform;transition:opacity .2s}
.cav-zoomed .cav-frame img{border-radius:0}
.cav-ld img,.cav-bad img{opacity:0}
.cav-spin{display:none;position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;border:3px solid var(--album-view-dot);border-top-color:var(--album-view-dot-on);animation:cavSpin .8s linear infinite}
.cav-ld .cav-spin{display:block}
@keyframes cavSpin{to{transform:rotate(360deg)}}
.cav-err{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);color:var(--album-view-sub);font-size:var(--fs-sm)}
.cav-err svg{width:30px;height:30px}
.cav-bad .cav-err{display:flex}
.cav-nav{position:absolute;top:50%;margin-top:calc(var(--icon-btn) / -2);z-index:2}
.cav-prev{inset-inline-start:var(--space-3)}.cav-next{inset-inline-end:var(--space-3)}
.cav[dir=ltr] .cav-nav svg{transform:scaleX(-1)}
@media (hover:none),(pointer:coarse){.cav-nav{display:none}}
.cav-zoomed .cav-nav{display:none}
.cav-cap{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-1) var(--space-4) 0;text-align:center;line-height:1.45}
.cav-cap b{font-size:var(--fs-lg)}
.cav-cap small{font-size:var(--fs-xs);color:var(--album-view-sub)}
.cav-dots{display:flex;gap:6px;justify-content:center;align-items:center;padding:var(--space-2) 0 0}
.cav-dots i{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--album-view-dot);transition:width .2s}
.cav-dots i.on{width:16px;background:var(--album-view-dot-on)}
.cav-thumbs{display:flex;gap:var(--space-2);justify-content:center;overflow-x:auto;padding:var(--space-2) var(--space-4);scrollbar-width:none}
.cav-thumbs::-webkit-scrollbar{display:none}
/* theme-exempt-start: viewer thumbnails / grid tiles / pins are pictures with a ring, not buttons (special interactive tool) */
.cav-th{flex:none;position:relative;width:var(--album-thumb);height:var(--album-thumb);border-radius:var(--radius-sm);overflow:hidden;opacity:.55;cursor:pointer;background:var(--album-view-frame);transition:opacity .15s,transform .15s}
.cav-th.on{opacity:1;box-shadow:0 0 0 2px var(--album-view-dot-on);transform:scale(1.04)}
.cav-th:focus-visible,.cav-gi:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.cav-th img,.cav-gi img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.cav-th .ca-letter{--album-letter:18px;top:3px;inset-inline-end:3px;font-size:var(--fs-xxs);box-shadow:0 0 0 1.5px var(--album-letter-ring)}
.cav-pin{position:absolute;width:var(--album-pin);height:var(--album-pin);border-radius:50%;background:var(--album-pin-bg);color:var(--album-pin-ink);box-shadow:0 0 0 2px var(--album-pin-ring),var(--album-chip-shadow);
  display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);transform:translate(-50%,-50%);pointer-events:none}
/* theme-exempt-end */
.cav-acts{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;padding:var(--space-2) var(--space-4) calc(var(--space-4) + var(--sb));width:100%;max-width:640px;margin-inline:auto}
.cav-board .cav-acts{padding-bottom:var(--space-2)}
.cav-pick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 var(--space-5) calc(var(--space-4) + var(--sb))}
.cav-pick small{font-size:var(--fs-xxs);color:var(--album-view-sub);text-align:center;max-width:340px;line-height:1.5}
.cav-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* «كل الصور» grid */
.cav-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:var(--space-2);padding:var(--space-2) var(--space-4) calc(var(--space-4) + var(--sb));align-content:start}
.cav-gi{position:relative;aspect-ratio:3/4;border-radius:var(--radius-md);overflow:hidden;background:var(--album-view-frame);cursor:pointer}
.cav-gi.on{box-shadow:0 0 0 2px var(--album-view-dot-on)}
/* «قارن»: side by side / slider / quick toggle */
.cav-tabs{display:flex;gap:6px;justify-content:center;padding:0 var(--space-4) var(--space-2)}
.cav-cmp{padding-top:0}
.cav-cmp-side{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);width:100%;min-height:0}
.cav-cmp-side figure{margin:0;display:flex;flex-direction:column;gap:6px;min-height:0}
.cav-cmp-side .cav-frame{flex:1}
.cav-cmp-side figcaption{text-align:center;font-size:var(--fs-sm);font-weight:var(--fw-bold);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cav-cmp-slider{flex:1;direction:ltr;display:flex;flex-direction:column;gap:var(--space-3);width:100%;min-height:0}
.cav-sl{position:relative;flex:1;min-height:0}
.cav-sl .cav-frame{position:absolute;inset:0}
.cav-over{clip-path:inset(0 var(--cut,50%) 0 0)}
.cav-sl:after{content:"";position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:var(--album-view-dot-on);pointer-events:none}
.cav-sl-tag{position:absolute;top:var(--space-2);z-index:2;width:var(--album-letter);height:var(--album-letter);border-radius:50%;background:var(--album-letter-bg);color:var(--album-letter-ink);display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm)}
.cav-sl-a{left:var(--space-2)}.cav-sl-b{right:var(--space-2)}
.cav-cmp-toggle{position:relative;flex:1;display:flex;width:100%;min-height:0;cursor:pointer;outline:0}
.cav-cmp-toggle:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--radius-md)}
.cav-tg{position:absolute;bottom:var(--space-2);left:50%;transform:translateX(-50%);z-index:2}
.cav-with{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;padding:var(--space-2) var(--space-4) 0;font-size:var(--fs-sm);color:var(--album-view-sub)}
.cav-pick2{padding:var(--space-3) var(--space-4) calc(var(--space-4) + var(--sb));max-width:640px;margin-inline:auto}
/* «علّق»: numbered pins + one note each */
.cav-pinwrap{position:relative;flex:1;display:flex;width:100%;min-height:0}
.cav-pinwrap img{cursor:crosshair}
.cav-pins{position:absolute;inset:0;pointer-events:none;z-index:2}
.cav-notes{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2) var(--space-4) 0;max-height:32vh;overflow-y:auto;width:100%;max-width:640px;margin-inline:auto}
.cav-note{display:flex;align-items:center;gap:var(--space-2)}
.cav-note-in{flex:1;min-width:0}
.cav-note .cav-pin{position:static;transform:none;flex:none}
.cav-empty{margin:var(--space-1) 0;text-align:center;font-size:var(--fs-sm);color:var(--album-view-sub)}
@media (min-width:900px){.cav-stage{padding:var(--space-3) 72px}}
.ca-many .ca-card{transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s}
@media (prefers-reduced-motion:reduce){.ca-dots i,.ca-card,.cav,.cav-th,.cav-dots i,.ca-card img,.ca-single img{transition:none}.ca-ld,.cav-spin{animation:none}}