/* ============================================================
 *  Extra · index.css — public landing + floating chat widget
 *  Pairs with index.php / index.js
 *  ============================================================ */
*,*::before,*::after{box-sizing:border-box}
.snowfall{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.snowflake{position:absolute;top:-1.5rem;color:#fff;font-size:clamp(.55rem,1.2vw,.95rem);line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));animation:snowfall-drop linear infinite,snowfall-sway ease-in-out infinite alternate}
@keyframes snowfall-drop{from{transform:translate3d(0,-2rem,0)}to{transform:translate3d(var(--snow-drift),110vh,0)}}
@keyframes snowfall-sway{from{margin-left:-.35rem}to{margin-left:.35rem}}
@media (prefers-reduced-motion:reduce){.snowfall{display:none}}
:root{
    color-scheme:light;
    --bg:#f6f4ff;
    --surface:#ffffff;
    --text:#1d1042;
    --muted:#6b7280;
    --border:#e7e2f7;
    --primary:#4f1fd4;
    --primary-2:#7b2ff7;
    --accent:#0ea5e9;
    --pink:#ec4899;
    --shadow:0 10px 30px rgba(79,31,212,.12);
    --shadow-lg:0 22px 48px rgba(79,31,212,.18);
    --radius:14px;
    --user-bubble:#4f1fd4;
    --admin-bubble:#ffffff;
}
[data-theme="dark"]{
    --bg:#0c0824;
    --surface:#171035;
    --text:#f6f3ff;
    --muted:#a6a2c8;
    --border:#261a50;
    --primary:#a678ff;
    --primary-2:#ec4899;
    --shadow:0 12px 30px rgba(0,0,0,.55);
    --shadow-lg:0 22px 48px rgba(0,0,0,.65);
    --user-bubble:#7b2ff7;
    --admin-bubble:#261a50;
}
.receiving-closed{border-left:4px solid #f59e0b;background:#fffbeb;color:#78350f}
.receiving-closed i{color:#d97706}
.receiving-closed p{margin:.2rem 0 0;color:inherit}
.home-countdown{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr) auto 1px auto;align-items:center;gap:1rem;width:100%;max-width:760px;margin:1.25rem auto 1.35rem;padding:1rem 1.2rem;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--primary) 32%,var(--border));border-radius:20px;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--primary) 7%,var(--surface)));color:var(--text);box-shadow:var(--shadow-lg);font-family:'Tiro Bangla','Noto Sans Bengali',sans-serif;font-size:.9rem}
.countdown-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:1.15rem;box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 28%,transparent)}
.countdown-copy{display:grid;gap:.2rem;min-width:0}
.home-countdown-heading{color:var(--text)!important;font-size:1rem;font-weight:800}
.home-countdown-label{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.countdown-stats,.countdown-remaining{display:grid;gap:.15rem;white-space:nowrap}
.countdown-stats span,.countdown-remaining span{color:var(--muted);font-size:.75rem}
.countdown-stats strong{font-size:1.55rem;line-height:1;color:var(--primary)}
.countdown-remaining strong{font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--primary);font-size:1.25rem}
.countdown-divider{width:1px;height:42px;background:var(--border)}
@media (max-width:620px){
    .home-countdown{grid-template-columns:46px minmax(0,1fr);gap:.7rem;margin-top:1rem;padding:.9rem}
    .countdown-copy{grid-column:2;grid-row:1}
    .countdown-stats,.countdown-remaining{grid-column:1 / -1;width:100%}
    .countdown-stats{display:flex;align-items:center;justify-content:space-between;padding:.65rem .75rem;border-radius:12px;background:color-mix(in srgb,var(--primary) 9%,var(--surface))}
    .countdown-divider{display:none}
    .countdown-remaining{display:flex;align-items:center;justify-content:space-between;gap:.55rem;padding:.65rem .75rem;border-radius:12px;background:color-mix(in srgb,var(--primary) 9%,var(--surface))}
}
.date-info-card{position:relative;z-index:1;width:100%;max-width:760px;margin:0 auto 1.35rem;padding:1rem 1.2rem;box-sizing:border-box;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);font-family:'Tiro Bangla','Noto Sans Bengali',sans-serif}
.date-info-title{display:flex;align-items:center;gap:.5rem;color:var(--primary);font-weight:800;margin-bottom:.8rem}
.date-info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.date-info-item{min-width:0;padding:.7rem .75rem;border-radius:13px;background:color-mix(in srgb,var(--primary) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 14%,var(--border))}
.date-info-item span,.date-info-item strong{display:block}
.date-info-item span{color:var(--muted);font-size:.73rem;margin-bottom:.25rem}
.date-info-item strong{color:var(--text);font-size:.9rem;line-height:1.35;overflow-wrap:anywhere}
.date-clock strong{color:var(--primary);font-variant-numeric:tabular-nums}
@media (max-width:620px){.date-info-card{padding:.9rem}.date-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.date-info-item{padding:.65rem}.date-info-item strong{font-size:.82rem}}
.home-quote-card{position:relative;overflow:hidden;max-width:680px;margin:1.5rem auto;padding:2.2rem 1.5rem;text-align:center;border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),color-mix(in srgb,var(--pink) 10%,var(--surface)));box-shadow:var(--shadow-lg)}
.home-quote-card blockquote{position:relative;z-index:1;margin:.4rem auto .7rem;max-width:560px;font-size:clamp(1.25rem,3vw,1.8rem);line-height:1.45;font-weight:700;color:var(--text)}
.home-quote-card cite{position:relative;z-index:1;color:var(--muted)}
.welcome-section{position:relative;z-index:1;padding:1.5rem 1rem 0}
.welcome-card{margin:0 auto 1.6rem;padding:1.7rem 1.2rem 1.15rem;background:linear-gradient(135deg,color-mix(in srgb,#f9a8d4 18%,var(--surface)),color-mix(in srgb,#c4b5fd 18%,var(--surface)));isolation:isolate}
.welcome-kicker{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:999px;background:color-mix(in srgb,#ec4899 12%,var(--surface));color:#db2777;font-size:.78rem;font-weight:800}
.welcome-sparkles span{position:absolute;z-index:1;color:#ec4899;opacity:.7;animation:sparkleFloat 3.5s ease-in-out infinite}
.welcome-sparkles span:nth-child(1){top:16%;left:9%;font-size:1.1rem}.welcome-sparkles span:nth-child(2){top:25%;right:10%;font-size:1.4rem;animation-delay:.7s}.welcome-sparkles span:nth-child(3){bottom:18%;left:15%;animation-delay:1.2s}.welcome-sparkles span:nth-child(4){bottom:13%;right:14%;font-size:1.2rem;animation-delay:1.8s}
@keyframes sparkleFloat{50%{transform:translateY(-7px) rotate(10deg);opacity:1}}
.quote-flower{position:absolute;inset:50% auto auto 50%;font-size:7rem;line-height:1;color:#ec4899;opacity:.14;transform:translate(-50%,-50%);animation:flowerBlast 2.4s ease-out infinite}
@keyframes flowerBlast{0%{transform:translate(-50%,-50%) scale(.55) rotate(0);opacity:.08}45%{transform:translate(-50%,-50%) scale(1.3) rotate(18deg);opacity:.22}100%{transform:translate(-50%,-50%) scale(1.65) rotate(35deg);opacity:.05}}
@media (prefers-reduced-motion:reduce){.quote-flower{animation:none}}
@media (prefers-reduced-motion:reduce){.welcome-sparkles span{animation:none}}
[data-theme="dark"] .welcome-kicker{color:#f9a8d4;background:rgba(236,72,153,.18)}
[data-theme="dark"] .date-info-item span{color:#c4bde2}
[data-theme="dark"] .date-info-item strong{color:#f6f3ff}
[data-theme="dark"] .date-info-title{color:#c4b5fd}
@media (prefers-color-scheme:dark){
    html[data-theme="auto"] .welcome-kicker{color:#f9a8d4;background:rgba(236,72,153,.18)}
    html[data-theme="auto"] .date-info-item span{color:#c4bde2}
    html[data-theme="auto"] .date-info-item strong{color:#f6f3ff}
    html[data-theme="auto"] .date-info-title{color:#c4b5fd}
}
[data-theme="dark"] .receiving-closed,html[data-theme="auto"] .receiving-closed{background:#3a2810;color:#fde68a;border-color:#b45309}
[data-theme="dark"] .alert-success,html[data-theme="auto"] .alert-success{background:#16251d;color:#d1fae5}
[data-theme="dark"] .alert-success .hint,html[data-theme="auto"] .alert-success .hint{color:#a7f3d0}
[data-theme="dark"] .letter-input,[data-theme="dark"] .letter-to-input,
html[data-theme="auto"] .letter-input,html[data-theme="auto"] .letter-to-input{color:#3a2a05}
[data-theme="dark"] .letter-to-row,html[data-theme="auto"] .letter-to-row{border-bottom-color:rgba(58,42,5,.35)}
@media (prefers-color-scheme: dark){
    [data-theme="auto"]{
        color-scheme:dark;
        --bg:#0c0824;--surface:#171035;--text:#f6f3ff;--muted:#a6a2c8;--border:#261a50;
        --primary:#a678ff;--primary-2:#ec4899;--shadow:0 12px 30px rgba(0,0,0,.55);
        --shadow-lg:0 22px 48px rgba(0,0,0,.65);--user-bubble:#7b2ff7;--admin-bubble:#261a50;
    }
    :root[data-theme="auto"] .chat-panel{
        color-scheme:dark;
    }
    :root[data-theme="auto"] .bubble.admin .quoted{background:rgba(255,255,255,.08)}
    :root[data-theme="auto"] .date-sep{background:rgba(255,255,255,.08)}
    :root[data-theme="auto"] .att-audio,
    :root[data-theme="auto"] .att-voice,
    :root[data-theme="auto"] .att-file{background:rgba(255,255,255,.05)}
    :root[data-theme="auto"] .chat-panel select,
    :root[data-theme="auto"] .chat-panel option{background:var(--surface);color:var(--text)}
    html[data-theme="auto"],
    html[data-theme="auto"] body{color-scheme:dark;background:#0c0824;color:#f6f3ff}
    html[data-theme="auto"] .chat-panel,
    html[data-theme="auto"] .chat-panel .chat-reply,
    html[data-theme="auto"] .chat-panel .reply-preview,
    html[data-theme="auto"] .chat-panel .attach-tray{background:#171035;color:#f6f3ff}
    html[data-theme="auto"] .chat-panel .chat-thread-meta,
    html[data-theme="auto"] .chat-panel .chat-messages,
    html[data-theme="auto"] .chat-panel .chat-pin input,
    html[data-theme="auto"] .chat-panel .chat-reply textarea{background:#0c0824}
    html[data-theme="auto"] .chat-panel .bubble.admin{background:#261a50;color:#f6f3ff}
}

/* Complete dark surfaces for the floating chat and PIN screen.  The user
 * page defaults to `auto`, so these rules intentionally cover both explicit
 * dark mode and the device's dark preference. */
@media (prefers-color-scheme:dark){
[data-theme="dark"] .chat-panel,
html[data-theme="auto"] .chat-panel{
    background:#171035;color:#f6f3ff;border-color:#38266b
}
[data-theme="dark"] .chat-panel .chat-state,
html[data-theme="auto"] .chat-panel .chat-state,
[data-theme="dark"] .chat-panel .chat-pin,
html[data-theme="auto"] .chat-panel .chat-pin{
    background:#0c0824;color:#f6f3ff
}
[data-theme="dark"] .chat-panel .chat-pin input,
html[data-theme="auto"] .chat-panel .chat-pin input,
[data-theme="dark"] .chat-panel .chat-reply textarea,
html[data-theme="auto"] .chat-panel .chat-reply textarea,
[data-theme="dark"] .chat-panel input,
html[data-theme="auto"] .chat-panel input,
[data-theme="dark"] .chat-panel select,
html[data-theme="auto"] .chat-panel select{
    background:#0c0824;color:#f6f3ff;border-color:#4a347d
}
[data-theme="dark"] .chat-panel .chat-pin input::placeholder,
html[data-theme="auto"] .chat-panel .chat-pin input::placeholder,
[data-theme="dark"] .chat-panel .chat-reply textarea::placeholder,
html[data-theme="auto"] .chat-panel .chat-reply textarea::placeholder{
    color:#a6a2c8
}
[data-theme="dark"] .chat-panel .chat-thread-meta,
html[data-theme="auto"] .chat-panel .chat-thread-meta,
[data-theme="dark"] .chat-panel .chat-reply,
html[data-theme="auto"] .chat-panel .chat-reply,
[data-theme="dark"] .chat-panel .reply-preview,
html[data-theme="auto"] .chat-panel .reply-preview,
[data-theme="dark"] .chat-panel .attach-tray,
html[data-theme="auto"] .chat-panel .attach-tray{
    background:#171035;color:#f6f3ff;border-color:#38266b
}
[data-theme="dark"] .chat-panel .chat-error,
html[data-theme="auto"] .chat-panel .chat-error{color:#ff9b9b}
[data-theme="dark"] .chat-panel .pin-tag,
html[data-theme="auto"] .chat-panel .pin-tag{
    color:#c3a9ff;background:rgba(166,120,255,.18)
}
[data-theme="dark"] .chat-panel .bubble.admin,
html[data-theme="auto"] .chat-panel .bubble.admin{
    background:#261a50;color:#f6f3ff;border-color:#4a347d
}
[data-theme="dark"] .chat-panel .bubble.admin .quoted,
html[data-theme="auto"] .chat-panel .bubble.admin .quoted{
    background:rgba(255,255,255,.08)
}
[data-theme="dark"] .chat-panel .bubble-menu-btn,
html[data-theme="auto"] .chat-panel .bubble-menu-btn,
[data-theme="dark"] .chat-panel .bubble-quick-react,
html[data-theme="auto"] .chat-panel .bubble-quick-react,
[data-theme="dark"] .chat-panel .emoji-picker,
html[data-theme="auto"] .chat-panel .emoji-picker,
[data-theme="dark"] .chat-panel .attach-menu,
html[data-theme="auto"] .chat-panel .attach-menu,
[data-theme="dark"] .chat-panel .react-picker,
html[data-theme="auto"] .chat-panel .react-picker{
    background:#171035;color:#f6f3ff;border-color:#4a347d
}
[data-theme="dark"] .chat-panel .chat-overflow,
html[data-theme="auto"] .chat-panel .chat-overflow,
[data-theme="dark"] .chat-panel .modal-content,
html[data-theme="auto"] .chat-panel .modal-content{
    background:#171035;color:#f6f3ff;border-color:#4a347d
}
[data-theme="dark"] .chat-panel .status-options button,
html[data-theme="auto"] .chat-panel .status-options button{
    background:#171035;color:#f6f3ff;border-color:#4a347d
}
[data-theme="dark"] .chat-panel .status-options button:hover,
html[data-theme="auto"] .chat-panel .status-options button:hover{
    background:#a678ff;color:#160b32;border-color:#a678ff
}
[data-theme="dark"] .chat-panel .chat-header,
html[data-theme="auto"] .chat-panel .chat-header{color:#fff}
[data-theme="dark"] .chat-panel .chat-panel-close,
html[data-theme="auto"] .chat-panel .chat-panel-close{
    color:#fff;background:rgba(255,255,255,.18)
}
}
[hidden]{display:none!important}

/* Keep explicit dark mode consistent even when the operating system is set
 * to light mode. */
[data-theme="dark"] .chat-panel{
    background:#171035;color:#f6f3ff;border-color:#38266b
}
[data-theme="dark"] .chat-panel .chat-state,
[data-theme="dark"] .chat-panel .chat-pin,
[data-theme="dark"] .chat-panel .chat-messages,
[data-theme="dark"] .chat-panel .chat-thread-meta,
[data-theme="dark"] .chat-panel .chat-reply,
[data-theme="dark"] .chat-panel .reply-preview,
[data-theme="dark"] .chat-panel .attach-tray{
    background:#0c0824;color:#f6f3ff;border-color:#38266b
}
[data-theme="dark"] .chat-panel input,
[data-theme="dark"] .chat-panel select,
[data-theme="dark"] .chat-panel textarea{
    background:#0c0824;color:#f6f3ff;border-color:#4a347d
}
[data-theme="dark"] .chat-panel input::placeholder,
[data-theme="dark"] .chat-panel textarea::placeholder{color:#a6a2c8}
[data-theme="dark"] .chat-panel .chat-header{color:#fff}
[data-theme="dark"] .chat-panel .chat-panel-close{
    color:#fff;background:rgba(255,255,255,.18)
}
[data-theme="dark"] .chat-panel .chat-error{color:#ff9b9b}
[data-theme="dark"] .chat-panel .bubble.admin{
    background:#261a50;color:#f6f3ff;border-color:#4a347d
}
[data-theme="dark"] .chat-panel .pin-tag{color:#c3a9ff;background:rgba(166,120,255,.18)}

/* Tiro Bangla as the primary font — pairs with Inter as a Latin fallback.
 * Applied here on the root + inherited everywhere via input/button/textarea
 * rules below.  Bengali characters get the proper script glyphs; Latin
 * characters fall back to the next family in the stack. */
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
    font-family:'Tiro Bangla','Noto Sans Bengali','Inter',-apple-system,Segoe UI,Roboto,sans-serif;
    -webkit-font-smoothing:antialiased;line-height:1.55}

/* Make sure native form controls and buttons also inherit the body font —
 * by default browsers fall back to system fonts (Helvetica / Arial). */
input,select,textarea,button,optgroup,option{font-family:inherit}

a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}

/* ── Brand strip + theme toggle ─────────────────────────────── */
.brand-strip{height:6px;background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--accent),var(--pink))}
.theme-toggle{
    position:fixed;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
    border:1px solid var(--border);background:var(--surface);color:var(--text);
    box-shadow:var(--shadow);z-index:50;display:inline-flex;align-items:center;justify-content:center;
    transition:transform .2s,background .2s
}
.theme-toggle:hover{transform:rotate(20deg)}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;text-align:center;padding:3.4rem 1rem 2.4rem}
.hero-content{position:relative;max-width:760px;margin:0 auto}
.hero-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45}
.hero-blob.b1{width:340px;height:340px;background:#9d6cff;top:-90px;left:-110px}
.hero-blob.b2{width:280px;height:280px;background:#06b6d4;top:30px;right:-90px}
.hero-blob.b3{width:240px;height:240px;background:#ec4899;bottom:-90px;left:35%}
.hero-tag{
    display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .9rem;
    border-radius:999px;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);
    border:1px solid var(--border);font-size:.85rem;color:var(--text);font-weight:500
}
[data-theme="dark"] .hero-tag{background:rgba(22,16,52,.6)}
.hero-tag .pulse{width:9px;height:9px;border-radius:50%;background:#22c55e;
    box-shadow:0 0 0 3px rgba(34,197,94,.25);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.7}}
.hero-prompt{
    font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-0.02em;
    margin:1rem 0 .4rem;line-height:1.15;
    background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--accent));
    -webkit-background-clip:text;background-clip:text;color:transparent
}
.caret{display:inline-block;width:3px;height:1em;background:var(--primary);
    margin-left:4px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.hero-sub{margin:.4rem 0 1rem;color:var(--muted);font-size:1.05rem}
.hero-meta{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.7rem;color:var(--muted);font-size:.92rem}
.hero-meta .sep{width:5px;height:5px;border-radius:50%;background:var(--border)}

/* ── Container ──────────────────────────────────────────────── */
.container{max-width:760px;margin:0 auto;padding:0 1rem 5rem;position:relative;z-index:1}

/* ── Privacy bar ────────────────────────────────────────────── */
.privacy-bar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1rem}
.pill{padding:.3rem .8rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);
    font-size:.85rem;color:var(--muted);display:inline-flex;align-items:center;gap:.35rem}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert{display:flex;gap:.7rem;background:var(--surface);border:1px solid var(--border);
    padding:1rem 1rem;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:1.4rem}
.alert-success{border-left:4px solid #22c55e}
.alert i{color:#22c55e;font-size:1.4rem;flex-shrink:0;margin-top:.2rem}
.success-celebration{position:relative;overflow:hidden}
.sent-congrats{margin:.25rem 0 0;font-weight:800;color:var(--primary)}
.love-rain{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.love-rain span{position:absolute;top:-2rem;animation:loveFall 4s ease-in forwards;opacity:0}
@keyframes loveFall{
    0%{transform:translate3d(0,-1rem,0) rotate(-18deg);opacity:0}
    12%{opacity:.95}
    100%{transform:translate3d(18px,9rem,0) rotate(25deg);opacity:0}
}
.capture-fallback{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1rem 1rem 1rem;background:#fef2f2;border:1px solid #fecaca;border-radius:14px;color:#991b1b;box-shadow:0 12px 26px rgba(220,38,38,.08);margin-bottom:1rem}
.capture-fallback-copy{flex:1;min-width:0;font-size:.95rem;line-height:1.45}
.capture-fallback-actions{display:flex;gap:.5rem;flex-shrink:0;align-items:flex-start}
.capture-fallback-btn,.capture-fallback-close{border:none;border-radius:999px;padding:.45rem .85rem;font-weight:700;cursor:pointer}
.capture-fallback-btn{background:#fecaca;color:#991b1b}
.capture-fallback-close{background:rgba(255,255,255,.85);color:#991b1b;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
[data-theme="dark"] .capture-fallback{background:rgba(254,229,230,.16);border-color:rgba(254,202,202,.4);color:#fecaca}
.pin-display{display:inline-block;padding:.55rem .95rem;background:linear-gradient(90deg,var(--primary),var(--primary-2));
    color:#fff;border-radius:10px;font-weight:700;font-size:1.1rem;letter-spacing:1px;margin:.7rem 0 .3rem;
    user-select:all;cursor:copy}
.pin-remember{display:flex;gap:.6rem;align-items:flex-start;background:#fff7ed;border:1px solid #fbbf24;
    padding:.7rem .9rem;border-radius:10px;color:#7c2d12;margin:.7rem 0}
[data-theme="dark"] .pin-remember{background:#3a1d12;color:#ffd9b4;border-color:#b45309}
.pin-remember i{color:#d97706}
.pin-remember p{margin:.2rem 0 0;font-size:.9rem}
.pin-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.copy-btn,.open-chat-btn{
    border:1px solid var(--border);background:var(--surface);color:var(--text);
    padding:.55rem 1rem;border-radius:10px;display:inline-flex;align-items:center;gap:.4rem;
    transition:transform .15s,background .15s
}
.copy-btn:hover,.open-chat-btn:hover{transform:translateY(-1px);background:var(--bg)}
.open-chat-btn{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent}
.hint{color:var(--muted);font-size:.9rem;margin:0}

/* ── Sticky-note "letter" form ─────────────────────────────────
 *  Yellow torn-paper card on a soft pastel gradient with a
 *  small purple "Send Letter" button below.
 * ─────────────────────────────────────────────────────────────── */
.letter-card{margin:1.4rem 0 0}
.letter-paper-wrap{
    position:relative;display:flex;justify-content:center;
    padding:1.6rem 1rem 1.2rem;
    background:linear-gradient(135deg,#f7d6e8 0%,#e6e2ff 30%,#d6f5e9 65%,#fff5cc 100%);
    border-radius:22px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)
}
[data-theme="dark"] .letter-paper-wrap{
    background:linear-gradient(135deg,#3c2840 0%,#2a2858 30%,#173a35 65%,#3a341a 100%)
}
.letter-paper{
    position:relative;width:100%;max-width:680px;
    padding:1.5rem 1.5rem 1.7rem;
    background:linear-gradient(180deg,#fff7a8 0%,#f7e860 100%);
    color:#3a2a05;
    transform:rotate(-1.4deg);
    filter:drop-shadow(0 18px 28px rgba(60,60,60,.22));
    /* Hand-torn edges (top + bottom + slight side variation). */
    clip-path:polygon(
        0% 3%, 7% 0%, 14% 2%, 22% 0%, 30% 3%, 38% 1%, 46% 3%, 54% 1%,
        62% 3%, 70% 0%, 78% 2%, 86% 1%, 94% 3%, 100% 0%,
        99% 25%, 100% 50%, 99% 75%,
        100% 99%, 95% 97%, 90% 100%, 85% 96%, 78% 99%, 70% 95%,
        62% 100%, 54% 95%, 46% 99%, 38% 95%, 30% 99%,
        22% 95%, 14% 100%, 6% 96%, 0% 99%,
        1% 75%, 0% 50%, 1% 25%
    );
    transition:transform .2s ease
}
.letter-paper:focus-within{transform:rotate(-1deg) translateY(-2px)}
.letter-to-row{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 .7rem;border-bottom:1px dashed rgba(58,42,5,.28);padding-bottom:.55rem}
.letter-to-row label{font-weight:800;font-size:1.05rem;flex-shrink:0}
.letter-to-input{width:100%;border:0;outline:0;background:transparent;color:#3a2a05;font:inherit;font-weight:600}
.letter-to-input::placeholder{color:#7c6a1f;opacity:.7;font-weight:400}
.letter-input{
    width:100%;min-height:180px;background:transparent;border:none;outline:none;
    resize:none;color:#3a2a05;
    font-family:'Caveat','Indie Flower','Patrick Hand',ui-rounded,'Comic Sans MS',cursive,system-ui;
    font-size:1.4rem;line-height:1.5
}
.letter-input::placeholder{color:#7c6a1f;opacity:.85}
.letter-input:focus{outline:none}

.letter-send-row{
    display:flex;align-items:center;gap:.8rem;margin:1rem 0 0;flex-wrap:wrap
}
.letter-send-btn{
    position:relative;display:inline-flex;align-items:center;gap:.55rem;
    padding:.6rem 1.15rem;border:none;border-radius:14px;cursor:pointer;
    font-size:.95rem;font-weight:600;color:#fff;
    background:linear-gradient(135deg,#a78bfa 0%,#8b5cf6 60%,#7c3aed 100%);
    box-shadow:0 10px 22px rgba(124,58,237,.32),inset 0 -2px 0 rgba(0,0,0,.08);
    transition:transform .15s,box-shadow .2s,filter .15s
}
.letter-send-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.letter-send-btn:active{transform:translateY(0)}
.letter-send-btn .heart-icon{font-size:.9rem}
.letter-send-btn .flight-icon{display:none}
.letter-send-btn .spin{display:none;animation:spin 1s linear infinite}
.letter-send-btn.is-loading .spin{display:inline-block}
.letter-send-btn.is-loading .heart-icon,.letter-send-btn.is-loading .flight-icon,
.letter-send-btn.is-loading span{display:none}
.letter-send-btn:disabled{cursor:wait;opacity:.85}
.send-flight{margin-top:.9rem;padding:1rem;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--text);text-align:center}
.send-flight strong,.send-flight span{display:block}
.send-flight span{margin-top:.2rem;color:var(--muted);font-size:.84rem}
.flight-map{position:relative;height:48px;max-width:380px;margin:0 auto .45rem}
.map-route{position:absolute;left:12%;right:12%;top:25px;border-top:2px dashed color-mix(in srgb,var(--primary) 55%,transparent);transform:rotate(-8deg)}
.map-pin,.map-heart,.flight-rocket{position:absolute;z-index:1}
.map-start{left:7%;top:14px;color:#ef4444}.map-end{right:7%;top:10px;color:#22c55e}
.map-heart{left:49%;top:4px;color:#ec4899;animation:mapPulse 1s ease-in-out infinite}
.flight-rocket{left:42%;top:19px;color:var(--primary);animation:rocketFly 1.3s ease-in-out infinite}
@keyframes rocketFly{0%,100%{transform:translate(0,5px) rotate(-18deg)}50%{transform:translate(18px,-5px) rotate(-18deg)}}
@keyframes mapPulse{50%{transform:scale(1.25);opacity:.7}}
.letter-form .char-count{margin-left:auto;color:#6b7280;font-size:.78rem}
.letter-note{
    display:flex;gap:.45rem;align-items:flex-start;
    margin:.85rem 0 0;color:var(--muted);font-size:.85rem;line-height:1.5
}
.letter-note i{color:var(--primary);margin-top:.2rem;flex-shrink:0}

@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:520px){
    .letter-paper-wrap{padding:1.1rem .5rem .9rem;border-radius:18px}
    .letter-paper{padding:1.2rem 1.1rem 1.4rem;transform:rotate(-1deg)}
    .letter-input{font-size:1.25rem;min-height:160px}
    .letter-send-btn{padding:.55rem 1rem;font-size:.9rem}
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;align-items:center;
    color:var(--muted);font-size:.85rem;margin-top:2.5rem}
.footer .bullet{width:4px;height:4px;border-radius:50%;background:var(--border)}

/* ── Floating chat launcher ─────────────────────────────────── */
.chat-launcher{
    position:fixed;bottom:24px;right:20px;z-index:60;
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.65rem 1.05rem .65rem .8rem;
    border:none;border-radius:999px;color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    box-shadow:0 10px 30px rgba(58,12,163,.45);
    overflow:hidden;font-weight:600;
    transition:transform .2s
}
.chat-launcher:hover{transform:translateY(-2px) scale(1.02)}
.chat-launcher .shimmer{position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
    transform:translateX(-100%);animation:shimmer 4s linear infinite;pointer-events:none}
@keyframes shimmer{to{transform:translateX(100%)}}
.chat-launcher .lc-icon{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);
    display:inline-flex;align-items:center;justify-content:center}
.chat-launcher .lc-label{position:relative;z-index:1;min-width:6.5rem;text-align:left;font-size:.92rem}
.chat-launcher .word{display:inline-block;animation:fadeWord .3s ease-out}
@keyframes fadeWord{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.chat-launcher .badge{
    position:absolute;top:-4px;right:-4px;background:#ec4899;color:#fff;border-radius:999px;
    min-width:20px;height:20px;font-size:.7rem;font-weight:700;line-height:20px;text-align:center;
    padding:0 6px;box-shadow:0 4px 10px rgba(236,72,153,.4);
    display:none
}
.chat-launcher.has-badge .badge{display:inline-block}

/* ── Floating chat panel ────────────────────────────────────── */
.chat-panel{
    position:fixed;bottom:90px;right:20px;width:min(400px,calc(100vw - 32px));
    max-height:calc(100dvh - 130px);height:600px;background:var(--surface);
    border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg);
    z-index:70;display:none;flex-direction:column;overflow:hidden;opacity:0;
    transform:translateY(20px) scale(.96);transition:transform .28s cubic-bezier(.2,.9,.4,1.1),opacity .25s;
    backdrop-filter:saturate(140%) blur(2px);-webkit-backdrop-filter:saturate(140%) blur(2px)
}
.chat-panel.is-open{display:flex;opacity:1;transform:translateY(0) scale(1)}

/* ── Private 24-hour Chithi stories ───────────────────────── */
.chithi-stories{flex:0 0 auto;padding:.55rem .75rem;background:var(--surface);
    border-bottom:1px solid var(--border);max-height:230px;overflow:auto}
.chithi-stories-head{display:flex;align-items:center;gap:.45rem;margin-bottom:.4rem;color:var(--text);font-size:.82rem}
.chithi-stories-head strong{display:inline-flex;gap:.3rem;align-items:center}
.chithi-stories-head strong i{color:var(--pink)}
.chithi-stories-head small{color:var(--muted);font-size:.7rem;flex:1}
.story-plus{width:30px;height:30px;border:0;border-radius:50%;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 5px 14px rgba(79,31,212,.25)}
.chithi-story-list{display:flex;gap:.45rem;overflow-x:auto;padding:.1rem 0 .35rem}
.chithi-story-card{position:relative;width:72px;padding:0;border:0;background:transparent;font-size:.7rem;flex:0 0 72px;text-align:center;cursor:pointer}
.chithi-story-card .story-circle{width:64px;height:64px;margin:0 auto;border-radius:50%;padding:3px;background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7);box-shadow:0 0 0 2px var(--surface);overflow:hidden}
.chithi-story-card .story-circle .story-media{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;background:#000}
.story-text-circle{display:flex!important;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--primary-2))!important;color:#fff;font-size:1.35rem;font-weight:700}
.story-circle-label{display:block;margin-top:.25rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chithi-story-card .story-body{display:none}
.chithi-story-card .story-meta{display:flex;justify-content:space-between;gap:.3rem;color:var(--muted);font-size:.65rem;margin-top:.25rem}
.chithi-story-card .story-actions{display:none}
.chithi-story-card button{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.12rem .35rem;font-size:.72rem}
.chithi-story-card .story-react{color:var(--primary)}
.chithi-story-card .story-reply{flex:1;min-width:0;text-align:left}
.chithi-story-card .story-reactions{color:var(--pink);white-space:nowrap}
.chithi-story-card .story-replies{color:var(--muted);font-size:.66rem;margin-top:.2rem}
.chithi-story-compose,.chithi-story-reply{display:flex;align-items:center;gap:.35rem;margin-top:.3rem}
.chithi-story-compose textarea,.chithi-story-reply input{min-width:0;flex:1;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text);padding:.38rem .65rem;resize:none;font:inherit;font-size:.78rem}
.chithi-story-compose button,.chithi-story-reply button{border:0;border-radius:50%;width:30px;height:30px;background:var(--primary);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.chithi-story-compose button[data-story-attach]{background:var(--surface);color:var(--primary);border:1px solid var(--border)}
.chithi-story-reply{padding-top:.25rem}.chithi-story-reply span{font-size:.7rem;color:var(--muted);white-space:nowrap;max-width:90px;overflow:hidden;text-overflow:ellipsis}
.story-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:1rem}
.story-modal-backdrop{position:absolute;inset:0;background:rgba(10,7,28,.58);backdrop-filter:blur(3px)}
.story-modal-card{position:relative;width:min(360px,100%);padding:1rem;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-lg);color:var(--text)}
.story-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.story-modal-head button{border:0;background:transparent;color:var(--muted);font-size:1.1rem;cursor:pointer}
.story-modal-card textarea{width:100%;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);padding:.7rem;resize:vertical;font:inherit}
.story-modal-actions{display:flex;justify-content:space-between;gap:.5rem;margin-top:.7rem}
.story-modal-actions button{border:0;border-radius:999px;padding:.5rem .75rem;font:inherit;cursor:pointer}
.story-media-btn{background:var(--bg);color:var(--primary);border:1px solid var(--border)!important}
.story-send-btn{background:var(--primary);color:#fff}

/* Chat header */
.chat-panel .chat-header{
    display:flex;align-items:center;gap:.7rem;padding:.6rem 1rem;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;
    flex-shrink:0
}
.chat-panel .chat-header .avatar{
    width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);
    display:inline-flex;align-items:center;justify-content:center;font-size:.92rem
}
.chat-panel .chat-header .info{flex:1;min-width:0}
.chat-panel .chat-header .title{font-weight:700;display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem}
.chat-panel .chat-header .subtitle{font-size:.74rem;opacity:.85;margin-top:1px}
.chat-panel-close{
    margin-left:auto;width:34px;height:34px;display:grid!important;place-items:center;
    border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
    cursor:pointer;font-size:1.05rem;flex-shrink:0
}
.chat-panel-close:hover{background:rgba(255,255,255,.3)}

/* Presence dot */
.presence-dot{
    width:9px;height:9px;border-radius:50%;background:#22c55e;
    box-shadow:0 0 0 2px rgba(255,255,255,.3);
    animation:pulse 1.6s ease-in-out infinite;display:inline-block
}
.presence-dot.is-typing{background:#fde047}

/* PIN entry state */
.chat-state{padding:1.2rem 1.1rem;flex:1;display:flex;flex-direction:column;overflow:hidden}
.chat-pin{justify-content:center;text-align:center}
.chat-pin .chat-intro{font-weight:600;margin:0 0 .6rem;color:var(--text)}
.chat-pin input{
    width:100%;padding:.8rem 1rem;border:2px dashed var(--border);border-radius:12px;
    background:var(--bg);color:var(--text);font:inherit;letter-spacing:2px;text-align:center;
    text-transform:uppercase;outline:none;transition:border-color .2s
}
.chat-pin input:focus{border-color:var(--primary);border-style:solid}
.chat-action-btn{
    margin-top:.7rem;padding:.65rem 1rem;border:none;border-radius:10px;color:#fff;font-weight:600;
    background:linear-gradient(90deg,var(--primary),var(--primary-2));
    display:inline-flex;align-items:center;justify-content:center;gap:.4rem
}
.chat-action-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(58,12,163,.3)}
.chat-error{color:#dc2626;font-size:.88rem;margin:.5rem 0 0}
.chat-hint{color:var(--muted);font-size:.82rem;margin:1rem 0 0;line-height:1.5}
.chat-hint i{color:var(--primary)}

/* Thread state */
.chat-thread{padding:0;display:flex;flex-direction:column;flex:1;min-height:0}
.chat-thread-meta{
    display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
    padding:.5rem .8rem;background:var(--bg);border-bottom:1px solid var(--border);
    font-size:.8rem;color:var(--muted)
}
.pin-tag{font-weight:700;color:var(--primary);background:rgba(58,12,163,.1);
    padding:.2rem .55rem;border-radius:6px;letter-spacing:1px}
.live-status{display:inline-flex;align-items:center;gap:.3rem}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulse 1.6s ease-in-out infinite}
.lock-status{display:inline-flex;align-items:center;gap:.3rem;color:var(--muted);
    padding:.18rem .55rem;border-radius:999px;background:rgba(255,255,255,.08);
    transition:color .25s,background .25s}
.lock-status .countdown{
    font-variant-numeric:tabular-nums;font-weight:600;font-size:.78rem
}
.lock-status.is-warning{
    color:#dc2626;background:#fee2e2;
    animation:lockPulse 1.4s ease-in-out infinite
}
[data-theme="dark"] .lock-status.is-warning{color:#fecaca;background:#3a1414}
@keyframes lockPulse{0%,100%{opacity:1}50%{opacity:.55}}
.chat-end{
    margin-left:auto;background:transparent;border:1px solid var(--border);color:var(--muted);
    padding:.25rem .55rem;border-radius:6px;font-size:.78rem
}
.chat-end:hover{color:#dc2626;border-color:#dc2626}

/* Messages */
.chat-messages{
    flex:1;overflow-y:auto;padding:.8rem .7rem;background:var(--bg);
    display:flex;flex-direction:column;gap:.4rem;scroll-behavior:smooth;position:relative
}
.scroll-bottom{
    position:absolute;right:14px;bottom:140px;background:var(--surface);
    border:1px solid var(--border);color:var(--text);padding:.4rem .7rem;border-radius:999px;
    font-size:.8rem;display:none;align-items:center;gap:.3rem;box-shadow:var(--shadow);z-index:5
}
.chat-messages.has-scrollback ~ .scroll-bottom{display:inline-flex}

.date-sep{
    align-self:center;background:rgba(0,0,0,.06);color:var(--muted);
    padding:.2rem .7rem;border-radius:999px;font-size:.75rem;margin:.4rem 0
}
[data-theme="dark"] .date-sep{background:rgba(255,255,255,.08)}

/* Bubble */
.bubble-row{display:flex;align-items:flex-end;gap:.35rem;margin:.1rem 0;position:relative;max-width:100%;
    animation:bubbleIn .28s cubic-bezier(.2,.9,.4,1.05) both}
.bubble-row.left{justify-content:flex-start}
.bubble-row.right{justify-content:flex-end}
@keyframes bubbleIn{
    from{opacity:0;transform:translateY(8px) scale(.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){.bubble-row{animation:none}}
.bubble{
    max-width:78%;padding:.55rem .8rem;border-radius:18px;line-height:1.45;
    word-wrap:break-word;overflow-wrap:anywhere;position:relative;
    box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.02);
    transition:transform .12s ease,box-shadow .15s
}
.bubble:hover{box-shadow:0 4px 12px rgba(0,0,0,.10),0 0 0 .5px rgba(0,0,0,.02)}
.bubble.user{
    background:linear-gradient(135deg,var(--user-bubble),var(--primary-2));
    color:#fff;border-bottom-right-radius:6px;
    box-shadow:0 2px 8px rgba(58,12,163,.18)
}
.bubble.admin{background:var(--admin-bubble);color:var(--text);border-bottom-left-radius:6px;
    border:1px solid var(--border)}
.bubble .body{white-space:pre-wrap}
.bubble .meta{display:flex;align-items:center;gap:.3rem;margin-top:.25rem;font-size:.72rem;opacity:.8}
.bubble.user .meta{color:rgba(255,255,255,.78)}
.bubble.admin .meta{color:var(--muted)}
.bubble .ticks i{font-size:.78rem}
.bubble .ticks.sent{opacity:.7}
.bubble .ticks.delivered{opacity:1}
.bubble .ticks.seen{color:#53bdeb}
.bubble.user .ticks.seen{color:#bae6fd}
.bubble .meta .edited{font-style:italic;opacity:.75}
.bubble .star-flag{color:#f59e0b;font-size:.7rem}

.bubble-menu-btn{
    width:22px;height:22px;border-radius:50%;border:none;background:var(--surface);color:var(--muted);
    box-shadow:var(--shadow);font-size:.65rem;
    opacity:0;transition:opacity .15s;display:inline-flex;align-items:center;justify-content:center
}
.bubble-row:hover .bubble-menu-btn,
.bubble-row.menu-open .bubble-menu-btn{opacity:.85}

/* Quick-react "+" button (WhatsApp/Messenger style) — hover to open the
 * react picker instantly without the three-dot menu. */
.bubble-quick-react{
    position:relative;width:24px;height:24px;border:none;border-radius:50%;
    background:var(--surface);color:var(--muted);cursor:pointer;
    opacity:0;transition:opacity .15s,transform .12s,color .15s;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow);font-size:.8rem
}
.bubble-quick-react .qr-plus{
    position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
    background:var(--primary);color:#fff;font-size:.58rem;font-weight:700;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 1.5px var(--surface)
}
.bubble-row:hover .bubble-quick-react,
.bubble-row.menu-open .bubble-quick-react{opacity:.9}
.bubble-quick-react:hover{opacity:1;color:var(--primary);transform:scale(1.1)}
@media (hover: none){
    .bubble-quick-react{opacity:.55}
    .bubble-row:hover .bubble-quick-react{opacity:.9}
}

/* Quoted reply */
.quoted{
    border-left:3px solid currentColor;background:rgba(255,255,255,.12);
    padding:.3rem .5rem;border-radius:6px;margin-bottom:.35rem;
    display:flex;flex-direction:column;cursor:pointer;font-size:.85rem
}
.bubble.admin .quoted{background:rgba(58,12,163,.08);border-left-color:var(--primary)}
.quoted .q-author{font-weight:600;font-size:.78rem;opacity:.85}
.quoted .q-body{opacity:.8;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* Reactions */
.reactions{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.35rem}
.rx-pill{
    background:rgba(255,255,255,.20);color:inherit;border:none;padding:.15rem .55rem;
    border-radius:999px;font-size:.78rem;display:inline-flex;align-items:center;gap:.25rem;
    cursor:pointer;transition:transform .12s ease,background .15s;
    animation:rxPop .35s cubic-bezier(.2,.9,.4,1.4) both
}
.rx-pill:hover{transform:translateY(-1px) scale(1.05);background:rgba(255,255,255,.30)}
.rx-pill:active{transform:translateY(0) scale(.97)}
.bubble.admin .rx-pill{background:rgba(58,12,163,.10)}
.bubble.admin .rx-pill:hover{background:rgba(58,12,163,.18)}
@keyframes rxPop{
    0%{opacity:0;transform:scale(.4)}
    60%{opacity:1;transform:scale(1.18)}
    100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.rx-pill{animation:none}}

/* Attachments */
.atts{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.25rem}
.att-wrap{position:relative;display:block}
.att-wrap .att-delete{
    position:absolute;top:6px;right:6px;
    width:26px;height:26px;border-radius:50%;
    border:none;background:rgba(0,0,0,.55);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;opacity:0;transition:opacity .15s,background .15s;
    z-index:5;font-size:.8rem
}
.att-wrap:hover .att-delete,
.att-wrap .att-delete:focus-visible{opacity:1}
.att-wrap .att-delete:hover{background:#dc2626}
@media (max-width: 540px){
    /* Always visible on touch — hover doesn't apply on phones. */
    .att-wrap .att-delete{opacity:.85}
}
.att{display:block;border-radius:10px;overflow:hidden}
.att-image img{display:block;max-width:260px;max-height:300px;border-radius:10px;cursor:zoom-in;
    background:rgba(0,0,0,.04)}
.att-video video{display:block;max-width:280px;border-radius:10px}
.att-audio,.att-voice{display:flex;align-items:center;gap:.4rem;padding:.4rem .55rem;
    background:rgba(0,0,0,.05);border-radius:12px}
[data-theme="dark"] .att-audio,[data-theme="dark"] .att-voice{background:rgba(255,255,255,.05)}
.att-audio audio,.att-voice audio{height:32px;max-width:100%}
.att-audio .dur,.att-voice .dur{font-size:.7rem;color:var(--muted)}
.att-file{display:flex;align-items:center;gap:.5rem;padding:.55rem .65rem;background:rgba(0,0,0,.05);
    border-radius:10px;text-decoration:none;color:inherit}
[data-theme="dark"] .att-file{background:rgba(255,255,255,.05)}
.att-file i{font-size:1.4rem;color:var(--primary)}
.att-file .meta{display:flex;flex-direction:column;line-height:1.2}
.att-file .meta .n{font-size:.85rem}
.att-file .meta .s{font-size:.7rem;color:var(--muted)}

/* Reply preview */
.reply-preview{
    display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;
    background:var(--bg);border-top:1px solid var(--border);font-size:.85rem
}
.reply-preview i{color:var(--primary)}
.reply-preview .rp-body{flex:1;display:flex;flex-direction:column;line-height:1.2;min-width:0}
.reply-preview .rp-author{font-weight:600;font-size:.8rem;color:var(--primary)}
.reply-preview .rp-text{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-close{background:none;border:none;color:var(--muted);font-size:.95rem}

/* Attach tray (staged uploads) */
.attach-tray{display:flex;gap:.45rem;flex-wrap:wrap;padding:.45rem .6rem;
    background:var(--bg);border-top:1px solid var(--border)}
.tray-item{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;
    background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.tray-item img,.tray-item video{width:100%;height:100%;object-fit:cover}
.tray-item .icon{font-size:1.2rem;color:var(--muted)}
.tray-item .rm{
    position:absolute;top:2px;right:2px;background:rgba(0,0,0,.55);color:#fff;border:none;
    width:18px;height:18px;border-radius:50%;font-size:.7rem
}
.tray-item.is-uploading{opacity:.6}
.tray-item .pct{position:absolute;bottom:2px;left:4px;font-size:.65rem;color:#fff;background:rgba(0,0,0,.5);padding:0 4px;border-radius:4px}

/* Voice bar */
.voice-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;
    background:#fef2f2;border-top:1px solid #fecaca;color:#991b1b}
[data-theme="dark"] .voice-bar{background:#3a1010;border-color:#7f1d1d;color:#fecaca}
.voice-bar .rec-dot{width:10px;height:10px;border-radius:50%;background:#dc2626;animation:pulse 1s ease-in-out infinite}
.voice-bar .rec-time{font-weight:600;font-variant-numeric:tabular-nums}
.voice-bar .rec-wave{flex:1;height:24px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 6px);opacity:.4;border-radius:4px}
.voice-bar button{background:transparent;border:none;color:inherit;font-size:1rem}
.voice-bar .rec-stop{background:#dc2626;color:#fff;width:32px;height:32px;border-radius:50%}

/* Composer — WhatsApp/Telegram style */
.chat-reply{
    display:flex;align-items:flex-start;gap:.25rem;padding:.45rem .5rem;
    background:var(--surface);border-top:1px solid var(--border);position:relative;
    flex-wrap:wrap;justify-content:flex-start
}
.chat-reply textarea{
    flex:1 1 100%;min-width:0;padding:.45rem .65rem;border:1px solid var(--border);border-radius:18px;
    background:var(--bg);color:var(--text);resize:none;font:inherit;
    max-height:90px;line-height:1.35;outline:none;transition:border-color .12s ease,box-shadow .12s ease;
    font-size:0.94rem;order:2
}
.chat-reply textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(79,31,212,.1)}
.chat-reply textarea::placeholder{color:var(--muted);opacity:.7}

/* Action buttons — left side (emoji, attach, view-once, voice, online call) */
.chat-reply .emoji-trigger,
.chat-reply .attach-trigger,
.chat-reply .vo-trigger,
.chat-reply .voice-trigger,
.chat-reply .call-admin-trigger{
    order:1;margin-right:.1rem
}
.chat-reply .chat-send{
    order:3;margin-left:auto
}

.chat-reply .emoji-trigger,
.chat-reply .attach-trigger,
.chat-reply .vo-trigger,
.chat-reply .voice-trigger,
.chat-reply .call-admin-trigger,
.chat-reply .chat-send{
    width:36px;height:36px;border-radius:50%;border:none;
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    font-size:0.98rem;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
    position:relative;padding:0;margin:0
}

.chat-reply .call-admin-trigger{
    display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;
    width:auto;min-width:96px;min-height:40px;padding:.35rem .9rem;
    border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;
    font-size:.88rem;gap:.35rem;flex-shrink:0;white-space:nowrap;
}

.chat-reply .call-admin-trigger:focus-visible{
    outline:2px solid rgba(79,31,212,.9);
    outline-offset:2px;
}
.chat-reply .call-admin-trigger i{
    display:inline-flex;
    transform-origin:center center;
    animation:bellRing 3s ease-in-out infinite;
}
.chat-reply .call-admin-trigger:hover i,
.chat-reply .call-admin-trigger:focus-visible i{
    animation-play-state:paused;
}

.chat-reply .call-admin-trigger .call-admin-inline-text{
    display:inline-block;font-size:.85rem;font-weight:700;line-height:1.05;
    color:inherit;white-space:normal;overflow:visible;text-overflow:unset;
    max-width:160px;word-break:break-word;text-align:left;
}

.chat-reply .call-admin-trigger .call-admin-inline-badge{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;padding:0 .35rem;
    border-radius:999px;background:#dc2626;color:#fff;font-size:.7rem;font-weight:700;
}

.chat-reply .call-admin-trigger.is-calling{
    background:rgba(79,31,212,.14);
}

.chat-reply .chat-send{
    position:absolute;
    right:.75rem;
    bottom:.75rem;
    width:44px;
    height:44px;
    min-width:44px;
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border:none;
    border-radius:50%;padding:0;margin:0;
    transition:transform .2s;
}

@keyframes callInlineTextPulse{
    0%,100%{opacity:1;transform:translateY(0)}
    50%{opacity:.75;transform:translateY(-1px)}
}
@keyframes bellRing{
    0%,100%{transform:rotate(0deg);}
    15%{transform:rotate(15deg);}
    30%{transform:rotate(-10deg);}
    45%{transform:rotate(8deg);}
    60%{transform:rotate(-4deg);}
    75%{transform:rotate(2deg);}
}

@media (max-width:480px){
    .chat-reply{
        padding:.45rem .45rem;
        gap:.35rem;
        align-items:flex-end;
        flex-wrap:wrap;
    }
    .chat-reply textarea{
        padding:.45rem .65rem .45rem 1rem;
        padding-right:68px;
        flex:1 1 100%;
        min-width:0;
        width:100%;
        order:2;
    }
    .chat-reply .call-admin-trigger{
        width:auto;
        min-width:78px;
        height:auto;
        padding:.32rem .65rem;
        order:1;
        align-items:center;
        white-space:normal;
    }
    .chat-reply .call-admin-trigger .call-admin-inline-text{
        display:inline-block;
        max-width:110px;
        white-space:normal;
        word-break:break-word;
        line-height:1.2;
    }
    .chat-reply .call-admin-trigger .call-admin-inline-badge{
        display:inline-flex;
    }
    .chat-reply .chat-send{
        position:absolute;
        right:.65rem;
        bottom:.7rem;
    }
    .chat-reply .chat-send .send-text{display:none}
}
.chat-reply .chat-send .send-text{display:none}

.chat-reply .emoji-trigger{
    background:transparent;color:var(--text);font-size:1.18rem;
    padding:0;min-width:auto
}
.chat-reply .emoji-trigger:hover{transform:scale(1.15)}
.chat-reply .emoji-trigger:active{transform:scale(.95)}

.chat-reply .attach-trigger{
    background:transparent;color:var(--text);
    padding:0;min-width:auto
}
.chat-reply .attach-trigger:hover{
    background:rgba(79,31,212,.06);color:var(--primary);transform:scale(1.06)
}
.chat-reply .attach-trigger:active{transform:scale(.95)}

.chat-reply .vo-trigger{
    background:transparent;color:var(--muted);font-size:.9rem;
    padding:0;min-width:auto;opacity:.7;transition:all .2s ease
}
.chat-reply .vo-trigger:hover{
    background:rgba(79,31,212,.08);color:var(--primary);opacity:1;transform:scale(1.1)
}
.chat-reply .vo-trigger[aria-pressed="true"]{
    color:var(--primary);opacity:1;background:rgba(79,31,212,.12)
}
.chat-reply .vo-trigger:active{transform:scale(.95)}

.chat-reply .voice-trigger{
    background:transparent;color:var(--text);
    padding:0;min-width:auto
}
.chat-reply .voice-trigger:hover{
    background:rgba(79,31,212,.08);color:var(--primary);transform:scale(1.1)
}
.chat-reply .voice-trigger:active{transform:scale(.95)}
.chat-reply .voice-trigger.is-recording{
    background:#dc2626;color:#fff;animation:pulse 1s ease-in-out infinite;
    box-shadow:0 0 0 3px rgba(220,38,38,.14)
}

/* Send button — right side */
.chat-reply .chat-send{
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#fff;font-size:1.02rem;
    box-shadow:0 2px 6px rgba(79,31,212,.18);
}
.chat-reply .chat-send:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(79,31,212,.35)
}
.chat-reply .chat-send:active{
    transform:translateY(0);
    box-shadow:0 1px 4px rgba(79,31,212,.2)
}
.chat-reply .chat-send:disabled{
    opacity:.5;cursor:not-allowed;transform:none;
    box-shadow:0 2px 8px rgba(79,31,212,.12)
}

/* Attach menu (popover above the paperclip) — WhatsApp/Telegram style */
.attach-menu{
    position:absolute;bottom:calc(100% + 8px);left:.6rem;background:var(--surface);
    border:1px solid var(--border);border-radius:14px;padding:.4rem 0;
    box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:0;z-index:5;
    min-width:140px;backdrop-filter:blur(4px)
}
.attach-menu button{
    background:transparent;border:none;color:var(--text);text-align:left;
    padding:.6rem .9rem;border-radius:0;display:flex;align-items:center;gap:.65rem;font-size:.92rem;
    transition:all .15s ease;cursor:pointer;position:relative
}
.attach-menu button:first-child{border-radius:12px 12px 0 0}
.attach-menu button:last-child{border-radius:0 0 12px 12px}
.attach-menu button:hover{
    background:var(--bg);color:var(--primary)
}
.attach-menu button:active{
    background:rgba(79,31,212,.15);transform:scale(.98)
}
.attach-menu button i{font-size:1.1rem;width:20px;text-align:center;color:var(--primary)}
.attach-menu button span{font-weight:500}

/* Emoji picker */
.emoji-picker{
    position:absolute;bottom:calc(100% + 8px);left:.6rem;width:280px;max-height:300px;
    background:var(--surface);border:1px solid var(--border);border-radius:14px;
    box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;z-index:5;
    backdrop-filter:blur(4px)
}
.emoji-tabs{display:flex;gap:.1rem;padding:.4rem;border-bottom:1px solid var(--border);overflow-x:auto;justify-content:space-around}
.emoji-tabs button{
    background:transparent;border:none;padding:.25rem .4rem;border-radius:6px;font-size:1.1rem;
    cursor:pointer;transition:all .15s ease;opacity:.6
}
.emoji-tabs button:hover{opacity:1;transform:scale(1.15)}
.emoji-tabs button.is-active{background:var(--bg);opacity:1}
.emoji-grid{flex:1;overflow-y:auto;padding:.3rem;display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.emoji-grid button{
    background:transparent;border:none;padding:.35rem;font-size:1.2rem;border-radius:6px;
    cursor:pointer;transition:all .12s ease;display:flex;align-items:center;justify-content:center
}
.emoji-grid button:hover{background:var(--bg);transform:scale(1.2)}
.emoji-grid button:active{transform:scale(.9)}

/* Floating bubble menu */
.bubble-menu{
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    box-shadow:var(--shadow-lg);padding:.3rem;display:flex;flex-direction:column;gap:1px;
    z-index:80;min-width:130px
}
.bubble-menu button{
    background:transparent;border:none;color:var(--text);text-align:left;
    padding:.45rem .65rem;border-radius:6px;display:flex;align-items:center;gap:.5rem;font-size:.88rem
}
.bubble-menu button:hover{background:var(--bg)}
.bubble-menu button.danger{color:#dc2626}
.bubble-menu button.danger:hover{background:rgba(220,38,38,.08)}

/* React picker — picture-grid style (large emoji buttons) */
.react-picker{
    background:var(--surface);border:1px solid var(--border);border-radius:18px;
    box-shadow:var(--shadow-lg);padding:.45rem;z-index:80;
    backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px);
    animation:rxPopIn .18s cubic-bezier(.2,.9,.4,1.4)
}
@keyframes rxPopIn{
    from{opacity:0;transform:translateY(8px) scale(.85)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.react-picker .rp-grid{display:grid;grid-template-columns:repeat(8,minmax(40px,1fr));gap:.2rem}
.react-picker button,.react-picker .rp-emoji{
    width:42px;height:42px;border-radius:12px;border:none;background:var(--bg);
    cursor:pointer;font-size:1.45rem;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    transition:transform .12s ease,background .15s,box-shadow .15s;
    -webkit-tap-highlight-color:transparent;color:var(--text)
}
.react-picker button:hover,.react-picker .rp-emoji:hover,
.react-picker button:focus-visible,.react-picker .rp-emoji:focus-visible{
    background:rgba(58,12,163,.10);transform:translateY(-2px) scale(1.08);
    box-shadow:0 6px 14px rgba(0,0,0,.12);outline:none
}
.react-picker button:active,.react-picker .rp-emoji:active{transform:translateY(0) scale(.96)}
.react-picker .rp-emoji.rp-more{font-size:1rem;color:var(--primary);background:var(--surface)}
.react-picker .rp-emoji.rp-more:hover{background:var(--primary);color:#fff}
[data-theme="dark"] .react-picker button:hover,
[data-theme="dark"] .react-picker .rp-emoji:hover{background:rgba(157,108,255,.20)}

/* Edit form (inline) */
.edit-form{
    margin-top:.5rem;display:flex;align-items:flex-end;gap:.4rem;
    background:rgba(255,255,255,.15);border-radius:6px;padding:.4rem
}
.bubble.admin .edit-form{background:rgba(58,12,163,.06)}
.edit-form .edit-input{
    flex:1;min-height:2.2rem;max-height:8rem;resize:vertical;
    padding:.4rem .5rem;border-radius:6px;border:1px solid rgba(255,255,255,.4);
    background:rgba(255,255,255,.95);color:#1f1147;font:inherit
}
.edit-form .edit-actions{display:flex;flex-direction:column;gap:.25rem}
.edit-form .edit-actions button{
    width:30px;height:30px;border:none;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.3);color:#fff;font-size:.85rem
}
.bubble.admin .edit-form .edit-actions button{background:var(--bg);color:var(--text)}
.edit-form .edit-save{background:#fff!important;color:var(--primary)!important}

/* Typing bubble */
.typing-bubble{padding:0 .7rem .25rem;display:flex;justify-content:flex-start;
    animation:bubbleIn .25s cubic-bezier(.2,.9,.4,1.05) both}
.typing-bubble .typing-pill{padding:.55rem .8rem;display:flex;gap:.3rem;align-items:center}
.typing-pill .dot{
    width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4;
    animation:typingDot 1.2s ease-in-out infinite
}
.typing-pill .dot:nth-child(2){animation-delay:.2s}
.typing-pill .dot:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:.95}}

/* Lightbox */
.lightbox{
    position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:90;
    display:flex;align-items:center;justify-content:center
}
.lightbox .lb-stage{max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}
.lightbox img,.lightbox video{max-width:90vw;max-height:90vh;border-radius:8px}
.lightbox button{position:absolute;background:rgba(255,255,255,.15);color:#fff;border:none;
    width:40px;height:40px;border-radius:50%;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center}
.lightbox .lb-close{top:14px;right:14px}
.lightbox .lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:14px;top:50%;transform:translateY(-50%)}

/* Confirm modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:95;
    display:none;align-items:center;justify-content:center;padding:1rem}
.modal.is-open{display:flex}
.modal-content{background:var(--surface);color:var(--text);
    padding:1.4rem 1.4rem 1.2rem;border-radius:14px;max-width:380px;text-align:center;
    box-shadow:var(--shadow-lg)}
.modal-content.modal-success-content{max-width:min(440px,92vw);padding:2rem;border:1px solid rgba(34,197,94,.2);}
.modal-content.modal-success-content h3{font-size:1.45rem;margin:0 0 .75rem}
.modal-content.modal-success-content p{margin:0 0 1.2rem;color:var(--text);line-height:1.6}
.success-hero{font-size:3rem;line-height:1;margin-bottom:1rem}
.modal-content h3{margin:0 0 .4rem}
.modal-content p{margin:0 0 1rem;color:var(--muted)}
.modal-actions{display:flex;justify-content:center;gap:.5rem}
.btn-danger{background:#dc2626;color:#fff;border:none;padding:.55rem 1rem;border-radius:8px;display:inline-flex;align-items:center;gap:.4rem}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border);padding:.55rem 1rem;border-radius:8px}

/* Toast */
.toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(60px);
    background:var(--text);color:var(--surface);padding:.55rem 1rem;border-radius:999px;
    font-size:.9rem;z-index:100;opacity:0;transition:transform .25s,opacity .25s;pointer-events:none
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.error{background:#dc2626;color:#fff}
.toast.success{background:#22c55e;color:#fff;}

/* ────────────────────────────────────────────────────────────
   Mobile-first responsive overrides + safe-area padding for
   notched devices. Order: 540 → 480 → 380 → orientation/touch.
   ──────────────────────────────────────────────────────────── */
@media (max-width:540px){
    .chat-panel{
        right:8px;left:8px;width:auto;bottom:78px;
        height:calc(100dvh - 96px);max-height:calc(100dvh - 96px);
        border-radius:18px
    }
}
@media (max-width:520px){
    .container{padding:0 .8rem 4rem}
    .hero{padding:2.4rem 1rem 1.6rem}
    .chat-launcher .lc-label{display:none}
    .chat-launcher{padding:.6rem;gap:0}
}
@media (max-width:480px){
    .hero{padding:2rem .9rem 1.4rem}
    .hero-prompt{font-size:clamp(1.4rem,7vw,2rem);margin:.6rem 0 .35rem}
    .hero-sub{font-size:.95rem}
    .hero-tag{font-size:.78rem;padding:.3rem .7rem}
    .container{padding:0 .7rem 3.5rem}
    .alert{padding:.85rem;gap:.55rem}
    .pin-display{font-size:1rem;padding:.5rem .8rem;letter-spacing:.5px}
    .copy-btn,.open-chat-btn{font-size:.85rem;padding:.5rem .85rem}
    .footer{font-size:.78rem;gap:.45rem;margin-top:1.8rem}
    .chat-launcher{bottom:18px;right:14px}
    .chat-panel{bottom:74px;right:6px;left:6px;
        height:calc(100dvh - 90px);max-height:calc(100dvh - 90px);
        border-radius:16px}
    .chat-panel .chat-header{padding:.7rem .85rem;gap:.55rem}
    .chat-panel .chat-header .avatar{width:34px;height:34px;font-size:.9rem}
    .chat-panel .chat-header .title{font-size:.95rem}
    .chat-panel .chat-header .subtitle{font-size:.72rem}
    .chat-state{padding:.95rem .85rem}
    .chat-pin input{padding:.7rem .85rem;font-size:1rem}
    .chat-action-btn{padding:.6rem .9rem;font-size:.92rem}
    .chat-thread-meta{padding:.45rem .65rem;font-size:.74rem}
    .pin-tag{font-size:.72rem;padding:.15rem .45rem}
    .chat-end{padding:.2rem .45rem;font-size:.72rem}
    .chat-messages{padding:.65rem .55rem;gap:.35rem}
    .bubble{padding:.5rem .7rem;border-radius:16px;font-size:.95rem}
    .bubble-row{max-width:100%}
    .bubble.user,.bubble.admin{max-width:88%}
    .att-image img{max-width:62vw;max-height:54vh}
    .att-video video{max-width:64vw}
    .att-audio audio,.att-voice audio{width:100%;min-width:0;max-width:100%}
    .att-file{min-width:0;max-width:100%}
    .att-file .meta .n{max-width:48vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .reply-preview{padding:.35rem .55rem;font-size:.8rem}
    .voice-bar{padding:.45rem .6rem}
    .voice-bar .rec-time{font-size:.85rem;min-width:38px}
    .voice-bar button{width:32px;height:32px}
    .chat-reply{padding:.5rem .5rem;gap:.3rem;
        padding-bottom:max(.5rem,env(safe-area-inset-bottom));align-items:center;/*justify-content:space-between*/}
    .chat-reply textarea{font-size:16px;padding:.5rem .65rem;min-height:40px;flex:1;min-width:100px}
    .chat-reply .emoji-trigger,
    .chat-reply .attach-trigger,
    .chat-reply .vo-trigger,
    .chat-reply .voice-trigger,
    .chat-reply .call-admin-trigger,
    .chat-reply .chat-send{width:40px;height:40px;flex-shrink:0;font-size:.85rem}
    .chat-reply .emoji-trigger{font-size:1.2rem}
    .emoji-picker{left:.45rem;width:calc(100vw - 28px);max-width:320px;max-height:250px}
    .emoji-grid{grid-template-columns:repeat(7,1fr)}
    .attach-menu{left:.45rem;width:calc(100vw - 28px);max-width:160px}
    .react-picker{padding:.35rem;border-radius:14px}
    .react-picker .rp-grid{grid-template-columns:repeat(7,minmax(36px,1fr));gap:.15rem}
    .react-picker .rp-emoji,
    .react-picker button{width:38px;height:38px;font-size:1.3rem;border-radius:10px}
    .lock-status{font-size:.7rem;padding:.15rem .45rem}
    .scroll-bottom{bottom:120px;font-size:.75rem;padding:.35rem .6rem}
    .modal-content{padding:1.2rem 1.05rem;max-width:calc(100vw - 28px)}
    .modal-actions{flex-wrap:wrap}
    .toast{bottom:max(20px,env(safe-area-inset-bottom));font-size:.85rem}
}
@media (max-width:480px){
    .chat-reply{padding:.45rem .45rem;gap:.35rem;align-items:flex-start;flex-wrap:wrap;position:relative}
    .chat-reply textarea{padding:.45rem .65rem .45rem 1rem;padding-right:68px;order:2;flex:1 1 100%;min-width:0;width:100%}
    .chat-reply .call-admin-trigger{width:auto;height:auto;min-width:0;flex:0 1 auto;padding:.32rem .65rem;}
    .chat-reply .call-admin-trigger .call-admin-inline-text{
        display:inline-block;
        max-width:90px;
        white-space:normal;
        word-break:break-word;
        line-height:1.2;
    }
    .chat-reply .call-admin-trigger .call-admin-inline-badge{display:inline-flex;}
    .chat-reply .chat-send{position:absolute;right:.7rem;bottom:.75rem;width:40px;height:40px;padding:0;margin-left:0;order:3;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
    .chat-state{height:calc(100dvh - 84px);max-height:calc(100dvh - 84px)}
}
@media (max-width:380px){
    .chat-panel .chat-header{padding:.6rem .7rem;gap:.45rem}
    .chat-panel .chat-header .name-chip,
    .chat-panel .chat-header .status-chip{max-width:8rem;font-size:.65rem}
    .chat-state{padding:.8rem .7rem}
    .chat-messages{padding:.55rem .45rem}
    .bubble{padding:.45rem .6rem;font-size:.9rem;border-radius:14px}
    .bubble.user,.bubble.admin{max-width:92%}
    .react-picker .rp-grid{grid-template-columns:repeat(6,minmax(34px,1fr))}
    .react-picker .rp-emoji,
    .react-picker button{width:34px;height:34px;font-size:1.2rem;border-radius:9px}
    .emoji-grid{grid-template-columns:repeat(6,1fr)}
    .att-image img{max-width:60vw}
    .att-video video{max-width:62vw}
    .tray-item{width:54px;height:54px}
}
@media (max-height:520px) and (orientation:landscape){
    .chat-panel{height:calc(100dvh - 60px);max-height:calc(100dvh - 60px);bottom:30px}
    .hero{padding:1.4rem .9rem 1rem}
}
/* Touch device tweaks — keep affordances visible without hover. */
@media (hover:none){
    .bubble-row .bubble-menu-btn{opacity:.55}
    .att-wrap .att-delete{opacity:.85}
    /* On touch devices, show button backgrounds more clearly */
    .chat-reply .attach-trigger,
    .chat-reply .voice-trigger,
    .chat-reply .vo-trigger{background:rgba(79,31,212,.06)}
}
/* Larger tap targets on coarse pointers. */
@media (pointer:coarse){
    .chat-reply .emoji-trigger,
    .chat-reply .attach-trigger,
    .chat-reply .vo-trigger,
    .chat-reply .voice-trigger,
    .chat-reply .chat-send{width:42px;height:42px;min-width:42px;min-height:42px}
}
/* Respect reduced-motion preference globally for animations we add. */
@media (prefers-reduced-motion:reduce){
    .chat-panel,.chat-launcher,.send-btn,.bubble-row,.rx-pill,.toast,.typing-bubble{
        animation:none!important;transition:none!important
    }
}

/* User-set display name input (above messages list) */
.user-name-box{
    display:flex;align-items:center;gap:.5rem;
    padding:.5rem .8rem;background:var(--bg);
    border-bottom:1px solid var(--border)
}
.user-name-box i.fa-user-pen{color:var(--primary);font-size:.95em}
.user-name-box input{
    flex:1;min-width:0;
    background:var(--surface);color:var(--text);
    border:1px solid var(--border);border-radius:8px;
    padding:.4rem .6rem;font:inherit;font-size:.85rem
}
.user-name-box input:focus{outline:2px solid var(--primary);outline-offset:1px}
.user-name-box button{
    border:none;background:var(--primary);color:#fff;
    border-radius:8px;padding:.4rem .55rem;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center
}
.user-name-box button:hover{filter:brightness(1.05)}

/* ─── E2E + bubble menu / react picker / edit form ─── */
.cipher-placeholder{
    display:inline-flex;align-items:center;gap:.35rem;
    color:var(--meta);font-size:.85em;font-style:italic;opacity:.85
}
.cipher-placeholder i{font-size:.75em}
.bubble-menu{
    background:var(--surface-elev,#fff);border:1px solid var(--border);
    border-radius:10px;padding:.25rem;min-width:160px;z-index:120;
    box-shadow:0 8px 24px rgba(0,0,0,.18)
}
.bubble-menu button{
    display:flex;align-items:center;gap:.5rem;width:100%;
    background:transparent;border:none;color:var(--text);
    padding:.55rem .7rem;border-radius:6px;font-size:.85rem;cursor:pointer;text-align:start
}
.bubble-menu button:hover{background:rgba(0,0,0,.06)}
.bubble-menu button.danger{color:#dc2626}
.bubble-menu button.danger:hover{background:rgba(220,38,38,.08)}
.react-picker{
    background:var(--surface-elev,#fff);border:1px solid var(--border);
    border-radius:999px;padding:.3rem .4rem;display:flex;gap:.2rem;
    z-index:120;box-shadow:0 8px 20px rgba(0,0,0,.18)
}
.react-picker button{
    background:transparent;border:none;font-size:1.2rem;cursor:pointer;
    width:2rem;height:2rem;border-radius:999px;display:inline-flex;
    align-items:center;justify-content:center
}
.react-picker button:hover{background:rgba(0,0,0,.07)}
.edit-form{display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem}
.edit-input{
    width:100%;min-height:2.4rem;border:1px solid var(--border);
    border-radius:8px;padding:.45rem .55rem;background:var(--surface);color:var(--text);
    font:inherit;resize:vertical
}
.edit-actions{display:flex;justify-content:flex-end;gap:.4rem}
.edit-actions button{
    background:transparent;border:1px solid var(--border);color:var(--text);
    width:2rem;height:2rem;border-radius:999px;display:inline-flex;
    align-items:center;justify-content:center;cursor:pointer
}
.edit-actions .edit-save{background:var(--accent,#0aa6e2);color:#fff;border-color:transparent}
.bubble-row.right .ticks i{font-size:.78em;margin-inline-start:.25rem;color:var(--meta)}
.bubble-row.right .ticks.delivered i{color:var(--meta)}
.bubble-row.right .ticks.seen i{color:#0aa6e2}
.tray-item{
    position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;
    background:var(--surface);border:1px solid var(--border);flex-shrink:0
}
.tray-item img,.tray-item video{width:100%;height:100%;object-fit:cover}
.tray-item .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--meta)}
.tray-item .rm{
    position:absolute;top:2px;right:2px;width:18px;height:18px;
    border:none;background:rgba(0,0,0,.55);color:#fff;border-radius:999px;
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer
}
.tray-item.is-uploading{opacity:.7}

/* ─── UPGRADED · header chips, status, no-pin CTA, mobile attach ─── */

/* Show user's name + status as small chips under the chat title. */
.chat-panel .chat-header .header-chips{
    display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem
}
.chat-panel .chat-header .name-chip,
.chat-panel .chat-header .status-chip{
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.12rem .55rem;border-radius:999px;
    background:rgba(255,255,255,.18);color:#fff;
    font-size:.72rem;line-height:1.4;font-weight:500;
    max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.chat-panel .chat-header .name-chip i{font-size:.7em;opacity:.85}
.chat-panel .chat-header .status-chip{background:rgba(255,255,255,.26)}

/* Legacy-cipher bubble placeholder (E2E feature was removed; old
   encrypted bubbles can no longer be decoded so we just show a
   small lock-pill instead). */
.legacy-cipher{
    display:inline-flex;align-items:center;gap:.35rem;
    color:var(--meta);font-size:.85em;font-style:italic;opacity:.7
}
.legacy-cipher i{font-size:.75em}

/* "No PIN? Send a letter first" CTA. */
.no-pin-cta{
    margin-top:1.4rem;padding-top:1rem;
    border-top:1px dashed var(--border);
    text-align:center
}
.no-pin-or{
    display:block;color:var(--muted);font-size:.78rem;
    margin-bottom:.55rem;letter-spacing:.05em;text-transform:uppercase
}
.chat-secondary-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
    padding:.6rem 1rem;border-radius:10px;
    background:var(--surface);color:var(--primary);
    border:1.5px solid var(--primary);font-weight:600;
    transition:background .15s, color .15s, transform .1s
}
.chat-secondary-btn:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}
.chat-secondary-btn:active{transform:translateY(0)}
.no-pin-hint{
    margin:.55rem 0 0;font-size:.8rem;color:var(--muted);line-height:1.5
}

/* WhatsApp-style status box (sits next to user-name-box). */
.user-status-box{
    display:flex;align-items:center;gap:.5rem;
    padding:.45rem .8rem;background:var(--bg);
    border-bottom:1px solid var(--border)
}
.user-status-box i.fa-circle-info{color:var(--primary);font-size:.95em}
.user-status-box input{
    flex:1;min-width:0;
    background:var(--surface);color:var(--text);
    border:1px solid var(--border);border-radius:8px;
    padding:.4rem .6rem;font:inherit;font-size:.85rem
}
.user-status-box input:focus{outline:2px solid var(--primary);outline-offset:1px}
.user-status-box button{
    border:none;background:var(--primary);color:#fff;
    border-radius:8px;padding:.4rem .55rem;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center
}
.user-status-box button:hover{filter:brightness(1.05)}
.user-status-box .status-quick-btn{
    background:transparent;color:var(--primary);
    border:1.5px solid var(--primary);
    padding:.35rem .5rem
}
.user-status-box .status-quick-btn:hover{background:var(--primary);color:#fff}

/* Quick-status options popover (WhatsApp-style list). */
.status-options{
    display:flex;flex-wrap:wrap;gap:.35rem;
    padding:.55rem .8rem;background:var(--bg);
    border-bottom:1px solid var(--border)
}
.status-options button{
    border:1px solid var(--border);background:var(--surface);color:var(--text);
    border-radius:999px;padding:.3rem .7rem;font-size:.8rem;font-weight:500;
    display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;
    transition:background .15s,border-color .15s
}
.status-options button:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Change-PIN box (sits in the overflow menu, mirrors user-name-box). */
.user-pin-box{
    display:flex;align-items:center;gap:.5rem;
    padding:.45rem .8rem;background:var(--bg);
    border-bottom:1px solid var(--border)
}
.user-pin-box i.fa-key{color:var(--primary);font-size:.95em}
.user-pin-box input{
    flex:1;min-width:0;
    background:var(--surface);color:var(--text);
    border:1px solid var(--border);border-radius:8px;
    padding:.4rem .6rem;font:inherit;font-size:.85rem;
    letter-spacing:1px
}
.user-pin-box input:focus{outline:2px solid var(--primary);outline-offset:1px}
.user-pin-box button{
    border:none;background:var(--primary);color:#fff;
    border-radius:8px;padding:.4rem .55rem;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center
}
.user-pin-box button:hover{filter:brightness(1.05)}
.chat-overflow .user-pin-box{
    background:transparent;border-bottom:none;padding:0;
    margin-top:.25rem
}

/* Make the status chip pop visually inside the dark header. */
[data-theme="dark"] .chat-panel .chat-header .name-chip,
[data-theme="dark"] .chat-panel .chat-header .status-chip{
    background:rgba(255,255,255,.14)
}

/* ─── Floating status bubble (WhatsApp-style) ─── */
.chat-panel .status-float{
    position:absolute;top:62px;left:14px;right:auto;
    max-width:calc(100% - 90px);
    padding:.4rem .65rem;
    background:rgba(34,34,42,.92);color:#fff;
    border-radius:14px;border-top-left-radius:4px;
    box-shadow:0 6px 14px rgba(0,0,0,.18);
    font-size:.78rem;line-height:1.35;font-weight:500;
    z-index:78;
    display:flex;align-items:center;gap:.5rem;
    animation:status-float-in .25s ease-out
}
.chat-panel .status-float::before{
    content:"";position:absolute;top:-6px;left:14px;
    width:10px;height:10px;background:inherit;
    transform:rotate(45deg);border-radius:2px
}
.chat-panel .status-float .status-float-text{
    flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.chat-panel .status-float .status-float-close{
    flex:0 0 auto;border:none;background:transparent;color:rgba(255,255,255,.7);
    cursor:pointer;padding:.1rem .25rem;border-radius:4px;font-size:.75rem;
    transition:color .15s,background .15s
}
.chat-panel .status-float .status-float-close:hover{color:#fff;background:rgba(255,255,255,.12)}
@keyframes status-float-in{from{transform:translateY(-4px);opacity:0}to{transform:translateY(0);opacity:1}}
[data-theme="light"] .chat-panel .status-float{
    background:#1f2937
}

/* ─── 3-dot (kebab) menu in chat header ─── */
.chat-panel .chat-header .chat-kebab{
    width:34px;height:34px;border-radius:50%;
    border:none;background:rgba(255,255,255,.18);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;flex:0 0 auto;
    transition:background .15s
}
.chat-panel .chat-header .chat-kebab:hover{background:rgba(255,255,255,.32)}
.chat-panel .chat-header .chat-kebab[aria-expanded="true"]{background:rgba(255,255,255,.4)}

/* Settings modal — a centered dialog inside the chat panel that
   appears when the user taps the 3-dot (kebab) button.  Uses an
   absolute overlay because .chat-panel.is-open carries a transform
   (a fixed-position child would escape to the viewport). */
.chat-overlay{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(13,6,38,.46);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    z-index:90;
    padding:1rem;
    animation:overlay-fade .16s ease-out
}
@keyframes overlay-fade{from{opacity:0}to{opacity:1}}
.chat-overflow{
    width:min(92%,340px);
    max-height:82%;
    display:flex;flex-direction:column;
    background:var(--surface);color:var(--text);
    border-radius:16px;
    border:1px solid rgba(255,255,255,.5);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    animation:overflow-pop .18s cubic-bezier(.2,.9,.3,1.2)
}
/* Prevent the page from scrolling behind the modal. */
body.overflow-open{overflow:hidden}
@keyframes overflow-pop{from{transform:translateY(10px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.overflow-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:.8rem 1rem;
    border-bottom:1px solid var(--border);
    flex:0 0 auto
}
.overflow-header .overflow-title{
    font-size:1rem;font-weight:700;letter-spacing:0;
    text-transform:none;color:var(--text);margin:0
}
.overflow-close{
    width:30px;height:30px;border-radius:50%;
    border:none;background:rgba(0,0,0,.06);color:var(--muted);
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:.9rem;flex:0 0 auto;
    transition:background .15s,color .15s,transform .12s
}
.overflow-close:hover{background:rgba(0,0,0,.12);color:var(--text)}
.overflow-close:active{transform:scale(.92)}
.overflow-body{
    flex:1 1 auto;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch
}
.overflow-section{
    padding:.7rem .8rem;border-bottom:1px solid var(--border)
}
.overflow-section:last-child{border-bottom:none}
.overflow-title{
    display:block;font-size:.72rem;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted);margin-bottom:.45rem
}
.chat-overflow .user-name-box,
.chat-overflow .user-status-box{
    background:transparent;border-bottom:none;padding:0;
    margin-top:.25rem
}
.chat-overflow .status-options{
    background:transparent;border-bottom:none;padding:.45rem 0 0
}
/* "Logout now" button inside the settings modal. */
.chat-overflow .overflow-actions{padding:.6rem .8rem}
.chat-overflow .overflow-logout{
    width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.55rem .9rem;border-radius:10px;border:none;cursor:pointer;
    font-size:.9rem;font-weight:600;
    color:#fff;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
    box-shadow:0 6px 14px rgba(220,38,38,.28);transition:filter .15s,transform .1s
}
.chat-overflow .overflow-logout:hover{filter:brightness(1.07)}
.chat-overflow .overflow-logout:active{transform:translateY(1px)}

/* ─── Mobile attach menu (full-width bottom sheet on phones) ─── */
@media (max-width: 540px){
    .attach-menu{
        position:fixed;left:0;right:0;bottom:0;top:auto;
        width:100%;max-width:100%;
        border-radius:14px 14px 0 0;
        padding:.8rem;
        box-shadow:0 -10px 30px rgba(0,0,0,.25);
        z-index:80
    }
    .attach-menu button{
        width:100%;padding:.85rem 1rem;font-size:1rem;
        border-bottom:1px solid var(--border)
    }
    .attach-menu button:last-child{border-bottom:none}
    .status-options{padding:.6rem}
    .status-options button{font-size:.85rem;padding:.4rem .8rem}
    .chat-panel .chat-header .name-chip,
    .chat-panel .chat-header .status-chip{max-width:9.5rem;font-size:.7rem}
}

.tray-item .pct{position:absolute;bottom:2px;left:2px;background:rgba(0,0,0,.55);color:#fff;font-size:.65rem;padding:1px 5px;border-radius:6px}

/* ════════════════════════════════════════════════════════════
   ENGAGEMENT & POLISH PASS
   Micro-interactions and visual polish so chatting feels lively.
   None of these change behaviour or layout assumptions; they
   strictly add motion + nicer affordances on top.
   ════════════════════════════════════════════════════════════ */

/* Floating launcher: gentle breathing pulse + ripple on hover. */
.chat-launcher{
    will-change:transform;
    box-shadow:0 10px 30px rgba(58,12,163,.45),0 0 0 0 rgba(114,9,183,.45)
}
.chat-launcher:not(.is-open){animation:launcherPulse 3.4s ease-in-out infinite}
.chat-launcher:hover{transform:translateY(-2px) scale(1.04);
    box-shadow:0 14px 36px rgba(58,12,163,.55),0 0 0 .25rem rgba(114,9,183,.10)}
.chat-launcher:active{transform:translateY(0) scale(.98)}
@keyframes launcherPulse{
    0%,100%{box-shadow:0 10px 30px rgba(58,12,163,.45),0 0 0 0 rgba(114,9,183,.30)}
    50%   {box-shadow:0 10px 30px rgba(58,12,163,.45),0 0 0 12px rgba(114,9,183,0)}
}
@media (prefers-reduced-motion:reduce){
    .chat-launcher:not(.is-open){animation:none}
}

/* New-message badge — soft pop when added. */
.chat-launcher.has-badge .badge{
    animation:badgePop .35s cubic-bezier(.2,.9,.4,1.5) both
}
@keyframes badgePop{
    0%{transform:scale(0)}
    60%{transform:scale(1.25)}
    100%{transform:scale(1)}
}

/* Send button: subtle "ready" glow when there's content; satisfying tap. */
.chat-send{transition:transform .12s ease,filter .15s,box-shadow .2s}
.chat-send:not(:disabled){
    box-shadow:0 4px 12px rgba(58,12,163,.30)
}
.chat-send:not(:disabled):hover{transform:translateY(-1px) scale(1.04);filter:brightness(1.06)}
.chat-send:not(:disabled):active{transform:translateY(0) scale(.95)}
.chat-send:disabled{opacity:.55;cursor:not-allowed}

/* Composer: nicer focus state on the textarea. */
.chat-reply textarea{
    transition:border-color .15s,box-shadow .15s,background .15s
}
.chat-reply textarea:focus,
.chat-reply textarea:focus-visible{
    outline:none;border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(114,9,183,.18)
}
/* Composer container — soft top divider via gradient instead of hard line. */
.chat-reply{position:relative}
.chat-reply::before{
    content:"";position:absolute;left:.6rem;right:.6rem;top:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--border),transparent);
    pointer-events:none
}

/* Tap-feedback on icon buttons (emoji/attach/voice). */
.chat-reply .emoji-trigger,
.chat-reply .attach-trigger,
.chat-reply .voice-trigger{
    transition:background .15s,color .15s,transform .12s
}
.chat-reply .emoji-trigger:hover,
.chat-reply .attach-trigger:hover,
.chat-reply .voice-trigger:hover{
    background:rgba(58,12,163,.10);color:var(--primary)
}
.chat-reply .emoji-trigger:active,
.chat-reply .attach-trigger:active,
.chat-reply .voice-trigger:active{transform:scale(.92)}

/* Voice "recording" indicator — pulsing red ring. */
.voice-trigger.is-recording{
    color:#ef4444;
    animation:recPulse 1s ease-in-out infinite
}
@keyframes recPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}
    50%   {box-shadow:0 0 0 10px rgba(239,68,68,0)}
}

/* Voice bar — progress shimmer + smooth height transition. */
.voice-bar{animation:slideDown .25s ease-out both}
@keyframes slideDown{
    from{opacity:0;transform:translateY(-6px)}
    to{opacity:1;transform:translateY(0)}
}

/* Reply preview slide-in. */
.reply-preview{animation:slideDown .22s ease-out both}

/* Attach tray items — spring-in. */
.tray-item{animation:trayIn .25s cubic-bezier(.2,.9,.4,1.4) both}
@keyframes trayIn{
    from{opacity:0;transform:scale(.7) translateY(6px)}
    to{opacity:1;transform:scale(1) translateY(0)}
}
.tray-item.is-uploading::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
    background-size:200% 100%;
    animation:shimmer 1.2s ease-in-out infinite;
    pointer-events:none;border-radius:inherit
}
@keyframes shimmer{
    from{background-position:200% 0}
    to  {background-position:-100% 0}
}

/* Scroll-to-latest button — soft entrance. */
.scroll-bottom{animation:popIn .22s cubic-bezier(.2,.9,.4,1.4) both}
@keyframes popIn{
    from{opacity:0;transform:translateY(8px) scale(.85)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

/* Date separators — softer chip with gradient lines. */
.date-sep{
    display:flex;align-items:center;gap:.55rem;
    margin:.7rem .25rem .35rem;color:var(--muted);font-size:.7rem;
    text-transform:uppercase;letter-spacing:.05em;font-weight:600
}
.date-sep::before,.date-sep::after{
    content:"";flex:1;height:1px;
    background:linear-gradient(90deg,transparent,var(--border) 40%,var(--border) 60%,transparent)
}

/* Bubble menu — slide-in. */
.bubble-menu{animation:popIn .15s ease-out both}

/* Toast — slide-in from bottom (already existed; bounce a touch). */
.toast.is-show{
    animation:toastBounce .35s cubic-bezier(.2,.9,.4,1.3) both
}
@keyframes toastBounce{
    0%  {opacity:0;transform:translateX(-50%) translateY(40px) scale(.92)}
    60% {opacity:1;transform:translateX(-50%) translateY(-4px) scale(1.02)}
    100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

/* Confirm modal — gentle fade-in with content scaling. */
.modal{transition:opacity .18s}
.modal.is-open .modal-content{
    animation:modalIn .25s cubic-bezier(.2,.9,.4,1.2) both
}
@keyframes modalIn{
    from{opacity:0;transform:translateY(8px) scale(.95)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

/* Lightbox — fade-in + image scale-in. */
.lightbox.is-open{animation:fadeIn .2s ease-out both}
.lightbox.is-open img,.lightbox.is-open video{
    animation:lbIn .28s cubic-bezier(.2,.9,.4,1.1) both
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes lbIn{
    from{opacity:0;transform:scale(.92)}
    to{opacity:1;transform:scale(1)}
}

/* Quoted reply ribbon — animate in. */
.bubble .quoted{
    border-left:3px solid currentColor;padding-left:.55rem;
    margin-bottom:.4rem;opacity:.85;cursor:pointer;
    transition:opacity .15s,transform .12s
}
.bubble .quoted:hover{opacity:1;transform:translateX(2px)}

/* Ticks colour the bubble's seen state in a more obvious way. */
.bubble-row.right .ticks.seen i{color:#67e8f9}
.bubble.user .ticks.seen i{color:#67e8f9}
.bubble.user .ticks i{color:rgba(255,255,255,.7)}

/* PIN input emphasis — pulse the View button when filled. */
.chat-pin input{transition:border-color .15s,box-shadow .15s}
.chat-pin input:focus{outline:none;border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(114,9,183,.18)}

/* Lock-status idle countdown — make warning state pulse a touch. */
.lock-status{transition:background .2s,color .2s}
.lock-status.is-warning{
    background:rgba(220,38,38,.15);color:#dc2626;
    animation:lockPulse 1.2s ease-in-out infinite
}
[data-theme="dark"] .lock-status.is-warning,
html[data-theme="auto"] .lock-status.is-warning{
    background:#3a1414;color:#fecaca
}
@keyframes lockPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35)}
    50%   {box-shadow:0 0 0 6px rgba(220,38,38,0)}
}

/* Chat header — subtle shimmer on the live chip. */
.lock-status:not(.is-warning) i.fa-shield-halved{
    animation:livePulse 2.2s ease-in-out infinite
}
@keyframes livePulse{
    0%,100%{opacity:.85}
    50%   {opacity:1;filter:drop-shadow(0 0 4px var(--accent))}
}

/* Hero title — gentle gradient-shift on the highlight word. */
.hero-prompt .accent{
    background:linear-gradient(90deg,var(--primary),var(--accent),var(--pink),var(--primary));
    background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:heroShift 9s ease-in-out infinite
}
@keyframes heroShift{
    0%,100%{background-position:0% 50%}
    50%   {background-position:100% 50%}
}
@media (prefers-reduced-motion:reduce){
    .hero-prompt .accent{animation:none}
    .lock-status.is-warning,.lock-status:not(.is-warning) i.fa-shield-halved,
    .voice-trigger.is-recording,.tray-item.is-uploading::after{animation:none}
}

/* Emoji-picker polish — smooth tab switch + grid hover bounce. */
.emoji-picker{animation:popIn .18s cubic-bezier(.2,.9,.4,1.4) both}
.emoji-picker .emoji-tabs button{transition:background .15s,transform .1s}
.emoji-picker .emoji-tabs button.is-active{
    background:var(--primary);color:#fff
}
.emoji-grid button{
    transition:transform .12s ease,background .15s;
    -webkit-tap-highlight-color:transparent
}
.emoji-grid button:hover,.emoji-grid button:focus-visible{
    background:rgba(58,12,163,.10);transform:translateY(-2px) scale(1.10);
    outline:none
}
.emoji-grid button:active{transform:scale(.92)}

/* Attach menu — subtle pop. */
.attach-menu{animation:popIn .18s ease-out both}

/* Letter card — gentle hover lift on desktop. */
@media (hover:hover) and (min-width:721px){
    .letter-paper-wrap:hover{
        transform:translateY(-3px);
        box-shadow:0 30px 80px rgba(58,12,163,.28)
    }
    .letter-paper-wrap{transition:transform .25s,box-shadow .3s}
}

/* Status-options buttons — entrance pop. */
.status-options button{animation:popIn .2s ease-out both;animation-delay:calc(var(--i,0) * 30ms)}

/* Header chips — slight slide-in. */
.chat-panel .chat-header .name-chip,
.chat-panel .chat-header .status-chip{
    animation:popIn .25s ease-out both
}

/* Smooth scroll on the message list when programmatic. */
.chat-messages{scroll-behavior:smooth}

/* Custom scrollbar — slim & themed. */
.chat-messages::-webkit-scrollbar,
.overflow-body::-webkit-scrollbar{width:6px}
.chat-messages::-webkit-scrollbar-thumb,
.overflow-body::-webkit-scrollbar-thumb{
    background:var(--border);border-radius:6px
}
.chat-messages::-webkit-scrollbar-thumb:hover,
.overflow-body::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.chat-messages,.overflow-body{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

/* iOS safe-area padding on the floating launcher / panel / toast / composer. */
@supports (padding:env(safe-area-inset-bottom)){
    .chat-launcher{bottom:max(24px,env(safe-area-inset-bottom))}
    .chat-panel{bottom:max(90px,calc(env(safe-area-inset-bottom) + 70px))}
    .toast{bottom:max(24px,env(safe-area-inset-bottom))}
}

/* Force 16px minimum on chat textarea on iOS to suppress auto-zoom. */
@supports (-webkit-touch-callout:none){
    .chat-reply textarea,.chat-pin input,.user-status-box input,.user-name-box input{
        font-size:16px
    }
}

/* ════════════════════════════════════════════════════════════
   FULL-SCREEN MODE — WhatsApp-style "expand" toggle in header.
   When active, chat-panel covers 100vw x 100dvh.  Header stays
   sticky so admin's typing/online state is always in view while
   the user is composing.
   ════════════════════════════════════════════════════════════ */
.chat-panel .chat-fullscreen,
.chat-panel .chat-kebab{
    background:rgba(255,255,255,.18);border:none;color:#fff;
    width:32px;height:32px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;transition:background .15s,transform .12s;flex-shrink:0
}
.chat-panel .chat-fullscreen:hover{background:rgba(255,255,255,.32)}
.chat-panel .chat-fullscreen:active{transform:scale(.92)}
.chat-panel .chat-fullscreen i{font-size:.85rem}

.chat-panel.is-fullscreen{
    bottom:0 !important;right:0 !important;left:0 !important;top:0 !important;
    width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    border-radius:0;border:none
}
.chat-panel.is-fullscreen .chat-state.chat-thread{
    max-width:920px;margin:0 auto;width:100%
}
.chat-panel.is-fullscreen .chat-header{
    position:sticky;top:0;z-index:5
}
@supports (padding:env(safe-area-inset-top)){
    .chat-panel.is-fullscreen .chat-header{
        padding-top:max(.85rem,env(safe-area-inset-top))
    }
}

/* Always keep header visible — sticky on narrow viewports too. */
.chat-panel .chat-header{position:sticky;top:0;z-index:4}

/* Header buttons row layout when both fullscreen + kebab exist. */
.chat-panel .chat-header > .chat-fullscreen + .chat-kebab{margin-left:.1rem}

/* ════════════════════════════════════════════════════════════
   VIEW-ONCE COMPOSER TOGGLE & ATTACHMENT PLACEHOLDER
   ════════════════════════════════════════════════════════════ */
.chat-reply .vo-trigger{
    background:transparent;border:none;color:var(--muted);
    width:34px;height:34px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;position:relative;transition:background .15s,color .15s
}
.chat-reply .vo-trigger:hover{background:rgba(58,12,163,.10);color:var(--primary)}
.chat-reply .vo-trigger.is-armed{
    color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));
    box-shadow:0 4px 12px rgba(58,12,163,.30)
}
.chat-reply .vo-trigger .vo-pill{
    position:absolute;top:-3px;right:-3px;
    background:var(--accent,#06b6d4);color:#fff;
    font-size:.62rem;font-weight:700;line-height:1;
    padding:2px 5px;border-radius:999px;
    box-shadow:0 0 0 1.5px var(--surface,#fff)
}
[data-theme="dark"] .chat-reply .vo-trigger .vo-pill{box-shadow:0 0 0 1.5px var(--surface)}

/* Tray item — view-once badge in the corner. */
.tray-item.is-view-once{outline:2px solid var(--accent,#06b6d4);outline-offset:-2px}
.tray-vo-tag{
    position:absolute;top:2px;left:2px;z-index:2;
    background:rgba(0,0,0,.55);color:#fff;
    font-size:.6rem;font-weight:700;
    padding:1px 5px;border-radius:6px;
    display:inline-flex;align-items:center;gap:.2rem
}

/* View-once attachment "tap-to-reveal" stub (admin-side or burned). */
.att-view-once-stub{
    position:relative;display:inline-flex;flex-direction:column;
    align-items:center;justify-content:center;gap:.4rem;
    min-width:160px;min-height:120px;padding:1rem 1.2rem;
    border-radius:14px;background:linear-gradient(135deg,#1e1b4b,#3a0ca3);
    color:#fff;cursor:pointer;border:none;font:inherit;text-align:center;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
    transition:transform .18s,box-shadow .18s
}
.att-view-once-stub:hover{transform:translateY(-2px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.20),0 6px 18px rgba(58,12,163,.25)}
.att-view-once-stub i{font-size:1.55rem}
.att-view-once-stub small{opacity:.85;font-size:.72rem;font-weight:500}
.att-view-once-stub.is-burned{
    background:repeating-linear-gradient(135deg,#1f2937 0 8px,#0f172a 8px 16px);
    color:#94a3b8;cursor:not-allowed;
    box-shadow:inset 0 0 0 1px rgba(148,163,184,.18)
}
.att-view-once-stub.is-burned:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(148,163,184,.18)}
[data-theme="dark"] .att-view-once-stub.is-burned{
    background:repeating-linear-gradient(135deg,#0f172a 0 8px,#020617 8px 16px)
}
.att-view-once-tag{
    display:inline-flex;align-items:center;gap:.25rem;
    font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:.12rem .4rem;border-radius:999px;
    background:rgba(0,0,0,.35);color:#fff
}
.att-vo-corner{position:absolute;top:.4rem;left:.4rem;z-index:2}

/* ════════════════════════════════════════════════════════════
   DARK-MODE PASS — fixes for fields, composer, tray, react-picker,
   bubbles, ticks and overflow that were either invisible or low
   contrast in dark mode.
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .chat-panel{
    background:var(--surface);
    border-color:rgba(255,255,255,.07);
    box-shadow:0 20px 60px rgba(0,0,0,.55)
}
[data-theme="dark"] .chat-pin input,
[data-theme="dark"] .user-status-box input,
[data-theme="dark"] .user-name-box input,
[data-theme="dark"] .user-pin-box input,
[data-theme="dark"] .chat-reply textarea{
    background:rgba(255,255,255,.05);
    color:var(--text);
    border-color:rgba(255,255,255,.08)
}
[data-theme="dark"] .chat-pin input::placeholder,
[data-theme="dark"] .user-status-box input::placeholder,
[data-theme="dark"] .user-name-box input::placeholder,
[data-theme="dark"] .user-pin-box input::placeholder,
[data-theme="dark"] .chat-reply textarea::placeholder{
    color:rgba(255,255,255,.4)
}
[data-theme="dark"] .chat-reply{
    background:var(--surface);
    border-top:1px solid rgba(255,255,255,.06)
}
[data-theme="dark"] .chat-reply .emoji-trigger,
[data-theme="dark"] .chat-reply .attach-trigger,
[data-theme="dark"] .chat-reply .voice-trigger,
[data-theme="dark"] .chat-reply .vo-trigger{color:rgba(255,255,255,.7)}
[data-theme="dark"] .chat-reply .emoji-trigger:hover,
[data-theme="dark"] .chat-reply .attach-trigger:hover,
[data-theme="dark"] .chat-reply .voice-trigger:hover,
[data-theme="dark"] .chat-reply .vo-trigger:hover{
    background:rgba(157,108,255,.18);color:#cdb8ff
}
[data-theme="dark"] .reply-preview{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.08);
    color:var(--text)
}
[data-theme="dark"] .attach-tray{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07)}
[data-theme="dark"] .tray-item{background:#1f1f2b;border:1px solid rgba(255,255,255,.07)}
[data-theme="dark"] .attach-menu{background:var(--surface);border:1px solid rgba(255,255,255,.08)}
[data-theme="dark"] .attach-menu button{color:var(--text)}
[data-theme="dark"] .attach-menu button:hover{background:rgba(157,108,255,.15)}
[data-theme="dark"] .emoji-picker{background:var(--surface);border:1px solid rgba(255,255,255,.08)}
[data-theme="dark"] .emoji-picker .emoji-tabs{border-bottom-color:rgba(255,255,255,.08)}
[data-theme="dark"] .emoji-picker .emoji-tabs button{color:rgba(255,255,255,.65)}
[data-theme="dark"] .emoji-picker .emoji-tabs button.is-active{background:var(--primary);color:#fff}
[data-theme="dark"] .emoji-grid button:hover,
[data-theme="dark"] .emoji-grid button:focus-visible{background:rgba(157,108,255,.20)}

/* Bubble tones in dark mode */
[data-theme="dark"] .bubble.admin{
    background:#23232f;color:#e7e7ec;
    border:1px solid rgba(255,255,255,.06)
}
[data-theme="dark"] .bubble.user{
    background:linear-gradient(135deg,#5b21b6,#9d6cff);
    color:#fff;border:none
}
[data-theme="dark"] .bubble .quoted{
    background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)
}
[data-theme="dark"] .bubble .meta{color:rgba(255,255,255,.55)}
[data-theme="dark"] .bubble.user .meta{color:rgba(255,255,255,.78)}
[data-theme="dark"] .bubble.admin .meta .time{color:rgba(255,255,255,.5)}
[data-theme="dark"] .bubble .ticks i{color:rgba(255,255,255,.55)}
[data-theme="dark"] .bubble.user .ticks.seen i{color:#7dd3fc}
[data-theme="dark"] .bubble .legacy-cipher{color:rgba(255,255,255,.55)}

/* Reactions strip readable in dark. */
[data-theme="dark"] .rx-pill{
    background:rgba(255,255,255,.08);color:var(--text);
    border:1px solid rgba(255,255,255,.08)
}
[data-theme="dark"] .rx-pill:hover{background:rgba(157,108,255,.18)}

/* Bubble menu readable in dark. */
[data-theme="dark"] .bubble-menu{
    background:#23232f;color:var(--text);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 32px rgba(0,0,0,.6)
}
[data-theme="dark"] .bubble-menu button:hover{background:rgba(157,108,255,.15)}
[data-theme="dark"] .bubble-menu button.danger{color:#fca5a5}
[data-theme="dark"] .bubble-menu button.danger:hover{background:rgba(239,68,68,.15)}

/* Edit-form readability. */
[data-theme="dark"] .edit-input{
    background:rgba(255,255,255,.08);color:var(--text);
    border:1px solid rgba(255,255,255,.10)
}

/* Settings modal dialog in dark. */
[data-theme="dark"] .chat-overlay{background:rgba(4,1,14,.62)}
[data-theme="dark"] .chat-overflow{
    background:var(--surface);border:1px solid rgba(255,255,255,.06)
}
[data-theme="dark"] .overflow-section{border-bottom-color:rgba(255,255,255,.06)}
[data-theme="dark"] .overflow-title{color:rgba(255,255,255,.55)}
[data-theme="dark"] .overflow-close{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
[data-theme="dark"] .overflow-close:hover{background:rgba(255,255,255,.14);color:#fff}
[data-theme="dark"] .user-status-box,
[data-theme="dark"] .user-name-box,
[data-theme="dark"] .user-pin-box{
    background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)
}
[data-theme="dark"] .status-options{
    background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)
}
[data-theme="dark"] .status-options button{color:var(--text)}
[data-theme="dark"] .status-options button:hover{background:rgba(157,108,255,.15)}
[data-theme="dark"] .overflow-logout{color:#fca5a5}
[data-theme="dark"] .overflow-logout:hover{background:rgba(239,68,68,.15)}

/* Modal + lightbox + toast in dark. */
[data-theme="dark"] .modal-content{
    background:var(--surface);color:var(--text);
    border:1px solid rgba(255,255,255,.07)
}
[data-theme="dark"] .modal-content .modal-cancel{
    background:rgba(255,255,255,.06);color:var(--text);
    border:1px solid rgba(255,255,255,.08)
}
[data-theme="dark"] .toast{
    background:#23232f;color:var(--text);
    border:1px solid rgba(255,255,255,.08)
}

/* Scroll-bottom button in dark. */
[data-theme="dark"] .scroll-bottom{
    background:#23232f;color:var(--text);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 20px rgba(0,0,0,.5)
}
[data-theme="dark"] .scroll-bottom:hover{background:rgba(157,108,255,.18)}

/* Live + lock-status pills */
[data-theme="dark"] .live-status{color:rgba(255,255,255,.7);background:rgba(255,255,255,.05)}
[data-theme="dark"] .lock-status{background:rgba(255,255,255,.05);color:rgba(255,255,255,.7)}

/* Chat-end button */
[data-theme="dark"] .chat-end{
    background:rgba(255,255,255,.06);color:var(--text);
    border:1px solid rgba(255,255,255,.08)
}
[data-theme="dark"] .chat-end:hover{background:rgba(239,68,68,.18);color:#fca5a5}

/* PIN entry "no-pin" CTA card */
[data-theme="dark"] .no-pin-cta{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
[data-theme="dark"] .no-pin-or{color:rgba(255,255,255,.5)}
[data-theme="dark"] .no-pin-hint{color:rgba(255,255,255,.55)}

/* Voice-bar in dark — keep red but with darker bg. */
[data-theme="dark"] .voice-bar{background:#3a1010;border-color:#7f1d1d;color:#fecaca}

/* React-picker in dark mode (extra polish). */
[data-theme="dark"] .react-picker{
    background:rgba(35,35,47,.92);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 12px 32px rgba(0,0,0,.55)
}

/* Mobile fullscreen tweaks. */
@media (max-width:540px){
    .chat-panel.is-fullscreen .chat-state{padding:.9rem .85rem}
    .chat-panel.is-fullscreen .chat-reply{padding:.55rem .7rem}
}
@media (max-width:380px){
    .chat-panel .chat-fullscreen{width:28px;height:28px}
    .chat-panel .chat-fullscreen i{font-size:.75rem}
    .chat-reply .vo-trigger{width:30px;height:30px}
}

/* ════════════════════════════════════════════════════════════
   v3g — close the bottom gap on mobile + how-to-chat steps card
   ────────────────────────────────────────────────────────────
   Problem: when chat-panel was open on a phone, it sat at
   bottom:78–90px (to clear the launcher), so the page background
   leaked through under the composer and the launcher pulsed in
   the gap.  Fix: snap the open panel edge-to-edge (bottom:0,
   100dvh) on mobile, and hide the launcher while the panel is
   open.  Larger screens keep the floating-card look untouched.
   ════════════════════════════════════════════════════════════ */
@media (max-width:540px){
    /* Hide the floating launcher while the chat panel is open. */
    body.chat-open .chat-launcher{opacity:0;pointer-events:none;visibility:hidden}

    /* Snap the chat-panel to the full mobile *visible* viewport when open.
     * The height uses `var(--vp, 100dvh)` — `--vp` is set in JS from
     * window.visualViewport.height (shrinks with the keyboard on every
     * mobile browser) so the panel always exactly matches what the user
     * can see, with the header pinned at the top of that area.
     * `100dvh` is the fallback for browsers without VisualViewport (older
     * WebViews / Firefox <114).  No gap underneath, no rounded corners. */
    body.chat-open .chat-panel.is-open{
        position:fixed;
        inset:0 !important;
        right:0 !important;left:0 !important;top:0 !important;bottom:0 !important;
        width:100vw;max-width:100vw;
        height:var(--vp, 100dvh);max-height:var(--vp, 100dvh);
        border-radius:0;border:none;
        margin:0;
        /* The panel itself must be the flex container so chat-header
         * (flex-shrink:0) stays at the top and chat-thread (flex:1)
         * fills the rest no matter what. */
        display:flex;flex-direction:column;overflow:hidden
    }
    /* Keep the chat-header visible — it's the first flex item, but be
     * explicit so position:sticky also works if a sub-state ever scrolls. */
    body.chat-open .chat-panel.is-open .chat-header{
        position:sticky;top:0;z-index:6;flex-shrink:0;
        padding-top:max(.85rem, env(safe-area-inset-top))
    }
    /* The thread-state column (meta + messages + composer) takes the rest
     * of the panel and uses min-height:0 so its inner scroller works.   */
    body.chat-open .chat-panel.is-open .chat-state.chat-thread{
        flex:1 1 auto;min-height:0;display:flex;flex-direction:column
    }
    /* PIN-entry view: top-anchored + scrollable.  The base style sets
     * `justify-content:center` (looks great on a tall panel) but combined
     * with the panel's `overflow:hidden` and a shorter --vp (keyboard up),
     * the centered group could overflow upward and clip the input behind
     * the chat-header — that's the "PIN field hidden above" bug. */
    body.chat-open .chat-panel.is-open .chat-state.chat-pin{
        flex:1 1 auto;min-height:0;
        justify-content:flex-start;
        overflow-y:auto;-webkit-overflow-scrolling:touch;
        padding-top:1.4rem;padding-bottom:1.2rem
    }
    /* The pin/Live/lock/End meta row stays pinned just under the header
     * so the user always knows which conversation they're typing into. */
    body.chat-open .chat-panel.is-open .chat-thread-meta{
        position:sticky;top:0;z-index:5;flex-shrink:0;
        background:var(--bg);box-shadow:0 1px 0 var(--border)
    }
    /* The messages list is the only thing that scrolls. */
    body.chat-open .chat-panel.is-open .chat-messages{
        flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch
    }
    /* Composer hugs the bottom (notch-safe).  flex-shrink:0 keeps it visible. */
    body.chat-open .chat-panel.is-open .chat-reply{
        flex-shrink:0;
        padding-bottom:max(.5rem, env(safe-area-inset-bottom))
    }
    /* Prevent the underlying page from scrolling behind the panel.
     * (Only `overflow:hidden` — *not* `position:fixed` on body — so we
     * don't lose the user's scroll position when they close the chat.) */
    body.chat-open{
        overflow:hidden !important;
        height:var(--vp, 100dvh);max-height:var(--vp, 100dvh)
    }
    /* Belt-and-braces: lock html as well so iOS Safari can't rubber-band
     * scroll the document while the chat is up. */
    html:has(body.chat-open){overflow:hidden;height:var(--vp, 100dvh)}
}
/* On any size: when chat-panel is open, hide the launcher's pulse animation
 * so it doesn't pulse behind the panel even if it's only partially visible. */
body.chat-open .chat-launcher:not(.is-fullscreen){animation:none !important}

/* ── How-to-chat: 3-step quick guide on the landing page ─────
 * Sits between the letter card and the footer.  Sticks to the
 * brand palette (primary → primary-2 gradient on the badges,
 * surface card with hairline border, soft drop-shadow). */
.how-to-chat{
    margin:2rem auto 0;max-width:760px;
    background:var(--surface);border:1px solid var(--border);border-radius:18px;
    padding:1.4rem 1.2rem;box-shadow:var(--shadow);
    position:relative;overflow:hidden
}
.how-to-chat::before{
    content:"";position:absolute;inset:0 0 auto 0;height:3px;
    background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--accent),var(--pink))
}
.how-to-chat .htc-head{
    display:flex;align-items:center;gap:.6rem;margin-bottom:1rem
}
.how-to-chat .htc-head h2{
    margin:0;font-size:1.1rem;font-weight:700;
    color:var(--primary);
    letter-spacing:.1px
}
.how-to-chat .htc-head .htc-icon{
    width:36px;height:36px;border-radius:12px;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#fff;display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px -6px rgba(58,12,163,.45)
}
.how-to-chat .htc-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem
}
.how-to-chat .htc-step{
    background:var(--bg);border:1px solid var(--border);border-radius:14px;
    padding:1rem .9rem;display:flex;flex-direction:column;gap:.4rem;
    transition:transform .2s,box-shadow .2s,border-color .2s;
    position:relative
}
.how-to-chat .htc-step:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 28px -10px rgba(58,12,163,.25);
    border-color:color-mix(in oklab, var(--primary, #3a0ca3) 35%, var(--border))
}
.how-to-chat .htc-step .htc-num{
    width:28px;height:28px;border-radius:8px;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#fff;font-weight:700;font-size:.95rem;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 4px 12px -4px rgba(58,12,163,.45);flex-shrink:0
}
.how-to-chat .htc-step .htc-glyph{
    color:var(--primary);font-size:1.4rem;margin-top:.2rem
}
.how-to-chat .htc-step h3{
    margin:0;font-size:.98rem;font-weight:700;color:var(--text);line-height:1.3
}
.how-to-chat .htc-step p{
    margin:0;color:var(--muted);font-size:.85rem;line-height:1.5
}
.how-to-chat .htc-step kbd{
    display:inline-block;padding:.05rem .4rem;
    background:var(--surface);border:1px solid var(--border);border-radius:6px;
    font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;
    color:var(--primary)
}
.how-to-chat .htc-foot{
    margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--border);
    color:var(--muted);font-size:.85rem;display:flex;align-items:center;gap:.45rem
}
.how-to-chat .htc-foot i{color:var(--primary)}

/* Subtle entrance animation on the steps. */
@media (prefers-reduced-motion:no-preference){
    .how-to-chat .htc-step{animation:htcIn .55s ease-out both}
    .how-to-chat .htc-step:nth-child(1){animation-delay:.05s}
    .how-to-chat .htc-step:nth-child(2){animation-delay:.18s}
    .how-to-chat .htc-step:nth-child(3){animation-delay:.31s}
    @keyframes htcIn{
        from{opacity:0;transform:translateY(10px)}
        to  {opacity:1;transform:translateY(0)}
    }
}

/* Stack vertically on small phones — single column, comfortable read. */
@media (max-width:540px){
    .how-to-chat{padding:1.1rem 1rem;border-radius:16px;margin-top:1.6rem}
    .how-to-chat .htc-grid{grid-template-columns:1fr;gap:.65rem}
    .how-to-chat .htc-head h2{font-size:1.02rem}
}
@media (max-width:380px){
    .how-to-chat{padding:.95rem .85rem}
    .how-to-chat .htc-step{padding:.85rem .8rem}
}
[data-theme="dark"] .how-to-chat{
    background:#171035;border-color:#38266b;color:#f6f3ff
}
[data-theme="dark"] .how-to-chat .htc-step{
    background:#0c0824;border-color:#38266b
}
[data-theme="dark"] .how-to-chat .htc-step h3{
    color:#f6f3ff
}
[data-theme="dark"] .how-to-chat .htc-step p,
[data-theme="dark"] .how-to-chat .htc-foot{
    color:#c4bddf
}
[data-theme="dark"] .how-to-chat .htc-step kbd{
    background:#171035;color:#f6f3ff;border-color:#38266b
}
@media (prefers-color-scheme:dark){
    html[data-theme="auto"] .how-to-chat{background:#171035;border-color:#38266b;color:#f6f3ff}
    html[data-theme="auto"] .how-to-chat .htc-step{background:#0c0824;border-color:#38266b}
    html[data-theme="auto"] .how-to-chat .htc-step h3{color:#f6f3ff}
    html[data-theme="auto"] .how-to-chat .htc-step p,
    html[data-theme="auto"] .how-to-chat .htc-foot{color:#c4bddf}
    html[data-theme="auto"] .how-to-chat .htc-step kbd{background:#171035;color:#f6f3ff;border-color:#38266b}
}

/* ════════════════════════════════════════════════════════════
 *  v4 — iAdvize Conversational-Cloud design language
 *  ────────────────────────────────────────────────────────────
 *  Ports the visual system from iAdvize's `ep-*` (engagement-
 *  plugin) bundle to our existing markup hooks so JS contracts
 *  stay intact.  Same class names everywhere — only the visual
 *  layer changes.  Tokens are seeded with our purple brand
 *  (#3a0ca3) so the iAdvize structure shows up in *our* colors.
 *
 *  Component map
 *      .chat-launcher          → ep-floating-button
 *      .chat-panel             → ep-chat-window
 *      .chat-panel .chat-header→ ep-chat-window-toolbar
 *      .chat-state.chat-pin    → ep-chat-window-form
 *      .chat-thread-meta       → ep-chat-window-status-bar
 *      .chat-messages          → ep-message-list
 *      .bubble                 → ep-chat-message
 *      .chat-reply             → ep-typebox + ep-typebox__wrapper
 *      .chat-send              → ep-typebox-action-send
 *      .emoji-trigger / etc.   → ep-btn (pill, 40px, 24px radius)
 *      .react-picker           → ep-tooltip__container
 *  ════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
 *  1.  Design tokens (semantic, two-layer)
 *  ─ raw colors → semantic roles → component vars
 *  ══════════════════════════════════════════════ */
:root{
    /* Brand */
    --ep-color-background-brand-bold: #3a0ca3;
    --ep-color-background-brand-moderate: rgba(58,12,163,.20);
    --ep-color-background-brand-subtle: rgba(58,12,163,.10);
    --ep-color-background-brand-subtle-opacity: rgba(58,12,163,.08);
    --ep-color-background-brand-selected-minimal: rgba(58,12,163,.06);
    --ep-color-background-brand-selected-bold: #2c0a82;
    --ep-color-text-brand-on-bold: #ffffff;
    --ep-color-text-brand-on-moderate: #ffffff;
    --ep-color-text-brand-on-subtle: #3a0ca3;
    --ep-color-text-brand-primary: #3a0ca3;
    --ep-color-icon-brand-on-bold: #ffffff;
    --ep-color-icon-brand-on-strong: #ffffff;
    --ep-color-icon-brand-primary: #3a0ca3;
    --ep-color-state-layer-brand-on-subtle-hovered: rgba(58,12,163,.14);
    --ep-color-state-layer-brand-on-subtle-pressed:  rgba(58,12,163,.20);
    /* Neutral */
    --ep-color-background-neutral-base: #ffffff;
    --ep-color-background-neutral-minimal: #fafafa;
    --ep-color-background-neutral-subtle: #f5f5f7;
    --ep-color-background-neutral-subtle-opacity: rgba(0,0,0,.04);
    --ep-color-background-neutral-strong: rgba(0,0,0,.55);
    --ep-color-background-neutral-bold-variant: #1f1147;
    --ep-color-background-inverted-minimal: rgba(255,255,255,.10);
    --ep-color-text-neutral-primary: #1f1147;
    --ep-color-text-neutral-strong: #4b5563;
    --ep-color-text-neutral-on-minimal-variant: #6b7280;
    --ep-color-icon-neutral-on-subtle: #6b7280;
    --ep-color-border-neutral-subtle: #e6e1f4;
    --ep-color-border-neutral-moderate: #d1cae8;
    --ep-color-border-neutral-moderate-hovered: #b8aedf;
    --ep-color-border-neutral-strong: #9089ad;
    --ep-color-border-inverted-minimal: rgba(255,255,255,.18);
    --ep-color-border-inverted-minimal-hovered: rgba(255,255,255,.32);
    --ep-color-state-layer-neutral-on-subtle-hovered: rgba(0,0,0,.06);
    --ep-color-state-layer-neutral-on-subtle-pressed:  rgba(0,0,0,.10);
    --ep-color-state-layer-neutral-primary-hovered: rgba(0,0,0,.06);
    --ep-color-state-layer-neutral-primary-pressed:  rgba(0,0,0,.10);
    /* Status */
    --ep-color-background-success-subtle-opacity: rgba(34,197,94,.10);
    --ep-color-background-info-subtle: #dbeafe;
    --ep-color-background-danger-bold: #dc2626;
    --ep-color-background-danger-subtle: #fee2e2;
    --ep-color-background-danger-subtle-opacity: rgba(220,38,38,.08);
    --ep-color-text-danger-on-subtle: #dc2626;
    --ep-color-text-danger-on-bold: #ffffff;
    --ep-color-icon-success-on-subtle: #16a34a;
    --ep-color-icon-info-primary-variant: #3a0ca3;
    --ep-color-icon-danger-on-subtle: #dc2626;
    --ep-color-state-layer-danger-primary-hovered: rgba(220,38,38,.08);
    --ep-color-state-layer-danger-primary-pressed:  rgba(220,38,38,.12);
    /* Focus rings */
    --ep-color-border-focused: #3a0ca3;
    --ep-color-border-inner-focused: #ffffff;
    --ep-color-border-outer-focused: rgba(58,12,163,.30);
    --ep-color-border-inverted-inner-focused: #1f1147;
    --ep-color-border-inverted-outer-focused: rgba(0,0,0,.30);
    --ep-color-border-danger-strong: #dc2626;
    /* Component-level tokens (matching the iAdvize bundle) */
    --ep-app-chat-border-radius: 12px;
    --ep-app-chat-min-height: 600px;
    --ep-app-chat-shadow-visibility: visible;
    --ep-chat-bubble-background: var(--ep-color-background-neutral-base);
    --ep-chat-window-tooltip-gap: 8px;
    --ep-chat-window-toolbar-actions-options-list-offset: 8px;
    --ep-attachment-content-bg: rgba(0,0,0,.04);
    --ep-attachment-content-hover-bg: rgba(0,0,0,.07);
    /* Shadow stack */
    --ep-shadow-chat-window: 0 24px 64px -16px rgba(58,12,163,.30),
                             0 12px 32px -12px rgba(0,0,0,.18),
                             0 0 0 1px rgba(0,0,0,.04);
    --ep-shadow-launcher: 0 14px 32px -8px rgba(58,12,163,.45),
                          0 6px 16px -4px rgba(58,12,163,.30);
}
[data-theme="dark"]{
    --ep-color-background-brand-bold: #9d6cff;
    --ep-color-background-brand-moderate: rgba(157,108,255,.25);
    --ep-color-background-brand-subtle: rgba(157,108,255,.15);
    --ep-color-background-brand-subtle-opacity: rgba(157,108,255,.12);
    --ep-color-background-brand-selected-minimal: rgba(157,108,255,.08);
    --ep-color-background-brand-selected-bold: #b594ff;
    --ep-color-text-brand-on-subtle: #cdb8ff;
    --ep-color-text-brand-primary: #cdb8ff;
    --ep-color-icon-brand-primary: #cdb8ff;
    --ep-color-state-layer-brand-on-subtle-hovered: rgba(157,108,255,.20);
    --ep-color-state-layer-brand-on-subtle-pressed:  rgba(157,108,255,.30);
    --ep-color-background-neutral-base: #161034;
    --ep-color-background-neutral-minimal: #1f1840;
    --ep-color-background-neutral-subtle: #1f1a3d;
    --ep-color-background-neutral-subtle-opacity: rgba(255,255,255,.04);
    --ep-color-text-neutral-primary: #f4f1ff;
    --ep-color-text-neutral-strong: #cbc6e8;
    --ep-color-text-neutral-on-minimal-variant: #a3a0c2;
    --ep-color-icon-neutral-on-subtle: #a3a0c2;
    --ep-color-border-neutral-subtle: rgba(255,255,255,.08);
    --ep-color-border-neutral-moderate: rgba(255,255,255,.14);
    --ep-color-state-layer-neutral-on-subtle-hovered: rgba(255,255,255,.06);
    --ep-color-state-layer-neutral-on-subtle-pressed:  rgba(255,255,255,.10);
    --ep-attachment-content-bg: rgba(255,255,255,.05);
    --ep-attachment-content-hover-bg: rgba(255,255,255,.08);
    --ep-shadow-chat-window: 0 24px 64px -16px rgba(0,0,0,.65),
                             0 12px 32px -12px rgba(0,0,0,.45),
                             0 0 0 1px rgba(255,255,255,.06);
    --ep-shadow-launcher: 0 14px 32px -8px rgba(157,108,255,.55),
                          0 6px 16px -4px rgba(0,0,0,.35);
}

/* ══════════════════════════════════════════════
 *  2.  Floating launcher  (ep-floating-button)
 *  ══════════════════════════════════════════════ */
.chat-launcher{
    /* Compact pill — round bubble with a small label slot.  56 px tall,
     * 28 px radius, brand-bold background, white text + icon. */
    bottom:24px;right:24px;
    display:inline-flex;align-items:center;gap:.55rem;
    height:56px;min-width:56px;padding:0 1.05rem 0 .85rem;
    border:none;border-radius:28px;
    background:var(--ep-color-background-brand-bold);
    color:var(--ep-color-text-brand-on-bold);
    box-shadow:var(--ep-shadow-launcher);
    font-weight:700;font-size:.92rem;letter-spacing:.01em;
    cursor:pointer;overflow:visible;
    transition:transform .3s cubic-bezier(.64,.57,.15,1.56),
               box-shadow .25s ease,
               background-color .2s
}
.chat-launcher:hover{
    transform:translateY(-2px) scale(1.03);
    background:var(--ep-color-background-brand-selected-bold);
    box-shadow:0 18px 40px -8px rgba(58,12,163,.55),
               0 8px 20px -4px rgba(58,12,163,.35),
               0 0 0 .35rem rgba(58,12,163,.10)
}
.chat-launcher:active{transform:translateY(0) scale(.97)}
.chat-launcher .lc-icon{
    width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,.18);
    display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;font-size:1.05rem
}
.chat-launcher .lc-label{
    font-size:.92rem;font-weight:700;line-height:1;white-space:nowrap;
    padding-right:.1rem
}
/* Bot-online dot — small green dot with breathing halo. */
.chat-launcher .ep-bot-dot{
    position:absolute;top:-2px;right:-2px;
    width:14px;height:14px;border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 2.5px var(--ep-color-background-brand-bold),
               0 0 0 2.5px var(--ep-color-background-brand-bold) inset;
    animation:ep-bot-dot 2.4s ease-in-out infinite
}
@keyframes ep-bot-dot{
    0%,100%{box-shadow:0 0 0 2.5px var(--ep-color-background-brand-bold),
                       0 0 0 0 rgba(34,197,94,.55)}
    50%   {box-shadow:0 0 0 2.5px var(--ep-color-background-brand-bold),
                       0 0 0 7px rgba(34,197,94,0)}
}
@media (prefers-reduced-motion:reduce){.chat-launcher .ep-bot-dot{animation:none}}
/* Override the v3 launcher pulse — the bot-dot already pulses. */
.chat-launcher:not(.is-open){animation:none}
.chat-launcher .badge{
    top:-6px;right:-6px;background:#ef4444;
    box-shadow:0 4px 10px rgba(239,68,68,.4)
}

/* ══════════════════════════════════════════════
 *  3.  Chat window  (ep-chat-window)
 *  ══════════════════════════════════════════════ */
.chat-panel{
    /* Clean white window with strong soft shadow + 1 px hairline border.
     * 12 px radius, 380 px wide × 600 px tall on desktop. */
    width:min(380px,calc(100vw - 32px));
    height:min(640px,calc(100dvh - 130px));
    min-height:var(--ep-app-chat-min-height);
    background:var(--ep-color-background-neutral-base);
    border:none;
    border-radius:var(--ep-app-chat-border-radius);
    box-shadow:var(--ep-shadow-chat-window);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    overflow:hidden;
    transition:transform .35s cubic-bezier(.64,.57,.15,1.56),
               opacity .25s ease,
               box-shadow .3s
}
.chat-panel.is-open{box-shadow:var(--ep-shadow-chat-window)}
[data-theme="dark"] .chat-panel{background:var(--ep-color-background-neutral-base)}

/* ══════════════════════════════════════════════
 *  4.  Toolbar / chat-header  (ep-chat-window-toolbar)
 *  ══════════════════════════════════════════════ */
.chat-panel .chat-header{
    /* Brand-bold bar — same as iAdvize "branded toolbar" variant.
     * Slightly more vertical padding + tighter typography. */
    padding:.8rem 1rem;gap:.65rem;
    background:var(--ep-color-background-brand-bold);
    color:var(--ep-color-text-brand-on-bold);
    box-shadow:0 1px 0 rgba(0,0,0,.06)
}
.chat-panel .chat-header .avatar{
    width:36px;height:36px;
    background:rgba(255,255,255,.20);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
    font-size:.95rem
}
.chat-panel .chat-header .info{min-width:0}
.chat-panel .chat-header .title{
    font-size:.95rem;font-weight:700;letter-spacing:-.005em;
    line-height:1.2;gap:.45rem
}
.chat-panel .chat-header .subtitle{
    margin-top:1px;font-size:.74rem;font-weight:500;opacity:.92
}
/* Header chips — smaller, rounder, lower contrast — read like iAdvize. */
.chat-panel .chat-header .name-chip,
.chat-panel .chat-header .status-chip{
    height:22px;padding:0 .55rem;font-size:.7rem;font-weight:600;
    background:rgba(255,255,255,.16);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    border-radius:11px
}
.chat-panel .chat-header .status-chip{background:rgba(255,255,255,.22)}

/* Toolbar action buttons (close / fullscreen / kebab) — circular,
 * 32 × 32, transparent background that gets a state-layer overlay
 * on hover.  Identical pattern to ep-btn ghost variant. */
.chat-panel .chat-header .chat-close,
.chat-panel .chat-header .chat-fullscreen,
.chat-panel .chat-header .chat-kebab{
    width:32px;height:32px;border-radius:50%;border:none;
    background:rgba(255,255,255,.12);color:#fff;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;flex:0 0 auto;
    transition:background .15s, transform .12s
}
.chat-panel .chat-header .chat-close:hover,
.chat-panel .chat-header .chat-fullscreen:hover,
.chat-panel .chat-header .chat-kebab:hover{background:rgba(255,255,255,.24)}
.chat-panel .chat-header .chat-close:active,
.chat-panel .chat-header .chat-fullscreen:active,
.chat-panel .chat-header .chat-kebab:active{transform:scale(.92)}

/* Presence dot in the header title — slightly smaller, brighter. */
.chat-panel .chat-header .presence-dot{
    width:8px;height:8px;background:#22c55e;
    box-shadow:0 0 0 2px rgba(255,255,255,.35),
               0 0 0 4px rgba(34,197,94,.18)
}

/* ══════════════════════════════════════════════
 *  5.  PIN-entry view  (ep-chat-window-form)
 *  ══════════════════════════════════════════════ */
.chat-panel .chat-state.chat-pin{
    /* Centered form on a clean canvas — heading, illustration slot,
     * pill input, primary button.  Uses iAdvize form spacing. */
    padding:1.6rem 1.4rem;
    background:var(--ep-color-background-neutral-base);
    color:var(--ep-color-text-neutral-primary);
    gap:.45rem
}
.chat-panel .chat-state.chat-pin .chat-intro{
    font-size:1.05rem;font-weight:700;
    color:var(--ep-color-text-neutral-primary);
    margin:.5rem 0 .9rem;letter-spacing:-.005em
}
.chat-panel .chat-state.chat-pin input{
    height:48px;padding:0 1rem;
    background:var(--ep-color-background-neutral-base);
    color:var(--ep-color-text-neutral-primary);
    border:2px solid var(--ep-color-border-neutral-moderate);
    border-radius:12px;
    font-size:1rem;font-weight:600;letter-spacing:3px;text-align:center;
    text-transform:uppercase;
    transition:border-color .15s, box-shadow .15s
}
.chat-panel .chat-state.chat-pin input:focus,
.chat-panel .chat-state.chat-pin input:focus-visible{
    outline:none;
    border-color:var(--ep-color-border-focused);
    box-shadow:0 0 0 3px var(--ep-color-border-outer-focused)
}
.chat-panel .chat-state.chat-pin input::placeholder{
    color:var(--ep-color-text-neutral-on-minimal-variant);
    font-weight:500;letter-spacing:1px
}
/* Primary action — iAdvize ep-btn primary (24 px radius, 40 px tall,
 * 700 weight, brand-bold background, white text). */
.chat-panel .chat-state.chat-pin .chat-action-btn,
.chat-panel .chat-state.chat-pin button[type="submit"]{
    margin-top:.85rem;
    height:48px;padding:0 1.5rem;
    background:var(--ep-color-background-brand-bold);
    color:var(--ep-color-text-brand-on-bold);
    border:none;border-radius:24px;
    font-weight:700;font-size:.95rem;letter-spacing:.01em;
    box-shadow:0 8px 18px -6px rgba(58,12,163,.40);
    transition:background-color .2s, transform .12s, box-shadow .2s
}
.chat-panel .chat-state.chat-pin .chat-action-btn:hover{
    background:var(--ep-color-background-brand-selected-bold);
    transform:translateY(-1px);
    box-shadow:0 12px 24px -8px rgba(58,12,163,.50)
}
.chat-panel .chat-state.chat-pin .chat-action-btn:active{transform:translateY(0) scale(.99)}
.chat-panel .chat-state.chat-pin .chat-error{
    margin-top:.6rem;font-weight:600;font-size:.85rem;
    color:var(--ep-color-text-danger-on-subtle)
}
.chat-panel .chat-state.chat-pin .chat-hint{
    margin-top:1.1rem;font-size:.8rem;line-height:1.55;
    color:var(--ep-color-text-neutral-on-minimal-variant)
}
.chat-panel .chat-state.chat-pin .chat-hint i{color:var(--ep-color-icon-brand-primary)}
/* Secondary "Send a letter first" action — iAdvize ghost variant. */
.chat-panel .chat-state.chat-pin .chat-secondary-btn{
    height:40px;padding:0 1.1rem;
    background:transparent;
    color:var(--ep-color-text-brand-on-subtle);
    border:1.5px solid var(--ep-color-border-neutral-moderate);
    border-radius:24px;font-weight:700;font-size:.88rem;
    transition:background-color .15s, border-color .15s, color .15s
}
.chat-panel .chat-state.chat-pin .chat-secondary-btn:hover{
    background:var(--ep-color-background-brand-subtle);
    border-color:var(--ep-color-border-focused);
    color:var(--ep-color-text-brand-on-subtle);
    transform:none
}
.chat-panel .chat-state.chat-pin .no-pin-cta{
    border-top:1px solid var(--ep-color-border-neutral-subtle)
}
.chat-panel .chat-state.chat-pin .no-pin-or{
    color:var(--ep-color-text-neutral-on-minimal-variant);
    font-weight:600;letter-spacing:.08em
}
.chat-panel .chat-state.chat-pin .no-pin-hint{
    color:var(--ep-color-text-neutral-on-minimal-variant)
}

/* ══════════════════════════════════════════════
 *  6.  Status-bar / chat-thread-meta  (ep-chat-window-status-bar)
 *  ══════════════════════════════════════════════ */
.chat-panel .chat-thread-meta{
    padding:.55rem .85rem;gap:.45rem;
    background:var(--ep-color-background-neutral-base);
    border-bottom:1px solid var(--ep-color-border-neutral-subtle);
    color:var(--ep-color-text-neutral-on-minimal-variant);
    font-size:.74rem;font-weight:500
}
.chat-panel .chat-thread-meta .pin-tag{
    color:var(--ep-color-text-brand-on-subtle);
    background:var(--ep-color-background-brand-subtle);
    padding:.18rem .55rem;border-radius:6px;font-weight:700
}
.chat-panel .chat-thread-meta .live-status{
    color:var(--ep-color-icon-success-on-subtle);
    background:var(--ep-color-background-success-subtle-opacity);
    padding:.18rem .55rem;border-radius:6px;font-weight:600
}
.chat-panel .chat-thread-meta .live-dot{
    background:var(--ep-color-icon-success-on-subtle)
}
.chat-panel .chat-thread-meta .lock-status{
    background:var(--ep-color-background-neutral-subtle);
    color:var(--ep-color-text-neutral-on-minimal-variant)
}
.chat-panel .chat-thread-meta .chat-end{
    height:24px;padding:0 .55rem;
    background:transparent;
    border:1px solid var(--ep-color-border-neutral-moderate);
    color:var(--ep-color-text-neutral-on-minimal-variant);
    border-radius:12px;font-size:.72rem;font-weight:600
}
.chat-panel .chat-thread-meta .chat-end:hover{
    color:var(--ep-color-text-danger-on-subtle);
    border-color:var(--ep-color-border-danger-strong);
    background:var(--ep-color-background-danger-subtle-opacity)
}

/* ══════════════════════════════════════════════
 *  7.  Message list  (ep-message-list)
 *  ══════════════════════════════════════════════ */
.chat-panel .chat-messages{
    background:var(--ep-color-background-neutral-subtle);
    padding:.95rem .8rem 1rem;gap:.4rem
}
[data-theme="dark"] .chat-panel .chat-messages{
    background:var(--ep-color-background-neutral-subtle)
}
.chat-panel .date-sep{
    background:transparent;color:var(--ep-color-text-neutral-on-minimal-variant);
    font-weight:600;letter-spacing:.08em;text-transform:uppercase
}
.chat-panel .date-sep::before,
.chat-panel .date-sep::after{
    background:linear-gradient(90deg,transparent,
               var(--ep-color-border-neutral-moderate) 40%,
               var(--ep-color-border-neutral-moderate) 60%,transparent)
}

/* ══════════════════════════════════════════════
 *  8.  Bubbles  (ep-chat-message)
 *  ══════════════════════════════════════════════ */
.chat-panel .bubble{
    /* iAdvize uses 16 px radius squircles with one corner shaved
     * (4 px) on the speaker side — close to WhatsApp but cleaner. */
    max-width:80%;
    padding:.55rem .85rem;border-radius:16px;
    font-size:.92rem;line-height:1.45;
    box-shadow:none;border:none;
    transition:box-shadow .15s ease
}
.chat-panel .bubble.admin{
    background:var(--ep-chat-bubble-background);
    color:var(--ep-color-text-neutral-primary);
    border:1px solid var(--ep-color-border-neutral-subtle);
    border-bottom-left-radius:4px
}
.chat-panel .bubble.user{
    background:var(--ep-color-background-brand-bold);
    color:var(--ep-color-text-brand-on-bold);
    border:none;border-bottom-right-radius:4px;
    box-shadow:0 4px 12px -6px rgba(58,12,163,.45)
}
.chat-panel .bubble.user .meta{color:rgba(255,255,255,.78)}
.chat-panel .bubble.admin .meta{color:var(--ep-color-text-neutral-on-minimal-variant)}
.chat-panel .bubble .meta{font-size:.7rem;font-weight:500}
.chat-panel .bubble:hover{box-shadow:0 4px 14px -6px rgba(0,0,0,.12)}
.chat-panel .bubble.user:hover{box-shadow:0 6px 16px -6px rgba(58,12,163,.50)}
[data-theme="dark"] .chat-panel .bubble.admin{
    background:var(--ep-color-background-neutral-minimal);
    color:var(--ep-color-text-neutral-primary);
    border-color:var(--ep-color-border-neutral-subtle)
}

/* Reactions — outline pill, brand-on-subtle on hover. */
.chat-panel .bubble .rx-pill{
    background:var(--ep-color-background-neutral-base);
    color:var(--ep-color-text-neutral-primary);
    border:1px solid var(--ep-color-border-neutral-subtle);
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    height:22px;padding:0 .5rem;font-size:.74rem;font-weight:600;
    border-radius:11px
}
.chat-panel .bubble.user .rx-pill{
    background:rgba(255,255,255,.95);color:var(--ep-color-text-brand-primary)
}
.chat-panel .bubble .rx-pill:hover{
    background:var(--ep-color-background-brand-subtle);
    color:var(--ep-color-text-brand-on-subtle);
    border-color:var(--ep-color-border-focused)
}

/* ══════════════════════════════════════════════
 *  9.  Typing bubble (ep-chat-message-typing)
 *  ══════════════════════════════════════════════ */
.chat-panel .typing-bubble .typing-pill{
    background:var(--ep-chat-bubble-background);
    border:1px solid var(--ep-color-border-neutral-subtle);
    border-radius:16px;border-bottom-left-radius:4px;
    color:var(--ep-color-text-neutral-on-minimal-variant)
}

/* ══════════════════════════════════════════════
 * 10.  Composer / typebox  (ep-typebox)
 *      Replicates the bundle's wrapper:
 *          .ep-typebox          padding:4px 0
 *          .ep-typebox__wrapper padding:12px 16px
 *          .ep-typebox__input   max-height:72px
 *          .ep-typebox__actions border-radius:24px etc.
 *  ══════════════════════════════════════════════ */
.chat-panel .chat-reply{
    padding:0;gap:0;
    background:var(--ep-color-background-neutral-base);
    border-top:1px solid var(--ep-color-border-neutral-subtle);
    align-items:stretch;flex-direction:row
}
[data-theme="dark"] .chat-panel .chat-reply{
    background:var(--ep-color-background-neutral-base);
    border-top-color:var(--ep-color-border-neutral-subtle)
}
.chat-panel .chat-reply::before{display:none}

/* The wrapper row — input + action buttons.  We can't add a wrapper
 * div without touching markup, so use the .chat-reply itself + the
 * textarea/button children as direct flex items via a subgrid trick. */
.chat-panel .chat-reply{display:grid;
    grid-template-columns:auto 1fr auto auto auto auto;
    grid-template-rows:auto;
    align-items:end;
    padding:8px 12px;column-gap:6px}

.chat-panel .chat-reply textarea{
    grid-column:2 / span 1;
    min-height:40px;max-height:120px;
    padding:.55rem .9rem;
    background:var(--ep-color-background-neutral-subtle);
    color:var(--ep-color-text-neutral-primary);
    border:1px solid transparent;border-radius:20px;
    font-size:.95rem;font-weight:400;line-height:1.4;
    resize:none;outline:none;
    transition:border-color .15s, background-color .15s, box-shadow .15s
}
.chat-panel .chat-reply textarea::placeholder{
    color:var(--ep-color-text-neutral-on-minimal-variant)
}
.chat-panel .chat-reply textarea:focus,
.chat-panel .chat-reply textarea:focus-visible{
    background:var(--ep-color-background-neutral-base);
    border-color:var(--ep-color-border-focused);
    box-shadow:0 0 0 3px var(--ep-color-border-outer-focused)
}
[data-theme="dark"] .chat-panel .chat-reply textarea{
    background:rgba(255,255,255,.06);
    color:var(--ep-color-text-neutral-primary);
    border-color:transparent
}
[data-theme="dark"] .chat-panel .chat-reply textarea:focus{
    background:rgba(255,255,255,.10)
}

/* Composer trigger buttons — ghost ep-btn, 36 × 36, hover state-layer. */
.chat-panel .chat-reply .emoji-trigger,
.chat-panel .chat-reply .attach-trigger,
.chat-panel .chat-reply .voice-trigger,
.chat-panel .chat-reply .vo-trigger{
    width:36px;height:36px;border-radius:50%;border:none;
    background:transparent;
    color:var(--ep-color-icon-neutral-on-subtle);
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:1.05rem;flex-shrink:0;
    transition:background-color .15s, color .15s, transform .12s
}
.chat-panel .chat-reply .emoji-trigger{grid-column:1; font-size:1.2rem}
.chat-panel .chat-reply .attach-trigger{grid-column:3}
.chat-panel .chat-reply .vo-trigger{grid-column:4}
.chat-panel .chat-reply .voice-trigger{grid-column:5}
.chat-panel .chat-reply .chat-send{grid-column:6}

.chat-panel .chat-reply .emoji-trigger:hover,
.chat-panel .chat-reply .attach-trigger:hover,
.chat-panel .chat-reply .voice-trigger:hover,
.chat-panel .chat-reply .vo-trigger:hover{
    background:var(--ep-color-state-layer-brand-on-subtle-hovered);
    color:var(--ep-color-text-brand-on-subtle)
}
.chat-panel .chat-reply .emoji-trigger:active,
.chat-panel .chat-reply .attach-trigger:active,
.chat-panel .chat-reply .voice-trigger:active,
.chat-panel .chat-reply .vo-trigger:active{transform:scale(.92)}
.chat-panel .chat-reply .vo-trigger.is-armed{
    color:var(--ep-color-text-brand-on-bold);
    background:var(--ep-color-background-brand-bold)
}

/* Send button — pill-circular, brand-bold, paper-airplane glyph.
 * Only enabled when the input has content (the existing JS toggles
 * .is-ready on the textarea). */
.chat-panel .chat-reply .chat-send{
    width:40px;height:40px;border-radius:50%;border:none;
    background:var(--ep-color-background-brand-bold);
    color:var(--ep-color-text-brand-on-bold);
    box-shadow:0 6px 14px -4px rgba(58,12,163,.40);
    display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;cursor:pointer;font-size:.95rem;
    transition:transform .12s ease, box-shadow .2s, background-color .2s
}
.chat-panel .chat-reply .chat-send:hover:not(:disabled){
    transform:translateY(-1px) scale(1.04);
    background:var(--ep-color-background-brand-selected-bold);
    box-shadow:0 10px 22px -6px rgba(58,12,163,.55)
}
.chat-panel .chat-reply .chat-send:active:not(:disabled){transform:translateY(0) scale(.95)}
.chat-panel .chat-reply .chat-send:disabled{
    opacity:.40;cursor:not-allowed;box-shadow:none
}

/* Voice trigger recording state — strong red. */
.chat-panel .chat-reply .voice-trigger.is-recording{
    background:#ef4444;color:#fff
}

/* Reply preview, attach tray and voice bar inherit the wrapper but
 * still need to span the full width — un-grid them. */
.chat-panel .reply-preview,
.chat-panel .attach-tray,
.chat-panel .voice-bar,
.chat-panel .user-name-box,
.chat-panel .user-status-box,
.chat-panel .user-pin-box,
.chat-panel .status-options{
    grid-column:1 / -1
}
.chat-panel .reply-preview{
    background:var(--ep-color-background-brand-subtle);
    border-top:1px solid var(--ep-color-border-neutral-subtle);
    border-bottom:none;
    color:var(--ep-color-text-neutral-primary);
    padding:.55rem .9rem;font-size:.85rem;
    border-radius:0
}
.chat-panel .reply-preview i{color:var(--ep-color-icon-brand-primary)}
.chat-panel .reply-preview .rp-author{color:var(--ep-color-text-brand-primary)}
.chat-panel .reply-preview .rp-text{color:var(--ep-color-text-neutral-on-minimal-variant)}

.chat-panel .attach-tray{
    background:var(--ep-color-background-neutral-subtle);
    border-top:1px solid var(--ep-color-border-neutral-subtle);
    padding:.6rem .9rem
}

/* Tray attachment items — same iAdvize ep-attachment look. */
.chat-panel .tray-item{
    width:64px;height:64px;
    background:var(--ep-attachment-content-bg);
    border:1px solid var(--ep-color-border-neutral-subtle);
    border-radius:8px
}
.chat-panel .tray-item:hover{background:var(--ep-attachment-content-hover-bg)}
.chat-panel .tray-item .rm{
    background:rgba(0,0,0,.55);
    width:20px;height:20px;font-size:.7rem
}

/* ══════════════════════════════════════════════
 * 11.  Attach menu / emoji picker / react picker
 *      All popovers share an iAdvize ep-tooltip look:
 *          12 px radius, neutral-base bg, soft shadow,
 *          1 px border, popIn animation.
 *  ══════════════════════════════════════════════ */
.attach-menu{
    background:var(--ep-color-background-neutral-base);
    border:1px solid var(--ep-color-border-neutral-subtle);
    border-radius:12px;padding:.4rem;
    box-shadow:0 12px 32px -8px rgba(0,0,0,.18),
               0 0 0 1px rgba(0,0,0,.04)
}
.attach-menu button{
    color:var(--ep-color-text-neutral-primary);
    border-radius:8px;padding:.55rem .8rem;
    font-size:.88rem;font-weight:500
}
.attach-menu button:hover{
    background:var(--ep-color-state-layer-brand-on-subtle-hovered);
    color:var(--ep-color-text-brand-on-subtle)
}
.emoji-picker{
    background:var(--ep-color-background-neutral-base);
    border:1px solid var(--ep-color-border-neutral-subtle);
    border-radius:12px;
    box-shadow:0 12px 32px -8px rgba(0,0,0,.18),
               0 0 0 1px rgba(0,0,0,.04)
}
.emoji-picker .emoji-tabs button{
    color:var(--ep-color-text-neutral-on-minimal-variant);border-radius:6px
}
.emoji-picker .emoji-tabs button.is-active{
    background:var(--ep-color-background-brand-bold);
    color:var(--ep-color-text-brand-on-bold)
}
.emoji-grid button{border-radius:6px}
.emoji-grid button:hover,
.emoji-grid button:focus-visible{
    background:var(--ep-color-state-layer-brand-on-subtle-hovered);
    color:var(--ep-color-text-brand-on-subtle)
}

.react-picker{
    background:var(--ep-color-background-neutral-base);
    border:1px solid var(--ep-color-border-neutral-subtle);
    border-radius:14px;padding:.4rem;
    box-shadow:0 12px 32px -8px rgba(0,0,0,.18),
               0 0 0 1px rgba(0,0,0,.04)
}
.react-picker button,
.react-picker .rp-emoji{
    width:38px;height:38px;border-radius:10px;
    background:transparent
}
.react-picker button:hover,
.react-picker .rp-emoji:hover{
    background:var(--ep-color-state-layer-brand-on-subtle-hovered)
}
.react-picker .rp-emoji.rp-more{
    background:var(--ep-color-background-brand-subtle);
    color:var(--ep-color-text-brand-on-subtle)
}
.react-picker .rp-emoji.rp-more:hover{
    background:var(--ep-color-background-brand-bold);
    color:var(--ep-color-text-brand-on-bold)
}

/* ══════════════════════════════════════════════
 * 12.  Bubble menu (ep-bubble-menu) + edit form
 *  ══════════════════════════════════════════════ */
.bubble-menu{
    background:var(--ep-color-background-neutral-base);
    border:1px solid var(--ep-color-border-neutral-subtle);
    border-radius:10px;padding:.3rem;
    box-shadow:0 12px 32px -8px rgba(0,0,0,.18),
               0 0 0 1px rgba(0,0,0,.04)
}
.bubble-menu button{
    color:var(--ep-color-text-neutral-primary);
    border-radius:6px;padding:.5rem .65rem;font-size:.85rem
}
.bubble-menu button:hover{
    background:var(--ep-color-state-layer-brand-on-subtle-hovered);
    color:var(--ep-color-text-brand-on-subtle)
}
.bubble-menu button.danger{color:var(--ep-color-text-danger-on-subtle)}
.bubble-menu button.danger:hover{
    background:var(--ep-color-background-danger-subtle-opacity);
    color:var(--ep-color-text-danger-on-subtle)
}

/* ══════════════════════════════════════════════
 * 13.  Drag-and-drop overlay (ep-drag-and-drop__holder)
 *      Toggled by JS via `body.is-dragging-files`.
 *  ══════════════════════════════════════════════ */
.chat-panel.is-drag-active::after{
    content:"";position:absolute;inset:0;
    background:rgba(58,12,163,.06);
    border:2px dashed var(--ep-color-border-focused);
    border-radius:inherit;pointer-events:none;
    z-index:10;
    animation:ep-fade-in .15s ease-out both
}
.chat-panel.is-drag-active::before{
    content:"⇣  Drop files to attach";
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:var(--ep-color-background-brand-bold);
    color:var(--ep-color-text-brand-on-bold);
    padding:.7rem 1.1rem;border-radius:24px;
    font-weight:700;font-size:.92rem;letter-spacing:.01em;
    box-shadow:0 12px 32px -6px rgba(58,12,163,.45);
    pointer-events:none;z-index:11;
    animation:ep-pop-in .25s cubic-bezier(.2,.9,.4,1.4) both
}
@keyframes ep-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ep-pop-in{
    from{opacity:0;transform:translate(-50%,-50%) scale(.85)}
    to  {opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* ══════════════════════════════════════════════
 * 14.  Mobile breakpoints — port iAdvize's
 *      `(max-width:480px)` + `(pointer:coarse)` queries.
 *  ══════════════════════════════════════════════ */
@media (max-width:540px){
    .chat-launcher{
        height:52px;min-width:52px;padding:0 .85rem 0 .7rem;
        bottom:18px;right:16px;border-radius:26px
    }
    .chat-launcher .lc-icon{width:32px;height:32px;font-size:.95rem}
    .chat-launcher .lc-label{font-size:.85rem}
    /* When the panel is open, the launcher is already hidden by the
     * v3g `body.chat-open` rule. */
}
@media (max-width:480px){
    .chat-panel{
        width:auto;border-radius:0;
        min-height:0;height:auto
    }
    .chat-panel .chat-header{padding:.7rem .85rem}
    .chat-panel .chat-header .title{font-size:.92rem}
    .chat-panel .chat-state.chat-pin{padding:1.3rem 1.1rem}
    .chat-panel .chat-reply{padding:6px 8px;column-gap:4px}
    .chat-panel .chat-reply textarea{min-height:38px;font-size:16px}
    .chat-panel .chat-reply .emoji-trigger,
    .chat-panel .chat-reply .attach-trigger,
    .chat-panel .chat-reply .voice-trigger,
    .chat-panel .chat-reply .vo-trigger{width:34px;height:34px;font-size:1rem}
    .chat-panel .chat-reply .chat-send{width:38px;height:38px}
    .chat-panel .bubble{font-size:.92rem}
}
@media (pointer:coarse){
    .chat-panel .chat-reply .emoji-trigger,
    .chat-panel .chat-reply .attach-trigger,
    .chat-panel .chat-reply .voice-trigger,
    .chat-panel .chat-reply .vo-trigger{width:40px;height:40px}
    .chat-panel .chat-reply .chat-send{width:42px;height:42px}
}

/* ══════════════════════════════════════════════
 * 15.  Status float (in-chat status pop) & overflow popover —
 *      iAdvize-style tooltips & menus for our extras.
 *  ══════════════════════════════════════════════ */
.chat-panel .status-float{
    background:var(--ep-color-background-neutral-bold-variant);
    color:#fff;border-radius:12px;border-top-left-radius:4px;
    box-shadow:0 12px 32px -8px rgba(0,0,0,.30),
               0 0 0 1px rgba(255,255,255,.05)
}
.chat-overlay{
    background:rgba(10,6,26,.5)
}
.chat-overflow{
    background:var(--ep-color-background-neutral-base);
    color:var(--ep-color-text-neutral-primary)
}
.overflow-section{
    border-bottom-color:var(--ep-color-border-neutral-subtle)
}
.overflow-title{
    color:var(--ep-color-text-neutral-on-minimal-variant)
}
.overflow-close{
    color:var(--ep-color-icon-neutral-on-subtle)
}
.overflow-close:hover{
    background:var(--ep-color-state-layer-neutral-on-subtle-hovered);
    color:var(--ep-color-text-neutral-primary)
}
.user-name-box,.user-status-box,.user-pin-box,.status-options{
    background:var(--ep-color-background-neutral-base);
    border-bottom-color:var(--ep-color-border-neutral-subtle)
}
.user-name-box input,.user-status-box input,.user-pin-box input{
    background:var(--ep-color-background-neutral-subtle);
    color:var(--ep-color-text-neutral-primary);
    border:1px solid transparent;border-radius:8px
}
.user-name-box input:focus,.user-status-box input:focus,.user-pin-box input:focus{
    background:var(--ep-color-background-neutral-base);
    border-color:var(--ep-color-border-focused);
    box-shadow:0 0 0 3px var(--ep-color-border-outer-focused);outline:none
}
.user-name-box button,.user-status-box button,.user-pin-box button{
    background:var(--ep-color-background-brand-bold);
    color:var(--ep-color-text-brand-on-bold);
    border-radius:8px
}
.user-status-box .status-quick-btn{
    background:transparent;
    color:var(--ep-color-text-brand-primary);
    border:1.5px solid var(--ep-color-border-focused)
}
.user-status-box .status-quick-btn:hover{
    background:var(--ep-color-background-brand-bold);
    color:var(--ep-color-text-brand-on-bold)
}
.status-options button{
    background:var(--ep-color-background-neutral-base);
    border:1px solid var(--ep-color-border-neutral-subtle);
    color:var(--ep-color-text-neutral-primary);
    border-radius:14px
}
.status-options button:hover{
    background:var(--ep-color-background-brand-bold);
    color:var(--ep-color-text-brand-on-bold);
    border-color:var(--ep-color-border-focused)
}

/* ══════════════════════════════════════════════
 * 16.  Override v3 mobile body.chat-open backgrounds so they pick
 *      up the new neutral-base color and don't show the old purple
 *      `--bg` behind the iAdvize design.
 *  ══════════════════════════════════════════════ */
@media (max-width:540px){
    body.chat-open .chat-panel.is-open{
        background:var(--ep-color-background-neutral-base)
    }
    body.chat-open .chat-panel.is-open .chat-thread-meta{
        background:var(--ep-color-background-neutral-base);
        box-shadow:0 1px 0 var(--ep-color-border-neutral-subtle)
    }
}

/* ══════════════════════════════════════════════
 * 17.  Misc — toast, modal, lightbox already use --surface tokens
 *      that we keep.  Ensure the .modal-content uses neutral-base.
 *  ══════════════════════════════════════════════ */
.modal-content{
    background:var(--ep-color-background-neutral-base);
    color:var(--ep-color-text-neutral-primary);
    border:1px solid var(--ep-color-border-neutral-subtle);
    border-radius:14px
}
.btn-danger{
    background:var(--ep-color-background-danger-bold);
    color:var(--ep-color-text-danger-on-bold);
    border-radius:24px;height:40px;padding:0 1.2rem;font-weight:700
}
.btn-outline{
    background:transparent;
    color:var(--ep-color-text-neutral-primary);
    border:1.5px solid var(--ep-color-border-neutral-moderate);
    border-radius:24px;height:40px;padding:0 1.2rem;font-weight:700
}
.btn-outline:hover{
    background:var(--ep-color-state-layer-neutral-on-subtle-hovered)
}

.toast{
    background:var(--ep-color-background-neutral-bold-variant);
    color:#fff;border-radius:24px;padding:.55rem 1.1rem;
    box-shadow:0 14px 32px -10px rgba(0,0,0,.40),
               0 0 0 1px rgba(255,255,255,.06)
}
.toast.error{
    background:var(--ep-color-background-danger-bold);
    color:var(--ep-color-text-danger-on-bold)
}

/* ══════════════════════════════════════════════
 * 18.  Scrollbars — match iAdvize's slim, semantic-color thumbs.
 *  ══════════════════════════════════════════════ */
.chat-panel .chat-messages::-webkit-scrollbar,
.overflow-body::-webkit-scrollbar{width:6px}
.chat-panel .chat-messages::-webkit-scrollbar-thumb,
.overflow-body::-webkit-scrollbar-thumb{
    background:var(--ep-color-border-neutral-moderate);
    border-radius:6px
}
.chat-panel .chat-messages::-webkit-scrollbar-thumb:hover,
.overflow-body::-webkit-scrollbar-thumb:hover{
    background:var(--ep-color-border-neutral-strong)
}

/* ──── End of v4 layer ──── */

/* ════════════════════════════════════════════════════════════
 * v5 MODERN MESSENGER LAYER — WhatsApp + Telegram + Messenger
 * Keeps the same markup/API hooks and upgrades the visual language.
 * ════════════════════════════════════════════════════════════ */
:root{
    --mm-brand:#0088cc;
    --mm-brand-2:#00a884;
    --mm-brand-3:#6d5dfc;
    --mm-chat-bg:#efeae2;
    --mm-chat-paper:rgba(255,255,255,.82);
    --mm-out:#d9fdd3;
    --mm-in:#ffffff;
    --mm-ink:#111827;
    --mm-soft:#667085;
    --mm-ring:0 0 0 3px rgba(0,136,204,.16);
    --mm-shadow:0 28px 70px -22px rgba(15,23,42,.42),0 16px 34px -24px rgba(0,0,0,.28)
}
[data-theme="dark"]{
    --mm-chat-bg:#0b141a;
    --mm-chat-paper:rgba(17,27,33,.86);
    --mm-out:#005c4b;
    --mm-in:#202c33;
    --mm-ink:#e9edef;
    --mm-soft:#8696a0;
    --mm-shadow:0 30px 74px -20px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.06)
}
@media (prefers-color-scheme:dark){
    html[data-theme="auto"]{
        --mm-chat-bg:#0b141a;
        --mm-chat-paper:rgba(17,27,33,.86);
        --mm-out:#005c4b;
        --mm-in:#202c33;
        --mm-ink:#e9edef;
        --mm-soft:#8696a0;
    }
}
.chat-launcher{
    isolation:isolate;
    background:linear-gradient(135deg,var(--mm-brand),var(--mm-brand-2) 58%,var(--mm-brand-3));
    border:1px solid rgba(255,255,255,.28);
    box-shadow:0 16px 38px -14px rgba(0,136,204,.78),0 8px 20px -12px rgba(0,168,132,.7)
}
.chat-launcher::before{
    content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:-1;
    background:conic-gradient(from 140deg,rgba(0,136,204,.32),rgba(0,168,132,.38),rgba(109,93,252,.28),rgba(0,136,204,.32));
    filter:blur(12px);opacity:.72;transition:opacity .2s,transform .2s
}
.chat-launcher:hover::before{opacity:1;transform:scale(1.04)}
.chat-launcher .lc-icon{background:rgba(255,255,255,.20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.chat-launcher .badge{background:#ff3b30;border:2px solid #fff;min-width:22px;height:22px;display:grid;place-items:center}

/* ── "Call admin" floating button ────────────────────────────────
 * Sits just above the chat launcher.  Matches the launcher's fab
 * language (pill + icon + label + count badge) but with a distinct
 * "phone-ring" gradient so it reads as a call action.  Hidden while
 * the chat panel is open (same rule as the launcher). */
.call-admin-fab{
    position:fixed;bottom:96px;right:20px;z-index:59;
    display:inline-flex;align-items:center;gap:.55rem;
    min-height:52px;padding:0 1rem 0 .75rem;
    border:none;border-radius:999px;cursor:pointer;
    background:linear-gradient(135deg,#f59e0b,#ef4444 60%,#e11d48);
    color:#fff;font-weight:700;font-size:.9rem;line-height:1;
    box-shadow:0 14px 30px -10px rgba(239,68,68,.65),0 6px 16px -8px rgba(0,0,0,.35);
    transition:transform .15s ease,box-shadow .2s ease,opacity .2s;
    -webkit-tap-highlight-color:transparent
}
.call-admin-fab:hover{transform:translateY(-2px) scale(1.03)}
.call-admin-fab:active{transform:translateY(0) scale(.97)}
.call-admin-fab:disabled{opacity:.75;cursor:wait}
.call-admin-fab .call-admin-icon{
    width:32px;height:32px;border-radius:50%;
    background:rgba(255,255,255,.22);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.95rem
}
.call-admin-fab .call-admin-count{
    min-width:20px;height:20px;padding:0 6px;border-radius:999px;
    background:#fff;color:#e11d48;font-size:.72rem;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center
}
/* Success pulse after a tap. */
.call-admin-fab.is-pulse{animation:callPulse .5s cubic-bezier(.2,.9,.4,1.3)}
@keyframes callPulse{
    0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
    70%{box-shadow:0 0 0 16px rgba(34,197,94,0)}
    100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
body.chat-open .call-admin-fab{opacity:0;pointer-events:none;visibility:hidden}
@media (prefers-reduced-motion:reduce){
    .call-admin-fab,.call-admin-fab.is-pulse{animation:none!important;transition:none!important}
}
@media (max-width:540px){
    .call-admin-fab{bottom:88px;right:14px;min-height:48px;padding:0 .9rem 0 .65rem}
    .call-admin-fab .call-admin-label{font-size:.82rem}
}
@supports (padding:env(safe-area-inset-bottom)){
    .call-admin-fab{bottom:max(96px,env(safe-area-inset-bottom))}
    @media (max-width:540px){ .call-admin-fab{bottom:max(88px,env(safe-area-inset-bottom))} }
}

.chat-panel{
    width:min(430px,calc(100vw - 28px));height:min(720px,calc(100dvh - 112px));
    min-height:min(620px,calc(100dvh - 112px));
    border-radius:30px;border:1px solid rgba(255,255,255,.72);
    background:var(--mm-chat-paper);box-shadow:var(--mm-shadow);
    backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%);
    transform-origin:bottom right
}
[data-theme="dark"] .chat-panel{border-color:rgba(255,255,255,.08)}
.chat-panel.is-open{transform:translateY(0) scale(1)}
.chat-panel .chat-header{
    min-height:62px;padding:.58rem .95rem;
    background:linear-gradient(135deg,var(--mm-brand) 0%,var(--mm-brand-2) 58%,var(--mm-brand-3) 100%);
    box-shadow:0 10px 28px -22px rgba(0,0,0,.62)
}
.chat-panel .chat-header .avatar{
    width:34px;height:34px;background:rgba(255,255,255,.18);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 0 3px rgba(255,255,255,.12),0 0 0 6px rgba(34,197,94,.20)
}
.chat-panel .chat-header .title{font-size:.94rem;letter-spacing:-.02em}
.chat-panel .chat-header .subtitle{font-size:.72rem;opacity:.9}
.chat-panel .chat-header .chat-close,
.chat-panel .chat-header .chat-fullscreen,
.chat-panel .chat-header .chat-kebab{
    background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)
}
.chat-panel .chat-header .chat-close:hover,
.chat-panel .chat-header .chat-fullscreen:hover,
.chat-panel .chat-header .chat-kebab:hover{background:rgba(255,255,255,.28)}

.chat-panel .chat-state.chat-thread{
    background:var(--mm-chat-bg);
    background-image:radial-gradient(circle at 18px 18px,rgba(84,74,64,.045) 1.5px,transparent 1.5px),
                     radial-gradient(circle at 64px 72px,rgba(0,168,132,.045) 2px,transparent 2px),
                     linear-gradient(135deg,rgba(255,255,255,.18),transparent 45%);
    background-size:72px 72px,110px 110px,100% 100%
}
[data-theme="dark"] .chat-panel .chat-state.chat-thread{
    background-image:radial-gradient(circle at 18px 18px,rgba(255,255,255,.035) 1.5px,transparent 1.5px),
                     radial-gradient(circle at 64px 72px,rgba(0,168,132,.10) 2px,transparent 2px),
                     linear-gradient(135deg,rgba(255,255,255,.035),transparent 45%)
}
@media (prefers-color-scheme:dark){
    html[data-theme="auto"] .chat-panel .chat-state.chat-thread{
        background-image:radial-gradient(circle at 18px 18px,rgba(255,255,255,.035) 1.5px,transparent 1.5px),
                        radial-gradient(circle at 64px 72px,rgba(0,168,132,.10) 2px,transparent 2px),
                        linear-gradient(135deg,rgba(255,255,255,.035),transparent 45%);
    }
}
.chat-panel .chat-thread-meta{
    background:color-mix(in srgb,var(--mm-chat-paper) 86%,transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(0,0,0,.06)
}
[data-theme="dark"] .chat-panel .chat-thread-meta{border-bottom-color:rgba(255,255,255,.06)}
.chat-panel .chat-messages{padding:1rem .8rem .9rem;gap:.18rem}
.chat-panel .date-sep span,.chat-panel .date-sep{
    color:var(--mm-soft);font-size:.68rem;font-weight:800;letter-spacing:.08em
}
.chat-panel .date-sep{position:sticky;top:.35rem;z-index:2;justify-content:center}
.chat-panel .date-sep::before,.chat-panel .date-sep::after{display:none}
.chat-panel .date-sep span{
    background:color-mix(in srgb,var(--mm-chat-paper) 84%,transparent);
    border:1px solid rgba(0,0,0,.05);border-radius:999px;padding:.28rem .7rem;
    box-shadow:0 8px 24px -18px rgba(0,0,0,.6);backdrop-filter:blur(10px)
}

.chat-panel .bubble-row{margin:.09rem 0;gap:.45rem}
.chat-panel .bubble{
    max-width:min(82%,680px);padding:.48rem .66rem .38rem;border-radius:19px;
    color:var(--mm-ink);box-shadow:0 1px .5px rgba(11,20,26,.13),0 9px 24px -22px rgba(15,23,42,.75);
    border:none;transition:transform .14s ease,box-shadow .18s ease
}
.chat-panel .bubble:hover{transform:translateY(-1px);box-shadow:0 2px 1px rgba(11,20,26,.13),0 14px 34px -26px rgba(15,23,42,.88)}
.chat-panel .bubble.admin{background:var(--mm-in);border-top-left-radius:7px}
.chat-panel .bubble.user{background:linear-gradient(135deg,var(--mm-out),color-mix(in srgb,var(--mm-out) 80%,#fff));color:var(--mm-ink);border-top-right-radius:7px}
[data-theme="dark"] .chat-panel .bubble.user{background:linear-gradient(135deg,var(--mm-out),#056b58);color:#e9edef}
[data-theme="dark"] .chat-panel .bubble.admin{background:var(--mm-in);color:#e9edef;border:none}
/* The automatic dark theme does not carry the explicit data-theme attribute.
 * Keep admin bubbles and the verified control readable in that mode too. */
[data-theme="dark"] .chat-panel .bubble.admin,
[data-theme="dark"] .chat-panel .bubble.admin .body,
[data-theme="dark"] .chat-panel .bubble.admin .meta,
[data-theme="dark"] .chat-panel .verified-badge{color:#e9edef}
.chat-panel .verified-badge{color:#1d9bf0}
@media (prefers-color-scheme:dark){
    html[data-theme="auto"] .chat-panel .bubble.admin,
    html[data-theme="auto"] .chat-panel .bubble.admin .body{
        color:#e9edef;
    }
    html[data-theme="auto"] .chat-panel .bubble.admin .meta{
        color:rgba(233,237,239,.62);
    }
    html[data-theme="auto"] .chat-panel .verified-badge{
        color:#60c7ff;
    }
}
/* Keep outgoing user messages readable when the device is dark but the page
 * remains on its automatic theme.  The WhatsApp-style variant otherwise
 * inherits a dark-text token intended for the light palette. */
@media (prefers-color-scheme:dark){
    html[data-theme="auto"] .chat-panel .bubble.user{
        background:linear-gradient(135deg,#087f6b,#056b58);
        color:#f3f6f7;
    }
    html[data-theme="auto"] .chat-panel .bubble.user .body,
    html[data-theme="auto"] .chat-panel .bubble.user .meta{
        color:#f3f6f7;
    }
    html[data-theme="auto"] .chat-panel .bubble.admin{
        background:#202c33;
        color:#e9edef;
    }
}
.chat-panel .bubble-row.left .bubble.admin::before,
.chat-panel .bubble-row.right .bubble.user::before{
    content:"";position:absolute;top:0;width:12px;height:14px;background:inherit
}
.chat-panel .bubble-row.left .bubble.admin::before{left:-7px;clip-path:polygon(100% 0,0 0,100% 100%)}
.chat-panel .bubble-row.right .bubble.user::before{right:-7px;clip-path:polygon(0 0,100% 0,0 100%)}
.chat-panel .bubble .body{font-size:.94rem;line-height:1.43}
.chat-panel .bubble .meta{font-size:.64rem;color:rgba(17,24,39,.52);margin-top:.18rem;gap:.25rem}
.chat-panel .bubble.user .meta{color:rgba(17,24,39,.56)}
[data-theme="dark"] .chat-panel .bubble .meta,[data-theme="dark"] .chat-panel .bubble.user .meta{color:rgba(233,237,239,.58)}
.chat-panel .bubble-menu-btn{opacity:0;transform:translateY(2px);transition:opacity .14s,transform .14s}
.chat-panel .bubble-row:hover .bubble-menu-btn,.chat-panel .bubble-row.menu-open .bubble-menu-btn{opacity:1;transform:none}
.chat-panel .rx-pill{background:color-mix(in srgb,var(--mm-chat-paper) 88%,transparent);border-color:rgba(0,0,0,.06);backdrop-filter:blur(10px)}

.chat-panel .chat-reply{
    padding:.62rem .72rem calc(.62rem + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--mm-chat-paper) 92%,transparent);
    backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
    border-top:1px solid rgba(0,0,0,.06);column-gap:.34rem
}
[data-theme="dark"] .chat-panel .chat-reply{border-top-color:rgba(255,255,255,.07)}
.chat-panel .chat-reply::before{display:none}
.chat-panel .chat-reply textarea{
    min-height:42px;border-radius:22px;background:#fff;border:1px solid rgba(0,0,0,.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72);padding:.65rem .95rem
}
[data-theme="dark"] .chat-panel .chat-reply textarea{background:#202c33;border-color:rgba(255,255,255,.06)}
.chat-panel.is-composing .chat-reply textarea{box-shadow:var(--mm-ring)}
.chat-panel .chat-reply .emoji-trigger,
.chat-panel .chat-reply .attach-trigger,
.chat-panel .chat-reply .voice-trigger,
.chat-panel .chat-reply .vo-trigger{
    color:var(--mm-soft);background:transparent
}
.chat-panel .chat-reply .emoji-trigger:hover,
.chat-panel .chat-reply .attach-trigger:hover,
.chat-panel .chat-reply .voice-trigger:hover,
.chat-panel .chat-reply .vo-trigger:hover{background:rgba(0,136,204,.10);color:var(--mm-brand)}
.chat-panel .chat-reply .chat-send{
    background:linear-gradient(135deg,var(--mm-brand),var(--mm-brand-2));
    box-shadow:0 10px 22px -12px rgba(0,136,204,.82);
    transform:translateZ(0);transition:transform .12s ease,filter .18s ease,opacity .18s ease
}
.chat-panel .chat-reply .chat-send:not(:disabled):active{transform:scale(.92)}
.chat-panel .chat-reply .chat-send:disabled{filter:grayscale(.3);opacity:.38}
.chat-panel .chat-reply .chat-send.is-sending{opacity:.92;filter:none;pointer-events:none}
.chat-panel .chat-reply .chat-send.is-sending i{animation:mm-send-spin .72s linear infinite}
.chat-panel.is-composing .chat-reply .chat-send:not(:disabled):not(.is-sending){animation:mm-send-ready 1.9s ease-in-out infinite}
@keyframes mm-send-ready{0%,100%{box-shadow:0 10px 22px -12px rgba(0,136,204,.82)}50%{box-shadow:0 10px 26px -9px rgba(0,168,132,.95)}}
@keyframes mm-send-spin{to{transform:rotate(360deg)}}

.attach-menu,.emoji-picker,.react-picker,.bubble-menu,.chat-overflow{
    border-radius:18px;border:1px solid rgba(255,255,255,.72);
    box-shadow:0 22px 54px -22px rgba(0,0,0,.38);
    backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)
}
[data-theme="dark"] .attach-menu,[data-theme="dark"] .emoji-picker,[data-theme="dark"] .react-picker,[data-theme="dark"] .bubble-menu,[data-theme="dark"] .chat-overflow{border-color:rgba(255,255,255,.08)}
.chat-panel.is-drag-active::after{background:rgba(0,136,204,.12);border-color:var(--mm-brand-2);z-index:20}
.chat-panel.is-drag-active::before{
    content:attr(data-drop-label);background:linear-gradient(135deg,var(--mm-brand),var(--mm-brand-2));z-index:21
}

@media (max-width:540px){
    /* Height is intentionally NOT set here — the keyboard-aware rule using
     * var(--vp) (see the body.chat-open block above) owns the panel height so
     * the composer + history stay visible when the on-screen keyboard opens.
     * Overriding with 100dvh here previously pushed the input/history under
     * the keyboard. */
    .chat-panel{width:100vw;min-height:0;border-radius:24px 24px 0 0;border-left:none;border-right:none;border-bottom:none}
    body.chat-open .chat-panel.is-open{border-radius:0}
    .chat-panel .chat-header{min-height:58px;padding:.55rem .8rem}
    .chat-panel .chat-header .avatar{width:32px;height:32px}
    .chat-panel .chat-messages{padding:.85rem .55rem .75rem}
    .chat-panel .bubble{max-width:86%;font-size:.94rem}
    .chat-panel .bubble-menu-btn{opacity:1}
    .chat-panel .chat-reply{padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom,0px));column-gap:.22rem}
    /* Bigger, easier-to-tap input on phones. */
    .chat-panel .chat-reply textarea{min-height:46px;font-size:16px;padding:.65rem .8rem;line-height:1.35}
    .attach-menu{border-radius:24px 24px 0 0}
}
@media (prefers-reduced-motion:reduce){
    .chat-panel.is-composing .chat-reply .chat-send:not(:disabled),.chat-panel .chat-reply .chat-send.is-sending i,.chat-launcher::before{animation:none}
}

/* Final theme pass: the component skin above uses its own light design
 * tokens, so keep the floating chat readable when the page is in auto-dark. */
@media (prefers-color-scheme:dark){
[data-theme="dark"] .chat-panel,
html[data-theme="auto"] .chat-panel{background:#171035!important;color:#f6f3ff}
[data-theme="dark"] .chat-panel .chat-messages,
html[data-theme="auto"] .chat-panel .chat-messages,
[data-theme="dark"] .chat-panel .chat-state,
html[data-theme="auto"] .chat-panel .chat-state{background:#0c0824!important;color:#f6f3ff}
[data-theme="dark"] .chat-panel .chat-thread-meta,
html[data-theme="auto"] .chat-panel .chat-thread-meta,
[data-theme="dark"] .chat-panel .chat-reply,
html[data-theme="auto"] .chat-panel .chat-reply,
[data-theme="dark"] .chat-panel .reply-preview,
html[data-theme="auto"] .chat-panel .reply-preview,
[data-theme="dark"] .chat-panel .attach-tray,
html[data-theme="auto"] .chat-panel .attach-tray{
    background:#171035!important;color:#f6f3ff;border-color:#38266b
}
[data-theme="dark"] .chat-panel .chat-pin input,
html[data-theme="auto"] .chat-panel .chat-pin input,
[data-theme="dark"] .chat-panel .chat-reply textarea,
html[data-theme="auto"] .chat-panel .chat-reply textarea,
[data-theme="dark"] .chat-panel .user-name-box input,
html[data-theme="auto"] .chat-panel .user-name-box input,
[data-theme="dark"] .chat-panel .user-status-box input,
html[data-theme="auto"] .chat-panel .user-status-box input,
[data-theme="dark"] .chat-panel .user-pin-box input,
html[data-theme="auto"] .chat-panel .user-pin-box input{
    background:#0c0824!important;color:#f6f3ff;border-color:#4a347d
}
[data-theme="dark"] .chat-panel .bubble.admin,
html[data-theme="auto"] .chat-panel .bubble.admin{
    background:#261a50!important;color:#f6f3ff;border-color:#4a347d
}
[data-theme="dark"] .chat-panel .attach-menu,
html[data-theme="auto"] .chat-panel .attach-menu,
[data-theme="dark"] .chat-panel .emoji-picker,
html[data-theme="auto"] .chat-panel .emoji-picker,
[data-theme="dark"] .chat-panel .react-picker,
html[data-theme="auto"] .chat-panel .react-picker,
[data-theme="dark"] .chat-panel .bubble-menu,
html[data-theme="auto"] .chat-panel .bubble-menu,
[data-theme="dark"] .chat-panel .chat-overflow,
html[data-theme="auto"] .chat-panel .chat-overflow,
[data-theme="dark"] .chat-panel .modal-content,
html[data-theme="auto"] .chat-panel .modal-content,
[data-theme="dark"] .chat-panel .status-options,
html[data-theme="auto"] .chat-panel .status-options{
    background:#171035!important;color:#f6f3ff;border-color:#4a347d
}
[data-theme="dark"] .chat-panel .attach-menu button,
html[data-theme="auto"] .chat-panel .attach-menu button,
[data-theme="dark"] .chat-panel .bubble-menu button,
html[data-theme="auto"] .chat-panel .bubble-menu button,
[data-theme="dark"] .chat-panel .status-options button,
html[data-theme="auto"] .chat-panel .status-options button{
    color:#f6f3ff
}
[data-theme="dark"] .chat-panel .att-audio,
html[data-theme="auto"] .chat-panel .att-audio,
[data-theme="dark"] .chat-panel .att-voice,
html[data-theme="auto"] .chat-panel .att-voice,
[data-theme="dark"] .chat-panel .att-file,
html[data-theme="auto"] .chat-panel .att-file{
    background:rgba(255,255,255,.08);color:#f6f3ff
}
[data-theme="dark"] .chat-panel .date-sep,
html[data-theme="auto"] .chat-panel .date-sep{background:rgba(255,255,255,.1);color:#c8c2e6}
[data-theme="dark"] .chat-panel .chat-state.chat-pin .chat-intro,
html[data-theme="auto"] .chat-panel .chat-state.chat-pin .chat-intro{
    color:#f6f3ff!important
}
[data-theme="dark"] .chat-panel .chat-state.chat-pin .chat-intro strong,
html[data-theme="auto"] .chat-panel .chat-state.chat-pin .chat-intro strong{
    color:#ffffff!important
}
}

[data-theme="dark"] .chat-panel .chat-state.chat-pin .chat-intro{
    color:#f6f3ff!important
}
[data-theme="dark"] .chat-panel .chat-state.chat-pin .chat-intro strong{
    color:#ffffff!important
}

/* ============================================================
 *  First-letter onboarding coach (post-send spotlight)
 *  Injected by index.js showCoach(); explains where replies land.
 * ============================================================ */
.coach-overlay{
    position:fixed;inset:0;z-index:1200;
    display:flex;align-items:flex-end;justify-content:center;
    padding:0 1rem calc(104px + env(safe-area-inset-bottom,0px));
    background:rgba(12,8,36,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    opacity:0;transition:opacity .28s ease
}
.coach-overlay.is-visible{opacity:1}
.coach-card{
    width:100%;max-width:400px;background:var(--surface);color:var(--text);
    border:1px solid var(--border);border-radius:20px;padding:1.3rem 1.25rem 1.15rem;
    box-shadow:var(--shadow-lg);transform:translateY(16px) scale(.98);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);text-align:center
}
.coach-overlay.is-visible .coach-card{transform:translateY(0) scale(1)}
.coach-emoji{font-size:2.4rem;line-height:1;margin-bottom:.35rem}
.coach-title{margin:.1rem 0 .3rem;font-size:1.2rem;font-weight:800;
    background:linear-gradient(90deg,var(--primary),var(--primary-2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
.coach-body{margin:0 0 .8rem;color:var(--muted);font-size:.95rem}
/* PIN shown INSIDE the coach so it can't be missed/lost. */
.coach-pin-wrap{
    display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:0 0 1rem;
    padding:.9rem .8rem;border-radius:14px;
    background:var(--bg);border:1px dashed var(--primary)
}
.coach-pin-label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.coach-pin{
    font-size:1.7rem;font-weight:800;letter-spacing:4px;cursor:copy;user-select:all;
    padding:.35rem .9rem;border-radius:10px;color:#fff;
    background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:var(--shadow);
    animation:prPinPop .4s ease-out
}
.coach-copy{
    display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;font-size:.85rem;
    border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)
}
.coach-copy:hover{border-color:var(--primary);color:var(--primary)}
.coach-pin-warn{display:flex;align-items:flex-start;gap:.4rem;font-size:.78rem;color:#b45309;line-height:1.4;text-align:center}
[data-theme="dark"] .coach-pin-warn{color:#fbbf24}
.coach-pin-warn i{margin-top:.1rem;flex-shrink:0}
.coach-steps{margin:0 0 1.1rem;padding:0;list-style:none;text-align:left;display:grid;gap:.5rem}
.coach-steps li{
    position:relative;padding:.55rem .7rem .55rem 2.4rem;border-radius:12px;
    background:var(--bg);border:1px solid var(--border);font-size:.9rem;counter-increment:coach
}
.coach-steps li::before{
    content:counter(coach);position:absolute;left:.6rem;top:50%;transform:translateY(-50%);
    width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;
    font-size:.8rem;font-weight:800
}
.coach-steps{counter-reset:coach}
.coach-actions{display:flex;flex-direction:column;gap:.5rem}
.coach-open{
    padding:.75rem 1rem;border:none;border-radius:12px;font-weight:700;font-size:.98rem;color:#fff;
    background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:var(--shadow);
    transition:transform .15s,filter .15s
}
.coach-open:hover{transform:translateY(-1px);filter:brightness(1.05)}
.coach-open:active{transform:translateY(0)}
.coach-dismiss{
    padding:.5rem 1rem;border:1px solid var(--border);border-radius:12px;
    background:transparent;color:var(--muted);font-weight:600;font-size:.9rem
}
.coach-dismiss:hover{color:var(--text);background:var(--bg)}

/* Pulsing glow on the launcher while the coach is up, so the eye is
 * drawn to exactly where replies will appear. Raised above the dim
 * overlay so the button itself stays bright and tappable. */
.chat-launcher.coach-glow{
    z-index:1250!important;
    animation:coachGlow 1.4s ease-in-out infinite!important;
    box-shadow:0 0 0 0 rgba(124,47,247,.55)
}
@keyframes coachGlow{
    0%{box-shadow:0 0 0 0 rgba(124,47,247,.55)}
    70%{box-shadow:0 0 0 18px rgba(124,47,247,0)}
    100%{box-shadow:0 0 0 0 rgba(124,47,247,0)}
}
@media (prefers-reduced-motion:reduce){
    .love-rain span,.flight-rocket,.map-heart{animation:none}
}

@media (max-width:520px){
    .letter-to-row{gap:.45rem}
    .letter-to-input{min-width:0}
}

@media (prefers-reduced-motion:reduce){
    .coach-overlay,.coach-card{transition:none}
    .chat-launcher.coach-glow{animation:none!important}
}

/* ── Admin-offline notice inside the thread ──────────────────────
 * A soft pill telling the user a reply is on the way while the admin
 * is offline. Auto-hidden by JS the moment admin is online/typing. */
.offline-notice{
    display:flex;align-items:center;gap:.5rem;margin:.5rem .6rem .2rem;
    padding:.55rem .8rem;border-radius:12px;font-size:.85rem;line-height:1.4;
    color:var(--text);background:var(--bg);
    background:linear-gradient(135deg,
        color-mix(in srgb,var(--primary) 12%,var(--surface)),
        color-mix(in srgb,var(--accent) 12%,var(--surface)));
    border:1px solid var(--border);box-shadow:var(--shadow);
    animation:offlineNoticeIn .3s ease-out
}
.offline-notice i{color:var(--primary);font-size:.95em;flex-shrink:0}
@keyframes offlineNoticeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.offline-notice{animation:none}}

/* ── Animated "remember your PIN" logout reminder ────────────────
 * Shown when a chat session ends (idle or manual "End"), so the user
 * keeps their PIN and knows they can return to read the reply. */
.pin-reminder-overlay{
    position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;
    padding:1rem;background:rgba(12,8,36,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    opacity:0;transition:opacity .26s ease
}
.pin-reminder-overlay.is-visible{opacity:1}
.pin-reminder-card{
    width:100%;max-width:380px;text-align:center;color:var(--text);background:var(--surface);
    border:1px solid var(--border);border-radius:22px;padding:1.6rem 1.35rem 1.3rem;
    box-shadow:var(--shadow-lg);transform:translateY(18px) scale(.96);
    transition:transform .32s cubic-bezier(.2,.85,.25,1)
}
.pin-reminder-overlay.is-visible .pin-reminder-card{transform:translateY(0) scale(1)}
.pr-lock{
    position:relative;width:66px;height:66px;margin:0 auto .7rem;border-radius:50%;
    display:grid;place-items:center;font-size:1.6rem;color:#fff;
    background:linear-gradient(135deg,var(--primary),var(--primary-2))
}
.pr-lock .pr-ring{
    position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--primary);
    opacity:.5;animation:prRing 1.8s ease-out infinite
}
@keyframes prRing{0%{transform:scale(.85);opacity:.6}100%{transform:scale(1.35);opacity:0}}
.pr-title{margin:.1rem 0 .35rem;font-size:1.22rem;font-weight:800;
    background:linear-gradient(90deg,var(--primary),var(--primary-2));
    -webkit-background-clip:text;background-clip:text;color:transparent}
.pr-body{margin:0 0 1rem;color:var(--muted);font-size:.94rem;line-height:1.5}
.pr-pin{
    display:inline-block;padding:.55rem 1.1rem;margin:0 0 .55rem;cursor:copy;user-select:all;
    font-size:1.5rem;font-weight:800;letter-spacing:3px;border-radius:12px;color:#fff;
    background:linear-gradient(90deg,var(--primary),var(--primary-2));
    box-shadow:var(--shadow);animation:prPinPop .4s ease-out}
@keyframes prPinPop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.pr-copy{
    display:inline-flex;align-items:center;gap:.4rem;margin:0 auto 1rem;padding:.4rem .8rem;
    border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:.85rem}
.pr-copy:hover{border-color:var(--primary);color:var(--primary)}
.pr-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.2rem}
.pr-reopen{
    padding:.75rem 1rem;border:none;border-radius:12px;font-weight:700;font-size:.98rem;color:#fff;
    background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:var(--shadow);
    transition:transform .15s,filter .15s}
.pr-reopen:hover{transform:translateY(-1px);filter:brightness(1.05)}
.pr-done{
    padding:.5rem 1rem;border:1px solid var(--border);border-radius:12px;
    background:transparent;color:var(--muted);font-weight:600;font-size:.9rem}
.pr-done:hover{color:var(--text);background:var(--bg)}
@media (prefers-reduced-motion:reduce){
    .pin-reminder-overlay,.pin-reminder-card{transition:none}
    .pr-lock .pr-ring,.pr-pin{animation:none}
}

/* ══════════════════════════════════════════════════════════════
 *  CHAT UI VARIANTS (admin-selectable skins)
 *  Applied via <body data-chat-variant="..."> from index.php.
 *  Each variant mostly re-tints via CSS custom properties, so the
 *  whole widget (launcher, header, bubbles, buttons) follows along.
 * ══════════════════════════════════════════════════════════════ */

/* ── Claude: warm cream, soft coral accent, rounded & calm ── */
body[data-chat-variant="claude"]{
    --primary:#d97757;--primary-2:#c15f3c;--accent:#d97757;
    --user-bubble:#d97757;
}
body[data-chat-variant="claude"] .chat-launcher{
    background:linear-gradient(135deg,#d97757,#c15f3c)
}
body[data-chat-variant="claude"] .chat-panel .chat-header{
    background:linear-gradient(135deg,#d97757,#be5a39)
}
body[data-chat-variant="claude"] .chat-panel .chat-messages{background:#f5f1ea}
[data-theme="dark"] body[data-chat-variant="claude"] .chat-panel .chat-messages{background:#1c1815}
body[data-chat-variant="claude"] .chat-panel .bubble{border-radius:18px}
body[data-chat-variant="claude"] .chat-panel .bubble.admin{
    background:#fff;color:#3d3d3a;border:1px solid #e7ded1
}
[data-theme="dark"] body[data-chat-variant="claude"] .chat-panel .bubble.admin{
    background:#2a2521;color:#ece7df;border-color:#3a332c
}

/* ── ChatGPT: clean, neutral gray, green send accent ── */
body[data-chat-variant="chatgpt"]{
    --primary:#10a37f;--primary-2:#0e8e6d;--accent:#10a37f;
    --user-bubble:#10a37f;
}
body[data-chat-variant="chatgpt"] .chat-launcher{
    background:linear-gradient(135deg,#10a37f,#0e8e6d)
}
body[data-chat-variant="chatgpt"] .chat-panel .chat-header{
    background:#202123;color:#fff
}
body[data-chat-variant="chatgpt"] .chat-panel .chat-messages{background:#fff}
[data-theme="dark"] body[data-chat-variant="chatgpt"] .chat-panel .chat-messages{background:#343541}
body[data-chat-variant="chatgpt"] .chat-panel .bubble{border-radius:12px}
body[data-chat-variant="chatgpt"] .chat-panel .bubble.user{
    background:#10a37f;color:#fff
}
body[data-chat-variant="chatgpt"] .chat-panel .bubble.admin{
    background:#f7f7f8;color:#0d0d0d;border:1px solid #ececf1
}
[data-theme="dark"] body[data-chat-variant="chatgpt"] .chat-panel .bubble.admin{
    background:#444654;color:#ececf1;border-color:#565869
}

/* ── bKash: brand magenta/pink, bold ── */
body[data-chat-variant="bkash"]{
    --primary:#e2136e;--primary-2:#b30f57;--accent:#e2136e;
    --user-bubble:#e2136e;
}
body[data-chat-variant="bkash"] .chat-launcher{
    background:linear-gradient(135deg,#e2136e,#b30f57)
}
body[data-chat-variant="bkash"] .chat-panel .chat-header{
    background:linear-gradient(135deg,#e2136e,#a50d50)
}
body[data-chat-variant="bkash"] .chat-panel .bubble{border-radius:14px}
body[data-chat-variant="bkash"] .chat-panel .bubble.user{background:#e2136e;color:#fff}
body[data-chat-variant="bkash"] .chat-panel .chat-messages{background:#fdf0f6}
[data-theme="dark"] body[data-chat-variant="bkash"] .chat-panel .chat-messages{background:#25121b}

/* ── Namecheap: corporate orange header, blue accent, squared ── */
body[data-chat-variant="namecheap"]{
    --primary:#ff6b00;--primary-2:#d94f00;--accent:#0a68f5;
    --user-bubble:#0a68f5;
}
body[data-chat-variant="namecheap"] .chat-launcher{
    background:linear-gradient(135deg,#ff6b00,#d94f00)
}
body[data-chat-variant="namecheap"] .chat-panel .chat-header{
    background:#ff6b00;color:#fff
}
body[data-chat-variant="namecheap"] .chat-panel .bubble{border-radius:8px}
body[data-chat-variant="namecheap"] .chat-panel .bubble.user{background:#0a68f5;color:#fff}
body[data-chat-variant="namecheap"] .chat-panel .bubble.admin{
    background:#f1f3f6;color:#1b2733;border:1px solid #e0e4ea
}
[data-theme="dark"] body[data-chat-variant="namecheap"] .chat-panel .bubble.admin{
    background:#20262e;color:#e6ebf1;border-color:#333b45
}
body[data-chat-variant="namecheap"] .chat-panel .chat-messages{background:#f6f8fa}
[data-theme="dark"] body[data-chat-variant="namecheap"] .chat-panel .chat-messages{background:#12171d}

/* ══════════════════════════════════════════════════════════════
 *  MODERN COMPOSER REDESIGN (user chat input) — CSS only.
 *  Groups the input + leading/trailing buttons into one rounded
 *  "pill" surface with a glowing focus ring, and a separate
 *  circular gradient Send button. Targets existing markup classes,
 *  so emoji / attach / voice / view-once JS stays untouched.
 *  Placed last so it wins over earlier .chat-reply rules.
 * ══════════════════════════════════════════════════════════════ */
.chat-panel .chat-reply{
    display:flex !important;align-items:flex-end;gap:.5rem;
    grid-template-columns:none !important;
    padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom,0px));
    background:var(--surface);border-top:1px solid var(--border);position:relative
}
/* The pill: emoji + attach + view-once + textarea live inside one
 * rounded surface. We can't add a wrapper div (no markup change), so
 * we style .chat-reply children and let the pill be a flex row using
 * the textarea as the flexible middle. */
.chat-panel .chat-reply .emoji-trigger,
.chat-panel .chat-reply .attach-trigger,
.chat-panel .chat-reply .vo-trigger,
.chat-panel .chat-reply .voice-trigger{
    width:40px;height:40px;border-radius:50%;border:none;background:transparent;
    color:var(--muted);display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:1.15rem;flex:0 0 auto;
    transition:background .15s,color .15s,transform .12s
}
.chat-panel .chat-reply .emoji-trigger:hover,
.chat-panel .chat-reply .attach-trigger:hover,
.chat-panel .chat-reply .vo-trigger:hover,
.chat-panel .chat-reply .voice-trigger:hover{
    background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)
}
.chat-panel .chat-reply .emoji-trigger:active,
.chat-panel .chat-reply .attach-trigger:active,
.chat-panel .chat-reply .vo-trigger:active,
.chat-panel .chat-reply .voice-trigger:active{transform:scale(.9)}

/* Textarea → the flexible middle, rounded, subtle fill, glowing focus. */
.chat-panel .chat-reply textarea{
    flex:1 1 auto;min-width:0;grid-column:auto !important;
    min-height:44px;max-height:140px;
    padding:.7rem 1rem;line-height:1.4;font-size:16px;
    background:var(--bg);color:var(--text);
    border:1.5px solid var(--border);border-radius:22px;
    resize:none;outline:none;
    transition:border-color .16s,box-shadow .16s,background .16s
}
.chat-panel .chat-reply textarea::placeholder{color:var(--muted);opacity:.8}
.chat-panel .chat-reply textarea:focus{
    border-color:var(--primary);background:var(--surface);
    box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent)
}

/* View-once armed state — clearly highlighted. */
.chat-panel .chat-reply .vo-trigger.is-armed{
    background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff
}
.chat-panel .chat-reply .vo-trigger .vo-pill{
    position:absolute;transform:translate(14px,-12px);
    font-size:.6rem;font-weight:800;background:var(--primary-2);color:#fff;
    padding:.05rem .3rem;border-radius:999px;box-shadow:0 0 0 1.5px var(--surface)
}

/* Voice recording pulse. */
.chat-panel .chat-reply .voice-trigger.is-recording{
    background:#dc2626;color:#fff;animation:pulse 1s ease-in-out infinite
}

/* Send — separate circular gradient button, lifts on hover. */
.chat-panel .chat-reply .chat-send{
    width:46px;height:46px;border-radius:50%;border:none;flex:0 0 auto;cursor:pointer;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:1.05rem;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px -6px color-mix(in srgb,var(--primary) 65%,transparent);
    transition:transform .14s ease,box-shadow .2s,filter .15s,opacity .15s
}
.chat-panel .chat-reply .chat-send:hover:not(:disabled){transform:translateY(-2px) scale(1.05);filter:brightness(1.07)}
.chat-panel .chat-reply .chat-send:active:not(:disabled){transform:translateY(0) scale(.94)}
.chat-panel .chat-reply .chat-send:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

@media (max-width:540px){
    .chat-panel .chat-reply{gap:.35rem;
    /* padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom,0px)); */}
    .chat-panel .chat-reply .emoji-trigger,
    .chat-panel .chat-reply .attach-trigger,
    .chat-panel .chat-reply .vo-trigger,
    .chat-panel .chat-reply .voice-trigger{width:38px;height:38px;font-size:1.1rem}
    .chat-panel .chat-reply .chat-send{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
    .chat-panel .chat-reply .chat-send,
    .chat-panel .chat-reply .voice-trigger.is-recording{transition:none;animation:none}
}

/* While the user is composing, keep the header ultra-slim — the
 * subtitle collapses so focus stays on typing.  Toggled by JS via
 * .typing-active on the header (.is-composing already exists on the
 * panel for the send "ready" pulse; both hooks are covered). */
.chat-panel.is-composing .chat-header,
.chat-panel .chat-header.typing-active{
    min-height:50px;padding:.42rem .95rem
}
.chat-panel.is-composing .chat-header .avatar,
.chat-panel .chat-header.typing-active .avatar{width:30px;height:30px;font-size:.8rem}
.chat-panel.is-composing .chat-header .subtitle,
.chat-panel .chat-header.typing-active .subtitle{display:none}
.chat-panel.is-composing .chat-header .title,
.chat-panel .chat-header.typing-active .title{font-size:.9rem}
@media (max-width:540px){
    .chat-panel.is-composing .chat-header,
    .chat-panel .chat-header.typing-active{min-height:48px;padding:.38rem .8rem}
}

/* ── Compact header: Admin name + "last seen" on the SAME row ─
 * The old layout stacked .title (Admin) above .subtitle (last
 * seen / online / typing…) which left a vertical gap and made the
 * header taller than it needs to be.  Now .info is a flex row so
 * name and presence sit side-by-side, with a dot separator.  On
 * very narrow screens the subtitle wraps under the name (flex-wrap)
 * so nothing ever overflows. */
.chat-panel .chat-header .info{
    display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
    min-width:0;
}
.chat-panel .chat-header .info .title{
    display:inline-flex;align-items:center;gap:.4rem;min-width:0;
}
.chat-panel .chat-header .info .subtitle{
    display:inline-flex;align-items:center;gap:.3rem;
    margin-top:0;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-panel .chat-header .info .subtitle::before{
    content:"·";opacity:.65;margin-right:.05rem
}
/* Keep the header one line tall when the user is composing —
 * subtitle still hides, name stays put. */
.chat-panel.is-composing .chat-header .info,
.chat-panel .chat-header.typing-active .info{
    flex-wrap:nowrap
}
@media (max-width:540px){
    .chat-panel .chat-header .info{gap:.4rem}
    .chat-panel .chat-header .info .subtitle{
        max-width:calc(100vw - 170px);
        font-size:.7rem
    }
}
/* Verification request modal */
.success-modal{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;
    padding:1rem;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.success-card{position:relative;width:min(420px,100%);padding:1.5rem;border-radius:20px;
    background:var(--surface,#fff);color:var(--text,#111);box-shadow:0 20px 60px rgba(0,0,0,.3);
    text-align:center}
.success-close{position:absolute;top:.6rem;right:.7rem;border:0;background:transparent;
    color:inherit;font-size:1.5rem;cursor:pointer}
.success-icon{width:52px;height:52px;margin:0 auto .75rem;border-radius:50%;display:grid;place-items:center;
    background:#e8f5ee;color:#1f7a45;font-size:1.4rem}
.success-card h3{margin:0 0 .5rem;font-size:1.15rem}
.success-card p{margin:0;color:var(--muted,#65676b);line-height:1.55}
.success-btn{border:0;border-radius:10px;padding:.65rem 1rem;cursor:pointer;font:inherit;
    background:#1f7a45;color:#fff}
.verify-cancel{background:#e5e7eb;color:#1f2937}