/* 基础重置，避免样式冲突 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    overflow: hidden;
    font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a3a3a3;
}

/* 可编辑区域样式 */
.editor-content {
    transition: all 0.3s ease;
    outline: none;
}
.editor-content:focus {
    border-color: #C82536;
    box-shadow: 0 0 0 2px rgba(200, 37, 54, 0.1);
}
.editor-content:empty:not(:focus)::before {
    content: attr(data-placeholder);
    color: #A3A3A3;
}
.editor-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
}
.editor-content p {
    margin: 8px 0;
    line-height: 1.6;
}
.editor-content h1, .editor-content h2, .editor-content h3, .editor-content h4, .editor-content h5, .editor-content h6 {
    margin: 16px 0 8px;
    font-weight: 600;
}
.editor-placeholder {
    color: #737373;
    user-select: none;
}
.editor-content:not(:empty) .editor-placeholder {
    display: none;
}

/* 华文编辑器容器样式 - 核心修改：实现内容垂直居中 */
.huawenditor {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
/* 内容容器：高度自适应，超出时填满 */
.huawenditor-content {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 无限加载相关样式 */
.infinite-scroll-trigger {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}
.no-more-data {
    color: #a3a3a3;
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
}

/* UEditor容器样式 */
#editor {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
}
/* 基础样式变量 */
:root {
    --primary: #3b82f6;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-500: #6b7280;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
}

/* 过渡效果 */
.transition-base {
    transition: all 0.2s ease;
}

/* 阴影样式 */
.shadow-soft {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.shadow-medium {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 确保下拉菜单不被遮挡 */
#user-menu-container {
    z-index: 100;
}

/* 菜单项悬停效果优化 */
#user-dropdown-menu a:hover {
    background-color: var(--neutral-100);
    color: var(--primary);
}

#user-dropdown-menu a:hover i {
    color: var(--primary);
}
/* 新增样式：模式切换指示器 */
.mode-indicator {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}
.mode-template {
    @apply bg-blue-100 text-blue-800;
}
.mode-material {
    @apply bg-green-100 text-green-800;
}

/* 新增：为素材内容添加特定样式 */
.material-card {
    @apply transition-all duration-300;
}
.material-card:hover {
    @apply transform scale-[1.02];
}

/* 新增：素材类型标签样式 */
.material-type-badge {
    @apply px-2 py-1 text-xs font-medium rounded-full;
}
.material-image {
    @apply bg-purple-100 text-purple-800;
}
.material-video {
    @apply bg-red-100 text-red-800;
}
.material-audio {
    @apply bg-yellow-100 text-yellow-800;
}
.material-document {
    @apply bg-blue-100 text-blue-800;
}
/* 父容器：用于扩展hover区域，解决子菜单消失问题 */
.attachment-btn-wrapper {
    position: relative; /* 作为子菜单的定位参考 */
    display: flex;
    justify-content: center;
}

/* 子菜单默认隐藏 + 左侧定位 */
.attachment-btn-wrapper .submenu {
    position: absolute;
    right: 30px; /* 定位到按钮左侧 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    margin-right: 8px; /* 与按钮保持间距 */
    display: none; /* 默认隐藏 */
    padding: 4px 0;
    z-index: 999; /* 确保不被遮挡 */
    min-width: 140px;
}
.attachment-btn-wrapper .submenu .submenu_body {
    background: white;
    border: 1px solid #e5e7eb; /* neutral-200 */
    border-radius: 4px;
    padding: 4px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 999; /* 确保不被遮挡 */
    min-width: 120px;
    margin-right:20px;
}

/* 子菜单项样式（保留原有交互） */
.attachment-btn-wrapper .submenu-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #374151; /* neutral-700 */
    display: flex;
    align-items: center;
    gap: 4px;
}

.attachment-btn-wrapper .submenu-item:hover {
    background-color: #f9fafb; /* neutral-50 */
}

/* 关键：父容器hover时显示子菜单，且子菜单hover时不消失 */
.attachment-btn-wrapper:hover .submenu {
    display: block;
}

/* 确保子菜单自身hover时也保持显示 */
.attachment-btn-wrapper .submenu:hover {
    display: block;
}