/* Экран §9 ТЗ: слева диалог, справа дерево. Мобайл — диалог основной, дерево вкладкой.
   Без сборки и без внешних зависимостей: одна страница, один css, один js.
   Причина не в аскезе, а в §3 — задача этапа получить два числа, а не витрину. */

:root {
  --bg: #f7f5f0;
  --ink: #1b1b1a;
  --muted: #6b6b66;
  --line: #d9d5cc;
  --accent: #3d5ae0;
  --hyp: #a09a8c;
  --radius: 10px;
  --pad: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
}

#app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  min-height: 100vh;
}

#chat, #side { background: var(--bg); padding: var(--pad); display: flex; flex-direction: column; }

h1 { font-size: 20px; margin: 0; }
.sub { color: var(--muted); margin: 4px 0 var(--pad); font-size: 14px; }

#log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

.turn { max-width: 46ch; padding: 10px 12px; border-radius: var(--radius); white-space: pre-wrap; }
.turn.liza { background: #fff; border: 1px solid var(--line); }
.turn.me { background: var(--accent); color: #fff; align-self: flex-end; }
.turn.work { color: var(--muted); font-size: 14px; background: none; padding-left: 2px; }

#say { display: flex; gap: 8px; margin-top: var(--pad); }
#msg { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
       font: inherit; background: #fff; }
#msg:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button { font: inherit; cursor: pointer; border-radius: var(--radius); border: 1px solid var(--line);
         background: #fff; padding: 10px 14px; }
#say button { background: var(--accent); color: #fff; border-color: var(--accent); min-width: 48px; }

#tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--pad); }
#tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.pane { flex: 1; overflow-y: auto; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--pad); font-size: 13px; }
.chip { padding: 2px 8px; border-radius: 999px; }
.chip.hypothesis { border: 1px dashed var(--hyp); color: var(--muted); }
.chip.document { border: 1px solid var(--ink); }

/* Узел дерева: пунктир = гипотеза, сплошная рамка = документ.
   Различие несёт смысл §4, поэтому оно не только цветом — на монохромном экране
   и при дальтонизме пунктир против сплошной линии всё равно читается. */
.node { border-radius: var(--radius); padding: 8px 10px; margin: 0 0 8px; background: #fff; }
.node.hypothesis { border: 1px dashed var(--hyp); color: var(--muted); }
.node.document { border: 1px solid var(--ink); }
.node .name { font-weight: 600; }
.node .meta { font-size: 13px; color: var(--muted); }
.node .why { font-size: 13px; color: var(--muted); font-style: italic; }
.gen { margin: 0 0 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
       color: var(--muted); }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
        padding: 10px 12px; margin-bottom: 10px; }
.card .src { font-size: 13px; color: var(--muted); }
/* Пометка по месту. Курсив, как у «почему» на узле дерева: и там, и тут это наша оговорка
   к чужим данным, а не сами данные. Цветом не выделяем — различие обязано читаться на
   монохромном экране, иначе отложенная карточка снова сравняется с совпавшей. */
.card .place-note { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 4px; }
.card .acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.empty { color: var(--muted); font-size: 14px; }

@media (max-width: 820px) {
  /* Мобайл: диалог — основной экран, дерево уезжает во вкладку (§9). */
  #app { grid-template-columns: 1fr; }
  #side { border-top: 1px solid var(--line); }
}

/* --- права субъекта -------------------------------------------------------
   Отдельный блок, а не строка в подвале: право на удаление должно быть видно.
   Опасная кнопка отличается не только цветом — цвет не различают дальтоники и он
   исчезает при печати, — поэтому у неё ещё и рамка, и другое начертание. */
#rights {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line, #d7d7d2);
}
#rights h2 { font-size: 1rem; margin: 0 0 .35rem; }
.rights-note { font-size: .82rem; opacity: .78; margin: .35rem 0 0; }
.rights-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.rights-actions button {
  font: inherit;
  padding: .45rem .8rem;
  border: 1px solid var(--line, #d7d7d2);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.rights-actions button:hover { background: rgba(0, 0, 0, .04); }
.rights-actions .danger {
  border-color: #a3352b;
  border-style: dashed;
  font-weight: 600;
}
.rights-actions .danger:hover { background: rgba(163, 53, 43, .08); }
@media (prefers-color-scheme: dark) {
  .rights-actions button:hover { background: rgba(255, 255, 255, .07); }
  .rights-actions .danger { border-color: #e8877c; }
  .rights-actions .danger:hover { background: rgba(232, 135, 124, .12); }
}

/* Кнопки узла — правка и приём документа. Неяркие, чтобы не спорить с содержимым
   карточки, но видимые: «📎 документ» — вход в точку успеха всего продукта, и прятать
   его в меню значило бы прятать сам результат. */
.node-edit,
.node-attach {
  margin-top: .4rem;
  font: inherit;
  font-size: .8rem;
  padding: .2rem .5rem;
  border: 1px solid var(--line, #d7d7d2);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  opacity: .7;
}
.node-edit:hover,
.node-attach:hover { opacity: 1; background: rgba(0, 0, 0, .04); }
.node-attach { margin-left: .3rem; }
@media (prefers-color-scheme: dark) {
  .node-edit:hover,
  .node-attach:hover { background: rgba(255, 255, 255, .07); }
}