/* EZOS */
* { box-sizing: border-box; }
:root {
  --bg: #14161c; --panel: #1c1f28; --card: #262a36; --card-hover: #2d3240;
  --line: #333846; --text: #e6e9f0; --dim: #8b93a7; --accent: #4c8dff;
  --red: #e5534b; --green: #57ab5a; --user-bubble: #2b3a55;
}
html, body { margin: 0; height: 100%; }
/* iOSでページ全体がラバーバンドで上下にずれるのを止める(内側のターミナルだけがスクロール) */
html, body { overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--bg); color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Segoe UI", Meiryo, sans-serif;
  font-size: 15px; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
button { font: inherit; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em; }

.btn {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 14px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px; justify-content: center;
}
.btn:hover { background: var(--card-hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.big { width: 100%; padding: 14px; font-size: 16px; }
.btn.icon { padding: 6px 10px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---- login ---- */
.login-wrap { display: flex; min-height: 100dvh; align-items: center; justify-content: center; padding: 20px; }
.login-box { width: 360px; max-width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px; text-align: center; }
.login-box h1 { margin: 0 0 4px; font-size: 22px; }
.login-box .sub { color: var(--dim); margin: 0 0 20px; }
.login-box input {
  width: 100%; margin: 6px 0; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.login-box .hint { color: var(--dim); font-size: 12px; }
.login-box .err { color: var(--red); }
.setup-details { margin-top: 22px; text-align: left; }
.setup-details summary { color: var(--dim); cursor: pointer; font-size: 13px; }
.setup-details .btn { width: 100%; margin-top: 6px; }

/* ---- app layout (desktop) ---- */
#app { display: flex; height: 100dvh; }
#sidebar {
  width: 270px; flex: none; background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.side-head { padding: 12px; display: flex; gap: 8px; }
.side-head .btn.primary { flex: 1; }
#btn-close-side { display: none; }
#conv-list { flex: 1; overflow-y: auto; padding: 0 8px; }
.conv-item {
  padding: 10px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 2px;
  display: flex; align-items: center; gap: 6px;
}
.conv-item:hover { background: var(--card); }
.conv-item.active { background: var(--card-hover); }
.conv-item .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .del { color: var(--dim); background: none; border: none; cursor: pointer; padding: 2px 4px; }
.conv-item .del:hover { color: var(--red); }
.side-foot { padding: 12px; display: flex; gap: 8px; border-top: 1px solid var(--line); }
.side-foot .btn { flex: 1; }

#chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#chat-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
#btn-menu { display: none; }
#chat-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat-status { color: var(--dim); font-size: 12px; margin-left: auto; white-space: nowrap; }

#messages { flex: 1; overflow-y: auto; padding: 20px; }
.welcome { text-align: center; color: var(--dim); margin-top: 12vh; }
.welcome h2 { color: var(--text); }
.warn { color: #e8a33d; }

.msg { max-width: 820px; margin: 0 auto 16px; }
.msg .role { font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.msg.user .bubble {
  background: var(--user-bubble); border-radius: 12px; padding: 10px 14px;
  white-space: pre-wrap; word-wrap: break-word;
}
.msg.assistant .bubble { line-height: 1.7; word-wrap: break-word; }
.msg .bubble pre {
  background: #0d1117; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; overflow-x: auto; line-height: 1.45;
}
.msg .bubble code:not(pre code) { background: #343946; border-radius: 4px; padding: 1px 5px; }
.msg .bubble h1, .msg .bubble h2, .msg .bubble h3 { margin: .8em 0 .4em; }
.msg .bubble ul, .msg .bubble ol { padding-left: 1.4em; }
.msg .bubble table { border-collapse: collapse; display: block; overflow-x: auto; }
.msg .bubble th, .msg .bubble td { border: 1px solid var(--line); padding: 4px 10px; }
.tool-note { color: var(--dim); font-size: 12px; margin: 4px 0; }
.cursor { display: inline-block; width: 8px; height: 1em; background: var(--accent);
  vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#composer { border-top: 1px solid var(--line); background: var(--panel); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.composer-box { display: flex; gap: 8px; max-width: 820px; margin: 0 auto; align-items: flex-end; }
#prompt {
  flex: 1; resize: none; padding: 11px 14px; border-radius: 12px; max-height: 40dvh;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit;
  line-height: 1.5;
}
#prompt:focus { outline: none; border-color: var(--accent); }
.tools-toggle { display: block; max-width: 820px; margin: 8px auto 0; color: var(--dim); font-size: 12px; cursor: pointer; }

#backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 15; }

/* ---- 全体レイアウト (ターミナルのみ・複数タブ) ---- */
#term-app { display: flex; flex-direction: column; height: 100dvh; }
#term-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  background: var(--panel); border-bottom: 1px solid var(--line); flex: none;
}
#term-bar .brand { font-weight: 600; flex: none; }
/* タブ列が伸縮の主役になるため、term-bar内のスペーサーは幅0(右端の接続状態や
   表示切替ボタンは常に最右へ)。他の場所の .spacer には影響させない。 */
#term-bar > .spacer { flex: none; }
/* 右端の操作ボタン(再読込/表示切替)。通常は横並び。 */
.tb-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--dim); }
.dot.on { background: var(--green); }
.dot.off { background: var(--red); }
/* タブの●: Claude状態で色分け(待機=緑/作業中=青/確認待ち=赤/不明=灰) */
.dot.st-idle { background: var(--green); }
.dot.st-running { background: var(--accent); }
.dot.st-confirm { background: var(--red); }
.dot.st-unknown { background: var(--dim); }

/* タブバー(＋ボタンを内包し、常に最後のタブの右に置く=左右位置は動的)。
   画面幅に入りきらない場合は横スクロールせず複数段に折り返す(flex-wrap)。
   flex:1 1 auto で利用可能な幅いっぱいまで広がり、あふれると次段へ回る。 */
#term-tabs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  min-width: 0; flex: 1 1 auto;
}
.term-tab {
  display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 220px;
  background: var(--card); color: var(--dim); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px 5px 10px; cursor: pointer; font-size: 13px;
  user-select: none;
}
.term-tab.active { background: var(--bg); color: var(--text); }
.term-tab.confirm { border-color: #e8a33d; color: #e8a33d; }
.term-tab .t-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-tab .t-close {
  border: none; background: none; color: var(--dim); cursor: pointer; padding: 0 3px;
  border-radius: 4px; font-size: 15px; line-height: 1;
}
.term-tab .t-close:hover { color: var(--red); background: var(--card-hover); }
.term-tab .dot { width: 7px; height: 7px; }
#btn-add-tab {
  flex: none; background: none; border: 1px solid var(--line); color: var(--dim);
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 18px; line-height: 1;
}
#btn-add-tab:hover { background: var(--card); color: var(--text); }

/* 確認待ち(赤)タブから出る選択肢プルダウン */
#tab-menu {
  position: fixed; z-index: 200; min-width: 200px; max-width: min(440px, 92vw);
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5); padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
#tab-menu[hidden] { display: none; }
#tab-menu .tm-q { font-size: 12px; color: var(--text); padding: 2px 4px 4px; line-height: 1.4; word-break: break-word; }
.tm-opt {
  text-align: left; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
  cursor: pointer; font-size: 13px; background: var(--bg); color: var(--text);
}
.tm-opt:hover { filter: brightness(1.2); }
.tm-opt:disabled { opacity: .5; cursor: default; }
.tm-opt.accept { background: var(--green); border-color: var(--green); color: #fff; }
.tm-opt.accept_all { background: #3a5bbf; border-color: #3a5bbf; color: #fff; }
.tm-opt.reject { background: var(--red); border-color: var(--red); color: #fff; }
.tm-opt b { font-weight: 700; margin-right: 3px; }

/* ターミナル本体 */
:root { --tw-input-h: 92px; }
#term-main { flex: 1; min-height: 0; display: flex; }
#terminals { flex: 1; min-width: 0; min-height: 0; position: relative; background: var(--bg); }
/* 各タブ = 表示(tw-view) + 制御キー行 + 独立入力欄 の縦積み(端末と一体・同じ横幅) */
.term-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; min-width: 0; }
.term-wrap[hidden] { display: none; }
/* 下に1行分の余白。端数行のクリップを吸収し、Claude Code終了後の素のシェルでも
   最下行(プロンプト)が切れず必ず1行空いて見えるようにする(FitAddonはこの余白を
   除いた領域で行数を算出するため、常に空きが確保される)。 */
.tw-view { flex: 1; min-height: 0; padding: 4px 0 1.5em 6px; background: var(--bg); }
.tw-view .xterm { height: 100%; }
/* 履歴はtmuxが管理するためxterm自身のスクロールバーは非表示(位置が連携できず誤解を招く)。
   過去履歴はマウスホイールで読む(tmux mouse on)。 */
.xterm .xterm-viewport { scrollbar-width: none; }
.xterm .xterm-viewport::-webkit-scrollbar { width: 0; height: 0; }

/* 制御キー行(各ターミナル一体。右端に入力欄ON/OFFスイッチ)。
   幅が狭い場合は横スクロールせず複数段に折り返す(flex-wrap)。タブバーと同じ挙動。 */
.tw-keyrow {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 6px;
  background: var(--panel); border-top: 1px solid var(--line);
}
.tw-keyrow button {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; flex: none; font-size: 13px;
}
.tw-keyrow button:hover { background: var(--card-hover); }
.tw-keyrow button:active { background: var(--accent); }
/* Git操作ボタン(G↓/G↑)はアクセント色で区別 */
.tw-keyrow button.gitkey { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* 高さ変更ハンドル */
.tw-resize { flex: none; height: 7px; cursor: ns-resize; background: var(--panel); }
.tw-resize::after {
  content: ''; display: block; width: 44px; height: 2px; margin: 2px auto 0;
  background: var(--line); border-radius: 2px;
}
.tw-resize:hover::after { background: var(--accent); }

/* 入力欄(各ターミナル一体・独立。高さは全タブ共通の --tw-input-h) */
.tw-input {
  flex: none; height: var(--tw-input-h); display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); padding: 0 8px calc(6px + env(safe-area-inset-bottom));
}
/* OFF: 入力欄と高さハンドルを隠す(ターミナルへ直接入力) */
.term-wrap.input-off .tw-input, .term-wrap.input-off .tw-resize { display: none; }

/* ON/OFF スイッチ(キー行の右端に同居) */
.tw-switch { flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.tw-switch-label { font-size: 12px; color: var(--dim); }
.tw-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tw-slider {
  width: 34px; height: 18px; flex: none; background: var(--line); border-radius: 999px;
  position: relative; transition: background .15s;
}
.tw-slider::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  background: #fff; border-radius: 50%; transition: transform .15s;
}
.tw-switch input:checked + .tw-slider { background: var(--accent); }
.tw-switch input:checked + .tw-slider::after { transform: translateX(16px); }
.tw-text {
  flex: 1; min-height: 0; resize: none; width: 100%;
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; line-height: 1.5;
}
.tw-text:focus { outline: none; border-color: var(--accent); }
/* ファイルをドラッグ中の入力欄ハイライト */
.tw-text.dragover { border-color: var(--accent); outline: 2px dashed var(--accent); outline-offset: -2px; }
.tw-ctrls { flex: none; display: flex; align-items: center; gap: 6px; }
.tw-ctrls .spacer { flex: 1; }
.ib-btn {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px;
}
.ib-btn:hover { background: var(--card-hover); }
.ib-btn.send { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; padding: 6px 18px; }
.ib-btn.send:hover { filter: brightness(1.1); }
/* 音声入力マイク(入力欄の左下) */
.ib-btn.mic { padding: 6px 11px; font-size: 15px; line-height: 1; }
.ib-btn.mic.unsupported { opacity: .4; }
.ib-btn.mic.rec { background: var(--red); border-color: var(--red); color: #fff; animation: mic-pulse 1.2s infinite; }
@keyframes mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,83,75,.5); } 50% { box-shadow: 0 0 0 6px rgba(229,83,75,0); } }

body.view-mobile #term-bar { padding: 6px 8px; flex-wrap: wrap; align-items: center; }
body.view-mobile .tb-actions .btn.small { padding: 4px 8px; }
/* スマホ: 1列目に操作ボタン(モード切替=左 / 再読込・表示切替=右)、
   2列目以降にターミナルタブを全幅で並べる。order とタブ列の flex-basis:100% で改行させる。 */
body.view-mobile #mode-cycle { order: 1; }
body.view-mobile #term-bar > .spacer { order: 2; flex: 1; }
body.view-mobile #conn-state { order: 3; }
body.view-mobile .tb-actions { order: 4; flex-direction: row; gap: 8px; }
body.view-mobile #term-tabs { order: 5; flex-basis: 100%; width: 100%; }
/* この新レイアウトではタブは常に独立行なので、多段時の操作ボタン縦積みは行わない */
body.view-mobile #term-bar.tabs-wrapped { align-items: center; }
body.view-mobile #term-bar.tabs-wrapped .tb-actions { flex-direction: row; gap: 8px; }
body.view-mobile .term-tab { max-width: 130px; padding: 5px 6px 5px 8px; }
/* スマホでタブが大量にあると多段化でバーが画面を占有し端末が潰れるため、
   タブ列は最大3段程度で頭打ちにし、それ以上は縦スクロールで送る。 */
body.view-mobile #term-tabs {
  max-height: calc(3 * 32px + 2 * 4px); overflow-y: auto; scrollbar-width: none;
}
body.view-mobile #term-tabs::-webkit-scrollbar { width: 0; height: 0; }
/* iOS: アプリ全体をビューポートに固定し、アドレスバー開閉やラバーバンドで
   レイアウトが上下に動かないようにする(上端は時計/ノッチ分の余白を確保) */
body.view-mobile #term-app {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100dvh; padding-top: env(safe-area-inset-top);
  /* スマホではビュー右端が画面外に切れるため、右側を約2文字分狭める */
  padding-right: 2ch;
}
/* スマホでは最下部がブラウザUIやノッチで切れることがあるため、1行分ほど下に余白を確保 */
body.view-mobile #term-app { padding-bottom: calc(1.5em + env(safe-area-inset-bottom)); }
/* 入力欄OFF(直接入力)時は入力欄と一体のセーフエリア余白も消え最下部が切れるため、
   さらに1行分の空白をターミナル下に差し込む */
body.view-mobile .term-wrap.input-off { padding-bottom: 1.5em; }

/* ===================== EZbrowser (ファイルエクスプローラ/エディタ) ===================== */
/* モード切替アイコン(ロゴ置換。端末=Claude/ブラウザ=フォルダ/エディタ=メモ帳) */
.mode-cycle {
  flex: none; width: 34px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--accent); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; padding: 0;
}
.mode-cycle:hover { background: var(--card-hover); }
body[data-mode="browser"] .mode-cycle { color: #4c8dff; }
body[data-mode="editor"] .mode-cycle { color: #e8a33d; }

/* 3ビューを重ねて表示を付け替える。xterm層は非端末時も寸法を保持(fit安定)する */
#term-main.ez-ready { position: relative; }
#term-main.ez-ready > #terminals,
#term-main.ez-ready > #ez-browser,
#term-main.ez-ready > #ez-editor { position: absolute; inset: 0; }
#ez-browser, #ez-editor { display: none; flex-direction: column; min-width: 0; background: var(--bg); }
body[data-mode="browser"] #ez-browser { display: flex; }
body[data-mode="editor"] #ez-editor { display: flex; }
body[data-mode="browser"] #terminals,
body[data-mode="editor"] #terminals { visibility: hidden; pointer-events: none; }

/* パンくず */
.ezb-crumbs {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 1px; padding: 6px 8px;
  background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--dim); overflow-x: auto;
}
.ezb-crumb { background: none; border: none; color: var(--accent); cursor: pointer; padding: 2px 5px; border-radius: 5px; font-size: 13px; white-space: nowrap; }
.ezb-crumb:hover { background: var(--card); }

/* メニューバー(ファイル/編集/表示) */
.ezb-menubar { flex: none; display: flex; gap: 2px; padding: 2px 6px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ezb-menu-btn { background: none; border: none; color: var(--text); cursor: pointer; padding: 5px 12px; border-radius: 6px; font-size: 13px; }
.ezb-menu-btn:hover { background: var(--card); }

/* プルダウン / コンテキストメニュー */
.ezb-dropdown, .ezb-context {
  position: fixed; z-index: 300; min-width: 168px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.5); padding: 4px; display: flex; flex-direction: column;
}
.ezb-context { z-index: 320; }
.ezb-dropdown button, .ezb-context button {
  text-align: left; background: none; border: none; color: var(--text); padding: 9px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.ezb-dropdown button:hover, .ezb-context button:hover { background: var(--card); }
.ezb-dropdown button:disabled, .ezb-context button:disabled { opacity: .4; cursor: default; }
.ezb-sep { height: 1px; background: var(--line); margin: 4px 6px; }

/* 一覧 */
.ezb-list { flex: 1; min-height: 0; overflow: auto; padding: 6px; }
.ezb-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: default; user-select: none; }
.ezb-item:hover { background: var(--card); }
.ezb-item.selected { background: var(--card-hover); outline: 1px solid var(--accent); }
.ezb-up { color: var(--accent); }
.ezb-ic { flex: none; }
.ezb-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ezb-sz, .ezb-dt, .ezb-md { font-size: 12px; color: var(--dim); white-space: nowrap; }
.ezb-md { font-family: ui-monospace, monospace; }
.ezb-head { display: none; }

/* 詳細表示 */
.ezb-list[data-view="detail"] .ezb-item,
.ezb-list[data-view="detail"] .ezb-head {
  display: grid; grid-template-columns: 22px minmax(0,1fr) 64px 128px 84px; gap: 8px; align-items: center;
}
.ezb-list[data-view="detail"] .ezb-head { display: grid; font-size: 12px; color: var(--dim); padding: 4px 8px; position: sticky; top: -6px; background: var(--bg); }

/* アイコン表示 */
.ezb-list[data-view="icon"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; align-content: start; }
.ezb-list[data-view="icon"] .ezb-item { flex-direction: column; text-align: center; gap: 4px; padding: 10px 4px; }
.ezb-list[data-view="icon"] .ezb-ic { font-size: 32px; }
.ezb-list[data-view="icon"] .ezb-nm { max-width: 100%; white-space: normal; word-break: break-all; font-size: 12px; line-height: 1.3; }
.ezb-list[data-view="icon"] .ezb-sz, .ezb-list[data-view="icon"] .ezb-dt, .ezb-list[data-view="icon"] .ezb-md { display: none; }

/* リスト表示 */
.ezb-list[data-view="list"] .ezb-sz, .ezb-list[data-view="list"] .ezb-dt, .ezb-list[data-view="list"] .ezb-md { display: none; }

/* モーダル(名前変更+権限) */
.ezb-modal-ov { position: fixed; inset: 0; z-index: 340; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 12px; }
.ezb-modal { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 280px; max-width: 92vw; }
.ezb-modal-t { font-weight: 600; margin-bottom: 10px; }
.ezb-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.ezb-modal-foot button { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; font: inherit; }
.ezb-ok { background: var(--accent); border-color: var(--accent); color: #fff; }
.ezb-lbl { display: block; font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.ezb-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; }
.ezb-input:focus { outline: none; border-color: var(--accent); }
.ezb-perm { margin-top: 12px; border-collapse: collapse; width: 100%; }
.ezb-perm th, .ezb-perm td { padding: 5px 8px; text-align: center; font-size: 13px; color: var(--dim); }
.ezb-perm td:first-child { text-align: right; color: var(--text); }
.ezb-perm input { width: 18px; height: 18px; }

/* エディタ */
.eze-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
.eze-menus { display: flex; gap: 2px; }
.eze-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-size: 13px; }
.eze-close { flex: none; background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 6px; width: 30px; height: 28px; cursor: pointer; }
.eze-close:hover { background: var(--card-hover); }
.eze-text {
  flex: 1; min-height: 0; width: 100%; box-sizing: border-box; resize: none; border: none; outline: none;
  background: var(--bg); color: var(--text); padding: 10px 12px; line-height: 1.5;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 14px;
}

/* トースト */
.ezb-toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 360;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 8px 16px; border-radius: 20px;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; font-size: 13px;
}
.ezb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* モバイル */
body.view-mobile .ezb-list { touch-action: manipulation; }
body.view-mobile .ezb-item { padding: 11px 8px; }
body.view-mobile .ezb-menu-btn { padding: 7px 12px; }