/* OpenCode hub — список сессий слева, чат справа. Светлая тема. */

* { box-sizing: border-box; }

:root {
  --bg:      #f4f6f8;
  --panel:   #ffffff;
  --panel-2: #eef1f5;
  --hover:   #e9edf2;
  --line:    rgba(15, 23, 42, .12);
  --fg:      #1c2128;
  --fg-dim:  #59636e;
  --fg-faint:#7d8792;

  --thinking: #b5730a;   /* думает */
  --ready:    #1a7f37;   /* готово */
  --waiting:  #0969da;   /* ожидает */
  --error:    #cf222e;   /* ошибка */

  --beget: #9a6700;
  --nn:    #0969da;
  --grizodub: #8250df;
  --sprint:#57606a;

  --star:      #bf8700;
  --user-bg:   #ddf4ff;
  --user-line: rgba(9, 105, 218, .35);
  --accent:    #0969da;
  --accent-bg: #ddf4ff;
  --accent-fg: #0a3d75;

  --side-w: 330px;
  --radius: 8px;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  grid-template-rows: minmax(0, 1fr);   /* ряд не растёт от контента списка */
  height: 100vh;
}

/* ---------- левая колонка ---------- */

.side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.side-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 60px;              /* шапка списка = высоте шапки чата */
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.brand {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .2px;
}

.brand-sub {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-faint);
}

/* узлы в шапке: онлайн — подсвечен фоном, офлайн — приглушён */
.nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.node {
  font: 600 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-faint);
  background: transparent;
}

.node.on.s-beget    { color: var(--beget);    background: rgba(154, 103, 0, .12);  border-color: rgba(154, 103, 0, .45); }
.node.on.s-nn       { color: var(--nn);       background: rgba(9, 105, 218, .10);  border-color: rgba(9, 105, 218, .4); }
.node.on.s-grizodub { color: var(--grizodub); background: rgba(130, 80, 223, .12); border-color: rgba(130, 80, 223, .4); }
.node.off           { opacity: .6; }

.list {
  flex: 1;
  min-height: 0;             /* список скроллится, а не растягивает колонку */
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
}

.item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 10px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
}

.item:hover  { background: var(--hover); }

/* ошибка и ожидание — фон строки оттенком статуса */
.item.tint-error   { background: rgba(207, 34, 46, .07); }
.item.tint-waiting { background: rgba(9, 105, 218, .06); }
.item.tint-error:hover   { background: rgba(207, 34, 46, .12); }
.item.tint-waiting:hover { background: rgba(9, 105, 218, .11); }

.item.active {
  background: var(--accent-bg);
  border-color: var(--accent);
}

.row1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.row2 .time { margin-left: auto; }     /* время, статус и кружок — вправо */
.row2 .dot  { margin-left: 2px; }

.time {
  flex: none;
  font-size: 11px;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

/* бейдж строки: название проекта, цветом — узел, в title — имя узла */
.badge {
  flex: none;
  font: 600 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, .3);
}

.badge.s-beget    { color: var(--beget); }
.badge.s-nn       { color: var(--nn); }
.badge.s-grizodub { color: var(--grizodub); }
.badge.s-sprint   { color: var(--sprint); }

/* статус: цвет по классу st-*, поэтому работает и на отдельном кружке */
.st-thinking { color: var(--thinking); }
.st-ready    { color: var(--ready); }
.st-waiting  { color: var(--waiting); }
.st-error    { color: var(--error); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 11.5px;
  white-space: nowrap;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status.st-thinking .dot,
.dot.st-thinking { animation: pulse 1.1s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: .35; transform: scale(.75); }
}

/* звёздочки */
.star {
  flex: none;
  padding: 0 1px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  color: var(--fg-faint);
}

.star:hover { color: var(--star); }
.star.on    { color: var(--star); }
.star.big   { font-size: 21px; }
.star:disabled { opacity: .35; cursor: default; }

/* ---------- чат ---------- */

.chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;              /* шапка чата = высоте шапки списка */
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.chat-id { flex: 1; min-width: 0; }

.chat-title {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  min-width: 0;
}

.demo-chip {
  flex: none;
  font-size: 10.5px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-faint);
}

.msgs {
  flex: 1;
  min-height: 0;             /* лента скроллится, поле ввода остаётся у низа */
  padding: 18px 16px 8px;
  overflow-y: auto;
}

.empty {
  margin-top: 12vh;
  text-align: center;
  color: var(--fg-faint);
  font-size: 13.5px;
}

.msg {
  margin-bottom: 12px;      /* все сообщения по левому краю, без боковых отступов */
}

.msg .bubble {
  padding: 9px 12px;
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13.5px;
}

.msg .who {
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--fg-faint);
}

.msg.user .bubble {
  background: var(--user-bg);
  border: 1px solid var(--user-line);
}
.msg.assistant .bubble {
  background: var(--panel);
  border: 1px solid var(--line);
}

.msg.assistant.st-thinking .bubble { border-color: var(--thinking); }

/* поле ввода */
.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.composer textarea {
  flex: 1;
  resize: none;
  max-height: 160px;
  padding: 9px 11px;
  color: var(--fg);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  line-height: 1.4;
}

.composer textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.composer textarea:disabled { opacity: .5; }

.composer button {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-bg);
  color: var(--accent-fg);
  font-size: 15px;
  cursor: pointer;
}

.composer button:disabled { opacity: .4; cursor: default; }
.composer button:not(:disabled):hover { filter: brightness(.96); }

/* скроллбары */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(120, 130, 145, .45); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(120, 130, 145, .7); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }