body {
    background-color: #0B0F19;
    color: #F3F4F6;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #111827; 
}
::-webkit-scrollbar-thumb {
    background: #374151; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4B5563; 
}

/* Typing indicator dots */
.typing-dot {
    animation: typing 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.glass-panel {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.drag-drop-active #dropZoneOverlay {
    opacity: 1;
    pointer-events: auto;
}

.drag-drop-active #chatComposer {
    border-color: #06B6D4;
    box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.45), 0 0 30px rgba(6, 182, 212, 0.18);
}

.toast-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* Responsive chat layout fixes
   The app can be wide, narrow, or embedded in a weird browser pane because apparently layouts enjoy drama.
   These rules make AI bubbles use available room on large screens while still shrinking safely on small screens. */
*, *::before, *::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#appRoot,
#chatArea,
#messagesContainer,
#emptyState,
header {
    min-width: 0;
    max-width: 100%;
}

#appRoot {
    overflow: hidden;
}

#chatArea {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

#messagesContainer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    align-items: stretch;
}

#currentChatTitle,
#systemStatus,
#systemStatusText {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hard override for message widths.
   Rows now always occupy the chat width. The bubble decides its own size.
   This prevents user bubbles from collapsing into a tragic cyan skyscraper. */
.chat-message {
    box-sizing: border-box;
    display: flex;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible;
}

.chat-message-ai {
    width: min(100%, 1280px) !important;
    max-width: calc(100% - 1rem) !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    justify-content: flex-start;
}

.chat-message-user {
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-end !important;
}

.chat-avatar {
    flex: 0 0 2rem;
}

.chat-bubble {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
}

.chat-message-ai .chat-bubble {
    flex: 1 1 auto;
    width: 100% !important;
}

.chat-message-user .chat-bubble {
    box-sizing: border-box;
    display: inline-block !important;

    flex: 0 0 auto !important;
    flex-basis: auto !important;

    width: max-content !important;
    min-width: 0 !important;
    max-width: min(80%, 48rem) !important;

    margin-left: auto !important;
    margin-right: 0 !important;

    overflow: visible !important;
}

.chat-message-user .message-content {
    box-sizing: border-box;
    display: block;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;

    text-align: left;
    overflow: visible !important;
}

.chat-bubble .message-content {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

.chat-bubble .message-content > * {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 768px) {
    #chatArea {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .chat-message,
    .chat-message-ai,
    .chat-message-user {
        width: 100% !important;
        max-width: 100% !important;
    }

    .chat-message {
        gap: 0.5rem;
    }

    .chat-bubble {
        padding: 0.85rem;
    }
}