/* 編集画面のプレビューで、図を直接編集するときの見た目 */
.mermaid.de-mounted { text-align: left; }
.de-box { border: 1px solid #dee2e6; border-radius: 10px; background: #fff; margin: 8px 0 16px; }
.de-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 5px 8px; border-bottom: 1px solid #eef0f2; font-size: .78rem; }
.de-bar .de-name { font-weight: 700; color: #0f5132; background: #d1e7dd; border-radius: 999px; padding: 1px 9px; margin-right: 4px; }
.de-bar .de-btn { font-size: .75rem; border: 1px solid #dee2e6; background: #fff; border-radius: 6px; padding: 2px 8px; color: #212529; cursor: pointer; }
.de-bar .de-btn:hover { background: #eef2ff; }
.de-bar .de-status { margin-left: auto; color: #dc3545; font-weight: 700; }
.de-loading { padding: 18px; color: #6c757d; font-size: .85rem; }
.de-host { padding: 2px; }
[data-theme="dark"] .de-box { background: #1e1f22; border-color: #3a3d42; }
[data-theme="dark"] .de-bar { border-bottom-color: #3a3d42; }
[data-theme="dark"] .de-bar .de-btn { background: #26282c; border-color: #3a3d42; color: #e6e6e6; }
@media (pointer: coarse) {
  .de-bar { font-size: .85rem; }
  .de-bar .de-btn { padding: 6px 10px; font-size: .8rem; }
}

/* 一時的に画面いっぱいに広げる（拡大ボタン／Escで戻る） */
.de-box.de-full { position: fixed; inset: 0; z-index: 2000; margin: 0; border: 0; border-radius: 0;
  display: flex; flex-direction: column; box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.de-box.de-full .de-bar { flex: none; }
.de-box.de-full .de-host { flex: 1 1 auto; min-height: 0; padding: 0; }
.de-box.de-full .fe-clip { height: 100%; max-height: none; min-height: 0 !important; }
body.de-full-open { overflow: hidden; }
@media print { .de-box.de-full { position: static; } body.de-full-open { overflow: visible; } }

/* マウスで自由に見る：スクロールバーは出さず、掴んで動かす */
.de-box .fe-clip { scrollbar-width: none; }
.de-box .fe-clip::-webkit-scrollbar { width: 0; height: 0; display: none; }
.de-box.de-panning, .de-box.de-panning * { cursor: grabbing !important; }
.de-bar .de-btn.de-zoom { min-width: 3.4em; font-variant-numeric: tabular-nums; }

/* ── 見るための枠（閲覧画面・編集画面の対象外の図） ───────────── */
.mermaid.dv-mounted { text-align: left; }
.de-clip { position: relative; overflow: auto; scrollbar-width: none; -webkit-user-select: none; user-select: none; }
.de-clip::-webkit-scrollbar { width: 0; height: 0; display: none; }
.de-svg { width: max-content; margin: 0 auto; }
.de-svg svg { display: block; max-width: none !important; }
.dv-bar { color: #6c757d; }
.dv-bar .dv-name { font-weight: 700; color: #495057; background: #f1f3f5; border-radius: 999px; padding: 1px 9px; margin-right: 4px; }
.de-box.de-full .de-clip { height: 100%; max-height: none !important; }
[data-theme="dark"] .dv-bar .dv-name { background: #2b2e33; color: #cfd3d8; }

/* 知らせ（保存・取り消し） */
.dv-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3000;
  display: flex; align-items: center; gap: 10px; max-width: 92vw;
  background: rgba(33,37,41,.95); color: #fff; font-size: .85rem; border-radius: 999px; padding: 8px 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.dv-toast .dv-toast-act { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff;
  border-radius: 999px; padding: 2px 10px; font-size: .8rem; cursor: pointer; }
.dv-toast .dv-toast-act:hover { background: rgba(255,255,255,.15); }

/* 印刷・スライドでは今までどおり静止画として出す */
@media print {
  .de-bar { display: none !important; }
  .de-clip { overflow: visible !important; max-height: none !important; }
  .de-svg svg { width: auto !important; height: auto !important; max-width: 100% !important; }
}
.slideshow-modal .de-bar { display: none; }
.slideshow-modal .de-clip { overflow: visible; max-height: none; }
.slideshow-modal .de-svg svg { width: auto !important; height: auto !important; max-width: 100% !important; }

/* 図を右クリックしたときの小さなメニュー（見る専用のとき） */
.dv-menu { position: fixed; z-index: 3000; min-width: 190px; background: #fff; border: 1px solid #d1d5db;
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 5px; font-size: .84rem; }
.dv-menu button { display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 7px 10px; border-radius: 6px; color: #212529; cursor: pointer; }
.dv-menu button:hover { background: #eef2ff; }
[data-theme="dark"] .dv-menu { background: #26282c; border-color: #3a3d42; }
[data-theme="dark"] .dv-menu button { color: #e6e6e6; }
[data-theme="dark"] .dv-menu button:hover { background: #333842; }