.tcc-chatbot {
    --tcc-accent: #5dade2;
    --tcc-accent-2: #7fdbff;
    --tcc-ink: #0b2b40;
    --tcc-ink-2: #234e70;
    --tcc-cream: #f8fcfe;
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--tcc-ink);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.tcc-chatbot *,
.tcc-chatbot *::before,
.tcc-chatbot *::after {
    box-sizing: border-box;
}

.tcc-toggle {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-left: auto;
    border: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 226, 165, .72);
    color: var(--tcc-ink);
    background: linear-gradient(145deg, var(--tcc-accent-2), var(--tcc-accent));
    box-shadow: 0 12px 32px rgba(27, 20, 6, .34), 0 0 0 5px rgba(93,173,226, .1);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.tcc-toggle:hover,
.tcc-toggle:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(27, 20, 6, .42), 0 0 0 7px rgba(93,173,226, .14);
}

.tcc-chatbot.is-open .tcc-toggle {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.tcc-toggle svg,
.tcc-form button svg {
    fill: currentColor;
}

.tcc-panel {
    position: absolute;
    right: 0;
    bottom: 72px;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 28px));
    height: min(570px, calc(100vh - 110px));
    overflow: hidden;
    border: 1px solid rgba(93,173,226, .38);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(27, 20, 6, .32);
    transform-origin: bottom right;
    animation: tcc-open .18s ease-out;
}

.tcc-panel[hidden] { display: none; }

@keyframes tcc-open {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.tcc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 14px 16px 14px 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--tcc-ink), var(--tcc-ink-2));
    border-bottom: 1px solid rgba(127,219,255, .25);
}

.tcc-header strong,
.tcc-header span { display: block; }
.tcc-header strong { font-size: 16px; line-height: 1.35; }
.tcc-header span { margin-top: 2px; font-size: 12px; opacity: .84; }

.tcc-close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    color: var(--tcc-accent-2);
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    opacity: .9;
}

.tcc-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 14px;
    background: #f8fcfe;
    scrollbar-width: thin;
}

.tcc-message { display: flex; margin: 0 0 12px; }
.tcc-message--user { justify-content: flex-end; }

.tcc-bubble {
    max-width: 88%;
    padding: 11px 13px;
    border: 1px solid #d9eaf2;
    border-radius: 6px 16px 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(27, 20, 6, .05);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.tcc-message--user .tcc-bubble {
    border-color: var(--tcc-accent);
    border-radius: 16px 16px 6px;
    color: var(--tcc-ink);
    background: var(--tcc-accent);
}

.tcc-message.is-pending .tcc-bubble {
    color: #c8e0ec;
    animation: tcc-pulse 1.2s ease-in-out infinite;
}

@keyframes tcc-pulse { 50% { opacity: .55; } }

.tcc-source,
.tcc-related,
.tcc-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid #d9eaf2;
    white-space: normal;
}

.tcc-source a,
.tcc-related a {
    color: var(--tcc-accent);
    font-weight: 600;
    text-decoration: none;
}

.tcc-source a:hover,
.tcc-related a:hover { text-decoration: underline; }
.tcc-related strong { color: #d9eaf2; font-size: 12px; }
.tcc-actions { flex-direction: row; flex-wrap: wrap; }

.tcc-action {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--tcc-accent);
    border-radius: 9px;
    color: var(--tcc-accent);
    font-weight: 650;
    text-decoration: none;
}

.tcc-action--primary { color: var(--tcc-ink); background: var(--tcc-accent); }

.tcc-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #d9eaf2;
    background: #fff;
}

.tcc-form input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #d9eaf2;
    border-radius: 11px;
    color: var(--tcc-ink);
    background: #fff;
    font: inherit;
    font-size: 14px;
    outline: none;
}

.tcc-form input:focus {
    border-color: var(--tcc-accent);
    box-shadow: 0 0 0 3px rgba(93,173,226, .18);
}

.tcc-form button {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    color: var(--tcc-ink);
    background: var(--tcc-accent);
    cursor: pointer;
}

.tcc-form button:disabled,
.tcc-form input:disabled { cursor: wait; opacity: .65; }

.tcc-disclaimer {
    padding: 0 12px 9px;
    color: #c8e0ec;
    background: #fff;
    font-size: 10px;
    text-align: center;
}

@media (max-width: 480px) {
    .tcc-chatbot { right: 14px; bottom: 14px; }
    .tcc-panel {
        position: fixed;
        inset: 10px 10px 82px;
        width: auto;
        height: auto;
        max-height: none;
    }
}

/* Tránh đè lên cụm nút Zalo/Gọi của Tâm Lê Core. */
body.tam-has-contact-buttons .tcc-chatbot {
    right: 176px;
    bottom: max(26px, env(safe-area-inset-bottom));
}

@media (max-width: 600px) {
    body.tam-has-contact-buttons .tcc-chatbot {
        right: 10px;
        bottom: max(14px, env(safe-area-inset-bottom));
    }

    .tcc-toggle {
        width: 54px;
        height: 54px;
    }

    body:has(.tam-cookie-notice.is-visible) .tcc-chatbot {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
    }

    body:has(.tcc-chatbot.is-open) .tam-contact-dock {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tcc-panel,
    .tcc-toggle { animation: none; transition: none; }
}

/* Khi Tâm Lê Core hoạt động, chatbot dùng chung một nút mở với Zalo và gọi tư vấn. */
body.tam-has-contact-buttons .tcc-chatbot {
    right: 22px;
    bottom: max(26px, env(safe-area-inset-bottom));
}

body.tam-has-contact-buttons .tcc-toggle {
    display: none;
}

body:has(.tcc-chatbot.is-open) .tam-contact-dock {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

@media (max-width: 600px) {
    body.tam-has-contact-buttons .tcc-chatbot {
        right: 10px;
        bottom: max(14px, env(safe-area-inset-bottom));
    }
}