/* ============================================================
   ChatBase — ⚡ Turbo (turbo.js)
   ============================================================ */
.tb-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 6px; vertical-align: -3px;
    font-size: 11px; line-height: 1; font-style: normal;
    background: linear-gradient(135deg, #5b8cff, #8b5cf6);
    box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset;
}
.tb-badge.tb-turbo { background: linear-gradient(135deg, #ff73fa, #c14bff 50%, #5b8cff); box-shadow: 0 0 10px rgba(193,75,255,.55); }

/* Full Turbo: animated rainbow name + glowing avatar ring wherever messages show */
.tb-msg-turbo .message-author, .tb-mem-turbo .dc-mem-t b {
    background: linear-gradient(90deg, #ff73fa, #c14bff, #5b8cff, #34e8b0, #ff73fa) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent !important;
    animation: tbRainbow 6s linear infinite;
}
.tb-msg-turbo .message-author .tb-badge, .tb-mem-turbo .dc-mem-t b .tb-badge, .tb-msg-turbo .message-author .dc-crown, .tb-mem-turbo .dc-mem-t b .dc-crown { -webkit-text-fill-color: #fff; color: #fff !important; }
@keyframes tbRainbow { to { background-position: 300% 0; } }
.tb-msg-turbo .message-avatar, .tb-mem-turbo .dc-mem-av img, .tb-mem-turbo .dc-mem-av .dc-initial {
    box-shadow: 0 0 0 2px #1a1a1e, 0 0 0 4px #c14bff, 0 0 14px rgba(193,75,255,.6) !important;
    animation: tbRing 2.6s ease-in-out infinite;
}
@keyframes tbRing { 50% { box-shadow: 0 0 0 2px #1a1a1e, 0 0 0 4px #5b8cff, 0 0 18px rgba(91,140,255,.7) !important; } }
@media (prefers-reduced-motion: reduce) {
    .tb-msg-turbo .message-author, .tb-mem-turbo .dc-mem-t b, .tb-msg-turbo .message-avatar, .tb-mem-turbo .dc-mem-av img { animation: none; }
}

/* Profile card */
.tb-prof .rw-modal-card, .rw-modal-card.tb-prof { box-shadow: 0 0 0 1px rgba(193,75,255,.45), 0 0 50px rgba(193,75,255,.35) !important; }
.tb-prof-turbo .rw-prof-banner { position: relative; overflow: hidden; }
.tb-prof-turbo .rw-prof-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); background-size: 250% 100%; animation: tbShine 3.5s ease-in-out infinite; }
@keyframes tbShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.tb-prof-line { display: inline-block; margin-right: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(193,75,255,.16); color: #e2b4ff; font-size: 12px; font-weight: 700; }
.tb-gift-btn { background: linear-gradient(120deg, #ff73fa33, #5b8cff33) !important; }

/* Rewards header button */
.tb-open {
    margin: 10px 0 0 8px;
    padding: 9px 16px; border-radius: 999px; border: 0;
    background: linear-gradient(120deg, #c14bff, #5b8cff); color: #fff;
    font: inherit; font-size: 14px; font-weight: 750; cursor: pointer;
    box-shadow: 0 8px 24px rgba(193,75,255,.35);
}

/* Store pop-up */
.tb-modal .tb-box {
    position: relative;
    width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
    border-radius: 24px; background: #121216; color: #fff;
    border: 1px solid rgba(193,75,255,.35);
    box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(193,75,255,.18);
}
.tb-modal .du-x { z-index: 3; }
.tb-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 28px 24px 22px; background: linear-gradient(120deg, #3b1263, #1d2a6b); }
.tb-hero-glow { position: absolute; inset: -40%; background: radial-gradient(circle at 30% 40%, rgba(255,115,250,.35), transparent 40%), radial-gradient(circle at 75% 60%, rgba(91,140,255,.35), transparent 40%); animation: tbFloat 8s ease-in-out infinite alternate; }
@keyframes tbFloat { to { transform: translate(6%, 4%) rotate(8deg); } }
.tb-logo { position: relative; font-size: 46px; filter: drop-shadow(0 0 16px rgba(255,115,250,.8)); }
.tb-hero > div { position: relative; flex: 1; }
.tb-hero h2 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.tb-hero p { margin: 4px 0 0; font-size: 14px; color: rgba(255,255,255,.8); }
.tb-wallet { position: relative; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.35); font-weight: 800; font-size: 14px; margin-right: 34px; white-space: nowrap; }
.tb-tabs { display: flex; gap: 6px; padding: 14px 20px 0; }
.tb-tabs button { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: rgba(235,235,245,.75); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.tb-tabs button.on { background: rgba(193,75,255,.18); border-color: #c14bff; color: #fff; }
.tb-active { margin: 14px 20px 0; padding: 10px 14px; border-radius: 12px; background: rgba(52,232,176,.1); border: 1px solid rgba(52,232,176,.35); font-size: 14px; }
.tb-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 20px 6px; }
.tb-plan { display: flex; flex-direction: column; padding: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.tb-plan-turbo { border-color: rgba(193,75,255,.55); background: linear-gradient(180deg, rgba(193,75,255,.14), rgba(91,140,255,.06)); }
.tb-plan-h { display: flex; align-items: center; justify-content: space-between; font-size: 17px; }
.tb-plan-h em { font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .1em; padding: 3px 8px; border-radius: 999px; background: linear-gradient(120deg, #ff73fa, #c14bff); }
.tb-price { margin: 10px 0 8px; font-size: 30px; font-weight: 900; letter-spacing: -0.03em; }
.tb-price span { font-size: 13px; font-weight: 600; color: rgba(235,235,245,.6); letter-spacing: 0; }
.tb-plan ul { flex: 1; margin: 0 0 14px; padding: 0; list-style: none; }
.tb-plan li { padding: 5px 0; font-size: 13.5px; color: rgba(235,235,245,.85); border-bottom: 1px solid rgba(255,255,255,.05); }
.tb-buy {
    width: 100%; padding: 12px 16px; border-radius: 12px; border: 0;
    background: linear-gradient(120deg, #c14bff, #5b8cff); color: #fff;
    font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    box-shadow: 0 8px 24px rgba(193,75,255,.3);
}
.tb-plan-basic .tb-buy { background: #5b8cff; box-shadow: none; }
.tb-buy[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.tb-gift-link { margin-top: 8px; padding: 6px; border: 0; background: transparent; color: #e2b4ff; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.tb-fine { margin: 8px 20px 20px; font-size: 12px; color: rgba(235,235,245,.5); text-align: center; }
.tb-gift { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 20px; }
.tb-gift-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tb-gift-tiers button { padding: 11px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.tb-gift-tiers button.on { border-color: #c14bff; background: rgba(193,75,255,.16); }
.tb-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; }
.tb-person { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); color: #fff; font: inherit; text-align: left; cursor: pointer; flex-wrap: wrap; }
.tb-person.on { border-color: #c14bff; background: rgba(193,75,255,.14); }
.tb-person b { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-person small { width: 100%; padding-left: 38px; margin-top: -4px; font-size: 11px; color: rgba(235,235,245,.55); }
.tb-person small.tb-has { color: #e2b4ff; }
.tb-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tb-av img { width: 100%; height: 100%; object-fit: cover; }
.tb-celebrate { padding: 34px 26px 26px; text-align: center; }
.tb-celebrate h2 { margin: 10px 0 8px; font-size: 24px; }
.tb-celebrate p { color: rgba(235,235,245,.8); }
.tb-gift-box { font-size: 80px; animation: tbBounce 1.2s ease-in-out infinite; }
@keyframes tbBounce { 50% { transform: translateY(-10px) rotate(-6deg); } }
.tb-gift-note { font-style: italic; font-size: 16px !important; color: #fff !important; }

@media (max-width: 600px) { .tb-plans, .tb-gift-tiers { grid-template-columns: 1fr; } .tb-wallet { display: none; } }