/* ===== Round 3: family-first, chat, motion ===== */
.av.avimg{overflow:hidden;padding:0}.av.avimg img{width:100%;height:100%;object-fit:cover;display:block}
/* view transitions + press */
::view-transition-old(root){animation:vtOut .18s ease both}::view-transition-new(root){animation:vtIn .28s cubic-bezier(.2,.9,.25,1.1) both}
@keyframes vtOut{to{opacity:0;transform:scale(.985)}}@keyframes vtIn{from{opacity:0;transform:translateY(8px) scale(.99)}}
.ui2 .prs{transform:scale(.96)!important;transition:transform .12s ease!important}
.ui2 button,.ui2 .btn{transition:transform .25s cubic-bezier(.2,.9,.25,1.4),background .2s,box-shadow .2s}
/* bottom sheets on phone for every dialog */
@media(max-width:759px){#modal:not(.palm){align-items:flex-end;padding:0}#modal:not(.palm) .box{width:100%;max-width:none;border-radius:26px 26px 0 0;max-height:88vh;overflow:auto;padding-bottom:calc(22px + env(safe-area-inset-bottom));animation:sheetUp .34s cubic-bezier(.2,.9,.25,1.12)}#modal:not(.palm) .box::before{content:'';display:block;width:42px;height:5px;border-radius:9px;background:color-mix(in srgb,var(--ink) 22%,transparent);margin:-6px auto 12px}}
/* swipe rows */
.row.swr,.fli.swr{box-shadow:inset 6px 0 0 #16a34a;background:color-mix(in srgb,#16a34a 12%,transparent)}.row.swl,.fli.swl{box-shadow:inset -6px 0 0 #f59e0b;background:color-mix(in srgb,#f59e0b 12%,transparent)}
/* undo toast */
#utoast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:90;display:flex;align-items:center;gap:14px;background:#1f2937;color:#fff;padding:10px 10px 10px 16px;border-radius:16px;box-shadow:0 16px 40px -12px rgba(0,0,0,.5);font-weight:800;transition:transform .35s cubic-bezier(.2,.9,.25,1.2),opacity .25s}
#utoast.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}#utoast button{border:0;background:#fb923c;color:#1c0b02;font:inherit;font-weight:900;padding:7px 12px;border-radius:11px}
@media(min-width:760px){#utoast{bottom:28px}}
/* pull to refresh */
#ptr{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translate(-50%,0);opacity:0;z-index:85;width:36px;height:36px;border-radius:50%;background:var(--card);box-shadow:var(--e2,0 6px 16px rgba(0,0,0,.2));display:grid;place-items:center;pointer-events:none}
#ptr i{width:18px;height:18px;border-radius:50%;border:3px solid var(--acc);border-top-color:transparent}#ptr.spin i{animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
/* quick add fab */
#qafab{position:fixed;right:calc(18px + env(safe-area-inset-right));bottom:calc(90px + env(safe-area-inset-bottom));z-index:44;width:50px;height:50px;border-radius:17px;border:0;color:#fff;background:linear-gradient(135deg,#16a34a,#0d9488);box-shadow:0 10px 24px -8px rgba(13,148,136,.7);display:grid;place-items:center;cursor:pointer}
@media(max-width:759px){#qafab{bottom:calc(150px + env(safe-area-inset-bottom));right:16px}}
body.kiosk #qafab,html.tv #qafab{display:none}
/* nav badges */
.navb .i[data-badge],.stb .i[data-badge]{position:relative}.navb .i[data-badge]::after{content:attr(data-badge);position:absolute;top:-6px;right:-10px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ef4444;color:#fff;font-size:10.5px;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 2px var(--card)}
/* family home */
.famhome{margin-bottom:18px}.fhh small{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}.fhh h1{margin:2px 0 12px}
.famstrip{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;scroll-snap-type:x mandatory}.famstrip::-webkit-scrollbar{display:none}
.fmem{flex:0 0 auto;scroll-snap-align:start;min-width:132px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 12px;border-radius:22px;border:1px solid color-mix(in srgb,var(--pc) 30%,var(--line));background:linear-gradient(170deg,color-mix(in srgb,var(--pc) 14%,var(--card)),var(--card));color:var(--ink);font:inherit;cursor:pointer;box-shadow:var(--e1)}
.fmem .av{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--pc)}.fmem b{font-size:15px;margin-top:6px}.fmem small{font-size:11.5px;font-weight:700;opacity:.85;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.fgrid{display:grid;grid-template-columns:2fr 1.4fr;gap:12px}.fcard{padding:14px 16px;border-radius:22px;background:var(--card);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:var(--e1);cursor:pointer;min-width:0}
.fcard>b{display:block;margin-bottom:8px}.togl{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.togi{flex:0 0 auto;min-width:140px;padding:10px 12px;border-radius:16px;background:color-mix(in srgb,var(--acc) 9%,transparent);display:flex;flex-direction:column;gap:2px}.togi span{color:var(--acc)}.togi small{opacity:.75;font-weight:700}.togi.soft{border:1.5px dashed color-mix(in srgb,var(--acc) 35%,transparent);background:none}
.fch{display:flex;align-items:center;gap:8px;margin-bottom:8px}.badge{background:#ef4444;color:#fff;border-radius:99px;font-size:11px;font-weight:900;padding:1px 7px}
.fcm{display:flex;gap:8px;align-items:center;padding:4px 0;font-size:14px}.fcm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fwg{display:flex;gap:10px}.fwg div{flex:1}.fwg b{font-size:22px;font-weight:900;display:block}.fwg small{font-size:11.5px;opacity:.75;font-weight:700}
.fmom{position:relative;padding:0;overflow:hidden;min-height:120px}.fmimg{position:absolute;inset:0;background:center/cover}.fmom span{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.5);color:#fff;font-weight:800;font-size:12.5px;padding:4px 10px;border-radius:99px}
.ftip{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;background:color-mix(in srgb,#0ea5e9 12%,var(--card));margin-bottom:12px}.ftip span{font-size:22px}.ftip p{margin:0;flex:1;font-size:14px;font-weight:700}.ftip button{border:0;background:var(--card);color:var(--ink);font:inherit;font-weight:800;padding:6px 12px;border-radius:10px}
@media(max-width:759px){.fgrid{grid-template-columns:1fr}.fmem{min-width:116px}}
/* member profile */
.mhero{display:flex;gap:20px;align-items:center;padding:22px;border-radius:26px;margin-bottom:16px;background:linear-gradient(140deg,color-mix(in srgb,var(--pc) 22%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--pc) 30%,transparent)}
.mav{position:relative}.mav .av{box-shadow:0 0 0 4px var(--card),0 0 0 7px var(--pc)}.mavb{position:absolute;right:-4px;bottom:-4px;width:36px;height:36px;border-radius:50%;border:0;background:var(--card);box-shadow:var(--e2);font-size:16px}
.mst{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.mst span{font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--pc) 16%,transparent)}
.mrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line)}.mrow small{opacity:.75}
@media(max-width:759px){.mhero{flex-direction:column;text-align:center}.mst,.mhero .row{justify-content:center}}
/* chat */
.chat{display:flex;flex-direction:column;height:calc(100dvh - 120px);min-height:420px;border-radius:24px;background:var(--card);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:var(--e2);overflow:hidden}
@media(max-width:759px){.chat{height:calc(100dvh - 150px - env(safe-area-inset-bottom));border-radius:20px}}
.chhead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}.chhead small{display:block;max-width:56vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;background:var(--acc2);font-size:16px}.fav.big{width:36px;height:36px;font-size:19px}
.chths{display:flex;gap:6px;padding:8px 10px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}.chth{flex:none;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-weight:800;font-size:13.5px;padding:5px 12px 5px 5px;border-radius:99px;cursor:pointer}.chth.on{background:var(--acc);color:#fff;border-color:var(--acc)}.chth i{font-style:normal;background:#ef4444;color:#fff;border-radius:9px;font-size:10.5px;padding:0 6px}
.chpins{padding:7px 14px;font-size:13px;font-weight:700;background:color-mix(in srgb,#f59e0b 14%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chlog{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:3px;overscroll-behavior:contain}
.chday{align-self:center;font-size:11.5px;font-weight:800;opacity:.6;margin:10px 0 6px}
.bub{display:flex;gap:8px;align-items:flex-end;max-width:82%;animation:bubIn .28s cubic-bezier(.2,.9,.25,1.15)}.bub.me{align-self:flex-end;flex-direction:row-reverse}.bub:not(.grp){margin-top:8px}
.avsp{width:30px;flex:none}.bub.me .avsp{display:none}
@keyframes bubIn{from{opacity:0;transform:translateY(8px) scale(.97)}}
.bb{position:relative;padding:8px 12px 6px;border-radius:18px 18px 18px 6px;background:color-mix(in srgb,var(--ink) 7%,var(--card));cursor:pointer;min-width:60px}
.bub.me .bb{border-radius:18px 18px 6px 18px;background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 70%,#7c3aed));color:#fff}
.bub.pin .bb{box-shadow:0 0 0 2px #f59e0b}
.bn{display:block;font-weight:900;font-size:11.5px;opacity:.75;margin-bottom:2px}.bt{white-space:pre-wrap;word-break:break-word;font-size:15px;line-height:1.35}.bt a{color:inherit;text-decoration:underline}
.bm{display:block;text-align:right;font-size:10.5px;opacity:.65;margin-top:2px}
.bimg{display:block;max-width:min(260px,60vw);border-radius:12px;margin:2px 0 4px}
.brp{font-size:12px;opacity:.8;border-left:3px solid currentColor;padding-left:7px;margin-bottom:4px}
.bshare{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.18);color:inherit;font:inherit;text-align:left;margin:2px 0}.bub:not(.me) .bshare{background:color-mix(in srgb,var(--acc) 12%,transparent)}.bshare small{opacity:.8}
.brx{position:absolute;bottom:-12px;right:8px;display:flex;gap:2px}.brx span{background:var(--card);color:var(--ink);border-radius:99px;padding:0 5px;font-size:12px;box-shadow:var(--e1);font-weight:800}.bub:has(.brx){margin-bottom:12px}
.chseen{align-self:flex-end;font-size:11px;opacity:.6;font-weight:700;margin-top:4px}
.chtyp{font-size:12px;opacity:.75;font-weight:700;display:flex;align-items:center;gap:3px;margin-top:6px}.chtyp i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:typ 1s infinite}.chtyp i:nth-child(2){animation-delay:.15s}.chtyp i:nth-child(3){animation-delay:.3s}@keyframes typ{50%{opacity:.25;transform:translateY(-2px)}}
.chempty{margin:auto;text-align:center;opacity:.8;font-size:30px}.chempty p{font-size:15px;font-weight:700}
.chrp{display:flex;align-items:center;padding:6px 14px;font-size:13px;font-weight:700;background:color-mix(in srgb,var(--acc) 10%,transparent)}.chrp button{margin-left:auto;border:0;background:none;color:inherit;font-size:15px}
.chin{display:flex;gap:6px;align-items:center;padding:10px;border-top:1px solid var(--line)}.chin input{flex:1;border-radius:99px;min-height:44px}
.chb{width:40px;height:40px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ink) 7%,transparent);font-size:18px;flex:none;color:var(--ink)}.chsend{width:44px;height:44px;border-radius:50%;border:0;background:var(--acc);color:#fff;font-size:17px;flex:none}
.chmenu{display:flex;flex-direction:column;gap:6px}.chmenu>button{border:0;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink);font:inherit;font-weight:800;padding:12px;border-radius:14px;text-align:left}.chmenu .dng{color:#dc2626}
.rxbar{display:flex;justify-content:space-between;gap:4px;margin-bottom:6px}.rxbar button{font-size:26px;border:0;background:none;padding:6px;border-radius:14px}.rxbar button.on{background:var(--acc2)}
.shi{display:flex;justify-content:space-between;width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:800;padding:10px 12px;border-radius:12px;margin:4px 0;text-align:left}.shi small{opacity:.7}
.wun{font-weight:900;color:#ef4444;font-size:12.5px;margin-bottom:4px}
/* lists */
.fll{display:flex;flex-direction:column}.fli{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);transition:background .2s}.fli.done .sp{text-decoration:line-through;opacity:.6}
/* calendar notes */
.dnd{display:inline-block;width:7px;height:7px;border-radius:50%;background:#f59e0b;margin-left:4px;vertical-align:middle;box-shadow:0 0 6px #f59e0b}
.calth .mday>.dnd{position:absolute;top:10px;right:10px;margin:0}
.dnote textarea{margin-top:10px}.dnprev{margin-top:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,#f59e0b 10%,transparent);font-size:14px;line-height:1.5}
.mck{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:5px;border:2px solid currentColor;font-size:10px;vertical-align:-2px}.mck.on{background:#16a34a;border-color:#16a34a;color:#fff}
.dnstrip{display:flex;gap:8px;overflow-x:auto;margin-bottom:12px;scrollbar-width:none}.dnstrip button{flex:none;max-width:320px;border:1px solid var(--cline,var(--line));background:var(--ccell,var(--card));color:var(--cink,var(--ink));font:inherit;font-size:13px;padding:8px 12px;border-radius:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enote{flex-basis:100%;font-size:12px;opacity:.9;margin-top:4px;line-height:1.4}
.wdn{font-size:13px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,#f59e0b 12%,transparent);margin-bottom:8px;cursor:pointer}.wpin{font-size:12.5px;font-weight:800;margin-bottom:6px}
.avrow{padding:6px 0}
/* Halloween versions */
body.hw.ui2 .fmem{background:linear-gradient(170deg,color-mix(in srgb,var(--pc) 22%,#2a1745),#1f1233);color:#f5ecff}
body.hw.ui2 .fcard,body.hw.ui2 .chat{background:linear-gradient(160deg,#2a1745,#1f1233);color:#f5ecff;border-color:rgba(251,146,60,.22)}
body.hw.ui2 .bb{background:rgba(255,255,255,.08)}body.hw.ui2 .bub.me .bb{background:linear-gradient(135deg,#ea580c,#9333ea)}
body.hw.ui2 .ftip{background:rgba(14,165,233,.15)}body.hw.ui2 #ptr{background:#2a1745}
body:has(.chat) #qafab{display:none}