.dc-bob-root {
    position: fixed;
    z-index: 999;
    width: max-content;
    max-width: min(290px, calc(100vw - 32px));
    --dc-bob-surface-rgb: 255, 255, 255;
    --dc-bob-line: rgba(255, 255, 255, 0.4);
    --dc-bob-accent: #596579;
    --dc-bob-accent-soft: rgba(89, 101, 121, 0.1);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.dc-bob-root.is-header-left { top: var(--dc-bob-desktop-top-offset, 86px); left: var(--dc-bob-header-left, max(16px, env(safe-area-inset-left))); }
.dc-bob-root.is-header-right { top: var(--dc-bob-desktop-top-offset, 86px); right: max(16px, env(safe-area-inset-right)); }
.dc-bob-root.is-bottom-left { bottom: max(20px, env(safe-area-inset-bottom)); left: max(16px, env(safe-area-inset-left)); }
.dc-bob-root.is-bottom-right { bottom: max(20px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); }

.dc-bob-card {
    position: relative;
    display: inline-grid;
    grid-template-columns: 30px minmax(0, auto);
    gap: 6px;
    align-items: center;
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    height: 40px;
    padding: 4px 8px 4px 6px;
    overflow: hidden;
    color: #172033;
    background: rgba(var(--dc-bob-surface-rgb), var(--dc-bob-background-opacity, 0.45));
    border: 1px solid var(--dc-bob-line);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
    opacity: 0;
    transform: translate3d(-26px, 0, 0);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: auto;
}
.dc-bob-card.has-close { padding-right: 25px; }

.dc-bob-root.is-theme-marketing .dc-bob-card.is-member {
    --dc-bob-surface-rgb: 255, 247, 241;
    --dc-bob-line: rgba(225, 105, 48, 0.24);
    --dc-bob-accent: #c85220;
    --dc-bob-accent-soft: rgba(225, 105, 48, 0.12);
}
.dc-bob-root.is-theme-marketing .dc-bob-card.is-guest {
    --dc-bob-surface-rgb: 240, 249, 252;
    --dc-bob-line: rgba(18, 139, 158, 0.24);
    --dc-bob-accent: #087d91;
    --dc-bob-accent-soft: rgba(18, 139, 158, 0.12);
}
.dc-bob-root.is-theme-minimal .dc-bob-card {
    --dc-bob-surface-rgb: 255, 255, 255;
    --dc-bob-line: rgba(255, 255, 255, 0.4);
}

.dc-bob-root.is-header-right .dc-bob-card,
.dc-bob-root.is-bottom-right .dc-bob-card { transform: translate3d(26px, 0, 0); }
.dc-bob-card.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.dc-bob-card.is-exiting { opacity: 0; transform: translate3d(0, 16px, 0); transition-timing-function: ease-in; }

.dc-bob-avatar {
    position: relative;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.15);
}

.dc-bob-avatar.is-style-1 { background: linear-gradient(135deg, #ff7a59, #ffb347); }
.dc-bob-avatar.is-style-2 { background: linear-gradient(135deg, #5b8def, #8b5cf6); }
.dc-bob-avatar.is-style-3 { background: linear-gradient(135deg, #16a085, #65d6ad); }
.dc-bob-avatar.is-style-4 { background: linear-gradient(135deg, #ec4899, #fb7185); }
.dc-bob-avatar.is-style-5 { background: linear-gradient(135deg, #0ea5e9, #22d3ee); }
.dc-bob-avatar.is-style-6 { background: linear-gradient(135deg, #f59e0b, #facc15); }
.dc-bob-root.is-theme-marketing .dc-bob-card.is-member .dc-bob-avatar { border-color: rgba(255, 239, 227, 0.94); }
.dc-bob-root.is-theme-marketing .dc-bob-card.is-guest .dc-bob-avatar { background: #1693a6; border-color: rgba(224, 249, 252, 0.94); }

.dc-bob-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-bob-copy { min-width: 0; padding-right: 2px; }
.dc-bob-copy strong { display: flex; align-items: center; min-width: 0; overflow: hidden; font-size: 11px; line-height: 1.25; font-weight: 800; white-space: nowrap; }
.dc-bob-copy strong > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dc-bob-identity { display: inline-flex; align-items: center; flex: 0 0 auto; height: 12px; margin-left: 4px; padding: 0 4px; color: var(--dc-bob-accent); background: var(--dc-bob-accent-soft); border: 1px solid var(--dc-bob-accent-soft); border-radius: 999px; font-size: 7px; line-height: 12px; font-weight: 700; }
.dc-bob-copy p { display: flex; align-items: center; min-width: 0; margin: 0; overflow: hidden; color: #596579; font-size: 9px; line-height: 1.25; white-space: nowrap; }
.dc-bob-copy p b { min-width: 0; overflow: hidden; color: #263247; font-weight: 700; text-overflow: ellipsis; }
.dc-bob-purchase-icon { display: inline-grid; place-items: center; flex: 0 0 10px; width: 10px; height: 10px; margin-right: 3px; color: #16845b; background: rgba(22, 132, 91, 0.12); border-radius: 50%; font-size: 7px; line-height: 1; font-weight: 900; }

.dc-bob-close {
    position: absolute;
    top: 50%;
    right: 5px;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    padding: 0;
    color: #7c8799;
    background: rgba(255, 255, 255, 0.58);
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.dc-bob-close:hover { color: #e5484d; background: rgba(255, 255, 255, 0.92); }
.dc-bob-close:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

html[data-theme="dark"] .dc-bob-card {
    color: #f5f7fb;
    --dc-bob-surface-rgb: 23, 31, 46;
    background: rgba(var(--dc-bob-surface-rgb), var(--dc-bob-background-opacity, 0.45));
    border-color: rgba(255, 255, 255, 0.13);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .dc-bob-root.is-theme-marketing .dc-bob-card.is-member { --dc-bob-surface-rgb: 55, 36, 28; --dc-bob-accent: #ffab7a; --dc-bob-accent-soft: rgba(255, 171, 122, 0.12); }
html[data-theme="dark"] .dc-bob-root.is-theme-marketing .dc-bob-card.is-guest { --dc-bob-surface-rgb: 20, 46, 54; --dc-bob-accent: #76d6e2; --dc-bob-accent-soft: rgba(118, 214, 226, 0.12); }
html[data-theme="dark"] .dc-bob-copy p { color: #b5becd; }
html[data-theme="dark"] .dc-bob-copy p b { color: #f0f3f8; }
html[data-theme="dark"] .dc-bob-close { color: #c0c7d2; background: rgba(255, 255, 255, 0.08); }

@media (prefers-reduced-motion: reduce) {
    .dc-bob-card { transform: none !important; transition: opacity 0.01ms linear; }
}

@media (max-width: 640px) {
    .dc-bob-root { max-width: min(270px, calc(100vw - 24px)); }
    .dc-bob-root.is-header-left { top: var(--dc-bob-mobile-top-offset, 96px); left: max(12px, env(safe-area-inset-left)); }
    .dc-bob-root.is-header-right { top: var(--dc-bob-mobile-top-offset, 96px); right: max(12px, env(safe-area-inset-right)); }
    .dc-bob-root.is-bottom-left { bottom: max(76px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); }
    .dc-bob-root.is-bottom-right { bottom: max(76px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); }
    .dc-bob-card { grid-template-columns: 28px minmax(0, auto); gap: 5px; height: 38px; padding: 4px 7px 4px 5px; }
    .dc-bob-card.has-close { padding-right: 23px; }
    .dc-bob-avatar { width: 28px; height: 28px; font-size: 10px; }
    .dc-bob-copy strong { font-size: 10px; }
    .dc-bob-copy p { font-size: 9px; }
    .dc-bob-close { right: 4px; width: 16px; height: 16px; }
}