/* ═══════════════════════════════════════════════════════════════
   MammothChatWindow — bubble messaging styles
   Loaded after mammoth-theme.css. Uses !important where needed
   to override the theme's blanket .mud-paper rules.
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────────── */
.mammoth-chat-window {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.mammoth-chat-window--embedded {
    border-radius: 0;
}

/* ── Header ─────────────────────────────────────────────────── */
.mammoth-chat-window__header {
    flex-shrink: 0;
    z-index: 1;
}

/* ── Message list (scrollable) ──────────────────────────────── */
.mammoth-chat-window__messages {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scroll-behavior: smooth;
}

.mammoth-chat-window__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* ── Input area ─────────────────────────────────────────────── */
.mammoth-chat-window__input {
    flex-shrink: 0;
    z-index: 1;
}

/* ── Message row ────────────────────────────────────────────── */
.mammoth-chat-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 80%;
    margin-bottom: 2px;
}

.mammoth-chat-message--mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.mammoth-chat-message--theirs {
    align-self: flex-start;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.mammoth-chat-message__avatar {
    flex-shrink: 0;
    margin-bottom: 4px;
}

/* ── Bubble ──────────────────────────────────────────────────── */
.mammoth-chat-message__bubble {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mammoth-chat-message__sender {
    margin-bottom: 2px;
    padding-left: 12px;
}

/* Override mammoth-theme.css .mud-paper blanket rules */
.mammoth-chat-message__content.mud-paper {
    padding: 8px 14px !important;
    word-break: break-word;
    box-shadow: none !important;
    border: none !important;
}

.mammoth-chat-message--theirs .mammoth-chat-message__content.mud-paper {
    background-color: var(--mammoth-bg-inset) !important;
    border-radius: 18px 18px 18px 4px !important;
    color: var(--mammoth-text-primary) !important;
}

.mammoth-chat-message--mine .mammoth-chat-message__content.mud-paper {
    background-color: var(--mammoth-primary) !important;
    border-radius: 18px 18px 4px 18px !important;
    color: var(--mammoth-text-on-dark) !important;
}

/* Dark mode bubbles */
body.mammoth-dark .mammoth-chat-message--theirs .mammoth-chat-message__content.mud-paper {
    background-color: var(--mammoth-primary-8) !important;
    color: var(--mammoth-text-primary) !important;
}

body.mammoth-dark .mammoth-chat-message--mine .mammoth-chat-message__content.mud-paper {
    background-color: var(--mammoth-primary) !important;
    color: var(--mammoth-text-on-dark) !important;
}

/* ── Meta (timestamp + delivery status) ──────────────────────── */
.mammoth-chat-message__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 12px 0;
    opacity: 0.7;
}

.mammoth-chat-message--mine .mammoth-chat-message__meta {
    justify-content: flex-end;
}

.mammoth-chat-message--mine .mammoth-chat-message__content.mud-paper .mud-typography {
    color: var(--mammoth-text-on-dark) !important;
}

.mammoth-chat-message__status {
    display: inline-flex;
    align-items: center;
}

/* ── Typing indicator ─────────────────────────────────────────── */
.mammoth-chat-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px;
    align-self: flex-start;
}

.mammoth-chat-typing__dots {
    display: flex;
    gap: 3px;
}

.mammoth-chat-typing__dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--mammoth-text-muted);
    animation: mammoth-typing-bounce 1.4s infinite ease-in-out both;
}

.mammoth-chat-typing__dots span:nth-child(1) { animation-delay: 0s; }
.mammoth-chat-typing__dots span:nth-child(2) { animation-delay: 0.16s; }
.mammoth-chat-typing__dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes mammoth-typing-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* ── Unread marker ────────────────────────────────────────────── */
.mammoth-chat-unread-marker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.mammoth-chat-unread-marker .mud-divider {
    flex: 1;
}