.customer-ui-root {
    background: #e5ddd5;
    background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}

.chat-header-bar {
    background: #075e54;
    color: #fff;
}

.bubble-customer {
    background: #dcf8c6;
    border-radius: 0.5rem 0.5rem 0.25rem 0.5rem;
    max-width: min(85%, 420px);
}

.bubble-other {
    background: #fff;
    border-radius: 0.5rem 0.5rem 0.5rem 0.25rem;
    max-width: min(85%, 420px);
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.08);
}

.bubble-system {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 0.375rem;
    font-size: 0.8rem;
}

.chat-scroll-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.message-input-shell {
    background: #f0f0f0;
    border-top: 1px solid #ddd;
}

.message-input-shell textarea {
    resize: none;
    min-height: 40px;
    max-height: 120px;
    field-sizing: content;
}

.typing-dots span {
    animation: chat-bounce 1.2s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
    animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes chat-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.read-tick {
    font-size: 0.7rem;
    letter-spacing: -2px;
}

.virtualize-chat .virtualize-spacer {
    min-height: 1px;
}

/* Agent dashboard / inbox primitives reused by Components/Chat — match the
   AgentMessageBubble bubble-agent-self / bubble-incoming and ChatSidebar
   chat-row* classes pulled in from the deprecated ChatPlatform.Web styles. */
.bubble-agent-self {
    background: #dcf8c6;
    border-radius: 0.5rem 0.5rem 0.25rem 0.5rem;
    max-width: min(85%, 480px);
}

.bubble-incoming {
    background: #fff;
    border-radius: 0.5rem 0.5rem 0.5rem 0.25rem;
    max-width: min(85%, 480px);
}

.bubble-system-agent {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    max-width: 540px;
}

.chat-row {
    background: #fff;
    transition: background 120ms ease;
}

.chat-row:hover {
    background: #f8f9fa;
}

.chat-row-active {
    background: #e7f1ff !important;
}

.chat-row-waiting {
    border-left: 3px solid #dc3545 !important;
}

.chat-row-new-pulse {
    animation: chat-row-pulse 1.5s ease-in-out 1;
}

@keyframes chat-row-pulse {
    0%   { background: rgba(13, 110, 253, 0.18); }
    50%  { background: rgba(13, 110, 253, 0.05); }
    100% { background: transparent; }
}

.sidebar-panel { width: 320px; flex-shrink: 0; border-right: 1px solid #dee2e6; background: #fff; }
.thread-panel  { flex-grow: 1; background: #f6f8fb; }
.thread-scroll { flex-grow: 1; overflow-y: auto; }