/* Hermes Mini App — минимализм в духе ChatGPT/Claude web */
:root {
  --bg: #0d0f12;
  --panel: #151821;
  --panel-2: #1a1e29;
  --fg: #e8eaf0;
  --fg-strong: #ffffff;
  --muted: #9aa0b0;
  --accent: #5b8def;
  --accent-fg: #ffffff;
  --border: #232734;
  --danger: #c0392b;
  --radius: 12px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto,
    "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo,
    Consolas, monospace;
  /* Типографическая шкала */
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 15px;
  --fs-md: 16.5px;
  --fs-lg: 19px;
  --code-bg: #10131a;
  --code-fg: #cdd6e8;
  --inline-code-bg: rgba(91,141,239,.13);
  --inline-code-fg: #a8c4ff;
}
* { box-sizing: border-box; }
/* Атрибут hidden обязан побеждать любой display из классов/id
   (иначе #overlay{display:flex} показывал "скрытую" шторку всегда). */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: var(--fs-base); line-height: 1.5;
  -webkit-font-smoothing: antialiased; }
h1, h2, h3 { line-height: 1.3; }

/* Тонкие скроллбары */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ─── Иконки и кнопки ─── */
.icon { width: 20px; height: 20px; flex-shrink: 0; }
button { font-family: inherit; }
.btn { height: 44px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; font-size: var(--fs-sm); font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; transition: background .15s, border-color .15s, color .15s,
  transform .15s, filter .15s; background: transparent; color: var(--fg); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-icon { width: 44px; padding: 0; flex-shrink: 0; }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: rgba(127,127,127,.12); color: var(--fg); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
.btn.wide { width: 100%; margin-top: 12px; }
.retry-btn { height: 34px; padding: 0 12px; margin-top: 8px;
  border: 1px solid var(--border); color: var(--muted); font-size: var(--fs-xs); }
.retry-btn:hover { border-color: var(--accent); color: var(--fg); }

#app { display: flex; height: 100dvh; overflow: hidden; }

/* ─── Сайдбар ─── */
#sidebar { width: 300px; min-width: 300px; background: var(--panel);
  display: flex; flex-direction: column; border-right: 1px solid var(--border);
  transition: transform .18s ease, width .18s ease, min-width .18s ease; }
#sidebar.closed { width: 0; min-width: 0; overflow: hidden; border-right: 0; }
.sidebar-head { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px 10px 16px; font-weight: 600; font-size: var(--fs-md);
  letter-spacing: .01em; color: var(--fg-strong); }
.sidebar-actions { display: flex; gap: 4px; }
.sidebar-actions .btn-icon { width: 36px; height: 36px; }

#thread-list { overflow-y: auto; flex: 1; padding: 2px 8px; }
.thread { padding: 10px; border-radius: 10px; cursor: pointer; margin-bottom: 2px;
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  transition: background .12s; }
.thread:hover { background: rgba(127,127,127,.08); }
.thread.active { background: var(--panel-2); }
.thread .t-main { min-width: 0; flex: 1; }
.thread .title { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-weight: 500; }
.thread.generating .title::after {
  content: " ✍️";
  font-size: 11px;
}
.thread.generating { box-shadow: inset 3px 0 0 var(--accent); }
.thread .preview { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.thread .t-del, .thread .t-ren { border: none; background: none; cursor: pointer;
  color: var(--muted); padding: 6px; border-radius: 8px; display: flex;
  align-items: center; visibility: hidden; }
.thread .t-del .icon, .thread .t-ren .icon { width: 15px; height: 15px; }
.thread:hover .t-del, .thread:hover .t-ren { visibility: visible; }
.thread .t-del:hover { color: #f66; background: rgba(255,80,80,.1); }
.thread .t-ren:hover { color: var(--accent); background: rgba(91,141,239,.1); }
/* Тач-устройства: hover нет — кнопки видны всегда */
@media (hover: none) {
  .thread .t-del, .thread .t-ren { visibility: visible; }
}
#sidebar-foot { padding: 12px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px; }
.btn.foot { height: 40px; border: 1px solid var(--border); color: var(--fg);
  font-size: var(--fs-sm); justify-content: flex-start; padding: 0 12px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.btn.foot:hover { border-color: var(--accent); background: rgba(127,127,127,.06); }
.btn.foot .icon, .btn.foot .ico { width: 18px; height: 18px; flex-shrink: 0; }
.btn.foot .ico { display: flex; }
.btn.foot.btn-icon { justify-content: center; padding: 0; width: 40px; }
.btn.foot.grow { flex: 1; }
#model-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.foot-row { display: flex; gap: 8px; }

/* ─── Чат ─── */
#chat { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
#chat-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center;
  gap: 10px; padding: 8px 18px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#chat-title { font-weight: 600; font-size: var(--fs-base); line-height: 1.3;
  color: var(--fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stream-state { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; }
#theme-toggle { width: 36px; height: 36px; }

#messages-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
#messages { flex: 1; overflow-y: auto; padding: 20px 22px 28px;
  display: flex; flex-direction: column; gap: 18px; max-width: 820px;
  margin: 0 auto; width: 100%; }

.msg { max-width: 86%; line-height: 1.5; animation: fadeInUp .2s ease; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.msg.user { align-self: flex-end; background: var(--accent);
  color: var(--accent-fg); padding: 11px 15px; border-radius: 18px 18px 6px 18px; }
.msg.assistant { align-self: flex-start; padding: 2px 0; }
.msg.assistant.streaming::after { content: "▍"; animation: blink 1s steps(1) infinite;
  color: var(--muted); }
@keyframes blink { 50% { opacity: 0; } }

.empty-state { margin: auto; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-state .icon { width: 44px; height: 44px; opacity: .5; }
.empty-state p { font-size: var(--fs-sm); margin: 0; }

/* ─── Светлая тема (тумблер) ─── */
[data-theme="light"] {
  --bg: #f4f6fb;
  --panel: #ffffff;
  --panel-2: #eef1f8;
  --fg: #1a1d27;
  --fg-strong: #1a1d27;
  --muted: #646b83;
  --accent: #3a6fe0;
  --border: #e0e4ee;
  --code-bg: #f0f2f8;
  --code-fg: #333a4d;
  --inline-code-bg: rgba(58,111,224,.09);
  --inline-code-fg: #2b55b4;
}
[data-theme="light"] .msg.user { color: var(--accent-fg); }
.msg-time { font-size: 11px; color: var(--muted); margin-top: 4px; opacity: .9;
  font-variant-numeric: tabular-nums; }
.msg.user .msg-time { text-align: right; opacity: .85; color: rgba(255,255,255,.8); }
.stream-status { font-size: var(--fs-xs); color: var(--accent); padding: 2px 0 6px;
  font-style: italic; }
.reasoning { font-size: var(--fs-sm); color: var(--muted); background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px;
  margin-bottom: 8px; max-height: 160px; overflow-y: auto; white-space: pre-wrap; }
.answer-note { font-size: var(--fs-xs); color: #d99; margin-top: 6px; }

/* Markdown в ответах */
.msg.md p { margin: 0 0 10px; }
.msg.md p:last-child { margin-bottom: 0; }
.msg.md strong { font-weight: 600; color: var(--fg-strong); }
.msg.md em { font-style: italic; }
.msg.md a { color: var(--accent); text-decoration: none; }
.msg.md a:hover { text-decoration: underline; }
.msg.md code.inline { background: var(--inline-code-bg); color: var(--inline-code-fg);
  border-radius: 5px; padding: 1.5px 6px; font-family: var(--mono);
  font-size: .88em; }
.codeblock { background: var(--code-bg); border: 1px solid var(--border);
  border-radius: 10px; overflow-x: auto; margin: 8px 0;
  display: flex; align-items: stretch; position: relative; }
.codeblock code { font-family: var(--mono); font-size: 13px; line-height: 1.5;
  font-weight: 400; padding: 12px 14px; white-space: pre; color: var(--code-fg); }
.copy-code { position: absolute; top: 6px; right: 6px; background: var(--panel-2);
  color: var(--muted); border: 1px solid var(--border); border-radius: 6px;
  font-size: 11px; padding: 3px 8px; cursor: pointer; }
.copy-code:hover { color: var(--fg); }
.msg.md h1, .msg.md h2, .msg.md h3 { font-size: 1em; font-weight: 700;
  color: var(--fg-strong); margin: 14px 0 6px; }
.msg.md ul, .msg.md ol { margin: 6px 0 10px; padding-left: 22px; }
.msg.md li { margin: 3px 0; }
/* Таблицы markdown */
.md-table { border-collapse: collapse; margin: 8px 0; font-size: var(--fs-sm);
  display: block; overflow-x: auto; max-width: 100%; }
.md-table th, .md-table td { border: 1px solid var(--border); padding: 6px 12px;
  text-align: left; }
.md-table th { background: var(--panel); color: var(--fg-strong); font-weight: 600; }
.msg-copy { align-self: flex-start; background: none; border: none;
  color: var(--muted); font-size: 11.5px; cursor: pointer; padding: 2px 0;
  visibility: hidden; }
.msg:hover .msg-copy { visibility: visible; }
.msg-copy:hover { color: var(--accent); }

/* Кнопка «вниз» */
#scroll-down { position: absolute; bottom: 16px; right: 50%; width: 38px; height: 38px;
  transform: translateX(50%); background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); z-index: 5; }
#scroll-down:hover { border-color: var(--accent); }
#scroll-down .icon { width: 18px; height: 18px; }

/* ─── Композер ─── */
#composer { display: flex; gap: 10px; padding: 12px 18px 14px;
  border-top: 1px solid var(--border); align-items: flex-end;
  max-width: 820px; margin: 0 auto; width: 100%; background: var(--bg); }
#menu-toggle { width: 44px; height: 44px; border: 1px solid var(--border);
  color: var(--fg); }
#menu-toggle:hover { border-color: var(--accent); }
#input { flex: 1; resize: none; background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 14px; font: inherit; font-size: var(--fs-base); max-height: 40dvh;
  outline: none; transition: border-color .15s; min-width: 0; }
#input:focus { border-color: var(--accent); }

/* ─── Оверлей-шторка (модель/статус/git/справка) ─── */
#overlay { position: fixed; inset: 0; background: rgba(5,7,10,.5); z-index: 50;
  display: flex; align-items: flex-end; backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px); }
#sheet { background: var(--panel); border: 1px solid var(--border);
  border-radius: 20px 20px 0 0; width: 100%; max-width: 720px;
  margin: 0 auto; max-height: 82dvh; display: flex; flex-direction: column; }
.drag-handle { width: 36px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 10px auto 0; flex-shrink: 0; }
#sheet-head { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 8px 14px 12px 18px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: var(--fs-md); line-height: 1.3; color: var(--fg-strong); }
#sheet-close { width: 36px; height: 36px; }
#sheet-body { overflow-y: auto; padding: 14px 18px 24px; font-size: var(--fs-sm);
  line-height: 1.5; }
.prov-btn { width: 100%; display: flex; justify-content: space-between;
  align-items: center; background: transparent; color: var(--fg);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  cursor: pointer; font-size: var(--fs-sm); margin-bottom: 8px; transition: border-color .12s; }
.prov-btn:hover { border-color: var(--accent); }
.prov-count { color: var(--muted); font-size: var(--fs-xs); }
.model-item { display: block; width: 100%; text-align: left; background: transparent;
  color: var(--fg); border: none; border-bottom: 1px solid var(--border);
  padding: 11px 4px; cursor: pointer; font-size: var(--fs-sm); font-family: var(--mono); }
.model-item.current { color: var(--accent); font-weight: 500; }
.back-link { background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: var(--fs-sm); padding: 0 0 12px; }
.sheet-pre { white-space: pre-wrap; word-break: break-word; background: var(--bg);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  font-family: var(--mono); font-size: var(--fs-xs); }
.git-file { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted);
  padding: 2px 0; word-break: break-all; }
.files-head { margin-top: 8px; }
.catalog-head { margin-top: 8px; }
.save-row { display: flex; gap: 8px; margin-top: 14px; }
.save-row input { flex: 1; min-width: 0; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
  font: inherit; font-size: var(--fs-sm); }
.save-row input:focus { outline: none; border-color: var(--accent); }
.save-row .btn-primary { padding: 0 16px; }
.help-h { font-weight: 600; margin: 14px 0 4px; color: var(--fg-strong); }
.help-p { margin: 0 0 8px; opacity: .92; }

/* Крон-задачи */
.cron-job { display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; }
.cron-job.off { opacity: .5; }
.cj-main { flex: 1; min-width: 0; }
.cj-name { font-size: var(--fs-sm); font-weight: 500; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.cj-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cron-job button { background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--fg); cursor: pointer; font-size: var(--fs-sm);
  padding: 7px 9px; display: flex; align-items: center; }
.cron-job button .icon { width: 16px; height: 16px; }

/* ─── Мобильная/планшетная раскладка (<1024px): сайдбар-drawer ─── */
#scrim { position: absolute; inset: 0; z-index: 15; background: rgba(5,7,10,.45); }
@media (max-width: 1023px) {
  #sidebar { position: absolute; z-index: 20; height: 100%; width: 280px; min-width: 280px;
    transform: translateX(-105%); transition: transform .18s ease; }
  #sidebar.closed { width: 280px; min-width: 280px; }
  #sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.55); }
  .msg { max-width: 94%; }
}
@media (max-width: 720px) {
  #messages { padding: 16px 14px 24px; gap: 14px; }
}

/* ─── Десктоп (≥1024px): просторная колонка чата ─── */
@media (min-width: 1024px) {
  #messages { padding: 24px 32px 32px; gap: 22px; }
  #composer { padding: 14px 32px 18px; }
  #menu-toggle { display: none; }
}