/* The gallery (js/gallery.js): photos, GIFs, links and voice shared in a chat. It slides over the chat pane and keeps the chat's tint */
.galp{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;padding-top:inherit;background:var(--night);transform:translateX(100%);visibility:hidden;transition:transform .32s cubic-bezier(.3,.7,.2,1),visibility 0s .32s}
.galp.on{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.3,.7,.2,1),visibility 0s}
.device.tablet .galp{transform:translateX(36px);opacity:0;transition:transform .28s cubic-bezier(.3,.7,.2,1),opacity .2s,visibility 0s .28s}
.device.tablet .galp.on{transform:none;opacity:1;transition:transform .28s cubic-bezier(.3,.7,.2,1),opacity .2s,visibility 0s}
.app.grad .galp{background:radial-gradient(130% 55% at 100% 0%,color-mix(in srgb,var(--hush2,#5a5a66) 26%,transparent),transparent 62%),radial-gradient(110% 50% at 0% 100%,color-mix(in srgb,var(--hush,#4a4a52) 20%,transparent),transparent 65%),linear-gradient(180deg,color-mix(in srgb,var(--hush,#3a3a3e) 10%,#18181b),#111113)}
@media (prefers-reduced-motion:reduce){.galp,.galp.on,.device.tablet .galp,.device.tablet .galp.on{transition:visibility 0s,opacity .12s;transform:none}}
.galp,.galp button{user-select:none;-webkit-user-select:none}

.gal-head{display:flex;align-items:center;gap:12px;padding:8px 14px 10px}
.gal-head .who{min-width:0;flex:1}
.gal-head .name{font-family:var(--display);font-weight:600;font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-head .meta{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-head .back{transition:background .15s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.gal-head .back:hover{background:rgba(255,255,255,.08)}
.gal-head .back:active{transform:scale(.88);transition-duration:.06s}
.device.tablet .gal-head{padding:12px 24px 10px}

/* Three tabs with a soft pill that slides between them */
.gal-tabs{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:2px 16px 0;padding:4px;border-radius:18px;background:color-mix(in srgb,var(--raise) 85%,transparent)}
.device.tablet .gal-tabs{margin:2px 24px 0;max-width:520px}
.gal-ink{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/4);border-radius:14px;background:var(--hush);transform:translateX(calc(var(--i,0)*100%));transition:transform .34s cubic-bezier(.34,1.3,.5,1)}
@media (prefers-reduced-motion:reduce){.gal-ink{transition:none}}
.gal-tabs button{position:relative;z-index:1;height:38px;border-radius:14px;font-weight:700;font-size:14px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px;transition:color .25s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.gal-tabs button[aria-selected="true"]{color:var(--ink)}
.gal-tabs button:active{transform:scale(.93);transition-duration:.06s}
.gal-tabs small{font-size:11.5px;font-weight:800;opacity:.7}
.gal-tabs small:empty{display:none}
@media (max-width:360px){.gal-tabs{margin:2px 10px 0}.gal-tabs button{font-size:13px;gap:4px}.gal-tabs small{font-size:10.5px}}

/* Shared by: Everyone, You, and each person */
.gal-who{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 16px 2px}
.gal-who::-webkit-scrollbar{display:none}
.gal-who[hidden]{display:none}
.device.tablet .gal-who{padding:10px 24px 2px}
.gal-who button{flex:none;display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:16px;font-size:13px;font-weight:700;color:var(--muted);background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,color .2s,box-shadow .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.gal-who button:has(i){padding-left:4px}
.gal-who i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;color:var(--ink);overflow:hidden}
.gal-who i img{width:100%;height:100%;object-fit:cover}
.gal-who button[aria-pressed="true"]{color:var(--text);background:color-mix(in srgb,var(--hush) 16%,var(--raise));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hush) 45%,transparent)}
.gal-who button:active{transform:scale(.93);transition-duration:.06s}

.gal-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px calc(28px + env(safe-area-inset-bottom));position:relative}
.device.tablet .gal-body{padding:6px 24px 36px}
.gal-pg.in{animation:galIn .24s cubic-bezier(.3,.7,.2,1) both}
@keyframes galIn{from{opacity:0;transform:translateY(8px)}}
.gal-mo{font-family:var(--display);font-weight:600;font-size:15px;color:color-mix(in srgb,var(--text) 82%,var(--muted));margin:16px 2px 8px;letter-spacing:.01em}
.gal-foot{text-align:center;font-size:12.5px;color:var(--muted);margin:18px 0 0}

/* The photo grid */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.device.tablet .gal-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.gal-t{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--hush) 9%,var(--raise));transition:transform .22s cubic-bezier(.34,1.56,.64,1),filter .2s}
.gal-t img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.04);transition:opacity .3s ease-out,transform .4s cubic-bezier(.3,.7,.2,1)}
.gal-t.ok img{opacity:1;transform:none}
.gal-t.now img,.gal-st.now img{transition:none}
.gal-t:not(.ok):not(.off)::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);background-size:220% 100%;animation:galShim 1.4s linear infinite}
@keyframes galShim{from{background-position:120% 0}to{background-position:-100% 0}}
.gal-t:hover{filter:brightness(1.08)}
.gal-t:active{transform:scale(.95);transition-duration:.06s}
.gal-t.off,.gal-st.off{display:grid;place-items:center;color:var(--muted)}
.gal-t.off svg{width:26px;height:26px;opacity:.6}
.gal-q{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff}
.gal-q svg{width:14px;height:14px}
.gal-pg.in .gal-t{animation:galTile .32s cubic-bezier(.3,.7,.2,1) both;animation-delay:calc(var(--d,0)*14ms)}
@keyframes galTile{from{opacity:0;transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){.gal-pg.in,.gal-pg.in .gal-t{animation:none}.gal-t:not(.ok)::after{animation:none}.gal-t img{transition:opacity .15s;transform:none}}

/* Links and voice: rows in a card */
.gal-links,.gal-vlist{background:var(--raise)}
.device.tablet .gal-links,.device.tablet .gal-vlist{max-width:760px}
.gal-link,.gal-voice{display:flex;align-items:center;gap:6px;padding-right:8px}
.gal-link+.gal-link,.gal-voice+.gal-voice{border-top:1px solid var(--line)}
.gal-lk{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:12px 4px 12px 14px;color:inherit;text-decoration:none;border-radius:14px;transition:background .15s,transform .22s cubic-bezier(.34,1.56,.64,1)}
.gal-lk:hover{background:rgba(255,255,255,.04)}
.gal-lk:active{transform:scale(.98);transition-duration:.06s}
.gal-fav{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);background:linear-gradient(140deg,var(--c),color-mix(in srgb,var(--c) 70%,#fff))}
.app:not(.grad) .gal-fav{background:var(--c)}
.gal-lt{min-width:0;display:flex;flex-direction:column;gap:1px}
.gal-lt b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-lt .u{font-size:13px;color:color-mix(in srgb,var(--text) 78%,var(--muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-lt small,.gv-mid small{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-lt small i,.gv-mid small i{width:7px;height:7px;border-radius:50%;flex:none}
.gal-go{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:background .15s,color .15s,transform .22s cubic-bezier(.34,1.56,.64,1)}
.gal-go svg{width:19px;height:19px}
.gal-go:hover{background:rgba(255,255,255,.07);color:var(--text)}
.gal-go:active{transform:scale(.88);transition-duration:.06s}

.gal-voice{padding:10px 8px 10px 12px;gap:12px;align-items:flex-start}
.gal-voice .play{background:var(--c);color:var(--ink);margin-top:2px}
.gal-voice .play:active{transform:scale(.9)}
.gv-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gv-top{display:flex;align-items:center;gap:10px;min-width:0}
.gal-voice .wave{flex:1;min-width:0;max-width:300px;overflow:hidden;height:30px;justify-content:space-between}
.gal-voice .wave b{background:color-mix(in srgb,var(--muted) 70%,transparent)}
.gal-voice .wave b.on{background:var(--c)}
.gal-voice .dur{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted);flex:none}
.gal-voice .gal-go{margin-top:1px}
.gv-tx{display:block;font-size:13px;line-height:1.4;color:color-mix(in srgb,var(--text) 80%,var(--muted));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:none;padding:2px 0 0;background:none;border-radius:0}
.gv-tx.wait{font-style:italic;opacity:.7}
.gv-tx.hl .w{opacity:.6;transition:opacity .25s}.gv-tx.hl .w.cur,.gv-tx.hl .w.lit{opacity:1}
.app.notext .gv-tx{display:none}

.gal-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 28px 20px;color:var(--muted)}
.gal-eic{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:color-mix(in srgb,var(--hush) 12%,var(--raise));color:var(--hush);margin-bottom:14px;animation:galBob 3.2s ease-in-out infinite}
.gal-eic svg{width:30px;height:30px}
.gal-gifi{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.04em}
@keyframes galBob{50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.gal-eic{animation:none}}
.gal-empty h3{margin:0 0 6px;font-family:var(--display);font-weight:600;font-size:19px;color:var(--text)}
.gal-empty p{margin:0;max-width:280px;font-size:14px;line-height:1.45}

/* The card in a friend's profile and in group info */
.gal-card{display:block;width:100%;text-align:left;transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .15s}
.gal-card:active{transform:scale(.98);transition-duration:.06s}
.gal-card:hover{background:color-mix(in srgb,var(--hush) 5%,var(--night))}
.gal-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:10px 10px 0;position:relative}
.gal-st{aspect-ratio:1;border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--hush) 9%,var(--raise))}
.gal-st img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
.gal-st.ok img{opacity:1}
.gal-st.off svg{width:20px;height:20px;opacity:.5}
.gal-more{position:absolute;right:16px;bottom:6px;font-size:12px;font-weight:800;padding:2px 8px;border-radius:9px;background:rgba(0,0,0,.6);color:#fff}
.gal-card .srow .lab{flex:1;min-width:0}
.gal-card .srow .lab small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;margin-top:1px}
.gal-chev{font-size:22px;color:var(--muted);line-height:1;transition:transform .2s}
.gal-card:hover .gal-chev{transform:translateX(2px)}
.gal-card .qi svg{width:18px;height:18px}

/* The photo viewer, opened from here: swipe or use the arrows to see the next one, and Show in chat */
.vw-nav{position:absolute;top:50%;z-index:3;width:46px;height:46px;margin-top:-23px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;opacity:0;pointer-events:none;transition:opacity .2s,background .15s,transform .22s cubic-bezier(.34,1.56,.64,1)}
.vw-nav svg{width:22px;height:22px}
.vw-nav.prev{left:14px}.vw-nav.next{right:14px}
.viewer.many .vw-nav:not([disabled]){opacity:1;pointer-events:auto}
.viewer.many .vw-nav[disabled]{opacity:.25}
.vw-nav:hover{background:rgba(255,255,255,.22)}
.vw-nav:active{transform:scale(.9);transition-duration:.06s}
.device.phone .vw-nav{display:none}
.device.tablet .viewer.many .vw-stage{padding-left:76px;padding-right:76px}
.viewer.bare .vw-nav,.viewer.bare .vw-count{opacity:0!important;pointer-events:none}
.vw-count{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;padding:4px 11px;border-radius:12px;background:rgba(0,0,0,.5);color:rgba(255,255,255,.85);transition:opacity .2s;pointer-events:none}
.vw-count[hidden]{display:none}
.vw-b[hidden]{display:none}
#vwJump svg{width:19px;height:19px}