*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0d1117; --panel:#161b22; --card:#1c2128; --card-head:#21262d;
  --border:#30363d; --dim:#21262d; --text:#e6edf3; --muted:#8b949e;
  --blue:#58a6ff; --green:#3fb950; --red:#f78166; --yellow:#e3b341;
}
html,body{height:100%;overflow:hidden;}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;flex-direction:column;}

/* ── Loading ── */
#loading{display:flex;align-items:center;justify-content:center;flex-direction:column;flex:1;gap:14px;color:var(--muted);font-size:14px;}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
#loading-msg{color:var(--muted);font-size:14px;}

/* ── App ── */
#app{display:none;flex-direction:column;flex:1;overflow:hidden;}
#app.active{display:flex;}

/* Header */
#header{height:50px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:10px;flex-shrink:0;z-index:20;}
#project-name{font-weight:700;color:var(--blue);font-size:15px;white-space:nowrap;}
#project-name a{color:inherit;text-decoration:none;}
#project-name a:hover{text-decoration:underline;}
#stats{color:var(--muted);font-size:12px;white-space:nowrap;}
#data-date{color:var(--muted);font-size:12px;white-space:nowrap;}
#github-link{display:flex;align-items:center;color:var(--muted);text-decoration:none;flex-shrink:0;opacity:.7;transition:opacity .15s;}
#github-link:hover{opacity:1;color:var(--text);}
#x-link{display:flex;align-items:center;color:var(--muted);text-decoration:none;flex-shrink:0;opacity:.7;transition:opacity .15s;}
#x-link:hover{opacity:1;color:var(--text);}
#header-links{display:flex;align-items:center;gap:10px;}
#search-wrap{position:relative;margin-left:auto;}
#search{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:5px 12px;border-radius:6px;outline:none;font-size:13px;width:220px;}
#search-results{display:none;position:absolute;top:calc(100% + 4px);right:0;background:var(--panel);border:1px solid var(--border);border-radius:8px;width:300px;max-height:260px;overflow-y:auto;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,.6);}
#search-results.show{display:block;}
.sr-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--dim);font-size:13px;display:flex;gap:8px;align-items:center;}
.sr-item:hover{background:var(--dim);}
.sr-deg{margin-left:auto;color:var(--muted);font-size:11px;}
.hdr-btn{background:var(--dim);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:6px;cursor:pointer;font-size:12px;white-space:nowrap;}

/* Main */
#main{flex:1;display:flex;overflow:hidden;position:relative;}
#graph-canvas{flex:1;min-width:0;display:block;cursor:grab;}
#graph-canvas.grabbing{cursor:grabbing;}

/* Legend */
#legend{position:absolute;bottom:14px;right:14px;background:#161b22cc;border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:11px;color:var(--muted);backdrop-filter:blur(4px);pointer-events:none;transition:right .35s;}
#legend .row{display:flex;gap:12px;margin-bottom:3px;}

/* History */
#history-bar{position:absolute;bottom:14px;left:14px;display:flex;gap:6px;flex-wrap:wrap;max-width:55%;z-index:10;}
.hist-tag{background:var(--dim);border:1px solid var(--border);padding:3px 9px;border-radius:20px;font-size:11px;cursor:pointer;color:var(--text);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hist-tag.current{background:#1f6feb;border-color:#1f6feb;}

/* Side Panel */
#side-panel{width:460px;background:var(--panel);border-left:1px solid var(--border);display:none;flex-direction:column;flex-shrink:0;overflow:hidden;}
#side-panel.open{display:flex;}
#panel-nav{height:42px;background:var(--card-head);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 10px;gap:6px;flex-shrink:0;}
#btn-back{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:4px 6px;border-radius:4px;line-height:1;}
#btn-back:hover{background:var(--dim);color:var(--text);}
#btn-back:disabled{opacity:.3;cursor:default;}
#btn-back:disabled:hover{background:none;}
#panel-breadcrumb{flex:1;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#btn-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1;padding:4px 6px;border-radius:4px;}
#btn-close:hover{background:var(--dim);color:var(--text);}
#panel-scroll{flex:1;overflow-y:auto;padding:0;}
#panel-scroll::-webkit-scrollbar{width:5px;}
#panel-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* Document Page */
.cosense-doc{}
.doc-title{font-size:22px;font-weight:700;color:var(--text);line-height:1.4;word-break:break-word;padding:22px 22px 6px;}
.doc-title-link{color:inherit;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .15s;}
.doc-title-link:hover{border-bottom-color:var(--green);}
.doc-meta{display:flex;gap:14px;font-size:11px;color:var(--muted);flex-wrap:wrap;padding:0 22px 14px;border-bottom:1px solid var(--dim);}
.doc-body{padding:6px 0 8px;font-size:13px;}
.doc-body .ilink{color:var(--blue);cursor:pointer;text-decoration:underline;text-decoration-color:#58a6ff55;}
.doc-body .ilink:hover{text-decoration-color:var(--blue);}
.doc-body a{color:var(--blue);}
.doc-body code{background:#0d1117;padding:2px 6px;border-radius:4px;font-family:monospace;font-size:.88em;border:1px solid var(--border);}
.doc-body img{max-width:100%;border-radius:6px;margin:4px 0;display:block;}
.doc-body strong{color:#fff;}
.doc-body em{color:var(--yellow);font-style:italic;}
.doc-body del{color:var(--muted);}
.c-line{display:flex;align-items:flex-start;padding:1px 22px;min-height:24px;border-radius:3px;}
.c-line:hover{background:rgba(255,255,255,0.025);}
.c-bullet{flex-shrink:0;width:18px;color:var(--muted);font-size:11px;padding-top:4px;user-select:none;text-align:center;}
.c-text{flex:1;line-height:1.75;word-break:break-word;}
.c-empty{height:6px;}
.c-code-wrap{margin:4px 22px 6px;border-radius:6px;overflow:hidden;border:1px solid var(--border);}
.c-code-title{background:var(--card-head);padding:3px 10px;font-size:11px;color:var(--muted);font-family:monospace;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
.c-code-wrap pre{background:#0d1117;margin:0;padding:10px 12px;overflow-x:auto;font-size:12px;font-family:"SFMono-Regular",Consolas,monospace;line-height:1.55;color:var(--text);}
.c-quote{border-left:3px solid var(--border);padding:2px 10px;margin:2px 22px;color:var(--muted);font-style:italic;}
.doc-section{padding:12px 22px;border-top:1px solid var(--dim);}
.section-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-weight:600;}
.chips{display:flex;flex-wrap:wrap;gap:5px;}
.chip{padding:3px 10px;border-radius:20px;font-size:12px;cursor:pointer;border:1px solid;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;}
.chip-link{background:#1f6feb22;border-color:#1f6feb55;color:var(--blue);}
.chip-link:hover{border-color:var(--blue);background:#1f6feb33;}
.chip-back{background:#3fb95022;border-color:#3fb95055;color:var(--green);}
.chip-back:hover{border-color:var(--green);background:#3fb95033;}
.chip-dead{background:var(--dim);border-color:var(--border);color:var(--muted);cursor:default;}
.empty-hint{color:var(--muted);font-size:12px;font-style:italic;padding:8px 22px;}

/* ── Error Overlay ── */
#error-overlay{display:none;position:fixed;inset:0;background:#0d1117ee;z-index:9999;align-items:center;justify-content:center;}
#error-overlay.show{display:flex;}
#error-box{background:#1c2128;border:1px solid #f7816688;border-radius:12px;padding:24px 28px;max-width:560px;width:90%;max-height:80vh;overflow-y:auto;}
#error-box h2{color:var(--red);margin-bottom:12px;font-size:16px;}
#error-log{font-family:monospace;font-size:12px;color:#e6edf3;white-space:pre-wrap;word-break:break-all;margin-bottom:16px;max-height:300px;overflow-y:auto;background:#0d1117;padding:10px;border-radius:6px;border:1px solid var(--border);}
#error-dismiss{background:var(--dim);border:1px solid var(--border);color:var(--text);padding:7px 18px;border-radius:6px;cursor:pointer;font-size:13px;}

/* ── Log Bar ── */
#log-bar{position:fixed;bottom:0;left:0;right:0;background:#0d111799;border-top:1px solid var(--border);padding:3px 10px;font-size:11px;font-family:monospace;color:var(--muted);display:none;z-index:100;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#log-bar.show{display:block;}

/* ── スマートフォン対応 (共通) ── */
@media (max-width: 600px) {
  /* stats (N pages · M links) を非表示 */
  #stats { display: none; }
  /* GitHub / X アイコンも非表示にしてヘッダーを省スペース化 */
  #github-link, #x-link { display: none; }
  /* 検索ボックスをヘッダー幅いっぱいに広げる */
  #search-wrap { margin-left: auto; flex: 1; min-width: 0; }
  #search { width: 100%; box-sizing: border-box; }
  /* 検索結果ドロップダウンも幅調整 */
  #search-results { width: calc(100vw - 28px); right: 0; }
  /* レジェンドを小さく */
  #legend { font-size: 10px; padding: 5px 8px; }
  /* サイドパネルをフル幅で表示 */
  #side-panel { width: 100%; }
}

/* ── 縦表示: パネルをビューポート下半分にオーバーレイ ── */
@media (max-width: 600px) and (orientation: portrait) {
  /* position:fixed でキャンバスの上に重ねて確実に表示 */
  #side-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    height: 50vh;
    border-left: none;
    border-top: 1px solid var(--border);
    z-index: 50;
  }
  /* iOS Safari で内側スクロールを有効化 */
  #panel-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  /* JS による right 移動を無効化 */
  #legend { right: 14px !important; transition: bottom .35s; }
  /* パネルが開いた時に legend / history-bar をパネルの上へ退避 */
  #main:has(#side-panel.open) #legend      { bottom: calc(50vh + 14px); }
  #main:has(#side-panel.open) #history-bar { bottom: calc(50vh + 14px); }
}

/* ── Node Tooltip ── */
#node-tooltip{
  position:fixed;
  pointer-events:none;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  font-size:12px;
  padding:4px 9px;
  border-radius:6px;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  opacity:0;
  transition:opacity .1s;
  z-index:200;
}