/* ==========================================================================
   rich-editor — 同梱スタイル（Notion風 Markdown エディタ）
   ・デザイントークンは --re-* に名前空間化。ホスト側で :root { --re-accent: … } の
     ように上書きすればテーマを差し替えられる（既定は温かみのある紙色＝クレイ系）。
   ・body 直下に生成されるポップアップ（.slash-menu / .bubble-menu / .mention-pop /
     .re-tip / .link-editor / .floating-add）も同じトークンを参照するため、既定は
     :root に置く。プレーンCSS（@layer 外）なので purge されない。
   ========================================================================== */

:root {
    --re-paper: #fbfaf7;
    --re-surface: #ffffff;
    --re-surface-2: #f6f4ef;
    --re-ink: #23211d;
    --re-muted: #6b675f;
    --re-faint: #9c968b;
    --re-line: #ece8e1;
    --re-line-2: #ded9cf;
    --re-accent: #bb5a3c;
    --re-accent-press: #a14a2f;
    --re-accent-soft: #f4e6df;
    --re-accent-ink: #97432a;
    --re-danger: #a4392f;
    --re-danger-ink: #8c2d24;
    --re-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── パッケージUIの最小リセット ───────────────────────────────────────────────
   ボタン/入力の見た目を、ホスト側のCSSリセット(Tailwind preflight 等)の有無に依存させない。
   リセットの無い素のページでも UA 既定の border / padding / box-sizing / appearance が
   漏れないようにする。:where() でゼロ詳細度＝以降の各コンポーネント個別スタイルが必ず優先される。 */
:where(.pm-editor, .slash-menu, .bubble-menu, .bubble-dd, .mention-pop, .link-editor, .draft-restored, .re-tip, .floating-add),
:where(.pm-editor, .slash-menu, .bubble-menu, .bubble-dd, .mention-pop, .link-editor, .draft-restored) * {
    box-sizing: border-box;
}
:where(.floating-add),
:where(.slash-menu, .bubble-menu, .bubble-dd, .mention-pop, .link-editor, .draft-restored) button,
:where(.slash-menu, .bubble-menu, .bubble-dd, .mention-pop, .link-editor) input {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

/* ── ポップアップの出現アニメーション ── */
.pop-in    { animation: rePopIn   0.16s ease both; transform-origin: top; }
.pop-in-up { animation: rePopInUp 0.16s ease both; transform-origin: bottom; }
@keyframes rePopIn   { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes rePopInUp { from { opacity: 0; transform: translateY(6px)  scale(0.98); } to { opacity: 1; transform: none; } }

/* ── 下書き復元チップ：リロードで書きかけを復元したとき、エディタ上部にそっと出す ── */
.draft-restored {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin: 0.1rem 0 0.4rem; padding: 0.2rem 0.4rem 0.2rem 0.55rem;
    border: 1px solid var(--re-line-2); border-radius: 999px;
    background: var(--re-surface-2); color: var(--re-muted);
    font-size: 0.75rem; line-height: 1;
    opacity: 1; transition: opacity 0.5s ease;
}
.draft-restored.is-fading { opacity: 0; }
.draft-restored-tx { display: inline-flex; align-items: center; gap: 0.4rem; }
.draft-restored-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--re-accent); }
.draft-restored-x {
    border: 0; border-radius: 999px; cursor: pointer;
    padding: 0.15rem 0.5rem; background: var(--re-surface); color: var(--re-muted);
    font-size: 0.72rem; box-shadow: inset 0 0 0 1px var(--re-line-2);
    transition: color 0.12s, box-shadow 0.12s;
}
.draft-restored-x:hover { color: var(--re-danger-ink, var(--re-ink)); box-shadow: inset 0 0 0 1px var(--re-line); }

/* ── エディタ本体（TipTap/ProseMirror）。ツールバー無し ── */
.pm-editor .ProseMirror {
    outline: none; min-height: var(--pm-min-h, 120px);
    font-size: 0.9375rem; line-height: 1.75; color: var(--re-ink);
    caret-color: var(--re-accent);
    /* 行頭「＋」ハンドル用の左ガター。 */
    padding-left: 0.75rem;
}
.pm-editor .ProseMirror:focus, .pm-editor .ProseMirror:focus-visible { outline: none; }
.pm-editor .ProseMirror > * + * { margin-top: 0.5em; }
.pm-editor .ProseMirror h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; margin-top: 0.9em; }
.pm-editor .ProseMirror h2 { font-size: 1.2rem; font-weight: 600; line-height: 1.35; margin-top: 0.8em; }
.pm-editor .ProseMirror h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin-top: 0.7em; }
.pm-editor .ProseMirror ul, .pm-editor .ProseMirror ol { padding-left: 1.4em; }
.pm-editor .ProseMirror ul { list-style: disc; }
.pm-editor .ProseMirror ol { list-style: decimal; }
.pm-editor .ProseMirror li { margin: 0.15em 0; }
.pm-editor .ProseMirror li > p { margin: 0; }
.pm-editor .ProseMirror blockquote { padding-left: 0.9em; border-left: 3px solid var(--re-line-2); color: var(--re-muted); }
.pm-editor .ProseMirror code { font-family: var(--re-font-mono); font-size: 0.85em; background: var(--re-surface-2); padding: 0.1em 0.35em; border-radius: 4px; }
.pm-editor .ProseMirror pre { background: var(--re-surface-2); border: 1px solid var(--re-line); border-radius: 8px; padding: 0.7em 0.9em; overflow-x: auto; font-family: var(--re-font-mono); font-size: 0.85em; }
.pm-editor .ProseMirror pre code { background: none; padding: 0; font-size: 1em; }
.pm-editor .ProseMirror a { color: var(--re-accent-ink); text-decoration: underline; }
.pm-editor .ProseMirror hr { border: none; border-top: 1px solid var(--re-line-2); margin: 1em 0; }
.pm-editor .ProseMirror img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--re-line); margin: 0.3em 0; }
.pm-editor .ProseMirror img.ProseMirror-selectednode { outline: 2px solid var(--re-accent); outline-offset: 1px; }

/* 画像ノードビュー：ホバー/選択で右端に縦グリップ、左右ドラッグで幅を変える。 */
.pm-editor .ProseMirror .pm-img { position: relative; display: inline-block; line-height: 0; max-width: 100%; vertical-align: middle; }
.pm-editor .ProseMirror .pm-img img { display: inline-block; margin: 0.3em 0; transition: outline-color .12s; outline: 2px solid transparent; outline-offset: 1px; }
.pm-editor .ProseMirror .pm-img:hover img,
.pm-editor .ProseMirror .pm-img.pm-img-selected img { outline-color: color-mix(in srgb, var(--re-accent) 55%, transparent); }
.pm-editor .ProseMirror .pm-img.pm-img-resizing img { outline-color: var(--re-accent); }
.pm-editor .ProseMirror .pm-img-resize { position: absolute; top: 0; bottom: 0; right: 0; width: 18px; display: flex; align-items: center; justify-content: center; cursor: ew-resize; opacity: 0; transition: opacity .12s; touch-action: none; }
.pm-editor .ProseMirror .pm-img-grip { width: 6px; height: 36px; max-height: 56%; border-radius: 4px; background: var(--re-accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pm-editor .ProseMirror .pm-img-corner { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; border-radius: 0 0 7px 0; background: var(--re-accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: nwse-resize; opacity: 0; transition: opacity .12s; touch-action: none; }
.pm-editor .ProseMirror .pm-img:hover .pm-img-resize,
.pm-editor .ProseMirror .pm-img.pm-img-selected .pm-img-resize,
.pm-editor .ProseMirror .pm-img.pm-img-resizing .pm-img-resize,
.pm-editor .ProseMirror .pm-img:hover .pm-img-corner,
.pm-editor .ProseMirror .pm-img.pm-img-selected .pm-img-corner,
.pm-editor .ProseMirror .pm-img.pm-img-resizing .pm-img-corner { opacity: 1; }
.pm-editor .ProseMirror .pm-img-size { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 6px; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; background: rgba(0,0,0,.72); opacity: 0; pointer-events: none; transition: opacity .12s; }
.pm-editor .ProseMirror .pm-img.pm-img-resizing .pm-img-size { opacity: 1; }
.pm-editor .ProseMirror td .pm-img img, .pm-editor .ProseMirror th .pm-img img { margin: 0; }

/* テーブル（TipTap/prosemirror-tables）。 */
.pm-editor .ProseMirror .tableWrapper { overflow-x: auto; margin: 0.6em 0; }
.pm-editor .ProseMirror table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 0; overflow: hidden; }
.pm-editor .ProseMirror td, .pm-editor .ProseMirror th { position: relative; box-sizing: border-box; min-width: 3em; border: 1px solid var(--re-line-2); padding: 0.4em 0.6em; vertical-align: top; }
.pm-editor .ProseMirror th { background: var(--re-surface-2); font-weight: 600; text-align: left; }
.pm-editor .ProseMirror td > p, .pm-editor .ProseMirror th > p { margin: 0; }
.pm-editor .ProseMirror .selectedCell::after { content: ""; position: absolute; inset: 0; background: var(--re-accent-soft); opacity: 0.6; pointer-events: none; z-index: 2; }
.pm-editor .ProseMirror .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: -2px; width: 4px; background: var(--re-accent); pointer-events: none; z-index: 3; }
.pm-editor .ProseMirror.resize-cursor { cursor: col-resize; }

/* TODO（タスクリスト）。ラベルを1行分の高さにしてチェックを縦中央へ。 */
.pm-editor .ProseMirror ul[data-type="taskList"] { list-style: none; padding-left: 0.1em; }
.pm-editor .ProseMirror ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 0.5em; margin: 0.15em 0; }
.pm-editor .ProseMirror ul[data-type="taskList"] li > label { flex-shrink: 0; margin: 0; user-select: none; display: inline-flex; align-items: center; height: 1.75em; }
.pm-editor .ProseMirror ul[data-type="taskList"] li > div { flex: 1; min-width: 0; }
.pm-editor .ProseMirror ul[data-type="taskList"] li > div > p { margin: 0; line-height: 1.75; }
.pm-editor .ProseMirror ul[data-type="taskList"] input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 17px; height: 17px; margin: 0; flex-shrink: 0;
    border: 1.5px solid var(--re-line-2); border-radius: 5px;
    background: var(--re-surface); cursor: pointer;
    display: inline-grid; place-content: center;
    transition: background 0.12s, border-color 0.12s;
}
.pm-editor .ProseMirror ul[data-type="taskList"] input[type="checkbox"]::before {
    content: ""; width: 10px; height: 10px; transform: scale(0);
    transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1); background: #fff;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.pm-editor .ProseMirror ul[data-type="taskList"] input[type="checkbox"]:hover { border-color: var(--re-accent); }
.pm-editor .ProseMirror ul[data-type="taskList"] input[type="checkbox"]:checked { background: var(--re-accent); border-color: var(--re-accent); }
.pm-editor .ProseMirror ul[data-type="taskList"] input[type="checkbox"]:checked::before { transform: scale(1); }
.pm-editor .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div { color: var(--re-faint); text-decoration: line-through; }

/* placeholder（空のとき・最初の段落のみ） */
.pm-editor .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder); color: var(--re-faint); float: left; height: 0; pointer-events: none;
}

/* ── @mention オートコンプリート（body 直下に生成） ── */
.mention-pop {
    position: fixed; z-index: 60; min-width: 180px; max-width: 280px;
    background: var(--re-surface); border: 1px solid var(--re-line-2); border-radius: 10px;
    box-shadow: 0 14px 34px rgba(35, 33, 29, 0.15), 0 3px 10px rgba(35, 33, 29, 0.07);
    padding: 0.25rem; max-height: 240px; overflow-y: auto;
}
.mention-pop.hidden { display: none; }
.mention-item {
    display: flex; align-items: center; gap: 0.4rem; width: 100%;
    padding: 0.35rem 0.5rem; border-radius: 7px; font-size: 0.85rem;
    color: var(--re-ink); text-align: left; cursor: pointer; background: transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mention-item:hover, .mention-item.active { background: var(--re-surface-2); }
.mention-item .mention-at { color: var(--re-accent); font-weight: 700; }
.mention-ava {
    width: 20px; height: 20px; border-radius: 999px; flex-shrink: 0;
    object-fit: cover; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
}
.mention-ava-fallback { background: var(--re-accent-soft); color: var(--re-accent-ink); font-size: 9px; font-weight: 600; line-height: 1; }
.mention-empty { padding: 0.4rem 0.6rem; font-size: 0.8rem; color: var(--re-faint); }

/* ── 「/」スラッシュメニュー（body 直下に生成） ── */
.slash-menu {
    position: fixed; z-index: 70; min-width: 248px; max-width: 300px; max-height: 320px; overflow-y: auto;
    background: var(--re-surface); border: 1px solid var(--re-line-2); border-radius: 11px;
    box-shadow: 0 14px 40px rgba(35, 33, 29, 0.16), 0 3px 10px rgba(35, 33, 29, 0.07);
    padding: 0.3rem;
}
.slash-item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.4rem 0.5rem; border-radius: 8px; text-align: left; background: transparent; cursor: pointer;
}
.slash-item.is-active { background: var(--re-surface-2); }
.slash-ico {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px;
    border: 1px solid var(--re-line-2); background: var(--re-surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 600; color: var(--re-muted); font-family: var(--re-font-mono);
}
.slash-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.slash-title { font-size: 0.85rem; color: var(--re-ink); }
.slash-hint { font-size: 0.72rem; color: var(--re-faint); }
.slash-empty { padding: 0.5rem 0.6rem; font-size: 0.8rem; color: var(--re-faint); }

/* ── 選択時のバブルメニュー（暗色ツールバー） ── */
.bubble-menu {
    position: absolute; top: 0; left: 0;
    display: flex; align-items: center; gap: 2px; z-index: 70;
    background: var(--re-ink); border-radius: 9px; padding: 3px;
    box-shadow: 0 8px 24px rgba(35, 33, 29, 0.28);
}
.bubble-turn {
    display: flex; align-items: center; gap: 3px; height: 28px; padding: 0 6px 0 9px;
    border-radius: 6px; color: #e9e4da; font-size: 0.8rem; line-height: 1;
    background: transparent; cursor: pointer; white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.bubble-turn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.bubble-turn-chev { color: #b8b1a6; }
.bubble-div { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.18); margin: 0 3px; flex-shrink: 0; }
.bubble-dd {
    position: fixed; z-index: 75; min-width: 132px; padding: 0.25rem;
    background: var(--re-surface); border: 1px solid var(--re-line-2); border-radius: 9px;
    box-shadow: 0 12px 32px rgba(35, 33, 29, 0.18);
}
.bubble-dd-item {
    display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.3rem 0.45rem;
    border-radius: 6px; font-size: 0.85rem; color: var(--re-ink); text-align: left; background: transparent; cursor: pointer;
}
.bubble-dd-item:hover { background: var(--re-surface-2); }
.bubble-dd-item.is-current { color: var(--re-accent-ink); background: var(--re-accent-soft); }
.bubble-dd-ico {
    flex-shrink: 0; width: 24px; height: 22px; border-radius: 5px;
    border: 1px solid var(--re-line-2); background: var(--re-surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 600; color: var(--re-muted); font-family: var(--re-font-mono); line-height: 1;
}
.bubble-dd-label { min-width: 0; }
.bubble-btn {
    display: flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 7px; border-radius: 6px;
    color: #e9e4da; font-size: 0.82rem; line-height: 1; background: transparent; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.bubble-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.bubble-btn.is-active { background: var(--re-accent); color: #fff; }
.bubble-btn i { font-style: italic; }
.bubble-btn s { text-decoration: line-through; }
.table-menu { gap: 1px; }
.table-menu .bubble-btn { min-width: 30px; }
.bubble-btn--danger:hover { background: rgba(214, 110, 90, 0.22); color: #ffd9cf; }

/* ── カスタムツールチップ（[data-tip]） ── */
.re-tip {
    position: fixed; z-index: 80; display: none;
    padding: 4px 9px; border-radius: 7px;
    background: var(--re-ink); color: #f3efe7;
    font-size: 0.72rem; line-height: 1.35; white-space: nowrap; letter-spacing: 0.01em;
    box-shadow: 0 8px 22px rgba(35, 33, 29, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* ── リンク編集ポップオーバー ── */
.link-editor {
    position: fixed; z-index: 75; min-width: 300px; max-width: min(420px, 92vw);
    background: var(--re-surface); border: 1px solid var(--re-line-2); border-radius: 11px;
    box-shadow: 0 14px 40px rgba(35, 33, 29, 0.16), 0 3px 10px rgba(35, 33, 29, 0.07);
    padding: 0.55rem;
}
.link-editor-row { display: flex; align-items: center; gap: 0.45rem; }
.link-editor-ico { flex-shrink: 0; color: var(--re-faint); }
.link-editor-input {
    flex: 1; min-width: 0; height: 34px; padding: 0 0.6rem;
    border: 1px solid var(--re-line-2); border-radius: 8px; background: var(--re-surface);
    font-size: 0.875rem; color: var(--re-ink);
}
.link-editor-input::placeholder { color: var(--re-faint); }
.link-editor-input:focus { outline: none; border-color: var(--re-accent); box-shadow: 0 0 0 3px var(--re-accent-soft); }
.link-editor-apply {
    flex-shrink: 0; height: 34px; padding: 0 0.85rem; border-radius: 8px;
    background: var(--re-accent); color: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: background 0.12s;
}
.link-editor-apply:hover { background: var(--re-accent-press); }
.link-editor-actions { display: flex; align-items: center; gap: 0.9rem; margin: 0.5rem 0.15rem 0.1rem; }
.link-editor-act {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; color: var(--re-muted); background: none; cursor: pointer; text-decoration: none;
    transition: color 0.12s;
}
.link-editor-act:hover { color: var(--re-ink); }
.link-editor-act--danger:hover { color: var(--re-danger); }

/* ── 行頭の「＋」ボタン（空行に出現・/不要でブロック挿入） ── */
.floating-add {
    position: absolute; top: 0; left: 0;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; min-width: 30px; min-height: 30px; border-radius: 8px; z-index: 60;
    color: var(--re-faint); background: transparent; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.floating-add:hover { background: var(--re-surface-2); color: var(--re-ink); }
.floating-add--sm { width: 26px; height: 26px; min-width: 26px; min-height: 26px; border-radius: 7px; }
.floating-add--sm svg { width: 16px; height: 16px; }
