/* True American Polls Chatbot — TrueBot Public Styles */
:root {
    --tpcb-purple: #6b3fa0;
    --tpcb-purple-dark: #4e2d78;
    --tpcb-gold: #c9a227;
    --tpcb-white: #ffffff;
    --tpcb-bg: #f7f5fb;
    --tpcb-border: #e0d8f0;
    --tpcb-text: #1a1a2e;
    --tpcb-muted: #666688;
    --tpcb-radius: 18px;
    --tpcb-shadow: 0 8px 32px rgba(107,63,160,0.22), 0 2px 8px rgba(0,0,0,0.10);
}

/* ── Bubble ── */
#tpcb-bubble {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--tpcb-purple);
    box-shadow: 0 4px 18px rgba(107,63,160,0.40);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99998;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    outline: none;
}
#tpcb-bubble:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(107,63,160,0.55); }
#tpcb-bubble svg { width: 26px; height: 26px; fill: var(--tpcb-white); }
#tpcb-bubble .tpcb-notif {
    position: absolute;
    top: 2px; right: 2px;
    width: 14px; height: 14px;
    background: var(--tpcb-gold);
    border-radius: 50%;
    border: 2px solid #fff;
    display: none;
}
#tpcb-bubble.tpcb-has-notif .tpcb-notif { display: block; }

/* ── Chat Window ── */
#tpcb-window {
    position: fixed;
    bottom: 94px;
    left: 24px;
    width: 340px;
    max-height: 520px;
    background: var(--tpcb-white);
    border-radius: var(--tpcb-radius);
    box-shadow: var(--tpcb-shadow);
    display: flex;
    flex-direction: column;
    z-index: 99999;
    overflow: hidden;
    transform: scale(0.92) translateY(16px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(.34,1.56,.64,1), opacity 0.18s ease;
    border: 1px solid var(--tpcb-border);
}
#tpcb-window.tpcb-open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: all;
}

/* ── Header ── */
.tpcb-header {
    background: var(--tpcb-purple);
    padding: 14px 16px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.tpcb-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.tpcb-header-info { flex: 1; }
.tpcb-header-name  { font-size: 14px; font-weight: 700; color: var(--tpcb-white); line-height: 1.2; }
.tpcb-header-status{ font-size: 11px; color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: 4px; }
.tpcb-online-dot { width: 7px; height: 7px; background: #4caf50; border-radius: 50%; flex-shrink: 0; }
.tpcb-close-btn {
    background: none; border: none; color: rgba(255,255,255,0.8);
    cursor: pointer; font-size: 20px; line-height: 1; padding: 0 2px;
    transition: color 0.15s;
}
.tpcb-close-btn:hover { color: #fff; }

/* ── Messages ── */
.tpcb-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--tpcb-bg);
    scroll-behavior: smooth;
}
.tpcb-messages::-webkit-scrollbar { width: 4px; }
.tpcb-messages::-webkit-scrollbar-thumb { background: var(--tpcb-border); border-radius: 4px; }

.tpcb-msg {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
}
.tpcb-msg-bot {
    background: var(--tpcb-white);
    color: var(--tpcb-text);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    border: 1px solid var(--tpcb-border);
    box-shadow: 0 1px 4px rgba(107,63,160,0.06);
}
.tpcb-msg-user {
    background: var(--tpcb-purple);
    color: var(--tpcb-white);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
.tpcb-msg-error {
    background: #fff0f0;
    border: 1px solid #fcc;
    color: #a32d2d;
    align-self: flex-start;
    border-radius: 10px;
    font-size: 12px;
}

/* ── Typing indicator ── */
.tpcb-typing {
    display: none;
    align-self: flex-start;
    padding: 10px 14px;
    background: var(--tpcb-white);
    border: 1px solid var(--tpcb-border);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}
.tpcb-typing.tpcb-visible { display: flex; align-items: center; gap: 4px; }
.tpcb-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--tpcb-purple);
    opacity: 0.4;
    animation: tpcb-bounce 1.2s infinite;
}
.tpcb-dot:nth-child(2) { animation-delay: 0.2s; }
.tpcb-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes tpcb-bounce { 0%,60%,100%{ transform: translateY(0); opacity: 0.4; } 30%{ transform: translateY(-6px); opacity: 1; } }

/* ── Quick replies ── */
.tpcb-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 10px;
    background: var(--tpcb-bg);
}
.tpcb-quick-btn {
    background: var(--tpcb-white);
    border: 1px solid var(--tpcb-purple);
    color: var(--tpcb-purple);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11.5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    font-weight: 500;
}
.tpcb-quick-btn:hover { background: var(--tpcb-purple); color: var(--tpcb-white); }

/* ── Input bar ── */
.tpcb-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--tpcb-white);
    border-top: 1px solid var(--tpcb-border);
    flex-shrink: 0;
}
#tpcb-input {
    flex: 1;
    border: 1px solid var(--tpcb-border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: var(--tpcb-bg);
    color: var(--tpcb-text);
    transition: border-color 0.15s;
}
#tpcb-input:focus { border-color: var(--tpcb-purple); background: #fff; }
#tpcb-input::placeholder { color: var(--tpcb-muted); }
#tpcb-send {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--tpcb-purple);
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.15s;
    flex-shrink: 0;
}
#tpcb-send:hover { background: var(--tpcb-purple-dark); transform: scale(1.08); }
#tpcb-send svg { width: 16px; height: 16px; fill: #fff; }
#tpcb-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Footer ── */
.tpcb-footer {
    text-align: center;
    font-size: 10px;
    color: var(--tpcb-muted);
    padding: 5px 0 8px;
    background: var(--tpcb-white);
    letter-spacing: 0.02em;
}

/* ── Mobile ── */
@media (max-width: 480px) {
    #tpcb-window { width: calc(100vw - 32px); left: 16px; bottom: 86px; max-height: 70vh; }
    #tpcb-bubble { bottom: 16px; left: 16px; }
}