:root {
    /* TekJuice brand colors: black, orange, white */
    --chat--color-primary: #F28C38 !important; /* Vibrant orange */
    --chat--color-primary-shade-50: #E07B30 !important; /* Slightly darker orange */
    --chat--color-primary-shade-100: #CC6A28 !important; /* Darker orange */
    --chat--color-white: #FFFFFF !important;
    --chat--color-light: #FFFFFF !important; /* White background */
    --chat--color-light-shade-50: #F5F5F5 !important; /* Very light gray for subtle contrast */
    --chat--color-light-shade-100: #E0E0E0 !important; /* Light gray */
    --chat--color-medium: #666666 !important; /* Medium gray for neutral elements */
    --chat--color-dark: #000000 !important; /* Black for text and accents */
    --chat--color-disabled: #999999 !important;
    --chat--color-typing: #666666 !important;
    
    /* Header */
    --chat--header--background: #FFFFFF !important;
    --chat--header--color: #000000 !important;

    /* Messages */
    --chat--message--bot--background: #F5F5F5 !important; /* Light gray for bot messages */
    --chat--message--bot--color: #000000 !important;
    --chat--message--user--background: #F7A261 !important; /* Lighter orange for user messages */
    --chat--message--user--color: #FFFFFF !important; /* White text for contrast */
    --chat--message--pre--background: rgba(0, 0, 0, 0.05) !important;

    --chat--textarea--height: 60px !important;
    --chat--border-radius: 1.2rem !important;
}

/* Input area */
.chat-widget-input-container {
    margin-bottom: 12px !important;
}
.chat-widget-input {
    border-radius: 18px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #F28C38 !important;
}
.chat-widget-input::placeholder {
    color: #666666 !important;
}

/* Message bubbles */
.chat-message {
    border-radius: 1.2rem !important;
    padding: 12px 16px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    padding-left: 52px !important;
}
.chat-widget {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    border-radius: 1.2rem !important;
    background-color: #FFFFFF !important;
    color: #000000 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important;
    font-size: 10px !important;
}
.chat-widget-header {
    border-top-left-radius: 1.2rem !important;
    border-top-right-radius: 1.2rem !important;
}

/* Buttons */
.chat-widget button {
    border-radius: 18px !important;
    transition: all 0.2s ease !important;
    background-color: #F28C38 !important;
    color: #FFFFFF !important;
}

/* Chat body */
.chat-widget-body {
    background-color: #FFFFFF !important;
}

/* Avatar */
.chat-avatar {
    background-image: url('https://kyaligonzawarren.standardintern.com/storage/tekjuice.jpeg') !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.chat-avatar::before {
    content: none !important;
}
.chat-message-user {
    padding-right: 52px !important;
    padding-left: 16px !important;
}
.chat-message-user .chat-avatar {
    left: auto !important;
    right: 8px !important;
}
.chat-message-time {
    color: #666666 !important;
}
.chat-message pre {
    background-color: #F5F5F5 !important;
    color: #000000 !important;
    border: 1px solid #F28C38 !important;
}
.chat-message a {
    color: #F28C38 !important;
}
.chat-message::before {
    content: "";
    background-image: url('https://kyaligonzawarren.standardintern.com/storage/tekjuice.jpeg') !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.chat-message-user::before {
    left: auto !important;
    right: 8px !important;
}