.chatbot-console { display: flex; flex-direction: column; gap: 1.25rem; }
.chatbot-console__header { display:flex; align-items:center; justify-content:space-between; }
.chatbot-console__add { background: var(--wa-color-brand-50); color: var(--wa-color-brand-on-loud); padding: .5rem 1rem; border-radius: .375rem; text-decoration:none; font-weight:600; font-size:.875rem; }
.chatbot-console__title { margin: 0; font-size: 1.25rem; font-weight: var(--wa-font-weight-bold); line-height: 1.3; }
.chatbot-console__header + .kpi-strip { margin-block-start: -.25rem; }
.chatbot-console .kpi-strip { margin-block-end: 0; border-radius: var(--wa-border-radius-m); }
.chatbot-console .kpi-strip__item { padding: 1.125rem 1.25rem; }
.chatbot-console .kpi-strip__title { font-size: .875rem; font-weight: var(--wa-font-weight-bold); margin-block-end: .375rem; }
.chatbot-console .kpi-strip__value { font-size: 1.25rem; font-weight: 700; }
.chatbot-console .kpi-strip__label { white-space: normal; font-size: .75rem; color: var(--wa-color-text-quiet); }
.chatbot-console .kpi-strip__icon { width: 2rem; height: 2rem; background: #eaeff2; border: 1px solid #9eb6c1; border-radius: var(--wa-border-radius-s); color: #295d77; font-size: .8125rem; }
.chatbot-console__tabs { display:flex; gap:1.5rem; border-block-end:1px solid var(--wa-color-surface-border); }
.chatbot-console__tab { padding:.5rem .25rem; color:var(--wa-color-text-quiet); text-decoration:none; font-weight:600; font-size:.9375rem; border-block-end:2px solid transparent; margin-block-end:-1px; }
.chatbot-console__tab--active { color:var(--wa-color-brand); border-block-end-color:var(--wa-color-brand); }
.chatbot-console__card { background:var(--wa-color-surface-default); border:1px solid var(--wa-color-surface-border); border-radius:.5rem; padding:1.25rem; }
.chatbot-console__card-title { margin:0 0 1rem; font-size:1rem; font-weight:600; }
.chatbot-console__table { width:100%; border-collapse:collapse; font-size:.875rem; }
.chatbot-console__table th { text-align:start; color:var(--wa-color-text-quiet); font-weight:600; padding:.5rem .75rem; border-block-end:1px solid var(--wa-color-surface-border); }
.chatbot-console__table td { padding:.625rem .75rem; border-block-end:1px solid var(--wa-color-surface-border); }
.chatbot-console__badge { display:inline-flex; align-items:center; gap:.25rem; padding:.125rem .5rem; border-radius:999px; font-size:.75rem; font-weight:600; background:var(--wa-color-neutral-fill-quiet); color:var(--wa-color-neutral-on-quiet); }
.chatbot-console__badge--active { background:var(--wa-color-success-fill-quiet); color:var(--wa-color-success-on-quiet); }
.chatbot-console__badge--add { background:var(--wa-color-brand-fill-quiet); color:var(--wa-color-brand-on-quiet); text-decoration:none; }
/* The suggested-question "Add FAQ" badge is a <button> now (it opens the add
   dialog rather than navigating) — strip the default button chrome. */
button.chatbot-console__badge--add { border:0; font:inherit; cursor:pointer; }
a.chatbot-console__badge { text-decoration:none; }
.chatbot-console__filter { display:flex; gap:.75rem; align-items:end; flex-wrap:wrap; margin-block-end:1rem; }
.chatbot-console__clear { color:var(--wa-color-text-quiet); font-size:.875rem; align-self:center; }
.chatbot-console__actions { display:flex; gap:.5rem; }
.chatbot-console__delete-form { margin:0; }
.chatbot-console__settings { display:flex; flex-direction:column; gap:.875rem; }
.chatbot-console__setting-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; }
.chatbot-console__setting-name { font-weight:600; font-size:.9375rem; }
.chatbot-console__setting-sub { font-size:.8125rem; color:var(--wa-color-text-quiet); display:block; }
.chatbot-console__setting-control { display:flex; align-items:center; gap:.5rem; }
.chatbot-console__setting-status { font-size:.8125rem; color:var(--wa-color-text-quiet); }
.chatbot-console__control { min-width:16rem; }
.chatbot-console__form-actions { display:flex; justify-content:flex-end; margin-block-start:1rem; }
.chatbot-console__note, .chatbot-console__empty-note { color:var(--wa-color-text-quiet); font-size:.875rem; }
.chatbot-console__empty { padding:3rem; text-align:center; color:var(--wa-color-text-quiet); }
.chatbot-console__card-sub { margin:-.5rem 0 1rem; color:var(--wa-color-text-quiet); font-size:.875rem; }
.chatbot-console__add--end { margin-inline-start:auto; }
.chatbot-console__setting-label { flex:1; min-width:0; }
.chatbot-console__setting-meta { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; }
.chatbot-console__setting-note { font-size:.75rem; color:var(--wa-color-text-quiet); }
.chatbot-console__behavior { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; }
.chatbot-console__field { display:flex; flex-direction:column; gap:.375rem; }
.chatbot-console__field .chatbot-console__control { min-width:0; width:100%; }

@media (max-width: 1260px) {
  .chatbot-console .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .chatbot-console .kpi-strip { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .chatbot-console__header { flex-wrap:wrap; gap:.75rem; }
  .chatbot-console__add { white-space:nowrap; }
  .chatbot-console__tabs { gap:1rem; overflow-x:auto; }
  .chatbot-console__tab { white-space:nowrap; }
  .chatbot-console__behavior { grid-template-columns:1fr; }
  .chatbot-console__setting-row { grid-template-columns:auto 1fr; }
  .chatbot-console__setting-meta { grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:flex-start; gap:.75rem; }
  .chatbot-console__control { min-width:0; width:100%; }
  .chatbot-console__filter .chatbot-console__add--end { margin-inline-start:0; }
}

/* HMS-1094 — FAQ Editor table (Figma): white body rows under a light gray
   header band so the card/page grays can't bleed through. The generic
   `.admin-table-wrap table { min-width: max-content }` rule would keep the
   question/answer cells from wrapping, so this table opts out like
   .admin-events__table does (specificity must outrank the wrap rule). */
.admin-table-wrap .chatbot-console__faq-table { min-width: 0; }
.chatbot-console__faq-table thead th { background: var(--wa-color-neutral-fill-quiet); white-space: nowrap; }
.chatbot-console__faq-table tbody td { background: var(--wa-color-surface-default); }
.chatbot-console__faq-table .chatbot-console__date { white-space: nowrap; }
/* The nowrap headers alone need ~510px, so cell min-widths stay modest:
   question keeps a floor while answer wraps first, letting the table fit
   the ~750px card at 1024 without clipping the Actions column. */
.chatbot-console__faq-table th,
.chatbot-console__faq-table td { padding-inline: .5rem; }
.chatbot-console__question { font-weight: 600; min-width: 8rem; }
.chatbot-console__answer { max-width: 28rem; }

/* HMS-1111 — Top 20 Questions: typed questions run up to 500 characters, so
   the pattern column wraps instead of stretching the table past the card;
   nowrap headers keep it scrolling (not crushing) on phones. */
.admin-table-wrap .chatbot-console__table:not(.chatbot-console__faq-table) { min-width: 0; }
.chatbot-console__table:not(.chatbot-console__faq-table) th { white-space: nowrap; }
.chatbot-console__table:not(.chatbot-console__faq-table) td:first-child { min-width: 12rem; overflow-wrap: anywhere; }

.chatbot-console__sort { display: inline-flex; align-items: center; gap: .25rem; color: inherit; text-decoration: none; }
.chatbot-console__sort .fa-sort { opacity: .4; }

/* Table footer: per-page select left, "N–M of Total" center, page nav right.
   Negative margins span the card's padding so the band sits flush like the
   payment-tools footer. */
.chatbot-console__footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .75rem;
  margin: 0 -1.25rem -1.25rem;
  padding: .625rem 1.25rem;
  border-block-start: 1px solid var(--wa-color-surface-border);
  font-size: .8125rem;
}
.chatbot-console__per-page { display: flex; align-items: center; gap: .5rem; justify-self: start; }
.chatbot-console__per-page select { width: auto; min-width: 4.5rem; }
.chatbot-console__count { margin: 0; color: var(--wa-color-text-quiet); white-space: nowrap; justify-self: center; }
.chatbot-console__pagination { display: flex; align-items: center; gap: .5rem; justify-self: end; flex-wrap: wrap; }
.chatbot-console__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .375rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font-size: .8125rem;
  line-height: 1;
  text-decoration: none;
}
.chatbot-console__page:hover { background: var(--wa-color-neutral-fill-quiet); }
.chatbot-console__page--current {
  background: var(--wa-color-brand-fill-loud);
  border-color: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  cursor: default;
}
.chatbot-console__ellipsis { color: var(--wa-color-text-quiet); }
/* Footer chevron buttons sized to the 2rem page-number links beside them. */
.chatbot-console__pagination wa-button::part(base) {
  height: 2rem;
  width: 2rem;
  min-width: 2rem;
  padding: 0;
  border-color: var(--wa-color-surface-border);
}

@media (max-width: 640px) {
  .chatbot-console__footer { grid-template-columns: 1fr; justify-items: center; }
  .chatbot-console__per-page,
  .chatbot-console__pagination { justify-self: center; }
}