/* Vodafone Corporate Colors */
:root {
    --vodafone-red: #e60000;
    --vodafone-white: #cccccc;
    --vodafone-black: #000000;
    --vodafone-grey: #4a4d4e;
    --vodafone-light-grey: #f8f8f8;
}

/* Primary accent color */
.cl-primary,
[data-testid="send-button"],
.MuiButton-containedPrimary {
    background-color: var(--vodafone-red) !important;
}

/* Sidebar styling */
.cl-sidebar,
[data-testid="sidebar"] {
    background: linear-gradient(145deg, #4a4d4e 0%, #2c2c2c 100%) !important;
    border-right: 4px solid var(--vodafone-red) !important;
}

/* Sidebar text */
.cl-sidebar *,
[data-testid="sidebar"] * {
    color: var(--vodafone-white) !important;
}

/* Chat message styling */
.cl-message-container {
    border-left: 4px solid var(--vodafone-red);
    border-radius: 10px;
    margin: 8px 0;
}

/* Assistant messages */
[data-testid="assistant-message"] {
    background-color: var(--vodafone-light-grey);
}

/* User messages */
[data-testid="user-message"] {
    background-color: var(--vodafone-white);
    border: 1px solid #eeeeee;
}

/* Button styling */
button,
.MuiButton-root {
    border-radius: 25px !important;
    text-transform: none !important;
}

/* Primary buttons */
button.primary,
.MuiButton-containedPrimary {
    background-color: var(--vodafone-grey) !important;
    transition: all 0.3s ease;
}

button.primary:hover,
.MuiButton-containedPrimary:hover {
    background-color: #cc0000 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Input field styling */
input,
textarea,
[data-testid="chat-input"],
[data-testid="chat-input"] textarea,
textarea#chat-input,
.cl-composer textarea,
.cl-composer .cl-textarea {
    border-radius: 20px !important;
    border: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

input:focus,
textarea:focus,
[data-testid="chat-input"]:focus,
[data-testid="chat-input"] textarea:focus,
textarea#chat-input,
.cl-composer textarea:focus,
.cl-composer .cl-textarea:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Action buttons (AskActionMessage) */
.cl-action-button,
[data-testid="action-button"] {
    background-color: var(--vodafone-grey) !important;
    color: var(--vodafone-white) !important;
    border-radius: 25px !important;
    padding: 10px 25px !important;
    margin: 4px !important;
    transition: all 0.3s ease;
}

.cl-action-button:hover,
[data-testid="action-button"]:hover {
    background-color: var(--vodafone-red) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Headers */
h1, h2, h3 {
    color: var(--vodafone-red) !important;
    font-weight: 500;
}

/* Links */
a {
    color: var(--vodafone-red);
}

a:hover {
    color: #cc0000;
}

/* Spinner/Loading */
.cl-spinner,
.MuiCircularProgress-root {
    color: var(--vodafone-red) !important;
}

/* Chat history item hover */
[data-testid="thread-item"]:hover {
    background-color: rgba(230, 0, 0, 0.1) !important;
}

/* Selected chat history item */
[data-testid="thread-item"].selected,
[data-testid="thread-item"][aria-selected="true"] {
    border-left: 4px solid var(--vodafone-red) !important;
    background-color: rgba(230, 0, 0, 0.05) !important;
}

/* Responsive design */
@media (max-width: 600px) {
    h1 {
        font-size: 1.5rem !important;
    }

    button {
        padding: 8px 15px !important;
    }
}