/* 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);
}
#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; }
/* Claude 使用量ウィジェット (5h/週の使用率バー + リセット時刻) */
#usage-widget { display: flex; align-items: center; gap: 10px; flex: none; font-size: 11px; color: var(--dim); }
#usage-widget.stale { opacity: .45; }
.uw-item { display: inline-flex; align-items: center; gap: 4px; }
.uw-bar { width: 44px; height: 6px; border-radius: 3px; background: var(--card); overflow: hidden; }
.uw-bar i { display: block; height: 100%; border-radius: 3px; }
.uw-bar i.ok { background: var(--green); }
.uw-bar i.warn { background: #e8a33d; }
.uw-bar i.crit { background: var(--red); }
.uw-pct { color: var(--text); }
.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(--accent); }   /* 入力待ち(次のプロンプト可)=青 */
.dot.st-running { background: var(--dim); }    /* 作業中=グレー */
.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-scroll)を重ねるぶん、右パディングでテキストが隠れないようにする */
.tw-view { position: relative; flex: 1; min-height: 0; padding: 4px 12px 1.5em 6px; background: var(--bg); }
.tw-view .xterm { height: 100%; }
/* 履歴はtmuxが管理するためxterm自身のスクロールバーは非表示(位置が連携できず誤解を招く)。
   代わりに tmux のスクロール位置に連動する専用バー(.tw-scroll)を右端に重ねる。 */
.xterm .xterm-viewport { scrollbar-width: none; }
.xterm .xterm-viewport::-webkit-scrollbar { width: 0; height: 0; }

/* tmuxのスクロール位置に連動する右端スクロールバー。ドラッグ/クリックで履歴を遡れる。 */
.tw-scroll {
  position: absolute; top: 4px; right: 2px; bottom: 1.5em; width: 10px;
  z-index: 20; border-radius: 6px; background: rgba(255, 255, 255, .04);
  touch-action: none; cursor: pointer;
}
.tw-scroll-thumb {
  position: absolute; left: 1px; right: 1px; top: 0; height: 100%;
  border-radius: 6px; background: rgba(255, 255, 255, .28);
  transition: background .12s;
}
.tw-scroll:hover .tw-scroll-thumb { background: rgba(255, 255, 255, .45); }
.tw-scroll.inert .tw-scroll-thumb { background: rgba(255, 255, 255, .12); } /* 履歴が無い=遡れない */

/* 制御キー行(各ターミナル一体。右端に入力欄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ボタンの位置)。アクセント枠で区別 */
.tw-keyrow select.mdlsel, .tw-keyrow select.effsel {
  background: var(--card); color: var(--text); border: 1px solid var(--accent);
  border-radius: 6px; padding: 3px 6px; font-size: 12px; cursor: pointer; flex: none;
  max-width: 130px;
}
.tw-keyrow select.mdlsel:hover, .tw-keyrow select.effsel:hover { background: var(--card-hover); }
/* Claude起動ボタン(⏎とTabの間)。Claudeブランドカラーの枠で区別 */
.tw-keyrow button.claudekey {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px; border-color: #d97757;
}
.tw-keyrow button.claudekey .claude-ico { width: 16px; height: 16px; display: block; }
.tw-keyrow button.claudekey:hover { background: rgba(217, 119, 87, .15); }
.tw-keyrow button.claudekey:active { background: rgba(217, 119, 87, .3); }

/* 選択コピーのオーバーレイ(コンソール内容をネイティブ選択可能な <pre> に写す) */
.tw-sel-modal .ez-modal-body { flex-direction: column; }
.tw-sel-hint { flex: none; padding: 8px 14px; font-size: 12px; color: var(--dim); border-bottom: 1px solid var(--line); }
.tw-selpre {
  flex: 1; min-height: 0; width: 100%; margin: 0; padding: 12px 14px; overflow: auto;
  box-sizing: border-box; border: 0; outline: none; resize: none;
  font-family: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.5; color: var(--text); background: var(--bg);
  /* iOS で長押し選択→コピーのポップアップを出すために不可欠 */
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

/* 高さ変更ハンドル */
.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; }
/* usage-widget は conn-state と同じ order 3 でも DOM 順で手前に並ぶ。
   スマホでは更新時刻を省略して幅を節約 */
body.view-mobile #usage-widget { order: 3; }
body.view-mobile .uw-reset { display: none; }
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-item[draggable="true"] { cursor: grab; }
/* ドラッグ&ドロップ: アップロード先のハイライト */
#ez-browser.ezb-drop { outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 8px; }
.ezb-item.ezb-drop-into { background: var(--card-hover); outline: 1px dashed var(--accent); }
.ezb-up { color: var(--accent); }
.ezb-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; }
/* 画像サムネイル: 一覧/リスト/詳細では小さく、アイコン表示では大きく */
.ezb-thumb { width: 22px; height: 22px; object-fit: cover; border-radius: 3px; background: var(--card); vertical-align: middle; }
.ezb-list[data-view="icon"] .ezb-thumb { width: 48px; height: 48px; border-radius: 5px; }
.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 var(--ezb-w-name, 240px) var(--ezb-w-size, 64px) var(--ezb-w-mtime, 128px) minmax(var(--ezb-w-perm, 84px), 1fr);
  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-col { position: relative; cursor: pointer; user-select: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; }
.ezb-col:hover { color: var(--text); }
.ezb-col.active { color: var(--accent); }
/* 列境界のドラッグで表示幅を変更 */
.ezb-rz { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 1; }
.ezb-rz::after { content: ''; position: absolute; right: 4px; top: 2px; bottom: 2px; width: 1px; background: var(--line); }
.ezb-rz:hover::after { background: var(--accent); }

/* アイコン表示 */
.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-msg { color: var(--text); font-size: 14px; line-height: 1.5; }
.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; }

/* エディタ(#ez-editor)のスタイルは ezeditor.css に分離。
   #ez-editor 自体のモード表示レイアウトはこのファイル上部の3ビュー共通ルールにある。 */

/* トースト */
.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; }

/* ================= ハンバーガーメニュー / 設定 / マニュアル ================= */
.ez-menu {
  position: fixed; z-index: 1000; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.5); padding: 6px; overflow: hidden;
}
.ez-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text); cursor: pointer;
  padding: 10px 12px; border-radius: 7px; font-size: 14px; font-family: inherit;
}
.ez-menu-item:hover { background: var(--card); }
.ez-mi-ic { width: 20px; text-align: center; flex: none; }
.ez-mi-tx { flex: 1; }

/* オーバーレイ(モーダル) */
.ez-overlay {
  position: fixed; inset: 0; z-index: 1001; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ez-modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  width: 100%; max-width: 460px; max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); overflow: hidden;
}
.ez-modal.wide { max-width: 980px; height: 88vh; }
.ez-modal-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--line); flex: none;
}
.ez-modal-head h2 { flex: 1; margin: 0; font-size: 16px; }
.ez-modal-x, .ez-modal-head .btn {
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; cursor: pointer; padding: 5px 10px; font-size: 14px;
}
.ez-modal-x:hover { background: var(--card-hover); }
.ez-modal-body { padding: 16px; overflow: auto; }
.ez-modal.wide .ez-modal-body { padding: 0; flex: 1; display: flex; }

/* マニュアル iframe */
.ez-manual-wrap { flex: 1; display: flex; }
.ez-manual-frame { flex: 1; width: 100%; height: 100%; border: none; background: #fff; }

/* 設定 */
.ez-settings { display: flex; flex-direction: column; gap: 22px; }
.ez-set-sec h3 { margin: 0 0 10px; font-size: 14px; color: var(--accent); }
.ez-set-sub { font-size: 12px; color: var(--dim); margin: 12px 0 6px; }
.ez-set-note { font-size: 12px; color: var(--dim); margin: 8px 0 0; line-height: 1.5; }
.ez-radio, .ez-switch {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px; cursor: pointer;
  border-radius: 7px; font-size: 14px;
}
.ez-radio:hover, .ez-switch:hover { background: var(--card); }
.ez-radio input, .ez-switch input { width: 16px; height: 16px; accent-color: var(--accent); }

/* パスキー一覧 */
.ez-pk-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.ez-pk-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
}
.ez-pk-info { flex: 1; min-width: 0; }
.ez-pk-label { font-size: 14px; word-break: break-word; }
.ez-pk-meta { font-size: 12px; color: var(--dim); margin-top: 2px; }

/* モバイル */
body.view-mobile .ez-overlay { padding: 0; }
body.view-mobile .ez-modal, body.view-mobile .ez-modal.wide {
  max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0;
}

/* ================= ツールチップ(バルーン) ================= */
.ez-tip {
  position: fixed; z-index: 3000; max-width: 280px;
  background: #0f1420; color: #eef1f7; border: 1px solid #333846;
  padding: 7px 11px; border-radius: 9px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 6px 22px rgba(0,0,0,.5); pointer-events: none;
  white-space: normal; word-break: break-word; overflow-wrap: anywhere;
}
.ez-tip::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -5px; border: 5px solid transparent; border-top-color: #0f1420; border-bottom: 0;
}
.ez-tip.below::after { bottom: auto; top: -5px; border-top: 0; border-bottom: 5px solid #0f1420; }

/* ================= RTL(ヘブライ語など) ================= */
/* html[dir="rtl"] でヘッダー・メニュー・設定・ログイン等の“枠”は右横書きにミラーされる
   (flex/gap ベースのため多くは自動)。一方、ターミナル・コード・ファイル一覧・エディタの
   “中身”は LTR のままにして表示崩れを防ぐ。 */
html[dir="rtl"] #terminals,
html[dir="rtl"] .term-wrap,
html[dir="rtl"] .xterm,
html[dir="rtl"] .tw-text,
html[dir="rtl"] #ez-editor,
html[dir="rtl"] .ezb-list,
html[dir="rtl"] pre,
html[dir="rtl"] code { direction: ltr; }
html[dir="rtl"] pre, html[dir="rtl"] .xterm { text-align: left; }
/* ツールチップの説明はRTL言語では右寄せに */
html[dir="rtl"] .ez-tip { direction: rtl; }

/* ================= リリースノーツ ================= */
.ez-releases { display: flex; flex-direction: column; gap: 4px; }
.ez-rel-cur { font-size: 13px; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.ez-rel { margin-bottom: 18px; }
.ez-rel-h { margin: 0 0 8px; font-size: 15px; color: var(--text); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.ez-rel-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.ez-rel-list li { font-size: 13.5px; line-height: 1.55; color: var(--text); }