/* ============================================================
 *  Extra · index.css — public landing + floating chat widget
 *  Pairs with index.php / index.js
 *  ============================================================ */
*,*::before,*::after{box-sizing:border-box}
:root{
    --bg:#f7f4ff;
    --surface:#ffffff;
    --text:#1f1147;
    --muted:#6b7280;
    --border:#e6e1f4;
    --primary:#3a0ca3;
    --primary-2:#7209b7;
    --accent:#06b6d4;
    --pink:#ec4899;
    --shadow:0 10px 30px rgba(58,12,163,.12);
    --shadow-lg:0 22px 48px rgba(58,12,163,.18);
    --radius:14px;
    --user-bubble:#3a0ca3;
    --admin-bubble:#ffffff;
}
[data-theme="dark"]{
    --bg:#0b0820;
    --surface:#161034;
    --text:#f4f1ff;
    --muted:#a3a0c2;
    --border:#241a4d;
    --primary:#9d6cff;
    --primary-2:#ec4899;
    --shadow:0 12px 30px rgba(0,0,0,.55);
    --shadow-lg:0 22px 48px rgba(0,0,0,.65);
    --user-bubble:#7209b7;
    --admin-bubble:#241a4d;
}
@media (prefers-color-scheme: dark){
    [data-theme="auto"]{
        --bg:#0b0820;--surface:#161034;--text:#f4f1ff;--muted:#a3a0c2;--border:#241a4d;
        --primary:#9d6cff;--primary-2:#ec4899;--shadow:0 12px 30px rgba(0,0,0,.55);
        --shadow-lg:0 22px 48px rgba(0,0,0,.65);--user-bubble:#7209b7;--admin-bubble:#241a4d;
    }
}
[hidden]{display:none!important}

/* 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}
.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-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 .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 span{display:none}
.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)}

/* Chat header */
.chat-panel .chat-header{
    display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;
    flex-shrink:0
}
.chat-panel .chat-header .avatar{
    width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);
    display:inline-flex;align-items:center;justify-content:center;font-size:1rem
}
.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}
.chat-panel .chat-header .subtitle{font-size:.78rem;opacity:.85;margin-top:1px}
.chat-close{
    background:rgba(255,255,255,.18);border:none;color:#fff;width:30px;height:30px;
    border-radius:50%;font-size:1.4rem;line-height:1;
}
.chat-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}

/* 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 */
.chat-reply{
    display:flex;align-items:flex-end;gap:.3rem;padding:.6rem .7rem;
    background:var(--surface);border-top:1px solid var(--border);position:relative
}
.chat-reply textarea{
    flex:1;padding:.5rem .7rem;border:1px solid var(--border);border-radius:18px;
    background:var(--bg);color:var(--text);resize:none;font:inherit;
    max-height:120px;line-height:1.4;outline:none
}
.chat-reply textarea:focus{border-color:var(--primary)}
.chat-reply .emoji-trigger,
.chat-reply .attach-trigger,
.chat-reply .voice-trigger,
.chat-reply .chat-send{
    width:36px;height:36px;border-radius:50%;border:none;background:var(--bg);color:var(--text);
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0
}
.chat-reply .emoji-trigger{background:transparent;font-size:1.2rem}
.chat-reply .attach-trigger:hover,
.chat-reply .voice-trigger:hover{background:var(--border)}
.chat-reply .voice-trigger.is-recording{background:#dc2626;color:#fff;animation:pulse 1s ease-in-out infinite}
.chat-reply .chat-send{background:linear-gradient(90deg,var(--primary),var(--primary-2));color:#fff}
.chat-reply .chat-send:disabled{opacity:.5;cursor:not-allowed}

/* Attach menu (popover above the paperclip) */
.attach-menu{
    position:absolute;bottom:calc(100% + 6px);left:.7rem;background:var(--surface);
    border:1px solid var(--border);border-radius:12px;padding:.3rem;
    box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:2px;z-index:5
}
.attach-menu button{
    background:transparent;border:none;color:var(--text);text-align:left;
    padding:.5rem .8rem;border-radius:8px;display:flex;align-items:center;gap:.55rem;font-size:.9rem
}
.attach-menu button:hover{background:var(--bg)}

/* Emoji picker */
.emoji-picker{
    position:absolute;bottom:calc(100% + 6px);left:.7rem;width:280px;max-height:280px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;z-index:5
}
.emoji-tabs{display:flex;gap:.1rem;padding:.3rem;border-bottom:1px solid var(--border);overflow-x:auto}
.emoji-tabs button{background:transparent;border:none;padding:.3rem .5rem;border-radius:6px;font-size:1.05rem}
.emoji-tabs button.is-active{background:var(--bg)}
.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:.3rem;font-size:1.15rem;border-radius:6px}
.emoji-grid button:hover{background:var(--bg)}

/* 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 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}

/* ────────────────────────────────────────────────────────────
   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 .55rem;gap:.25rem;
        padding-bottom:max(.5rem,env(safe-area-inset-bottom))}
    .chat-reply textarea{font-size:16px;padding:.45rem .65rem;min-height:38px}
    .chat-reply .emoji-trigger,
    .chat-reply .attach-trigger,
    .chat-reply .voice-trigger,
    .chat-reply .chat-send{width:36px;height:36px;flex-shrink:0}
    .emoji-picker{left:.45rem;width:calc(100vw - 28px);max-width:320px}
    .emoji-grid{grid-template-columns:repeat(7,1fr)}
    .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:380px){
    .hero-prompt{font-size:clamp(1.25rem,7vw,1.7rem)}
    .hero-sub{font-size:.88rem}
    .chat-panel{bottom:70px;right:4px;left:4px;
        height:calc(100dvh - 84px);max-height:calc(100dvh - 84px)}
    .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}
}
/* Larger tap targets on coarse pointers. */
@media (pointer:coarse){
    .chat-reply .emoji-trigger,
    .chat-reply .attach-trigger,
    .chat-reply .voice-trigger,
    .chat-reply .chat-send{width:40px;height:40px}
}
/* 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)}

/* 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)}

/* Overflow popover panel — sits as a flex item below the header
   (the panel uses overflow:hidden so absolute positioning would clip). */
.chat-overflow{
    flex:0 0 auto;
    background:var(--surface);color:var(--text);
    border-bottom:1px solid var(--border);
    box-shadow:0 6px 14px rgba(0,0,0,.10);
    z-index:75;
    max-height:55vh;overflow-y:auto;
    animation:overflow-slide .15s ease-out
}
@keyframes overflow-slide{from{transform:translateY(-6px);opacity:0;max-height:0}to{transform:translateY(0);opacity:1;max-height:55vh}}
.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 kebab menu. */
.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
}
@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,
.chat-overflow::-webkit-scrollbar{width:6px}
.chat-messages::-webkit-scrollbar-thumb,
.chat-overflow::-webkit-scrollbar-thumb{
    background:var(--border);border-radius:6px
}
.chat-messages::-webkit-scrollbar-thumb:hover,
.chat-overflow::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.chat-messages,.chat-overflow{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"] .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"] .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)
}

/* Overflow / settings popover in dark. */
[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"] .user-status-box,
[data-theme="dark"] .user-name-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;
    background:linear-gradient(90deg,var(--primary),var(--primary-2));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    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 .htc-step{
    background:color-mix(in oklab, var(--surface) 80%, var(--bg))
}
[data-theme="dark"] .how-to-chat .htc-step kbd{
    background:var(--bg);color:var(--text);border-color:var(--border)
}

/* ════════════════════════════════════════════════════════════
 *  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:column
}
[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 .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-overflow{
    background:var(--ep-color-background-neutral-base);
    border-bottom:1px solid var(--ep-color-border-neutral-subtle)
}
.overflow-section{
    border-bottom-color:var(--ep-color-border-neutral-subtle)
}
.overflow-title{
    color:var(--ep-color-text-neutral-on-minimal-variant)
}
.user-name-box,.user-status-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{
    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{
    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{
    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,
.chat-panel .chat-overflow::-webkit-scrollbar{width:6px}
.chat-panel .chat-messages::-webkit-scrollbar-thumb,
.chat-panel .chat-overflow::-webkit-scrollbar-thumb{
    background:var(--ep-color-border-neutral-moderate);
    border-radius:6px
}
.chat-panel .chat-messages::-webkit-scrollbar-thumb:hover,
.chat-panel .chat-overflow::-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:#eef7f1;
    --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)
}
.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}

.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:74px;padding:.82rem .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:42px;height:42px;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:1rem;letter-spacing:-.02em}
.chat-panel .chat-header .subtitle{font-size:.76rem;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(0,0,0,.035) 1.5px,transparent 1.5px),
                     radial-gradient(circle at 64px 72px,rgba(0,168,132,.08) 2px,transparent 2px),
                     linear-gradient(135deg,rgba(255,255,255,.2),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%)
}
.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}
.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){
    .chat-panel{inset:auto 0 0 0 !important;width:100vw;height:100dvh;max-height:100dvh;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:70px;padding:.72rem .8rem}
    .chat-panel .chat-header .avatar{width:38px;height:38px}
    .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}
    .chat-panel .chat-reply textarea{min-height:40px;padding:.58rem .78rem}
    .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}
}