.lumi-root {
    position: fixed; right: 22px; bottom: 22px; z-index: 12000;
    font-family: Inter, system-ui, sans-serif;
    --lumi-accent: #ff7a18;
    --lumi-accent-2: #ffc837;
    --lumi-panel: #101017;
    --lumi-line: rgba(255, 255, 255, 0.09);
}

/* Launcher */
.lumi-toggle {
    position: relative; width: 62px; height: 62px; border: 0; border-radius: 50%; cursor: pointer;
    background: linear-gradient(135deg, var(--lumi-accent), var(--lumi-accent-2)); color: #14100a; font-size: 23px;
    box-shadow: 0 16px 40px rgba(255, 122, 24, 0.35);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.lumi-toggle::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px solid rgba(255, 122, 24, 0.5); animation: lumiRing 2.6s ease-out infinite;
}
.lumi-toggle:hover { transform: translateY(-3px) scale(1.05); }
.lumi-root.is-open .lumi-toggle { transform: rotate(90deg) scale(0.92); }
.lumi-root.is-open .lumi-toggle::after { display: none; }
@keyframes lumiRing {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.35); opacity: 0; }
}
.lumi-badge {
    position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 10px;
    background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700;
}

/* Teaser bubble */
.lumi-teaser {
    position: absolute; right: 0; bottom: 78px; width: 250px; padding: 14px 30px 14px 16px;
    background: #fff; color: #15151c; border-radius: 16px 16px 4px 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); font-size: 13.5px; line-height: 1.5;
    animation: lumiPop 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}
.lumi-teaser p { margin: 0; }
.lumi-teaser-close {
    position: absolute; top: 6px; right: 8px; border: 0; background: none;
    font-size: 17px; line-height: 1; color: #8b8b96; cursor: pointer;
}
@keyframes lumiPop {
    from { opacity: 0; transform: translateY(12px) scale(0.94); }
}

/* Panel */
.lumi-panel {
    position: absolute; right: 0; bottom: 78px; width: min(392px, calc(100vw - 28px));
    height: min(590px, calc(100vh - 130px)); display: flex; flex-direction: column;
    background: var(--lumi-panel); border: 1px solid var(--lumi-line); border-radius: 22px;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.55); overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.97);
    transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
}
.lumi-root.is-open .lumi-panel { opacity: 1; visibility: visible; transform: none; }

.lumi-head {
    display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
    background: linear-gradient(135deg, rgba(255, 122, 24, 0.22), rgba(255, 200, 55, 0.06));
    border-bottom: 1px solid var(--lumi-line);
}
.lumi-avatar {
    width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--lumi-accent), var(--lumi-accent-2)); color: #14100a; font-size: 16px;
}
.lumi-who { flex: 1; min-width: 0; }
.lumi-who strong { display: block; color: #fff; font-size: 15px; }
.lumi-status { display: flex; align-items: center; gap: 6px; color: #a9a9b6; font-size: 11.5px; }
.lumi-status i { width: 7px; height: 7px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.6); animation: lumiLive 2s infinite; }
@keyframes lumiLive { 70% { box-shadow: 0 0 0 7px rgba(53, 208, 127, 0); } }
.lumi-icon-btn {
    width: 30px; height: 30px; flex: none; border: 1px solid var(--lumi-line); border-radius: 9px;
    background: rgba(255, 255, 255, 0.04); color: #c9c9d4; cursor: pointer; font-size: 12px;
    transition: background 0.2s, color 0.2s;
}
.lumi-icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Messages */
.lumi-log {
    flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column;
    align-items: flex-start; gap: 10px; scrollbar-width: thin;
}
.lumi-log::-webkit-scrollbar { width: 6px; }
.lumi-log::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 3px; }
.lumi-msg {
    max-width: 86%; padding: 11px 14px; border-radius: 16px 16px 16px 5px; line-height: 1.55;
    font-size: 14px; color: #e9e9f0; background: #21212b;
    animation: lumiIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-wrap: anywhere;
}
.lumi-msg.user {
    align-self: flex-end; border-radius: 16px 16px 5px 16px; color: #16100a;
    background: linear-gradient(135deg, var(--lumi-accent), var(--lumi-accent-2));
}
.lumi-msg a { color: inherit; text-decoration: underline; }
.lumi-msg strong { color: #fff; }
.lumi-msg.user strong { color: inherit; }
@keyframes lumiIn { from { opacity: 0; transform: translateY(8px); } }

.lumi-typing { display: flex; gap: 4px; padding: 14px; }
.lumi-typing span {
    width: 7px; height: 7px; border-radius: 50%; background: #7c7c8c;
    animation: lumiDot 1.1s infinite ease-in-out;
}
.lumi-typing span:nth-child(2) { animation-delay: 0.15s; }
.lumi-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lumiDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Action buttons attached to a reply */
.lumi-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.lumi-actions a, .lumi-actions button {
    border: 1px solid rgba(255, 122, 24, 0.4); border-radius: 999px; padding: 7px 13px;
    background: rgba(255, 122, 24, 0.1); color: #ffb066; font-size: 12.5px; font-weight: 600;
    text-decoration: none; cursor: pointer; font-family: inherit; transition: background 0.2s, color 0.2s;
}
.lumi-actions a:hover, .lumi-actions button:hover { background: rgba(255, 122, 24, 0.25); color: #fff; }

/* Quick replies */
.lumi-chips {
    display: flex; gap: 7px; padding: 0 14px 12px; overflow-x: auto; scrollbar-width: none;
}
.lumi-chips::-webkit-scrollbar { display: none; }
.lumi-chips button {
    flex: none; border: 1px solid var(--lumi-line); border-radius: 999px; padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04); color: #d6d6e0; font-size: 12.5px; cursor: pointer;
    font-family: inherit; white-space: nowrap; transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.lumi-chips button:hover {
    background: rgba(255, 122, 24, 0.16); border-color: rgba(255, 122, 24, 0.45);
    color: #fff; transform: translateY(-1px);
}

/* Inline lead form */
.lumi-lead-form {
    display: grid; gap: 8px; padding: 14px; margin: 0 14px 12px;
    background: rgba(255, 122, 24, 0.07); border: 1px solid rgba(255, 122, 24, 0.28); border-radius: 16px;
    animation: lumiIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.lumi-lead-title { margin: 0; color: #fff; font-size: 13px; font-weight: 700; }
.lumi-lead-form input {
    border: 1px solid var(--lumi-line); background: #0b0b10; color: #fff;
    border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13.5px;
}
.lumi-lead-form input:focus { outline: none; border-color: rgba(255, 122, 24, 0.6); }
.lumi-lead-actions { display: flex; gap: 8px; }
.lumi-lead-actions button {
    flex: 1; border: 0; border-radius: 10px; padding: 10px; font: inherit; font-weight: 700;
    font-size: 13px; cursor: pointer; background: linear-gradient(135deg, var(--lumi-accent), var(--lumi-accent-2)); color: #16100a;
}
.lumi-lead-actions .lumi-lead-skip {
    flex: 0 0 84px; background: transparent; border: 1px solid var(--lumi-line); color: #9d9daa; font-weight: 500;
}

/* Composer */
.lumi-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--lumi-line); background: rgba(255, 255, 255, 0.02); }
.lumi-form input {
    flex: 1; min-width: 0; border: 1px solid var(--lumi-line); background: #0b0b10; color: #fff;
    border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.lumi-form input:focus { outline: none; border-color: rgba(255, 122, 24, 0.55); box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.12); }
.lumi-form button {
    width: 46px; flex: none; border: 0; border-radius: 12px; cursor: pointer; color: #16100a; font-size: 15px;
    background: linear-gradient(135deg, var(--lumi-accent), var(--lumi-accent-2));
    transition: transform 0.2s;
}
.lumi-form button:hover { transform: scale(1.06); }

@media (max-width: 700px) {
    .lumi-root { right: 12px; bottom: 12px; }
    .lumi-panel {
        position: fixed; inset: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0;
    }
    .lumi-teaser { width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    .lumi-toggle::after, .lumi-status i, .lumi-typing span { animation: none; }
    .lumi-panel, .lumi-msg, .lumi-teaser { animation: none; transition: opacity 0.2s ease, visibility 0.2s; }
}

/* ============================================
   The hidden attribute must win over the display rules above.
   .lumi-lead-form/.lumi-chips/.lumi-badge each set display, which has
   the same specificity as the UA sheet's [hidden]{display:none} and so
   beat it on source order — leaving el.hidden = true visible on screen.
   ============================================ */
.lumi-root [hidden],
.lumi-root[hidden] { display: none !important; }