/* Chat Message Component Styles */
.chat-message {
    display: flex;
    animation: msgPopIn 0.4s var(--ease-out) both;
}

.chat-message--user {
    justify-content: flex-end;
}

.chat-message--assistant {
    justify-content: flex-start;
}

.chat-message--system {
    justify-content: center;
}

/* User message - simple bubble */
.chat-message--user .chat-message__content {
    background: linear-gradient(135deg, var(--primary) 0%, #8b7cf6 100%);
    color: #fff;
    padding: 8px 12px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25);
    font-size: 15px;
    word-wrap: break-word;
    white-space: pre-line;
    max-width: 70%;
    margin: 0;
    text-indent: 0;
}

/* Assistant message - document style (仅用于非 markdown 内容) */
.chat-message--assistant .chat-message__content:not(.markdown-body) {
    max-width: 78%;
    padding: 8px 0;
    border-radius: 0;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-size: 15px;
    position: relative;
    transition: box-shadow 0.3s var(--ease-out);
    background: transparent;
    color: var(--text);
    border: none;
    box-shadow: none;
}

/* System message bubble */
.chat-message--system .chat-message__content {
    background: linear-gradient(
        135deg,
        rgba(108, 92, 231, 0.06) 0%,
        rgba(253, 121, 168, 0.04) 100%
    );
    color: var(--text-dim);
    border: 1px solid var(--border);
    max-width: 88%;
    font-size: 13px;
    text-align: center;
    padding: 14px 24px;
    border-radius: var(--radius);
    box-shadow: none;
    animation: msgFadeIn 0.5s ease-out both;
}

/* GitHub Markdown 样式覆盖 */
.chat-message--assistant .markdown-body {
    background: transparent !important;
    color: var(--text) !important;
    font-size: 12px !important;
    padding: 4px 0 !important;
    max-width: 78%;
}

/* Streaming cursor */
.chat-message--streaming .chat-message__content::after {
    content: " ▌";
    animation: cursorBlink 0.8s step-end infinite;
    color: var(--primary-light);
    font-weight: 300;
}

/* Responsive */
@media (max-width: 600px) {
    .chat-message--user .chat-message__content,
    .chat-message--assistant .chat-message__content:not(.markdown-body),
    .chat-message--assistant .markdown-body,
    .chat-message--system .chat-message__content {
        max-width: 92%;
    }

    .chat-message--assistant .markdown-body {
        font-size: 13px !important;
        overflow-wrap: anywhere;
    }
}