/* live-social.css: the homepage live panel, comments and hearts, the gift bar and the gift moments
   (docs/LIVE_SOCIAL.md). Loaded by /live, the studio, the Sanctuary and the backstage page, and added by
   live-home.js on the homepage only while Rosemary is live. Tokens only; no new colours. */

/* ==== the homepage panel (only while she is live; no space is kept for it otherwise) ==== */
.live-home{padding-block:var(--s4) var(--s5);border-bottom:var(--hairline);background:color-mix(in srgb,var(--deep) 70%,transparent)}
.live-home .wrap{display:grid;gap:var(--s3)}
.live-home-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.live-home-head h2{font-size:var(--t3);line-height:var(--lh3)}
.live-home-grid{display:grid;gap:var(--s3)}
@media (min-width:1024px){ .live-home-grid{grid-template-columns:minmax(0,7fr) minmax(300px,5fr);align-items:start} }
.live-home .screen{margin:0;aspect-ratio:16/9;background:var(--night)}
.live-home .screen::after{inset:0}
.live-home .screen.is-tall{aspect-ratio:9/16;width:min(100%,calc(62dvh * 9 / 16));margin-inline:auto}
.live-home-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.live-home .count{color:var(--cream-2)}
.live-home-next{color:var(--cream-3)}
.sound-btn{position:absolute;left:var(--s2);bottom:var(--s2);z-index:3;display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s3);border:1px solid var(--gold-line);border-radius:var(--r-full);background:color-mix(in srgb,var(--night) 78%,transparent);color:var(--cream);font:500 var(--t-btn-sm) var(--f-body);cursor:pointer}
.sound-btn .ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.screen .vtile-name{position:absolute;left:var(--s2);top:var(--s2);z-index:2;padding:2px 8px;border-radius:var(--r-s);background:color-mix(in srgb,var(--night) 70%,transparent);color:var(--cream);font-size:14px}
/* Guests on stage: Rosemary and up to three guests side by side (stacked when the picture is tall) */
.screen.has-guests{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2px}
.screen.has-guests .vtile,.screen.has-guests .vtile + .vtile{position:relative;inset:auto;width:auto;aspect-ratio:auto;border:0}
.screen.has-guests.is-tall{grid-template-columns:1fr;grid-auto-rows:1fr}
.screen.has-guests video{object-fit:cover}

/* ==== comments ==== */
.ls{display:grid;gap:var(--s2);min-width:0}
.ls-pin{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s2);padding:var(--s2) var(--s3);border:var(--hairline);border-radius:var(--r-m);background:var(--card);color:var(--cream)}
.ls-pin[hidden]{display:none}
.ls-pin-label{font:400 var(--t-label)/var(--lh-label) var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.ls-log{display:grid;align-content:start;gap:var(--s2);max-height:340px;min-height:120px;overflow-y:auto;overscroll-behavior:contain;padding:var(--s2) 0;margin:0;list-style:none}
.ls-compact .ls-log{max-height:220px}
.ls-msg{position:relative;padding:var(--s1) 0;color:var(--cream-2);overflow-wrap:anywhere}
.ls-name{color:var(--cream);font-weight:500}
.ls-msg.is-host .ls-name{color:var(--gold)}
.ls-badge{display:inline-block;margin-left:var(--s2);padding:0 6px;border:1px solid var(--gold-line);border-radius:var(--r-full);font-size:12px;line-height:18px;color:var(--gold)}
.ls-tag{display:block;margin-top:2px;font-size:var(--t6);line-height:var(--lh6);color:var(--cream-3)}
.ls-msg.is-held,.ls-msg.is-care{padding:var(--s2);border-left:2px solid var(--rose);background:color-mix(in srgb,var(--card) 80%,transparent)}
.ls-more{float:right;min-width:var(--tap);min-height:32px;border:0;background:none;color:var(--cream-3);font:500 16px/1 var(--f-body);cursor:pointer}
.ls-menu{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.ls .btn-tiny,.gb .btn-tiny,.ls-staff .btn-tiny{min-height:var(--tap);padding:0 10px;font-size:14px}
.ls-write{display:flex;gap:var(--s2);align-items:stretch}
.ls-write input{flex:1;min-width:0;min-height:var(--tap);font-size:16px}
.ls-namef{display:grid;gap:var(--s2)}
.ls-namef input{font-size:16px}
.ls-care{display:grid;gap:var(--s2);padding:var(--s3);border:1px solid var(--rose);border-radius:var(--r-m);background:var(--card);color:var(--cream)}
.ls-care ul{display:grid;gap:var(--s1);padding-left:var(--s3);color:var(--cream-2)}
.ls-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.ls-heart{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border:1px solid var(--gold-line);border-radius:50%;background:var(--card);color:var(--rose);cursor:pointer}
.ls-heart .ico{width:22px;height:22px;fill:currentColor}
.ls-heart:active{transform:scale(.92)}
.ls-staff{display:grid;gap:var(--s2);padding-top:var(--s2);border-top:var(--soft)}
.ls-staff[hidden],.ls-join[hidden]{display:none}
.ls-staffrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.ls-staffrow select{min-height:var(--tap);font-size:16px}
.ls-heldlist{display:grid;gap:var(--s2);list-style:none;padding:0}
.ls-heldlist .row{display:flex;gap:var(--s1);margin-top:var(--s1)}
/* hearts float up the right side of the video */
.ls-float{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.ls-fh{position:absolute;left:var(--x,80%);bottom:8%;width:28px;height:28px;fill:var(--rose);opacity:0}
.ls-fh.is-mine{fill:var(--gold-2)}

/* ==== the gift bar ==== */
.gb{display:grid;gap:var(--s2);min-width:0}
.gb-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3)}
.gb-title{font:var(--w-heading) var(--t4)/var(--lh4) var(--f-display);color:var(--cream)}
.gb-bal{color:var(--cream-2);font-size:var(--t6)}
.gb-add{margin-left:auto}
.gb-scroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;margin-inline:calc(-1 * var(--s1));padding:var(--s1)}
.gb-strip{display:flex;gap:var(--s2);margin:0;padding:0;list-style:none;width:max-content}
.gb-strip li{scroll-snap-align:start}
.gb-gift{display:grid;justify-items:center;gap:2px;width:84px;min-height:112px;padding:var(--s2) var(--s1);border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);color:var(--cream);font:400 13px/1.25 var(--f-body);text-align:center;cursor:pointer}
.gb-gift:hover,.gb-gift:focus-visible{border-color:var(--gold-line);background:var(--card-2)}
.gb-gift img,.gb-mark{width:48px;height:48px;object-fit:contain}
.gb-gift.gb-large,.gb-gift.gb-grand{border-color:var(--gold-line-soft)}
.gb-mark{display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;font:italic 400 22px/1 var(--f-display);color:var(--gold)}
.gb-name{color:var(--cream-2)}
.gb-price{color:var(--gold);font-weight:500}
.gb-amounts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.gb-amounts .btn{min-width:72px}
.gb-checkout{min-height:420px}
.gb-sheet.is-wide .dialog-in{max-width:640px}

/* ==== the gift moments (gift-fx.js) ==== */
.gfx{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.gfx-full{position:fixed;z-index:var(--z-toast)}
.gfx-art{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;object-fit:contain;opacity:0}
.gfx-s{left:auto;right:12%;top:auto;bottom:10%;margin:0;width:64px;height:64px}
.gfx-m{left:auto;right:10%;top:auto;bottom:12%;margin:0;width:96px;height:96px}
.gfx-l{width:min(52%,280px);height:auto;aspect-ratio:1;margin:0;translate:-50% -50%}
.gfx-g{width:min(70vmin,480px);height:auto;aspect-ratio:1;margin:0;translate:-50% -50%}
.gfx-card{width:min(36%,200px);height:auto;aspect-ratio:480/827;margin:0;translate:-50% -50%;padding:5px;border:1px solid var(--gold-2);border-radius:var(--r-s);background:var(--card);object-fit:cover}
.gfx-q{opacity:0}
.gfx-mark-ring{fill:none;stroke:var(--gold);stroke-width:2}
.gfx-mark-in{fill:var(--card)}
.gfx-mark-t{fill:var(--gold);font:italic 400 38px var(--f-display)}
.gfx-mote{position:absolute;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,var(--gold-2),color-mix(in srgb,var(--gold) 0%,transparent) 70%);opacity:0}
.gfx-mote.is-big{width:10px;height:10px}
.gfx-glow{position:absolute;left:50%;top:50%;width:80%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 35%,transparent),color-mix(in srgb,var(--gold) 0%,transparent));opacity:0}
.gfx-veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--card) 70%,transparent),color-mix(in srgb,var(--night) 88%,transparent));opacity:0}
.gfx-veil.is-warm{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--gold) 26%,transparent),color-mix(in srgb,var(--night) 86%,transparent) 70%)}
.gfx-heart{position:absolute;width:26px;height:26px;fill:var(--rose);opacity:0}
.gfx-seed{position:absolute;width:14px;height:14px;opacity:0;background:radial-gradient(circle at 50% 70%,var(--cream) 0 1.5px,color-mix(in srgb,var(--cream) 0%,transparent) 2px),conic-gradient(from 0deg,color-mix(in srgb,var(--cream) 70%,transparent) 0 2%,transparent 2% 12.5%,color-mix(in srgb,var(--cream) 70%,transparent) 12.5% 14.5%,transparent 14.5% 25%);border-radius:50%}
.gfx-angel{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:var(--s2);translate:-50% -50%;opacity:0}
.gfx-num{font:500 clamp(48px,14vw,96px)/1 var(--f-display);color:var(--gold-2);text-shadow:0 0 18px color-mix(in srgb,var(--gold) 70%,transparent);font-variant-numeric:lining-nums tabular-nums}
.gfx-wing{width:clamp(40px,10vw,72px);fill:var(--cream);opacity:.9;transform-origin:100% 80%}
.gfx-wing.is-r{transform:scaleX(-1);transform-origin:0 80%}
.gfx-ring{position:absolute;right:10%;bottom:8%;width:140px;height:140px;border:1px dashed var(--gold);border-radius:50%;opacity:0}
.gfx-tail{position:absolute;left:30%;top:40%;width:50%;height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--gold-2) 0%,transparent),var(--gold-2));transform-origin:100% 50%;opacity:0}
.gfx-const{position:absolute;inset:15% 10%;width:80%;height:70%;opacity:0}
.gfx-const polyline{fill:none;stroke:var(--gold);stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:1}
.gfx-const circle{fill:var(--cream);opacity:0}
.gfx-fan{position:absolute;left:50%;top:58%;width:0;height:0}
.gfx-feather{position:absolute;left:-14px;bottom:0;width:28px;height:min(38vmin,260px);border-radius:50% 50% 40% 40%;background:radial-gradient(circle at 50% 18%,var(--teal) 0 10%,var(--gold) 11% 16%,color-mix(in srgb,var(--teal) 55%,var(--card)) 17% 60%,color-mix(in srgb,var(--teal) 0%,transparent) 61%);transform-origin:50% 100%;opacity:0}
.gfx-banner{position:absolute;left:50%;top:var(--s3);z-index:6;max-width:calc(100% - 32px);translate:-50% 0;padding:var(--s1) var(--s3);border:1px solid var(--gold-line);border-radius:var(--r-full);background:color-mix(in srgb,var(--night) 82%,transparent);color:var(--cream);font-size:15px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.gfx-banner b{color:var(--gold)}
.gfx-full ~ .gfx-banner,.gfx-full + .gfx-banner{position:fixed}

/* ==== the video bits the homepage needs (room.css and live.css are not loaded there) ==== */
.live-home .screen{position:relative}
.live-home .vtile{position:absolute;inset:0;overflow:hidden;background:var(--night)}
.live-home .screen.has-guests .vtile{position:relative}
.live-home .vtile video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--night)}
.live-home .screen:not(.has-guests) .vtile + .vtile{inset:auto var(--s2) var(--s2) auto;width:34%;aspect-ratio:16/10;border:var(--hairline);z-index:1}
.live-home .vtile-empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:var(--s2);background:var(--deep);text-align:center;padding:var(--s3)}
.live-home .initial{width:72px;height:72px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;background:var(--card);font:italic 400 34px/1 var(--f-display);color:var(--gold)}
.live-home .away-note{position:absolute;z-index:2;left:50%;bottom:var(--s3);translate:-50% 0;width:max-content;max-width:calc(100% - 32px);margin:0;padding:10px 16px;border:var(--hairline);border-radius:var(--r-m);background:var(--card);color:var(--cream);font:500 16px/22px var(--f-body);text-align:center}
.live-home .on-air{display:inline-flex;align-items:center;gap:var(--s2);min-height:28px;padding:0 12px;border:1px solid var(--rose);border-radius:var(--r-full);color:var(--cream);font:500 var(--t6)/1 var(--f-body)}
.live-home .on-air::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rose)}
.live-home-full{display:grid;place-items:center;align-content:center;gap:var(--s3);position:absolute;inset:0;padding:var(--s3);background:var(--deep);text-align:center}
.stage-wrap{position:relative}