/* Animated body language: each action is its own pill, on its own line, and its icon acts it out. */
.rich{display:flex;flex-direction:column;align-items:flex-start;gap:10px;white-space:normal}
.rich .say{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.beat{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 13px 6px 9px;border-radius:999px;font-style:italic;font-weight:500;font-size:.9375em;line-height:1.3;animation:beat-pop .5s cubic-bezier(.2,.7,.2,1) both}
.beat-icon{display:inline-flex;flex:none;transform-origin:50% 60%}
/* Chalkboard neon: a dark slate chip with a thin glowing line and softly lit writing. No filled colour. */
.beat{background:#0d1316;border:1px solid color-mix(in srgb,currentColor 38%,transparent);box-shadow:0 0 12px color-mix(in srgb,currentColor 14%,transparent),inset 0 0 10px color-mix(in srgb,currentColor 6%,transparent);text-shadow:0 0 9px color-mix(in srgb,currentColor 45%,transparent);letter-spacing:.01em}
.beat-icon svg{filter:drop-shadow(0 0 4px color-mix(in srgb,currentColor 55%,transparent))}
.tone-pink{color:#ff9ccb}.tone-lemon{color:#8fdcff}.tone-mint{color:#86f0c4}.tone-soft{color:#ebe8e0}
.beat-laugh .beat-icon{animation:beat-wobble 1.6s ease-in-out infinite}
.beat-smile .beat-icon{animation:beat-nod 2.2s ease-in-out infinite}
.beat-eyes .beat-icon{animation:beat-blink 2.2s ease-in-out infinite}
.beat-close .beat-icon{animation:beat-lean 1.4s ease-in-out infinite}
.beat-touch .beat-icon{animation:beat-stroke 1.8s ease-in-out infinite}
.beat-lips .beat-icon{animation:beat-pulse 1.5s ease-in-out infinite}
.beat-heart .beat-icon{animation:beat-heart 1.3s ease-in-out infinite}
.beat-whisper .beat-icon{animation:beat-rise 2s ease-in-out infinite}
.beat-sway .beat-icon{animation:beat-sway 1.8s ease-in-out infinite}
.beat-tease .beat-icon{animation:beat-spin 3s linear infinite}
.beat-undress .beat-icon{animation:beat-drop 1.9s ease-in-out infinite}
.beat-pose .beat-icon{animation:beat-nod 2.4s ease-in-out infinite}
.beat-soft .beat-icon{animation:beat-pulse 2s ease-in-out infinite}
@keyframes beat-pop{0%{opacity:0;transform:translateY(8px) scale(.94)}60%{transform:translateY(-2px) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes beat-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
@keyframes beat-lean{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@keyframes beat-heart{0%,100%{transform:scale(1)}15%{transform:scale(1.28)}30%{transform:scale(1)}45%{transform:scale(1.18)}}
@keyframes beat-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}
@keyframes beat-blink{0%,42%,58%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}
@keyframes beat-sway{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes beat-rise{0%,100%{transform:translateY(3px);opacity:.45}50%{transform:translateY(-4px);opacity:1}}
@keyframes beat-nod{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes beat-stroke{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(3px,3px) rotate(-8deg)}}
@keyframes beat-spin{to{transform:rotate(360deg)}}
@keyframes beat-drop{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px) rotate(6deg)}}
/* media a companion sends: always shown whole, never cropped */
.media-card{display:flex;flex-direction:column;gap:10px;width:min(100%,360px);padding:12px;border-radius:16px;border:1px solid var(--mc,#6ee7a0);background:color-mix(in srgb,var(--mc,#6ee7a0) 7%,#0b0b0e)}
.media-card.video{--mc:#ffc61a}
.media-head{display:flex;align-items:center;gap:10px;font-size:.8125rem;line-height:1.4;color:#b9b5ad}
.media-head img{flex:none;height:46px;width:auto;border-radius:8px;object-fit:contain}
.media-head b{color:var(--mc,#6ee7a0)}
.media-frame{position:relative;display:block;line-height:0}
.media-frame>img,.media-frame>video{display:block;width:100%;height:auto;border-radius:12px;background:#000}
.media-card.image.ready .media-frame::after{content:"";position:absolute;right:8px;bottom:8px;width:44px;height:45px;background:url(/lustlab/img/evoke-ai-mark.png) center/contain no-repeat;opacity:.85;filter:drop-shadow(0 1px 3px #000a);pointer-events:none}
.media-wait{height:150px;border-radius:12px;background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--mc,#6ee7a0) 22%,transparent) 50%,transparent 100%) 0 0/400px 100%,color-mix(in srgb,var(--mc,#6ee7a0) 6%,#0b0b0e);animation:media-shimmer 1.8s linear infinite}
.media-note{font-size:.8125rem;color:#b9b5ad}
.media-actions{display:flex;flex-wrap:wrap;gap:8px}
.media-actions a,.media-actions button{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--mc,#6ee7a0);background:none;color:var(--mc,#6ee7a0);font:700 .875rem inherit;font-family:inherit;cursor:pointer;text-decoration:none}
.media-actions .solid{background:var(--mc,#6ee7a0);color:#04180d}
@keyframes media-shimmer{from{background-position:-200px 0,0 0}to{background-position:200px 0,0 0}}
@media (prefers-reduced-motion:reduce){.beat,.beat-icon,.media-wait{animation:none!important}}

.media-card.image .media-frame>img{cursor:zoom-in;min-height:120px}
.media-card.image.ready .media-frame>img{min-height:0}
.media-card.gone{--mc:#3a3a44;padding:12px 14px;font-size:13px;line-height:1.4;color:#9ca8b9;width:auto;align-self:flex-start}

/* ── While her photo or video is being made: her photo blurred inside her liquid ring ── */
@property --mk{syntax:"<angle>";inherits:false;initial-value:0deg}
.making{--a:#ff7ab8;--b:#f2c94c;--c:#5aa9ff;position:relative;display:block;width:min(100%,300px);padding:3px;border-radius:22px;isolation:isolate;line-height:0}
.making-ring,.making-glow{position:absolute;inset:0;border-radius:inherit;background:conic-gradient(from var(--mk),var(--a),var(--b) 22%,var(--c) 41%,var(--a) 58%,var(--c) 74%,var(--b) 90%,var(--a));animation:making-pour 2.6s linear infinite,making-slosh 1.7s ease-in-out infinite alternate;z-index:-1}
.making-glow{inset:-5px;filter:blur(14px);opacity:.75;animation:making-pour 3.4s linear infinite reverse,making-slosh 2.3s ease-in-out infinite alternate-reverse;z-index:-2}
.making-photo{position:relative;display:block;overflow:hidden;border-radius:19px;background:#0b0b0e}
.making-photo img{display:block;width:100%;height:auto;filter:blur(22px) saturate(1.15) brightness(.72);transform:scale(1.12);animation:making-breathe 3.2s ease-in-out infinite alternate}
.making-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#000c 100%),linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--a) 26%,transparent) 50%,transparent 70%) 0 0/300% 100%;animation:making-sweep 2.8s linear infinite}
.making-line{position:absolute;left:3px;right:3px;bottom:3px;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:0 0 19px 19px;font:600 .8125rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#f4f4f5;white-space:nowrap;overflow:hidden}
.making-line i{flex:none;font-style:normal;color:var(--a);text-shadow:0 0 10px var(--a)}
.making-roll{position:relative;flex:0 1 auto;min-width:0;height:44px;overflow:hidden}
.making-roll span{display:block;height:44px;line-height:44px;overflow:hidden;text-overflow:ellipsis}
.making-roll span.out{position:absolute;left:0;top:0;animation:making-out .36s cubic-bezier(.4,0,.2,1) forwards}
.making-roll span.in{animation:making-in .36s cubic-bezier(.2,.7,.2,1)}
.making-line em{flex:none;width:7px;height:15px;margin-left:-4px;border-radius:1px;background:var(--a);box-shadow:0 0 10px var(--a);animation:making-caret 1s steps(2,jump-none) infinite}
.media-card:has(.making){border-color:transparent;background:none;padding:6px 0}
@keyframes making-pour{to{--mk:360deg}}
@keyframes making-slosh{0%{border-radius:22px 26px 20px 28px/26px 20px 28px 22px;scale:1}50%{border-radius:28px 20px 26px 22px/20px 28px 22px 26px;scale:1.012}100%{border-radius:20px 28px 24px 20px/28px 22px 26px 20px;scale:.996}}
@keyframes making-breathe{from{transform:scale(1.12)}to{transform:scale(1.2)}}
@keyframes making-sweep{from{background-position:0 0,120% 0}to{background-position:0 0,-120% 0}}
@keyframes making-out{to{transform:translateY(-100%);opacity:0}}
@keyframes making-in{from{transform:translateY(100%);opacity:0}}
@keyframes making-caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.making-ring,.making-glow,.making-photo img,.making-photo::after,.making-line em,.making-roll span{animation:none!important}}

/* ── The liquid ring, wherever something is waiting or resting: finding someone, an empty room, her photo ── */
.lring{--a:#ff7ab8;--b:#f2c94c;--c:#5aa9ff;--size:132px;position:relative;display:grid;place-items:center;width:var(--size);height:var(--size);flex:none;border-radius:50%;isolation:isolate}
.lring::before,.lring::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:46% 54% 57% 43%/52% 44% 56% 48%;background:conic-gradient(from var(--mk),var(--a),var(--b) 22%,var(--c) 41%,var(--a) 58%,var(--c) 74%,var(--b) 90%,var(--a));animation:making-pour 2.6s linear infinite,lring-slosh 1.7s ease-in-out infinite alternate;pointer-events:none}
.lring::after{inset:-7px;filter:blur(14px);opacity:.7;z-index:-2;animation:making-pour 3.4s linear infinite reverse,lring-slosh 2.3s ease-in-out infinite alternate-reverse}
.lring-core{display:grid;place-items:center;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:50%;background:#0b0e13;overflow:hidden;font-size:calc(var(--size)*.36);line-height:1;color:var(--a)}
@keyframes lring-slosh{0%{border-radius:46% 54% 57% 43%/52% 44% 56% 48%;scale:1}50%{border-radius:58% 42% 45% 55%/43% 58% 42% 57%;scale:1.04}100%{border-radius:42% 58% 52% 48%/57% 45% 55% 43%;scale:.99}}
.lring.is-photo{display:block;width:fit-content;height:auto;padding:3px;border-radius:22px}
.lring.is-photo::before,.lring.is-photo::after{border-radius:22px;animation-name:making-pour,making-slosh}
.seek{--size:150px;margin:35px auto 0}
.seek-heart{display:block;width:44%;height:auto;overflow:visible}
.seek-level{animation:seek-fill 3.6s ease-in-out infinite alternate}
.seek-wave{animation:seek-wave 1.5s linear infinite}
.seek-line{--a:#ff7ab8;display:flex;justify-content:center;height:44px;margin-top:20px}
.seek-line .making-line{position:static;height:44px;padding:0;border-radius:0;font-size:.875rem;color:#c9d2e0}
@keyframes seek-fill{from{transform:translateY(46px)}to{transform:translateY(4px)}}
@keyframes seek-wave{from{transform:translateX(0)}to{transform:translateX(64px)}}
.empty-ring{--size:96px;--a:var(--room-color,#b79bff);--b:color-mix(in srgb,var(--room-color,#b79bff) 40%,#fff);--c:#ff7ab8;margin-bottom:29px}
@media (prefers-reduced-motion:reduce){.lring::before,.lring::after,.seek-level,.seek-wave{animation:none!important}.seek-level{transform:translateY(24px)}}

/* Free Credits, in the chat: a small private pill with the liquid ring. */
.free-nudge{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;margin:2px auto 16px;padding:7px 16px 7px 8px;border:1px solid #242c39;border-radius:999px;background:#0e1218;color:#eef2f7;text-decoration:none;transition:border-color .15s,transform .15s}
.free-nudge[hidden]{display:none}
.free-nudge:hover{border-color:#f2c94c;transform:translateY(-1px)}
.free-nudge .lring{--size:38px;--a:#f2c94c;--b:#ff7ab8;--c:#5aa9ff}
.free-nudge .lring::after{inset:-4px;filter:blur(7px);opacity:.5}
.free-nudge .lring-core{width:calc(100% - 5px);height:calc(100% - 5px);color:#f2c94c}
.free-nudge b{display:block;font-size:.875rem;font-weight:600;line-height:1.2}
.free-nudge small{display:block;font-size:.75rem;color:#9ca8b9}
.free-nudge i{font-style:normal;color:#9ca8b9;margin-left:2px}
body[data-screen="chat"][data-focus="on"] .free-nudge{display:none}

/* Something she sent from her phone, locked until it is paid for */
.media-card.locked{--mc:#ff4fa3;gap:10px}
.media-card.locked.video{--mc:#ffc61a}
.media-card.locked .media-frame{position:relative;display:block;overflow:hidden;border-radius:12px;background:#0e1218}
.media-card.locked .media-frame img{display:block;width:100%;height:auto;filter:blur(26px) saturate(1.2) brightness(.8);transform:scale(1.12)}
.media-lock{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;font-weight:700;font-size:1rem;color:#fff;text-shadow:0 2px 12px #000}
.media-unlock{min-height:46px;border-radius:12px;border:0;background:#ffc61a;color:#1c1500;font:inherit;font-weight:800;cursor:pointer;transition:transform .12s,filter .12s}
.media-unlock:hover{transform:translateY(-1px);filter:brightness(1.08)}