#salha {
    --s-bg: rgba(14, 20, 32, 0.92);
    --s-bg-solid: #101722;
    --s-bg-2: rgba(255, 255, 255, 0.05);
    --s-text: #f4f7fb;
    --s-muted: #9aa8b8;
    --s-line: rgba(255, 255, 255, 0.1);
    --s-accent: #e7eef6;
    --s-accent-ink: #101722;
    --s-user: linear-gradient(180deg, #f2f6fb, #d5e0ec);
    --s-shadow: 0 30px 80px rgba(2, 6, 14, 0.55);
    --s-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 70;
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
    color: var(--s-text);
    line-height: 1.5;
}

html[data-theme="light"] #salha {
    --s-bg: rgba(255, 255, 255, 0.94);
    --s-bg-solid: #f6f8fb;
    --s-bg-2: rgba(20, 32, 48, 0.05);
    --s-text: #141b24;
    --s-muted: #5d6b7c;
    --s-line: rgba(20, 28, 40, 0.1);
    --s-accent: #24384c;
    --s-accent-ink: #f7f9fc;
    --s-user: linear-gradient(180deg, #31485f, #24384c);
    --s-shadow: 0 28px 70px rgba(20, 32, 48, 0.18);
}

#salha, #salha * { box-sizing: border-box; }
#salha button, #salha input, #salha textarea { font: inherit; color: inherit; }

#salha .salha-launch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 6px 18px 6px 6px;
    border: 1px solid var(--s-line);
    border-radius: 999px;
    background: var(--s-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--s-text);
    box-shadow: var(--s-shadow);
    cursor: pointer;
}
#salha:not(.is-shown) {
    visibility: hidden;
    pointer-events: none;
}
#salha.is-shown .salha-launch {
    animation: salha-pop 0.7s var(--s-ease) both;
}

#salha .salha-launch::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 1px solid var(--s-line);
    animation: salha-ring 2.4s var(--s-ease) 0.8s infinite;
    pointer-events: none;
}

#salha .salha-mark {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--s-accent);
    color: var(--s-accent-ink);
    font-family: Fraunces, Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    flex: none;
}

#salha .salha-launch-copy { text-align: left; }
#salha .salha-launch-copy strong { display: block; font-size: 15px; letter-spacing: -0.02em; }
#salha .salha-launch-copy small { display: block; color: var(--s-muted); font-size: 11px; font-weight: 650; }

#salha .salha-teaser {
    position: absolute;
    right: 0;
    bottom: 74px;
    width: min(280px, calc(100vw - 36px));
    padding: 14px 16px 12px;
    border-radius: 18px;
    border: 1px solid var(--s-line);
    background: var(--s-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--s-shadow);
    transform-origin: 90% 100%;
    animation: salha-rise 0.55s var(--s-ease) 0.9s both;
}

#salha .salha-teaser p { margin: 0 28px 10px 0; font-size: 13.5px; }
#salha .salha-teaser button.salha-teaser-x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: var(--s-muted);
}
#salha .salha-teaser .salha-open-now {
    border: 0;
    border-radius: 999px;
    padding: 7px 12px;
    background: var(--s-accent);
    color: var(--s-accent-ink);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

#salha .salha-panel {
    display: none;
    width: min(420px, calc(100vw - 28px));
    height: min(680px, calc(100vh - 36px));
    background:
        radial-gradient(420px 180px at 100% 0%, rgba(200, 214, 228, 0.16), transparent 60%),
        var(--s-bg);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--s-line);
    border-radius: 28px;
    box-shadow: var(--s-shadow);
    overflow: hidden;
    flex-direction: column;
    transform-origin: 100% 100%;
}

#salha.open .salha-launch,
#salha.open .salha-teaser { display: none; }
#salha.open .salha-panel {
    display: flex;
    animation: salha-rise 0.48s var(--s-ease) both;
}

#salha .salha-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--s-line);
}

#salha .salha-head h2 {
    margin: 0;
    font-family: Fraunces, Georgia, serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
}

#salha .salha-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--s-muted);
    font-size: 12px;
    font-weight: 650;
}

#salha .salha-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7dcea0;
    box-shadow: 0 0 0 4px rgba(125, 206, 160, 0.16);
}

#salha .salha-close {
    margin-left: auto;
    width: 38px;
    height: 38px;
    border: 1px solid var(--s-line);
    border-radius: 12px;
    background: var(--s-bg-2);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

#salha .salha-log {
    flex: 1;
    overflow: auto;
    padding: 18px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

#salha .salha-row { display: flex; gap: 8px; align-items: flex-end; animation: salha-msg 0.4s var(--s-ease) both; }
#salha .salha-row.user { justify-content: flex-end; }
#salha .salha-row .mini {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--s-accent);
    color: var(--s-accent-ink);
    font-family: Fraunces, Georgia, serif;
    font-size: 13px;
    flex: none;
}

#salha .salha-msg {
    max-width: min(320px, 86%);
    padding: 12px 14px;
    border-radius: 18px;
    font-size: 14px;
    white-space: pre-wrap;
}

#salha .salha-row.bot .salha-msg {
    background: var(--s-bg-2);
    border: 1px solid var(--s-line);
    border-bottom-left-radius: 6px;
}

#salha .salha-row.user .salha-msg {
    background: var(--s-user);
    color: var(--s-accent-ink);
    border-bottom-right-radius: 6px;
}

#salha .salha-msg a { color: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
#salha .salha-msg strong { font-weight: 750; }

#salha .salha-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
#salha .salha-typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    animation: salha-dot 1s infinite;
}
#salha .salha-typing i:nth-child(2) { animation-delay: 0.15s; }
#salha .salha-typing i:nth-child(3) { animation-delay: 0.3s; }

#salha .salha-chips {
    display: flex;
    gap: 8px;
    padding: 4px 16px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
#salha .salha-chips::-webkit-scrollbar { display: none; }
#salha .salha-chips button {
    flex: none;
    border: 1px solid var(--s-line);
    background: var(--s-bg-2);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s var(--s-ease), background 0.2s;
}
#salha .salha-chips button:hover { transform: translateY(-1px); background: transparent; }

#salha form {
    display: flex;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 6px 6px 6px 14px;
    border: 1px solid var(--s-line);
    border-radius: 18px;
    background: var(--s-bg-solid);
}

#salha input[type="text"] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 0;
    outline: none;
}

#salha button[type="submit"] {
    border: 0;
    border-radius: 14px;
    padding: 0 16px;
    height: 40px;
    background: var(--s-accent);
    color: var(--s-accent-ink);
    font-weight: 750;
    cursor: pointer;
}

@keyframes salha-pop {
    from { opacity: 0; transform: translateY(18px) scale(0.86); }
    to { opacity: 1; transform: none; }
}
@keyframes salha-rise {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes salha-msg {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes salha-ring {
    0% { transform: scale(0.96); opacity: 0.55; }
    100% { transform: scale(1.12); opacity: 0; }
}
@keyframes salha-dot {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40% { transform: translateY(-3px); opacity: 1; }
}

@media (max-width: 860px) {
    #salha { right: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); }
    #salha .salha-panel {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(84px + env(safe-area-inset-bottom));
        width: auto;
        height: min(74vh, 640px);
        transform-origin: 50% 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #salha .salha-launch,
    #salha .salha-teaser,
    #salha.open .salha-panel,
    #salha .salha-row,
    #salha .salha-launch::after,
    #salha .salha-typing i { animation: none; }
}