/* Справочный помощник (templates/partials/_helpchat.html, static/js/helpchat.js).
   Опирается на переменные и кнопки из app.css. Без JS кнопка «Вопрос?» не показывается (класс .js ставит base.html). */

.helpchat { display: none; }
.js .helpchat { display: block; }

.helpchat-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  border-radius: 99px; padding: 12px 24px; min-height: 52px; font-size: 1.05rem;
  box-shadow: 0 4px 16px rgba(20, 40, 75, .3);
}
.helpchat.is-open .helpchat-toggle { display: none; }

.helpchat-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 61;
  display: flex; flex-direction: column;
  width: 400px; max-width: calc(100vw - 32px); height: 620px; max-height: calc(100vh - 32px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(20, 40, 75, .35);
  font-size: 1rem; line-height: 1.45; color: var(--ink);
}
.helpchat-panel[hidden] { display: none; }

.helpchat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 4px 16px; background: var(--navy); color: #fff; flex: none; }
.helpchat-title { margin: 0; font-size: 1.1rem; color: #fff; }
.helpchat-title:focus { outline: none; }
.helpchat-close { width: 48px; height: 48px; border: 0; border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: 2rem; line-height: 1; cursor: pointer; }
.helpchat-close:hover { background: var(--navy-2); }

.helpchat-log { position: relative; flex: 1 1 auto; min-height: 140px; overflow-y: auto; padding: 12px; background: var(--bg); }
.helpchat-log:focus-visible { outline-offset: -3px; }

.hc-msg { max-width: 94%; margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; overflow-wrap: anywhere; }
.hc-msg p { margin: 0 0 .6em; }
.hc-msg p:last-child, .hc-msg ul:last-child { margin-bottom: 0; }
.hc-bot { background: var(--surface); border: 1px solid var(--line); border-top-left-radius: 4px; }
.hc-user { margin-left: auto; background: var(--navy-soft); border-top-right-radius: 4px; }
.hc-alert { max-width: 100%; background: var(--danger-bg); border: 2px solid #e8b3ad; border-left: 6px solid var(--danger); color: #5a1710; }
.hc-hidden-text { font-style: italic; color: var(--muted); }
.hc-title { display: block; margin-bottom: .35em; color: var(--navy); }
.hc-alert .hc-title { color: var(--danger); font-size: 1.1rem; }
.hc-list { margin: 0 0 .6em; padding-left: 1.25em; }
.hc-list li { margin-bottom: .3em; }
.hc-status { font-weight: 600; color: var(--muted); }
.hc-status.is-on { color: var(--ok); }
.hc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.helpchat .btn-sm { min-height: 44px; padding: 8px 14px; font-size: .95rem; }

.helpchat-topics { flex: none; border-top: 1px solid var(--line); padding: 0 12px 8px; background: var(--surface); }
.helpchat-topics summary { cursor: pointer; font-weight: 600; color: var(--navy); min-height: 44px; display: flex; align-items: center; }
.helpchat-topic-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 9.5rem; overflow-y: auto; padding: 2px; }

.helpchat-form { flex: none; display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.helpchat-input { flex: 1 1 auto; min-width: 0; }
.helpchat-send { flex: none; }
.helpchat-note { flex: none; margin: 0; padding: 0 12px 10px; font-size: .85rem; color: var(--muted); background: var(--surface); }

@media (max-width: 600px) {
  .helpchat-toggle { right: 12px; bottom: 12px; }
  .helpchat-panel { top: 8px; right: 8px; bottom: 8px; left: 8px; width: auto; max-width: none; height: auto; max-height: none; }
}

@media print { .helpchat { display: none !important; } }