#weboo-chat-root, #weboo-chat-root * { box-sizing: border-box; }
#weboo-chat-root {
    --wc-pink: #ff2d55;
    --wc-bg: #111116;
    --wc-panel: #19191f;
    --wc-card: #222229;
    --wc-line: rgba(255,255,255,.08);
    --wc-muted: #9696a3;
    --wc-text: #f4f4f7;
    font-family: inherit;
    position: relative;
    z-index: 99990;
}
#weboo-chat-root button, #weboo-chat-root input, #weboo-chat-root textarea { font: inherit; }
#weboo-chat-root .wc-launcher {
    position: fixed; right: 22px; bottom: 22px; z-index: 99991;
    display: flex; align-items: center; gap: 10px;
    border: 0; border-radius: 999px; padding: 13px 17px;
    color: #fff; background: linear-gradient(135deg,#ff2d55,#e91e63);
    box-shadow: 0 10px 35px rgba(255,45,85,.32);
    cursor: pointer; font-weight: 750; transition: transform .2s, opacity .2s;
}
#weboo-chat-root .wc-launcher:hover { transform: translateY(-3px); }
#weboo-chat-root .wc-launcher-icon { font-size: 19px; }
#weboo-chat-root .wc-launcher-count {
    display: none; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 20px; background: #fff; color: var(--wc-pink);
    font-size: 11px; line-height: 19px; text-align: center;
}
#weboo-chat-root .wc-count-visible { display: inline-block; }
#weboo-chat-root .wc-launcher-hidden { display: none; }
#weboo-chat-root .wc-panel {
    position: fixed; right: 22px; bottom: 22px; z-index: 99992;
    width: 355px; height: 485px; max-height: min(650px, calc(100dvh - 35px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--wc-bg); color: var(--wc-text);
    border: 1px solid rgba(255,255,255,.1); border-radius: 19px;
    box-shadow: 0 20px 70px rgba(0,0,0,.48);
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98);
    transform-origin: bottom right; transition: opacity .2s, transform .2s, visibility .2s;
}
#weboo-chat-root .wc-panel.wc-open {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
#weboo-chat-root .wc-header {
    min-height: 65px; padding: 11px 13px; display: flex; align-items: center;
    justify-content: space-between; background: #1c1c23; border-bottom: 1px solid var(--wc-line);
}
#weboo-chat-root .wc-header-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
#weboo-chat-root .wc-brand-mark {
    width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center;
    border-radius: 13px; color: #fff; font-weight: 900; font-size: 19px;
    background: linear-gradient(135deg,#ff2d55,#b71c52);
    box-shadow: 0 5px 16px rgba(255,45,85,.24);
}
#weboo-chat-root .wc-heading { display: flex; flex-direction: column; gap: 4px; }
#weboo-chat-root .wc-heading strong { font-size: 14px; letter-spacing: .1px; }
#weboo-chat-root .wc-heading span { color: var(--wc-muted); font-size: 11px; }
#weboo-chat-root .wc-live-dot, #weboo-chat-root .wc-mini-dot, #weboo-chat-root .wc-user-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #35d48a; box-shadow: 0 0 0 3px rgba(53,212,138,.1);
}
#weboo-chat-root .wc-header-actions { display: flex; gap: 5px; }
#weboo-chat-root .wc-icon-btn {
    width: 30px; height: 30px; border: 0; border-radius: 9px;
    background: rgba(255,255,255,.06); color: #c9c9d2; cursor: pointer; font-size: 20px;
}
#weboo-chat-root .wc-icon-btn:hover { background: rgba(255,255,255,.13); color: #fff; }
#weboo-chat-root .wc-chat-content { display: flex; flex: 1; min-height: 0; flex-direction: column; }
#weboo-chat-root .wc-toolbar {
    height: 39px; flex: 0 0 39px; padding: 0 14px; display: flex;
    align-items: center; justify-content: space-between; border-bottom: 1px solid var(--wc-line);
}
#weboo-chat-root .wc-toolbar-title { font-size: 11px; color: #c9c9d1; font-weight: 750; }
#weboo-chat-root .wc-users-toggle {
    border: 0; background: transparent; color: #aaaab5; font-size: 10px; cursor: pointer;
}
#weboo-chat-root .wc-mini-dot { width: 6px; height: 6px; margin-right: 4px; }
#weboo-chat-root .wc-users {
    max-height: 105px; overflow-y: auto; padding: 7px 13px;
    background: #17171d; border-bottom: 1px solid var(--wc-line);
}
#weboo-chat-root .wc-user-row { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 11px; }
#weboo-chat-root .wc-user-row strong { font-weight: 650; }
#weboo-chat-root .wc-user-dot { width: 6px; height: 6px; }
#weboo-chat-root .wc-messages {
    flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 9px;
    display: flex; flex-direction: column; gap: 11px; scroll-behavior: smooth;
}
#weboo-chat-root .wc-messages::-webkit-scrollbar, #weboo-chat-root .wc-users::-webkit-scrollbar { width: 5px; }
#weboo-chat-root .wc-messages::-webkit-scrollbar-thumb, #weboo-chat-root .wc-users::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.14); border-radius: 10px;
}
#weboo-chat-root .wc-message { padding: 9px 10px; background: var(--wc-panel); border: 1px solid var(--wc-line); border-radius: 12px; transition: background .25s, border-color .25s; }
#weboo-chat-root .wc-message-highlight { background: rgba(255,45,85,.13); border-color: rgba(255,45,85,.55); }
#weboo-chat-root .wc-message-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
#weboo-chat-root .wc-message-name { color: #f4f4f7; font-size: 11px; font-weight: 800; }
#weboo-chat-root .wc-message-time { margin-left: auto; color: #777783; font-size: 9px; }
#weboo-chat-root .wc-role { display: inline-flex; align-items: center; padding: 2px 5px; border-radius: 5px; font-size: 8px; line-height: 1.25; font-weight: 900; letter-spacing: .3px; }
#weboo-chat-root .wc-role-admin { color: #fff; background: #d92d55; }
#weboo-chat-root .wc-role-vip { color: #ffe08a; background: rgba(231,174,43,.15); }
#weboo-chat-root .wc-role-user { color: #9dc9ff; background: rgba(78,151,255,.14); }
#weboo-chat-root .wc-role-guest { color: #b6b6c1; background: rgba(255,255,255,.09); }
#weboo-chat-root .wc-message-body { margin-top: 6px; }
#weboo-chat-root .wc-message-text { white-space: pre-wrap; overflow-wrap: anywhere; color: #e4e4ea; font-size: 12px; line-height: 1.5; }
#weboo-chat-root .wc-message-deleted .wc-message-text { color: #888894; font-style: italic; }
#weboo-chat-root .wc-quote {
    display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
    margin: 0 0 7px; padding: 7px 9px; border: 0; border-left: 2px solid var(--wc-pink);
    border-radius: 0 7px 7px 0; background: rgba(255,255,255,.055); cursor: pointer;
}
#weboo-chat-root .wc-quote strong { color: #ff7892; font-size: 10px; }
#weboo-chat-root .wc-quote span { color: #a7a7b2; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#weboo-chat-root .wc-message-actions { display: flex; gap: 10px; margin-top: 6px; opacity: .72; }
#weboo-chat-root .wc-message-actions button { border: 0; padding: 0; color: #9999a5; background: transparent; font-size: 9px; cursor: pointer; }
#weboo-chat-root .wc-message-actions button:hover { color: #fff; }
#weboo-chat-root .wc-message-actions .wc-danger-action { color: #ff718c; }
#weboo-chat-root .wc-reply-preview {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 12px; background: rgba(255,45,85,.09); border-top: 1px solid rgba(255,45,85,.2);
}
#weboo-chat-root .wc-reply-preview-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#weboo-chat-root .wc-reply-preview-text strong { color: #ff7892; font-size: 10px; }
#weboo-chat-root .wc-reply-preview-text span { color: #b8b8c2; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#weboo-chat-root #wc-reply-cancel { border: 0; color: #ddd; background: transparent; font-size: 19px; cursor: pointer; }
#weboo-chat-root .wc-send-form {
    display: flex; align-items: flex-end; gap: 8px; padding: 10px 11px 6px;
    border-top: 1px solid var(--wc-line); background: #17171d;
}
#weboo-chat-root .wc-send-form textarea {
    flex: 1; min-width: 0; max-height: 90px; resize: none; outline: none;
    padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
    color: #f4f4f7; background: #25252d; font-size: 12px; line-height: 1.4;
}
#weboo-chat-root .wc-send-form textarea::placeholder { color: #858591; }
#weboo-chat-root .wc-send-form textarea:focus { border-color: rgba(255,45,85,.55); }
#weboo-chat-root .wc-send-form button {
    width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
    border: 0; border-radius: 12px; color: #fff; background: var(--wc-pink); cursor: pointer;
}
#weboo-chat-root .wc-send-form button:disabled { opacity: .5; cursor: wait; }
#weboo-chat-root .wc-send-form svg { width: 18px; height: 18px; fill: currentColor; }
#weboo-chat-root .wc-footer-note { padding: 0 10px 9px; text-align: center; color: #777783; font-size: 9px; background: #17171d; }
#weboo-chat-root .wc-loading, #weboo-chat-root .wc-empty { margin: auto; padding: 20px; color: #92929e; text-align: center; font-size: 12px; line-height: 1.5; }
#weboo-chat-root .wc-name-gate {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 25px; text-align: center; background: radial-gradient(circle at top,rgba(255,45,85,.12),transparent 55%);
}
#weboo-chat-root .wc-name-gate[hidden], #weboo-chat-root [hidden] { display: none !important; }
#weboo-chat-root .wc-gate-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: rgba(255,45,85,.13); font-size: 25px; }
#weboo-chat-root .wc-name-gate h3 { margin: 15px 0 6px; color: #fff; font-size: 17px; }
#weboo-chat-root .wc-name-gate p { margin: 0 0 17px; color: #a3a3af; font-size: 11px; line-height: 1.5; }
#weboo-chat-root .wc-name-gate form { width: 100%; }
#weboo-chat-root .wc-name-gate input {
    width: 100%; padding: 12px; outline: none; color: #fff; background: #25252d;
    border: 1px solid rgba(255,255,255,.1); border-radius: 10px; font-size: 12px;
}
#weboo-chat-root .wc-name-gate input:focus { border-color: var(--wc-pink); }
#weboo-chat-root .wc-name-gate form button {
    width: 100%; margin-top: 9px; padding: 12px; border: 0; border-radius: 10px;
    color: #fff; background: var(--wc-pink); font-size: 12px; font-weight: 800; cursor: pointer;
}
#weboo-chat-root .wc-name-gate form button:disabled { opacity: .6; }
#weboo-chat-root .wc-form-error { min-height: 17px; margin-top: 8px; color: #ff8298; font-size: 10px; }
#weboo-chat-root .wc-toast {
    position: fixed; right: 22px; bottom: 85px; z-index: 99999;
    max-width: 320px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px; color: #fff; background: #292932; box-shadow: 0 8px 30px rgba(0,0,0,.35);
    font-size: 11px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s;
}
#weboo-chat-root .wc-toast-show { opacity: 1; transform: translateY(0); }

@media (max-width: 520px) {
    #weboo-chat-root .wc-launcher { right: 10px; bottom: 80px; padding: 12px 15px; }
    #weboo-chat-root .wc-panel {
        right: 0; bottom: 0; width: 100%; height: min(78dvh, 620px);
        max-height: 78dvh; border-radius: 18px 18px 0 0;
    }
    #weboo-chat-root .wc-toast { right: 12px; bottom: 75px; max-width: calc(100vw - 24px); }
}