/* ========== 全局样式 ========== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f8f9fa; /* Light gray background */
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

/* ========== 编辑器容器样式 ========== */
.editor-container {
    background-color: #ffffff;
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Soft shadow */
    width: 100%;
    max-width: 900px; /* Max width, similar to Notion/Feishu content area */
    display: flex;
    flex-direction: column;
    height: 90vh; /* Fixed height 90% of viewport */
}

/* ========== 工具栏样式 ========== */
.toolbar {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0; /* Bottom divider */
    gap: 8px; /* Button spacing */
    background-color: #fdfdfd; /* Light background */
    flex-shrink: 0; /* Prevent toolbar from shrinking */
    border-radius: 12px 12px 0 0; /* Top rounded corners */
}

.language-select {
    position: relative;
}

.language-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px; /* Space for arrow */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007AFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.6-3.6%205.4-7.9%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

/* ========== 代码样式 ========== */
:not(pre) > code {
    background-color: #f1f3f5; /* Light gray background */
    padding: 3px 6px; /* Inner padding */
    border-radius: 5px; /* Rounded corners */
    border: 1px solid #dee2e6; /* Light border */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* Monospace font */
    font-size: 0.9em; /* Slightly smaller font size */
}

pre {
    background-color: #2d2d2d; /* Dark background, from prism-tomorrow theme */
    border-radius: 8px; /* Rounded corners */
    padding: 16px; /* Inner padding */
    margin: 1em 0; /* Top/bottom margin */
    overflow-x: auto; /* Horizontal scroll */
    white-space: pre; /* Preserve whitespace */
}

pre code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.9em;
    color: #ccc; /* From prism-tomorrow theme */
    background: none;
    padding: 0;
}

/* Common styles for toolbar buttons and selectors */
.toolbar button, .toolbar label, .toolbar select {
    background-color: #ffffff; /* White background */
    border: 1px solid #e0e0e0; /* Light border */
    border-radius: 6px; /* Rounded corners */
    padding: 8px 12px; /* Inner padding */
    cursor: pointer; /* Pointer cursor */
    font-size: 14px; /* Font size */
    color: #333; /* Text color */
    transition: all 0.2s ease; /* Smooth transition effect */
    display: flex;
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
    min-width: 40px; /* Minimum width to prevent buttons from being too small */
    appearance: none; /* Remove default styles */
    -webkit-appearance: none;
    -moz-appearance: none;
}

.toolbar button:hover, .toolbar label:hover, .toolbar select:hover {
    background-color: #f0f0f0;
    border-color: #c0c0c0;
    transform: translateY(-1px);
}

.toolbar button:active {
    background-color: #e0e0e0;
    transform: translateY(0);
}

.toolbar input[type="file"] {
    display: none; /* Hide default file input */
}

/* ========== 编辑器内容区域样式 ========== */
.editor-content {
    flex-grow: 1; /* Occupy remaining space */
    padding: 24px 32px; /* Inner padding */
    min-height: 400px; /* Minimum height */
    outline: none; /* Remove focus outline */
    line-height: 1.6; /* Line height */
    font-size: 16px; /* Base font size */
    color: #333; /* Text color */
    overflow-y: auto; /* Enable vertical scrolling for long content */
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

.editor-content::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}

.editor-content h1 {
    font-size: 2.5em;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: #222;
}
.editor-content h2 {
    font-size: 2em;
    font-weight: 600;
    margin-top: 1.4em;
    margin-bottom: 0.7em;
    color: #222;
}
.editor-content h3 {
    font-size: 1.75em;
    font-weight: 600;
    margin-top: 1.3em;
    margin-bottom: 0.6em;
    color: #222;
}
.editor-content h4 {
    font-size: 1.5em;
    font-weight: 500;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    color: #222;
}
.editor-content p {
    margin-bottom: 1em;
}
.editor-content strong {
    font-weight: 600;
}
.editor-content em {
    font-style: italic;
}
.editor-content ul, .editor-content ol {
    margin-left: 20px;
    margin-bottom: 1em;
    padding-left: 0;
}
.editor-content ul li {
    list-style-type: disc;
    margin-bottom: 0.5em;
}
.editor-content ol li {
    list-style-type: decimal;
    margin-bottom: 0.5em;
}
/* ========== 代码语法高亮样式 ========== */
/* Custom PyCharm Darcula style for Prism.js theme override */
.editor-content pre[class*="language-"] {
    background-color: #2B2B2B; /* PyCharm Darcula background color */
    color: #A9B7C6; /* Default text color */
    border-radius: 8px; /* Rounded corners */
    padding: 16px; /* Inner padding */
    margin-bottom: 1em; /* Bottom margin */
    overflow-x: auto; /* Horizontal scroll */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* Monospace font */
    font-size: 14px; /* Font size */
    line-height: 1.5; /* Line height */
    border: 1px solid #3C3F41; /* Dark border */
    position: relative; /* For copy button positioning */
}

/* Code syntax highlighting - comment style */
.editor-content .token.comment,
.editor-content .token.prolog,
.editor-content .token.doctype,
.editor-content .token.cdata {
    color: #808080; /* Gray for comments */
}

/* Punctuation, operators */
.editor-content .token.punctuation,
.editor-content .token.operator {
    color: #A9B7C6; /* Default text color */
}
.editor-content .token.boolean,
.editor-content .token.number,
.editor-content .token.constant {
    color: #2ba6b2; /* Light blue for numbers/booleans */
}
.editor-content .token.string {
    color: #67a570; /* Dark green for strings */
}

/* Code syntax highlighting - keyword style (function, const, var, if, else, return, etc.) */
.editor-content .token.keyword {
    color: #c88a6a; /* Orange-brown for keywords */
}

/* Code syntax highlighting - function and method style */
.editor-content .token.function {
    color: #55a2ec; /* Blue for function names */
}

/* Variables, properties */
.editor-content .token.variable,
.editor-content .token.property {
    color: #cdb174; /* Purple-ish for variables/properties */
}

/* Class names, type names */
.editor-content .token.class-name,
.editor-content .token.tag {
    color: #A9B7C6; /* Light grey/white for class names */
}

/* Attributes, selectors */
.editor-content .token.attr-name,
.editor-content .token.selector {
    color: #A9B7C6; /* Adjust as needed */
}

/* Other tokens that might need adjustment */
.editor-content .token.entity,
.editor-content .token.url,
.editor-content .token.inserted {
    color: #6A8759; /* String-like */
}
.editor-content .token.atrule,
.editor-content .token.attr-value,
.editor-content .token.regex,
.editor-content .token.important {
    color: #CC7832; /* Keyword-like */
}
.editor-content .token.deleted {
    color: #FF6B6B; /* Red for deleted */
}

.editor-content code {
    background-color: rgba(27,31,35,.05); /* Remove light background for inline code in dark theme */
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 14px;
    color: inherit; /* Inherit color from parent pre */
}
.editor-content blockquote {
    border-left: 4px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    color: #666;
}
.editor-content hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 2em 0;
}

/* ========== 复制按钮样式 ========== */
.copy-button {
    position: absolute; /* Absolute positioning */
    top: 8px; /* Distance from top */
    right: 8px; /* Distance from right */
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
    color: #A9B7C6; /* Text color */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Semi-transparent border */
    border-radius: 4px; /* Rounded corners */
    padding: 4px 8px; /* Inner padding */
    font-size: 0.8em; /* Font size */
    cursor: pointer; /* Pointer cursor */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease; /* Opacity transition effect */
    z-index: 10; /* Z-index */
}
.editor-content pre:hover .copy-button {
    opacity: 1; /* Show on hover */
}
.copy-button:active {
    background-color: rgba(255, 255, 255, 0.2);
}
.copy-button i {
    margin-right: 4px;
}

/* Copy message styles */
.copy-message {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 11;
}
.copy-message.show {
    opacity: 1;
}

/* ========== 消息提示框样式 ========== */
.message-box {
    position: fixed; /* Fixed positioning */
    top: 60px; /* Distance from top */
    left: 50%; /* Horizontal center */
    transform: translateX(-50%); /* Exact centering */
    background-color: #333; /* Dark background */
    color: #fff; /* White text */
    padding: 10px 20px; /* Inner padding */
    border-radius: 8px; /* Rounded corners */
    z-index: 1000; /* High z-index */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out; /* Opacity transition */
    white-space: nowrap; /* Prevent text wrapping */
}
.message-box.show {
    opacity: 1;
}

/* ========== 加载动画样式 ========== */
.loading-overlay {
    position: fixed; /* Fixed positioning */
    top: 0;
    left: 0;
    width: 100%; /* Full screen width */
    height: 100%; /* Full screen height */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center */
    z-index: 2000; /* Highest z-index */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Invisible by default */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transition effect */
}
.loading-overlay.show {
    opacity: 1;
    visibility: visible;
}
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========== 可调整大小的图片样式 ========== */
.resizable-image-container {
    position: relative; /* Relative positioning */
    display: inline-block; /* Inline-block element */
    line-height: 0; /* Remove extra space below image */
    margin: 0; /* No outer margin */
}

.align-left {
    display: flex;
    justify-content: flex-start;
}

.align-center {
    display: flex;
    justify-content: center;
}

.align-right {
    display: flex;
    justify-content: flex-end;
}

.toolbar-divider {
    border-left: 1px solid #ccc;
    height: 20px;
    margin: 0 8px;
    display: inline-block;
    vertical-align: middle;
}

.resizable-image-container img {
    display: block;
    width: 100%; /* Image takes full width of container */
    height: auto;
}

.resize-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #09f;
    border: 2px solid #fff;
    border-radius: 50%;
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    z-index: 10;
}

/* ========== 自定义工具提示样式 ========== */
[data-tooltip] {
    position: relative; /* Relative positioning */
    cursor: pointer; /* Pointer cursor */
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1000;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}