/* Carolchat Widget Styles - Dark Theme */
/* Primary: #1B1C28 | Accent: #52D38E */

.carolchat-widget {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #1B1C28 !important;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.carolchat-widget * {
    box-sizing: border-box;
}

#carolchat-root {
    width: 100%;
    height: 100%;
}

/* ========== MAIN BACKGROUND ========== */
#carolchat-root .bg-stone-50,
#carolchat-root > div {
    background-color: #1B1C28 !important;
}

/* ========== MESSAGE AREA ========== */
#carolchat-root [role="log"] {
    background-color: #1B1C28 !important;
}

/* ========== USER MESSAGE BUBBLES ========== */
#carolchat-root .ml-auto .bg-white,
#carolchat-root .user-message-enter .bg-white {
    background-color: #252633 !important;
    color: #E8E8EC !important;
    border: 1px solid #52D38E40 !important;
}

#carolchat-root .ml-auto .bg-white p,
#carolchat-root .user-message-enter .bg-white p {
    color: #E8E8EC !important;
}

/* User avatar circle */
#carolchat-root .flex-row-reverse > .bg-white {
    background-color: #252633 !important;
    border: 1px solid #52D38E !important;
}

#carolchat-root .flex-row-reverse > .bg-white svg {
    color: #52D38E !important;
}

/* ========== ASSISTANT MESSAGE BUBBLES ========== */
#carolchat-root .mr-auto .bg-transparent {
    color: #E8E8EC !important;
}

#carolchat-root .mr-auto .text-stone-800,
#carolchat-root .text-sm.whitespace-pre-wrap {
    color: #E8E8EC !important;
}

/* Assistant avatar */
#carolchat-root .bg-emerald-600 {
    background-color: #1B1C28 !important;
    border: 1px solid #52D38E !important;
}

/* Typing indicator */
#carolchat-root .bg-white[role="status"] {
    background-color: #252633 !important;
    border-color: #52D38E40 !important;
}

#carolchat-root .bg-stone-400.animate-bounce {
    background-color: #52D38E !important;
}

/* ========== TEXT COLORS ========== */
#carolchat-root .text-stone-400 {
    color: #8B8D9E !important;
}

#carolchat-root .text-xs.text-stone-400 {
    color: #6B6D7E !important;
}

#carolchat-root .text-gray-500 {
    color: #8B8D9E !important;
}

#carolchat-root .text-gray-400 {
    color: #6B6D7E !important;
}

#carolchat-root .text-stone-800 {
    color: #E8E8EC !important;
}

#carolchat-root .text-stone-900 {
    color: #F0F0F4 !important;
}

#carolchat-root .text-stone-700 {
    color: #52D38E !important;
}

#carolchat-root .text-stone-600 {
    color: #8B8D9E !important;
}

#carolchat-root .text-stone-500 {
    color: #6B6D7E !important;
}

/* ========== INPUT COMPOSER ========== */
#carolchat-root .fixed.bottom-4 .rounded-3xl {
    background-color: #1B1C28 !important;
    border: 1.5px solid #52D38E !important;
    box-shadow: 0 0 15px rgba(82, 211, 142, 0.15), 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

#carolchat-root .fixed.bottom-4 .focus-within\:ring-2:focus-within {
    --tw-ring-color: rgba(82, 211, 142, 0.3) !important;
    border-color: #52D38E !important;
}

#carolchat-root textarea {
    color: #E8E8EC !important;
    background-color: transparent !important;
}

#carolchat-root textarea::placeholder {
    color: #6B6D7E !important;
}

/* ========== BUTTONS & ICONS ========== */
#carolchat-root .bg-zinc-100 {
    background-color: #252633 !important;
    border: 1px solid #52D38E !important;
}

#carolchat-root .bg-zinc-100 svg,
#carolchat-root .bg-zinc-100 path,
#carolchat-root .bg-zinc-100 circle {
    color: #52D38E !important;
    stroke: #52D38E !important;
}

#carolchat-root .hover\:bg-zinc-200:hover {
    background-color: #323345 !important;
    border-color: #52D38E !important;
}

/* Reset chat button */
#carolchat-root button[aria-label="Reset chat"] {
    background-color: #252633 !important;
    border: 1px solid #52D38E !important;
}

#carolchat-root button[aria-label="Reset chat"] svg {
    color: #52D38E !important;
}

#carolchat-root button[aria-label="Reset chat"]:hover {
    background-color: #323345 !important;
}

/* carolchat.com text */
#carolchat-root .fixed.bottom-4 .text-xs.text-stone-400 {
    color: #52D38E80 !important;
}

/* ========== LINKS ========== */
#carolchat-root .text-emerald-600 {
    color: #52D38E !important;
}

#carolchat-root .hover\:text-emerald-700:hover {
    color: #3FB876 !important;
}

/* ========== CODE BLOCKS ========== */
#carolchat-root pre {
    background-color: #12131C !important;
    border: 1px solid #52D38E30 !important;
}

#carolchat-root .bg-stone-100 {
    background-color: #252633 !important;
}

#carolchat-root code {
    color: #52D38E !important;
}

#carolchat-root .mr-auto strong {
    color: #F0F0F4 !important;
}

/* ========== AFFILIATE LINK CARDS ========== */
#carolchat-root .rounded-\[20px\].bg-white {
    background-color: #252633 !important;
    border: 1px solid #52D38E40 !important;
}

#carolchat-root .rounded-\[20px\] .text-\[\#1A1A1A\] {
    color: #E8E8EC !important;
}

#carolchat-root .rounded-\[20px\] .text-\[\#6B7280\] {
    color: #8B8D9E !important;
}

#carolchat-root .bg-\[\#0000ff\] {
    background-color: #52D38E !important;
}

#carolchat-root .bg-\[\#0000ff\]:hover,
#carolchat-root .hover\:bg-\[\#0000ff\]:hover {
    background-color: #3FB876 !important;
}

#carolchat-root .bg-\[\#0000ff\] span {
    color: #1B1C28 !important;
}

#carolchat-root .bg-\[\#0000ff\] svg {
    color: #1B1C28 !important;
}

/* ========== ERROR STATE ========== */
#carolchat-root .bg-red-50 {
    background-color: #2D1F1F !important;
    border-color: #FF6B6B40 !important;
}

/* ========== FILE UPLOAD ========== */
#carolchat-root .border-stone-200 {
    border-color: #52D38E40 !important;
}

#carolchat-root .rounded-lg.border.bg-stone-50 {
    background-color: #252633 !important;
    border-color: #52D38E40 !important;
}

#carolchat-root .bg-stone-800 {
    background-color: #52D38E !important;
}

#carolchat-root .hover\:bg-stone-900:hover {
    background-color: #3FB876 !important;
}

/* ========== VOICE WAVEFORM ========== */
#carolchat-root .bg-zinc-400 {
    background-color: #52D38E !important;
}

/* ========== ORB OVERRIDES ========== */
#carolchat-root .orb-circle-1 {
    background-color: #52D38E !important;
}
#carolchat-root .orb-circle-2 {
    background-color: #3FB876 !important;
}
#carolchat-root .orb-circle-3 {
    background-color: #52D38E !important;
}
#carolchat-root .orb-circle-4 {
    background-color: #88E8B5 !important;
}
#carolchat-root .orb-circle-5 {
    background-color: #2FA36B !important;
}

/* My Account link */
#carolchat-root a[aria-label="My Account"] {
    background-color: #252633 !important;
    border: 1px solid #52D38E !important;
}

#carolchat-root a[aria-label="My Account"] svg {
    stroke: #52D38E !important;
}

#carolchat-root a[aria-label="My Account"]:hover {
    background-color: #323345 !important;
}

/* ========== SCROLLBAR ========== */
#carolchat-root ::-webkit-scrollbar {
    width: 6px;
}

#carolchat-root ::-webkit-scrollbar-track {
    background: #1B1C28;
}

#carolchat-root ::-webkit-scrollbar-thumb {
    background: #52D38E40;
    border-radius: 3px;
}

#carolchat-root ::-webkit-scrollbar-thumb:hover {
    background: #52D38E80;
}

/* ========== CSS VARIABLES ========== */
:root {
    --background: #1B1C28;
    --foreground: #E8E8EC;
    --primary: #52D38E;
    --primary-foreground: #1B1C28;
    --secondary: #252633;
    --secondary-foreground: #E8E8EC;
    --accent: #52D38E;
    --accent-foreground: #1B1C28;
    --destructive: #FF6B6B;
    --border: #52D38E40;
    --input: #52D38E40;
    --ring: #52D38E;
}

/* ========== ERROR & LOADING ========== */
.carolchat-error {
    padding: 20px;
    background: #2D1F1F;
    border: 1px solid #FF6B6B40;
    border-radius: 8px;
    color: #FF8A8A;
}

.carolchat-error a {
    color: #52D38E;
    text-decoration: underline;
}

.carolchat-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #52D38E;
}

/* Responsive */
@media (max-width: 640px) {
    .carolchat-widget {
        border-radius: 0;
        height: 100vh !important;
    }
}