/* CSS Variables */
:root {
    --blue: #5aa1ff;
    --ink: #243042;
    --pink: #ff5fa5;
    --cream: #fff7ef;
    --depth: 56px;
    --radius: 22px;
    --glow: #c39bff;
    --card: #5aa1ff;
    --cardDark: #3e84ff;
    --rim: #ffffffaa;
    --noise: linear-gradient(#0000, #0000); /* placeholder */
    --glassEdge: #ffffffb8;
    --glassLine: #ffffff80;
    --win-top: 64px;    /* must match .window inset top */
    --win-side: 48px;   /* must match .window inset left/right */
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #ffffff;
    background: url('img/background.png') center/cover no-repeat fixed;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Background blur overlay */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('img/background.png') center/cover no-repeat fixed;
    filter: blur(3px);
    z-index: -2;
}

/* Background color overlay for better readability */
.background-animation::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

/* Glass container */
.glass-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    gap: 2rem;
    position: relative;
}

/* Centered Stack Layout */
.stack-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
    margin-top: 20px;
}

.scene {
    perspective: 1200px;
}

.collector-box {
    width: clamp(280px, 52vw, 560px);
    height: clamp(360px, 68vw, 720px);
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s;
    will-change: transform, filter;
}

.collector-box:hover {
    transform: translateZ(8px) rotateY(10deg) rotateX(-4deg);
    filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.45));
}

@keyframes floaty {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.scene .collector-box {
    animation: floaty 6s ease-in-out infinite;
}

/* Faces */
.face {
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
}

.front {
    background:
        repeating-linear-gradient(180deg, #ffffff18 0 6px, #0000 6px 18px),
        radial-gradient(180% 120% at 0% 0%, #ffffff16, #0000 40%),
        linear-gradient(180deg, var(--card), var(--cardDark));
    box-shadow: inset 0 0 0 2px #ffffff80, inset 0 -2px 12px #00000025;
    border-radius: 22px;
}

.face.side {
    width: var(--depth);
    inset: auto;
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, #76b7ff, #3e84ff);
}

/* Enhanced 3D faces with better shadows */
.face.side.left {
    left: -1px;
    transform: translateZ(-1px) rotateY(90deg);
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: 
        inset -2px 0 0 #ffffff60,
        inset -4px 0 8px rgba(0, 0, 0, 0.1);
}

.face.side.right {
    right: -1px;
    transform: translateZ(-1px) rotateY(-90deg);
    border-radius: 0 var(--radius) var(--radius) 0;
    box-shadow: 
        inset 2px 0 0 #ffffff60,
        inset 4px 0 8px rgba(0, 0, 0, 0.1);
}

.face.top {
    left: 0;
    right: 0;
    height: var(--depth);
    top: -1px;
    transform: translateZ(-1px) rotateX(90deg);
    background: linear-gradient(180deg, #8cc4ff, #3e84ff);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 
        inset 0 -2px 0 #ffffff60,
        inset 0 -4px 8px rgba(0, 0, 0, 0.1);
}

.face.bottom {
    left: 0;
    right: 0;
    height: var(--depth);
    bottom: -1px;
    transform: translateZ(-1px) rotateX(-90deg);
    background: linear-gradient(0deg, #8cc4ff, #3e84ff);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 
        inset 0 2px 0 #ffffff60,
        inset 0 4px 8px rgba(0, 0, 0, 0.1);
}

.drop-shadow {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -32px;
    height: 26px;
    background: radial-gradient(50% 100% at 50% 0, #0005, #0000 70%);
    filter: blur(4px);
}

/* Window with sharp glass (NO BLUR) */
.window {
    position: absolute;
    inset: 64px 48px 80px 48px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: inset 0 0 0 3px var(--rim), 0 14px 26px rgba(0, 0, 0, 0.25);
}

.backer-card {
    position: absolute;
    inset: 16px;
    z-index: 1;
    border-radius: 24px;
    background:
        radial-gradient(180% 90% at 10% -10%, #fff6, #0000 40%),
        repeating-linear-gradient(180deg, #ffffff12 0 8px, #0000 8px 20px),
        linear-gradient(180deg, #eef3ff, #c1d4ff);
    box-shadow: inset 0 10px 28px #0001, inset 0 -10px 28px #0001;
}

#figure-slot {
    position: absolute;
    inset: 16px;
    z-index: 2;
    min-height: min(520px, 58vh);
}

#figure-viewer {
    width: 100%;
    height: 100%;
    display: block;
}

/* Crisp glossy glass: highlights only, no blur */
.blister {
    position: absolute;
    inset: 10px;
    z-index: 3;
    border-radius: 24px;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 8%, var(--glassLine) 8% 9.2%, transparent 12% 60%, var(--glassLine) 86% 87.2%, transparent 93% 100%),
        radial-gradient(140% 100% at 20% 0%, #ffffff66, transparent 55%),
        linear-gradient(0deg, #ffffff1f, #ffffff00 60%);
    border: 1px solid var(--glassEdge);
    box-shadow: inset 0 0 0 1px #ffffff66, 0 8px 22px rgba(0, 0, 0, 0.2);
}

.blister::after {
    /* animated specular sweep */
    content: "";
    position: absolute;
    inset: -20%;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 40%, #ffffff55 48%, #ffffffaa 50%, #ffffff55 52%, transparent 60%);
    transform: translateX(-120%) rotate(3deg);
    animation: shine 4.5s ease-in-out infinite 1.2s;
    mix-blend-mode: screen;
}

@keyframes shine {
    to {
        transform: translateX(120%) rotate(3deg);
    }
}

/* Plinth (if present) */
.plinth {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: 60%;
    height: 16%;
    border-radius: 60px / 18px;
    background: radial-gradient(120% 200% at 50% -20%, #fff, #d7e0ff 50%, #a3b9ff 75%);
    box-shadow: inset 0 8px 14px #ffffffc0, 0 10px 20px #0003;
}

/* Badges */
.brand-chip {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ff6fa0;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px #ff6fa055;
}

.badge.age {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: #ff6fa0;
    color: #fff;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 999px;
}

.badge.holo {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #fff inset, 0 3px 10px #0003;
    background: conic-gradient(from 0deg, #ff8 0 25%, #8ff 25% 50%, #f8f 50% 75%, #8f8 75% 100%);
    animation: spin 10s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}

/* Bokeh behind the box */
.bokeh-layer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: -1;
}

.bokeh-layer span {
    position: absolute;
    width: 14vmin;
    height: 14vmin;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff55, #ffffff08 60%, transparent 70%);
    filter: saturate(1.2);
    opacity: 0.35;
    animation: bokeh 12s ease-in-out infinite;
}

.bokeh-layer span:nth-child(1) {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

.bokeh-layer span:nth-child(2) {
    top: 20%;
    right: 18%;
    animation-delay: 1.2s;
}

.bokeh-layer span:nth-child(3) {
    bottom: 18%;
    left: 25%;
    animation-delay: 2.4s;
}

.bokeh-layer span:nth-child(4) {
    bottom: 8%;
    right: 22%;
    animation-delay: 3.6s;
}

.bokeh-layer span:nth-child(5) {
    top: 45%;
    left: 50%;
    animation-delay: 4.8s;
}

@keyframes bokeh {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(2vmin, -1vmin) scale(1.15);
    }
}

/* Chat polish */
.chat-card {
    max-width: min(680px, 92vw);
    width: 100%;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(#ffffff55, #ffffff25);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #ffffff66;
    transition: transform 0.35s, box-shadow 0.35s;
}

.chat-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 28px 54px rgba(0, 0, 0, 0.36), inset 0 0 0 1px #ffffff88;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}

.status-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 10px #34d399;
}

#messages {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;

    /* USE the dynamic clamp from script.js (falls back to 260px) */
    max-height: var(--chatMax, 260px) !important;
    overflow-y: auto !important;
}

.msg {
    padding: 10px 12px;
    border-radius: 12px;
    background: #fffbfe;
}

.msg.bot {
    background: #e8f0ffcc;
}

#chat-form {
    display: flex;
    gap: 10px;
}

#chat-input {
    flex: 1;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #fff8;
    background: #fffd;
    color: #333;
}

#chat-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #8ab6ff inset;
}

#chat-input::placeholder {
    color: #666;
}

#send-btn {
    padding: 12px 16px;
    border-radius: 12px;
    background: #3e84ff;
    color: #fff;
    font-weight: 700;
    border: none;
    box-shadow: 0 6px 16px #3e84ff55;
    cursor: pointer;
    transition: all 0.3s ease;
}

#send-btn:hover {
    background: #2d6bff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px #3e84ff66;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
    .scene .collector-box,
    .blister::after,
    .badge.holo,
    .bokeh-layer span {
        animation: none;
    }
    .collector-box:hover {
        transform: none;
        filter: none;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .glass-container {
        padding: 1rem;
        gap: 1.5rem;
    }
    
    .collector-box {
        width: clamp(280px, 80vw, 400px);
        height: clamp(360px, 100vw, 520px);
        --depth: 48px;
    }
    
    .chat-card {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .collector-box {
        width: clamp(280px, 90vw, 320px);
        height: clamp(360px, 115vw, 420px);
        --depth: 40px;
    }
    
    .brand-chip {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .badge.age {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .badge.holo {
        width: 36px;
        height: 36px;
    }
    
    .window {
        inset: 48px 32px 56px 48px;
    }
}

/* 3D body kept as you had; ensure it stays behind */
.face.side, .face.top, .face.bottom { 
    z-index: 0; 
}

/* Decals and Stickers */
.front .decals{ 
    position:absolute; 
    inset:0; 
    pointer-events:none; 
}

/* Main brand logo (top-center, slight tilt) */
.brand-logo{
    position:absolute; 
    top:20px; 
    left:50%; 
    transform:translateX(-50%) rotate(-2deg);
    width: clamp(140px, 26vw, 260px);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
    opacity:.95;
}

/* Generic sticker wrapper */
.sticker{ 
    position:absolute; 
    display:block; 
}

.sticker img{ 
    display:block; 
    width:100%; 
    height:auto;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.30)); 
}

/* White "sticker" outline using mask (works in modern browsers).
   Fallback shadow still gives separation if mask is unsupported. */
.sticker::before{
    content:"";
    position:absolute; 
    inset:-8px; 
    z-index:-1; 
    background:#fff; 
    border-radius:12px;
    -webkit-mask: var(--src) center / contain no-repeat;
            mask: var(--src) center / contain no-repeat;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
}

/* Placement for each sticker */
.sticker-1{ 
    right:18px; 
    bottom:18px; 
    width: clamp(90px, 18vw, 160px); 
    transform: rotate(6deg); 
}

.sticker-2{ 
    right:10px; 
    top:90px; 
    width: clamp(80px, 16vw, 140px); 
    transform: rotate(-8deg); 
    opacity:.92; 
}

/* Ensure correct stacking: decals under glass but above print */
.front .decals{ 
    z-index: 2; 
}

.window { 
    position:absolute; 
    z-index: 0; 
}      /* existing */

.backer-card{ 
    z-index:1; 
}                      /* existing */

#figure-slot{ 
    z-index:2; 
}                       /* model */

.blister{ 
    z-index:3; 
}                           /* glass stays on top */

/* Responsive tweak so stickers don't cover the figure on small screens */
@media (max-width: 520px){
    .brand-logo{ 
        width: clamp(120px, 50vw, 200px); 
        top:14px; 
    }
    .sticker-2{ 
        top:76px; 
    }
}

/* Optional: subtle entrance */
@keyframes pop { 
    0%{ 
        transform:scale(.9) rotate(-2deg); 
        opacity:0 
    } 
    100%{ 
        transform:scale(1) rotate(-2deg); 
        opacity:1 
    } 
}

.brand-logo{ 
    animation: pop .5s ease-out both; 
    animation-delay:.1s; 
}

.sticker-1{ 
    animation: pop .5s ease-out both; 
    animation-delay:.2s; 
    transform-origin: 80% 80%; 
}

.sticker-2{ 
    animation: pop .5s ease-out both; 
    animation-delay:.3s; 
    transform-origin: 30% 20%; 
}

/* If your .brand-chip text is still visible and you prefer only the image, you can hide it: */
/* .brand-chip{ display:none; } */

/* Edge logos: vertical stickers on the side planes */
.edge-logo{
  position:absolute; 
  inset:auto;
  width: calc(var(--depth) + 36px);    /* a bit wider than the side to look like a sticker */
  height: 48%;
  top: 20%;
  pointer-events:none;
  /* Render PNG via mask to get a clean white edge */
  background: #fff;                     /* base for the white outline */
  -webkit-mask: var(--img) center / contain no-repeat;
          mask: var(--img) center / contain no-repeat;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.35)); /* global shadow */
  border-radius: 12px;
}

/* Put the actual colored image on top using ::after */
.edge-logo::after{
  content:""; 
  position:absolute; 
  inset:8px; 
  border-radius:10px; 
  background:#000;
  -webkit-mask: var(--img) center / contain no-repeat;
          mask: var(--img) center / contain no-repeat;
  background: var(--img) center / contain no-repeat;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
}

/* Left side: place on the left face plane */
.edge-logo.left{
  left: -1px;
  transform: translateZ(calc(var(--depth) * -1)) rotateY(90deg) translateX(-18px);
}

/* Right side: place on the right face plane */
.edge-logo.right{
  right: -1px;
  transform: translateZ(calc(var(--depth) * -1)) rotateY(-90deg) translateX(-18px);
}

/* Two right-side stickers – one upper, one lower */
.edge-logo.right.top{  
  top: 14%; 
  height: 42%; 
}

.edge-logo.right.bottom{ 
  bottom: 12%; 
  top: auto; 
  height: 38%; 
}

/* Make sure side faces allow overflow so the sticker can exceed the face width a bit */
.face.side{ 
  overflow: visible; 
}

/* Responsive: keep them visible on smaller screens */
@media (max-width: 560px){
  .edge-logo{ 
    width: calc(var(--depth) + 24px); 
    height: 44%; 
    top: 18%; 
  }
  .edge-logo.right.top{ 
    top: 12%; 
  }
  .edge-logo.right.bottom{ 
    bottom: 10%; 
  }
}

/* Make sure side faces can hold absolutely positioned children */
.face.side{ 
    position:absolute; 
    overflow:visible; 
}

/* Vertical edge stickers (with white outline + shadow). They slightly overhang the edge for a premium boxed look. */
.side-sticker{
    position:absolute;
    pointer-events:none;
    /* height as a % of the side face; width a bit wider than the side depth */
    height: 46%;
    width: calc(var(--depth) + 34px);
    left: -18px;                 /* overhang across the edge */
    top: 20%;
    z-index: 2;                  /* above side print */
    /* white border via mask */
    background:#fff;
    -webkit-mask: var(--img) center / contain no-repeat;
            mask: var(--img) center / contain no-repeat;
    border-radius:12px;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.35));
}

.side-sticker::after{
    content:"";
    position:absolute; 
    inset:8px; 
    border-radius:10px;
    -webkit-mask: var(--img) center / contain no-repeat;
            mask: var(--img) center / contain no-repeat;
    background: var(--img) center / contain no-repeat;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
}

/* Positioning per sticker */
.face.side.left  .side-sticker{ 
    left: -18px; 
}           /* left overhang */

.face.side.right .side-sticker{ 
    right: -18px; 
    left:auto; 
}/* right overhang */

.face.side.right .side-sticker.top{    
    top: 14%; 
    height: 42%; 
    transform: rotate(-2deg); 
}

.face.side.right .side-sticker.bottom{ 
    bottom: 12%; 
    top:auto; 
    height: 38%; 
    transform: rotate(4deg); 
}

/* Progressive enhancement: if mask is unsupported, show the <img> fallback */
.side-sticker img{ 
    display:none; 
}

@supports not (mask: url()){
    .side-sticker{ 
        background:none; 
        filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)); 
    }
    .side-sticker::after{ 
        display:none; 
    }
    .side-sticker img{ 
        display:block; 
        width:100%; 
        height:auto; 
    }
}

/* Keep global stacking: front glass on top; model + decals unaffected */
.front .decals{ 
    z-index: 2; 
}

.backer-card{ 
    z-index:1; 
}

#figure-slot{ 
    z-index:2; 
}

.blister{ 
    z-index:3; 
}

/* Responsive tweaks */
@media (max-width: 560px){
    .side-sticker{ 
        width: calc(var(--depth) + 26px); 
        height: 44%; 
        top: 18%; 
    }
    .face.side.right .side-sticker.top{ 
        top: 12%; 
    }
    .face.side.right .side-sticker.bottom{ 
        bottom: 10%; 
    }
}

/* Side faces must allow absolutely positioned children */
.face.side{ 
    position:absolute; 
    overflow:visible; 
}

/* Vertical edge stickers (white outline + drop shadow). They slightly overhang the edge. */
.side-sticker{
    position:absolute; 
    pointer-events:none; 
    z-index:2;
    /* height = % of side, width a bit larger than face depth to simulate wrap */
    height: 46%;
    width: calc(var(--depth) + 34px);
    top: 20%;
    left: -18px; /* default overhang; overridden on the right side */
    /* White outline by masking the image over a white block */
    --img: attr(data-img url);
    background: #fff;
    -webkit-mask: var(--img) center / contain no-repeat;
            mask: var(--img) center / contain no-repeat;
    border-radius: 12px;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.35));
}

.side-sticker::after{
    content:""; 
    position:absolute; 
    inset:8px; 
    border-radius:10px;
    -webkit-mask: var(--img) center / contain no-repeat;
            mask: var(--img) center / contain no-repeat;
    background: var(--img) center / contain no-repeat;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
}

/* Attach to the correct plane (left/right) using parent selectors */
.face.side.left  > .side-sticker{ 
    left:-18px; 
    transform: none; 
}

.face.side.right > .side-sticker{ 
    right:-18px; 
    left:auto; 
    transform: none; 
}

.face.side.right > .side-sticker.top{    
    top: 14%; 
    height: 42%; 
    transform: rotate(-2deg); 
}

.face.side.right > .side-sticker.bottom{ 
    bottom: 12%; 
    top:auto; 
    height: 38%; 
    transform: rotate(4deg); 
}

/* Responsive: keep them readable and out of the way */
@media (max-width: 560px){
    .side-sticker{ 
        width: calc(var(--depth) + 26px); 
        height: 44%; 
        top: 18%; 
    }
    .face.side.right > .side-sticker.top{ 
        top: 12%; 
    }
    .face.side.right > .side-sticker.bottom{ 
        bottom: 10%; 
    }
}

/* Keep global stacking: model + front glass unaffected */
.backer-card{ 
    z-index:1; 
}

#figure-slot{ 
    z-index:2; 
}

.blister{ 
    z-index:3; 
}

/* Optional micro-entrance */
@keyframes stickerPop{
    0%{
        transform:scale(.95);
        opacity:0
    }
    100%{
        transform:scale(1);
        opacity:1
    }
}

.side-sticker{ 
    animation: stickerPop .45s ease-out both; 
}

/* Refined Front Decals - Speech Bubble as Hang-Tag */
.front .decals{ 
    position:absolute; 
    inset:0; 
    pointer-events:none; 
    z-index:2; 
} /* under glass */

.sticker{ 
    position:absolute; 
    display:block; 
}

.sticker img{ 
    display:block; 
    width:100%; 
    height:auto; 
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.28)); 
}

/* White sticker outline via mask; shadow for depth */
.sticker::before{
    content:""; 
    position:absolute; 
    inset:-8px; 
    background:#fff; 
    border-radius:12px;
    -webkit-mask: var(--src) center / contain no-repeat;
            mask: var(--src) center / contain no-repeat;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.28));
}

/* NEW placement for logo3 — left frame, mid-upper, away from other art */
.sticker-quote{
    left: 16px;
    top: calc(var(--win-top) + 28px);
    width: clamp(68px, 14vw, 110px);
    transform: rotate(-8deg);
    opacity: .96;
}

/* Optional: washi tape */
.sticker-quote::after{
    content:""; 
    position:absolute; 
    left:18%; 
    top:-12px; 
    width:72%; 
    height:12px;
    background: repeating-linear-gradient(90deg,#ffd7e6 0 8px,#ffeef5 8px 16px);
    border-radius:3px; 
    box-shadow:0 8px 14px rgba(0,0,0,.18);
    transform: rotate(-5deg);
}

/* Glass must stay on top */
.blister{ 
    z-index:3; 
}

/* Small-screen safety */
@media (max-width: 560px){
    .sticker-quote{ 
        top: calc(var(--win-top) + 18px); 
        left: 12px; 
        width: clamp(60px, 22vw, 96px); 
        transform: rotate(6deg); 
    }
}

/* Fancy but subtle entrance */
@keyframes popIn { 
    0%{ 
        transform: translateY(-6px) scale(.95) rotate(6deg); 
        opacity:0 
    } 
    100%{ 
        transform: translateY(0) scale(1) rotate(8deg); 
        opacity:1 
    } 
}

.sticker-quote{ 
    animation: popIn .45s ease-out both .1s; 
}

/* Chat UI Upgrade - Cute Glass Design */
/* Palette for cute glass */
:root{
    --cute-pink:#ff78b8; 
    --cute-lilac:#b69cff; 
    --cute-mint:#8fe4d9;
    --glass-1:rgba(255,255,255,.55); 
    --glass-2:rgba(255,255,255,.22);
    --glass-line:rgba(255,255,255,.66); 
    --ink:#243042;
}

/* Card container */
.chat-card{
    position:relative;
    max-width:min(720px,92vw);
    width:100%; 
    padding:18px;
    border-radius:20px;
    background: linear-gradient(180deg,var(--glass-1),var(--glass-2));
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:
        0 24px 48px rgba(0,0,0,.32),
        inset 0 0 0 1px rgba(255,255,255,.45);
    overflow:hidden;
}

/* subtle noise + diagonal shine */
.chat-card::before{
    content:""; 
    position:absolute; 
    inset:0; 
    pointer-events:none;
    background:
        radial-gradient(150% 100% at 0% -30%, rgba(255,255,255,.35), transparent 40%),
        radial-gradient(120% 80% at 100% 130%, rgba(255,255,255,.15), transparent 60%);
    mix-blend-mode:screen;
}

.chat-card::after{
    content:""; 
    position:absolute; 
    inset:-40% -10%; 
    pointer-events:none;
    background:linear-gradient(104deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
    transform:translateX(-40%) rotate(2deg);
    animation: cardShine 5.5s ease-in-out infinite 1.2s;
}

@keyframes cardShine{ 
    to{ 
        transform:translateX(40%) rotate(2deg);
    } 
}

.chat-header{
    display:flex; 
    align-items:center; 
    gap:10px;
    font-weight:800; 
    color:#fff; 
    text-shadow:0 1px 0 rgba(0,0,0,.18);
    margin-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.35);
    padding-bottom:8px;
}

.chat-icon{ 
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); 
}

.status-led{ 
    width:10px;
    height:10px;
    border-radius:50%;
    margin-left:auto;
    background:#34d399; 
    box-shadow:0 0 10px #34d399; 
    animation:pulse 2.2s ease-in-out infinite; 
}

@keyframes pulse{
    50%{
        box-shadow:0 0 18px #34d399
    }
}

/* Message list & bubbles */
#messages{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:280px;
    overflow:auto;
    scrollbar-width:thin
}

#messages::-webkit-scrollbar{
    height:8px;
    width:8px
}

#messages::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.35);
    border-radius:10px
}

.msg{
    position:relative; 
    max-width:86%; 
    padding:12px 14px; 
    border-radius:16px;
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.35);
    color:#fff;
}

.msg.bot{ 
    align-self:flex-start; 
    background:linear-gradient(180deg, rgba(180,200,255,.50), rgba(150,170,240,.28)); 
}

.msg.user{ 
    align-self:flex-end; 
    background:linear-gradient(180deg, rgba(255,160,210,.55), rgba(255,120,184,.30)); 
}

/* Bubble tails */
.msg.bot::after, 
.msg.user::after{
    content:""; 
    position:absolute; 
    bottom:-8px; 
    width:16px; 
    height:16px; 
    border:inherit; 
    border-top:0; 
    border-left:0;
    background:inherit; 
    transform:rotate(45deg); 
    box-shadow:inherit;
}

.msg.bot::after{ 
    left:18px; 
}

.msg.user::after{ 
    right:18px; 
}

/* Typing indicator (3 bouncing dots) */
.msg.typing{ 
    align-self:flex-start; 
    padding:10px 12px; 
    width:auto; 
}

.msg.typing span{ 
    display:inline-block; 
    width:6px; 
    height:6px; 
    margin:0 3px; 
    border-radius:50%;
    background:#fff; 
    opacity:.8; 
    animation:dot 1.1s infinite ease-in-out; 
}

.msg.typing span:nth-child(2){ 
    animation-delay:.15s 
}

.msg.typing span:nth-child(3){ 
    animation-delay:.3s 
}

@keyframes dot{ 
    0%,80%,100%{ 
        transform:translateY(0) 
    } 
    40%{ 
        transform:translateY(-6px) 
    } 
}

/* Input row */
#chat-form{ 
    display:grid; 
    grid-template-columns: 1fr auto; 
    gap:12px; 
    align-items:center; 
}

#chat-input{
    padding:12px 14px; 
    border-radius:14px; 
    border:1px solid rgba(255,255,255,.55);
    background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
    color:var(--ink); 
    caret-color:var(--cute-lilac);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.06), 0 2px 0 rgba(255,255,255,.35);
}

#chat-input::placeholder{ 
    color:rgba(0,0,0,.45) 
}

#chat-input:focus{ 
    outline:none; 
    box-shadow:0 0 0 2px var(--cute-lilac) inset, 0 0 0 4px rgba(182,156,255,.25); 
}

/* Send button = glossy candy pill */
#send-btn{
    display:inline-grid; 
    place-items:center; 
    min-width:46px; 
    height:46px;
    padding:0 16px; 
    border-radius:14px; 
    border:none; 
    cursor:pointer;
    font-weight:900; 
    color:#fff;
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.7), transparent 40%),
        linear-gradient(135deg, var(--cute-lilac), var(--cute-pink) 55%, var(--cute-mint));
    box-shadow: 0 10px 18px rgba(182,156,255,.45), inset 0 0 0 1px rgba(255,255,255,.6);
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}

#send-btn:hover{ 
    transform:translateY(-1px); 
    filter:saturate(1.1); 
}

#send-btn:active{ 
    transform:translateY(0); 
    box-shadow: 0 6px 12px rgba(182,156,255,.35), inset 0 0 0 1px rgba(255,255,255,.8); 
}

#send-btn::after{ 
    /* small shine sweep on click (JS toggles .clicked) */
    content:""; 
    position:absolute; 
    inset:0; 
    border-radius:inherit; 
    pointer-events:none;
    background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%);
    transform:translateX(-120%); 
    opacity:0; 
    transition:transform .45s ease, opacity .45s ease;
}

#send-btn.clicked::after{ 
    transform:translateX(120%); 
    opacity:1; 
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
    .chat-card::after, 
    .status-led, 
    .msg.typing span, 
    #send-btn::after { 
        animation:none; 
        transition:none; 
    }
}

/* Enhanced Input & Scrollbar Visuals */
:root{
  /* cute glass palette */
  --cute-pink:#ff78b8; --cute-lilac:#b69cff; --cute-mint:#8fe4d9;
  --glass-1:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.42);
  --ink:#243042; --thumb:#c7b7ff; --thumbHover:#e1d8ff;
}

/* Input row – keep grid but add a subtle lift when focused */
#chat-form{
    display:grid; 
    grid-template-columns: 1fr auto; 
    gap:12px; 
    align-items:center;
}

#chat-form:focus-within .chat-card,
.chat-card:focus-within{
    /* keep existing card styles; the input glow will be dominant */
}

/* ✨ Glossy, cute, animated input */
#chat-input{
    height:48px;
    padding:12px 14px;
    border-radius:16px;
    border:1.5px solid transparent;
    background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.75)) padding-box,
        conic-gradient(from var(--angle,0deg),
            var(--cute-lilac), var(--cute-pink) 35%, var(--cute-mint) 70%, var(--cute-lilac)) border-box;
    box-shadow:
        inset 0 2px 6px rgba(0,0,0,.08),
        0 1px 0 rgba(255,255,255,.6);
    color: var(--ink);
    caret-color: var(--cute-lilac);
    transition: box-shadow .25s ease, background .25s ease;
}

#chat-input::placeholder{ 
    color: rgba(0,0,0,.45) 
}

#chat-input:focus{
    outline: none;
    box-shadow:
        0 0 0 3px rgba(182,156,255,.28),
        0 10px 22px rgba(182,156,255,.25),
        inset 0 2px 6px rgba(0,0,0,.08);
}

/* cute focus ring on the whole row */
#chat-form:focus-within{
    filter: drop-shadow(0 8px 18px rgba(182,156,255,.25));
}

/* Keep the send button you already have; slightly tuck its left corner
   so it feels connected to the input */
#send-btn{
    height:48px; 
    min-width:48px; 
    border-radius:16px;
}

/* 🧁 Pretty rounded scrollbar for the message list */
#messages{
    scrollbar-gutter: stable both-edges;
    scrollbar-color: var(--thumb) transparent;        /* Firefox */
    overscroll-behavior: contain;
}

/* WebKit (Chromium/Safari/Edge) */
#messages::-webkit-scrollbar{ 
    width: 12px 
}

#messages::-webkit-scrollbar-track{
    background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.10));
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

#messages::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:
        linear-gradient(180deg, #fff 0%, rgba(255,255,255,.0) 30%),
        linear-gradient(135deg, var(--cute-lilac), var(--cute-pink) 55%, var(--cute-mint));
    border: 3px solid transparent;            /* creates a pill gap */
    background-clip: padding-box, border-box;
    box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.6);
}

#messages::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(180deg, #fff 0%, rgba(255,255,255,.0) 30%),
        linear-gradient(135deg, var(--thumbHover), var(--cute-pink) 55%, var(--cute-mint));
}

/* Optional micro "sparkles" on input when focused */
#chat-input:focus{
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.78)) padding-box,
        conic-gradient(from var(--angle,0deg),
            var(--cute-lilac), var(--cute-pink) 35%, var(--cute-mint) 70%, var(--cute-lilac)) border-box;
}

@supports (background: paint(worklet)){
    /* not required; left here for future Houdini paint */
}

/* Accessibility: reduce motion if requested */
@media (prefers-reduced-motion: reduce){
    #chat-input{ 
        transition:none 
    }
}

/* Single rounded rectangle, long bar like the screenshot */
.glass-banner.single{
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 50;

  /* one row: text (flex:1) + close button */
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;

  /* LENGTH: same long look as the picture */
  width: 540px;                 /* desktop target width (~same as screenshot) */
  min-height: 48px;
  padding: 8px 10px 8px 16px;

  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 24px 48px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.45);
  overflow: hidden;
}

/* soft diagonal shine */
.glass-banner::after{
  content: ""; position: absolute; inset: -40% -10%; pointer-events:none;
  background: linear-gradient(104deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-40%) rotate(2deg);
  animation: bannerShine 6s ease-in-out infinite 1s;
}
@keyframes bannerShine{ to{ transform: translateX(40%) rotate(2deg); } }

/* Remove inner-pill look */
.glass-banner .banner-link{
  display:block; width:100%; text-align:center; text-decoration:none;
  color:#fff; font-weight:800; letter-spacing:.3px;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  padding: 8px 0;    /* no extra background around text */
  background:none; border:0; box-shadow:none;
}

/* Cute round close button (keeps your gradient style) */
.banner-close{
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  border:none; cursor:pointer; color:#fff; font-weight:900;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.7), transparent 40%),
    linear-gradient(135deg, #b69cff, #ff78b8 55%, #8fe4d9);
  box-shadow: 0 10px 18px rgba(182,156,255,.45), inset 0 0 0 1px rgba(255,255,255,.6);
}

/* entrance animation */
@keyframes bannerPop{0%{transform:translate(-50%,-8px) scale(.98); opacity:0}100%{transform:translate(-50%,0) scale(1); opacity:1}}
.glass-banner.appear{ animation: bannerPop .45s ease-out both; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .glass-banner::after, .glass-banner.appear{ animation: none; }
}

/* Mobile: same look, just capped to viewport */
@media (max-width: 640px){
  .glass-banner.single{ width: min(92vw, 540px); }
}

/* Floating glass music button styles */
:root{
  --cute-pink:#ff78b8; --cute-lilac:#b69cff; --cute-mint:#8fe4d9;
  --glass-1:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.42);
}

/* Center the entire FAB group */
#fab-stack{
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;          /* space between buttons */
  z-index: 60;        /* above content, below modals */
  pointer-events: none;       /* so clicks pass through gaps */
}
#fab-stack .hud-fab{
  pointer-events: auto;       /* but buttons stay clickable */
}

/* IMPORTANT: neutralize the old per-button offsets inside the stack */
#fab-stack .hud-fab,
#fab-stack .hud-fab.music,
#fab-stack .hud-fab.x,
#fab-stack .hud-fab.pump,
#fab-stack .hud-fab.gallery,
#fab-stack .hud-fab.photos{
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

/* Keep their visual hover/active effects */
#fab-stack .hud-fab:hover{ filter: saturate(1.05); transform: translateY(-1px) !important; }
#fab-stack .hud-fab:active{ transform: translateY(0) !important; }

/* Tighten the stack on short screens */
@media (max-height: 740px){
  #fab-stack{ gap: 14px; }
}
@media (max-height: 640px){
  #fab-stack{ gap: 10px; }
}

/* CA Bar and Gap System */
:root{
  --ca-reserve: 0px;       /* computed in JS */
  --ca-gap: 16px;          /* extra breathing room above the CA pill */
}

/* CA Bar styling */
.ca-bar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-top: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 -8px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.45);
  padding: 12px 20px;
  z-index: 70;
  text-align: center;
}

.ca-text{
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #243042;
  font-size: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* When the body has .has-ca, push things above the CA bar */
body.has-ca #ca-bar{ z-index: 70; }

body.has-ca #chat,
body.has-ca #chat-interface,
body.has-ca .chat-interface,
body.has-ca .chat-window,
body.has-ca .chat-card{
  /* If chat is flow layout, this adds room above CA */
  margin-bottom: calc(var(--ca-reserve) + var(--ca-gap)) !important;
}

/* If chat is fixed at the bottom, raise it by the same amount */
body.has-ca #chat[style*="bottom"],
body.has-ca #chat-interface[style*="bottom"],
body.has-ca .chat-interface[style*="bottom"],
body.has-ca .chat-window[style*="bottom"],
body.has-ca .chat-card[style*="bottom"]{
  bottom: calc(var(--ca-reserve) + var(--ca-gap)) !important;
}

/* Ensure banner does not cover the stack */
#promo-banner{ z-index: 50; }  /* below the FAB stack */
.video-modal{ z-index: 90; }   /* modal still above all */

/* Ensure no generic .hud-fab rule sets a universal top/left that overrides per-button positions. */
/* If such a rule exists, keep only common visuals there; positioning must be per button. */

/* Common visuals (safe): */
.hud-fab{
  inline-size:56px; block-size:56px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; outline:none;
  border:1px solid rgba(255,255,255,.55);
  background:
    radial-gradient(180% 140% at 20% 0%, rgba(255,255,255,.74), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 18px 36px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.45);
  transition: transform .12s ease, filter .2s ease;
  color:#fff; text-decoration:none;
  position:fixed; left:18px; z-index:60; /* high enough to sit above content but below modals */
}
.hud-fab:hover{ filter:saturate(1.05); }
.hud-fab:active{ transform: translateY(0); }

/* Per-button positions — THESE control vertical stack */
.hud-fab.music{ top:50%; transform: translateY(-50%); }
.hud-fab.x{     top:calc(50% + 72px); transform: translateY(-50%); }
.hud-fab.pump{  top:calc(50% + 144px); transform: translateY(-50%); }
.hud-fab.gallery{ top:calc(50% + 216px); transform: translateY(-50%); }

.hud-fab.music:hover{ transform: translateY(calc(-50% - 1px)); }
.hud-fab.x:hover,
.hud-fab.pump:hover,
.hud-fab.gallery:hover{ transform: translateY(calc(-50% - 1px)); }

/* Icon polish */
.hud-fab .icon-x,
.hud-fab .icon-pill,
.hud-fab .icon-gallery{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }

/* Soft glow rings (keep as before) */
.hud-fab .ring{
  position:absolute; inset:-6px; border-radius:inherit; pointer-events:none;
  background: conic-gradient(from 0deg, #b69cff, #ff78b8 40%, #8fe4d9 80%, #b69cff);
  opacity:.35; filter: blur(6px); z-index:-1;
}

/* Make sure the banner cannot hide/overlap FABs by z-index */
#promo-banner{ z-index:50; }         /* banner below the FABs */
.video-modal{ z-index:90; }          /* modal still above everything */

/* Music FAB specific styles */
.hud-fab.music .icon{ font-size: 20px; text-shadow: 0 1px 0 rgba(0,0,0,.25); }

/* animated equalizer */
.hud-fab .eq{
  position:absolute; inset: 18% 18%;
  display:flex; align-items:flex-end; justify-content:center; gap:4px;
  width:64%; height:52%; opacity:0; transition: opacity .18s ease;
}
.hud-fab .eq i{
  width:4px; height:22%;
  border-radius:3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.65));
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 6px 12px rgba(0,0,0,.18);
  transform-origin: center bottom;
  animation: eq-bounce 1.1s ease-in-out infinite;
  animation-delay: var(--d, 0ms);
}
@keyframes eq-bounce{
  0%,100%{ transform: scaleY(.35) }
  40%{    transform: scaleY(1.05) }
  60%{    transform: scaleY(.6) }
}

/* show EQ when playing, hide play icon */
.hud-fab.playing .eq{ opacity:1; }
.hud-fab.playing .icon{ opacity:0; }

/* colorful glow ring + sparkle for music FAB */
.hud-fab.playing .ring{ opacity:.55; animation: ringSpin 2.6s linear infinite; transform: scale(1); }
@keyframes ringSpin{ to{ transform: rotate(360deg) } }

.hud-fab .sparkle{
  position:absolute; width:8px; height:8px; left:50%; top:50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,0) 70%);
  border-radius:50%; opacity:0; transform: translate(-50%,-50%) scale(.8);
}
.hud-fab.playing .sparkle{ animation: sparklePop 1.4s ease-in-out infinite; }
@keyframes sparklePop{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.6) }
  30%{ opacity:.9; transform: translate(-50%,-72%) scale(1.2) }
  100%{ opacity:0; transform: translate(-50%,-110%) scale(.6) }
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .hud-fab.playing .ring, .hud-fab.playing .sparkle, .hud-fab .eq i{ animation:none; }
}

@media (max-height: 640px){
  .hud-fab.x{ top:calc(50% + 56px); }
  .hud-fab.pump{ top:calc(50% + 112px); }
  .hud-fab.gallery{ top:calc(50% + 168px); }
}

/* Modal overlay + card */
.video-modal{ position: fixed; inset:0; z-index: 90; }
.video-modal[hidden]{ display:none; }
.video-scrim{
  position:absolute; inset:0;
  background: rgba(12,16,28,.48);
  backdrop-filter: blur(6px);
}
.video-card{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: min(920px, 92vw); aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.48));
  border:1px solid rgba(255,255,255,.55);
  border-radius: 20px;
  box-shadow: 0 28px 64px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.45);
  overflow: hidden;
  /* ensure a new stacking context so child z-index works predictably */
  isolation: isolate;
}
#gallery-player{
  width:100%; height:100%; object-fit: cover; display:block; background:#000;
  position: relative;   /* create a layer for the video */
  z-index: 1;           /* video under the close button */
}
.video-close{
  position:absolute; right:10px; top:10px;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  color:#fff; font-weight:900; font-size:22px;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.7), transparent 40%),
    linear-gradient(135deg, #b69cff, #ff78b8 55%, #8fe4d9);
  box-shadow: 0 10px 18px rgba(182,156,255,.45), inset 0 0 0 1px rgba(255,255,255,.6);
  z-index: 3;           /* lift above the video */
  pointer-events: auto; /* be explicit */
}
@media (max-height: 640px){
  .hud-fab.gallery{ top: calc(50% + 200px); }
}

/* Photos FAB – same glass style, placed under Gallery FAB */
.hud-fab.photos{
  position: fixed;
  left: 18px;
  top: calc(50% + 288px); /* music 50%, X +72, Pump +144, Gallery +216, Photos +288 */
  transform: translateY(-50%);
  z-index: 60;

  inline-size: 56px; block-size: 56px; border-radius: 50%;
  display:grid; place-items:center; cursor:pointer; outline:none;

  border:1px solid rgba(255,255,255,.55);
  background:
    radial-gradient(180% 140% at 20% 0%, rgba(255,255,255,.74), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 18px 36px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.45);
  transition: transform .12s ease, filter .2s ease;
  color:#fff;
}
.hud-fab.photos:hover{ transform: translateY(calc(-50% - 1px)); filter: saturate(1.05); }
.hud-fab.photos:active{ transform: translateY(-50%); }
.hud-fab.photos .icon-photos{ filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.hud-fab.photos .ring{
  position:absolute; inset:-6px; border-radius:inherit; pointer-events:none;
  background: conic-gradient(from 0deg, #b69cff, #ff78b8 40%, #8fe4d9 80%, #b69cff);
  opacity:.35; filter: blur(6px); z-index:-1;
}

@media (max-height: 640px){
  .hud-fab.photos{ top: calc(50% + 256px); }
}

/* Photo modal (same glass feel as video modal) */
.photo-modal{ position: fixed; inset:0; z-index: 90; }
.photo-modal[hidden]{ display:none; }
.photo-scrim{
  position:absolute; inset:0;
  background: rgba(12,16,28,.48);
  backdrop-filter: blur(6px);
}

.photo-card{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width: min(920px, 92vw); max-height: 86vh;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.48));
  border:1px solid rgba(255,255,255,.55);
  border-radius: 20px;
  box-shadow: 0 28px 64px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.45);
  overflow: hidden;
  isolation: isolate; /* ensure z-index stacking works */
}

#photo-viewer{
  display:block; width:100%; height:100%;
  object-fit: contain; background:#000; /* letterboxing for mismatched ratios */
  position: relative; z-index: 1;
}

.photo-close{
  position:absolute; right:10px; top:10px;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  color:#fff; font-weight:900; font-size:22px; z-index: 3; pointer-events:auto;
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.7), transparent 40%),
    linear-gradient(135deg, #b69cff, #ff78b8 55%, #8fe4d9);
  box-shadow: 0 10px 18px rgba(182,156,255,.45), inset 0 0 0 1px rgba(255,255,255,.6);
}

/* Chat Height Clamping System */
/* The chat card stays a column and does not stretch indefinitely */
#chat-card, .chat-card, [data-chat-card] { display: flex; flex-direction: column; }

/* Only the inner stream scrolls */
[data-chat-stream]{
  overflow-y: auto !important;
  max-height: var(--chatMax, 38vh) !important; /* JS sets exact px height */
  transition: max-height 200ms ease;
  will-change: max-height;
}

/* Pretty thin scrollbar—glass style */
[data-chat-stream]::-webkit-scrollbar { width: 8px; }
[data-chat-stream]::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  border: 2px solid rgba(255,255,255,.25);
}
[data-chat-stream]{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }

/* Composer stays fixed (no pushing UI) */
.chat-composer, [data-chat-composer] { flex: 0 0 auto; }

/* Responsive fit for 1920×1080 without moving other UI */
@media (max-width: 1920px) and (max-height: 1080px) {
  /* Slightly tighter vertical rhythm so nothing feels crammed */
  .stack-center{
    gap: clamp(16px, 2vh, 28px);
  }

  /* Make the collector react to viewport HEIGHT (vh), not only vw.
     Result: on 1080p it shrinks just enough to leave room for chat + pills. */
  .collector-box{
    /* Keep your width look, but be a bit friendlier on 1080p */
    width: clamp(320px, 48vw, 560px);

    /* Key change: cap by vh instead of a hard 720px */
    height: clamp(420px, 58vh, 640px);
  }

  /* Keep chat within a sane width envelope */
  #chat-panel{
    max-width: min(640px, 92vw);
  }
}

/* === Kawaii Opaque Chat Bubble System === */
:root{
  --aiPink: #FFD9EE;
  --aiPinkEdge: #FFB9E0;
  --userBlue: #D7EAFF;
  --userBlueEdge: #B7DCFF;
  --bubbleRadius: 18px;
  --shadowPink: 0 8px 28px rgba(255, 185, 224, .35);
  --shadowBlue: 0 8px 28px rgba(183, 220, 255, .35);
  --msgGap: 12px;
  --bodyPad: 16px;
  /* Will be set dynamically by JS to the exact height of 3 bubbles */
  --fixedChatHeight: 320px;
  
  /* Scrollbar styling variables */
  --scroll-track: rgba(255,255,255,.22);
  --scroll-thumb-solid: rgba(255, 132, 191, .85); /* cute pink */
  --scroll-thumb-grad: linear-gradient(180deg,#ffd1e9 0%,#f7a8d8 45%,#c6b5ff 100%);
}

.chat--kawaii .chat__body{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat--kawaii .chat__messages{
  /* The messages area will scroll; outer card must NOT grow past 3 bubbles */
  overflow: auto;
  max-height: var(--fixedChatHeight);
  padding: var(--bodyPad);
  scrollbar-width: thin;
}

/* Ensure the chat card itself doesn't grow beyond the fixed height */
.chat--kawaii.chat-card {
  height: auto;
  max-height: none;
}

.chat--kawaii .chat__body {
  height: auto;
  max-height: none;
}

.chat--kawaii .chat__messages::-webkit-scrollbar{ 
  width: 8px; 
}

.chat--kawaii .chat__messages::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #FFC3E6, #CFE5FF);
  border-radius: 999px;
}

/* === Custom Scrollbar Styling === */
/* the scrollable chat list */
.chat-scroll{
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-solid) transparent;
}

/* WebKit scrollbar */
.chat-scroll::-webkit-scrollbar{
  width: 10px;
}

.chat-scroll::-webkit-scrollbar-track{
  background: var(--scroll-track);
  border-radius: 9999px;
  backdrop-filter: blur(6px);
}

.chat-scroll::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb-grad);
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.chat-scroll:hover::-webkit-scrollbar-thumb{ 
  filter: brightness(1.05); 
}

.chat-scroll::-webkit-scrollbar-thumb:active{ 
  filter: brightness(.95); 
}

/* === Message Layout and Greeting Bubble Normalization === */
/* base layout for the list of messages */
.chat-scroll{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* existing classes—use the project's real names if different */
.message.assistant{ 
  align-self: flex-start; 
}

.message.user{ 
  align-self: flex-end; 
}

/* If the greeting uses a unique class, map it to assistant look */
.welcome-message,
.intro-message,
.system-greeting{
  align-self: flex-start;                   /* left align */
  max-width: min(680px, 80%);               /* same width as other assistant bubbles */
  background: var(--aiPink) !important;     /* use existing AI bubble variable */
  color: #4b2b3f;
  border-radius: 18px 18px 18px 12px;       /* same radius as AI bubbles */
  padding: 14px 16px;
  box-shadow: var(--shadowPink);
  /* remove any odd margins that push it off-center */
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* If the very first child renders differently, normalize it */
.chat-scroll > .message:first-child{
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
}

.chat--kawaii .bubble{
  display: inline-block;
  padding: 12px 14px;
  border-radius: var(--bubbleRadius);
  max-width: min(84%, 680px);
  line-height: 1.35;
  font-weight: 500;
  border: 1px solid transparent;
  /* remove any translucency/backdrop from prior styles */
  background: initial !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: var(--msgGap) 0;
}

.chat--kawaii .bubble--ai{
  background-color: var(--aiPink) !important;
  border-color: var(--aiPinkEdge);
  box-shadow: var(--shadowPink);
  color: #4b2b3f;
  border-top-left-radius: 8px;
}

.chat--kawaii .bubble--user{
  background-color: var(--userBlue) !important;
  border-color: var(--userBlueEdge);
  box-shadow: var(--shadowBlue);
  color: #1f3550;
  margin-left: auto; /* user bubbles align to right */
  border-top-right-radius: 8px;
}

/* Composer + glossy send button kept cute */
.chat--kawaii .chat__composer{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--bodyPad) var(--bodyPad);
}

.chat--kawaii .chat__input{
  flex: 1;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 8px 30px rgba(120, 110, 255, .10);
  padding: 0 14px;
  outline: none;
}

.chat--kawaii .send-btn{
  width: 48px; 
  height: 48px; 
  border-radius: 14px; 
  border: 0;
  background: radial-gradient(120% 120% at 100% 0%, #CFE5FF 0%, #FFC3E6 60%, #F9E7FF 100%);
  box-shadow: 0 10px 28px rgba(120, 110, 255, .18), 0 2px 0 rgba(255,255,255,.6) inset;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s;
}

.chat--kawaii .send-btn:hover{ 
  transform: translateY(-1px); 
}

.chat--kawaii .send-btn:active{ 
  transform: translateY(0); 
  filter: brightness(.98); 
}

.chat--kawaii .send-icon{ 
  width: 22px; 
  height: 22px; 
  fill: #ffffff; 
}

/* Legacy compatibility - keep existing styles for other chat instances */
[data-chat-messages] {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Glass bubbles (legacy) */
.bubble:not(.chat--kawaii .bubble) {
  --glass-bg: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.35);
  --glow: rgba(255,255,255,0.25);

  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, var(--glass-bg), rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 22px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 10px 14px;
  color: #eef1ff;
  line-height: 1.35;
  font-size: 14px;
  max-width: 78%;
  word-wrap: break-word;
}

.bubble--ai:not(.chat--kawaii .bubble--ai) {
  align-self: flex-start;
}

.bubble--user:not(.chat--kawaii .bubble--user) {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.38);
}

/* Input row (legacy) */
.chat-composer:not(.chat--kawaii .chat__composer) {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 8px 12px 12px;
}

#chat-input:not(.chat--kawaii .chat__input) {
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  backdrop-filter: blur(14px);
  color: #eef1ff;
  padding: 0 12px;
  outline: none;
}

#chat-input:not(.chat--kawaii .chat__input)::placeholder { 
  color: rgba(238,241,255,0.6); 
}

/* Glassy send button (legacy) */
.btn-glass.btn-send:not(.chat--kawaii .send-btn) {
  height: 40px;
  width: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.35);
  background: radial-gradient(120% 120% at 20% 0%, rgba(255, 180, 255, .35), rgba(164, 196, 255, .28) 40%, rgba(255, 255, 255, .08) 70%),
              linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  backdrop-filter: blur(14px);
  transition: transform .08s ease, box-shadow .2s ease;
  cursor: pointer;
}

.btn-glass.btn-send:not(.chat--kawaii .send-btn):hover { 
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); 
}

.btn-glass.btn-send:not(.chat--kawaii .send-btn):active { 
  transform: translateY(1px) scale(.98); 
}

.btn-glass.btn-send:not(.chat--kawaii .send-btn) svg { 
  display: block; 
}

/* Legacy message class compatibility */
.msg { 
  composes: bubble; 
}

.msg.bot { 
  composes: bubble--ai; 
}

.msg.user { 
  composes: bubble--user; 
}

/* If your bundler doesn't support `composes`, then duplicate the rules instead */
.msg:not(.chat--kawaii .bubble) {
  --glass-bg: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.35);
  --glow: rgba(255,255,255,0.25);

  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, var(--glass-bg), rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 22px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 10px 14px;
  color: #eef1ff;
  line-height: 1.35;
  font-size: 14px;
  max-width: 78%;
  word-wrap: break-word;
}

.msg.bot:not(.chat--kawaii .bubble--ai) {
  align-self: flex-start;
}

.msg.user:not(.chat--kawaii .bubble--user) {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.38);
}