:root {
  --bg: #0f1115;
  --bg-elev: #171a21;
  --bg-elev-2: #1e222b;
  --border: #2a2f3a;
  --fg: #e6e9ef;
  --fg-dim: #9aa3b2;
  --fg-faint: #6b7383;
  --accent: #7aa2f7;
  --accent-dim: #3d5a99;
  --ok: #7fd88f;
  --warn: #e0af68;
  --err: #f7768e;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

#app { display: flex; flex-direction: column; height: 100dvh; }

/* ---------- Шапка ---------- */
header {
  flex: 0 0 auto; background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px;
}
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand { font-weight: 600; font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.brand .dot { color: var(--accent); }

select, button, input, textarea {
  font-family: inherit; font-size: 14px; color: var(--fg);
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px;
}
button { cursor: pointer; transition: background .12s, border-color .12s; }
button:hover:not(:disabled) { background: #262b36; border-color: #3a4150; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #0f1115; font-weight: 600; }
button.primary:hover:not(:disabled) { background: #92b4f9; }
button.danger { color: var(--err); border-color: #4a2b33; }

.path {
  flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 12.5px;
  color: var(--fg-dim); overflow-x: auto; white-space: nowrap;
  scrollbar-width: none; padding: 4px 0;
}
.path::-webkit-scrollbar { display: none; }
.path .seg { color: var(--accent); cursor: pointer; }
.path .seg:hover { text-decoration: underline; }
.path .sep { color: var(--fg-faint); padding: 0 2px; }

.status { font-size: 12px; color: var(--fg-faint); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); flex: 0 0 auto; }
.led.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.led.busy { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.led.off { background: var(--err); }

/* ---------- Вкладки ---------- */
nav.tabs {
  flex: 0 0 auto; display: flex; background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
nav.tabs button {
  flex: 1; border: none; border-radius: 0; background: transparent;
  padding: 11px 8px; color: var(--fg-dim); font-size: 14px;
  border-bottom: 2px solid transparent;
}
nav.tabs button.active { color: var(--fg); border-bottom-color: var(--accent); background: transparent; }

/* ---------- Панели ---------- */
main { flex: 1 1 auto; min-height: 0; position: relative; }
.panel { position: absolute; inset: 0; display: none; flex-direction: column; min-height: 0; }
.panel.active { display: flex; }

/* ---------- Файлы ---------- */
.filelist { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fileitem {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid #1c2029; cursor: pointer; min-width: 0;
}
.fileitem:hover { background: var(--bg-elev); }
.fileitem .ico { flex: 0 0 auto; width: 18px; text-align: center; opacity: .85; }
.fileitem .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 13.5px; }
.fileitem .nm.dir { color: var(--accent); }
.fileitem .meta { flex: 0 0 auto; font-size: 11.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.fileitem .lnk { color: var(--fg-faint); font-size: 11.5px; font-family: var(--mono); }

.viewer { position: absolute; inset: 0; background: var(--bg); display: none; flex-direction: column; z-index: 5; }
.viewer.open { display: flex; }
.viewer-head { flex: 0 0 auto; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg-elev); }
.viewer-body { flex: 1 1 auto; overflow: auto; }
.viewer-body pre {
  margin: 0; padding: 12px 14px; font-family: var(--mono); font-size: 12.5px;
  line-height: 1.55; white-space: pre; tab-size: 4;
}
.notice { padding: 24px 16px; color: var(--fg-dim); text-align: center; font-size: 14px; }

/* ---------- Терминал ---------- */
.term-wrap { flex: 1 1 auto; min-height: 0; padding: 6px; background: #0d0f13; }
#term { width: 100%; height: 100%; }
.keybar {
  flex: 0 0 auto; display: flex; gap: 6px; padding: 7px 8px calc(7px + var(--safe-b));
  background: var(--bg-elev); border-top: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.keybar::-webkit-scrollbar { display: none; }
.keybar button {
  flex: 0 0 auto; padding: 8px 11px; font-family: var(--mono); font-size: 12.5px;
  min-width: 44px;
}

/* ---------- Чат ---------- */
.chat-log { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 92%; padding: 9px 12px; border-radius: 12px; font-size: 14.5px; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: #223052; border: 1px solid #2e4270; }
.msg.claude { align-self: flex-start; background: var(--bg-elev); border: 1px solid var(--border); }
.msg.sys { align-self: center; font-size: 12px; color: var(--fg-faint); background: none; border: none; text-align: center; padding: 2px; }
.msg.err { align-self: flex-start; background: #2a1a1f; border: 1px solid #4a2b33; color: #ffb3c0; font-family: var(--mono); font-size: 12.5px; }
.msg pre {
  background: #0d0f13; border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px;
  margin: 7px 0; line-height: 1.5;
}
.msg code { font-family: var(--mono); font-size: .92em; background: #0d0f13; padding: 1px 5px; border-radius: 4px; }
.msg pre code { background: none; padding: 0; }
.msg p { margin: 0 0 8px; } .msg p:last-child { margin-bottom: 0; }

.tool { align-self: flex-start; max-width: 92%; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev); overflow: hidden; }
.tool summary {
  cursor: pointer; padding: 8px 11px; font-family: var(--mono); font-size: 12.5px;
  color: var(--fg-dim); list-style: none; display: flex; gap: 7px; align-items: baseline;
}
.tool summary::-webkit-details-marker { display: none; }
.tool summary .tname { color: var(--accent); font-weight: 600; flex: 0 0 auto; }
.tool summary .tsum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tool[data-error="1"] summary .tname { color: var(--err); }
.tool pre { margin: 0; padding: 9px 11px; border-top: 1px solid var(--border); background: #0d0f13; overflow-x: auto; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; max-height: 340px; overflow-y: auto; }

.thinking { align-self: flex-start; font-size: 12.5px; color: var(--fg-faint); font-style: italic; padding: 0 4px; }

.chat-input {
  flex: 0 0 auto; border-top: 1px solid var(--border); background: var(--bg-elev);
  padding: 8px 8px calc(8px + var(--safe-b)); display: flex; flex-direction: column; gap: 7px;
}
.chat-input .controls { display: flex; gap: 6px; align-items: center; }
.chat-input .controls select { flex: 0 0 auto; font-size: 12.5px; padding: 5px 7px; }
.chat-input .controls .status { margin-left: auto; }
.chat-input .compose { display: flex; gap: 7px; align-items: flex-end; }
.chat-input textarea {
  flex: 1 1 auto; resize: none; min-height: 42px; max-height: 160px;
  font-size: 15px; line-height: 1.4; padding: 10px 12px;
}
.chat-input button.send { flex: 0 0 auto; height: 42px; padding: 0 16px; }

@media (min-width: 820px) {
  .msg, .tool { max-width: 760px; }
  .chat-log { padding: 16px 20px; }
}