@layer bootstrap;
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css") layer(bootstrap);

/* Container styling to look like a modern app */
.all2one-chat-container {
    background-color: #1e1e2e; /* Deep dark background */
    color: #cdd6f4;            /* Soft white text */
    height: 80vh;              /* Responsive viewport height */
    max-height: 800px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border: 1px solid #313244;
}

/* History window scrollbar customization */
#a2o-history {
    scrollbar-width: thin;
    scrollbar-color: #45475a #1e1e2e;
}
#a2o-history::-webkit-scrollbar { width: 8px; }
#a2o-history::-webkit-scrollbar-track { background: #1e1e2e; }
#a2o-history::-webkit-scrollbar-thumb { background: #45475a; border-radius: 4px; }

/* Message Blocks */
.a2o-message-block {
    margin-bottom: 8px;
    transition: background-color 0.2s;
    padding: 8px;
    border-radius: 8px;
}
.a2o-message-block:hover {
    background-color: #242536; /* Slight hover effect */
}

/* Typography matching the screenshot */
.a2o-author {
    color: #cba6f7; /* Light purple for names */
    font-size: 16px;
}

.a2o-time {
    color: #a6adc8; /* Muted gray for timestamps */
    font-size: 12px;
}

.a2o-bubble {
    font-size: 15px;
    line-height: 1.4;
    word-break: break-word;
}

/* Input Area */
.a2o-input-area {
    background-color: #181825;
    border-top: 1px solid #313244 !important;
}

#a2o-input {
    background-color: #313244;
    border: none;
    color: #cdd6f4;
    resize: none; /* Auto-resizing handled by JS */
    border-radius: 8px;
}
#a2o-input:focus {
    box-shadow: none;
    outline: 1px solid #cba6f7;
}

.a2o-tool-btn {
    background-color: transparent;
    border: none;
    font-size: 20px;
    padding: 4px 8px;
}
.a2o-tool-btn:hover {
    background-color: #313244;
}

#a2o-send-btn {
    background-color: #cba6f7;
    color: #11111b;
    font-weight: bold;
    border: none;
    border-radius: 8px;
}
#a2o-send-btn:hover {
    background-color: #b4befe;
}
/* Fix visibility of "Loading..." and "No messages" text */
.all2one-chat-container .text-muted,
.a2o-sys-msg {
    color: #a6adc8 !important; 
}

/* Fix visibility of "Type a message..." placeholder in the text box */
#a2o-input::placeholder {
    color: #a6adc8;
    opacity: 0.8; /* Ensures it looks like a placeholder, but remains readable */
}

/* Fix visibility of the character counter below the input */
.a2o-counter.text-muted {
    color: #a6adc8 !important;
}
/* Custom Emoji Picker */
#a2o-emoji-picker {
    background-color: #1e1e2e !important; /* Match chat background */
    border-color: #313244 !important;
}

.a2o-emoji {
    transition: transform 0.1s ease, background-color 0.1s ease;
    padding: 4px;
    border-radius: 6px;
    user-select: none; /* Prevents text highlighting when clicking fast */
}

.a2o-emoji:hover {
    transform: scale(1.2);
    background-color: #313244;
}