/* ========== 动画效果 ========== */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-enter {
    animation: slideUp 0.3s ease-out;
}

.typing-indicator span {
    animation: blink 1.4s infinite;
    animation-fill-mode: both;
}

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

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

@keyframes blink {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

/* ========== 自定义滚动条 ========== */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ========== 实时通知弹窗样式 ========== */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.toast {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: slideInRight 0.3s ease-out;
    border-left: 4px solid #3b82f6;
}

.toast.success {
    border-left-color: #10b981;
}

.toast.error {
    border-left-color: #ef4444;
}

.toast.processing {
    border-left-color: #f59e0b;
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast.removing {
    animation: slideOutRight 0.3s ease-out forwards;
}

.toast-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.toast-icon.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 4px;
}

.toast-message {
    font-size: 13px;
    color: #6b7280;
    word-wrap: break-word;
}

.toast-close {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s;
}

.toast-close:hover {
    color: #4b5563;
}

/* ========== 代码块折叠样式 ========== */
.code-block-wrapper {
    position: relative;
    margin: 12px 0;
}

.code-block-header {
    background: #1e293b;
    color: #e2e8f0;
    padding: 8px 12px;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.code-block-header:hover {
    background: #334155;
}

.code-block-content {
    max-height: 300px;
    overflow: auto;
    transition: max-height 0.3s ease;
}

.code-block-content.collapsed {
    max-height: 0;
    overflow: hidden;
}

.code-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.tool-output-block {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin: 12px 0;
    background: #f8fafc;
    overflow: hidden;
}

.tool-output-header {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.tool-output-header:hover {
    background: #eef2ff;
}

.tool-output-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #1f2937;
}

.tool-output-icon {
    font-size: 20px;
}

.tool-output-name {
    font-weight: 600;
    font-size: 14px;
}

.tool-output-desc {
    font-size: 12px;
    color: #6b7280;
}

.tool-output-toggle {
    width: 20px;
    height: 20px;
    transition: transform 0.2s;
    color: #475569;
}

.tool-output-body {
    border-top: 1px solid #e2e8f0;
    background: #fff;
    max-height: 400px;
    overflow: auto;
    transition: max-height 0.3s ease;
}

.tool-output-body.collapsed {
    max-height: 0;
    padding: 0;
    overflow: hidden;
}

.tool-output-body pre {
    margin: 0;
    padding: 16px;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 文件上传工具输出块紧凑样式（高度减半） */
.file-upload-compact .tool-output-body {
    max-height: 200px;
}

/* 确保文件上传工具输出块折叠时完全收起 */
.file-upload-compact .tool-output-body.collapsed {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.file-upload-compact .tool-output-body pre {
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
}

/* ========== 工具生成的图片样式 ========== */
.tool-output-images {
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tool-generated-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    object-fit: contain;
}

.tool-generated-image:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========== 主要内容区域的图片样式 ========== */
.ai-content-images {
    padding: 12px 0;
    margin: 12px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ai-content-images .tool-generated-image {
    max-width: 100%;
    max-height: 500px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    object-fit: contain;
}

/* ========== call_interpreter_fastapi 工具特殊样式 ========== */
.tool-output-interpreter {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 8px 0;
    overflow: visible;
}

.tool-output-header-interpreter {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    background: #f3f4f6;
    border-radius: 8px;
    transition: background-color 0.2s;
    border: 1px solid #e5e7eb;
}

.tool-output-header-interpreter:hover {
    background: #e5e7eb;
}

.tool-output-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    animation: spinner-rotate 1.4s linear infinite;
}

.spinner-dot {
    position: absolute;
    width: 3.5px;
    height: 3.5px;
    background: #4b5563;
    border-radius: 50%;
    animation: spinner-pulse 1.4s infinite ease-in-out;
    /* 所有点都从中心(10, 10)开始定位 */
    top: 50%;
    left: 50%;
    margin-top: -1.75px; /* 点高度的一半 */
    margin-left: -1.75px; /* 点宽度的一半 */
}

/* 6个点围绕中心圆形排列，每个点间隔60度 */
/* 半径7px，使用精确的三角函数计算 */
/* sin(60°) ≈ 0.866025, cos(60°) = 0.5 */
.spinner-dot:nth-child(1) {
    /* 0度 - 顶部: (0, -7) */
    transform: translate(0, -7px);
    animation-delay: 0s;
}

.spinner-dot:nth-child(2) {
    /* 60度 - 右上: (7*0.866, -7*0.5) = (6.062, -3.5) */
    transform: translate(6.062px, -3.5px);
    animation-delay: 0.23s;
}

.spinner-dot:nth-child(3) {
    /* 120度 - 右下: (7*0.866, 7*0.5) = (6.062, 3.5) */
    transform: translate(6.062px, 3.5px);
    animation-delay: 0.46s;
}

.spinner-dot:nth-child(4) {
    /* 180度 - 底部: (0, 7) */
    transform: translate(0, 7px);
    animation-delay: 0.69s;
}

.spinner-dot:nth-child(5) {
    /* 240度 - 左下: (-7*0.866, 7*0.5) = (-6.062, 3.5) */
    transform: translate(-6.062px, 3.5px);
    animation-delay: 0.92s;
}

.spinner-dot:nth-child(6) {
    /* 300度 - 左上: (-7*0.866, -7*0.5) = (-6.062, -3.5) */
    transform: translate(-6.062px, -3.5px);
    animation-delay: 1.15s;
}

@keyframes spinner-pulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

@keyframes spinner-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.tool-output-interpreter-text {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

/* ========== 文件附件卡片样式 ========== */
.file-attachment-card {
    background: #f3f4f6;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #e5e7eb;
    transition: background-color 0.2s;
    max-width: 100%;
}

.file-attachment-card:hover {
    background: #e5e7eb;
}

.file-attachment-content {
    flex: 1;
    min-width: 0;
}

.file-attachment-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.file-attachment-name {
    font-size: 13px;
    font-weight: 400;
    color: #1f2937;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
    line-height: 1.4;
}

.file-attachment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-attachment-type {
    display: flex;
    align-items: center;
    gap: 6px;
}

.file-type-icon {
    width: 14px;
    height: 14px;
    color: #6b7280;
    flex-shrink: 0;
}

.file-type-text {
    font-size: 11px;
    color: #6b7280;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.file-attachment-remove {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.file-attachment-remove:hover {
    color: #ef4444;
    background: #fee2e2;
}

/* 文件上传状态 */
.file-attachment-card.uploading {
    border-color: #3b82f6;
}

.file-attachment-card.success {
    border-color: #10b981;
}

.file-attachment-card.error {
    border-color: #ef4444;
}

.file-upload-spinner {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: none;
}

.file-upload-spinner .spinner-svg {
    width: 100%;
    height: 100%;
    color: #3b82f6;
}

.file-upload-spinner .spinner-circle {
    transform-origin: center;
    animation: file-spinner-rotate 1s linear infinite;
}

@keyframes file-spinner-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ========== Markdown 展示基础样式 ========== */
.markdown-body pre {
    background-color: #0f172a;
    color: #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.75rem;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.markdown-body code {
    background-color: #f1f5f9;
    color: #0f172a;
    border-radius: 0.25rem;
    padding: 0.1rem 0.25rem;
}

.markdown-body a {
    color: #2563eb;
    text-decoration: underline;
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
    display: block;
}