/* SimpleEditor 外掛專用樣式表 
   注意：所有樣式皆加上 .se- 前綴以避免與宿主網站衝突
*/

/* 基礎容器 */
.se-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    display: block;
    overflow: hidden;
    font-family: sans-serif;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    text-align: left;
}

/* 工具列 */
.se-toolbar {
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    transition: background-color 0.3s ease, border 0.3s ease;
    min-height: 40px; /* 確保隱藏按鈕後高度不塌陷 */
}

/* 按鈕 */
.se-btn {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    position: relative;
    box-sizing: border-box;
}
.se-btn:hover { background: #e2e6ea; border-color: #dae0e5; }
.se-btn.active { background: #e7f1ff; color: #0056b3; border-color: #b8daff; }
.se-btn.disabled { opacity: 0.3; pointer-events: none; }
.se-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* 顏色選擇器 (隱藏式) */
.se-color-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    padding: 0;
    border: none;
}

/* 分隔線 */
.se-divider {
    width: 1px;
    height: 20px;
    background: #ccc;
    margin: 0 4px;
}

/* 下拉選單 */
.se-select {
    height: 30px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0 8px;
    color: #495057;
    background: white;
    font-size: 14px;
    cursor: pointer;
}
.se-select:focus { outline: none; border-color: #80bdff; }

/* 編輯區域 */
.se-editor-area {
    position: relative;
    flex: 1;
    min-height: auto; 
    overflow: hidden;
}

/* 內容編輯區塊 */
.se-content {
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    outline: none;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* 內容樣式重置 */
.se-content p { margin: 0 0 1em 0; }
.se-container h1 { font-size: 2em; font-weight: bold; margin-bottom: 0.5em; line-height: 1.2; }
.se-container h2 { font-size: 1.5em; font-weight: bold; margin-bottom: 0.5em; line-height: 1.3; }
.se-content ul, .se-content ol { margin-left: 20px; margin-bottom: 1em; padding-left: 0; }
.se-content blockquote { border-left: 4px solid #eee; padding-left: 15px; color: #666; font-style: italic; margin: 1em 0; }
.se-content img { max-width: 100%; height: auto; border-radius: 4px; cursor: pointer; transition: outline 0.1s; }
.se-content[contenteditable="true"] img:hover { outline: 2px solid #007bff; }
.se-content iframe, .se-content video { max-width: 100%; border: none; display: block; }
.se-content a { color: #007bff; text-decoration: underline; }

/* 表格樣式 */
.se-content table { border-collapse: collapse; width: 100%; margin-bottom: 1em; table-layout: fixed; }
.se-content td, .se-content th { border: 1px solid #000 !important; padding: 8px; vertical-align: top; position: relative; min-width: 30px; }
.se-content[contenteditable="true"] td { resize: horizontal; overflow: hidden; }
.se-content[contenteditable="true"] td:hover { background-color: rgba(0, 123, 255, 0.05); }

/* 影片包裝器 */
.se-video-wrapper { position: relative; display: inline-block; max-width: 100%; margin: 10px 0; }
.se-video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); cursor: pointer; z-index: 10; }
.se-video-wrapper:hover .se-video-overlay { background: rgba(0,0,0,0.1); border: 2px solid #007bff; }
.se-content[contenteditable="false"] .se-video-overlay { display: none; }
.se-content[contenteditable="false"] img { cursor: default; pointer-events: none; }

/* 原始碼模式 */
.se-source { display: none; width: 100%; height: 100%; border: none; padding: 20px; background: #2d2d2d; color: #f8f9fa; font-family: monospace; resize: none; outline: none; box-sizing: border-box; }

/* Placeholder */
.se-content:empty:before { content: attr(data-placeholder); color: #aaa; pointer-events: none; display: block; }

/* 通用隱藏類別 */
.se-hidden { display: none !important; }

/* 燈箱樣式 */
.se-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2147483647; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.se-modal-overlay.open { opacity: 1; pointer-events: auto; }
.se-modal { background: white; width: 90%; max-width: 500px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); overflow: hidden; display: flex; flex-direction: column; font-family: sans-serif; text-align: left; }
.se-modal-header { padding: 15px 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: #f8f9fa; }
.se-modal-title { margin: 0; font-size: 18px; color: #333; font-weight: bold; }
.se-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #999; padding: 0; line-height: 1; }
.se-modal-close:hover { color: #333; }
.se-modal-body { padding: 20px; }
.se-input-group { margin-bottom: 15px; }
.se-input-row { display: flex; gap: 10px; }
.se-input-label { display: block; margin-bottom: 5px; font-weight: bold; font-size: 14px; color: #555; }
.se-text-input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 14px; }
.se-text-input:focus { border-color: #007bff; outline: none; }
.se-preview-box { margin-top: 15px; border: 1px dashed #ccc; background: #fafafa; min-height: 100px; max-height: 300px; overflow: auto; display: flex; align-items: center; justify-content: center; border-radius: 4px; padding: 10px; }
.se-preview-box img, .se-preview-box video, .se-preview-box iframe { max-width: 100%; max-height: 250px; display: block; }
.se-preview-placeholder { color: #aaa; font-size: 14px; }
.se-modal-footer { padding: 15px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 10px; }
.se-btn-cancel { padding: 8px 16px; border: 1px solid #ccc; background: white; border-radius: 4px; cursor: pointer; }
.se-btn-confirm { padding: 8px 16px; border: none; background: #007bff; color: white; border-radius: 4px; cursor: pointer; }
.se-btn-confirm:hover { background: #0056b3; }

/* ======================================================= */
/* [新增] 預覽模式樣式：當容器有 .se-mode-preview 時生效 */
/* ======================================================= */

/* 1. 調整工具列背景，使其與內容融合 */
.se-container.se-mode-preview .se-toolbar {
    background: #fff;
    border-bottom: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
}

/* 2. 隱藏工具列中的所有直接子元素 (按鈕、分隔線、下拉選單) */
.se-container.se-mode-preview .se-toolbar > * {
    display: none !important;
}

/* 3. 唯獨顯示具有 .se-btn-preview class 的按鈕 (眼睛) */
.se-container.se-mode-preview .se-toolbar > .se-btn-preview {
    display: flex !important;
    margin-left: auto; /* 將眼睛推到最右邊 */
}

/* 4. 去除外框，讓預覽更像普通網頁內容 (可選，依需求保留或移除) */
.se-container.se-mode-preview {
    border-color: transparent;
}