/* Виджет ИИ-ассистента (20.8.0). На бренд-токенах, тёмная тема, без эмодзи. */

.asst-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent, #e0a341); color: #0b0b0c;
  border: none; cursor: pointer;
  font-family: var(--mono, ui-monospace, monospace); font-weight: 800; font-size: 15px; letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.asst-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .55); }
.asst-fab:focus-visible { outline: 2px solid var(--text, #e7e3da); outline-offset: 3px; }
.asst-hidden { display: none; }

.asst-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 901;
  width: 380px; height: 520px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
  /* Скрыто по умолчанию. Видимость даёт класс asst-open — НЕ атрибут hidden (его перебивает display). */
  display: none; flex-direction: column;
  /* Сброс отступов host-элемента: панель — это <section> в <body>, и глобальное правило страницы
     `section { padding: 46px 0 }` (лендинг) иначе вбивало пустую полосу сверху и снизу и в плавающем
     окне, и в сайдбаре. Класс перебивает элементный селектор — виджет не зависит от стилей страницы. */
  margin: 0; padding: 0;
  background: var(--bg, #0b0b0c); color: var(--text, #e7e3da);
  border: 1px solid var(--border, #242219); border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
  font-family: var(--mono, ui-monospace, monospace); font-size: 13px;
}
.asst-panel.asst-open { display: flex; }

.asst-panel.asst-docked {
  right: 0; top: 0; bottom: 0; left: auto; height: 100vh; width: 400px;
  border-radius: 0; border-top: none; border-right: none; border-bottom: none;
}

.asst-grip { position: absolute; top: 0; left: 0; width: 16px; height: 16px; cursor: nwse-resize; z-index: 2; }
.asst-panel.asst-docked .asst-grip { display: none; }

.asst-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border, #242219);
  background: rgba(255, 255, 255, .02);
}
.asst-title { flex: 1; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; font-size: 12px; }
.asst-icon {
  width: 26px; height: 26px; border: 1px solid var(--border, #242219); border-radius: 6px;
  background: transparent; color: var(--text, #e7e3da); cursor: pointer; font-size: 15px; line-height: 1;
}
.asst-icon:hover { border-color: var(--accent, #e0a341); color: var(--accent, #e0a341); }
.asst-icon:focus-visible { outline: 2px solid var(--accent, #e0a341); outline-offset: 1px; }

.asst-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }

.asst-msg { max-width: 92%; padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.asst-user { align-self: flex-end; background: var(--accent, #e0a341); color: #0b0b0c; font-weight: 600; }
.asst-bot { align-self: flex-start; background: rgba(255, 255, 255, .04); border: 1px solid var(--border, #242219); }
.asst-answer { white-space: pre-wrap; }

.asst-sources { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border, #242219); display: flex; flex-direction: column; gap: 3px; }
.asst-sources-cap { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.asst-source { color: var(--accent, #e0a341); text-decoration: none; font-size: 12px; }
.asst-source:hover { text-decoration: underline; }

.asst-toolbar { margin-top: 6px; }
.asst-mini { background: transparent; border: 1px solid var(--border, #242219); border-radius: 5px; color: var(--text, #e7e3da); font-size: 11px; padding: 2px 8px; cursor: pointer; }
.asst-mini:hover { border-color: var(--accent, #e0a341); color: var(--accent, #e0a341); }

.asst-note { font-size: 13px; opacity: .85; line-height: 1.6; }
.asst-note a { color: var(--accent, #e0a341); }

.asst-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border, #242219); align-items: flex-end; }
.asst-input {
  flex: 1; resize: none; background: rgba(255, 255, 255, .03); color: var(--text, #e7e3da);
  border: 1px solid var(--border, #242219); border-radius: 8px; padding: 8px; font-family: inherit; font-size: 13px; line-height: 1.4;
}
.asst-input:focus { outline: none; border-color: var(--accent, #e0a341); }
.asst-input:disabled { opacity: .5; }
.asst-send {
  background: var(--accent, #e0a341); color: #0b0b0c; border: none; border-radius: 8px;
  padding: 8px 14px; font-weight: 800; cursor: pointer; font-family: inherit; font-size: 12px; white-space: nowrap;
}
.asst-send:hover { filter: brightness(1.08); }
.asst-send:disabled { opacity: .5; cursor: not-allowed; }
.asst-send.asst-stopping { background: transparent; color: var(--text, #e7e3da); border: 1px solid var(--border, #242219); }

@media (max-width: 480px) {
  .asst-panel { right: 8px; left: 8px; width: auto; bottom: 8px; height: 70vh; }
  .asst-panel.asst-docked { left: 0; width: 100vw; }
}