/* ================================================================
   OURS — private lounge interface
   One responsive visual system for login, chat, moods, media and calls.
   ================================================================ */

* { box-sizing: border-box; }

:root {
    color-scheme: dark;
    --bg: #080b16;
    --bg-deep: #050711;
    --panel: #101626;
    --panel-2: #161e33;
    --panel-3: #1c2640;
    --glass: rgba(16, 22, 38, 0.86);
    --ink: #f7f8ff;
    --ink-soft: #d9deed;
    --muted: #98a2bd;
    --muted-2: #68738f;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);
    --violet: #8b7cff;
    --violet-deep: #6655e7;
    --cyan: #4ee8d2;
    --rose: #ff6f91;
    --danger: #ff647c;
    --success: #58e6a9;
    --mine-a: #7564ee;
    --mine-b: #5c4bd2;
    --theirs: #151d30;
    --shadow: rgba(0, 0, 0, 0.42);
    --shadow-soft: rgba(0, 0, 0, 0.22);
    --ease: cubic-bezier(0.22, 0.8, 0.2, 1);
    --spring: cubic-bezier(0.2, 1.25, 0.35, 1);
    --header-h: 76px;
}

html[data-mood="hot"] {
    --bg: #11050b;
    --bg-deep: #090207;
    --panel: #1d0d18;
    --panel-2: #2a1120;
    --panel-3: #3a152a;
    --glass: rgba(29, 13, 24, 0.88);
    --ink: #fff7fa;
    --ink-soft: #f5dfe7;
    --muted: #c39aaa;
    --muted-2: #8d6575;
    --line: rgba(255, 145, 178, 0.12);
    --line-strong: rgba(255, 145, 178, 0.22);
    --violet: #ff4f87;
    --violet-deep: #cf275f;
    --cyan: #ff9fc0;
    --rose: #ff4b77;
    --mine-a: #d52c68;
    --mine-b: #a81851;
    --theirs: #2a111f;
    --shadow: rgba(12, 0, 6, 0.6);
}

html, body { margin: 0; width: 100%; height: 100%; }
html { background: var(--bg); }
body {
    font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cyan) 80%, white);
    outline-offset: 3px;
}
::selection { color: #fff; background: color-mix(in srgb, var(--violet) 75%, transparent); }
.hidden { display: none !important; }
.icon-sprite { position: fixed; width: 0; height: 0; overflow: hidden; }
.ui-icon {
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* ---------------- Login ---------------- */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    position: relative;
    isolation: isolate;
    overflow: auto;
    padding: 34px 20px;
    background:
        radial-gradient(circle at 15% 18%, rgba(139, 124, 255, 0.15), transparent 30%),
        radial-gradient(circle at 83% 80%, rgba(78, 232, 210, 0.11), transparent 27%),
        var(--bg);
}
.login-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient-grid {
    position: absolute; inset: 0; opacity: 0.24;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(circle at center, #000, transparent 78%);
    mask-image: radial-gradient(circle at center, #000, transparent 78%);
}
.ambient-orb { position: absolute; display: block; border-radius: 50%; filter: blur(1px); }
.orb-one {
    width: min(52vw, 700px); aspect-ratio: 1; top: -31%; left: -18%;
    border: 1px solid rgba(139,124,255,.18); box-shadow: inset 0 0 140px rgba(139,124,255,.06);
    animation: ambientDrift 15s var(--ease) infinite alternate;
}
.orb-two {
    width: min(43vw, 560px); aspect-ratio: 1; right: -16%; bottom: -28%;
    border: 1px solid rgba(78,232,210,.16); box-shadow: inset 0 0 130px rgba(78,232,210,.05);
    animation: ambientDrift 18s var(--ease) -8s infinite alternate-reverse;
}
.orb-three {
    width: 9px; height: 9px; top: 16%; right: 22%; background: var(--cyan);
    box-shadow: 0 0 28px 8px rgba(78,232,210,.28); animation: softBlink 3.2s ease-in-out infinite;
}
.login-card {
    --tilt-x: 0deg; --tilt-y: 0deg;
    position: relative;
    width: min(100%, 500px);
    padding: 34px 38px 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 32px;
    background: linear-gradient(155deg, rgba(22,30,51,.96), rgba(12,17,30,.98));
    box-shadow: 0 42px 120px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.08);
    transform: perspective(1300px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    transition: transform .16s ease-out, box-shadow .3s ease;
    animation: loginReveal .7s var(--ease) both;
}
.login-card::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px;
    background: linear-gradient(90deg, var(--violet), var(--cyan), var(--rose));
}
.login-card::after {
    content: ""; position: absolute; width: 220px; height: 220px; top: -130px; right: -100px;
    border-radius: 50%; background: rgba(139,124,255,.08); filter: blur(15px); pointer-events: none;
}
.login-card.is-tilting { box-shadow: 0 50px 140px rgba(0,0,0,.56), inset 0 1px rgba(255,255,255,.1); }
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 34px; }
.login-mark {
    width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px;
    color: #fff; background: linear-gradient(135deg, var(--violet), var(--violet-deep));
    box-shadow: 0 12px 28px rgba(105,87,232,.3), inset 0 1px rgba(255,255,255,.25);
}
.login-mark svg { width: 23px; height: 23px; }
.login-wordmark { color: var(--ink); font-size: 12px; font-weight: 900; letter-spacing: .22em; }
.login-intro { margin-bottom: 29px; }
.login-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.login-eyebrow span { width: 18px; height: 1px; background: currentColor; }
.login-card h1 { margin: 0 0 13px; color: var(--ink); font-size: clamp(31px, 8vw, 43px); font-weight: 760; line-height: 1.04; letter-spacing: -.045em; }
.login-card h1 em { color: var(--violet); font-style: normal; }
.subtitle { max-width: 410px; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.login-step { display: flex; align-items: center; gap: 10px; margin: 0 0 13px; color: var(--ink-soft); font-size: 12px; }
.login-step > span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--cyan); font-size: 10px; font-weight: 850; }
.login-step strong { font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.role-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.role-btn {
    min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
    padding: 14px; border: 1px solid var(--line); border-radius: 18px; text-align: left; cursor: pointer;
    background: rgba(255,255,255,.035); box-shadow: inset 0 1px rgba(255,255,255,.035);
    transition: transform .2s var(--ease), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.role-btn:hover { transform: translateY(-4px); border-color: rgba(139,124,255,.5); background: rgba(139,124,255,.09); box-shadow: 0 14px 30px rgba(0,0,0,.19); }
.role-btn:active { transform: translateY(0) scale(.985); }
.role-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; color: #bbb4ff; background: rgba(139,124,255,.13); }
.role-she .role-avatar { color: #ffabc1; background: rgba(255,111,145,.12); }
.role-avatar svg, .role-arrow { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.role-avatar svg { width: 25px; height: 25px; }
.role-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.role-copy strong { color: var(--ink); font-size: 14px; }
.role-copy small { color: var(--muted-2); font-size: 10.5px; white-space: nowrap; }
.role-arrow { width: 17px; height: 17px; color: var(--muted-2); transition: transform .18s ease, color .18s ease; }
.role-btn:hover .role-arrow { color: var(--ink); transform: translateX(3px); }
.login-form { display: flex; flex-direction: column; gap: 14px; animation: stageIn .38s var(--ease) both; }
.login-form label { display: flex; flex-direction: column; gap: 7px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.login-field { position: relative; display: block; }
.login-field > svg { position: absolute; z-index: 1; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-field input { width: 100%; min-height: 49px; padding: 12px 14px 12px 43px; border: 1px solid var(--line); border-radius: 15px; outline: 0; color: var(--ink); background: rgba(255,255,255,.035); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.login-field input::placeholder { color: #59647e; }
.login-field:focus-within > svg { stroke: var(--cyan); }
.login-field input:focus { border-color: rgba(78,232,210,.48); background: rgba(78,232,210,.035); box-shadow: 0 0 0 4px rgba(78,232,210,.07); }
.submit-btn {
    min-height: 51px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 3px;
    padding: 13px 18px; border: 0; border-radius: 16px; color: #fff; font-size: 14px; font-weight: 800; cursor: pointer;
    background: linear-gradient(135deg, var(--violet), var(--violet-deep));
    box-shadow: 0 13px 28px rgba(105,87,232,.3), inset 0 1px rgba(255,255,255,.25);
    transition: transform .18s var(--ease), box-shadow .18s ease;
}
.submit-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.submit-btn:hover { transform: translateY(-3px); box-shadow: 0 17px 35px rgba(105,87,232,.38); }
.submit-btn:hover svg { transform: translateX(3px); }
.submit-btn:active { transform: translateY(1px) scale(.99); }
.back-btn { align-self: center; display: flex; align-items: center; gap: 5px; padding: 7px 10px; border: 0; color: var(--muted); background: transparent; font-size: 11.5px; cursor: pointer; }
.back-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.back-btn:hover { color: var(--ink); }
.login-foot { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 26px 0 0; color: #616b84; font-size: 10.5px; text-align: center; }
.login-foot svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.error { display: flex; align-items: flex-start; gap: 9px; margin: -12px 0 19px; padding: 12px 13px; border: 1px solid rgba(255,100,124,.2); border-radius: 14px; color: #ffb2bf; background: rgba(255,100,124,.08); font-size: 12px; line-height: 1.45; }
.error svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- App frame ---------------- */
.chat-page {
    position: relative; display: flex; min-height: 100vh; height: 100dvh; overflow: hidden;
    background:
        radial-gradient(circle at 13% 17%, rgba(139,124,255,.14), transparent 27%),
        radial-gradient(circle at 88% 83%, rgba(78,232,210,.08), transparent 28%),
        var(--bg-deep);
}
.chat-page::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22;
    background-image: linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%); mask-image: radial-gradient(circle at center, black, transparent 80%);
}
html[data-mood="hot"] .chat-page { background: radial-gradient(circle at 16% 20%, rgba(255,58,114,.14), transparent 28%), radial-gradient(circle at 82% 75%, rgba(173,24,80,.12), transparent 32%), var(--bg-deep); }
.chat-shell {
    position: relative; z-index: 1; width: 100%; min-width: 0; min-height: 0; flex: 1;
    display: flex; flex-direction: column; overflow: hidden;
    background:
        radial-gradient(circle at 50% 0, rgba(139,124,255,.055), transparent 32%),
        linear-gradient(180deg, rgba(16,22,38,.97), rgba(8,11,22,.985));
    animation: shellReveal .55s var(--ease) 1.8s both;
}
html[data-mood="hot"] .chat-shell { background: radial-gradient(circle at 50% 0, rgba(255,79,135,.075), transparent 35%), linear-gradient(180deg, rgba(29,13,24,.98), rgba(13,4,10,.99)); }

/* ---------------- Header and menu ---------------- */
.chat-header {
    position: relative; z-index: 60; min-height: var(--header-h); display: flex; align-items: center; gap: 12px;
    padding: 11px 14px 11px 16px; color: var(--ink);
    background: rgba(13,18,32,.9); border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 12px 35px rgba(0,0,0,.16);
}
html[data-mood="hot"] .chat-header { background: rgba(24,9,19,.92); }
.avatar {
    position: relative; width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden;
    padding: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; color: #fff; font-size: 17px; font-weight: 800; cursor: pointer;
    background: linear-gradient(145deg, var(--violet), var(--violet-deep));
    box-shadow: 0 9px 20px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.24);
    transition: transform .2s var(--ease), box-shadow .2s ease;
}
.avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border: 3px solid var(--panel); border-radius: 50%; background: var(--success); }
.avatar img, .call-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar:hover { transform: translateY(-2px); box-shadow: 0 13px 27px rgba(0,0,0,.32), 0 0 0 4px rgba(139,124,255,.09); }
.peer { min-width: 0; display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; }
.peer-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.peer-name { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 780; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.private-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted-2); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.private-chip .ui-icon { width: 10px; height: 10px; }
.peer-status { min-height: 15px; overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.peer-status.online, .peer-status.typing { color: var(--success); }
.peer-status.online::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(88,230,169,.1); animation: softBlink 2.4s ease-in-out infinite; }
.peer-status.typing::after { content: ""; display: inline-block; width: 14px; height: 4px; margin-left: 5px; border-radius: 4px; background: radial-gradient(circle, currentColor 1.4px, transparent 1.8px) 0 0/6px 4px; animation: typingShift .8s steps(2) infinite; }
.menu-wrap { position: relative; display: flex; align-items: center; gap: 5px; margin-left: auto; }
.header-divider { width: 1px; height: 23px; margin: 0 2px; background: var(--line); }
.hdr-btn, .menu-btn, .mood-btn {
    height: 41px; min-width: 41px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 0 11px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink-soft); cursor: pointer;
    background: rgba(255,255,255,.035); box-shadow: inset 0 1px rgba(255,255,255,.035);
    transition: transform .17s var(--ease), color .17s ease, border-color .17s ease, background .17s ease;
}
.mood-btn { padding: 0; font-size: 18px; }
.menu-btn { padding: 0; }
.hdr-btn:hover, .menu-btn:hover, .mood-btn:hover { color: #fff; border-color: var(--line-strong); background: rgba(255,255,255,.075); transform: translateY(-2px); }
.hdr-btn:active, .menu-btn:active, .mood-btn:active { transform: translateY(1px) scale(.94); }
.call-action { padding-inline: 12px; color: var(--ink); }
.call-action .ui-icon { color: var(--cyan); }
.action-label { font-size: 11.5px; font-weight: 700; }
.mood-share-quick { color: var(--cyan); animation: buttonPop .35s var(--spring) both; }
.mood-share-quick.just-shared { animation: sharedPop .75s var(--spring); }
.menu {
    position: absolute; z-index: 80; top: 50px; right: 0; width: min(310px, calc(100vw - 24px));
    padding: 8px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 20px;
    color: var(--ink); background: rgba(16,22,38,.98); box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); transform-origin: top right;
}
html[data-mood="hot"] .menu { background: rgba(29,13,24,.98); }
.menu:not(.hidden) { animation: menuIn .22s var(--spring) both; }
.menu-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 10px 12px; }
.menu-head span { font-size: 13px; font-weight: 800; }
.menu-head small { color: var(--muted-2); font-size: 9.5px; }
.menu-item {
    width: 100%; min-height: 44px; display: flex; align-items: center; padding: 6px 8px; border: 0; border-radius: 12px;
    color: var(--ink-soft); background: transparent; text-align: left; text-decoration: none; cursor: pointer;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}
.menu-item:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateX(2px); }
.menu-leading { display: flex; align-items: center; gap: 11px; min-width: 0; font-size: 12.5px; font-weight: 620; }
.menu-icon { width: 31px; height: 31px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--violet); background: rgba(139,124,255,.075); }
.menu-icon .ui-icon { width: 16px; height: 16px; }
.menu-sep { margin: 6px 8px 3px; padding: 9px 2px 4px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.admin-item .menu-icon { color: var(--cyan); background: rgba(78,232,210,.065); }
.danger-item { color: #ff9aac; }
.danger-item .menu-icon { color: var(--danger); background: rgba(255,100,124,.07); }

/* ---------------- Conversation ---------------- */
.messages {
    position: relative; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 5px;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    padding: 28px clamp(16px, 7vw, 76px) 20px;
    scrollbar-width: thin; scrollbar-color: rgba(139,124,255,.28) transparent;
}
.messages::before { content: ""; position: fixed; left: 50%; top: 28%; width: 420px; height: 420px; border-radius: 50%; background: rgba(139,124,255,.025); filter: blur(50px); transform: translateX(-50%); pointer-events: none; }
.messages::-webkit-scrollbar { width: 6px; }
.messages::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(139,124,255,.28); }
.loading { align-self: center; display: flex; flex-direction: column; align-items: center; width: min(330px, 90%); margin: auto; color: var(--muted); text-align: center; }
.loading-mark { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 15px; border: 1px solid var(--line); border-radius: 19px; color: var(--violet); background: rgba(139,124,255,.08); box-shadow: 0 14px 35px rgba(0,0,0,.2); }
.loading-mark .ui-icon { width: 27px; height: 27px; }
.loading strong { color: var(--ink-soft); font-size: 13px; }
.loading small { margin-top: 4px; color: var(--muted-2); font-size: 10.5px; }
.loading-line { width: 112px; height: 2px; margin-top: 17px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.06); }
.loading-line i { display: block; width: 45%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--violet),var(--cyan)); animation: loadingSlide 1.15s ease-in-out infinite alternate; }
.day-sep { align-self: stretch; flex-shrink: 0; display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted-2); }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg,transparent,var(--line)); }
.day-sep::after { background: linear-gradient(90deg,var(--line),transparent); }
.day-sep span { flex: none; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(12,17,30,.66); font-size: 9.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.msg { display: flex; flex-shrink: 0; min-width: 0; max-width: min(76%, 610px); }
.msg.mine { align-self: flex-end; justify-content: flex-end; }
.msg.theirs { align-self: flex-start; }
.msg.animate.mine { animation: messageInRight .34s var(--spring) both; }
.msg.animate.theirs { animation: messageInLeft .34s var(--spring) both; }
.bubble {
    position: relative; min-width: 0; max-width: 100%; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: 19px;
    color: var(--ink-soft); background: var(--theirs); box-shadow: 0 8px 20px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.035);
    font-size: 14px; line-height: 1.46; overflow-wrap: anywhere; white-space: pre-wrap;
    transition: transform .2s var(--ease), box-shadow .2s ease;
}
.msg.mine .bubble { color: #fff; border-color: rgba(255,255,255,.11); border-bottom-right-radius: 5px; background: linear-gradient(145deg,var(--mine-a),var(--mine-b)); box-shadow: 0 10px 24px rgba(74,59,184,.23), inset 0 1px rgba(255,255,255,.18); }
.msg.theirs .bubble { border-bottom-left-radius: 5px; }
@media (hover:hover) {
    .bubble:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(0,0,0,.23), inset 0 1px rgba(255,255,255,.06); }
}
.bubble .text a { color: var(--cyan); text-decoration-color: color-mix(in srgb,var(--cyan) 45%,transparent); text-underline-offset: 3px; }
.msg.mine .bubble .text a { color: #d9fff8; }
.bubble .meta { float: right; margin: 8px 0 -2px 10px; color: rgba(211,217,235,.56); font-size: 9.5px; line-height: 1; white-space: nowrap; user-select: none; }
.msg.mine .bubble .meta { color: rgba(255,255,255,.62); }
.tick { margin-left: 4px; color: rgba(255,255,255,.5); letter-spacing: -2px; }
.tick.read { color: #87ffed; }
.reply-btn, .edit-btn, .del-btn {
    position: absolute; z-index: 2; top: -9px; width: 27px; height: 27px; display: grid; place-items: center;
    padding: 0; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--muted); background: var(--panel-2);
    box-shadow: 0 6px 15px rgba(0,0,0,.25); cursor: pointer; opacity: 0; font-size: 0;
    transition: opacity .16s ease, transform .16s ease, color .16s ease;
}
.reply-btn::before, .edit-btn::before, .del-btn::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--action-icon) center/contain no-repeat; mask: var(--action-icon) center/contain no-repeat; }
.reply-btn { --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 17-5-5 5-5M4 12h9a7 7 0 0 1 7 7'/%3E%3C/svg%3E"); }
.edit-btn { --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4 11.5-11.5Zm-2 2 3 3'/%3E%3C/svg%3E"); }
.del-btn { --action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3m3 0-1 14H7L6 7m4 4v6m4-6v6'/%3E%3C/svg%3E"); }
.msg.theirs .reply-btn { right: -9px; }
/* Your own bubbles carry reply + edit + delete. `has-edit` is set only when the
   message can actually be rewritten, so a bubble without an edit button (a
   shared-mood card) keeps the original two-button spacing instead of a gap. */
.msg.mine .reply-btn { right: 23px; }
.msg.mine .bubble.has-edit .reply-btn { right: 55px; }
.msg.mine .edit-btn { right: 23px; }
.msg.mine .del-btn { right: -9px; }
.bubble:hover .reply-btn, .bubble:hover .edit-btn, .bubble:hover .del-btn,
.reply-btn:focus-visible, .edit-btn:focus-visible, .del-btn:focus-visible { opacity: 1; }
/* Touch devices never fire :hover, so keep the actions permanently visible
   there — otherwise they are invisible yet tappable, which is worse. */
@media (hover: none) {
    .reply-btn, .edit-btn, .del-btn { opacity: .82; }
}
.reply-btn:hover { color: var(--cyan); transform: translateY(-2px); }
.edit-btn:hover { color: var(--violet); transform: translateY(-2px); }
.del-btn:hover { color: var(--danger); transform: translateY(-2px); }
/* "edited" marker. Both people see it; for the admin it is a button that opens
   the full revision history, which nobody else can reach. */
.bubble .meta .edited-tag { margin-right: 6px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 9px; font-style: italic; opacity: .78; }
.bubble .meta button.edited-tag { border-bottom: 1px dotted currentColor; cursor: pointer; transition: color .15s ease, opacity .15s ease; }
.bubble .meta button.edited-tag:hover, .bubble .meta button.edited-tag:focus-visible { color: var(--cyan); opacity: 1; }
.msg.mine .bubble .meta button.edited-tag:hover, .msg.mine .bubble .meta button.edited-tag:focus-visible { color: #d9fff8; opacity: 1; }
.quote { display: block; min-width: 140px; margin: -2px -3px 8px; padding: 7px 9px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-left: 3px solid var(--cyan); border-radius: 10px; background: rgba(0,0,0,.11); cursor: pointer; }
.quote-name { display: block; margin-bottom: 2px; color: var(--cyan); font-size: 10px; font-weight: 800; }
.quote-text { display: block; overflow: hidden; color: rgba(227,232,245,.68); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.bubble.flash { animation: bubbleFlash 1.1s ease; }
.bubble.deleted { color: var(--muted); border-style: dashed; background: rgba(255,255,255,.025); font-style: italic; }
.del-text { color: var(--muted); }
.bubble.deleted-admin { border: 1px dashed rgba(255,100,124,.38); background: color-mix(in srgb,var(--theirs) 92%,var(--danger)); }
.del-tag { display: block; margin: -2px -2px 7px; padding: 4px 7px; border-radius: 7px; color: #ff9caf; background: rgba(255,100,124,.1); font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

/* Media and files */
.bubble.has-media { padding: 4px 4px 8px; }
.bubble.has-media .text { display: block; padding: 7px 8px 2px; }
.bubble.has-media .meta { margin-right: 7px; }
.bubble.has-media .quote, .bubble.has-media .del-tag { margin: 3px 3px 6px; }
.media { overflow: hidden; border-radius: 15px; line-height: 0; }
.media img, .media video { display: block; width: min(330px, 58vw); max-width: 100%; max-height: 430px; border-radius: 15px; object-fit: cover; background: #05060a; animation: mediaIn .4s var(--ease) both; }
.media img { cursor: zoom-in; }
.media video { object-fit: contain; }
.media.media-broken { padding: 17px; border: 1px solid var(--line); border-radius: 13px; line-height: normal; background: rgba(255,255,255,.04); }
.media.media-broken a { color: var(--cyan); font-size: 12px; text-decoration: none; }
.media.voice { width: min(300px, 62vw); display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid rgba(255,255,255,.08); line-height: normal; background: rgba(0,0,0,.08); }
.voice-mic { width: 37px; height: 37px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 16px; }
.media.voice audio { min-width: 0; flex: 1 1 0; width: 100%; height: 38px; }
.media.doc { width: min(330px, 65vw); line-height: normal; }
.doc-card { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; color: inherit; background: rgba(0,0,0,.09); text-decoration: none; transition: background .16s ease, transform .16s ease; }
.doc-card:hover { background: rgba(255,255,255,.06); transform: translateY(-1px); }
.doc-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 20px; }
.doc-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.doc-name { overflow: hidden; color: inherit; font-size: 12px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta { color: rgba(220,225,239,.54); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.doc-dl { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--cyan); background: rgba(78,232,210,.08); font-size: 16px; }
.doc-wrap { display: flex; flex-direction: column; gap: 5px; }
.doc-open { padding: 7px; border-radius: 9px; color: var(--cyan); background: rgba(0,0,0,.08); font-size: 10.5px; font-weight: 750; text-align: center; text-decoration: none; }
.doc-preview { max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 34px; text-align: center; }
.doc-preview-icon { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 22px; background: var(--panel-2); font-size: 34px; }
.doc-preview-name { max-width: 70vw; overflow-wrap: anywhere; color: var(--ink); font-size: 14px; font-weight: 720; }
.doc-preview-meta { color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.mood-share-bubble { padding: 4px; }
.mood-share { min-width: min(280px,66vw); display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; align-items: center; padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(0,0,0,.1); cursor: pointer; }
.mood-share-emoji { grid-row: 1 / 3; width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.1); font-size: 22px; }
.mood-share-info { min-width: 0; display: flex; flex-direction: column; }
.mood-share-title { color: rgba(255,255,255,.64); font-size: 9px; font-weight: 650; }
.mood-share-name { color: #fff; font-size: 14px; font-weight: 800; }
.mood-share-cta { grid-column: 2; color: rgba(255,255,255,.7); font-size: 9.5px; }
.love-reaction { position: absolute; z-index: 8; inset: 50% auto auto 50%; font-size: 50px; pointer-events: none; animation: reactionPop .85s var(--spring) both; }

/* ---------------- Composer and reply ---------------- */
.composer, .rec-bar {
    position: relative; z-index: 55; display: flex; align-items: flex-end; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom,0px)); border-top: 1px solid var(--line);
    background: rgba(11,15,27,.93); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
html[data-mood="hot"] .composer, html[data-mood="hot"] .rec-bar { background: rgba(20,7,15,.94); }
.composer::before { content: ""; position: absolute; left: 20%; right: 20%; top: -1px; height: 1px; opacity: .4; background: linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent); transition: opacity .2s ease; }
.composer:focus-within::before { opacity: 1; }
.composer-tools { display: flex; align-items: center; gap: 3px; }
.composer-field { min-width: 0; flex: 1; position: relative; }
.composer textarea {
    width: 100%; min-height: 46px; max-height: 140px; display: block; resize: none;
    padding: 12px 84px 11px 15px; border: 1px solid var(--line); border-radius: 16px; outline: 0;
    color: var(--ink); background: rgba(255,255,255,.035); box-shadow: inset 0 1px rgba(255,255,255,.025);
    font-size: 13.5px; line-height: 1.5; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.composer textarea::placeholder { color: var(--muted-2); }
.composer textarea:focus { border-color: rgba(139,124,255,.45); background: rgba(139,124,255,.04); box-shadow: 0 0 0 4px rgba(139,124,255,.055); }
.composer-keyhint { position: absolute; right: 13px; bottom: 16px; color: #505b74; font-size: 9px; pointer-events: none; }
.icon-btn, .send-btn {
    width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--line); border-radius: 15px; cursor: pointer;
    transition: transform .17s var(--ease), color .17s ease, border-color .17s ease, background .17s ease, box-shadow .17s ease;
}
.icon-btn { color: var(--muted); background: rgba(255,255,255,.025); }
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(255,255,255,.065); transform: translateY(-2px); }
#emojiBtn:hover { color: #ffd36b; }
#attachBtn:hover { color: var(--cyan); }
.mic-btn:hover { color: var(--rose); }
.danger-icon { color: var(--danger); }
.send-btn { color: #fff; border-color: rgba(255,255,255,.14); background: linear-gradient(135deg,var(--violet),var(--violet-deep)); box-shadow: 0 10px 23px rgba(91,73,206,.25), inset 0 1px rgba(255,255,255,.24); }
.send-btn:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 14px 29px rgba(91,73,206,.34), inset 0 1px rgba(255,255,255,.25); }
.send-btn:active, .icon-btn:active { transform: translateY(1px) scale(.92); }
.send-btn.has-text { animation: sendReady 2.1s ease-in-out infinite; }
.send-btn:disabled { opacity: .5; cursor: wait; animation: none; transform: none; }
.reply-bar { position: relative; z-index: 54; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); background: rgba(11,15,27,.96); animation: replyUp .22s var(--ease) both; }
.reply-bar-accent { width: 3px; align-self: stretch; border-radius: 4px; background: linear-gradient(var(--violet),var(--cyan)); }
.reply-bar-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; color: var(--violet); background: rgba(139,124,255,.09); }
.reply-bar-icon::before { content: ""; display: block; width: 14px; height: 14px; margin: 8px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m9 17-5-5 5-5M4 12h9a7 7 0 0 1 7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m9 17-5-5 5-5M4 12h9a7 7 0 0 1 7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.reply-bar-content { min-width: 0; flex: 1; }
.reply-bar-name { margin-bottom: 2px; color: var(--violet); font-size: 10.5px; font-weight: 800; }
.reply-bar-text { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.reply-cancel { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; }
.reply-cancel:hover { color: var(--ink); background: rgba(255,255,255,.05); }
/* The edit bar is the reply bar wearing a pencil, so an edit in progress reads
   as clearly different from composing a reply. */
.edit-bar .reply-bar-accent { background: linear-gradient(var(--cyan),var(--violet)); }
.edit-bar .reply-bar-icon { color: var(--cyan); background: rgba(78,232,210,.09); }
.edit-bar .reply-bar-icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4 11.5-11.5Zm-2 2 3 3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4 11.5-11.5Zm-2 2 3 3'/%3E%3C/svg%3E"); }
.edit-bar .reply-bar-name { color: var(--cyan); }
.rec-bar { align-items: center; padding-block: 11px calc(11px + env(safe-area-inset-bottom,0px)); }
.rec-signal { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,100,124,.15); border-radius: 15px; background: rgba(255,100,124,.08); }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 5px rgba(255,100,124,.1); animation: recPulse 1.15s ease-in-out infinite; }
.rec-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rec-time { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; }
.rec-hint { color: var(--muted); font-size: 10.5px; }
.heart-burst { position: absolute; z-index: 12; right: 20px; top: 5px; width: 50px; height: 20px; pointer-events: none; }
.heart-burst span { position: absolute; left: 18px; animation: burstParticle .7s var(--ease) both; }
.heart-burst span:nth-child(2){--x:-18px;animation-delay:.04s}.heart-burst span:nth-child(3){--x:18px;animation-delay:.08s}.heart-burst span:nth-child(4){--x:-9px;animation-delay:.12s}.heart-burst span:nth-child(5){--x:10px;animation-delay:.16s}

/* ---------------- Emoji panel ---------------- */
.emoji-panel { position: relative; z-index: 53; max-height: min(370px,45vh); display: flex; flex-direction: column; overflow: hidden; border-top: 1px solid var(--line); color: var(--ink); background: rgba(14,19,34,.98); box-shadow: 0 -20px 45px rgba(0,0,0,.23); }
.emoji-panel:not(.hidden) { animation: panelUp .28s var(--ease) both; }
.emoji-tab-bar { flex: none; display: flex; overflow-x: auto; padding: 7px 9px 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.emoji-tab-bar::-webkit-scrollbar { display: none; }
.emoji-tab { min-width: 42px; flex: 1; padding: 8px 5px; border: 0; border-bottom: 2px solid transparent; border-radius: 10px 10px 0 0; opacity: .5; background: transparent; cursor: pointer; font-size: 17px; transition: opacity .16s ease, background .16s ease, transform .16s ease; }
.emoji-tab:hover { opacity: .9; background: rgba(255,255,255,.04); }
.emoji-tab.active { opacity: 1; border-bottom-color: var(--violet); background: rgba(139,124,255,.07); }
.emoji-search-wrap { flex: none; padding: 9px 11px 6px; }
.emoji-search-input { width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; outline: 0; color: var(--ink); background: rgba(255,255,255,.035); font-size: 11.5px; }
.emoji-search-input:focus { border-color: rgba(139,124,255,.45); }
.emoji-search-input::placeholder { color: var(--muted-2); }
.emoji-body { min-height: 0; flex: 1; overflow-y: auto; padding: 0 9px 10px; }
.emoji-section-title { position: sticky; z-index: 2; top: 0; padding: 11px 5px 6px; color: var(--muted-2); background: rgba(14,19,34,.96); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.emoji-grid { display: grid; grid-template-columns: repeat(9,1fr); gap: 2px; }
.emoji-btn { aspect-ratio: 1; display: grid; place-items: center; padding: 4px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 20px; transition: transform .15s var(--spring), background .15s ease; }
.emoji-btn:hover { background: rgba(255,255,255,.055); transform: translateY(-2px) scale(1.16); }

/* ---------------- Ambient effects and splash ---------------- */
.love-float { position: absolute; inset: var(--header-h) 0 0; z-index: 0; overflow: hidden; pointer-events: none; }
.love-float span { position: absolute; bottom: -30px; color: var(--violet); opacity: 0; font-size: 18px; animation: floatSymbol 13s linear infinite; }
.love-float span:nth-child(1){left:7%;animation-delay:-1s}.love-float span:nth-child(2){left:18%;animation-delay:-8s}.love-float span:nth-child(3){left:31%;animation-delay:-4s}.love-float span:nth-child(4){left:48%;animation-delay:-11s}.love-float span:nth-child(5){left:64%;animation-delay:-6s}.love-float span:nth-child(6){left:82%;animation-delay:-2s}.love-float span:nth-child(n+7){display:none}
html[data-mood="hot"] .love-float span { color: #ff6f91; }
.splash-overlay { position: fixed; z-index: 9000; inset: 0; display: grid; place-items: center; overflow: hidden; color: #fff; background: #070a14; }
.splash-overlay::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(circle,black,transparent 70%); mask-image: radial-gradient(circle,black,transparent 70%); }
.splash-aurora { position: absolute; width: min(90vw,760px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 130deg,rgba(139,124,255,.23),rgba(78,232,210,.1),rgba(255,111,145,.17),rgba(139,124,255,.23)); filter: blur(65px); opacity: .72; animation: auroraTurn 7s linear infinite; }
.splash-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; animation: splashContentIn .75s var(--ease) both; }
.splash-logo-wrap { position: relative; width: 116px; height: 116px; display: grid; place-items: center; margin-bottom: 25px; }
.splash-logo { width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; color: #fff; background: linear-gradient(145deg,#8b7cff,#6655e7); box-shadow: 0 24px 55px rgba(76,59,188,.38), inset 0 1px rgba(255,255,255,.3); }
.splash-logo .ui-icon { width: 34px; height: 34px; }
.splash-orbit { position: absolute; inset: 5px; border: 1px solid rgba(139,124,255,.34); border-radius: 50%; animation: splashOrbit 4s linear infinite; }
.splash-orbit::after { content: ""; position: absolute; top: 8px; left: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px rgba(78,232,210,.8); }
.orbit-b { inset: -8px; border-color: rgba(78,232,210,.15); animation-direction: reverse; animation-duration: 6s; }
.orbit-b::after { top: auto; left: auto; right: 17px; bottom: 5px; width: 5px; height: 5px; background: var(--rose); }
.splash-eyebrow { margin: 0 0 8px; color: #8f9ab5; font-size: 9px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.splash-title { font-size: 31px; font-weight: 900; letter-spacing: .32em; text-indent: .32em; }
.splash-caption { margin: 9px 0 0; color: #7e89a5; font-size: 11px; }
.splash-progress { width: 135px; height: 2px; margin-top: 28px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.07); }
.splash-progress span { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg,var(--violet),var(--cyan)); animation: splashLoad 1.65s var(--ease) both; }
.splash-overlay.splash-exit { animation: splashOut .55s var(--ease) both; }

/* ---------------- Mood picker and transition ---------------- */
.mood-overlay, .hot-rules-overlay { position: fixed; z-index: 3000; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(3,4,10,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fadeIn .22s ease both; }
.mood-sheet { width: min(100%,620px); padding: 12px 20px calc(22px + env(safe-area-inset-bottom,0px)); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 28px 28px 0 0; background: linear-gradient(155deg,var(--panel-2),var(--panel)); box-shadow: 0 -30px 90px rgba(0,0,0,.5); animation: sheetIn .36s var(--spring) both; }
.mood-sheet-handle { width: 38px; height: 4px; margin: 0 auto 17px; border-radius: 5px; background: rgba(255,255,255,.15); }
.mood-sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(139,124,255,.2); border-radius: 14px; color: var(--violet); background: rgba(139,124,255,.09); }
.sheet-eyebrow { margin: 0 0 2px; color: var(--muted-2); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.mood-sheet h3 { margin: 0; color: var(--ink); font-size: 20px; letter-spacing: -.025em; }
.mood-sub { margin: 11px 0 17px; color: var(--muted); font-size: 11.5px; }
.mood-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mood-card { position: relative; min-height: 155px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; overflow: hidden; padding: 17px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; color: #fff; text-align: left; cursor: pointer; isolation: isolate; box-shadow: 0 14px 30px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.15); transition: transform .2s var(--spring), box-shadow .2s ease, border-color .2s ease; }
.mood-card > * { position: relative; z-index: 2; }
.mood-card-glow { position: absolute; z-index: 0; inset: 0; opacity: .7; }
.mood-card.m-normal { background: linear-gradient(145deg,#393075,#181a38); }
.mood-card.m-normal .mood-card-glow { background: radial-gradient(circle at 80% 15%,rgba(78,232,210,.37),transparent 34%); }
.mood-card.m-hot { background: linear-gradient(145deg,#6d1438,#260b1b); }
.mood-card.m-hot .mood-card-glow { background: radial-gradient(circle at 82% 14%,rgba(255,111,145,.4),transparent 36%); }
.mood-card:hover { transform: translateY(-6px) scale(1.01); border-color: rgba(255,255,255,.25); box-shadow: 0 21px 40px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.18); }
.mood-card:active { transform: translateY(0) scale(.98); }
.mood-card.active { border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(139,124,255,.16),0 18px 35px rgba(0,0,0,.25); }
.mood-card.active::after { content: "✓"; position: absolute; z-index: 3; top: 12px; right: 12px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 9px; color: #121527; background: #fff; font-size: 12px; font-weight: 900; animation: buttonPop .3s var(--spring); }
.mood-card-emoji { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: rgba(255,255,255,.1); font-size: 23px; }
.lip-photo { width: 100%; height: 100%; display: block; object-fit: cover; }
.mood-card-copy { display: flex; flex-direction: column; gap: 3px; }
.mood-card-name { font-size: 15px; font-weight: 800; }
.mood-card-tag { color: rgba(255,255,255,.62); font-size: 9.5px; }
.mood-share-footer { margin-top: 12px; }
.mood-share-btn, .hot-rules-enter { width: 100%; min-height: 47px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink-soft); background: rgba(255,255,255,.035); cursor: pointer; font-size: 11.5px; font-weight: 750; transition: transform .17s var(--ease), background .17s ease, border-color .17s ease; }
.mood-share-btn:hover { transform: translateY(-2px); border-color: var(--line-strong); background: rgba(255,255,255,.07); }
.mood-transition { --mt-color-a:#8b7cff;--mt-color-b:#080b16; position: fixed; z-index: 6000; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; opacity: 0; background: radial-gradient(circle,var(--mt-color-a),var(--mt-color-b) 72%); perspective: 900px; }
.mood-transition.active { animation: moodPortal 1.1s ease both; }
.mood-transition.after-dark.active { animation-duration: 2s; background: radial-gradient(circle at center,#bf1e58,#16050d 70%); }
.mt-ring { position: absolute; width: 70px; height: 70px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; opacity: 0; }
.mood-transition.active .mt-ring { animation: portalRing 1.05s var(--ease) both; }
.mood-transition.active .mt-ring:nth-child(2){animation-delay:.1s}.mood-transition.active .mt-ring:nth-child(3){animation-delay:.2s}
.mood-transition.after-dark.active .mt-ring { animation-duration: 1.8s; }
.mt-emoji { z-index: 2; width: 100px; height: 100px; display: grid; place-items: center; overflow: hidden; border-radius: 32px; font-size: 68px; filter: drop-shadow(0 20px 45px rgba(0,0,0,.38)); }
.mt-lip { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.mood-transition.active .mt-emoji { animation: portalIcon 1.05s var(--spring) both; }
.mood-transition.after-dark.active .mt-emoji { animation-duration: 1.8s; }
.mt-copy { position: absolute; z-index: 3; top: calc(50% + 80px); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mt-kicker { color: rgba(255,255,255,.65); font-size: 9px; font-weight: 850; letter-spacing: .2em; }
.mt-title { font-size: 28px; letter-spacing: -.03em; }
.mt-line { color: rgba(255,255,255,.7); font-size: 11px; }
.hot-rules-overlay { align-items: center; padding: 18px; }
.hot-rules-card { position: relative; width: min(100%,470px); max-height: calc(100dvh - 36px); overflow-y: auto; padding: 36px 32px 29px; border: 1px solid rgba(255,120,160,.18); border-radius: 28px; outline: 0; color: #fff; background: linear-gradient(155deg,#29101f,#12070d); box-shadow: 0 36px 100px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.07); transform: translateY(18px) scale(.98); opacity: 0; transition: opacity .28s ease, transform .28s var(--ease); }
.hot-rules-overlay.visible .hot-rules-card { transform: none; opacity: 1; }
.hot-rules-art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.hot-rules-art span { position: absolute; border: 1px solid rgba(255,111,145,.12); border-radius: 50%; }
.hot-rules-art span:nth-child(1){width:230px;height:230px;right:-120px;top:-110px}.hot-rules-art span:nth-child(2){width:150px;height:150px;right:-70px;top:-70px}.hot-rules-art span:nth-child(3){width:190px;height:190px;left:-120px;bottom:-120px}
.hot-rules-devil { width:64px;height:64px;overflow:hidden;margin-bottom:16px;border:2px solid rgba(255,255,255,.15);border-radius:20px;box-shadow:0 15px 35px rgba(167,22,75,.3); }
.hot-rules-badge { display:inline-flex;padding:5px 9px;border:1px solid rgba(255,111,145,.2);border-radius:999px;color:#ff91b1;background:rgba(255,111,145,.07);font-size:8px;font-weight:900;letter-spacing:.14em; }
.hot-rules-eyebrow { margin:20px 0 7px;color:#ff7ca5;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase; }
.hot-rules-card h2 { margin:0;max-width:360px;font-size:clamp(27px,8vw,37px);line-height:1.07;letter-spacing:-.045em; }
.hot-rules-lead { margin:12px 0 22px;color:#b98b9c;font-size:12px;line-height:1.55; }
.hot-rules-list { display:flex;flex-direction:column;gap:8px;margin:0 0 22px;padding:0;list-style:none; }
.hot-rules-list li { display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.025);font-size:11.5px; }
.hot-rule-number { width:31px;height:31px;flex:none;display:grid;place-items:center;border-radius:10px;color:#ff8aae;background:rgba(255,111,145,.09);font-size:9px;font-weight:850; }
.hot-rules-enter { color:#fff;border-color:rgba(255,255,255,.12);background:linear-gradient(135deg,#e73876,#a91950);box-shadow:0 13px 28px rgba(174,22,77,.28); }
.hot-rules-enter:hover { transform:translateY(-3px); }

/* ---------------- Overlays and cards ---------------- */
.overlay { position:fixed;z-index:2500;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,4,10,.84);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);animation:fadeIn .2s ease both; }
.overlay-close { width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:13px;color:var(--muted);background:rgba(255,255,255,.045);cursor:pointer;transition:color .16s ease,background .16s ease,transform .16s ease; }
.overlay-close:hover { color:#fff;background:rgba(255,255,255,.09);transform:rotate(3deg); }
.overlay-toolbar { display:flex;align-items:center;justify-content:space-between;padding:14px 15px;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:12px;font-weight:750; }
.preview-card { width:min(100%,720px);height:min(88vh,760px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line-strong);border-radius:25px;background:var(--panel);box-shadow:0 35px 100px rgba(0,0,0,.55);animation:cardIn .32s var(--ease) both; }
.preview-media { min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:20px;background:rgba(0,0,0,.18); }
.preview-media img,.preview-media video { max-width:100%;max-height:100%;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.38); }
.preview-bar { display:flex;align-items:center;gap:9px;padding:12px;border-top:1px solid var(--line); }
.preview-bar input { min-width:0;min-height:45px;flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:14px;outline:0;color:var(--ink);background:rgba(255,255,255,.035); }
.preview-bar input:focus { border-color:rgba(139,124,255,.5); }
.floating-close { position:absolute;z-index:2;top:max(18px,env(safe-area-inset-top));right:18px; }
.lightbox-media { max-width:100%;max-height:90vh;display:flex;align-items:center;justify-content:center; }
.lightbox-media img { max-width:100%;max-height:90vh;border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.6);animation:mediaIn .3s var(--ease); }
.profile-card { position:relative;width:min(100%,400px);padding:29px 28px 25px;border:1px solid var(--line-strong);border-radius:28px;text-align:center;background:linear-gradient(155deg,var(--panel-2),var(--panel));box-shadow:0 35px 100px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.06);animation:cardIn .32s var(--ease) both; }
.card-close { position:absolute;z-index:3;top:14px;right:14px; }
.profile-eyebrow { display:block;margin-bottom:19px;color:var(--muted-2);font-size:9px;font-weight:850;letter-spacing:.15em;text-transform:uppercase; }
.profile-photo-wrap { position:relative;width:152px;height:152px;margin:0 auto 18px; }
.profile-photo { position:relative;z-index:2;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;border:4px solid var(--panel-2);border-radius:47px;color:#fff;background:linear-gradient(145deg,var(--violet),var(--violet-deep));box-shadow:0 20px 45px rgba(0,0,0,.34);font-size:55px;font-weight:800; }
.profile-photo img { width:100%;height:100%;display:block;object-fit:cover;cursor:zoom-in; }
.profile-photo-ring { position:absolute;z-index:1;inset:-7px;border:1px solid rgba(139,124,255,.26);border-radius:52px;transform:rotate(5deg); }
.profile-name { color:var(--ink);font-size:22px;font-weight:800;letter-spacing:-.025em; }
.profile-sub { min-height:18px;margin:5px 0 19px;color:var(--muted);font-size:11.5px; }
.profile-actions { display:flex;flex-wrap:wrap;justify-content:center;gap:8px; }
.profile-btn { min-height:41px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;border:1px solid var(--line);border-radius:13px;color:var(--ink-soft);background:rgba(255,255,255,.035);cursor:pointer;font-size:11.5px;font-weight:720;transition:transform .16s var(--ease),background .16s ease,border-color .16s ease; }
.profile-btn:hover { transform:translateY(-2px);border-color:var(--line-strong);background:rgba(255,255,255,.075); }
.profile-btn.primary { color:#fff;border-color:rgba(255,255,255,.13);background:linear-gradient(135deg,var(--violet),var(--violet-deep)); }
.profile-btn.danger { color:#ff9aad;background:rgba(255,100,124,.07); }
.profile-btn .ui-icon { width:16px;height:16px; }

/* Admin activity and recordings */
.activity-card { position:relative;width:min(100%,700px);max-height:min(89vh,820px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line-strong);border-radius:27px;background:var(--panel);box-shadow:0 35px 100px rgba(0,0,0,.58);animation:cardIn .32s var(--ease) both; }
.activity-head { display:flex;align-items:center;gap:14px;padding:22px 62px 18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(139,124,255,.15),rgba(78,232,210,.04)); }
.activity-icon { width:48px;height:48px;flex:none;display:grid;place-items:center;border:1px solid rgba(139,124,255,.2);border-radius:15px;color:var(--violet);background:rgba(139,124,255,.09); }
.activity-eyebrow { margin:0 0 3px;color:var(--muted-2);font-size:8.5px;font-weight:850;letter-spacing:.13em;text-transform:uppercase; }
.activity-head h3 { margin:0;color:var(--ink);font-size:18px;letter-spacing:-.02em; }
.activity-sub { margin:4px 0 0;color:var(--muted);font-size:10.5px; }
.activity-sub.is-online { color:var(--success); }
.activity-body { min-height:0;flex:1;overflow-y:auto;padding:17px;background:rgba(5,8,15,.18); }
.activity-foot { display:flex;justify-content:center;padding:12px 16px 15px;border-top:1px solid var(--line); }
.activity-loading,.act-empty { padding:25px 10px;color:var(--muted);font-size:11.5px;text-align:center; }
.act-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.act-tile { display:flex;flex-direction:column;gap:3px;padding:13px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.028); }
.act-tile-label { color:var(--muted-2);font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; }
.act-tile-value { color:var(--ink);font-size:16px;font-weight:800; }
.act-tile-note { color:var(--muted);font-size:9.5px; }
.act-heading { margin:21px 2px 9px;color:var(--ink-soft);font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase; }
.act-heading span { color:var(--muted-2);font-weight:600;letter-spacing:0;text-transform:none; }
.act-days,.act-sessions,.rec-list { display:flex;flex-direction:column;gap:7px; }
.act-day { display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.025); }
.act-day-name,.act-session-when { color:var(--ink-soft);font-size:11.5px;font-weight:720; }
.act-day-time,.act-session-dur { color:var(--cyan);font-size:11px;font-weight:780;font-variant-numeric:tabular-nums; }
.act-day-meta { grid-column:1/-1;color:var(--muted);font-size:9.5px; }
.act-session { padding:11px 13px;border:1px solid var(--line);border-left:3px solid var(--muted-2);border-radius:13px;background:rgba(255,255,255,.025); }
.act-session.live { border-left-color:var(--success);background:rgba(88,230,169,.035); }
.act-session-top { display:flex;align-items:baseline;justify-content:space-between;gap:10px; }
.act-session-line { margin-top:4px;color:var(--ink-soft);font-size:10px; }
.act-session-meta { margin-top:3px;color:var(--muted);font-size:9.5px; }
.act-live-dot { display:inline-block;width:6px;height:6px;margin-left:4px;border-radius:50%;background:var(--success);animation:softBlink 1.5s ease infinite; }
/* Message edit history (admin only): every version of one message, oldest at
   the top, with the text that is live in the chat highlighted at the bottom. */
.hist-list { display:flex;flex-direction:column;gap:8px; }
.hist-item { padding:12px 13px;border:1px solid var(--line);border-left:3px solid var(--muted-2);border-radius:13px;background:rgba(255,255,255,.025); }
.hist-item.current { border-left-color:var(--cyan);background:rgba(78,232,210,.045); }
.hist-top { display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px; }
.hist-label { color:var(--ink-soft);font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase; }
.hist-item.current .hist-label { color:var(--cyan); }
.hist-when { color:var(--muted-2);font-size:9.5px;white-space:nowrap; }
.hist-body { color:var(--ink-soft);font-size:12.5px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap; }
.hist-body a { color:var(--cyan); }
.hist-empty { color:var(--muted-2); }
.hist-note { margin-top:7px;color:var(--cyan);font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }
.rec-item { padding:14px !important;border:1px solid var(--line) !important;border-radius:16px !important;background:rgba(255,255,255,.028) !important;box-shadow:none !important;transition:transform .17s var(--ease),background .17s ease; }
.rec-item:hover { transform:translateY(-2px);background:rgba(255,255,255,.045) !important; }
.rec-item-top { display:flex;align-items:baseline;justify-content:space-between;gap:10px; }
.rec-item-title { color:var(--ink-soft) !important;font-size:11.5px !important;font-weight:750 !important; }
.rec-item-dur { color:var(--cyan) !important;font-size:10.5px !important;font-weight:800 !important;font-variant-numeric:tabular-nums; }
.rec-item-meta { margin-top:4px;color:var(--muted) !important;font-size:9.5px !important; }
.rec-item-player:not(:empty) { margin-top:10px; }
.rec-player { display:block;width:100%;max-height:48vh;border-radius:13px;background:#000; }
.rec-item-actions { display:flex;flex-wrap:wrap;gap:7px;margin-top:10px; }
.rec-act { min-height:34px;display:inline-flex;align-items:center;padding:7px 12px !important;border:1px solid var(--line) !important;border-radius:11px !important;color:var(--ink-soft) !important;background:rgba(255,255,255,.035) !important;font-size:10px !important;font-weight:720 !important;text-decoration:none;cursor:pointer; }
.rec-act:hover { background:rgba(255,255,255,.075) !important; }
.rec-act.danger { color:#ff9bad !important;background:rgba(255,100,124,.07) !important; }

/* ---------------- Call experience ---------------- */
.call-screen { position:fixed;z-index:10000;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;padding:40px 20px 54px;color:#fff;text-align:center;background:radial-gradient(circle at 50% 32%,#232b52 0,#0c1020 44%,#050710 100%); }
.call-ambient { position:absolute;inset:0;pointer-events:none; }
.call-ambient span { position:absolute;left:50%;top:47%;width:300px;height:300px;border:1px solid rgba(139,124,255,.12);border-radius:50%;transform:translate(-50%,-50%);animation:callWave 3s ease-out infinite; }
.call-ambient span:nth-child(2){animation-delay:1s}.call-ambient span:nth-child(3){animation-delay:2s}
.call-kicker { position:relative;margin:0 0 17px;color:#8d97b2;font-size:9px;font-weight:850;letter-spacing:.2em;text-transform:uppercase; }
.call-avatar-wrap { position:relative;display:grid;place-items:center;margin-bottom:9px; }
.call-pulse { position:absolute;inset:-14px;border:1px solid rgba(139,124,255,.24);border-radius:42%;animation:avatarHalo 2.5s ease-in-out infinite; }
.call-avatar { position:relative;z-index:2;width:126px;height:126px;display:grid;place-items:center;overflow:hidden;border:2px solid rgba(255,255,255,.18);border-radius:39%;color:#fff;background:linear-gradient(145deg,var(--violet),var(--violet-deep));box-shadow:0 30px 70px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.25);font-size:46px;font-weight:800; }
.call-name { position:relative;color:#fff;font-size:27px;font-weight:760;letter-spacing:-.035em; }
.call-sub { position:relative;min-height:19px;color:#9ca6bf;font-size:12px;font-variant-numeric:tabular-nums; }
.call-actions { position:relative;display:flex;align-items:center;justify-content:center;gap:34px;margin-top:32px; }
.call-action-wrap { display:flex;flex-direction:column;align-items:center;gap:8px; }
.call-action-wrap small { color:#9aa4bd;font-size:9.5px;font-weight:700; }
.call-circle { width:64px;height:64px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.13);border-radius:21px;color:#fff;background:rgba(255,255,255,.09);box-shadow:0 16px 35px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.13);cursor:pointer;font-size:0;transition:transform .18s var(--ease),background .18s ease,box-shadow .18s ease; }
.call-circle .ui-icon { width:24px;height:24px; }
.call-circle:hover { transform:translateY(-4px);background:rgba(255,255,255,.15);box-shadow:0 21px 42px rgba(0,0,0,.36); }
.call-circle:active { transform:translateY(1px) scale(.94); }
.call-circle:disabled { opacity:.55;cursor:wait; }
.call-circle.accept { background:linear-gradient(145deg,#5be9aa,#27b879);box-shadow:0 17px 38px rgba(38,186,122,.26); }
.call-circle.decline { background:linear-gradient(145deg,#ff6c82,#d53a56);box-shadow:0 17px 38px rgba(217,54,83,.25); }
.call-shell { padding:0; }
.remote-video { position:absolute;z-index:1;inset:0;width:100%;height:100%;display:none;object-fit:cover;background:#05060a; }
.remote-video.active { display:block; }
.call-stage-fallback { position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px; }
.call-stage-fallback.hidden { display:none; }
.call-topbar { position:absolute;z-index:5;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:calc(env(safe-area-inset-top,0px) + 17px) 18px 36px;background:linear-gradient(180deg,rgba(0,0,0,.58),transparent);pointer-events:none; }
.call-secure { display:inline-flex;align-items:center;gap:5px;margin-bottom:3px;color:rgba(255,255,255,.58);font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; }
.call-secure .ui-icon { width:10px;height:10px; }
.call-peer-name { color:#fff;font-size:15px;font-weight:760; }
.call-shell[data-kind="audio"] .call-stage-fallback .call-name { display:none; }
.call-shell[data-kind="audio"] .remote-video { display:none !important; }
.local-pip { position:absolute;z-index:4;top:calc(env(safe-area-inset-top,0px) + 84px);right:16px;width:min(30vw,155px);min-width:72px;aspect-ratio:9/16;overflow:hidden;border:2px solid rgba(255,255,255,.35);border-radius:19px;background:#080910;box-shadow:0 18px 45px rgba(0,0,0,.5);cursor:grab;touch-action:none;user-select:none; }
.local-pip.dragging { cursor:grabbing; }.local-pip.resizing{cursor:nwse-resize}.local-pip.hidden{display:none}.local-video{width:100%;height:100%;display:block;object-fit:cover;background:#080910;transform:scaleX(-1);pointer-events:none}.local-pip.cam-off .local-video{visibility:hidden}.local-pip-off{position:absolute;z-index:1;inset:0;display:none;place-items:center;color:#8790a7;background:#101322}.local-pip-off::before{content:"";width:28px;height:28px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m3 3 18 18M16 10l5-3v10l-5-3M14 18H6a3 3 0 0 1-3-3V8m4-2h6a3 3 0 0 1 3 3v5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m3 3 18 18M16 10l5-3v10l-5-3M14 18H6a3 3 0 0 1-3-3V8m4-2h6a3 3 0 0 1 3 3v5'/%3E%3C/svg%3E") center/contain no-repeat}.local-pip-resize{position:absolute;z-index:2;right:0;bottom:0;width:34px;height:34px;padding:0;border:0;border-radius:16px 0 16px 0;background:linear-gradient(135deg,transparent 43%,rgba(0,0,0,.7) 44%);cursor:nwse-resize}.local-pip-resize::after{content:"";position:absolute;right:6px;bottom:6px;width:9px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;opacity:.75}.call-dock{position:absolute;z-index:5;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);margin:0;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:25px;background:rgba(8,10,18,.62);box-shadow:0 20px 55px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transform:translateX(-50%);gap:9px;flex-wrap:nowrap}.call-dock .call-circle{width:56px;height:56px;border-radius:18px;box-shadow:none}.call-dock .decline{margin-left:8px}
#muteBtn::before,#camBtn::before,#switchCamBtn::before,#hangupBtn::before,#recordCallBtn::before,#recordPauseBtn::before { content:"";width:23px;height:23px;background:currentColor;-webkit-mask:var(--call-icon) center/contain no-repeat;mask:var(--call-icon) center/contain no-repeat; }
#muteBtn{--call-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0m-7 7v3m-4 0h8'/%3E%3C/svg%3E")}
#muteBtn.active{--call-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m3 3 18 18M9 6v6a3 3 0 0 0 4.5 2.6M15 11V6a3 3 0 0 0-5.1-2.1M5 11a7 7 0 0 0 11.4 5.4M19 11a7 7 0 0 1-.4 2.3M12 18v3m-4 0h8'/%3E%3C/svg%3E")}
#camBtn{--call-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='6' width='13' height='12' rx='3'/%3E%3Cpath d='m16 10 5-3v10l-5-3'/%3E%3C/svg%3E")}
#camBtn.active{--call-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m3 3 18 18M16 10l5-3v10l-5-3M14 18H6a3 3 0 0 1-3-3V8m4-2h6a3 3 0 0 1 3 3v5'/%3E%3C/svg%3E")}
#switchCamBtn{--call-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20 7v5h-5M4 17v-5h5m10.2-3A8 8 0 0 0 6.7 6.5L4 9m16 6-2.7 2.5A8 8 0 0 1 4.8 15'/%3E%3C/svg%3E")}
#hangupBtn{--call-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='m3 3 18 18M7.2 3.5 4.5 5.3c-1.2.8-.8 3.6 1 6.4 1.9 3.4 4.7 6.1 8.1 7.9 2.8 1.5 5.4 1.8 6.1.6l1.5-2.6-4.8-3-1.5 1.7M9.7 7.1 7.2 3.5'/%3E%3C/svg%3E")}
#recordCallBtn{--call-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='black'/%3E%3C/svg%3E");font-size:0!important;background:rgba(255,255,255,.09)!important}.call-circle.rec.on{color:#fff!important;background:#e34861!important;animation:recControlPulse 1.6s ease infinite}.call-circle.rec.on{--call-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2' fill='black'/%3E%3C/svg%3E")}
#recordPauseBtn{--call-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h4v14H7zm6 0h4v14h-4z' fill='black'/%3E%3C/svg%3E");font-size:0!important;background:rgba(255,255,255,.09)!important}.call-circle.recpause.active{--call-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 5 11 7-11 7z' fill='black'/%3E%3C/svg%3E");color:#101322!important;background:#fff!important}
.rec-pill{margin-top:6px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;padding:4px 9px!important;border-radius:999px!important;color:#fff!important;background:rgba(227,72,97,.92)!important;box-shadow:0 8px 20px rgba(0,0,0,.25)!important;font-size:9px!important;font-weight:800!important;letter-spacing:.06em!important}.rec-pill.hidden{display:none!important}.rec-pill-dot{width:6px!important;height:6px!important;border-radius:50%!important;background:#fff!important;animation:softBlink 1.1s ease infinite!important}.rec-pill-time{font-variant-numeric:tabular-nums}.rec-pill.paused{background:rgba(255,255,255,.17)!important}.call-toast{position:absolute;z-index:6;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 116px);max-width:min(84vw,420px);padding:10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:13px;color:#fff;background:rgba(8,10,18,.8);box-shadow:0 14px 35px rgba(0,0,0,.4);font-size:10.5px;line-height:1.4;transform:translateX(-50%);pointer-events:none}.call-toast.hidden{display:none}

/* ---------------- Responsive structure ---------------- */
@media (min-width: 800px) {
    .chat-page { align-items:center;justify-content:center;padding:22px; }
    .chat-shell { max-width:1040px;height:calc(100dvh - 44px);flex:none;border:1px solid var(--line-strong);border-radius:30px;box-shadow:0 42px 120px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.055); }
    .chat-header { padding-inline:19px; }
    .messages { padding-inline:clamp(55px,10vw,120px); }
    .composer,.rec-bar { margin:8px 16px 16px;padding:8px;border:1px solid var(--line);border-radius:20px;background:rgba(18,24,42,.91);box-shadow:0 17px 42px rgba(0,0,0,.23); }
    .composer::before { display:none; }
    .reply-bar { margin:0 16px;padding-inline:10px;border:1px solid var(--line);border-radius:15px;background:rgba(18,24,42,.94); }
    .emoji-panel { margin:0 16px 8px;border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.35); }
    .mood-overlay { align-items:center;padding:20px; }
    .mood-sheet { border-bottom:1px solid var(--line-strong);border-radius:28px;animation:cardIn .34s var(--spring) both; }
    body.is-fullscreen.chat-page { padding:0; }
    body.is-fullscreen .chat-shell { max-width:none;width:100%;height:100dvh;border:0;border-radius:0; }
}
@media (min-width:1200px) {
    .chat-shell { max-width:1120px; }
    .messages { padding-inline:150px; }
    .msg { max-width:min(72%,650px); }
}
@media (max-width:760px) {
    :root{--header-h:68px}.chat-header{min-height:68px;gap:9px;padding:9px 9px 9px 11px}.avatar{width:43px;height:43px;border-radius:15px}.private-chip{display:none}.menu-wrap{gap:3px}.action-label{display:none}.hdr-btn,.menu-btn,.mood-btn{min-width:38px;width:38px;height:38px;padding:0;border-radius:12px}.call-action{padding:0}.header-divider{display:none}.messages{padding:19px 15px 14px}.msg{max-width:84%}.composer-keyhint{display:none}.composer textarea{padding-right:14px}.mood-card{min-height:140px}.emoji-grid{grid-template-columns:repeat(7,1fr)}.call-dock{max-width:calc(100vw - 20px)}.call-dock .call-circle{width:52px;height:52px}.call-circle{width:61px;height:61px}.activity-card{max-height:calc(100dvh - 24px)}
}
@media (max-width:520px) {
    .login-page{padding:15px}.login-card{padding:28px 20px 23px;border-radius:26px}.login-brand{margin-bottom:28px}.login-card h1{font-size:34px}.role-picker{grid-template-columns:1fr}.role-btn{padding:12px 13px}.login-foot{margin-top:22px}.desktop-only{display:none}.peer{max-width:100px}.peer-name{font-size:14px}.peer-status{font-size:10.5px}.messages{padding-inline:12px}.msg{max-width:88%}.media img,.media video{width:68vw}.media.voice,.media.doc{width:70vw}.composer{gap:4px;padding-inline:7px}.composer-tools{gap:0}.icon-btn,.send-btn{width:42px;height:42px;border-radius:14px}.composer textarea{min-height:43px;padding:10px 12px;font-size:13px}.mood-sheet{padding-inline:14px}.mood-grid{gap:9px}.mood-card{min-height:132px;padding:14px}.mood-card-emoji{width:43px;height:43px;margin-bottom:13px}.overlay{padding:10px}.profile-card{padding-inline:20px}.profile-photo-wrap{width:132px;height:132px}.activity-head{padding:18px 53px 16px 15px}.activity-body{padding:12px}.act-grid{grid-template-columns:1fr}.emoji-grid{grid-template-columns:repeat(6,1fr)}.call-dock{gap:6px;padding:8px;border-radius:22px}.call-dock .call-circle{width:48px;height:48px;border-radius:16px}.call-dock .decline{margin-left:3px}.hot-rules-card{padding:28px 21px 23px}.call-avatar{width:112px;height:112px}.call-actions{gap:27px}.local-pip{width:29vw}
}
@media (max-width:370px) {
    .chat-header{gap:7px}.avatar{width:39px;height:39px}.peer{max-width:72px}.hdr-btn,.menu-btn,.mood-btn{min-width:35px;width:35px;height:35px}.composer #emojiBtn{display:none}.mood-grid{grid-template-columns:1fr}.mood-card{min-height:118px}.call-dock .call-circle{width:43px;height:43px}.call-dock{gap:4px}.call-dock .call-circle::before{width:20px!important;height:20px!important}
}
@media (max-height:520px) and (orientation:landscape){.call-avatar{width:78px;height:78px;font-size:31px}.call-dock{bottom:10px}.call-topbar{padding-top:8px}.local-pip{top:auto;bottom:82px;width:22vw;max-width:135px;aspect-ratio:16/9}.hot-rules-card{max-height:calc(100dvh - 18px)}}
@media (min-width:900px) and (pointer:fine){.remote-video.active{object-fit:contain}.local-pip{top:auto;bottom:105px;right:26px;width:240px;max-width:300px;aspect-ratio:16/9}.call-dock{bottom:28px}}

/* ---------------- Motion ---------------- */
@keyframes loginReveal{from{opacity:0;transform:perspective(1300px) translateY(20px) scale(.98)}to{opacity:1;transform:perspective(1300px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}}
@keyframes stageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ambientDrift{to{transform:translate(35px,-25px) scale(1.08)}}
@keyframes softBlink{50%{opacity:.4;transform:scale(.78)}}
@keyframes typingShift{to{background-position:6px 0}}
@keyframes shellReveal{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:none}}
@keyframes menuIn{from{opacity:0;transform:translateY(-7px) scale(.95)}to{opacity:1;transform:none}}
@keyframes buttonPop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes sharedPop{0%{transform:scale(.9)}45%{transform:scale(1.12) rotate(-5deg)}100%{transform:none}}
@keyframes loadingSlide{from{transform:translateX(-5%)}to{transform:translateX(135%)}}
@keyframes messageInRight{from{opacity:0;transform:translate(14px,7px) scale(.96)}to{opacity:1;transform:none}}
@keyframes messageInLeft{from{opacity:0;transform:translate(-14px,7px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bubbleFlash{0%,100%{box-shadow:0 8px 20px rgba(0,0,0,.16)}25%{box-shadow:0 0 0 4px rgba(78,232,210,.28),0 10px 25px rgba(0,0,0,.24)}}
@keyframes mediaIn{from{opacity:0;transform:scale(.975);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes reactionPop{0%{opacity:0;transform:translate(-50%,-40%) scale(.25) rotate(-15deg)}45%{opacity:1;transform:translate(-50%,-60%) scale(1.18) rotate(6deg)}100%{opacity:0;transform:translate(-50%,-110%) scale(.85)}}
@keyframes sendReady{50%{box-shadow:0 13px 30px rgba(91,73,206,.42),0 0 0 5px rgba(139,124,255,.06)}}
@keyframes replyUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes recPulse{50%{opacity:.35;transform:scale(.8)}}
@keyframes burstParticle{from{opacity:1;transform:translate(0,0) scale(.8)}to{opacity:0;transform:translate(var(--x,0),-48px) scale(1.15) rotate(12deg)}}
@keyframes panelUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes floatSymbol{0%{opacity:0;transform:translateY(0) rotate(0)}12%{opacity:.1}85%{opacity:.05}100%{opacity:0;transform:translateY(-105vh) rotate(90deg)}}
@keyframes auroraTurn{to{transform:rotate(360deg)}}
@keyframes splashContentIn{from{opacity:0;transform:translateY(15px) scale(.97)}to{opacity:1;transform:none}}
@keyframes splashOrbit{to{transform:rotate(360deg)}}
@keyframes splashLoad{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes splashOut{to{opacity:0;transform:scale(1.03);visibility:hidden}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sheetIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(15px) scale(.975)}to{opacity:1;transform:none}}
@keyframes moodPortal{0%{opacity:0}18%,70%{opacity:1}100%{opacity:0}}
@keyframes portalRing{0%{opacity:.8;transform:rotateX(68deg) rotateZ(0) scale(.2)}100%{opacity:0;transform:rotateX(4deg) rotateZ(60deg) scale(8)}}
@keyframes portalIcon{0%{opacity:0;transform:scale(.2) rotate(-15deg)}35%{opacity:1;transform:scale(1.15) rotate(4deg)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.8)}}
@keyframes callWave{0%{opacity:.25;transform:translate(-50%,-50%) scale(.45)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}}
@keyframes avatarHalo{50%{opacity:.45;transform:scale(1.06) rotate(4deg)}}
@keyframes recControlPulse{50%{box-shadow:0 0 0 8px rgba(227,72,97,.12)}}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
    .love-float,.heart-burst,.call-ambient,.splash-aurora{display:none!important}.login-card{transform:none!important}
}
@media (prefers-reduced-data:reduce){.love-float,.splash-aurora{display:none!important}}

/* ================================================================
   MOBILE RELIABILITY — visible viewport, keyboard and safe-area rules
   These final constraints deliberately own mobile geometry.
   ================================================================ */
.chat-page {
    width: 100%;
    min-height: 0;
    height: 100vh;
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    overscroll-behavior: none;
}
.chat-shell {
    height: 100%;
    max-height: 100%;
    flex: 1 1 auto;
}
.chat-header,
.emoji-panel,
.reply-bar,
.composer,
.rec-bar { flex: 0 0 auto; }
.messages { min-height: 0; flex: 1 1 0; }
.emoji-panel {
    min-height: 0;
    max-height: min(330px, 38dvh, calc(var(--app-height, 100dvh) - var(--header-h) - 118px));
}
.call-screen,
.overlay,
.mood-overlay,
.hot-rules-overlay,
.splash-overlay {
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
}
body.is-fullscreen.chat-page { padding: 0; }
body.is-fullscreen .chat-shell {
    width: 100%;
    max-width: none;
    height: var(--app-height, 100dvh);
    border: 0;
    border-radius: 0;
}

/* Every optional call control must fit, including the two admin recording
   buttons that are injected after page load. */
.call-dock {
    width: max-content;
    max-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px);
    gap: clamp(3px, 1.3vw, 9px);
    padding: clamp(6px, 1.6vw, 10px);
}
.call-dock .call-circle {
    width: clamp(40px, 12vw, 56px);
    height: clamp(40px, 12vw, 56px);
    min-width: 0;
    min-height: 0;
}
.call-dock .decline { margin-left: clamp(2px, 1vw, 8px); }
.local-pip { right: calc(env(safe-area-inset-right, 0px) + 16px); }
.call-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(88px, 24vw, 116px)); }

@media (max-width: 799px) {
    html { overflow: hidden; overscroll-behavior: none; }
    body.chat-page {
        position: fixed;
        inset: 0 0 auto;
        overflow: hidden;
        padding: 0;
        touch-action: manipulation;
    }
    .chat-shell { width: 100%; border-radius: 0; }
    .chat-header {
        min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
        flex-shrink: 0;
        overflow: visible;
        padding-top: calc(9px + env(safe-area-inset-top, 0px));
        padding-right: max(9px, env(safe-area-inset-right, 0px));
        padding-bottom: 9px;
        padding-left: max(11px, env(safe-area-inset-left, 0px));
    }
    .peer { min-width: 0; max-width: none !important; flex: 1 1 0; }
    .menu-wrap { min-width: 0; flex: 0 0 auto; margin-left: 0; white-space: nowrap; }
    .menu { right: max(0px, env(safe-area-inset-right, 0px)); }
    .messages {
        padding-right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
        padding-left: max(12px, calc(env(safe-area-inset-left, 0px) + 8px));
    }
    .composer,
    .rec-bar {
        width: 100%;
        min-width: 0;
        padding-right: max(7px, calc(env(safe-area-inset-right, 0px) + 5px));
        padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
        padding-left: max(7px, calc(env(safe-area-inset-left, 0px) + 5px));
    }
    .composer-field { min-width: 44px; }
    .composer textarea { max-height: min(96px, 22dvh); }
    .reply-bar {
        min-width: 0;
        padding-right: max(10px, calc(env(safe-area-inset-right, 0px) + 7px));
        padding-left: max(10px, calc(env(safe-area-inset-left, 0px) + 7px));
    }
    .reply-bar-content { min-width: 0; }
    .emoji-panel { flex-basis: auto; }
    .activity-card { max-height: calc(var(--app-height, 100dvh) - 20px); }
    .preview-card { height: calc(var(--app-height, 100dvh) - 20px); max-height: none; }
    .mood-sheet { max-height: calc(var(--app-height, 100dvh) - 12px); overflow-y: auto; }
    #moodShareQuick { display: none !important; }
}

@media (max-width: 390px) {
    /* Atmosphere remains available in the menu; this keeps calls and the
       overflow menu reliably visible on very narrow phones. */
    #moodBtn { display: none !important; }
    .chat-header { gap: 6px; }
    .avatar { width: 38px; height: 38px; }
    .hdr-btn, .menu-btn, .mood-btn { min-width: 34px; width: 34px; height: 34px; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .call-dock { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .call-topbar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
    .local-pip { right: calc(10px + env(safe-area-inset-right, 0px)); }
}

/* Keep controls reachable when the keyboard leaves little vertical space. */
@media (max-width: 799px) {
    .menu {
        max-height: max(80px, calc(var(--app-height, 100dvh) - var(--header-h) - env(safe-area-inset-top, 0px) - 24px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .composer textarea { font-size: 16px; }
    .quote { min-width: 0; }
    .mood-share { min-width: 0; grid-template-columns: auto minmax(0, 1fr); }
    .call-dock { flex-wrap: wrap; justify-content: center; }
    .call-dock .call-circle { flex: 0 0 auto; }
}

@media (max-width: 370px) {
    .composer-tools { flex-shrink: 0; }
    .composer-field { min-width: 0; }
    .composer .icon-btn, .composer .send-btn { width: 38px; height: 42px; flex-shrink: 0; }
    .emoji-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The covered chat should not spend frames on decorative motion during calls. */
.chat-call-active .love-float span,
.chat-call-active .msg.animate,
.chat-call-active .peer-status::before,
.chat-call-active .peer-status::after,
.chat-call-active .send-btn.has-text { animation-play-state: paused; }
.chat-call-active .messages::before { display: none; }

@media (prefers-reduced-motion: reduce) {
    /* Keep transient feedback visible instead of jumping to its invisible
       animation endpoint; JavaScript still removes it after the usual delay. */
    .love-reaction { animation: none !important; transform: translate(-50%, -50%); }
    .bubble:hover, .avatar:hover, .hdr-btn:hover, .menu-btn:hover,
    .mood-btn:hover, .emoji-btn:hover { transform: none; }
}