/* 短剧工坊 - 与 Tailwind 配合的补充样式 */

/* 顶部右侧操作按钮：统一尺寸与对齐 */
.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    min-height: 2rem;
    font-size: 0.8125rem;
    color: #374151;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}
.header-btn:hover:not(:disabled) {
    color: #7c3aed;
    background: #f5f3ff;
}
.header-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.header-btn .header-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
.header-btn .header-icon-chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    margin-left: 0.125rem;
}

/* 导出下拉：点击「导出」后显示菜单 */
.export-open .export-dropdown {
    display: block;
}

/* 加载动画：生成中状态 */
.loading-spinner,
.loading-spinner-xs {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.loading-spinner { width: 24px; height: 24px; }
.loading-spinner-xs { width: 16px; height: 16px; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 生成按钮：保持最小宽度，生成中状态不塌陷 */
.btn-generate {
    min-width: 8rem;
    min-height: 2.5rem;
}
.btn-generate .loading-spinner-xs { color: inherit; }

/* Markdown 内容区 */
.markdown-body {
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
    word-wrap: break-word;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
}
.markdown-body h1 { font-size: 1.5em; }
.markdown-body h2 { font-size: 1.25em; }
.markdown-body h3 { font-size: 1.1em; }
.markdown-body p { margin-bottom: 0.75em; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin-bottom: 0.75em; }
.markdown-body li { margin-bottom: 0.25em; }
.markdown-body code {
    padding: 0.2em 0.35em;
    font-size: 0.9em;
    background: #f3f4f6;
    border-radius: 4px;
    color: #1f2937;
}
.markdown-body pre { margin: 0.75em 0; overflow-x: auto; }
.markdown-body pre code { padding: 0.75rem; display: block; background: #1f2937; color: #e5e7eb; }
.markdown-body blockquote {
    border-left: 4px solid #8b5cf6;
    padding-left: 1em;
    margin: 0.75em 0;
    color: #6b7280;
}
.markdown-body table { border-collapse: collapse; width: 100%; margin: 0.75em 0; }
.markdown-body th, .markdown-body td { border: 1px solid #e5e7eb; padding: 0.5em 0.75em; text-align: left; }
.markdown-body th { background: #f9fafb; font-weight: 600; }

.markdown-body-sm {
    font-size: 13px;
    line-height: 1.6;
    color: #4b5563;
}
.markdown-body-sm h1, .markdown-body-sm h2, .markdown-body-sm h3 { font-size: 1em; margin: 0.5em 0 0.25em; }

.storyboard-table table { width: 100%; }
.storyboard-table th, .storyboard-table td { font-size: 13px; }