:root { --bg:#f5f6f8; --card:#fff; --text:#16191d; --muted:#5f6672; --accent:#1f4e8c;
        --border:#e1e4e9; --ok:#1a7f37; --err:#b42318; --warn:#9a6700; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font:15px/1.55 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
header { background:var(--accent); color:#fff; }
header .wrap { max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
header a { color:#fff; text-decoration:none; opacity:.85; }
header a:hover, header a.on { opacity:1; text-decoration:underline; }
header .brand { font-weight:600; opacity:1; margin-right:auto; }
header .who { font-size:13px; opacity:.85; }
main { max-width:1100px; margin:0 auto; padding:24px 16px 60px; }
h1 { font-size:24px; margin:0 0 4px; }
h2 { font-size:17px; margin:28px 0 10px; }
.sub { color:var(--muted); font-size:14px; margin:0 0 20px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:12px; }
input, textarea, button, select { font:inherit; padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:#fff; }
input, textarea { width:100%; }
textarea { min-height:90px; resize:vertical; }
button { background:var(--accent); color:#fff; border:0; cursor:pointer; }
button:disabled { opacity:.55; cursor:default; }
button.ghost { background:#fff; color:var(--accent); border:1px solid var(--border); }
label { display:block; margin-top:12px; font-weight:500; font-size:14px; }
.status { margin-top:12px; min-height:22px; font-size:14px; }
.status.ok { color:var(--ok); } .status.err { color:var(--err); }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
th { background:#eef1f5; font-size:13px; color:var(--muted); font-weight:600; }
tr:last-child td { border-bottom:0; }
td a { color:var(--accent); text-decoration:none; font-weight:500; }
.tag { display:inline-block; border-radius:999px; padding:1px 9px; font-size:12px; background:#eef2f8; color:var(--accent); }
.tag.warn { background:#fff4e0; color:var(--warn); } .tag.err { background:#fdecea; color:var(--err); }
.tag.ok { background:#e8f5ec; color:var(--ok); }
.muted { color:var(--muted); font-size:13px; }
pre.text { white-space:pre-wrap; word-wrap:break-word; font:14px/1.6 ui-monospace, Menlo, monospace;
           background:#fbfbfc; border:1px solid var(--border); border-radius:8px; padding:14px; max-height:70vh; overflow:auto;
           /* прокрутка живёт внутри блока: докрутив ответ до конца, страница не должна
              уезжать дальше сама, иначе на телефоне из длинного разбора не выбраться */
           overscroll-behavior: contain; scrollbar-gutter: stable; }
.msg { margin-bottom:14px; }
.msg .role { font-size:12px; color:var(--muted); margin-bottom:3px; }
.msg.user .bubble { background:#eef2f8; }
.bubble { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px 14px; white-space:pre-wrap; word-wrap:break-word; }
.login-wrap { max-width:360px; margin:12vh auto; }
.row { display:flex; gap:10px; align-items:flex-start; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:820px) { .grid2 { grid-template-columns:1fr; } }

.quick { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.quick button { background:#eef2f8; color:var(--accent); border:1px solid var(--border);
                border-radius:999px; padding:5px 12px; font-size:13px; }
.quick button:hover { background:#e3ebf6; }

/* Длинные материалы сворачиваются: разбор бывает на сотню страниц */
pre.text.clamp { max-height: calc(20 * 1.6em); overflow: hidden; }
.more { margin-top: 8px; background: #fff; color: var(--accent); border: 1px solid var(--border);
        border-radius: 8px; padding: 5px 12px; font-size: 13px; }
.sources { margin-top: 8px; font-size: 13px; color: var(--muted); }
.sources a { display: inline-block; background: #eef2f8; color: var(--accent); text-decoration: none;
             border-radius: 999px; padding: 2px 10px; margin: 3px 4px 0 0; }
.sources a:hover { background: #e3ebf6; }

.pager { margin: 10px 0 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager .more { margin-top: 0; }

.snippet { font-size: 13px; color: var(--muted); margin-top: 4px; font-style: italic; }
button.tag { cursor: pointer; border: 1px solid transparent; margin: 2px 3px 0 0; }
button.tag:hover { background: #dde6f3; }

.dropzone { transition: background .15s, border-color .15s; }
.dropzone.dragover { background: #eef4fc; border-color: var(--accent); border-style: dashed; }
.quick button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#noteview { margin-top: 12px; }

/* ================= Телефон =================
   Шире 780px — обычная вёрстка. Уже — таблицы разворачиваются в карточки:
   пять колонок в 375 пикселей не влезают, а горизонтальная прокрутка
   на телефоне неудобна и прячет данные. */
@media (max-width: 780px) {
  body { font-size: 16px; }                    /* мельче Safari сам увеличит поле ввода */
  main { padding: 16px 12px 48px; }
  header .wrap { padding: 10px 12px; gap: 12px; row-gap: 6px; }
  header .brand { width: 100%; margin-right: 0; }
  header .who { font-size: 12px; width: 100%; order: 10; }
  h1 { font-size: 21px; }
  h2 { font-size: 17px; }

  .row { flex-direction: column; align-items: stretch; }
  .row button, .filters input, .filters select { width: 100%; }
  .filters { flex-direction: column; }

  /* строка таблицы становится карточкой с подписями слева */
  table { border: 0; background: transparent; }
  thead { position: absolute; left: -9999px; }        /* заголовки не нужны: они в подписях */
  tbody tr { display: block; background: var(--card); border: 1px solid var(--border);
             border-radius: 10px; margin-bottom: 10px; padding: 4px 2px; }
  tbody td { display: grid; grid-template-columns: 40% 1fr; gap: 8px;
             border-bottom: 1px solid var(--border); padding: 8px 12px; }
  tbody tr td:last-child { border-bottom: 0; }
  tbody td::before { content: attr(data-label); color: var(--muted); font-size: 13px; }
  tbody td:not([data-label]) { display: block; }

  pre.text { font-size: 13px; padding: 10px; }
  pre.text.clamp { max-height: calc(14 * 1.6em); }     /* на телефоне 20 строк — это пол-экрана */
  .bubble { padding: 10px 12px; }
  .grid2 { grid-template-columns: 1fr; }
  .quick button { font-size: 12px; padding: 5px 10px; }
  .login-wrap { margin: 6vh auto; padding: 0 14px; }
  .contacts { grid-template-columns: 1fr; gap: 2px 0; }
  .contacts .muted { margin-top: 6px; }
}

/* Совсем узкие экраны */
@media (max-width: 380px) {
  tbody td { grid-template-columns: 1fr; gap: 2px; }
  header .wrap { gap: 10px; }
}

.tablewrap { overflow-x: auto; }
@media (max-width: 780px) { .tablewrap { overflow-x: visible; } }

/* уведомление владельцу о новой учётной записи */
.notice { border-left: 3px solid var(--accent); margin-bottom: 20px; }
.notice-title { font-weight: 600; margin-bottom: 8px; }
.notice-line { font-size: 14px; margin-bottom: 4px; }