/* ВАЖНО: фиксируем высоту приложения и включаем скролл только в истории */
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif; background:#0b0c10; color:#e5e7eb; overflow: hidden; }

:root{ --sidebar:280px; --content:900px; }

/* Макет */
.app{ display:flex; height: 100vh; }
.sidebar{ width:var(--sidebar); background:#111827; border-right:1px solid #1f2937; display:flex; flex-direction:column; min-height: 0; }
.sb-head{ padding:12px; border-bottom:1px solid #1f2937; }
.sb-title{ font-weight:600; }

/* Выбор провайдера/модели + разделитель */
.sb-actions{
  padding:14px 12px;
  display:flex; gap:8px; flex-wrap:wrap;
  border-bottom:1px solid #1f2937;
  margin-bottom:14px;                 /* отступ после линии */
}
.sb-actions .block{ width:100%; }
.sb-list{ overflow:auto; padding:8px 8px 100px; }

.chat-item{ padding:10px; border:1px solid #1f2937; border-radius:8px; margin-bottom:8px; background:#0f172a; cursor:pointer; }
.chat-item.active{ border-color:#2563eb; background:#10192f; }
.chat-title{ font-weight:600; }
.chat-last{ color:#9ca3af; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Контролы */
.btn{ padding:8px 12px; border:1px solid #374151; border-radius:8px; background:#1f2937; color:#e5e7eb; cursor:pointer; }
.btn.primary{ background:#2563eb; border-color:#1d4ed8; }
.btn.small{ padding:6px 8px; font-size:14px; }
.btn.xsmall{ padding:4px 8px; font-size:12px; }
.select, .input{ width:100%; padding:8px 10px; border:1px solid #374151; border-radius:8px; background:#0f172a; color:#e5e7eb; }
label.hint{ display:block; color:#9ca3af; font-size:13px; margin-bottom:4px; }

/* Основная область */
.main{ flex:1; display:flex; flex-direction:column; min-height: 0; }
.topbar{ padding:12px 16px; border-bottom:1px solid #1f2937; display:flex; justify-content:space-between; align-items:center; }
.right{ display:flex; gap:8px; }
.topbar .btn.menu{ display:none; }

.chatbox{ flex:1; display:flex; flex-direction:column; min-height:0; }
.history{ flex:1; overflow:auto; padding:16px; min-height:0; overscroll-behavior:contain; }

/* Сообщения */
.msg{ max-width:var(--content); margin:4px auto; }
.bubble{ border-radius:12px; padding:12px 14px; white-space:pre-wrap; line-height:1.4; }
.bubble.user{ background:#1f2937; }
.bubble.assistant{ background:#0f172a; border:1px solid #1f2937; }

/* Метаданные/кнопки – под пузырём */
.metaRow{
  max-width:var(--content);
  margin:4px auto 2px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.meta{ font-size:12px; color:#9ca3af; }
.actions{ display:flex; gap:6px; }

/* Спиннер ожидания */
.spinner{ display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; vertical-align:middle; margin-right:6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Ошибка ответа */
.bubble.assistant.error{ border-color:#7f1d1d; background:#3f1d1d; }

/* Код-блоки */
.codeblock{ position:relative; background:#0b1020; border:1px solid #1f2937; border-radius:8px; padding:10px; overflow:auto; }
.codeblock pre{ margin:0; white-space:pre; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; line-height:1.4; color:#e5e7eb; }
.codecopy{ position:absolute; top:8px; right:8px; }

/* Composer: ПОЛЕ как у сообщений, КНОПКА прижата к правому краю этого же контейнера */
.composer{ padding:12px 16px; border-top:1px solid #1f2937; background:#0b0c10; }
.composer-inner{
  max-width:var(--content);
  margin:6px auto 0;
  display:flex;                  /* flex, без абсолютов */
  gap:8px;
  align-items:flex-end;
}
#msg{
  flex:1 1 auto;
  min-height:50px;               /* как просили */
  max-height:300px;
  resize:vertical;
}
.btn.send{
  flex:0 0 auto;                 /* прижата к правому краю контейнера */
  white-space:nowrap;
  padding:8px 12px;
}

/* Подсказка */
.hint{ color:#9ca3af; font-size:13px; }
.tip{ max-width:var(--content); margin:6px auto 0; }

/* Оверлей авторизации */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; }
.hidden{ display:none !important; }
.auth-card{ width:420px; background:#0f172a; border:1px solid #1f2937; border-radius:12px; padding:16px; }

.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row > *{ flex:1 1 200px; }

/* Плавающая кнопка "Вниз" */
.fab{
  position: fixed; right: 16px; bottom: 92px; z-index: 50;
  width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid #1d4ed8; background: #2563eb; color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; box-shadow:0 6px 16px rgba(0,0,0,.35);
  cursor:pointer; user-select:none;
}
.fab:hover{ background:#1d4ed8; }
.fab:active{ transform: translateY(1px); }
.fab.hidden{ display:none !important; }

/* Мобилки */
@media (max-width: 900px){
  :root{ --sidebar:240px; }
  .sidebar{ position:fixed; z-index:10; transform:translateX(-100%); transition:.2s; }
  .sidebar.open{ transform:translateX(0); }
  .topbar .btn.menu{ display:inline-block; }
  .topbar .where{ display:none; }
  .composer-inner{ max-width:calc(100% - 24px); }  /* почти на всю ширину, с полями */
}