/* ---------------------------------------
   Base Container
--------------------------------------- */
.docsbot-qa {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  width: 100%;
  overflow-x: auto;
}

/* ---------------------------------------
   Table
--------------------------------------- */
.docsbot-qa-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.docsbot-qa-table thead th {
  text-align: left;
  padding: 6px 0 8px;
  border-bottom: 2px solid #e5e9ef;
  color: #3b4957;
  font-weight: 600;
}

.docsbot-qa-table tbody tr + tr td {
  border-top: 1px solid #e9edf2;
}

.docsbot-qa-table td {
  vertical-align: top;
  padding: 10px 0;
}

/* ---------------------------------------
   Fixed Column Widths (fits desktop)
--------------------------------------- */
.docsbot-qa-table .col-user     { width: 20%; min-width: 180px; }
.docsbot-qa-table .col-question { width: 18%; }
.docsbot-qa-table .col-answer   { width: 30%; }
.docsbot-qa-table .col-sources  { width: 24%; }
.docsbot-qa-table .col-rating   { width: 4%;  text-align: center; }
.docsbot-qa-table .col-could    { width: 4%;  text-align: center; }

/* ---------------------------------------
   User Cell
--------------------------------------- */
.docs-userbox {
  display: flex;
  gap: 10px;
  align-items: center;
}

.docsbot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #f2f4f7;
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}

.docsbot-initials { color: #415a77; }

.docs-usertext strong {
  font-size: 14px;
}

.docs-usertext .date {
  color: #667789;
  font-size: 12px;
}

.muted {
  color: #77879a;
}

/* ---------------------------------------
   Sources List
--------------------------------------- */
.docs-source-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-source-list li {
  margin: 0 0 4px 0;
  padding: 0;
  white-space: normal; /* allow wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-source-list a {
  text-decoration: none;
  border-bottom: 1px dotted #c3ccd6;
  color: #1565c0;
}

.docs-source-list a:hover {
  border-bottom-style: solid;
}

.source-used {
  display: inline-block;
  color: #1a7f37;
  font-weight: bold;
  margin-right: 4px;
}

/* ---------------------------------------
   Text Clamping (prevent overflow)
--------------------------------------- */
.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-5 { -webkit-line-clamp: 5; }
.clamp-8 { -webkit-line-clamp: 8; }

/* ---------------------------------------
   Answer Formatting
--------------------------------------- */
.answer p {
  margin: 0 0 6px;
}

/* ---------------------------------------
   Icons (ASCII ONLY)
--------------------------------------- */
.icon.ok {
  color: #1a7f37; /* green */
  font-weight: bold;
}

.icon.bad {
  color: #cc3d3d; /* red */
  font-weight: bold;
}

.muted {
  color: #999;
}

/* ---------------------------------------
   Loading + Error States
--------------------------------------- */
.docs-loading,
.docs-error {
  color: #556575;
  padding: 12px 0;
}

/* ---------------------------------------
   Responsive Handling
--------------------------------------- */
@media (max-width: 900px) {
  .docsbot-qa-table {
    font-size: 12px;
  }
  .docsbot-qa-table .col-user { min-width: 160px; }
}