/* базовое */
ul { padding: 0; }

.root-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;              /* NEW: небольшие поля */
}

.assignment-form { max-width: 800px; }

.assignment-card {
  padding: 12px;
  border: 1px solid rgb(210, 210, 210);
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
  border-radius: 10px;          /* NEW: чуть больше радиус */
  list-style: none;
}

.assignment-card:not(:last-child) { margin-bottom: 25px; }

.assignment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.assignment-expand-button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  cursor: pointer;
}

.assignment-expand-button[aria-expanded="true"] .chevron-icon { rotate: 180deg; }
.assignment-actions { margin-left: auto; }

/* чат и область сообщений */
.assignment-chat {
  padding: 12px;                /* NEW: 10 → 12 */
  border-radius: 10px;
  background: rgb(248, 248, 248);
  max-width: none;              /* NEW: растягиваем на всю карточку */
  width: 100%;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 12px;                    /* NEW: вместо :not(:last-child) */
  max-height: clamp(320px, 50vh, 720px); /* NEW: адаптивная высота */
  overflow-y: auto;
  padding-right: 6px;           /* NEW: место под скроллбар */
  scroll-behavior: smooth;      /* NEW: плавная прокрутка */
}

.assignment-message {
  max-width: min(860px, 100%);  /* NEW: резиновая ширина сообщений */
  word-break: break-word;       /* NEW: перенос длинных слов */
  white-space: pre-wrap;        /* NEW: сохраняем переводы строк */
  line-height: 1.35;
}

/* пузыри */
.user-message {
  align-self: flex-end;
  background: #0d6efd;
  color: #fff;
  padding: 10px 12px;           /* NEW */
  border-radius: 12px;          /* NEW */
  border-top-right-radius: 4px; /* NEW: «хвостик» */
}

.agent-message {                /* NEW: стиль для сообщений агента */
  align-self: flex-start;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.08);
  padding: 10px 12px;
  border-radius: 12px;
  border-top-left-radius: 4px;
}

/* блок ожидания данных */
.assignment-feedback-block {
  background: #fff;
  padding: 12px;
  width: 100%;                  /* NEW: пусть занимает всю ширину колонки сообщений */
  max-width: 720px;             /* NEW: но не бесконечно */
  border-radius: 12px;
  border: 1px solid #0d6efd;
  align-self: flex-start;       /* NEW: как сообщения агента */
}

.assignment-feedback-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.assignment-feedback-block .message-time { margin-right: 0; }

/* форма чата */
.assignment-chat-form {
  display: grid;
  position: relative;
  gap: 8px;                     /* NEW: чуть больше воздуха */
}

.chat-input {
  padding-right: 52px;
  min-height: 44px;             /* NEW: удобнее печатать */
}

.send-message-button {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 32px; height: 32px;    /* NEW: чёткий размер */
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
}

/* шапка карточки и инфо */
.assignment-content { padding-top: 10px; }

.assignment-info {
  color: rgb(140, 140, 140);
  font-size: .875rem;
}

/* бейджи статусов */
/* бейджи статусов */
.status-badge {
  font-size: .835rem;
  color: #fff;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
}

/* done — зелёный, «успех» */
.status-badge[data-status="done"] {
  background: #198754;
  border-color: #157347;
}

/* process — жёлтый, «в работе» */
.status-badge[data-status="process"] {
  background: #ffc107;
  border-color: #e0a800;
  color: #212529; /* тёмный текст, чтобы не слепило на жёлтом */
}

/* waiting — синий, «ожидание данных» */
.status-badge[data-status="waiting"] {
  background: #0d6efd;
  border-color: #0b5ed7;
}

/* error — красный, «упало» */
.status-badge[data-status="error"] {
  background: #dc3545;
  border-color: #b02a37;
}

.status-badge[data-status="new"] {
  background: #6c757d;  /* серый нейтральный */
  color: #fff;
}

.status-short-desc {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 2px;
}

/* время сообщения */
.message-time {
  font-size: .775rem;
  color: grey;
  margin-right: 6px;
}

/* кнопка автопрокрутки (если захочешь оживить) */
.chat-autoscroll-button {
  font-size: .875rem;
  padding: 0;
}

/* тосты */
.toastify {
  color: #000;
  background: #fff;
  border-radius: 6px;
}

/* адаптив */
@media (max-width: 768px) {
  .assignment-card { padding: 10px; }
  .assignment-chat { padding: 10px; }
  .messages { max-height: 55vh; }
  .assignment-message { max-width: 100%; }
  .assignment-feedback-block { max-width: 100%; }
}

/* Фиксим читаемость в пузырях */
.assignment-message {
  /* комфортная длина строки: 55–70 символов */
  max-width: min(68ch, 100%);
  white-space: normal;              /* вместо pre-wrap */
  overflow-wrap: break-word;        /* перенос длинных слов */
  word-break: normal;               /* не рубим слова без нужды */
  hyphens: auto;                    /* мягкие переносы (лучше с lang="ru" в <html>) */
  text-wrap: pretty;                /* аккуратные переносы (совр. браузеры) */
  line-height: 1.5;
}

/* Время на отдельной строке — не ломает верстку текста */
.assignment-message .message-time {
  display: block;
  margin: 0 0 .35rem 0;
  font-size: .78rem;
  color: #8f8f8f;
}

/* Пузырям — единый «карточный» стиль, без лишних отступов внутри */
.agent-message,
.user-message {
  padding: 10px 12px;
  border-radius: 12px;
}

/* Аккуратные отступы между параграфами, если в контенте есть <p> */
.assignment-message p { margin: 0 0 .5rem; }
.assignment-message p:last-child { margin-bottom: 0; }

/* Немного увеличим «воздух» между сообщениями */
.messages { gap: 14px; }


.debug-panel {
  margin: 16px 0 24px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
}
.debug-panel.hidden { display: none; }
.dbg-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.dbg-title { font-weight: 600; margin-right: 8px; }
.dbg-left, .dbg-right { display: flex; align-items: center; gap: 8px; }
.dbg-auto { font-size: .9rem; user-select: none; }
.dbg-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px;
}
.dbg-pre {
  background: #fff; border: 1px solid #eee; border-radius: 6px;
  padding: 8px; max-height: 260px; overflow: auto; font-size: 12px;
}
.dbg-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.dbg-table th, .dbg-table td {
  border-bottom: 1px dashed #e5e7eb; padding: 6px 8px; font-size: 13px; vertical-align: top;
}
.dbg-chip {
  display: inline-block; padding: 2px 6px; border-radius: 999px; background: #efefef; font-size: 12px;
}
details > summary { cursor: pointer; font-weight: 600; margin-top: 6px; }

.dbg-table { width: 100%; border-collapse: collapse; }
.dbg-table th, .dbg-table td { border-bottom: 1px solid #eee; padding: 6px 8px; vertical-align: top; }
.dbg-chip { display:inline-block; background:#f6f6f6; border:1px solid #e5e5e5; border-radius:12px; padding:2px 8px; margin:2px 4px 2px 0; font-size:12px; }
.dbg-pre { background:#fafafa; border:1px solid #eee; border-radius:6px; padding:8px; min-height:86px; }
.debug-panel.hidden { display: none; }