/* EZeditor */
* { 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%; }
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; }
#hub-tabs i {
  background: var(--red); color: #fff; font-style: normal; font-size: 10px;
  min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px;
  padding: 0 4px; display: inline-block; text-align: center; margin-left: 4px;
  vertical-align: 1px;
}
#term-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line); flex: none;
}
#term-bar .brand { font-weight: 600; }
#term-bar .spacer { flex: 1; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--green); }
.dot.off { background: var(--red); }
#terminal { flex: 1; min-height: 0; padding: 4px 0 0 6px; background: var(--bg); }
#terminal .xterm { height: 100%; }
#panel-term { background: var(--bg); overflow: hidden; }
#keyrow {
  display: none; flex: none; gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--line); overflow-x: auto;
}
#keyrow button {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 12px; cursor: pointer; flex: none; font-size: 14px;
}
#keyrow button:active { background: var(--accent); }
body.view-mobile #keyrow { display: flex; }
body.view-mobile #term-bar { padding: 6px 8px; flex-wrap: wrap; row-gap: 4px; }
body.view-mobile #term-bar .brand { display: none; }
body.view-mobile #hub-tabs { margin-left: 0; }
body.view-mobile #hub-tabs button { padding: 6px 8px; font-size: 16px; }
body.view-mobile #hub-tabs button span { display: none; }

/* ---- 開発ハブ (ターミナル統合1画面) ---- */
#hub-tabs { display: none; gap: 4px; margin-left: 6px; }
#hub-tabs button {
  background: none; border: 1px solid transparent; color: var(--dim);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px;
}
#hub-tabs button.active { background: var(--card); color: var(--text); border-color: var(--line); }
#project-filter {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px; max-width: 180px;
}
#hub-body {
  position: relative; /* #panel-audit のオーバーレイ基準 */
  flex: 1; min-height: 0; display: grid; gap: 10px; padding: 10px;
  grid-template-areas:
    "term   term  sess"
    "kanban inbox sess";
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 310px;
  grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr);
}
#panel-term { grid-area: term; }
#panel-sessions { grid-area: sess; }
#panel-kanban { grid-area: kanban; }
#panel-inbox { grid-area: inbox; }
.hub-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
.hub-panel h2 { margin: 0; padding: 12px 14px; font-size: 15px; border-bottom: 1px solid var(--line); }
.hub-scroll { padding: 10px; overflow-y: auto; flex: 1; }
.count { color: var(--dim); font-size: .8em; font-weight: normal; }
.empty { color: var(--dim); text-align: center; padding: 24px 8px; }
.spacer { flex: 1; }

/* セッションカード */
.sess-group { margin-bottom: 14px; }
.sess-group > h3 { margin: 0 0 6px; font-size: 12px; color: var(--dim); letter-spacing: .05em; }
.sess-group.st-stopped > h3 { color: var(--red); }
.sess-group.st-waiting_user > h3 { color: #e8a33d; }
.sess-card {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--dim);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer;
}
.sess-card:hover { background: var(--card-hover); }
.sess-card .s-top { display: flex; align-items: center; gap: 6px; }
.sess-card .s-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-card .s-elapsed { margin-left: auto; color: var(--dim); font-size: 12px; white-space: nowrap; }
.sess-card .s-sub { color: var(--dim); font-size: 12px; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-card.st-waiting_user { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,163,61,.35); } 50% { box-shadow: 0 0 0 5px rgba(232,163,61,0); } }

/* カンバン */
.kanban-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: start; }
.kb-col { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  min-height: 120px; display: flex; flex-direction: column; }
.kb-col > h3 { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--dim);
  border-bottom: 1px solid var(--line); }
.kb-col .kb-cards { padding: 8px; flex: 1; min-height: 60px; }
.kb-col.dragover { outline: 2px dashed var(--accent); outline-offset: -4px; }
.task-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px; cursor: grab;
}
.task-card:hover { background: var(--card-hover); }
.task-card .t-title { font-weight: 600; }
.t-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; align-items: center; }
.chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.chip.proj { border-color: #3a4a6b; color: #9db8e8; }
.chip.flag-discussion { border-color: #e8a33d; color: #e8a33d; }
.chip.flag-hold { border-color: var(--dim); color: var(--dim); }
.chip.new { background: var(--red); border-color: var(--red); color: #fff; font-weight: bold; }

/* 受信箱 */
.inbox-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; }
.inbox-card .t-title { font-weight: 600; cursor: pointer; }
.inbox-card .i-btns { display: flex; gap: 8px; margin-top: 8px; }
.inbox-card .i-btns .btn { flex: 1; }

/* ダイアログ・トースト */
dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; width: 440px; max-width: calc(100vw - 32px);
}
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h3 { margin: 0 0 12px; }
dialog label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--dim); }
dialog input:not([type=hidden]), dialog textarea, dialog select {
  width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit;
}
dialog .row { display: flex; gap: 10px; }
dialog .row label { flex: 1; }
.dialog-btns { display: flex; gap: 8px; margin-top: 14px; }
.colors { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.colors button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.colors button.sel { border-color: #fff; }
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #2d3240; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 16px; display: flex; gap: 12px; align-items: center; z-index: 100;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
#toast button { background: none; border: none; color: var(--accent); cursor: pointer; font-weight: bold; }

/* ハブ: モバイル */
body.view-mobile #hub-tabs { display: flex; }
body.view-mobile #project-filter { max-width: 110px; }
body.view-mobile #hub-body {
  display: block; overflow-y: auto; padding: 8px;
  grid-template-areas: none; grid-template-columns: none; grid-template-rows: none;
}
body.view-mobile .hub-panel { display: none; border: none; background: transparent; height: 100%; }
body.view-mobile .hub-panel.active { display: flex; }
body.view-mobile #panel-term { background: var(--bg); }
body.view-mobile #panel-term #keyrow { border-radius: 0 0 8px 8px; }
body.view-mobile .hub-panel h2 { display: none; }
body.view-mobile .hub-scroll { padding: 0; }
body.view-mobile .kanban-cols { grid-template-columns: 1fr; }
body.view-mobile .task-card, body.view-mobile .sess-card { padding: 12px; }
body.view-mobile #btn-new-task { padding: 8px 12px; }

/* 狭いデスクトップは2x2 */
@media (max-width: 1100px) {
  body.view-desktop #hub-body {
    grid-template-areas: "term sess" "kanban inbox";
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* ---- mobile (UA判定: body.view-mobile) ---- */
body.view-mobile #sidebar {
  position: fixed; inset: 0 25% 0 0; z-index: 20; min-width: 260px;
  transform: translateX(-105%); transition: transform .2s ease;
}
body.view-mobile #sidebar.open { transform: none; box-shadow: 4px 0 24px rgba(0,0,0,.5); }
body.view-mobile #btn-close-side { display: inline-flex; }
body.view-mobile #btn-menu { display: inline-flex; }
body.view-mobile #messages { padding: 14px 12px; }
body.view-mobile .msg { margin-bottom: 14px; }
body.view-mobile #composer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
body.view-mobile #chat-status { display: none; }

/* ---- 監査ログ ---- */
/* デスクトップ: グリッドに載せず、タブで開くオーバーレイにする */
body.view-desktop #panel-audit {
  display: none; position: absolute; inset: 10px; z-index: 30;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .55);
}
body.view-desktop #panel-audit.show { display: flex; }
#audit-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line); flex: none;
}
#audit-filter {
  flex: 1; min-width: 140px; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px;
}
.audit-chk {
  display: flex; align-items: center; gap: 5px; color: var(--dim);
  font-size: 13px; white-space: nowrap; cursor: pointer;
}
#audit-log {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px; line-height: 1.55; background: var(--bg);
  padding: 6px 4px;
}
.audit-line {
  display: flex; gap: 10px; padding: 1px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .03);
}
.audit-line .a-ts { color: var(--dim); flex: none; }
.audit-line .a-sid { color: #6b7488; flex: none; }
.audit-line .a-label { flex: none; width: 62px; font-weight: 700; }
.audit-line .a-detail { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.ev-prompt { background: rgba(76, 141, 255, .07); }
.ev-prompt .a-label { color: var(--accent); }
.ev-tool .a-label { color: #d4c14f; }
.ev-result .a-label { color: var(--green); }
.ev-notify { background: rgba(232, 163, 61, .07); }
.ev-notify .a-label { color: #e8a33d; }
.ev-stop .a-label { color: var(--dim); }
.ev-session .a-label { color: #986ee2; }
.ev-system .a-detail { color: var(--dim); text-align: center; width: 100%; }
body.view-mobile #audit-log { padding: 6px 2px; }
body.view-mobile .audit-line { gap: 6px; font-size: 12px; }
body.view-mobile .audit-line .a-label { width: 54px; }