/* Study-friendly theme styles */
.study-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: #24292e;
}

/* 平滑过渡效果 */
.markdown-content {
    transition: all 0.3s ease;
    /* 添加显示属性，确保内容可见 */
    display: block;
    /* 确保内容正常流动 */
    overflow: visible;
    /* 确保内容不会被裁剪 */
    overflow-wrap: break-word;
    /* 确保内容有适当的间距 */
    padding: 10px 0;
    /* 确保内容有适当的行高 */
    line-height: 1.6;
    /* 确保内容有适当的字体大小 */
    font-size: 1.1em;
    /* 确保内容有适当的字体颜色 */
    color: #24292e;
    /* 确保内容有适当的背景色 */
    background-color: transparent;
    /* 确保内容有适当的边距 */
    margin: 0;
    /* 确保内容有适当的宽度 */
    width: 100%;
    /* 确保内容有适当的盒模型 */
    box-sizing: border-box;
}

/* 新增内容的高亮效果 */
.new-content {
    background-color: rgba(255, 255, 0, 0.2);
    animation: highlight 2s ease-out;
}

@keyframes highlight {
    0% { background-color: rgba(255, 255, 0.2); }
    100% { background-color: transparent; }
}

.study-content h1, .study-content h2, .study-content h3, .study-content h4, .study-content h5, .study-content h6 {
    color: #0366d6;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 16px;
    line-height: 1.25;
}

.study-content h1 {
    font-size: 2em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #eaecef;
}

.study-content h2 {
    font-size: 1.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #eaecef;
}

.study-content h3 {
    font-size: 1.5em;
}

.study-content h4 {
    font-size: 1.25em;
}

.study-content p {
    margin-bottom: 16px;
    line-height: 1.8;
    font-size: 1.1em;
}

/* 调整列表元素的字体大小 */
.study-content ul, .study-content ol {
    font-size: 1.1em;
}

.study-content li {
    font-size: 1.1em;
}

.study-content ul, .study-content ol {
    margin: 16px 0;
    padding-left: 32px;
}

.study-content ul {
    list-style-type: disc;
}

.study-content ol {
    list-style-type: decimal;
}

.study-content li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.study-content li > p {
    margin-top: 16px;
}

.study-content li + li {
    margin-top: 0.25em;
}

.study-content code {
    background-color: rgba(27, 31, 35, 0.05);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 85%;
    color: #24292e;
}

.study-content pre {
    background-color: #f6f8fa;
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 16px 0;
    border: 1px solid #e1e5e9;
    line-height: 1.45;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 85%;
}

.study-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.study-content blockquote {
    border-left: 0.25em solid #dfe2e5;
    padding: 0 1em;
    margin: 16px 0;
    color: #6a737d;
}

.study-content blockquote p {
    margin: 0;
}

.study-content a {
    color: #0366d6;
    text-decoration: none;
}

.study-content a:hover {
    text-decoration: underline;
}

.study-content hr {
    border: 0;
    height: 1px;
    background-color: #e1e5e9;
    margin: 24px 0;
}

.study-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.study-content table th, .study-content table td {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}

.study-content table tr:nth-child(2n) {
    background-color: #f6f8fa;
}

.study-content img {
    max-width: 100%;
    box-sizing: content-box;
    background-color: #fff;
}

/* Mermaid图表容器 */
.mermaid {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e1e5e9;
    text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .study-content {
        padding: 15px;
    }
    
    .study-content h1 {
        font-size: 1.6em;
    }
    
    .study-content h2 {
        font-size: 1.3em;
    }
    
    .study-content pre {
        padding: 10px;
        font-size: 70%;
    }
    
    /* 移动端主面板调整 */
    #mainPanel {
        padding: 0.8rem;
    }
    
    /* 移动端下方面板调整 */
    #downPanel {
        margin-top: 0.8rem;
    }
    
    /* 移动端 metaphorContent 调整 */
    #metaphorContent {
        font-size: 1em;
        padding: 12px;
    }
}

/* 针对小屏幕设备的优化 */
@media (max-width: 480px) {
    .study-content {
        padding: 10px;
    }
    
    .study-content h1 {
        font-size: 1.4em;
    }
    
    .study-content h2 {
        font-size: 1.2em;
    }
    
    .study-content p {
        font-size: 1em;
        line-height: 1.6;
    }
    
    .study-content ul, .study-content ol {
        font-size: 1em;
        padding-left: 20px;
    }
    
    .study-content pre {
        padding: 8px;
        font-size: 65%;
    }
    
    #mainPanel {
        padding: 0.6rem;
    }
    
    #downPanel {
        margin-top: 0.6rem;
    }
    
    #metaphorContent {
        font-size: 0.9em;
        padding: 10px;
    }
    
    /* 优化输入框在小屏幕上的显示 */
    #concept, #context {
        font-size: 16px; /* 防止iOS缩放 */
        padding: 2px 3px;
    }
    
    /* 优化按钮在小屏幕上的显示 */
    #generateBtn {
        padding: 2px 3px;
        font-size: 0.9em;
    }
}

/* 上下布局特定样式 */
#mainPanel {
    /* 移除固定主面板高度，让内容自然展开 */
}

#downPanel {
    /* 确保下方面板占据剩余空间 */
    flex: 1;
    display: flex;
    flex-direction: column;
    /* 增加默认高度，预留更多展示空间 */
    min-height: 90vh;
}

/* metaphorContent 样式调整，使其更大并铺满屏幕 */
#metaphorContent {
    font-size: 1.2em;
    line-height: 1.8;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    /* 确保内容区域充分利用空间 */
    min-height: 70vh;
}

/* 确保整个页面可以滚动 */
body {
    overflow-y: auto;
}

/* 确保downPanel有足够的高度 */
#downPanel {
    min-height: 100vh;
}

/* 可拖动分隔条样式（上下拖动） */
.vertical-resizer {
    height: 6px;
    background-color: #e1e5e9;
    cursor: row-resize;
    transition: background-color 0.3s ease;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0.1);
}

.vertical-resizer:hover {
    background-color: #667eea;
}

.vertical-resizer.dragging {
    background-color: #667eea;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}