/* ---- Theme tokens ---- */
.ps-aia{
    --ps-accent:#16a34a;
    --ps-accent-100:#eafaf0;
    --ps-bg:#f6f7fb;
    --ps-ink:#0f172a;
    --ps-muted:#6b7280;
    --ps-border:#e5e7eb;
    --ps-card:#ffffff;
    --ps-info:#2563eb;
}

/* ---- Page canvas ---- */
.ps-aia,
.ps-aia body{
    background:var(--ps-bg);
    color:var(--ps-ink);
}
.ps-aia .container-narrow{max-width:1160px}

/* ---- Generic building blocks ---- */
.ps-aia .elevate{
    background:#fff;
    border:1px solid #edf1f6;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.ps-aia .ps-card{
    background:#fff;
    border:1px solid #edf1f6;
    border-radius:15px;
}
/* Allow vertical resize only */
.ps-aia textarea {
    resize: vertical !important;
    font-size:15px;
}

.ps-aia .ps-soft{
    background:var(--ps-accent-100);
    border:1px solid #d1fadf;
    border-radius:15px;
    margin-bottom: 20px;
    margin-top: 20px;
}
.ps-aia .kicker{font-size:15px; color:var(--ps-muted)}
.ps-aia .dropdown-like{
    border:1px solid var(--ps-border);
    border-radius:15px;
    padding:8px 12px;
    background:#fff;
}
.ps-aia .ps-input{
    border-radius:4px;
    border:1px solid var(--ps-border);
    padding:8px 10px;
}
.ps-aia .ps-chip{
    display:inline-block;
    border-radius:999px;
    padding:3px 8px;
    font-weight:600;
    font-size:12px;
    background:#f3f4f6;
    color:#374151;
}
.ps-aia .ps-chip.success{background:rgba(22,163,74,.1); color:#065f46}
.ps-aia .ps-chip.info{background:rgba(37,99,235,.08); color:#1e40af}
.ps-aia .section-title{
    font-weight:700; font-size:15px; text-transform:uppercase;
    letter-spacing:.02em; color:#374151;
}

/* ===== Align Choose Master FTA heading and dropdown side-by-side ===== */
.ps-aia .mb-3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 15px;
}

/* Left side: heading */
.ps-aia .ps-aia-choose-label {
  flex: 0 0 25%; /* roughly 3 of 12 columns */
  background: #f9fafb;
  border: 1px solid #edf1f6;
  border-radius: 15px;
  padding: 10px 15px;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
  margin: 0;
}

/* Right side: dropdown */
.ps-aia #ftaDropdown {
  flex: 1; /* takes remaining space (~9/12) */
  border-radius: 15px;
  border: 1px solid #edf1f6;
  background: #fff;
  padding: 10px 14px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
}

/* ---- Filters card ---- */
.ps-aia .ps-card{padding:12px}
.ps-aia input[type=range]{width:100%} /* BS3 range reset */
.ps-aia #minMatchLabel{margin-left:6px}

/* ---- Results list + item ---- */
.ps-aia #results.stack-12 > * + *{margin-top:12px}
.ps-aia .rank-card{
    border:1px solid var(--ps-border);
    border-radius:15px;
    font-size:15px;
    background:#fff;
    padding:12px;
}
.ps-aia .rank-head{overflow:hidden}
.ps-aia .rank-num{
    width:38px;height:38px;border-radius:6px;background:#f3f4f6;
    display:inline-block;line-height:38px;text-align:center;
    font-weight:800;margin-right:10px;
}
.ps-aia .match-pill{
    display:inline-block;border-radius:10px;padding:10px 18px;
    background:#eef2ff;color:#3730a3;font-weight:700;font-size:15px
}
.ps-aia .progress{height:8px; border-radius:999px; margin-bottom:0}

/* ---- Empty state ---- */
.ps-aia .empty-state{
    border:2px dashed #e5e7eb;
    border-radius:6px;
    padding:20px;
    background:#fff;
}

/* ---- Spacing helpers (BS5-like) ---- */
.ps-aia .m-0{margin:0}
.ps-aia .mb-0{margin-bottom:0}
.ps-aia .mb-5{margin-bottom:30px}
.ps-aia .mb-4{margin-bottom:24px}
.ps-aia .mb-3{margin-bottom:16px}
.ps-aia .mb-2{margin-bottom:10px}
.ps-aia .mt-3{margin-top:16px}
.ps-aia .mt-2{margin-top:10px}
.ps-aia .mr-5{margin-right:30px}

/* ---- Small “density” option (if you add it later) ---- */
.ps-aia.density-sm .rank-card{padding:8px}
.ps-aia.density-sm .rank-num{width:32px;height:32px;line-height:32px}
.ps-aia.density-sm .result-body{font-size:13px}

/* ---- Minor BS3 tidies specific to this page ---- */
.ps-aia .help-block{margin:6px 0 0 0}
.ps-aia .result-body p{
    margin:0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;     /* was 1 */
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    margin-top: 2px;
    max-width: 100%;}
.ps-aia .result-actions .btn{border-radius:4px}

.ps-aia .ps-card h2.section-title {
    padding: 0;              /* matches results-panel inner padding */
    margin: 0 0 20px 0;         /* keep spacing consistent */
}

/* 2) Pull the "Min match" label left to align with the section header */
.ps-aia .form-group-minmatch > label,
.ps-aia .form-group-repeat > label {
    display: block;
    margin-bottom: 15px;
    font-size: 15px;
}

/* keep the slider aligned with the other inputs */
.ps-aia .form-group-minmatch #minMatch,
.ps-aia .form-group-repeat #repeatThreshold {
    width: 100%;
}

/* ===== Elegant purple sliders (Min match + Repeat) ===== */
.ps-aia #minMatch,
.ps-aia #repeatThreshold {
    accent-color: #733f95;
    height: 6px;
    background: linear-gradient(to right, #733f95 50%, #e6d7ef 50%);
}

/* Chrome, Edge, Safari */
.ps-aia #minMatch::-webkit-slider-runnable-track,
.ps-aia #repeatThreshold::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 10px;
    background: linear-gradient(to right, #733f95 0%, #733f95 calc(var(--percent, 50%) * 1%), #e6d7ef 0%);
}
.ps-aia #minMatch::-webkit-slider-thumb,
.ps-aia #repeatThreshold::-webkit-slider-thumb {
    background: #733f95;
    border: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-top: -6px;
    cursor: pointer;
}

/* Firefox */
.ps-aia #minMatch::-moz-range-track,
.ps-aia #repeatThreshold::-moz-range-track {
    background: #e6d7ef;
    height: 4px;
    border-radius: 10px;
}
.ps-aia #minMatch::-moz-range-progress,
.ps-aia #repeatThreshold::-moz-range-progress {
    background: #733f95;
    height: 4px;
    border-radius: 10px;
}
.ps-aia #minMatch::-moz-range-thumb,
.ps-aia #repeatThreshold::-moz-range-thumb {
    background: #733f95;
    border: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
}


/* ===== Percentage badge styling ===== */
.ps-aia #minMatchLabel,
.ps-aia #repeatThresholdLabel {
    background: #e6d7ef;
    color: #733f95;
    border-radius: 8px;         /* softer rounded shape */
    padding: 2px 6px;
    font-weight: 600;
    font-size: 11px;
}

/* ---- Make the big results panel look like the PoC ---- */
.ps-aia .results-panel{
    background:#fff;
    border:1px solid #edf1f6;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.04);
}
/* Alternative: inline checkboxes */
.ps-aia .checkbox label{
    padding-left: 0;           /* no extra gutter */
}
.ps-aia .checkbox input[type="checkbox"]{
    position: static;          /* stop absolute positioning */
    margin: 0 8px 0 0;         /* space before text */
    vertical-align: -2px;
}
/* ===== "View" heading alignment and checkbox layout ===== */

/* Match heading alignment with others */
.ps-aia .form-group label {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    display: block;
    margin-bottom: 16px;
}


/* Display checkboxes inline */
.ps-aia .form-group:last-of-type .checkbox {
    display: inline-block;
    margin-right: 15px;
}

/* Style purple checkboxes */
.ps-aia input[type="checkbox"] {
    accent-color: #733f95; /* modern browsers */
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* make placeholder look like a hint */
#ftaName.is-placeholder { color:#6b7280; font-style:italic; }

.ps-aia-header{margin:4px 0 12px}
.ps-aia-title{margin:0;font-size:28px;line-height:1.2;font-weight:700;color:#0f172a}
.ps-aia-subtitle{margin-top:2px;color:#64748b;font-size:15px}
.ps-aia-choose-label{display:block;margin-bottom:6px;font-weight:600;color:#111827}

/* make sure old folder icon never shows */
.glyphicon-folder-open{display:none!important}

/* Fix clipped text in <select> (g, y, p etc.) */
.ps-aia select.form-control.ps-input {
    height: auto;           /* let it size to content */
    min-height: 34px;       /* same as BS3 default */
    line-height: 1.45;      /* ensure descenders have room */
    padding-top: 8px;       /* keep your ps-input padding */
    padding-bottom: 8px;
}

/* (Optional) keep all form controls in this page comfy */
.ps-aia .form-control {
    line-height: 1.45;
    border-radius: 8px;
}

.ps-banner{
  padding:10px;
  margin-bottom:16px;
  border-radius:8px;
  background:#e8fbea;          /* same look as before */
  border:1px solid #d7f4d7;     /* subtle border */
}

/* Dropdown menu for the FTA selector */
.ps-aia .dropdown-like { position: relative; cursor: pointer; }
.ps-aia .dropdown-like .ps-menu {
  display: none;
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  max-height: 260px;
  overflow: auto;
  list-style: none;
  padding: 6px 0;
}
.ps-aia .dropdown-like.open .ps-menu { display: block; }
.ps-aia .ps-menu li { padding: 8px 12px; }
.ps-aia .ps-menu li:hover { background: #f3f4f6; }

.ps-aia .cm-list { padding-left: 18px; margin: 6px 0 0; }
.ps-aia .cm-list li { margin-bottom: 6px; }

.spinning { animation: spin 0.8s linear infinite; display:inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.aia-gpt-slot .kicker { color:#6b7280; font-size:12px; margin-bottom:6px; }

/* Use the Bootstrap grid for the FTA row so edges match the panels */
.ps-fta-row { margin-top: 10px; margin-bottom: 20px; }

/* Keep the same pill styling */
.ps-fta-row .ps-aia-choose-label {
  background:#f9fafb;
  border:1px solid #edf1f6;
  box-shadow:0 5px 15px rgba(0,0,0,.04);
  font-size: 15px;
  font-weight:700; color:#0f172a; text-align:center;
}

.ps-fta-row #ftaDropdown {
  border:1px solid #edf1f6;
  background:#fff;
  box-shadow:0 5px 15px rgba(0,0,0,.04);
}

/* IMPORTANT: remove earlier flex override on .mb-3 to avoid fighting Bootstrap */
.ps-aia .mb-3 { display:block; } /* or simply delete your earlier .ps-aia .mb-3 flex block */


/* ===== Make result action buttons match the Recompute button ===== */
.ps-aia .result-actions .btn {
  border-radius: 10px !important;      /* same curve */
  font-weight: 600;
  padding: 10px 18px;                   /* same padding as Recompute */
  font-size: 15px;
  box-shadow: none;
  min-width: 110px;                    /* uniform width for all three */
  text-align: center;
}

/* Match Recompute’s purple style for primary actions */
.ps-aia .result-actions .btn-primary,
.ps-aia .result-actions .btn-default {
  background-color: #733f95 !important;
  color: #fff !important;
  border: none !important;
}


/* Hover and focus states for polish */
.ps-aia .result-actions .btn:hover,
.ps-aia .result-actions .btn:focus {
  opacity: 0.9;
  box-shadow: 0 0 0 3px rgba(115, 63, 149, 0.2);
}

/* ===== Make result action buttons match the Recompute button ===== */
.ps-aia .result-actions .btn {
  border-radius: 10px !important;      /* same curve */
  font-weight: 600;
  padding: 10px 18px;                   /* same padding as Recompute */
  font-size: 15px;
  box-shadow: none;
  min-width: 110px;                    /* uniform width for all three */
  text-align: center;
}

/* Match Recompute’s purple style for primary actions */
.ps-aia .result-actions .btn-primary,
.ps-aia .result-actions .btn-default {
  background-color: #733f95 !important;
  color: #fff !important;
  border: none !important;
}

/* Hover and focus states for polish */
.ps-aia .result-actions .btn:hover,
.ps-aia .result-actions .btn:focus {
  opacity: 0.9;
  box-shadow: 0 0 0 3px rgba(115, 63, 149, 0.2);
}

/* Flat, clean "Run GPT Analysis" (grey → red on hover) */
.ps-aia .result-actions .btn[data-action="run-gpt-analysis"] {
  background-color: #e5e5e5 !important;   /* flat grey */
  color: #000 !important;                  /* black text */
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 18px;
  font-size:15px;
  min-width: 140px;
  text-align: center;
  text-shadow: none !important;
  box-shadow: none !important;
  background-image: none !important;       /* nuke BS3 gradient */
  filter: none !important;                 /* IE/Edge legacy */
  transition: background-color .2s ease, color .2s ease;
}

/* Hover/Focus/Active → solid red, still flat */
.ps-aia .result-actions .btn[data-action="run-gpt-analysis"]:hover,
.ps-aia .result-actions .btn[data-action="run-gpt-analysis"]:focus,
.ps-aia .result-actions .btn[data-action="run-gpt-analysis"]:active,
.ps-aia .result-actions .btn[data-action="run-gpt-analysis"].active {
  background-color: #d32f2f !important;    /* red */
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;       /* belt + suspenders */
  outline: none !important;
}
/* Subtle grey outline hover for "Run GPT Analysis" to match the others */
.ps-aia .result-actions .btn[data-action="run-gpt-analysis"]:hover {
  background-color: #d32f2f !important;   /* red */
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.25) !important; /* red-tinted outline */
}

/* Keep focus/active consistent */
.ps-aia .result-actions .btn[data-action="run-gpt-analysis"]:focus,
.ps-aia .result-actions .btn[data-action="run-gpt-analysis"]:active {
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.3) !important;
}
/* Extra spacing between action buttons when they wrap on zoom */
.ps-aia .result-actions .btn {
  margin-right: 8px;    /* tiny horizontal gap */
  margin-bottom: 8px;   /* vertical gap when a new row forms */
}

/* ===== Replace default blues with purple theme ===== */

/* Component / label chips */
.ps-aia .ps-chip.info {
  background: rgba(115, 63, 149, 0.12) !important;  /* light purple */
  color: #733f95 !important;                         /* main purple */
}

/* Match-pill (97% match) */
.ps-aia .match-pill {
  background: rgba(115, 63, 149, 0.12) !important;
  color: #733f95 !important;
}

/* Match progress bar */
.ps-aia .progress-bar-info {
  background-color: #733f95 !important; /* deep purple fill */
}

/* Icon tint */
.ps-aia .glyphicon-signal,
.ps-aia .glyphicon-random {
  color: #733f95 !important;
}

/* Hover highlight for any purple chip */
.ps-aia .ps-chip.info:hover {
  background: rgba(115, 63, 149, 0.18) !important;
}

/* (Optional) tweak link color if needed */
.ps-aia .text-primary {
  color: #733f95 !important;
}

/* ===== Purple rank number box ===== */
.ps-aia .rank-num {
  background: rgba(115, 63, 149, 0.12) !important; /* light purple background */
  color: #733f95 !important;                        /* deep purple text */
  font-weight: 700;
}

/* ===== Purple match percentage tag ===== */
.ps-aia .match-pill {
  background: rgba(115, 63, 149, 0.12) !important;  /* soft lavender */
  color: #733f95 !important;                        /* text purple */
}

/* ===== Purple link text for IDs ===== */
.ps-aia .text-primary {
  color: #733f95 !important;
}

/* ===== Force purple progress bar color ===== */

/* For all match progress bars */
.ps-aia .progress-bar,
.ps-aia .progress-bar-info {
  background-color: #733f95 !important;   /* deep purple */
  background-image: none !important;      /* remove any gradient */
  border: none !important;
}

/* Ensure background track is faint greyish-purple for contrast */
.ps-aia .progress {
  background-color: rgba(115, 63, 149, 0.08) !important;
  border-radius: 10px;
  height: 6px; /* same as slider thickness */
}

/* ===== Scroll-to-top button: bottom-right, 15px radius ===== */
#toTop {
  position: fixed !important;
  right: 24px !important;     /* bottom-right corner */
  bottom: 24px !important;
  left: auto !important;      /* kill any left positioning */
  z-index: 9999 !important;

  width: 40px;
  height: 40px;
  padding: 0;

  border-radius: 15px !important;
  background: #733f95;        /* deep purple */
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

#toTop:hover {
  background: #5a2f75;
  transform: translateY(-1px);
}

#toTop .glyphicon {
  margin: 0;                  /* keep the arrow centered */
  line-height: 1;
}

/* Make the empty-state look/position like one result card */
.ps-aia .results-panel #emptyState {
  /* act like .rank-card */
  margin-top: 10px;
  border: 0px solid #edf1f6;             /* outer card border (like results) */
  border-radius: 15px;
  background: #fff;
  padding: 80px;                         /* same inner padding as cards */
  position: relative;

  /* neutralize the old dashed border from .empty-state */
  /* (your earlier .empty-state rule sets a dashed border — override it) */
  border-style: solid !important;
}

/* Draw the dashed “placeholder” inside the card, inset like the list items */
.ps-aia .results-panel #emptyState::after {
  content: "";
  position: absolute;
  inset: 15px;                           /* space from the card edges */
  border: 2px dashed #e5e7eb;
  border-radius: 15px;
  pointer-events: none;                  /* purely decorative */
}

/* Tidy the text inside so it aligns nicely */
.ps-aia .results-panel #emptyState .h3 {
  margin: 4px 12px 0 0;                  /* small gap before the helper text */
}
.ps-aia .results-panel #emptyState p {
  display: inline-block;
  margin: 0;
}

/* Make header a strict 3-col layout */
.ps-aia .rank-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Reset BS floats inside the flex row */
.ps-aia .rank-head .pull-left,
.ps-aia .rank-head .pull-right { float: none !important; }

/* Middle column must be shrinkable for ellipsis to work */
.ps-aia .rank-head .head-center {
  flex: 1 1 auto;
  min-width: 0;              /* REQUIRED for ellipsis in flex children */
}

/* Fixed width for meter column so text never intrudes */
.ps-aia .rank-head .right-metrics {
  flex: 0 0 240px;           /* adjust if needed (220–260 usually fine) */
  min-width: 240px;
  text-align: right;
}

/* TITLE: single line with ellipsis */
.ps-aia .rank-head .head-center > div:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DESCRIPTION PREVIEW: 2-line clamp with ellipsis, nudged up */
.ps-aia .rank-head .kicker[data-snippet] {
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;    /* avoid long tokens pushing width */
  max-width: 100%;
  margin: 0;
}

/* Keep meter tidy */
.ps-aia .rank-head .right-metrics .progress {
  margin: 0;
  height: 6px;
}

/* Ensure the content body (DESC:) starts on a new row under the header/meter */
.ps-aia .rank-head { margin-bottom: 6px; }   /* gives a clean break */
.ps-aia .result-body { clear: both; }        /* belts & suspenders, even if floats creep in */



/* one knob for the meter column width */
.ps-aia .rank-card { --metrics-w: 240px; }

/* right column stays fixed */
.ps-aia .rank-head .right-metrics {
  flex: 0 0 var(--metrics-w);
  min-width: var(--metrics-w);
  text-align: right;
}

/* reserve the same right gutter under the meter column */
.ps-aia .result-body,
.ps-aia .result-actions {
  padding-right: calc(var(--metrics-w) + 16px);
}

/* 1) Keep the default clamps (you already have these set) */
.ps-aia .rank-head .kicker[data-snippet]      { -webkit-line-clamp: 1; }
.ps-aia .result-body [data-detail-text]  {
    -webkit-line-clamp: 2;
     color: #0f172a;
     font-weight: normal;}

/* 2) Expand ONLY the hovered line */
.ps-aia .rank-head .kicker[data-snippet]:hover {
  -webkit-line-clamp: unset;
  overflow: visible;
  font-weight: normal;
  color: #0f172a;
}

.ps-aia .result-body [data-detail-text]:hover {
  -webkit-line-clamp: unset;
  overflow: visible;
  font-weight: normal;
  color: #0f172a;
}

/* 3) Keep text out of the meter column even when expanded */
.ps-aia .result-body,
.ps-aia .result-actions {                      /* you already set this; reiterating for hover */
  padding-right: calc(var(--metrics-w) + 16px);
}

/* (Optional) tiny visual hint on hover */
.ps-aia .rank-head .kicker[data-snippet]:hover,

/* for hover on problem title and problem description*/
.ps-aia .result-body [data-detail-text]:hover {
  cursor: text;
  border-radius: 10px;
  padding-left: 8px;
  background: rgba(115,63,149,.04);
}
/* Slider block above button: give it some bottom space */
.ps-aia .form-group-minmatch { margin-bottom: 14px; }

.ps-aia .results-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ps-aia .ps-sort-btn {
  padding: 0 4px;
  font-size: 12px;
  color: #733f95;
}

.ps-aia .ps-sort-btn .glyphicon {
  margin-right: 4px;
}

.ps-aia .ps-sort-btn:hover,
.ps-aia .ps-sort-btn:focus {
  text-decoration: none;
  color: #5a2f75;
}
.aia-repeat-flag {
    margin-left: 6px;
    font-size: 15px;
    color: #c00;
    font-weight: 600;
}
/* Make Recompute & Aggregated RCA fully responsive */
.ps-aia #recomputeBtn,
.ps-aia #aggregatedFishboneBtn,
.ps-aia #btnGetGenAIFishboneFromQueryPanel{
  background-color: #733f95 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
  text-align: center;

  /* responsive instead of fixed width */
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  margin-top: 6px;
  margin-bottom: 10px;
}


/* Hover and focus states — same for both */
.ps-aia #recomputeBtn:hover,
.ps-aia #recomputeBtn:focus,
.ps-aia #aggregatedFishboneBtn:hover,
.ps-aia #aggregatedFishboneBtn:focus,
.ps-aia #btnGetGenAIFishboneFromQueryPanel:hover,
.ps-aia #btnGetGenAIFishboneFromQueryPanel:focus{
  opacity: 0.9;
  box-shadow: 0 0 0 3px rgba(115, 63, 149, 0.2);
}
/* Force "Show Countermeasures" (btn-success) to solid purple */
.ps-aia .result-actions .btn-success {
  background-color: #733f95 !important;
  color: #fff !important;
  border: none !important;

  /* kill Bootstrap's green gradient + effects */
  background-image: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Keep it purple on hover/focus/active too */
.ps-aia .result-actions .btn-success:hover,
.ps-aia .result-actions .btn-success:focus,
.ps-aia .result-actions .btn-success:active,
.ps-aia .result-actions .btn-success.active {
  background-color: #5a2f75 !important; /* or keep #733f95 if you don't want a darker hover */
  color: #fff !important;
  border: none !important;
  background-image: none !important;
  filter: none !important;
  text-shadow: none !important;
}
/* Big pill: label + dropdown on one line */
.ps-fta-shell {
  display: flex;
  align-items: center;
  gap: 16px;

  /* make it the darker outer pill (same as old label pill) */
  background: #f9fafb !important;
  border: 1px solid #edf1f6;
  border-radius: 24px;
  padding: 10px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.ps-fta-shell-header {
  margin: 0;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

/* dropdown fills the remaining space, stays as inner pill */
.ps-fta-shell-body {
  flex: 1 1 auto;
}

.ps-fta-shell-body #ftaDropdown {
  width: 100%;
  margin: 0;
  border-radius: 15px;
  border: 1px solid #edf1f6;
  background: #ffffff;
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
/* Turn AI banner into a left-text / right-button row */
.ps-aia .ps-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Left side: icon + text in one row */
.ps-aia .ps-banner-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "Start Chatting" inside the green bar (no purple) */
.ps-aia .ps-banner-chat-btn {
  background: transparent !important;   /* same as bar */
  border: none !important;
  color: #065f46 !important;            /* dark green text */
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Subtle hover – slightly darker, still greenish */
.ps-aia .ps-banner-chat-btn:hover,
.ps-aia .ps-banner-chat-btn:focus {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #065f46 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Align the chat icon nicely */
.ps-aia .ps-banner-chat-btn .glyphicon {
  margin-right: 4px;
  top: 1px;
}
/* ===== Chatbot modal (AI Assistant) ===== */
.ps-aia .aia-chat-modal .modal-content {
  border-radius: 16px;
}

.ps-aia .aia-chat-header-icon {
  margin-right: 6px;
  color: #733f95;
}

/* Scrollable chat area */
.ps-aia .aia-chat-window {
  max-height: 320px;
  min-height: 180px;
  overflow-y: auto;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid var(--ps-border);
  padding: 8px;
}

/* Message rows */
.ps-aia .aia-chat-message {
  margin-bottom: 6px;
  font-size: 13px;
}

.ps-aia .aia-chat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  margin-bottom: 2px;
}

.ps-aia .aia-chat-bubble {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  max-width: 80%;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* User vs assistant alignment */
.ps-aia .aia-chat-message.user {
  text-align: right;
}
.ps-aia .aia-chat-message.user .aia-chat-bubble {
  background: #733f95;
  color: #fff;
  margin-left: auto;
}

.ps-aia .aia-chat-message.assistant .aia-chat-bubble {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  text-align: left;
}

/* Input row */
.ps-aia .aia-chat-footer {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.ps-aia .aia-chat-footer .form-control {
  border-radius: 10px;
}

.ps-aia .aia-chat-footer .btn-success {
  border-radius: 10px;
  min-width: 44px;
}

/* reuse existing .spinning animation for the refresh icon */
/* ===== Chatbot modal layout & styling ===== */

/* Center the chat modal on screen, fixed size-ish */
.ps-aia .aia-chat-modal .modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 80vh;
  margin: 0;
  width: 70%;
  max-width: 1200px;
}

/* Keep content nicely rounded and constrained */
.ps-aia .aia-chat-modal .modal-content {
  border-radius: 16px;
}

/* Center the "ProSolvr Chatbot" title, keep X on the right */
.ps-aia .aia-chat-modal .modal-header {
  text-align: center;
  position: relative;
}

.ps-aia .aia-chat-modal .modal-header .modal-title {
  float: none;
  display: inline-block;
  margin: 0;
}

.ps-aia .aia-chat-modal .modal-header .close {
  position: absolute;
  right: 12px;
  top: 8px;
}

/* Purple send button (only inside chat modal) */
.ps-aia #aiChatModal #aiChatSendBtn {
  background-color: #733f95 !important;
  border-color: #733f95 !important;
  color: #fff !important;
  border-radius: 999px;
  width: 44px;
  min-width: 44px;
  height: 34px;
  padding: 0;
}

.ps-aia #aiChatModal #aiChatSendBtn:hover,
.ps-aia #aiChatModal #aiChatSendBtn:focus {
  background-color: #5a2f75 !important;
  border-color: #5a2f75 !important;
  box-shadow: 0 0 0 3px rgba(115, 63, 149, 0.25);
}

/* Fixed-height chat area, like ChatGPT */
/*.ps-aia .aia-chat-window {
  height: 260px;
  max-height: 260px;
  min-height: 260px;
  overflow-y: auto;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid var(--ps-border);
  padding: 8px;
}*/

/* Taller chat viewport inside the modal */
.ps-aia .aia-chat-window {
    height: 420px;
    max-height: 420px;
    min-height: 420px;
    overflow-y: auto;
}
/* Empty-state: center hint text in the middle like ChatGPT */
.ps-aia .aia-chat-window.aia-chat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 13px;
}

.ps-aia .aia-chat-placeholder {
  text-align: center;
  padding: 0 16px;
}

/* Once there are real messages, we go back to normal block layout */
.ps-aia .aia-chat-window:not(.aia-chat-empty) {
  display: block;
}
/* Chat send button -> green */
#aiChatModal #aiChatForm .btn {
    background-color: #733f95 !important;   /* normal green */
    border-color:     #733f95 !important;
    color: #fff !important;
    box-shadow: none;
}

#aiChatModal #aiChatForm .btn:hover,
#aiChatModal #aiChatForm .btn:focus {
    background-color: #733f95 !important;   /* darker green on hover */
    border-color:     #733f95 !important;
    color: #fff !important;
}
/* Remove header underline in chatbot modal */
#aiChatModal .modal-header {
    border-bottom: none !important;
    box-shadow: none !important;
}
/* Force chat SEND button to ProSolvr purple, kill Bootstrap green */
#aiChatSendBtn,
#aiChatModal #aiChatForm .btn-success {
    background-color: #733f95 !important;
    border-color:     #733f95 !important;
    color: #fff !important;

    /* kill Bootstrap's green gradient + legacy filters */
    background-image: none !important;
    filter: none !important;
    text-shadow: none !important;

    border-radius: 999px;
    width: 44px;
    min-width: 44px;
    height: 34px;
    padding: 0;
}

/* Hover/focus: slightly darker purple */
#aiChatSendBtn:hover,
#aiChatSendBtn:focus,
#aiChatModal #aiChatForm .btn-success:hover,
#aiChatModal #aiChatForm .btn-success:focus {
    background-color: #5a2f75 !important;
    border-color:     #5a2f75 !important;
    box-shadow: 0 0 0 3px rgba(115, 63, 149, 0.25);
}
/* Base bubble: allow wrapping and long text */
.ps-aia .aia-chat-bubble {
    display: inline-block;
    max-width: 100%;
    white-space: pre-wrap;        /* respect \n but wrap lines */
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

/* User stays pill-shaped */
.ps-aia .aia-chat-message.user .aia-chat-bubble {
    border-radius: 10px;
    text-align: left;
    font-size: 14px;
}

/* Assistant becomes a card-style bubble for long answers */
.ps-aia .aia-chat-message.assistant .aia-chat-bubble {
    border-radius: 10px;          /* not a pill anymore */
    display: inline-block;
    max-width: 100%;
    text-align: left;
    font-size: 14px;
}

/* Let action buttons use full width; meter gutter only for header/body text */
.ps-aia .result-actions {
  padding-right: 0 !important;   /* or 16px if you want a small right padding */
}