/* ============================================================
   Criteria Chat — /criteria-chat
   Chat panel sits under an elevated white table area
   (left-side-only shadow). Chat is resizable + collapsible.
   ============================================================ */
.cc-shell {
  --cc-w: 325px;
  height: calc(100vh - 64px);
  display: flex;
  align-items: stretch;
  padding: 24px;
  box-sizing: border-box;
  gap: 0;
  position: relative;
}

/* Chat panel — a tinted card that tucks UNDER the white results card
   and peeks out on the left (lower layer). */
.cc-chat {
  flex: 0 0 var(--cc-w);
  width: var(--cc-w);
  min-width: 260px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  z-index: 1;
  margin: 34px 0 52px;
  background: linear-gradient(to right, #f3f6fc 0%, #f9fbfe 42%, #e4ebf6 100%);
  border: 1px solid #e2e8f2;
  border-radius: 16px;
  padding: 18px 44px 18px 20px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05);
  /* On first load the panel starts fully tucked under the white results card
     (it sits on a lower z-index layer) and slides out to the left. */
  /* Elevator-door feel: accelerates, then eases to a stop at the last moment. */
  animation: cc-chat-slide-out 0.45s cubic-bezier(0.7, 0, 0.16, 1) 0.15s backwards;
}
@keyframes cc-chat-slide-out {
  from { transform: translateX(calc(var(--cc-w) - 28px)); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-chat { animation: none; }
}
.cc-chat-head {
  display: flex;
  align-items: center;
  padding: 0 2px 14px;
}
.cc-chat-title { font-size: 15px; font-weight: 700; color: #101828; letter-spacing: -0.01em; white-space: nowrap; }

/* Segmented Chat | Browse | Search toggle (replaces the panel title). */
.cc-mode-toggle {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  width: 100%;
  padding: 3px;
  background: #eef1f6;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
}
.cc-mode-glider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  height: calc(100% - 6px);
  background: #ffffff;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
  transform: translateX(calc(var(--cc-mode-index, 0) * 100%));
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cc-mode-opt {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #667085;
  padding: 6px 0;
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.18s ease;
}
.cc-mode-opt:hover { color: #475467; }
.cc-mode-opt.cc-mode-active { color: #101828; }

/* ---- View switching: show only the panel matching the active mode ---- */
.cc-browse, .cc-recent { display: none; }
.cc-chat.cc-view-chat .cc-browse,
.cc-chat.cc-view-chat .cc-recent { display: none; }
.cc-chat.cc-view-browse .cc-chat-output,
.cc-chat.cc-view-browse .cc-input,
.cc-chat.cc-view-browse .cc-scroll-latest,
.cc-chat.cc-view-recent .cc-chat-output,
.cc-chat.cc-view-recent .cc-input,
.cc-chat.cc-view-recent .cc-scroll-latest { display: none; }
.cc-chat.cc-view-browse .cc-browse { display: flex; }
.cc-chat.cc-view-recent .cc-recent { display: flex; }

/* ---- Browse: group list + criteria list ---- */
.cc-browse { flex: 1 1 auto; min-height: 0; flex-direction: column; position: relative; }
.cc-browse-groups,
.cc-browse-crit-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 2px;
}
.cc-browse-groups::-webkit-scrollbar,
.cc-browse-crit-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Visibility is class-driven (the `hidden` attr can't win against display:flex).
   Show the group list OR the criteria view, never both. */
.cc-browse-crit { display: none; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.cc-browse.cc-browse-in-group .cc-browse-groups { display: none; }
.cc-browse.cc-browse-in-group .cc-browse-crit { display: flex; }

/* Compact list rows (not cards) to save vertical space. */
.cc-browse-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 8px;
  border: none;
  border-bottom: 1px solid #e9edf4;
  background: transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #344054;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cc-browse-group:hover { background: #eef2fb; }
.cc-browse-note { padding: 14px 10px; margin: 0; font-size: 13px; color: #667085; line-height: 1.5; }
.cc-browse-group-chev { display: inline-flex; color: #98a1b2; flex: 0 0 auto; }

/* Criteria view: back button + title + list */
.cc-browse-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 5px 10px 5px 6px;
  margin: 2px 0 8px 2px;
  border: none;
  background: transparent;
  color: #475467;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cc-browse-back:hover { background: #f6f7f9; color: #101828; }
.cc-browse-crit-title {
  margin: 0 4px 8px;
  font-size: 14px;
  font-weight: 700;
  color: #101828;
}
.cc-browse-crit-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 8px;
  border: none;
  border-bottom: 1px solid #e9edf4;
  background: transparent;
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #344054;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cc-browse-crit-btn:hover { background: #eef2fb; }
.cc-browse-crit-name { line-height: 1.35; }
.cc-browse-crit-plus { display: inline-flex; color: #3759a6; flex: 0 0 auto; }
.cc-browse-crit-plus svg { width: 18px; height: 18px; }
.cc-browse-crit-added { opacity: 0.55; cursor: default; }
.cc-browse-crit-added:hover { background: transparent; }
.cc-browse-crit-added .cc-browse-crit-plus { color: #199619; }

/* AffCalc: affordability figures + the "No" offer button */
.cc-cell-aff { font-weight: 600; color: #33415c; white-space: nowrap; }
/* Sortable column header — looks like the other labels, but clickable */
button.cc-sort-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: left; }
button.cc-sort-btn:hover { text-decoration: underline; }
/* Right-align the Affordability column (2nd column) body cells */
.cc-table tbody td:nth-child(2) { text-align: right; }
[data-theme="dark"] .cc-cell-aff { color: #d6def2; }
.cc-aff-no { background: #fff; color: #3759a6; border: 1px solid #c9d3e8; box-shadow: none; margin-left: 8px; }
.cc-aff-no:hover { background: #fafbff; border-color: #b6c4e6; }
[data-theme="dark"] .cc-aff-no { background: transparent; color: #93a9e6; border-color: #3a4a76; }
[data-theme="dark"] .cc-aff-no:hover { background: #232d49; border-color: #4a5d94; }
/* Browse: distinct teal so it reads as a different kind of action */
.cc-aff-browse { background: #0f766e; border: 1px solid #0f766e; color: #fff; margin-left: 8px; }
.cc-aff-browse:hover { background: #0d635c; border-color: #0d635c; }
[data-theme="dark"] .cc-aff-browse { background: #14847b; border-color: #14847b; }
[data-theme="dark"] .cc-aff-browse:hover { background: #189289; border-color: #189289; }
/* Keep Yes / No / Browse on one line */
.cc-aff-btns { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }

/* ---- Recent: last 10 searches ---- */
.cc-recent { flex: 1 1 auto; min-height: 0; flex-direction: column; }
.cc-recent-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #98a1b2; padding: 24px 8px; }
/* Recents pinned to the top: the list doesn't stretch/centre, it just stacks. */
.cc-recent-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 10px 4px 12px; display: flex; flex-direction: column; gap: 6px; }
/* The hidden attribute must always win over the display rules above. */
.cc-recent-empty[hidden], .cc-recent-list[hidden] { display: none; }
.cc-recent-item { border: 1px solid #e6eaf2; border-radius: 10px; padding: 8px 10px; background: #fff; }
.cc-recent-q { font-size: 13px; font-weight: 600; color: #33415c; line-height: 1.4; }
.cc-recent-crit { font-size: 11px; color: #8a94a8; line-height: 1.45; margin-top: 3px; }
[data-theme="dark"] .cc-recent-item { border-color: #2c3654; background: #1b2338; }
[data-theme="dark"] .cc-recent-q { color: #d6def2; }
[data-theme="dark"] .cc-recent-crit { color: #8fa0c4; }
.cc-recent-empty-title { font-size: 14px; font-weight: 600; color: #667085; margin: 0 0 6px; }
.cc-recent-empty-sub { font-size: 13px; margin: 0; line-height: 1.5; }

/* Browse/Recent dark mode */
[data-theme="dark"] .cc-browse-group,
[data-theme="dark"] .cc-browse-crit-btn { background: transparent; border-bottom-color: #232a37; color: #e5e9f0; }
[data-theme="dark"] .cc-browse-group:hover,
[data-theme="dark"] .cc-browse-crit-btn:hover { background: #1a212c; }
[data-theme="dark"] .cc-browse-crit-added:hover { background: transparent; }
[data-theme="dark"] .cc-browse-crit-title { color: #f0f3f8; }
[data-theme="dark"] .cc-browse-crit-plus { color: #93a9e6; }
[data-theme="dark"] .cc-browse-crit-added .cc-browse-crit-plus { color: #57c07a; }
[data-theme="dark"] .cc-browse-back:hover { background: #1a212c; color: #f0f3f8; }
[data-theme="dark"] .cc-recent-empty-title { color: #b9c6e6; }
.cc-newsearch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: none;
  background: transparent;
  color: #475467;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cc-newsearch:hover { background: #f6f7f9; color: #101828; }
.cc-newsearch svg { flex: 0 0 auto; }
.cc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #667085;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cc-icon-btn:hover { background: rgba(16, 24, 40, 0.06); color: #101828; }

/* Chat output (messages) */
.cc-chat-output {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 6px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cc-chat-output::-webkit-scrollbar { width: 0; height: 0; display: none; }
.cc-chat-empty {
  margin: auto;
  text-align: center;
  color: #98a1b2;
  padding: 24px 8px;
}
.cc-chat-empty-title { font-size: 14px; font-weight: 600; color: #667085; margin: 0 0 6px; }
.cc-chat-empty-sub { font-size: 13px; margin: 0; line-height: 1.5; }

.cc-msg { display: flex; }
.cc-msg-user { justify-content: flex-end; }
.cc-msg-assistant { justify-content: flex-start; flex-wrap: wrap; }

/* Discreet thumbs up/down feedback under the latest assistant reply. */
.cc-feedback {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 3px 0 0 2px;
}
.cc-feedback-label { font-size: 11.5px; color: #98a1b2; margin-right: 3px; }
.cc-feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: #98a1b2;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cc-feedback-btn svg { width: 14px; height: 14px; }
.cc-feedback-btn-up:hover { background: rgba(25, 150, 25, 0.1); color: #199619; }
.cc-feedback-btn-down:hover { background: rgba(178, 44, 87, 0.1); color: #b22c57; }
.cc-feedback-btn:disabled { cursor: default; }
.cc-feedback-up-on .cc-feedback-btn-up { color: #199619; }
.cc-feedback-down-on .cc-feedback-btn-down { color: #b22c57; }
.cc-feedback-up-on .cc-feedback-btn-down,
.cc-feedback-down-on .cc-feedback-btn-up { opacity: 0.3; }
[data-theme="dark"] .cc-feedback-label { color: #7d8698; }
[data-theme="dark"] .cc-feedback-btn { color: #7d8698; }
[data-theme="dark"] .cc-feedback-btn-up:hover { background: rgba(60, 180, 90, 0.16); color: #57c07a; }
[data-theme="dark"] .cc-feedback-btn-down:hover { background: rgba(255, 138, 168, 0.14); color: #ff8aa8; }
[data-theme="dark"] .cc-feedback-up-on .cc-feedback-btn-up { color: #57c07a; }
[data-theme="dark"] .cc-feedback-down-on .cc-feedback-btn-down { color: #ff8aa8; }
.cc-bubble {
  max-width: 94%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.cc-msg-user .cc-bubble {
  background: #3759a6;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.cc-msg-assistant .cc-bubble {
  background: none;
  color: #1d2939;
  border: none;
  padding-left: 2px;
  padding-right: 2px;
}

/* Typing indicator */
.cc-typing .cc-bubble { display: inline-flex; gap: 4px; align-items: center; }
.cc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #98a1b2;
  animation: cc-blink 1.2s infinite ease-in-out both;
}
.cc-dot:nth-child(2) { animation-delay: 0.2s; }
.cc-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes cc-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

/* "Scroll to latest" lozenge — floats above the input when scrolled up */
.cc-scroll-latest {
  position: absolute;
  left: 50%;
  bottom: 96px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #33415c;
  background: #fff;
  border: 1px solid #e0e5ee;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.14);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s ease, border-color 0.15s ease;
}
.cc-scroll-latest.cc-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.cc-scroll-latest svg { width: 15px; height: 15px; }
.cc-scroll-latest:hover { background: #f6f8fc; border-color: #c9d3e8; }
[data-theme="dark"] .cc-scroll-latest { background: #1f2633; border-color: #2f3a4f; color: #c7cfdd; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
[data-theme="dark"] .cc-scroll-latest:hover { background: #262f40; border-color: #3b4763; }

/* Chat input */
.cc-input {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border-radius: 18px;
  padding: 14px 14px 12px 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cc-input:focus-within {
  border-color: #b6c4e6;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(55, 89, 166, 0.10);
}
.cc-input-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* Checkbox option (Auto build table lives in the results toolbar) */
.cc-toolbar-opt { flex: 0 0 auto; padding: 0 2px; }
.cc-input-actions .cc-send { margin-left: auto; }
/* In-chat summary offer: a small button under the "Want me to summarise…" message */
.cc-summary-offer { margin-top: -4px; }
.cc-summarise-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid #3759a6;
  border-radius: 999px;
  background: #3759a6;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cc-summarise-btn:hover { background: #2f4c8f; border-color: #2f4c8f; }
[data-theme="dark"] .cc-summarise-btn { background: #4d6cb8; border-color: #4d6cb8; }
[data-theme="dark"] .cc-summarise-btn:hover { background: #5a7ac6; border-color: #5a7ac6; }
.cc-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #667085;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.cc-opt:hover { color: #2f4c8f; }
.cc-opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid #d9e0ee;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cc-opt input[type="checkbox"]:hover { border-color: #c3d0ea; }
.cc-opt input[type="checkbox"]:checked {
  background-color: #3759a6;
  border-color: #3759a6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}
[data-theme="dark"] .cc-opt { color: #98a5bd; }
[data-theme="dark"] .cc-opt:hover { color: #c7cfdd; }
[data-theme="dark"] .cc-opt input[type="checkbox"] { background: #1f2633; border-color: #3b4763; }
[data-theme="dark"] .cc-opt input[type="checkbox"]:checked { background-color: #4d6cb8; border-color: #4d6cb8; }
.cc-input-field {
  flex: 1 1 auto;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: #1d2939;
  background: transparent;
  max-height: 160px;
}
.cc-input-field::placeholder { color: #98a1b2; }
.cc-send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: #3759a6;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(55, 89, 166, 0.3);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.cc-send:hover { background: #2f4c8f; box-shadow: 0 3px 10px rgba(55, 89, 166, 0.35); }
.cc-send:active { transform: scale(0.96); box-shadow: 0 1px 2px rgba(55, 89, 166, 0.3); }

/* Resizer */
.cc-resizer {
  flex: 0 0 auto;
  width: 10px;
  margin: 0 -2px;
  cursor: col-resize;
  position: relative;
  z-index: 3;
  align-self: stretch;
}
.cc-resizer::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  transform: translateY(-50%);
  width: 3px;
  height: 40px;
  border-radius: 3px;
  background: rgba(16, 24, 40, 0.14);
  transition: background 0.15s ease, height 0.15s ease;
}
.cc-resizer:hover::after,
.cc-resizer.cc-resizing::after { background: #3759a6; height: 60px; }

/* Table area (elevated white, shadow on LEFT only) */
.cc-table-wrap {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 2;
  /* Card overlaps LEFT over the chat panel (chat tucks under the elevated
     results card). This negative margin + the left-only shadow are the intended
     floating look — keep it. The resize handle is kept clear of the columns via
     left padding on the scroll content below, NOT by moving this edge. */
  margin-left: -26px;
  /* Reserved top band for the Show-chat button / future toolbar. Kept OUTSIDE
     the scroll area so rows can't scroll up into it past the sticky header. */
  padding-top: 56px;
  background: #fff;
  border-radius: 18px;
  box-shadow: -18px 0 36px -14px rgba(16, 24, 40, 0.20);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Toolbar: sits in the reserved top band of the results card. Groups the
   chat toggle and New search as a single segmented control with a divider. */
.cc-toolbar {
  position: absolute;
  top: 14px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.cc-toolbar-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  margin: 0 3px;
  background: #e5e7eb;
}
.cc-reopen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: none;
  background: transparent;
  color: #475467;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cc-reopen:hover { background: #f6f7f9; color: #101828; }
.cc-reopen-icon { flex: 0 0 auto; transition: transform 0.2s ease; }
/* Collapsed = chat hidden: flip chevron to point right ("Show chat") */
.cc-shell.cc-collapsed .cc-reopen-icon { transform: rotate(180deg); }
.cc-table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 8px 8px 40px; scrollbar-width: thin; }

/* Table empty state */
/* `.cc-table-empty` sets display:flex, which overrides the UA `[hidden]` rule —
   so honor the hidden attribute explicitly (higher specificity than the base rule). */
.cc-table-empty[hidden],
.cc-table[hidden] { display: none; }
.cc-table-empty {
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #c2c8d2;
  text-align: center;
  gap: 4px;
}
.cc-table-empty-title { font-size: 15px; font-weight: 600; color: #667085; margin: 12px 0 0; }
.cc-table-empty-sub { font-size: 13px; color: #98a1b2; margin: 0; }

/* Results table.
   Uses border-collapse: SEPARATE (with zero spacing) — required for a reliable
   sticky <thead>. With `collapse`, borders belong to the table grid (not the
   cells) so they don't travel with the pinned header and content can bleed
   above it. `separate` keeps each cell's borders attached to the cell. */
.cc-table { --cc-aff-width: 150px; width: 100%; min-width: calc(222px + var(--cc-aff-width) + var(--cc-criteria-count, 0) * 180px); table-layout: fixed; border-collapse: separate; border-spacing: 0 8px; font-size: 13.5px; background: #edf0f4; }
.cc-table.cc-aff-hidden { --cc-aff-width: 0px; }
.cc-table th, .cc-table td { box-sizing: border-box; overflow-wrap: anywhere; }
/* Keep structural columns fixed; each criterion gets at least 180px.
   Additional columns widen the table inside its scroll container. */
.cc-table th:first-child, .cc-table td:first-child { width: 150px; }
.cc-table th:nth-child(2), .cc-table td:nth-child(2) { width: 150px; }
.cc-table thead th {
  text-align: left;
  font-family: "IBM Plex Sans", "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 75;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #101828;
  padding: 13px 16px;
  border-bottom: 1px solid #eaecf0;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
  white-space: nowrap;
  vertical-align: top;
}
.cc-table tbody td {
  padding: 14px 16px;
  color: #344054;
  vertical-align: top;
}
/* Minimum row height leaves room for lozenges under the lender logo. */
.cc-table tbody tr { height: 145px; }
/* Alternating column tints for scannability. */
.cc-table tbody td:nth-child(odd) { background: #ffffff; }
.cc-table tbody td:nth-child(even) { background: #fafafa; }
.cc-table tbody tr:hover td { background: #eef1f6; }

/* Inline "Read more" toggle for truncated lender responses. */
.cc-readmore {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #3759a6;
  cursor: pointer;
  white-space: nowrap;
}
.cc-readmore:hover { text-decoration: underline; }
.cc-cell-lender { font-weight: 700; color: #101828; text-align: center; }
.cc-lender-logo { max-width: 118px; max-height: 44px; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; }
.cc-col-notify { text-align: center; width: 72px; }
.cc-notify-check { width: 16px; height: 16px; accent-color: #b22c57; cursor: pointer; }

/* Criteria columns: clamp long lender responses so rows stay scannable.
   NOTE: the clamp (display:-webkit-box) MUST live on the inner div, never on
   the <td> — a td with display:-webkit-box loses table-cell layout and the
   columns collapse/misalign. */
/* Criteria header: name sits at the top, "Watch" bell pinned to the bottom.
   Space is reserved with padding-bottom so the bell never overlaps the name. */
/* NOTE: do NOT set position:relative here — it overrides the position:sticky
   inherited from `.cc-table thead th` and the header scrolls away. Sticky is
   itself a positioning context, so the absolute bell below anchors to it. */
.cc-table thead th.cc-col-crit { white-space: normal; padding-bottom: 40px; }
.cc-col-crit-label { display: block; }
.cc-watch-crit {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  color: #667085;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cc-watch-crit svg { width: 16px; height: 16px; }
.cc-watch-crit:hover { background: rgba(55, 89, 166, 0.1); color: #3759a6; }
[data-theme="dark"] .cc-watch-crit { color: #98a1b2; }
[data-theme="dark"] .cc-watch-crit:hover { background: rgba(138, 176, 255, 0.14); color: #8ab0ff; }
.cc-remove-crit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 -4px 5px -4px;
  padding: 4px;
  border: none;
  background: transparent;
  color: #98a1b2;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.cc-remove-crit svg { width: 13px; height: 13px; }
.cc-remove-crit:hover { color: #b22c57; }
[data-theme="dark"] .cc-remove-crit { color: #6b7385; }
[data-theme="dark"] .cc-remove-crit:hover { color: #ff8aa8; }
/* Non-removable header cells (Lender, Notify) reserve the same X-button height
   as the criteria/Affordability columns so every header label sits level. */
.cc-remove-spacer { visibility: hidden; pointer-events: none; }
/* Delete X on the Affordability header hides that whole column. */
.cc-table.cc-aff-hidden thead th:nth-child(2),
.cc-table.cc-aff-hidden tbody td:nth-child(2) { display: none; }
/* With column 2 hidden, nth-child still counts the (display:none) cell, so the
   alternating tint would repeat for adjacent visible columns. Flip the parity
   from column 3 onward to keep the stripes alternating. Column 1 stays white. */
.cc-table.cc-aff-hidden tbody td:nth-child(n+3):nth-child(odd) { background: #fafafa; }
.cc-table.cc-aff-hidden tbody td:nth-child(n+3):nth-child(even) { background: #ffffff; }
/* Re-assert row hover above the higher-specificity stripe override. */
.cc-table.cc-aff-hidden tbody tr:hover td:nth-child(n+1) { background: #eef1f6; }
[data-theme="dark"] .cc-table.cc-aff-hidden tbody td:nth-child(n+3):nth-child(odd) { background: #171d27; }
[data-theme="dark"] .cc-table.cc-aff-hidden tbody td:nth-child(n+3):nth-child(even) { background: #141922; }
[data-theme="dark"] .cc-table.cc-aff-hidden tbody tr:hover td:nth-child(n+1) { background: #1c2330; }
.cc-td-crit { word-break: break-word; }
.cc-cell-crit {
  color: #475467;
  font-size: 13px;
  line-height: 1.5;
}
.cc-cell-muted { color: #98a1b2; }
.cc-cell-loading { color: #98a1b2; letter-spacing: 0.15em; }

/* Grade icon shown above each criteria result. */
.cc-grade-icon { display: block; height: 25px; width: auto; margin: 0 0 6px; }

/* Faint placeholder shown when a lender hasn't answered a criterion yet. */
.cc-cell-awaiting { color: #b0b7c3; font-size: 12px; line-height: 1.5; }
[data-theme="dark"] .cc-cell-awaiting { color: #5b6472; }

/* Shimmer skeletons shown while lender data loads in. */
@keyframes cc-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.cc-skeleton {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e9edf3 25%, #f4f7fb 37%, #e9edf3 63%);
  background-size: 400% 100%;
  animation: cc-shimmer 1.4s ease infinite;
}
.cc-skeleton-lines { display: flex; flex-direction: column; gap: 8px; }
.cc-skeleton-logo { height: 28px; border-radius: 8px; margin: 0 auto; }
.cc-skeleton-check { height: 16px; width: 16px; border-radius: 4px; margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .cc-skeleton { animation: none; }
}
.cc-col-err {
  margin-left: 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #b22c57;
}

/* Inline spinner in a criterion column header while its data loads. */
.cc-col-spin {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 7px;
  vertical-align: -1px;
  border: 2px solid #d0d5dd;
  border-top-color: #3759a6;
  border-radius: 50%;
  animation: cc-col-spin 0.7s linear infinite;
}
@keyframes cc-col-spin { to { transform: rotate(360deg); } }

/* Collapsed state — chat/resizer hidden, table reclaims full width */
.cc-shell.cc-collapsed .cc-chat,
.cc-shell.cc-collapsed .cc-resizer { display: none; }
.cc-shell.cc-collapsed .cc-table-wrap { margin-left: 0; }

/* Dark mode */
[data-theme="dark"] .cc-chat { background: linear-gradient(to right, #161b24 0%, #1c2331 42%, #10141c 100%); border-color: #232a36; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
[data-theme="dark"] .cc-chat-title { color: #f0f2f6; }
[data-theme="dark"] .cc-mode-toggle { background: #1b212b; border-color: #2a313c; }
[data-theme="dark"] .cc-mode-glider { background: #2f3947; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
[data-theme="dark"] .cc-mode-opt { color: #8791a3; }
[data-theme="dark"] .cc-mode-opt:hover { color: #b9c2d0; }
[data-theme="dark"] .cc-mode-opt.cc-mode-active { color: #f0f2f6; }
[data-theme="dark"] .cc-newsearch { background: transparent; color: #98a1b2; }
[data-theme="dark"] .cc-newsearch:hover { background: rgba(255,255,255,0.06); color: #f0f2f6; }
[data-theme="dark"] .cc-icon-btn { color: #98a1b2; }
[data-theme="dark"] .cc-icon-btn:hover { background: rgba(255,255,255,0.08); color: #f0f2f6; }
[data-theme="dark"] .cc-msg-assistant .cc-bubble { background: none; border: none; color: #e6e9ef; }
[data-theme="dark"] .cc-input { background: #141922; border-color: #252b36; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
[data-theme="dark"] .cc-input-field { color: #e6e9ef; }
[data-theme="dark"] .cc-input-field::placeholder { color: #7d8698; }
[data-theme="dark"] .cc-input:focus-within { border-color: #3b4763; box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
[data-theme="dark"] .cc-resizer::after { background: #333a47; }
[data-theme="dark"] .cc-table-wrap { background: #141922; box-shadow: -14px 0 30px -12px rgba(0,0,0,0.5); }
[data-theme="dark"] .cc-toolbar-divider { background: #2b3342; }
[data-theme="dark"] .cc-reopen { background: transparent; color: #98a1b2; }
[data-theme="dark"] .cc-reopen:hover { background: rgba(255,255,255,0.06); color: #f0f2f6; }
[data-theme="dark"] .cc-table thead th { background: #10141c; color: #f0f3f8; border-bottom-color: #232834; }
[data-theme="dark"] .cc-table { background: #10141c; }
[data-theme="dark"] .cc-table tbody td:nth-child(odd) { background: #141922; }
[data-theme="dark"] .cc-table tbody td:nth-child(even) { background: #171d27; }
[data-theme="dark"] .cc-table tbody tr:hover td { background: #1c2330; }
[data-theme="dark"] .cc-readmore { color: #8ab0ff; }
[data-theme="dark"] .cc-skeleton { background: linear-gradient(90deg, #1e2531 25%, #2a3342 37%, #1e2531 63%); background-size: 400% 100%; }
[data-theme="dark"] .cc-table tbody td { color: #c4cad4; border-color: #1f242e; }
[data-theme="dark"] .cc-table tbody td:first-child { border-left-color: #1f242e; }
[data-theme="dark"] .cc-cell-crit { color: #aeb6c2; }
[data-theme="dark"] .cc-cell-muted,
[data-theme="dark"] .cc-cell-loading { color: #7d8698; }
[data-theme="dark"] .cc-col-spin { border-color: #333a46; border-top-color: #7f9be0; }
[data-theme="dark"] .cc-table tbody tr:hover { background: #1a1f29; }
[data-theme="dark"] .cc-cell-lender { color: #f0f2f6; }
[data-theme="dark"] .cc-table-empty-title { color: #98a1b2; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cc-dot { animation: none; }
}

/* Criteria Chat — pending note row + disabled states */
.cc-row-note { text-align: center; color: #98a1b2; font-size: 13px; padding: 28px 16px !important; }
.cc-send:disabled { opacity: 0.55; cursor: default; }
.cc-input-field:disabled { opacity: 0.6; cursor: default; }
[data-theme="dark"] .cc-row-note { color: #7d8698; }

/* Criteria Chat — criteria buttons (in chat) */
.cc-crit-group { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: 88%; }
.cc-crit-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #e4e7ec;
  background: #fff;
  color: #344054;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  padding: 9px 14px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.cc-crit-lead { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: #3759a6; margin-top: 1px; }
.cc-crit-lead svg { width: 16px; height: 16px; }
/* Streamed reveal — rows/buttons snap in one at a time */
.cc-crit-anim { opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 0.16s ease-out, transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cc-crit-anim.cc-shown { opacity: 1; transform: translateY(0) scale(1); }

/* Criterion row: label + info icon + add icon */
.cc-crit-item { display: flex; width: 100%; align-items: center; gap: 6px; }
.cc-crit-item .cc-crit-btn { flex: 1 1 auto; min-width: 0; }
.cc-crit-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  color: #667085;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.1s ease;
}
.cc-crit-icon svg { width: 20px; height: 20px; }
.cc-crit-icon:hover { color: #3759a6; }
.cc-crit-icon:active { transform: scale(0.9); }
.cc-crit-add:hover { color: #199619; }
.cc-crit-info-open { color: #2059ac; }
[data-theme="dark"] .cc-crit-icon { color: #98a1b2; }
[data-theme="dark"] .cc-crit-icon:hover { color: #b9c6e6; }
[data-theme="dark"] .cc-crit-add:hover { color: #7fd47f; }
[data-theme="dark"] .cc-crit-info-open { color: #7d9be6; }

/* Inline info panel shown under a criterion — no background; a line drops from
   the criterion and curves round toward the streamed question text. */
.cc-crit-info-panel {
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 100%;
  margin: -2px 0 4px 12px;
  padding: 0;
  background: none;
  border: none;
}
.cc-crit-info-elbow {
  flex: 0 0 auto;
  width: 16px;
  height: 24px;
  margin-top: -9px;
  border-left: 2px solid #b6c4e6;
  border-bottom: 2px solid #b6c4e6;
  border-bottom-left-radius: 11px;
}
.cc-crit-info-text {
  flex: 0 1 auto;
  min-width: 0;
  padding-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: #33415c;
}
[data-theme="dark"] .cc-crit-info-elbow { border-color: #3b4763; }
[data-theme="dark"] .cc-crit-info-text { color: #b9c6e6; }
.cc-crit-btn:hover { background: #fafbff; border-color: #c9d3e8; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08); }
.cc-crit-btn:active { transform: translateY(0.5px); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.cc-crit-choice { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cc-crit-choice .cc-crit-btn { flex: 1 1 0; align-self: stretch; justify-content: center; align-items: center; text-align: center; }
.cc-crit-choice.cc-choice-done { opacity: 0.55; pointer-events: none; }
.cc-crit-all { background: #3759a6; border-color: #3759a6; color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(55, 89, 166, 0.25); }
.cc-crit-all:hover { background: #2f4c8f; border-color: #2f4c8f; box-shadow: 0 2px 8px rgba(55, 89, 166, 0.3); }
.cc-crit-added { opacity: 0.5; cursor: default; pointer-events: none; box-shadow: none; }

/* Read-only criterion label (auto-add): looks like a pill but isn't a button. */
.cc-crit-static { cursor: default; }
.cc-crit-static:hover { background: #fff; border-color: #e4e7ec; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.cc-crit-static .cc-crit-lead { color: #199619; }
[data-theme="dark"] .cc-crit-static:hover { background: #1f2633; border-color: #2f3a4f; box-shadow: none; }
[data-theme="dark"] .cc-crit-static .cc-crit-lead { color: #4ec44e; }
[data-theme="dark"] .cc-crit-btn { background: #1f2633; border-color: #2f3a4f; color: #c7cfdd; box-shadow: none; }
[data-theme="dark"] .cc-crit-btn:hover { background: #262f40; border-color: #3b4763; box-shadow: none; }
[data-theme="dark"] .cc-crit-lead { color: #7d9be6; }
[data-theme="dark"] .cc-crit-all { background: #3759a6; border-color: #3759a6; color: #fff; }

/* Criteria Chat — loading status spinner */
/* System/status line: no bubble — just spinner + muted text. */
.cc-status .cc-bubble {
  background: none;
  border: none;
  box-shadow: none;
  padding: 2px 0;
  border-radius: 0;
  max-width: 100%;
  color: #667085;
}
[data-theme="dark"] .cc-status .cc-bubble { background: none; border: none; color: #98a1b2; }
.cc-status-bubble { display: inline-flex; align-items: center; gap: 9px; }
.cc-status-label { transition: opacity 0.18s ease; }
.cc-spinner {
  flex: 0 0 auto;
  width: 15px;
  aspect-ratio: 1;
  --cc-loader-g: no-repeat radial-gradient(farthest-side, #3759a6 94%, transparent);
  background:
    var(--cc-loader-g) 0 0,
    var(--cc-loader-g) 100% 0,
    var(--cc-loader-g) 100% 100%,
    var(--cc-loader-g) 0 100%;
  background-size: 40% 40%;
  animation: cc-loader 0.5s infinite;
}
@keyframes cc-loader { 100% { background-position: 100% 0, 100% 100%, 0 100%, 0 0; } }
[data-theme="dark"] .cc-spinner { --cc-loader-g: no-repeat radial-gradient(farthest-side, #7d9be6 94%, transparent); }