/* ==========================================================================
   區塊編輯器專屬樣式 (Block Editor UI & Interactions)
   包含工作台編輯器容器、佔位文字、斜線選單、選取浮動工具列
   所有色彩、圓角、陰影、轉場對接 tokens.css (--ed-*)
   ========================================================================== */

/* 工作台區塊編輯器包裝容器 */
/* 區塊編輯器的紙張：寬度＝文章寬度＋左右內距，至少撐滿視口高度
   （外殼、視口、紙張底色見 toolbar.css 的 .ed-shell / .ed-viewport / .ed-page） */
.bk-page {
    width: 100%;
    min-height: 100%;
    padding: var(--ed-page-padding, 48px 24px 96px);
}

.bk-page > .bk-editor-root {
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .bk-page {
        padding: var(--ed-page-padding-mobile, 24px 18px 64px);
    }
}

/* 編輯器根節點 */
.bk-editor-root {
    outline: none !important;
    min-height: 480px;
    cursor: text;
    position: relative;
}

/* 每個區塊直接子元素 */
.bk-editor-root > * {
    position: relative;
    border-radius: var(--ed-radius-sm, 6px);
    transition: background-color var(--ed-transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
}

/* 佔位提示文字 (Placeholder) - 游標所在空區塊顯示 */
.bk-editor-root > [data-placeholder]:empty::before,
.bk-editor-root > [data-placeholder][data-empty="true"]::before {
    content: attr(data-placeholder);
    color: var(--ed-text-muted, #94a3b8);
    opacity: 0.65;
    pointer-events: none;
    user-select: none;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: normal;
}

.bk-editor-root > blockquote[data-placeholder][data-empty="true"]::before {
    left: 1.1em;
}

/* 空的一般段落：只在游標所在那一行顯示提示（整篇只有一個空段落時也顯示） */
.bk-editor-root > p[data-empty="true"]:not(.is-current):not(:only-child)::before {
    content: none;
}

.bk-editor-root > ul > li[data-placeholder][data-empty="true"]::before,
.bk-editor-root > ol > li[data-placeholder][data-empty="true"]::before {
    content: attr(data-placeholder);
    color: var(--ed-text-muted, #94a3b8);
    opacity: 0.65;
    pointer-events: none;
    user-select: none;
    font-weight: normal;
}

/* 分隔線區塊在編輯時的視覺指示與選取感 */
.bk-editor-root > hr {
    cursor: pointer;
    padding: 4px 0;
}
.bk-editor-root > hr:hover {
    border-top-color: var(--ed-accent, #38bdf8);
}

/* ==========================================================================
   斜線指令選單 (Slash Menu)
   ========================================================================== */
.bk-slash-menu {
    position: fixed;
    z-index: 10000;
    width: 300px;
    max-height: 360px;
    overflow-y: auto;
    border-radius: var(--ed-radius-lg, 12px);
    background: var(--ed-panel-bg, #0f172a);
    border: 1px solid var(--ed-border, rgba(255, 255, 255, 0.08));
    box-shadow: var(--ed-shadow-panel, 0 10px 30px rgba(0, 0, 0, 0.45));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 6px;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
    gap: 2px;
    animation: bkFadeIn var(--ed-transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
}

.bk-slash-group-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--ed-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 8px 3px;
    user-select: none;
}

.bk-slash-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--ed-radius-md, 8px);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--ed-transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    text-decoration: none;
    color: var(--ed-text, #e2e8f0);
}

.bk-slash-item:hover,
.bk-slash-item.is-selected {
    background: var(--ed-accent-soft, rgba(56, 189, 248, 0.15));
    color: #fff;
}

.bk-slash-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--ed-radius-sm, 6px);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ed-border, rgba(255, 255, 255, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ed-ui-font, 13px);
    color: var(--ed-accent, #38bdf8);
    flex-shrink: 0;
}

.bk-slash-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.bk-slash-label {
    font-size: 13.5px;
    font-weight: 500;
    color: inherit;
    line-height: 1.3;
}

.bk-slash-desc {
    font-size: 11.5px;
    color: var(--ed-text-muted, #94a3b8);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-slash-item.is-selected .bk-slash-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   選取浮動工具列 (Floating Selection Toolbar)
   採用與固定工具列完全一致的 .sn-tool-btn 與 .sn-divider 樣式
   ========================================================================== */
.bk-floating-toolbar {
    position: fixed;
    z-index: 10001;
    display: none;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: var(--ed-radius-md, 8px);
    background: var(--ed-bar-bg, rgba(15, 23, 42, 0.96));
    border: 1px solid var(--ed-border-strong, rgba(56, 189, 248, 0.35));
    box-shadow: var(--ed-shadow-panel, 0 10px 30px rgba(0, 0, 0, 0.45));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: bkFadeIn var(--ed-transition, 0.15s cubic-bezier(0.4, 0, 0.2, 1));
    box-sizing: border-box;
}

@keyframes bkFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 下拉選單 (高度與按鈕尺寸一致 36px) */
.bk-tb-select {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ed-border, rgba(255, 255, 255, 0.08));
    color: var(--ed-text, #e2e8f0);
    font-size: var(--ed-ui-font, 13px);
    height: var(--ed-btn-size, 36px);
    padding: 0 8px;
    border-radius: var(--ed-radius-md, 8px);
    outline: none;
    cursor: pointer;
    font-family: inherit;
}
.bk-tb-select option {
    background: var(--ed-panel-bg, #0f172a);
    color: var(--ed-text, #e2e8f0);
}

/* 浮動連結輸入條 */
.bk-tb-link-input-wrap {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
}
.bk-tb-link-input {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--ed-border, rgba(255, 255, 255, 0.08));
    color: #fff;
    font-size: var(--ed-ui-font, 13px);
    height: var(--ed-btn-size, 36px);
    padding: 0 10px;
    border-radius: var(--ed-radius-md, 8px);
    outline: none;
    width: 180px;
    box-sizing: border-box;
}
.bk-tb-link-input:focus {
    border-color: var(--ed-accent, #38bdf8);
}


/* ==========================================================================
   編輯器共用工具列 (EditorToolbar) 補充樣式 (原 editor_toolbar.css 併入)
   - 按鈕、群組、分隔線、彈出面板等基礎樣式沿用 canvas.css 的 .sn-toolbar / .sn-tool-btn
     （手繪筆記、PDF 標註、區塊編輯三種模式外觀一致）
   - 本區塊只放區塊編輯器工具列需要的補充規則
   ========================================================================== */


/* 文字類型下拉：寬度足以顯示「項目清單」 */
.ed-toolbar .ed-type-select {
    min-width: 96px !important;
    max-width: 140px !important;
}

/* 格式按鈕啟用中（例如游標在粗體字上） */
.ed-toolbar .sn-tool-btn.active {
    color: var(--ed-accent, #38bdf8) !important;
}


/* ==========================================================================
   區塊類型標籤（左側邊欄）：游標所在區塊亮起，滑鼠移過淡淡顯示
   ========================================================================== */
.bk-editor-root { padding-left: 52px; }

.bk-editor-root > :is(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol)::after {
    position: absolute;
    left: -46px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 30px;
    padding: 3px 6px;
    border-radius: var(--ed-radius-sm, 6px);
    border: 1px solid var(--ed-border, rgba(255, 255, 255, .08));
    font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .02em;
    text-align: center;
    color: var(--ed-text-muted, #94a3b8);
    background: transparent;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    box-sizing: border-box;
    transition: opacity var(--ed-transition, .15s ease), color var(--ed-transition, .15s ease), border-color var(--ed-transition, .15s ease);
}
.bk-editor-root > p::after { content: "內文"; font-family: inherit; }
.bk-editor-root > h1::after { content: "H1"; }
.bk-editor-root > h2::after { content: "H2"; }
.bk-editor-root > h3::after { content: "H3"; }
.bk-editor-root > h4::after { content: "H4"; }
.bk-editor-root > h5::after { content: "H5"; }
.bk-editor-root > h6::after { content: "H6"; }
.bk-editor-root > blockquote::after { content: "❝"; }
.bk-editor-root > ul::after { content: "•"; top: .9em; }
.bk-editor-root > ol::after { content: "1."; top: .9em; }

.bk-editor-root > *:hover::after { opacity: .55; }

.bk-editor-root > .is-current::after {
    opacity: 1;
    color: var(--ed-accent, #38bdf8);
    border-color: var(--ed-border-strong, rgba(56, 189, 248, .35));
    background: var(--ed-accent-soft, rgba(56, 189, 248, .15));
}

@media (max-width: 640px) {
    .bk-editor-root { padding-left: 0; }
    .bk-editor-root > :is(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol)::after {
        left: 0;
        top: -14px;
        transform: none;
        padding: 1px 5px;
        font-size: 10px;
    }
    .bk-editor-root > *:hover::after { opacity: 0; }
    .bk-editor-root > .is-current::after { opacity: 1; }
}