/* TCLP AI Chatbot Widget — matches TCLP cream/gold design system */

:root {
    --tclp-gold:      #c8960a;
    --tclp-gold-dark: #a67c08;
    --tclp-cream:     #fdf8ee;
    --tclp-text:      #1a1208;
    --tclp-muted:     #6b5c2e;
    --tclp-radius:    16px;
    --tclp-shadow:    0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
    --tclp-w:         360px;
    --tclp-h:         480px;
}

/* Root container */
#tclp-chat-root {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99999;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

/* Launcher button */
#tclp-chat-launcher {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tclp-gold);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(200,150,10,0.45);
    transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
    margin-left: auto;
}
#tclp-chat-launcher:hover {
    background: var(--tclp-gold-dark);
    transform: scale(1.07);
    box-shadow: 0 6px 20px rgba(200,150,10,0.55);
}
#tclp-chat-launcher:active {
    transform: scale(0.97);
}

/* Chat window */
#tclp-chat-window {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: var(--tclp-w);
    height: var(--tclp-h);
    background: var(--tclp-cream);
    border-radius: var(--tclp-radius);
    box-shadow: var(--tclp-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    animation: tclp-pop-in 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
#tclp-chat-window[hidden] {
    display: none;
}

@keyframes tclp-pop-in {
    from { opacity: 0; transform: scale(0.88) translateY(12px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

/* Header */
#tclp-chat-header {
    background: var(--tclp-gold);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
#tclp-chat-avatar {
    font-size: 22px;
    line-height: 1;
    background: rgba(255,255,255,0.2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#tclp-chat-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
#tclp-chat-subtitle {
    font-size: 11px;
    opacity: 0.85;
    margin-top: 1px;
}

/* Messages area */
#tclp-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}
#tclp-chat-messages::-webkit-scrollbar { width: 4px; }
#tclp-chat-messages::-webkit-scrollbar-track { background: transparent; }
#tclp-chat-messages::-webkit-scrollbar-thumb { background: #d4b96a; border-radius: 2px; }

/* Message rows */
.tclp-msg {
    display: flex;
}
.tclp-msg--bot {
    justify-content: flex-start;
}
.tclp-msg--user {
    justify-content: flex-end;
}

/* Bubbles */
.tclp-bubble {
    max-width: 82%;
    padding: 10px 13px;
    border-radius: 14px;
    line-height: 1.55;
    font-size: 13.5px;
    word-break: break-word;
}
.tclp-msg--bot .tclp-bubble {
    background: #fff;
    color: var(--tclp-text);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.tclp-msg--user .tclp-bubble {
    background: var(--tclp-gold);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Typing indicator */
.tclp-typing {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 14px;
}
.tclp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tclp-gold);
    opacity: 0.4;
    animation: tclp-bounce 1.1s infinite;
}
.tclp-dot:nth-child(2) { animation-delay: 0.18s; }
.tclp-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes tclp-bounce {
    0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
    40%           { transform: translateY(-5px);  opacity: 1;   }
}

/* Input area */
#tclp-chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(200,150,10,0.18);
    background: #fff;
    flex-shrink: 0;
}
#tclp-chat-input {
    flex: 1;
    border: 1.5px solid rgba(200,150,10,0.3);
    border-radius: 10px;
    padding: 8px 11px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    resize: none;
    background: var(--tclp-cream);
    color: var(--tclp-text);
    outline: none;
    max-height: 100px;
    overflow-y: auto;
    line-height: 1.5;
    transition: border-color 0.15s;
}
#tclp-chat-input:focus {
    border-color: var(--tclp-gold);
}
#tclp-chat-input::placeholder {
    color: var(--tclp-muted);
    opacity: 0.7;
}
#tclp-chat-send {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--tclp-gold);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s;
    margin-bottom: 1px;
}
#tclp-chat-send:hover  { background: var(--tclp-gold-dark); transform: scale(1.05); }
#tclp-chat-send:active { transform: scale(0.95); }
#tclp-chat-send:disabled { background: #ccc; cursor: default; transform: none; }

/* Mobile responsive */
@media (max-width: 480px) {
    #tclp-chat-root {
        bottom: 16px;
        right: 16px;
    }
    #tclp-chat-window {
        width: calc(100vw - 32px);
        right: 0;
        bottom: 68px;
    }
}