/* ── BaseButton styles ── */
.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
.bp-btn:disabled { opacity: 0.6; cursor: not-allowed;
}

/* Sizes */
.bp-btn--sm { padding: 6px 14px; font-size: 12px;
}
.bp-btn--md { padding: 9px 20px;
}
.bp-btn--lg { padding: 12px 28px; font-size: 14px;
}

/* Variants */
.bp-btn--primary { background: #da2128; color: #fff; border-color: #da2128;
}
.bp-btn--primary:hover:not(:disabled) { background: #c41e24; border-color: #c41e24;
}
.bp-btn--outline { background: #fff; color: #4e5a82; border-color: #d1d5e8;
}
.bp-btn--outline:hover:not(:disabled) { background: #f8f9fc;
}
.bp-btn--text { background: transparent; color: #6b7db8; border-color: transparent; padding-left: 4px; padding-right: 4px;
}
.bp-btn--text:hover:not(:disabled) { color: #1a1d35;
}
.bp-btn--danger { background: #fee2e2; color: #b91c1c; border-color: #fecaca;
}
.bp-btn--danger:hover:not(:disabled) { background: #fecaca;
}
.bp-btn--navy { background: #1a1d35; color: #fff; border-color: #1a1d35;
}
.bp-btn--navy:hover:not(:disabled) { background: #2d3154; border-color: #2d3154;
}

/* Loading spinner */
.bp-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: bp-spin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes bp-spin {
to { transform: rotate(360deg);
}
}

/* ── bp- form primitives (global, prefixed to avoid conflicts) ── */
.bp-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bp-form-group--full { grid-column: 1 / -1;
}
.bp-label {
  font-size: 12px;
  font-weight: 600;
  color: #000;
  letter-spacing: 0.4px;
}
.bp-required { color: #da2128;
}
.bp-input {
  /* Fixed 34px height (border-box) — kept in lockstep with BaseSelect
     and BaseSearchSelect so mixed form rows align on the baseline. */
  height: 34px;
  padding: 0 12px;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1a1d35;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.bp-input:focus {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.bp-input--error    { border-color: #b91c1c !important;
}
.bp-input--disabled { background: #f8f9fc; color: #9098b0; cursor: not-allowed;
}
.bp-input--readonly { background: #f8f9fc; color: #1a1d35; cursor: default; border-color: #c0c1cb;
}
.bp-field-error  { font-size: 11px; color: #b91c1c;
}
.bp-field-helper { font-size: 11px; color: #9098b0;
}

/* ── BaseSelect component styles ── */
.bp-select-wrap { width: 100%;
}
.bp-select { width: 100%;
}
.bp-select.p-select {
  /* Fixed 34px height (border-box) — locks in a consistent form-row
     height across BaseInput / BaseSelect / BaseSearchSelect. */
  height: 34px;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.15s;
}
.bp-select.p-select:hover:not(.p-disabled) { border-color: #a0a1ab;
}
.bp-select.p-select.p-focus {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
  outline: none;
}
.bp-select-wrap--open .bp-select.p-select {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
  outline: none;
}
.bp-select .p-select-label {
  /* Flex-center so the label text vertically centres inside the
     fixed-height 34px trigger (parent border-box). */
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  font-size: 13.5px;
  color: #1a1d35;
  font-family: inherit;
}
.bp-select .p-select-label.p-placeholder { color: #9098b0;
}
.bp-select .p-select-dropdown {
  width: 36px;
  color: #6b7db8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-select .p-select-dropdown svg { width: 14px; height: 14px;
}
.bp-select--error.p-select  { border-color: #b91c1c !important;
}
.bp-select.p-disabled { background: #f8f9fc;
}
.bp-select.p-disabled .p-select-label { color: #9098b0;
}

/* ── PrimeVue Select overlay — teleported to body, must be global ── */
.p-select-overlay,
.p-select-overlay.p-component {
  z-index: 9999 !important;
  background-color: #ffffff !important;
  border: 1px solid #c0c1cb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(25, 26, 55, 0.14) !important;
  font-family: inherit;
  font-size: 13.5px;
  overflow: hidden;
}
.p-select-overlay .p-select-list-container,
.p-select-overlay .p-select-list {
  background-color: #ffffff !important;
}
.p-select-overlay .p-select-filter-container {
  padding: 8px 12px;
  border-bottom: 1px solid #e4e7f0;
  background-color: #ffffff !important;
}
.p-select-overlay .p-select-filter {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #c0c1cb;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background-color: #fff !important;
}
.p-select-overlay .p-select-filter:focus { border-color: #5b6af0;
}
.p-select-overlay .p-select-list {
  /* No max-height or overflow here — PrimeVue sets max-height on the parent
     .p-select-list-container via its scrollHeight prop. Competing here causes
     nested scroll containers that collapse item padding on long lists. */
  padding: 6px 0;
}
.p-select-overlay .p-select-option,
.p-select-overlay .p-select-option-container {
  padding: 11px 14px !important;
  line-height: 1.4 !important;
  font-size: 13.5px !important;
  color: #1a1d35 !important;
  cursor: pointer !important;
  background-color: #ffffff !important;
}
.p-select-overlay .p-select-option:hover,
.p-select-overlay .p-select-option-container:hover      { background-color: #f5f6fb !important;
}
.p-select-overlay .p-select-option.p-focus,
.p-select-overlay .p-select-option-container.p-focus    { background-color: #f5f6fb !important;
}
.p-select-overlay .p-select-option.p-selected,
.p-select-overlay .p-select-option-container.p-selected { background-color: #eef0fd !important; color: #3d4db0 !important; font-weight: 600 !important;
}
.p-select-overlay .p-select-empty-message               { padding: 12px 14px !important; font-size: 13px !important; color: #9098b0 !important; background-color: #ffffff !important;
}

/* ── BaseMultiSelect component styles ── */
.bp-mselect-wrap { width: 100%;
}
.bp-mselect { width: 100%;
}
.bp-mselect.p-multiselect {
  width: 100%;
  /* Fixed 34px trigger height to match BaseInput / BaseSelect / BaseSearchSelect
     (v1.1.46). border-box keeps the outer edge exactly 34px including the
     1px border, so mixed form rows stay baseline-aligned. Vertical padding
     is zero — the label element centres its text via `display:flex;
     align-items:center; height:100%` (same recipe as BaseSelect).
     Caveat: `display='chip'` + `tagsPosition='inside'` with many picks
     will clip stacked chips at this height; that combo should use
     `tagsPosition='below'` for a compact single-row trigger + chips
     rendered outside. */
  height: 34px;
  box-sizing: border-box;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.15s;
}
.bp-mselect.p-multiselect:hover:not(.p-disabled) { border-color: #a0a1ab;
}
.bp-mselect.p-multiselect.p-focus {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
  outline: none;
}
.bp-mselect-wrap--open .bp-mselect.p-multiselect {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
  outline: none;
}
.bp-mselect .p-multiselect-label {
  /* Vertical padding at 0 — label element centres via flex on the 34px
     trigger. Horizontal padding matches BaseInput's `padding: 0 12px`. */
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  color: #1a1d35;
  font-family: inherit;
  /* Prevent long comma-joined labels from pushing the trigger taller — the
     chevron column has its own fixed 36px width, so this label span owns
     everything to its left. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bp-mselect .p-multiselect-label.p-placeholder { color: #9098b0;
}
.bp-mselect .p-multiselect-dropdown {
  width: 36px;
  color: #6b7db8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-mselect .p-multiselect-dropdown svg { width: 14px; height: 14px;
}
.bp-mselect--error.p-multiselect { border-color: #b91c1c !important;
}
.bp-mselect.p-disabled { background: #f8f9fc;
}
.bp-mselect.p-disabled .p-multiselect-label { color: #9098b0;
}

/* chip display mode */
.bp-mselect .p-multiselect-chip {
  background: rgba(218, 33, 40, 0.08);
  color: #da2128;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 7px;
  margin: 2px 3px 2px 0;
}
.bp-mselect .p-multiselect-chip-icon {
  font-size: 10px;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.7;
}
.bp-mselect .p-multiselect-chip-icon:hover { opacity: 1;
}

/* ── PrimeVue MultiSelect overlay — teleported to body, must be global ── */
.p-multiselect-overlay,
.p-multiselect-overlay.p-component {
  z-index: 9999 !important;
  background-color: #ffffff !important;
  border: 1px solid #c0c1cb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(25, 26, 55, 0.14) !important;
  font-family: inherit;
  font-size: 13.5px;
  overflow: hidden;
}
.p-multiselect-overlay .p-multiselect-header {
  padding: 8px 12px;
  border-bottom: 1px solid #e4e7f0;
  background-color: #ffffff !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-multiselect-overlay .p-multiselect-filter-container {
  flex: 1;
}
.p-multiselect-overlay .p-multiselect-filter {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #c0c1cb;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background-color: #fff !important;
}
.p-multiselect-overlay .p-multiselect-filter:focus { border-color: #da2128;
}
.p-multiselect-overlay .p-multiselect-list-container,
.p-multiselect-overlay .p-multiselect-list {
  background-color: #ffffff !important;
}
.p-multiselect-overlay .p-multiselect-list { padding: 6px 0;
}
.p-multiselect-overlay .p-multiselect-option,
.p-multiselect-overlay .p-multiselect-option-container {
  padding: 11px 14px !important;
  line-height: 1.4 !important;
  font-size: 13.5px !important;
  color: #1a1d35 !important;
  cursor: pointer !important;
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.p-multiselect-overlay .p-multiselect-option:hover,
.p-multiselect-overlay .p-multiselect-option-container:hover    { background-color: #f5f6fb !important;
}
.p-multiselect-overlay .p-multiselect-option.p-focus,
.p-multiselect-overlay .p-multiselect-option-container.p-focus  { background-color: #f5f6fb !important;
}
.p-multiselect-overlay .p-multiselect-option.p-selected,
.p-multiselect-overlay .p-multiselect-option-container.p-selected {
  background-color: #fff3f3 !important;
  color: #da2128 !important;
  font-weight: 600 !important;
}

/* checkbox inside each option */
.p-multiselect-overlay .p-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.p-multiselect-overlay .p-checkbox-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid #c0c1cb;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.p-multiselect-overlay .p-checkbox-box.p-checked {
  background: #da2128 !important;
  border-color: #da2128 !important;
}
.p-multiselect-overlay .p-checkbox-box.p-checked svg { color: #fff !important;
}
.p-multiselect-overlay .p-multiselect-empty-message {
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: #9098b0 !important;
  background-color: #ffffff !important;
}

/* ── tagsPosition='below' — selected items render as removable tags BELOW the input ── */
.bp-mselect-trigger-placeholder {
  color: #9098b0;
}
.bp-mselect-trigger-count {
  color: #1a1d35;
  font-weight: 600;
}
.bp-mselect-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-height: 120px;
  overflow-y: auto;
}
.bp-mselect-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 10px;
  background: rgba(218, 33, 40, 0.08);
  color: #da2128;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.bp-mselect-tag-remove {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #da2128;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-mselect-tag-remove:hover {
  background: #da2128;
  color: #fff;
}

/* ── BaseTreeMultiSelect — mirrors BaseMultiSelect's trigger geometry so
   mixed form rows stay baseline-aligned. */
.bp-treesel-wrap { width: 100%;
}
.bp-treesel { width: 100%;
}
.bp-treesel.p-treeselect {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.15s;
}
.bp-treesel.p-treeselect:hover:not(.p-disabled) { border-color: #a0a1ab;
}
.bp-treesel.p-treeselect.p-focus,
.bp-treesel-wrap--open .bp-treesel.p-treeselect {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
  outline: none;
}
.bp-treesel .p-treeselect-label {
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  color: #1a1d35;
  font-family: inherit;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bp-treesel .p-treeselect-label.p-placeholder { color: #9098b0;
}
.bp-treesel .p-treeselect-dropdown {
  width: 36px;
  color: #6b7db8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-treesel .p-treeselect-dropdown svg { width: 14px; height: 14px;
}
.bp-treesel--error.p-treeselect { border-color: #b91c1c !important;
}
.bp-treesel.p-disabled { background: #f8f9fc;
}
.bp-treesel.p-disabled .p-treeselect-label { color: #9098b0;
}

/* ── Overlay — teleported to body, must be global ── */
.p-treeselect-overlay,
.p-treeselect-overlay.p-component {
  z-index: 9999 !important;
  background-color: #ffffff !important;
  border: 1px solid #c0c1cb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(25, 26, 55, 0.14) !important;
  font-family: inherit;
  font-size: 13.5px;
  overflow: hidden;
  min-width: 260px;
}
/* Filter row — PrimeVue 4 renders this via the inner Tree component as
   an IconField, which also carries the `.p-iconfield` class on the
   same wrapper. We target both so a theme-level rename doesn't break
   the styling. Likewise the input carries BOTH `.p-tree-filter-input`
   AND `.p-inputtext`; the latter is what Aura's base theme sets its
   default font-size / padding on, which was winning on specificity
   and leaving the input looking unstyled (giant placeholder text).
   The combined selector `input.p-tree-filter-input` out-specifies the
   theme's `.p-inputtext` rule, and the `!important` on sizing props
   guards against any future Aura preset that reasserts them. */
.p-treeselect-overlay .p-tree-filter,
.p-treeselect-overlay .p-iconfield {
  padding: 8px 12px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e4e7f0 !important;
  width: 100%;
  box-sizing: border-box;
}
.p-treeselect-overlay input.p-tree-filter-input,
.p-treeselect-overlay .p-iconfield > input.p-inputtext {
  width: 100% !important;
  height: 34px !important;
  padding: 7px 32px 7px 10px !important;
  border: 1px solid #c0c1cb !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  line-height: 1.3 !important;
  color: #1a1d35 !important;
  outline: none !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}
.p-treeselect-overlay input.p-tree-filter-input:focus,
.p-treeselect-overlay .p-iconfield > input.p-inputtext:focus {
  border-color: #da2128 !important;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12) !important;
}
.p-treeselect-overlay input.p-tree-filter-input::-moz-placeholder, .p-treeselect-overlay .p-iconfield > input.p-inputtext::-moz-placeholder {
  color: #9098b0 !important;
  font-size: 13px !important;
  font-family: inherit !important;
  opacity: 1;
}
.p-treeselect-overlay input.p-tree-filter-input::placeholder,
.p-treeselect-overlay .p-iconfield > input.p-inputtext::placeholder {
  color: #9098b0 !important;
  font-size: 13px !important;
  font-family: inherit !important;
  opacity: 1;
}
/* IconField wrapper must be position:relative for the absolutely-
   positioned SearchIcon to anchor against the input. PrimeVue sets
   this on the base .p-iconfield rule but if our padding on .p-tree-
   filter wins the cascade without this, the icon can escape its
   intended slot. Belt-and-braces. */
.p-treeselect-overlay .p-tree-filter,
.p-treeselect-overlay .p-iconfield {
  position: relative !important;
}

/* SearchIcon — anchored to the input's right edge, vertically centred.
   The IconField usually handles this but our overrides to the parent's
   padding occasionally desync the default anchor. Pinning it here
   keeps the glyph aligned regardless of theme tweaks.
   `line-height: 0` + explicit flex centering + sized child SVG together
   guarantee vertical centre — without them the span's intrinsic line-
   box height pushes the icon off-centre (that's why it previously
   rendered near the top of the input). */
.p-treeselect-overlay .p-tree-filter .p-inputicon,
.p-treeselect-overlay .p-iconfield .p-inputicon {
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6b7db8 !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 0 !important;
  font-size: 14px !important;
  pointer-events: none;
}
.p-treeselect-overlay .p-tree-filter .p-inputicon > svg,
.p-treeselect-overlay .p-iconfield .p-inputicon > svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}
.p-treeselect-overlay .p-tree {
  background: #ffffff !important;
  border: none !important;
  padding: 4px 0 !important;
  max-height: 300px;
  overflow-y: auto;
}
.p-treeselect-overlay .p-tree-node-content {
  display: flex !important;
  align-items: center !important;
  /* 10px gap matches BaseMultiSelect's option spacing — gives the
     checkbox room to breathe from the label text. */
  gap: 10px !important;
  padding: 7px 10px !important;
  line-height: 1.4 !important;
  font-size: 13.5px !important;
  color: #1a1d35 !important;
  cursor: pointer !important;
  border-radius: 4px;
  margin: 1px 4px;
}
.p-treeselect-overlay .p-tree-node-content:hover,
.p-treeselect-overlay .p-tree-node-content.p-focus { background-color: #f5f6fb !important;
}

/* Group (parent) rows — slightly heavier so tree hierarchy reads at a glance. */
.p-treeselect-overlay .p-tree-node-children .p-tree-node-content { padding-left: 20px !important;
}
.p-treeselect-overlay > .p-tree > .p-tree-root > .p-tree-node > .p-tree-node-content {
  font-weight: 600;
  color: #1a1d35 !important;
}

/* Checkbox styling — matches BaseMultiSelect. */
.p-treeselect-overlay .p-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.p-treeselect-overlay .p-checkbox-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid #c0c1cb;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
/* PrimeVue 4 puts the state modifier on the ROOT .p-checkbox wrapper
   (`.p-checkbox-checked` / `.p-checkbox-indeterminate`), NOT on the
   `.p-checkbox-box` child — this was why the box stayed white even
   when ticked. Target the wrapper, then style the nested box. Keep
   both patterns (wrapper-driven + box-adjacent) in case a future
   PrimeVue release migrates the modifier back onto the box. */
.p-treeselect-overlay .p-checkbox.p-checkbox-checked > .p-checkbox-box,
.p-treeselect-overlay .p-checkbox.p-checkbox-indeterminate > .p-checkbox-box,
.p-treeselect-overlay .p-checkbox-box.p-checked,
.p-treeselect-overlay .p-checkbox-box.p-indeterminate,
.p-treeselect-overlay .p-checkbox-box.p-highlight {
  background: #da2128 !important;
  border-color: #da2128 !important;
}
.p-treeselect-overlay .p-checkbox.p-checkbox-checked > .p-checkbox-box svg,
.p-treeselect-overlay .p-checkbox.p-checkbox-indeterminate > .p-checkbox-box svg,
.p-treeselect-overlay .p-checkbox-box.p-checked svg,
.p-treeselect-overlay .p-checkbox-box.p-indeterminate svg,
.p-treeselect-overlay .p-checkbox-box.p-highlight svg {
  color: #fff !important;
}
/* The CheckboxIcon in PrimeVue 4 is sometimes rendered via a CSS mask
   whose colour follows the icon's `color`, and sometimes as an inline
   SVG whose stroke follows `currentColor`. Covering both so the tick
   mark reads as white against the red fill in every build. */
.p-treeselect-overlay .p-checkbox.p-checkbox-checked > .p-checkbox-box .p-checkbox-icon,
.p-treeselect-overlay .p-checkbox.p-checkbox-indeterminate > .p-checkbox-box .p-checkbox-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.p-treeselect-overlay .p-treeselect-empty-message {
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: #9098b0 !important;
  background-color: #ffffff !important;
}

/* ── tagsPosition='below' — matches BaseMultiSelect's recipe ── */
.bp-treesel-trigger-placeholder { color: #9098b0;
}
.bp-treesel-trigger-count       { color: #1a1d35; font-weight: 600;
}
.bp-treesel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-height: 120px;
  overflow-y: auto;
}
.bp-treesel-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 10px;
  background: rgba(218, 33, 40, 0.08);
  color: #da2128;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.bp-treesel-tag-remove {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #da2128;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-treesel-tag-remove:hover {
  background: #da2128;
  color: #fff;
}

.bp-textarea {
  padding: 9px 12px;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1a1d35;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
}
.bp-textarea:focus {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.bp-textarea--error    { border-color: #b91c1c !important;
}
.bp-textarea--disabled { background: #f8f9fc; color: #9098b0; cursor: not-allowed;
}

/* ── Wrapper ── */
.bp-tbl-wrap { display: flex; flex-direction: column;
}
.bp-tbl-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid #e4e7f0;
}

/* ── Table base ── */
.bp-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  font-weight: 600;
  color: #1a1d35;
  background: #fff;
  min-width: 820px;
}

/* ── Header: sort row ── */
.bp-tbl-thead-sort { background: #191a37;
}
.bp-tbl-th {
  padding: 0;
  border-bottom: 2px solid #2d2f52;
  white-space: nowrap;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.bp-tbl-th--sortable { cursor: pointer;
}
.bp-tbl-th--sortable:hover { background: #23254a;
}
.bp-tbl-th--left   { text-align: left;
}
.bp-tbl-th--right  { text-align: right;
}
.bp-tbl-th--center { text-align: center;
}
.bp-tbl-th-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 11px 14px;
}
.bp-tbl-th--right  .bp-tbl-th-inner { justify-content: flex-end;
}
.bp-tbl-th--center .bp-tbl-th-inner { justify-content: center;
}
.bp-tbl-th-label { flex: 1;
}
.bp-tbl-sort-icon { color: #da2128; flex-shrink: 0; display: flex;
}
.bp-tbl-sort-icon--idle { color: #4e5a82;
}

/* ── Header: search row ── */
.bp-tbl-thead-search { background: #f9fafc;
}
.bp-tbl-th-search {
  padding: 6px 8px;
  border-bottom: 1px solid #e4e7f0;
  vertical-align: middle;
}
.bp-tbl-search-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  padding: 0 7px;
  height: 28px;
  transition: border-color 0.15s;
}
.bp-tbl-search-wrap:focus-within {
  border-color: #da2128;
  box-shadow: 0 0 0 2px rgba(218, 33, 40, 0.08);
}
.bp-tbl-search-icon { color: #9098b0; flex-shrink: 0;
}
.bp-tbl-search-input {
  border: none;
  outline: none;
  font-size: 11.5px;
  color: #1a1d35;
  background: transparent;
  width: 100%;
  min-width: 0;
  font-family: inherit;
}
.bp-tbl-search-input::-moz-placeholder { color: #c4c9de;
}
.bp-tbl-search-input::placeholder { color: #c4c9de;
}
.bp-tbl-search-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: #9098b0;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.bp-tbl-search-clear:hover { color: #da2128;
}

/* ── Body rows ── */
.bp-tbl-row { transition: background 0.12s;
}
.bp-tbl-row--clickable { cursor: pointer;
}
.bp-tbl-row:nth-child(odd)  { background: #fff;
}
.bp-tbl-row:nth-child(even) { background: #f4f4f7;
}
.bp-tbl-row:hover { background: #fdf5f5;
}
.bp-tbl-td {
  padding: 11px 14px;
  vertical-align: middle;
}
.bp-tbl-td--clip   { overflow: hidden;
}
.bp-tbl-td--right  { text-align: right;
}
.bp-tbl-td--center { text-align: center;
}
.bp-tbl-cell-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Status badge ── */
.bp-tbl-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.bp-tbl-status-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.bp-tbl-status--draft      { background: rgba(250,204,21,0.15); color: #b45309;
}
.bp-tbl-status--draft      .bp-tbl-status-dot { background: #f59e0b;
}
.bp-tbl-status--active     { background: rgba(34,197,94,0.12);  color: #15803d;
}
.bp-tbl-status--active     .bp-tbl-status-dot { background: #22c55e;
}
.bp-tbl-status--closed     { background: rgba(107,114,128,0.12); color: #374151;
}
.bp-tbl-status--closed     .bp-tbl-status-dot { background: #9ca3af;
}
.bp-tbl-status--approved   { background: rgba(34,197,94,0.12);  color: #15803d;
}
.bp-tbl-status--approved   .bp-tbl-status-dot { background: #22c55e;
}
.bp-tbl-status--completed  { background: rgba(59,130,246,0.12); color: #1d4ed8;
}
.bp-tbl-status--completed  .bp-tbl-status-dot { background: #3b82f6;
}

/* ── Loading skeleton ── */
.bp-tbl-row--skeleton { pointer-events: none;
}
.bp-tbl-skeleton {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f0f1f5 25%, #e8eaf2 50%, #f0f1f5 75%);
  background-size: 200% 100%;
  animation: bp-tbl-shimmer 1.4s infinite;
}
@keyframes bp-tbl-shimmer {
0%   { background-position: 200% 0;
}
100% { background-position: -200% 0;
}
}

/* ── Empty state ── */
.bp-tbl-td-empty { text-align: center; padding: 48px 20px;
}
.bp-tbl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bp-tbl-empty-icon { color: #c4c9de;
}
.bp-tbl-empty p { font-size: 13px; color: #9098b0; margin: 0;
}

/* ── Footer ── */
.bp-tbl-footer { display: flex; justify-content: flex-end; padding: 8px 4px 0;
}
.bp-tbl-count { font-size: 11.5px; color: #9098b0;
}

/* ── Cell alignment ── */
.bp-tbl-td--center { text-align: center;
}
.bp-tbl-td--right  { text-align: right;
}

/* ── Text truncation with ellipsis for default-rendered cells ── */
.bp-tbl-td--clip .bp-tbl-cell-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Expandable parent row ── */
.bp-tbl-row--expandable { cursor: pointer;
}

/* ── Expand column cell wrapper ── */
.bp-tbl-expand-cell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

/* ── Expand chevron button ── */
.bp-tbl-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #d1d5e8;
  background: #fff;
  color: #6b7db8;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.bp-tbl-expand-btn svg {
  transition: transform 0.2s ease;
}
.bp-tbl-expand-btn:hover {
  background: #f5f6fb;
  border-color: #b0b7d8;
  color: #1a1d35;
}
.bp-tbl-expand-btn--open {
  background: #1a1d35;
  border-color: #1a1d35;
  color: #fff;
}
.bp-tbl-expand-btn--open:hover {
  background: #2d3152;
  border-color: #2d3152;
}
.bp-tbl-expand-btn--open svg {
  transform: rotate(90deg);
}

/* ── Version count badge ── */
.bp-tbl-expand-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 99px;
  background: #da2128;
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* ── Child rows — same appearance as parent ── */
.bp-tbl-row--child { background: inherit;
}
.bp-tbl-cell-text--muted { color: #c4c9de !important;
}

.bp-tabbar {
  border-bottom: 1px solid #e4e7f0;
  background: #fff;
  overflow-x: hidden;
}
.bp-tabbar-row {
  display: flex;
  gap: 2px;
  padding: 0 4px;
}
.bp-tabbar-btn {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 11px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.15s;
  flex-shrink: 0;
}
.bp-tabbar-btn:hover { background: #f8f9fc;
}
.bp-tabbar-btn--active {
  border-bottom-color: #da2128;
  background: #fff5f5;
}
.bp-tabbar-btn--disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.bp-tabbar-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f1f5;
  color: #6b7db8;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-tabbar-btn--active .bp-tabbar-icon {
  background: #fee2e2;
  color: #da2128;
}
.bp-tabbar-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.bp-tabbar-code {
  font-size: 11px;
  font-weight: 700;
  color: #4e5a82;
  letter-spacing: 0.3px;
}
.bp-tabbar-btn--active .bp-tabbar-code { color: #da2128;
}
.bp-tabbar-name {
  font-size: 9.5px;
  color: #9098b0;
}
.bp-tabbar-name--solo {
  font-size: 12px;
  font-weight: 600;
  color: #4e5a82;
}
.bp-tabbar-btn--active .bp-tabbar-name { color: #da2128;
}
.bp-tabbar-count {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 18px;
  height: 20px;
  border-radius: 9px;
  background: #e4e7f0;
  color: #1a1d35;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  line-height: 1;
  pointer-events: none;
}
.bp-tabbar-btn--active .bp-tabbar-count {
  background: #da2128;
  color: #fff;
}

.bp-rs-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  padding: 0 12px;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.bp-rs-val {
  font-size: 11.5px;
  font-weight: 700;
  color: #da2128;
  white-space: nowrap;
  flex-shrink: 0;
}
.bp-rs-track-wrap {
  position: relative;
  flex: 1;
  height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
  min-width: 0;
  touch-action: none;
}
.bp-rs-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 99px;
  background: #e4e7f0;
}
.bp-rs-fill {
  position: absolute;
  height: 4px;
  border-radius: 99px;
  background: #da2128;
  pointer-events: none;
}
.bp-rs-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #da2128;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(218, 33, 40, 0.35);
  transform: translateX(-50%);
  top: 50%;
  margin-top: -9px;
  cursor: grab;
  pointer-events: none;
}
.bp-rs-track-wrap:active .bp-rs-handle { cursor: grabbing;
}
.bp-rs-box--active {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}

.bp-filter-card {
  background: #fff;
  border: 1px solid #e4e7f0;
  border-radius: 10px;
}
.bp-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
}
.bp-filter-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.bp-filter-icon { color: #da2128; flex-shrink: 0;
}
.bp-filter-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4e5a82;
  white-space: nowrap;
  flex-shrink: 0;
}
.bp-filter-badge {
  display: inline-flex;
  align-items: center;
  background: #da2128;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bp-filter-clear {
  background: none;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #4e5a82;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.bp-filter-clear:hover { border-color: #da2128; color: #da2128;
}
.bp-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #4e5a82;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.bp-filter-toggle:hover { border-color: #da2128; color: #da2128;
}
.bp-filter-body {
  border-top: 1px solid #e4e7f0;
  padding: 16px 18px 14px;
}
.bp-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 16px;
  align-items: end;
}

/* ── Active filter chips row (holds both groups + flat singles) ── */
.bp-filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding-bottom: 0;
}

/* ── Grouped chips (one bordered container per filter kind) ── */
.bp-filter-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 3px;
  background: #ffffff;
  border: 1px solid #e4e7f0;
  border-radius: 16px;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.03);
  max-width: 100%;
}
.bp-filter-group-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.bp-filter-group-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.bp-filter-group-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 2px 1px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 180px;
}
.bp-filter-group-pill-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-filter-group-pill-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.65);
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  font-family: inherit;
  opacity: 0.75;
  transition: background 0.12s, opacity 0.12s, color 0.12s;
}
.bp-filter-group-pill-remove:hover {
  background: rgba(218, 33, 40, 0.9);
  color: #ffffff;
  opacity: 1;
}

/* Palette — mirrors forecast's compliance-report chip colour vocabulary.
   Each colour has three variants: badge (bg + text), dot (bg), pill (bg + text).
   Add new colours by extending COLOR_WHITELIST in the script AND defining
   the three selectors below for the same colour name. */
.bp-filter-group-badge--sky     { background: #e0f2fe; color: #075985;
}
.bp-filter-group-dot--sky       { background: #0ea5e9;
}
.bp-filter-group-pill--sky      { background: #f0f9ff; color: #075985; box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.25);
}
.bp-filter-group-badge--violet  { background: #ede9fe; color: #5b21b6;
}
.bp-filter-group-dot--violet    { background: #8b5cf6;
}
.bp-filter-group-pill--violet   { background: #f5f3ff; color: #5b21b6; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.25);
}
.bp-filter-group-badge--teal    { background: #ccfbf1; color: #115e59;
}
.bp-filter-group-dot--teal      { background: #14b8a6;
}
.bp-filter-group-pill--teal     { background: #f0fdfa; color: #115e59; box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.25);
}
.bp-filter-group-badge--amber   { background: #fef3c7; color: #92400e;
}
.bp-filter-group-dot--amber     { background: #f59e0b;
}
.bp-filter-group-pill--amber    { background: #fffbeb; color: #92400e; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25);
}
.bp-filter-group-badge--emerald { background: #d1fae5; color: #065f46;
}
.bp-filter-group-dot--emerald   { background: #10b981;
}
.bp-filter-group-pill--emerald  { background: #ecfdf5; color: #065f46; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
}
.bp-filter-group-badge--fuchsia { background: #fae8ff; color: #86198f;
}
.bp-filter-group-dot--fuchsia   { background: #d946ef;
}
.bp-filter-group-pill--fuchsia  { background: #fdf4ff; color: #86198f; box-shadow: inset 0 0 0 1px rgba(217, 70, 239, 0.25);
}
.bp-filter-group-badge--red     { background: #fee2e2; color: #991b1b;
}
.bp-filter-group-dot--red       { background: #ef4444;
}
.bp-filter-group-pill--red      { background: #fef2f2; color: #991b1b; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.25);
}
.bp-filter-group-badge--slate   { background: #e2e8f0; color: #334155;
}
.bp-filter-group-dot--slate     { background: #64748b;
}
.bp-filter-group-pill--slate    { background: #f1f5f9; color: #334155; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.25);
}

/* ── Flat single-value chips (back-compat with pre-groups consumers) ── */
.bp-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  border-radius: 99px;
  background: rgba(218, 33, 40, 0.07);
  border: 1px solid rgba(218, 33, 40, 0.2);
  white-space: nowrap;
  flex-shrink: 0;
}
.bp-filter-tag-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #da2128;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bp-filter-tag-value {
  font-size: 11px;
  font-weight: 600;
  color: #1a1d35;
}
.bp-filter-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: #9098b0;
  padding: 0;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.bp-filter-tag-remove:hover { background: rgba(218, 33, 40, 0.12); color: #da2128;
}

.bp-alert-overlay {
  position: fixed;
  inset: 0;
  /* Topmost interactive layer — alerts must render above every modal,
     popup, picker, etc. Matches BaseToast (9999) so notifications and
     alerts share the same "always on top" tier. */
  z-index: 9999;
  background: rgba(0, 0, 0, 0.45);
}
.bp-alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  width: 480px;
  min-width: 360px;
  max-width: 95vw;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.bp-alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #1a1d35;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  gap: 12px;
  flex-shrink: 0;
  height: 40px;
}
.bp-alert-header:active { cursor: grabbing;
}
.bp-alert-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.bp-alert-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.bp-alert-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-alert-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.bp-alert-close:hover { background: rgba(255, 255, 255, 0.22);
}

/* ── Content ── */
.bp-alert-content {
  display: flex;
  flex-direction: row;
  min-height: 135px;
  flex: 1;
}
.bp-alert-type-panel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 68px;
  padding-top: 20px;
  flex-shrink: 0;
}
.bp-alert-body {
  flex: 1;
  padding: 20px;
  font-size: 13.5px;
  color: #1a1d35;
  line-height: 1.65;
  word-break: break-word;
  overflow-y: auto;
}

/* ── Footer ── */
.bp-alert-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid #e4e7f0;
  background: #f8f9fc;
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 480px) {
.bp-alert { width: 95vw; min-width: 0;
}
.bp-alert-footer { flex-direction: column-reverse; align-items: stretch;
}
.bp-alert-footer .bp-btn { width: 100%; justify-content: center;
}
}

.bp-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  width: 340px;
  max-width: calc(100vw - 40px);
  pointer-events: none;
}
.bp-toast-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.bp-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 14px 14px;
  background: #fff;
  border-radius: 10px;
  border-left: 4px solid;
  box-shadow: 0 4px 20px rgba(25, 26, 55, 0.13);
  pointer-events: all;
  min-height: 52px;
  width: 100%;
  box-sizing: border-box;
}
.bp-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
}
.bp-toast-message {
  flex: 1;
  font-size: 13.5px;
  color: #1a1d35;
  line-height: 1.5;
  margin: 0;
  word-break: break-word;
}
.bp-toast-close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: #6b7280;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.bp-toast-close:hover {
  background: rgba(0, 0, 0, 0.12);
  color: #1a1d35;
}

/* ── Transition animations ── */
.bp-toast-enter-active {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-toast-leave-active {
  transition: all 0.25s ease-in;
  position: absolute;
  right: 0;
  left: 0;
}
.bp-toast-enter-from {
  opacity: 0;
  transform: translateX(110%);
}
.bp-toast-leave-to {
  opacity: 0;
  transform: translateX(110%);
}
.bp-toast-move {
  transition: transform 0.22s ease;
}

/* ── Responsive ── */
@media (max-width: 480px) {
.bp-toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: 100%;
}
}

/* ── BaseLoader overlay ── */
/* Full-viewport dimmer that blocks all interaction while any load is
   active. z-index sits above BaseToast (9999) so a loader triggered
   from within a toast-heavy screen still lands on top. */
.bp-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 40, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.bp-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 26px 34px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 17, 40, 0.22);
  min-width: 200px;
  max-width: min(80vw, 420px);
}

/* Ring spinner — same `bp-spin` keyframe used by BaseButton so the
   whole app shares a single spin animation. Colour is the brand red
   (#da2128) to stay on-tone with primary actions and the required-
   field indicator. */
.bp-loader-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(218, 33, 40, 0.18);
  border-top-color: #da2128;
  border-radius: 50%;
  animation: bp-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.bp-loader-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1d35;
  text-align: center;
  line-height: 1.5;
  word-break: break-word;
  min-height: 20px;
}

/* Enter/leave — quick fade so the overlay never feels heavy. Card
   also scales in slightly to give a subtle "arriving" cue. */
.bp-loader-enter-active,
.bp-loader-leave-active {
  transition: opacity 0.18s ease;
}
.bp-loader-enter-active .bp-loader-card,
.bp-loader-leave-active .bp-loader-card {
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.bp-loader-enter-from,
.bp-loader-leave-to {
  opacity: 0;
}
.bp-loader-enter-from .bp-loader-card,
.bp-loader-leave-to .bp-loader-card {
  opacity: 0;
  transform: scale(0.94);
}

/* Mobile — tighten the card so it fits comfortably on narrow screens. */
@media (max-width: 480px) {
.bp-loader-card {
    padding: 20px 24px;
    min-width: 160px;
    max-width: calc(100vw - 32px);
}
.bp-loader-spinner {
    width: 38px;
    height: 38px;
    border-width: 3px;
}
}

/* ── Overlay ── */
.bp-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 16px;
}

/* ── Dialog ── */
.bp-popup-dialog {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(15, 17, 40, 0.22);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.bp-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 15px;
  border-bottom: 1px solid #d0d4e4;
  gap: 12px;
}
.bp-popup-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1d35;
  line-height: 1.3;
}
.bp-popup-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  color: #4e5a82;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-popup-close:hover {
  background: #eeeef5;
  color: #1a1d35;
}

/* ── Body ── */
.bp-popup-body {
  padding: 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* ── Transition ── */
.bp-popup-fade-enter-active,
.bp-popup-fade-leave-active {
  transition: opacity 0.2s ease;
}
.bp-popup-fade-enter-active .bp-popup-dialog,
.bp-popup-fade-leave-active .bp-popup-dialog {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.bp-popup-fade-enter-from,
.bp-popup-fade-leave-to {
  opacity: 0;
}
.bp-popup-fade-enter-from .bp-popup-dialog,
.bp-popup-fade-leave-to .bp-popup-dialog {
  transform: scale(0.96) translateY(-8px);
  opacity: 0;
}

/* ── Mobile ── */
@media (max-width: 480px) {
.bp-popup-dialog { border-radius: 10px;
}
.bp-popup-body   { padding: 16px;
}
}

/* ── Container (multi-mode) ── */
.bp-search-multi.p-autocomplete {
  display: block;
  width: 100%;
}
.bp-search-multi-wrap {
  position: relative;
  width: 100%;
}
.bp-search-multi-icon {
  position: absolute;
  right: 12px;
  top: 14px;
  color: #6b7db8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.bp-search-multi .p-autocomplete-input-multiple {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 36px 8px 12px;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  background: #fff;
  min-height: 44px;
  /* Cap chip-area height so the popup doesn't grow indefinitely when many users are added */
  max-height: 120px;
  overflow-y: auto;
  width: 100%;
  cursor: text;
  list-style: none;
  margin: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* When tagsPosition='below', suppress chips inside the input — they render in the list below */
.bp-search-multi--tags-below .p-autocomplete-chip-item {
  display: none !important;
}
.bp-search-multi--error .p-autocomplete-input-multiple {
  border-color: #b91c1c;
}
.bp-search-multi .p-autocomplete-input-multiple:focus-within {
  border-color: #5b6af0;
  box-shadow: 0 0 0 3px rgba(91, 106, 240, 0.12);
  outline: none;
}

/* ── Input slot (the typing area) ── */
/* flex-basis 100% forces the input onto its own row so "Add more" sits below the chips */
.bp-search-multi .p-autocomplete-input-chip {
  flex: 1 1 100%;
  min-width: 100%;
  padding: 0;
  list-style: none;
}
.bp-search-multi .p-autocomplete-input-chip input,
.bp-search-multi .p-autocomplete-input-multiple input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13.5px;
  color: #1a1d35;
  width: 100%;
  padding: 4px 2px;
}
.bp-search-multi .p-autocomplete-input-chip input::-moz-placeholder, .bp-search-multi .p-autocomplete-input-multiple input::-moz-placeholder {
  color: #6b7db8;
}
.bp-search-multi .p-autocomplete-input-chip input::placeholder,
.bp-search-multi .p-autocomplete-input-multiple input::placeholder {
  color: #6b7db8;
}

/* ── Chips (PrimeVue chip token) ── */
.bp-search-multi .p-autocomplete-chip {
  background: #eef2ff !important;
  border: 1px solid #d1d9f3 !important;
  border-radius: 999px !important;
  padding: 2px 4px 2px 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  color: #1a1d35 !important;
  list-style: none !important;
}
.bp-search-multi .p-autocomplete-chip:hover {
  background: #e0e7ff !important;
  border-color: #b8c4ee !important;
}

/* Hide PrimeVue's default × icon when using our custom slot button */
.bp-search-multi .p-autocomplete-chip-icon { display: none !important;
}

/* ── Chip content (custom slot) ── */
.bp-search-multi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bp-search-multi-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #4e5a82;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  transition: background 0.15s, color 0.15s;
}
.bp-search-multi-chip-remove:hover {
  background: #da2128;
  color: #fff;
}
.bp-search-multi-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.bp-search-multi-chip-label {
  font-size: 13px;
  color: #1a1d35;
  line-height: 1.2;
}

/* ── Loader ──
   Push OUT of the input on the right (mirrors BaseSearchSelect's loader
   placement in `.bp-search-single .p-autocomplete-loader`). PrimeVue's
   default for multi-mode drops the loader inside the input on the LEFT
   where it overlaps typed text; the negative `right` moves it to the
   gap between this field and the next form control, 2px clearance from
   the input's right border. `top: 50%` + `margin-top: -9px` centres it
   vertically regardless of chip-row growth. `!important` overrides
   PrimeVue's own logical-property positioning (inset-inline-start).
   Colour: brand red matches BaseLoader / BaseButton spinners for a
   coherent "work-in-progress" indicator across the app. */
.bp-search-multi .p-autocomplete-loader {
  left: auto !important;
  right: -19px !important;
  inset-inline-start: auto !important;
  inset-inline-end: -19px !important;
  top: 50% !important;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: #da2128;
}

/* ── Overlay panel ── */
.p-autocomplete-overlay {
  /* PrimeVue 4 theme variables don't resolve consistently — force opaque surface */
  background: #fff !important;
  border: 1px solid #d1d5e8 !important;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 17, 40, 0.12) !important;
  margin-top: 4px;
  padding: 8px 4px;
  max-height: 280px;
  overflow-y: auto;
  /* PrimeVue applies z-index inline (default ~1000); override to sit above BasePopup at 1100 */
  z-index: 1300 !important;
}
.p-autocomplete-list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.p-autocomplete-option {
  padding: 8px 10px !important;
  border-radius: 6px !important;
  cursor: pointer;
  font-size: 13.5px;
  color: #1a1d35 !important;
  list-style: none;
}
.p-autocomplete-option:hover,
.p-autocomplete-option.p-autocomplete-option-focus,
.p-autocomplete-option.p-focus {
  background: #eef2ff !important;
  color: #1a1d35 !important;
}
.bp-search-multi-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bp-search-multi-opt-text { min-width: 0;
}
.bp-search-multi-opt-name {
  font-size: 13.5px;
  color: #1a1d35;
  font-weight: 500;
  line-height: 1.25;
}
.bp-search-multi-opt-sub {
  font-size: 11.5px;
  color: #6b7db8;
  line-height: 1.25;
  margin-top: 1px;
}
.bp-search-multi-empty {
  padding: 12px;
  font-size: 13px;
  color: #6b7db8;
  text-align: center;
}

/* ── Below-mode pill chips (tagsPosition='below') ── */
.bp-search-multi-below {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding: 2px;
}
.bp-search-multi-below-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef2ff;
  border: 1px solid #d1d9f3;
  border-radius: 999px;
  padding: 4px 4px 4px 12px;
  font-size: 13px;
  color: #1a1d35;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s;
}
.bp-search-multi-below-chip:hover {
  background: #e0e7ff;
  border-color: #b8c4ee;
}
.bp-search-multi-below-label {
  white-space: nowrap;
}
.bp-search-multi-below-remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #4e5a82;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-search-multi-below-remove:hover {
  background: #da2128;
  color: #fff;
}

.bp-search-single-wrap {
  position: relative;
  width: 100%;
}
.bp-search-single.p-autocomplete {
  display: block;
  width: 100%;
}
.bp-search-single .p-autocomplete-input {
  /* Fixed 34px height (border-box) — kept in lockstep with BaseInput
     and BaseSelect so mixed form rows align on the baseline. Right
     padding (32px) preserves clearance for the clear-× / search-icon
     that render absolutely-positioned inside .bp-search-single-wrap. */
  height: 34px;
  box-sizing: border-box;
  width: 100%;
  padding: 0 32px 0 12px;
  font-size: 13.5px;
  color: #1a1d35;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.bp-search-single .p-autocomplete-input::-moz-placeholder {
  color: #6b7db8;
}
.bp-search-single .p-autocomplete-input::placeholder {
  color: #6b7db8;
}
.bp-search-single .p-autocomplete-input:focus {
  border-color: #5b6af0;
  box-shadow: 0 0 0 3px rgba(91, 106, 240, 0.12);
}
.bp-search-single--error .p-autocomplete-input {
  border-color: #b91c1c;
}
.bp-search-single-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #4e5a82;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-search-single-clear:hover {
  background: #da2128;
  color: #fff;
}
.bp-search-single-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7db8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.bp-search-single-create {
  padding: 6px 4px;
}
.bp-search-single-create-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5b6af0;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.bp-search-single-create-link:hover {
  background: #eef0ff;
  color: #3b48d0;
}

/* PrimeVue AutoComplete's built-in loader (SpinnerIcon rendered when
   the :loading prop is true).

   Position: PrimeVue's default (`inset-inline-end:
   dt('autocomplete.padding.x')`) places the loader inside the input,
   where it overlaps the custom Q search icon we render at right: 10px.
   A negative `right` pushes the loader OUT of the input entirely so it
   sits in the gap between this field and the next form control, with a
   2px clearance from the input's right border. Width 18px + right -20px
   → loader left edge at (container_right + 2px).

   Size: the SpinnerIcon SVG is a filled ring path, so its visible stroke
   thickness scales with icon size. `.p-icon`'s default (`dt('icon.size')`)
   can render the arc quite thin — pinning to 18px keeps it visually
   consistent with the rest of the app's loading indicators.

   Colour: SpinnerIcon fills its path with `fill="currentColor"`, so
   setting `color` on the loader element switches it to brand red
   (#da2128) — the same shade used by BaseLoader's page-level ring and
   BaseButton's :loading spinner. Keeps every "work-in-progress"
   indicator on one colour. */
.bp-search-single .p-autocomplete-loader {
  right: -19px;
  inset-inline-end: -19px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: #da2128;
}

.bp-skills-picker { position: relative; width: 100%;
}

/* ── Trigger button ────────────────────────────────────────────────────── */
.bp-skills-picker-trigger {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px 0 10px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
.bp-skills-picker-trigger:hover                  { border-color: #a0a1ab;
}
.bp-skills-picker-trigger--open                  { border-color: #a0a1ab;
}
.bp-skills-picker-trigger-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bp-skills-picker-trigger-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #6b7db8;
}
.bp-skills-picker-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9098b0;
}
.bp-skills-picker-trigger-label--filled { color: #1a1d35; font-weight: 600;
}
.bp-skills-picker-clear {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #9098b0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.bp-skills-picker-clear:hover { color: #da2128;
}

/* ── tagsPosition='below' chips ─────────────────────────────────────────── */
.bp-skills-picker-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  max-height: 120px;
  overflow-y: auto;
}
.bp-skills-picker-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 10px;
  background: rgba(218, 33, 40, 0.08);
  color: #da2128;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.bp-skills-picker-tag-remove {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #da2128;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.bp-skills-picker-tag-remove:hover {
  background: #da2128;
  color: #fff;
}

/* ── Modal overlay ─────────────────────────────────────────────────────── */
.bp-skills-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bp-skills-picker-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15, 17, 40, 0.25);
  width: 100%;
  max-width: 800px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.bp-skills-picker-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f1f6;
}
.bp-skills-picker-modal-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #9098b0;
}
.bp-skills-picker-modal-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1d35;
  margin-top: 2px;
}
.bp-skills-picker-modal-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #9098b0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-skills-picker-modal-close:hover { background: #f5f6fb; color: #1a1d35;
}

/* ── Proficiency note ──────────────────────────────────────────────────── */
.bp-skills-picker-modal-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 20px;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
  font-size: 11px;
  line-height: 1.4;
}
.bp-skills-picker-modal-note svg { flex-shrink: 0; margin-top: 1px; color: #f59e0b;
}
.bp-skills-picker-modal-note p { margin: 0;
}

/* ── Body ──────────────────────────────────────────────────────────────── */
.bp-skills-picker-modal-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  flex: 1;
  overflow: hidden;
}
.bp-skills-picker-pane { display: flex; flex-direction: column; overflow: hidden;
}
.bp-skills-picker-pane--left  { border-right: 1px solid #f1f1f6;
}
.bp-skills-picker-pane--right { padding: 12px; background: #fafafd; overflow-y: auto;
}
@media (max-width: 640px) {
.bp-skills-picker-modal-body { grid-template-columns: 1fr;
}
.bp-skills-picker-pane--left { border-right: none; border-bottom: 1px solid #f1f1f6; max-height: 50%;
}
}

/* Search row */
.bp-skills-picker-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #f1f1f6;
}
.bp-skills-picker-search-row svg { color: #9098b0; flex-shrink: 0;
}
.bp-skills-picker-search-input {
  flex: 1;
  height: 28px;
  font-size: 12.5px;
  color: #1a1d35;
  background: transparent;
  border: 0;
  outline: none;
  font-family: inherit;
}
.bp-skills-picker-search-input::-moz-placeholder { color: #9098b0;
}
.bp-skills-picker-search-input::placeholder { color: #9098b0;
}
.bp-skills-picker-search-clear {
  font-size: 11px;
  color: #9098b0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.bp-skills-picker-search-clear:hover { color: #1a1d35;
}

/* Tree */
.bp-skills-picker-tree {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  font-size: 12.5px;
}
.bp-skills-picker-empty {
  padding: 24px 12px;
  text-align: center;
  font-size: 11.5px;
  color: #9098b0;
}
.bp-skills-picker-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.bp-skills-picker-row--domain   { cursor: pointer;
}
.bp-skills-picker-row--category { cursor: pointer; padding-left: 28px;
}
.bp-skills-picker-row--group    { padding-left: 48px; padding-top: 2px; padding-bottom: 2px;
}
.bp-skills-picker-row--skill    { cursor: pointer; padding-left: 84px; padding-top: 2px; padding-bottom: 2px;
}
.bp-skills-picker-row:hover     { background: #fafafd;
}
.bp-skills-picker-caret {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9098b0;
  flex-shrink: 0;
}
.bp-skills-picker-caret-btn { background: transparent; border: 0; cursor: pointer; padding: 0;
}
.bp-skills-picker-caret-svg { width: 10px; height: 10px; transition: transform 0.15s;
}
.bp-skills-picker-caret-svg--open { transform: rotate(90deg);
}
.bp-skills-picker-domain-label   { font-weight: 600; color: #1a1d35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-category-label { font-weight: 500; color: #4e5a82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-group-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.bp-skills-picker-group-label { font-weight: 600; color: #4e5a82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-skill-label { color: #4e5a82; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-checkbox {
  width: 14px;
  height: 14px;
  border: 1px solid #c0c1cb;
  border-radius: 3px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.bp-skills-picker-checkbox--all     { background: #da2128; border-color: #da2128;
}
.bp-skills-picker-checkbox--partial { background: #f0a0a3; border-color: #f0a0a3;
}

/* Right pane — selected list */
.bp-skills-picker-pane-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #4e5a82;
  margin-bottom: 8px;
}
.bp-skills-picker-pane-empty {
  font-size: 11.5px;
  color: #9098b0;
  font-style: italic;
  text-align: center;
  padding: 16px 0;
}
.bp-skills-picker-selected-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
}
.bp-skills-picker-selected-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e4e7f0;
  border-radius: 6px;
  font-size: 12px;
}
.bp-skills-picker-selected-text { flex: 1; min-width: 0;
}
.bp-skills-picker-selected-name {
  color: #1a1d35;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-skills-picker-selected-meta {
  color: #9098b0;
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-skills-picker-selected-remove {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 0;
  color: #9098b0;
  cursor: pointer;
  flex-shrink: 0;
}
.bp-skills-picker-selected-remove:hover { color: #da2128;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.bp-skills-picker-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid #f1f1f6;
  background: #fafafd;
}
.bp-skills-picker-footer-clear {
  font-size: 12px;
  color: #9098b0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.bp-skills-picker-footer-clear:hover { color: #da2128;
}
.bp-skills-picker-footer-cancel {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  color: #4e5a82;
  background: #fff;
  border: 1px solid #e4e7f0;
  border-radius: 6px;
  cursor: pointer;
}
.bp-skills-picker-footer-cancel:hover { background: #fafafd;
}
.bp-skills-picker-footer-apply {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  color: #fff;
  background: #0d1526;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.bp-skills-picker-footer-apply:hover { background: #1e2d45;
}

/* Transition */
.bp-skills-picker-fade-enter-active,
.bp-skills-picker-fade-leave-active { transition: opacity 0.15s ease;
}
.bp-skills-picker-fade-enter-from,
.bp-skills-picker-fade-leave-to     { opacity: 0;
}

/* ── Full-screen container ───────────────────────────────────────── */
/* Class name kept as .mai-drawer to minimise churn across children —
   the layout has changed from a right-side drawer to a full-height,
   full-width panel that fills the shell's <main>. */
.mai-drawer[data-v-3bf16fa4] {
  /* FIXED height (not min-height) so the panel is bounded by the
     viewport. This is what makes the messages area scroll internally
     while the header stays pinned at top and the composer stays
     pinned at bottom. Using min-height instead lets the panel grow
     past the viewport when messages accumulate — the whole page then
     scrolls, and the composer disappears above the fold.
     `100dvh - 120px` = dynamic viewport height minus the shell chrome
     (topnav + footer, with headroom so a slightly taller topnav never
     overflows and triggers an outer browser scrollbar). `dvh` beats
     `vh` on mobile where the URL bar collapse/expand would otherwise
     shift the panel. COLUMN-flex: header slab on top, then
     .mai-drawer__body (sidebar + main) below. Was row-flex with the
     header indented inside the main column; lifting the header makes
     it span edge-to-edge like the dealsheet page header. */
  height: calc(100dvh - 112px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #1a1d35;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;  /* belt-and-braces — no scroll on the panel itself */
}

/* Body row — owns the horizontal split that .mai-drawer used to do.
   Sits BELOW the full-width header; hosts the sidebar + main column.
   Soft grey backdrop so the rounded card around .mai-drawer__main
   reads as a floating panel against the page. */
.mai-drawer__body[data-v-3bf16fa4] {
  flex: 1;
  min-height: 0;     /* required so flex children with overflow can clamp */
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: #f3f5fa;
}

/* Main column — wraps consent + messages + composer. Rendered as a
   rounded white card with margin + border + shadow so it sits inside
   the body's grey backdrop as a floating panel. The header no longer
   lives inside this column (it is a sibling of .mai-drawer__body
   under the top-level .mai-drawer). */
.mai-drawer__main[data-v-3bf16fa4] {
  flex: 1;
  min-width: 0;   /* required so the flex child can shrink; without this
                     wide message content pushes the panel past its bounds */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 16px;
  background: #ffffff;
  border: 1px solid #e2e5f0;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(20, 26, 60, 0.06);
}
@media (max-width: 640px) {
.mai-drawer__main[data-v-3bf16fa4] {
    margin: 8px;
    border-radius: 12px;
}
}

/* ── Sidebar ─────────────────────────────────────────────────────
   Fixed 280px expanded, 0px collapsed (fully hidden). Collapse is
   animated via width transition so the main column re-flows smoothly.
   Border on the trailing edge separates it from the main column;
   subtle background so the divide reads without a heavy border. */
.mai-sidebar[data-v-3bf16fa4] {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #f9fafb;
  border-right: 1px solid #edeff6;
  transition: width 180ms ease, border-right-color 180ms ease;
  overflow: hidden;
  /* Sidebar reads at 14px so conversation titles, bucket labels, and
     the New Chat button share one type scale — child rules inherit
     unless they explicitly override (e.g. the small bucket header). */
  font-size: 14px;
}
/* Collapsed state — sidebar stays visible as a slim strip (56px) so
   the "+" New Chat button remains reachable. Conversation list and
   section labels hide via child rules below; the button loses its
   label but keeps its icon. Was `width: 0` (fully hidden) before —
   that meant the ONLY way to start a new chat while collapsed was to
   expand first, awkward for a two-click workflow. */
.mai-drawer--sidebar-collapsed .mai-sidebar[data-v-3bf16fa4] {
  width: 56px;
}
.mai-drawer--rtl .mai-sidebar[data-v-3bf16fa4] {
  border-right: none;
  border-left: 1px solid #edeff6;
}
.mai-sidebar__top[data-v-3bf16fa4] {
  padding: 12px 8px;
  border-bottom: 1px solid #edeff6;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* Expanded state: push the toggle to the inner edge of the sidebar
     (right in LTR, left in RTL — flex-end respects writing direction
     automatically). Collapsed state overrides this to centre on the
     narrow 56px strip. */
  justify-content: flex-end;
}
.mai-drawer--sidebar-collapsed .mai-sidebar__top[data-v-3bf16fa4] {
  justify-content: center;
}
/* Sidebar toggle (hamburger) — hosts the collapse/expand action in the
   same slot the "+ New Chat" button used to occupy. 40x40 square so it
   has visual weight in the 280px expanded sidebar AND fits cleanly in
   the 56px collapsed strip (where it is the ONLY visible control and
   the only way to re-expand). Indigo accent matches the rest of the
   MAI brand palette. */
.mai-sidebar__toggle[data-v-3bf16fa4] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #ffffff;
  color: #4b5eb8;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  flex-shrink: 0;
}
.mai-sidebar__toggle[data-v-3bf16fa4]:hover {
  background: #eef2ff;
  border-color: #b8c4ee;
  color: #3441a0;
}
/* RTL: the sidebar sits on the right, so the chevron that points
   "away from the panel" needs to flip horizontally. Mirrors the SVG. */
[data-v-3bf16fa4] [dir="rtl"] .mai-sidebar__toggle svg,
[dir="rtl"] .mai-sidebar__toggle svg[data-v-3bf16fa4] {
  transform: scaleX(-1);
}
.mai-drawer--sidebar-collapsed .mai-sidebar__top[data-v-3bf16fa4] {
  padding: 12px 6px;
}
/* Hide the list + empty + error strips when collapsed — the sidebar
   is icon-only in this state. Users click the toggle (still visible in
   the sidebar top) to re-expand and see history. */
.mai-drawer--sidebar-collapsed .mai-sidebar__scroll[data-v-3bf16fa4],
.mai-drawer--sidebar-collapsed .mai-sidebar__empty[data-v-3bf16fa4],
.mai-drawer--sidebar-collapsed .mai-sidebar__error[data-v-3bf16fa4] {
  display: none;
}
.mai-sidebar__scroll[data-v-3bf16fa4] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 4px 12px;
}
.mai-sidebar__bucket[data-v-3bf16fa4] {
  margin-top: 8px;
}
.mai-sidebar__bucket[data-v-3bf16fa4]:first-child {
  margin-top: 0;
}
.mai-sidebar__bucket-label[data-v-3bf16fa4] {
  padding: 6px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #9098b0;
}
.mai-sidebar__list[data-v-3bf16fa4] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mai-sidebar__item[data-v-3bf16fa4] {
  padding: 0 4px;
}
.mai-sidebar__item-btn[data-v-3bf16fa4] {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #1a1d35;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mai-sidebar__item-btn[data-v-3bf16fa4]:hover {
  background: #eef2ff;
}
.mai-sidebar__item--active .mai-sidebar__item-btn[data-v-3bf16fa4] {
  background: #e0e7ff;
  color: #4b5eb8;
  font-weight: 600;
}
.mai-sidebar__item-title[data-v-3bf16fa4] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mai-sidebar__empty[data-v-3bf16fa4],
.mai-sidebar__error[data-v-3bf16fa4] {
  padding: 12px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}
.mai-sidebar__error[data-v-3bf16fa4] {
  color: #b91c1c;
}
.mai-drawer--rtl[data-v-3bf16fa4] { direction: rtl;
}

/* Header right action — "+ New Chat". Red primary brand tone comes from
   .mai-btn.mai-btn--primary; this rule just handles the layout bits
   (icon + label alignment, tighter padding than the composer Send
   button so the header stays visually proportionate). flex-shrink:0
   so a very long title/subtitle on the left never squeezes the CTA. */
.mai-header__newchat[data-v-3bf16fa4] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 36px;
  font-size: 13px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Header ──────────────────────────────────────────────────────── */
.mai-drawer__header[data-v-3bf16fa4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  /* Deeper background + subtle shadow so the header reads as a
     distinct slab above the conversation. The old #f8fafd was so
     close to white that the border alone had to do all the visual
     lifting; the new tone gives a clearer top/body separation with
     the shell's own topnav. */
  background: #eef1f8;
  border-bottom: 1px solid #d8dcea;
  box-shadow: 0 2px 4px rgba(15, 17, 40, 0.04);
  /* Sit above the messages area so the shadow paints on top of any
     content that happens to be at the very top of the scroll. */
  position: relative;
  z-index: 1;
}
/* Identity cluster: hamburger + icon-box + stacked text. Same shape as
   the dealsheet page-header (dsv-header-identity / dsv-icon-box /
   dsv-header-text) so modules read with a consistent top-left block —
   just swapping red for MAI's indigo accent and the document glyph for
   the sparkles glyph. gap:14px matches dealsheet's spacing. */
.mai-drawer__identity[data-v-3bf16fa4] {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
/* Icon tile — 48x48 rounded square with the same red tint the
   dealsheet page header uses (#fff0f0 bg + #da2128 glyph), so every
   module's top-left identity reads with one consistent visual
   language. The glyph differs (sparkles vs. document) so the module
   is still recognisable at a glance. */
.mai-icon-box[data-v-3bf16fa4] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mai-drawer__text[data-v-3bf16fa4] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* Title — bumped from the previous 14px inline label to 20px to match
   the dealsheet page header. The chat drawer's inner typography stays
   13-14px; this header is explicitly the page/section identity so it
   takes the heavier type. */
.mai-drawer__title[data-v-3bf16fa4] {
  font-size: 20px;
  font-weight: 700;
  color: #1a1d35;
  margin: 0;
  letter-spacing: 0.2px;
}
.mai-drawer__subtitle[data-v-3bf16fa4] {
  font-size: 13px;
  color: #6b7db8;
  margin: 0;
}
.mai-drawer__header-actions[data-v-3bf16fa4] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mai-linkbtn[data-v-3bf16fa4] {
  background: none;
  border: none;
  padding: 4px 6px;
  color: #4b5eb8;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
}
.mai-linkbtn[data-v-3bf16fa4]:hover:not(:disabled) { background: #edefff;
}
.mai-linkbtn[data-v-3bf16fa4]:disabled { color: #a5adc8; cursor: not-allowed;
}
.mai-iconbtn[data-v-3bf16fa4] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #4e5a82;
  border-radius: 6px;
  cursor: pointer;
}
.mai-iconbtn[data-v-3bf16fa4]:hover { background: #edeff6; color: #1a1d35;
}

/* Back button — replaces the drawer's close button in the header. */
.mai-backbtn[data-v-3bf16fa4] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #d6dae8;
  border-radius: 8px;
  background: #ffffff;
  color: #1a1d35;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-inline-end: 8px;
}
.mai-backbtn[data-v-3bf16fa4]:hover { background: #edeff6; border-color: #a5adc8;
}
.mai-backbtn__label[data-v-3bf16fa4] { line-height: 1;
}
@media (max-width: 480px) {
.mai-backbtn__label[data-v-3bf16fa4] { display: none;
}
.mai-backbtn[data-v-3bf16fa4] { padding: 6px 8px;
}
}

/* ── Consent banner ──────────────────────────────────────────────── */
.mai-consent[data-v-3bf16fa4] {
  margin: 12px;
  padding: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  color: #7c2d12;
}
.mai-consent__heading[data-v-3bf16fa4] {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
}
.mai-consent__body[data-v-3bf16fa4] {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
}
.mai-consent__actions[data-v-3bf16fa4] { display: flex; justify-content: flex-end;
}

/* ── Messages ────────────────────────────────────────────────────── */
.mai-messages[data-v-3bf16fa4] {
  flex: 1;
  /* min-height: 0 is REQUIRED for a flex child that also has overflow.
     Without it, browsers use the intrinsic content min-height (which
     grows with message count) and `overflow-y: auto` never actually
     clamps — the child pushes past the flex parent, taking the pinned
     composer with it. This is the single most-common footgun with
     "sticky bottom bar in a flex column" layouts. */
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* ── Empty state (welcome + module showcase) ─────────────────────
   Shown when the panel has no messages yet (fresh chat or a cleared
   conversation). Advertises the three modules MAI can answer across
   with example prompts to help the user get started. */
.mai-empty[data-v-3bf16fa4] {
  margin: auto 0;
  padding: 24px 20px 32px;
  color: #4e5a82;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Hero */
.mai-empty__hero[data-v-3bf16fa4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 560px;
}
.mai-empty__hero-icon[data-v-3bf16fa4] {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #6366f1 0%, #4b5eb8 50%, #8b5cf6 100%);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.28);
}
.mai-empty__hero-title[data-v-3bf16fa4] {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1a1d35;
  letter-spacing: -0.01em;
}
.mai-empty__hero-subtitle[data-v-3bf16fa4] {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #4e5a82;
  max-width: 520px;
}

/* Module cards grid */
.mai-empty__cards[data-v-3bf16fa4] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 920px;
}
@media (max-width: 820px) {
.mai-empty__cards[data-v-3bf16fa4] { grid-template-columns: 1fr;
}
}
.mai-empty__card[data-v-3bf16fa4] {
  position: relative;
  padding: 18px 16px 16px;
  border-radius: 14px;
  text-align: start;
  background: #ffffff;
  border: 1px solid var(--card-border, #e2e5f0);
  box-shadow: 0 2px 8px rgba(20, 26, 60, 0.04);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.mai-empty__card[data-v-3bf16fa4]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent, #4b5eb8);
}
.mai-empty__card[data-v-3bf16fa4]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20, 26, 60, 0.08);
  border-color: var(--card-accent, #4b5eb8);
}

/* Per-module accent colours. Variables let hover / top-stripe pick up
   the right shade without duplicating selectors. */
.mai-empty__card--dealsheet[data-v-3bf16fa4] { --card-accent: #4b5eb8; --card-tint: #eef2ff; --card-border: #dde3f5;
}
.mai-empty__card--forecast[data-v-3bf16fa4]  { --card-accent: #8b5cf6; --card-tint: #f3eefe; --card-border: #e4daf9;
}
.mai-empty__card--skills[data-v-3bf16fa4]    { --card-accent: #10b981; --card-tint: #ecfdf5; --card-border: #bbf7d0;
}
.mai-empty__card-icon[data-v-3bf16fa4] {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--card-accent);
  background: var(--card-tint);
  border-radius: 10px;
}
.mai-empty__card-title[data-v-3bf16fa4] {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1a1d35;
}
.mai-empty__card-body[data-v-3bf16fa4] {
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #5a6481;
}
.mai-empty__card-prompts[data-v-3bf16fa4] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.mai-empty__prompt[data-v-3bf16fa4] {
  display: block;
  width: 100%;
  text-align: start;
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #2f3a68;
  background: var(--card-tint);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.mai-empty__prompt[data-v-3bf16fa4]:hover {
  background: #ffffff;
  border-color: var(--card-accent);
  color: var(--card-accent);
}
.mai-empty__prompt[data-v-3bf16fa4]:focus-visible {
  outline: 2px solid var(--card-accent);
  outline-offset: 2px;
}
.mai-empty__footer-hint[data-v-3bf16fa4] {
  font-size: 12px;
  color: #8690a8;
  max-width: 520px;
}
.mai-msg[data-v-3bf16fa4] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.mai-msg--user[data-v-3bf16fa4] {
  align-self: flex-end;
  max-width: 88%;
  background: #4b5eb8;
  color: #fff;
}
.mai-msg--user .mai-msg__meta[data-v-3bf16fa4] { color: rgba(255,255,255,0.75);
}
.mai-msg--assistant[data-v-3bf16fa4] {
  align-self: flex-start;
  max-width: 92%;
  background: #f4f5fb;
  color: #1a1d35;
}
.mai-msg--error[data-v-3bf16fa4] { background: #fee2e2; color: #7f1d1d;
}
.mai-msg__meta[data-v-3bf16fa4] {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.mai-msg__body em[data-v-3bf16fa4] { color: #6b7280; font-style: italic;
}
.mai-msg__error[data-v-3bf16fa4]   { color: #b91c1c;
}
.mai-caret[data-v-3bf16fa4] {
  display: inline-block;
  animation: mai-blink-3bf16fa4 1.1s steps(2, start) infinite;
  margin-left: 2px;
  color: #4b5eb8;
  font-weight: 700;
}
@keyframes mai-blink-3bf16fa4 {
to { visibility: hidden;
}
}

/* ── Rendered markdown (post-stream) ─────────────────────────────────
   `.mai-md` wraps the v-html output of renderMarkdown(). Uses :deep()
   because v-html's DOM is generated at runtime and scoped-CSS class
   selectors don't attach to those nodes. Kept minimal: only elements
   marked produces (tables / lists / code / links / headings / p) get
   opinionated styles. Everything else inherits the surrounding
   `.mai-msg` typography. */
.mai-md[data-v-3bf16fa4] {
  /* User-set 16px baseline so the panel reads at document body size
     rather than the tighter 13-14px the chat bubble inherits. Applied
     at the .mai-md wrapper so it cascades to every child (paragraphs,
     lists, tables, headings) — override individual elements below only
     when a smaller/larger size makes semantic sense. */
  font-size: 16px;
  line-height: 1.5;
  /* CRITICAL: parent .mai-msg sets `white-space: pre-wrap` so plain
     user / streaming text preserves newlines. But marked's HTML output
     also contains newlines between block elements (`</p>\n<ul>\n<li>…`)
     — under pre-wrap those newlines render as extra literal line
     breaks and produce a full line-height of dead space between every
     block, which no margin tweak can defeat. Reset to `normal` here
     so the block-margin CSS below actually controls the spacing. */
  white-space: normal;
}
.mai-md[data-v-3bf16fa4] p {
  /* Roughly half a line of breathing room top and bottom — matches how
     claude.ai spaces consecutive paragraphs in its own chat surface.
     Was 0.2em (too tight, paragraphs ran into each other); the earlier
     visual bloat that pushed us to shrink came from the parent's
     white-space: pre-wrap leaking newlines through — that's now fixed
     on the .mai-md wrapper above, so we can size margins for the
     rendered output rather than fighting the browser. */
  margin: 0.65em 0;
}
.mai-md[data-v-3bf16fa4] p:first-child { margin-top: 0;
}
.mai-md[data-v-3bf16fa4] p:last-child  { margin-bottom: 0;
}
/* Empty paragraphs occasionally slip out of marked when the source has
   trailing whitespace / extra blank lines — collapse them so they
   don't inject a full line-height of dead space between real blocks. */
.mai-md[data-v-3bf16fa4] p:empty { display: none;
}
.mai-md[data-v-3bf16fa4] strong { font-weight: 600; color: #1a1d35;
}
.mai-md[data-v-3bf16fa4] em     { font-style: italic;
}
.mai-md[data-v-3bf16fa4] ul, .mai-md[data-v-3bf16fa4] ol {
  /* Same rhythm as paragraphs — the list block sits with a comfortable
     half-line of space above and below so the intro paragraph, the
     list, and the follow-up paragraph read as three distinct beats
     (claude.ai's own rendering as reference). */
  margin: 0.65em 0;
  padding-left: 1.4em;
  /* Explicit list-style so bullets always show. marked's default
     output relies on browser UA styles, and some CSS resets in
     shell contexts nuke them — force disc / decimal here. */
  list-style-position: outside;
}
.mai-md[data-v-3bf16fa4] ul { list-style-type: disc;
}
.mai-md[data-v-3bf16fa4] ol { list-style-type: decimal;
}
.mai-md[data-v-3bf16fa4] li {
  /* Each bullet/number gets a quarter-line of vertical padding so items
     are visually distinct without looking like separate paragraphs.
     claude.ai uses roughly this spacing — enough that a two-line item
     doesn't collide with its neighbours, tight enough that a five-item
     list still reads as one grouped block. */
  margin: 0.3em 0;
}
/* Loose-list fix: marked wraps every <li>'s content in <p> when the
   markdown source has blank lines between items. Without the rules
   below, each <li> stacks paragraph margins ON TOP OF list-item
   margins — the result is the airy 2-3 line-height gap between
   bullets the user saw in the "OSQ tab / assets or notes" example.
   Zeroing `li p` (not just `li > p`) also catches nested block
   quotes / multi-para list items, which the previous `li > p` rule
   missed. */
.mai-md[data-v-3bf16fa4] li p {
  margin: 0;
}
/* Paragraph ↔ list transitions use the same rhythm as paragraph ↔
   paragraph — CSS margin-collapse means adjacent 0.65em margins fold
   to a single 0.65em gap, so no override is needed for the common case.
   Left explicit here so a future edit doesn't accidentally reintroduce
   the pre-fix zero-collapse rule (which produced "no space at all"
   between the intro paragraph and the bulleted list). */
.mai-md[data-v-3bf16fa4] p + ul,
.mai-md[data-v-3bf16fa4] p + ol,
.mai-md[data-v-3bf16fa4] ul + p,
.mai-md[data-v-3bf16fa4] ol + p {
  margin-top: 0.65em;
}
/* List-then-list (rare — model chains bullets + numbers in one answer)
   keeps the same rhythm so consecutive lists don't fuse visually. */
.mai-md[data-v-3bf16fa4] ul + ul,
.mai-md[data-v-3bf16fa4] ol + ol,
.mai-md[data-v-3bf16fa4] ul + ol,
.mai-md[data-v-3bf16fa4] ol + ul {
  margin-top: 0.65em;
}
.mai-md[data-v-3bf16fa4] code {
  background: #f3f4f6;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #1a1d35;
}
.mai-md[data-v-3bf16fa4] pre {
  background: #f3f4f6;
  padding: 10px 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.7em 0;
  font-size: 12.5px;
}
.mai-md[data-v-3bf16fa4] pre code {
  background: transparent;
  padding: 0;
}
.mai-md[data-v-3bf16fa4] a {
  color: #4b5eb8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mai-md[data-v-3bf16fa4] a:hover {
  color: #3441a0;
}
.mai-md[data-v-3bf16fa4] h1,
.mai-md[data-v-3bf16fa4] h2,
.mai-md[data-v-3bf16fa4] h3,
.mai-md[data-v-3bf16fa4] h4 {
  margin: 0.9em 0 0.4em;
  font-weight: 600;
  color: #1a1d35;
  line-height: 1.25;
}
.mai-md[data-v-3bf16fa4] h1 { font-size: 1.15em;
}
.mai-md[data-v-3bf16fa4] h2 { font-size: 1.08em;
}
.mai-md[data-v-3bf16fa4] h3, .mai-md[data-v-3bf16fa4] h4 { font-size: 1em;
}

/* ── Tables — matches the styled-HTML-table UX from claude.ai ────────
   Full-width so rows breathe; grey header row; subtle row borders.
   Uses natural `display: table` (default) so <thead> and <tbody>
   share column widths — DO NOT set `display: block` on the <table>,
   that breaks the table layout algorithm and headers stop aligning
   with data cells. Horizontal scroll on narrow viewports is handled
   by the .mai-md-table-wrap wrapper that renderMarkdown.js injects
   around every <table>. */
.mai-md[data-v-3bf16fa4] .mai-md-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 0.8em 0;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #ffffff;
}
.mai-md[data-v-3bf16fa4] .mai-md-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  /* Slightly smaller than the 16px body text — tables are dense by
     nature and 15px reads well without dominating the bubble. Bump to
     16px if you want it to match body prose exactly. */
  font-size: 15px;
  background: transparent;
  /* No `display: block` here — leave it as the default `display: table`
     so column widths are shared between thead and tbody. */
}
.mai-md[data-v-3bf16fa4] .mai-md-table-wrap thead {
  /* Matches the composer footer tone (#c9d2e2) so the table header
     reads as part of the panel's visual language instead of near-
     invisible against the white message bubble. */
  background: #c9d2e2;
}
.mai-md[data-v-3bf16fa4] .mai-md-table-wrap th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  /* Darkest brand text for strong contrast against the darker header
     background. */
  color: #1a1d35;
  border-bottom: 1px solid #a9b4c9;
  white-space: nowrap;
}
.mai-md[data-v-3bf16fa4] .mai-md-table-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #1a1d35;
  vertical-align: top;
}
.mai-md[data-v-3bf16fa4] .mai-md-table-wrap tbody tr:last-child td {
  border-bottom: none;
}
.mai-md[data-v-3bf16fa4] .mai-md-table-wrap tbody tr:hover td {
  background: #fafbff;
}
.mai-md[data-v-3bf16fa4] blockquote {
  border-left: 3px solid #d1d5e8;
  padding: 0.2em 0 0.2em 0.9em;
  margin: 0.7em 0;
  color: #4b5563;
  font-style: italic;
}

/* ── Tool chips ──────────────────────────────────────────────────── */
.mai-toolchips[data-v-3bf16fa4] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.mai-toolchip[data-v-3bf16fa4] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 500;
}

/* ── Composer ────────────────────────────────────────────────────── */
.mai-composer[data-v-3bf16fa4] {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px 12px;
  /* Darker than the header slab so the composer reads as a distinct
     footer above the shell's copyright line and the input affordance
     stands out more against the lighter messages area. */
  background: #c9d2e2;
  border-top: 1px solid #a9b4c9;
  box-shadow: 0 -2px 4px rgba(15, 17, 40, 0.04);
  /* Sit above the messages area so the shadow paints on top of any
     content that happens to be at the very bottom of the scroll. */
  position: relative;
  z-index: 1;
  /* flex-shrink: 0 belt-and-braces so the composer never gets squeezed
     if the messages area's intrinsic content tries to claim more space.
     The min-height: 0 on .mai-messages above is what actually keeps the
     layout stable; this is a second safeguard. */
  flex-shrink: 0;
}
/* BaseTextarea overrides — scoped to the composer only, so no global
   redefinition of `.bp-textarea` leaks out (per fe-ui CSS conventions,
   consumers should never redefine shared classes globally; scoped
   `:deep()` overrides for one specific placement are the escape hatch).
   BaseTextarea's wrapper is a <div class="bp-form-group"> — make it
   the growing flex child. The inner .bp-textarea's default 80px
   min-height is right for form pages but far too tall for a chat
   composer that wants to feel like a single-line input; we shrink
   it here and cap growth at 140px so a multi-line paste doesn't push
   the messages area out of the viewport. */
.mai-composer__field[data-v-3bf16fa4] { flex: 1; min-width: 0;
}
.mai-composer[data-v-3bf16fa4] .bp-form-group { flex: 1; min-width: 0; margin: 0;
}
.mai-composer[data-v-3bf16fa4] .bp-textarea {
  min-height: 40px;
  max-height: 140px;
  resize: none;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
}

/* ── Mic button (Phase V — voice input) ───────────────────────────
   Pill-shaped button that sits between the textarea and the Send
   button. Idle = white with brand-blue mic outline. Recording = brand
   red with a pulsing ring + inline elapsed timer. Transcribing = grey
   with a spinning arc, click disabled. All three states share the
   same 40px height so composer alignment stays tidy. */
.mai-mic[data-v-3bf16fa4] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  background: #ffffff;
  color: #4b5eb8;
  border: 1px solid #d1d5e8;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.mai-mic[data-v-3bf16fa4]:hover:not(:disabled) {
  background: #eef2ff;
  border-color: #b8c4ee;
  color: #3441a0;
}
.mai-mic[data-v-3bf16fa4]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Recording state — red fill + pulsing ring so the user sees mic is
   definitely live. ::after is the ring; animation grows outward and
   fades for a soft heartbeat. */
.mai-mic--recording[data-v-3bf16fa4] {
  background: #dc2626;
  border-color: #b91c1c;
  color: #ffffff;
  position: relative;
}
.mai-mic--recording[data-v-3bf16fa4]:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #991b1b;
  color: #ffffff;
}
.mai-mic--recording[data-v-3bf16fa4]::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 2px solid rgba(220, 38, 38, 0.4);
  animation: mai-mic-pulse-3bf16fa4 1.4s ease-out infinite;
  pointer-events: none;
}
@keyframes mai-mic-pulse-3bf16fa4 {
0%   { transform: scale(1);    opacity: 0.6;
}
70%  { transform: scale(1.18); opacity: 0;
}
100% { transform: scale(1.18); opacity: 0;
}
}
.mai-mic__timer[data-v-3bf16fa4] {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Transcribing state — spinner. Click intentionally disabled while the
   fetch is in flight to prevent a double-POST of the same blob. */
.mai-mic--transcribing[data-v-3bf16fa4] {
  background: #f3f5fa;
  color: #6b7280;
  cursor: wait;
}
.mai-mic__spinner[data-v-3bf16fa4] {
  animation: mai-mic-spin-3bf16fa4 0.9s linear infinite;
}
@keyframes mai-mic-spin-3bf16fa4 {
from { transform: rotate(0deg);
}
to   { transform: rotate(360deg);
}
}

/* Mobile: trim the timer gap so the composer doesn't wrap. */
@media (max-width: 480px) {
.mai-mic[data-v-3bf16fa4] { padding: 0 10px;
}
.mai-mic__timer[data-v-3bf16fa4] { display: none;
}
}
.mai-btn[data-v-3bf16fa4] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
/* Primary uses the DSS+ brand red — matches the "View privacy statement"
   link in the shell footer and the accent red used elsewhere in the
   app (BaseSearchSelect loader, BaseTabBar active count badge). Was
   #4b5eb8 (blue) — swapped to the corporate red so the Send button /
   New Chat / write-proposal Save all read as the platform's primary
   action colour. Distinct from `.mai-btn--danger` (#dc2626) which
   stays reserved for destructive actions like Stop / Reject. */
.mai-btn--primary[data-v-3bf16fa4]  { background: #c8202f; color: #fff;
}
.mai-btn--primary[data-v-3bf16fa4]:hover:not(:disabled)  { background: #a01a26;
}
/* Disabled state uses a lightened tint of the primary hue (not a neutral
   grey) so Send still reads as the same button family. White text stays
   legible against the lighter red fill. */
.mai-btn--primary[data-v-3bf16fa4]:disabled { background: #e8a3aa; color: #ffffff; cursor: not-allowed;
}
.mai-btn--danger[data-v-3bf16fa4]   { background: #dc2626; color: #fff;
}
.mai-btn--danger[data-v-3bf16fa4]:hover:not(:disabled)   { background: #b91c1c;
}
.mai-btn--outline[data-v-3bf16fa4]  { background: transparent; color: #4b5eb8; border: 1px solid #cbd0e6;
}
.mai-btn--outline[data-v-3bf16fa4]:hover { background: #edefff;
}

/* ── Write proposal cards ────────────────────────────────────────── */
.mai-writes[data-v-3bf16fa4] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.mai-write[data-v-3bf16fa4] {
  padding: 10px 12px;
  border: 1px solid #dde3f2;
  border-left: 3px solid #4b5eb8;
  border-radius: 8px;
  background: #f9fafd;
  font-size: 12px;
  line-height: 1.5;
  color: #1a1d35;
}
.mai-write--saved[data-v-3bf16fa4]     { border-left-color: #16a34a; background: #f0fdf4;
}
.mai-write--cancelled[data-v-3bf16fa4] { border-left-color: #9ca3af; background: #f9fafb; opacity: 0.75;
}
.mai-write--error[data-v-3bf16fa4]     { border-left-color: #dc2626; background: #fef2f2;
}
.mai-write__header[data-v-3bf16fa4] {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4b5eb8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mai-write__title[data-v-3bf16fa4]  { font-weight: 600; margin-bottom: 4px;
}
.mai-write__body[data-v-3bf16fa4]   { white-space: pre-wrap; margin-bottom: 6px; color: #333c60;
}
.mai-write__ref[data-v-3bf16fa4]    {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11px;
  margin-bottom: 6px;
}
.mai-write__actions[data-v-3bf16fa4] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.mai-write__actions .mai-btn[data-v-3bf16fa4] {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 12px;
}
.mai-write__status[data-v-3bf16fa4]              { font-size: 12px; color: #6b7280; font-style: italic;
}
.mai-write__status--saved[data-v-3bf16fa4]       { color: #16a34a; font-style: normal; font-weight: 600;
}
.mai-write__status--error[data-v-3bf16fa4]       { color: #b91c1c; font-style: normal; font-weight: 600;
}

/* ── Feedback thumbs ─────────────────────────────────────────────── */
/* Bigger, colour-differentiated up (green) vs down (red) so the user
   can read the intent at a glance. Icons are filled (Material-style)
   rather than stroked outlines — outlines at 14px were nearly
   invisible against the message-body typography. Both sit at 32x32
   with an 18x18 glyph, giving generous click targets on mobile too.
   Active state applies a coloured fill + tinted background so the
   chosen vote stays obvious after the click. */
.mai-feedback[data-v-3bf16fa4] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: #6b7280;
  font-size: 12px;
}
.mai-feedback__btn[data-v-3bf16fa4] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #9ca3af;      /* muted default — pops on hover / active */
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease,
              border-color 120ms ease, transform 120ms ease;
}
.mai-feedback__btn[data-v-3bf16fa4]:hover {
  transform: translateY(-1px);
}
/* Up (green) */
.mai-feedback__btn--up[data-v-3bf16fa4]:hover {
  color: #16a34a;
  border-color: #86efac;
  background: #f0fdf4;
}
.mai-feedback__btn--up.mai-feedback__btn--active[data-v-3bf16fa4] {
  color: #ffffff;
  background: #16a34a;
  border-color: #16a34a;
}
.mai-feedback__btn--up.mai-feedback__btn--active[data-v-3bf16fa4]:hover {
  background: #15803d;
  border-color: #15803d;
}
/* Down (red) */
.mai-feedback__btn--down[data-v-3bf16fa4]:hover {
  color: #dc2626;
  border-color: #fca5a5;
  background: #fef2f2;
}
.mai-feedback__btn--down.mai-feedback__btn--active[data-v-3bf16fa4] {
  color: #ffffff;
  background: #dc2626;
  border-color: #dc2626;
}
.mai-feedback__btn--down.mai-feedback__btn--active[data-v-3bf16fa4]:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}
.mai-feedback__thanks[data-v-3bf16fa4] {
  margin-left: 6px;
  color: #16a34a;
  font-weight: 600;
}
.mai-feedback__error[data-v-3bf16fa4] {
  margin-left: 6px;
  color: #b91c1c;
  font-weight: 600;
}

.mai-standalone-shell[data-v-b21458a5] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: system-ui, -apple-system, sans-serif;
}
.mai-standalone-header[data-v-b21458a5] {
  padding: 24px 32px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.mai-standalone-header h1[data-v-b21458a5] {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: #1a1d35;
}
.mai-standalone-header p[data-v-b21458a5] {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}
.mai-standalone-main[data-v-b21458a5] {
  flex: 1;
  padding: 24px 32px;
}

.mai-admin[data-v-e9d1c672] {
  padding: 24px;
  color: #1a1d35;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 1080px;
  margin: 0 auto;
}
.mai-admin__header[data-v-e9d1c672] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.mai-admin__title[data-v-e9d1c672] {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
}
.mai-admin__subtitle[data-v-e9d1c672] {
  margin: 0;
  font-size: 13px;
  color: #4e5a82;
}
.mai-admin__controls[data-v-e9d1c672] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mai-admin__label[data-v-e9d1c672] {
  font-size: 12px;
  font-weight: 600;
  color: #4e5a82;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mai-admin__select[data-v-e9d1c672] {
  padding: 6px 10px;
  border: 1px solid #d6dae8;
  border-radius: 6px;
  background: #fff;
  color: #1a1d35;
  font-size: 13px;
  font-family: inherit;
}
.mai-admin__select[data-v-e9d1c672]:focus {
  outline: none;
  border-color: #4b5eb8;
  box-shadow: 0 0 0 3px rgba(75, 94, 184, 0.14);
}
.mai-admin__error[data-v-e9d1c672] {
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
}
.mai-admin__empty[data-v-e9d1c672] {
  padding: 16px;
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
}
.mai-admin__window[data-v-e9d1c672] {
  margin: 0 0 16px;
  font-size: 12px;
  color: #6b7280;
}

/* KPI cards */
.mai-admin__cards[data-v-e9d1c672] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.mai-admin__card[data-v-e9d1c672] {
  padding: 16px 18px;
  border: 1px solid #e2e5f0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(20, 26, 60, 0.04);
}
.mai-admin__card--accent[data-v-e9d1c672] {
  border-color: #c7d0ec;
  background: linear-gradient(135deg, #eef1fb 0%, #ffffff 100%);
}
.mai-admin__cardLabel[data-v-e9d1c672] {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.mai-admin__cardValue[data-v-e9d1c672] {
  font-size: 24px;
  font-weight: 700;
  color: #1a1d35;
}

/* Sections */
.mai-admin__section[data-v-e9d1c672] {
  margin-bottom: 24px;
  padding: 16px 18px;
  border: 1px solid #e2e5f0;
  border-radius: 10px;
  background: #ffffff;
}
.mai-admin__sectionTitle[data-v-e9d1c672] {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #1a1d35;
}

/* Table */
.mai-admin__table[data-v-e9d1c672] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mai-admin__table th[data-v-e9d1c672],
.mai-admin__table td[data-v-e9d1c672] {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eef0f6;
}
.mai-admin__table th[data-v-e9d1c672] {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: #f8fafd;
}
.mai-admin__num[data-v-e9d1c672]       { text-align: right; font-variant-numeric: tabular-nums;
}
.mai-admin__num--bold[data-v-e9d1c672] { font-weight: 700;
}

/* Feedback */
.mai-admin__feedback[data-v-e9d1c672] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.mai-admin__feedbackStat[data-v-e9d1c672] {
  padding: 12px 14px;
  border: 1px solid #eef0f6;
  border-radius: 8px;
  background: #f8fafd;
}
.mai-admin__feedbackLabel[data-v-e9d1c672] {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.mai-admin__feedbackValue[data-v-e9d1c672] {
  font-size: 20px;
  font-weight: 700;
  color: #1a1d35;
}
.mai-admin__feedbackValue--up[data-v-e9d1c672]   { color: #16a34a;
}
.mai-admin__feedbackValue--down[data-v-e9d1c672] { color: #dc2626;
}

.mai-adm-voice__hdr[data-v-4a0aa248] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.mai-adm-voice__heading[data-v-4a0aa248] { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #1a1d35;
}
.mai-adm-voice__sub[data-v-4a0aa248]     { margin: 0;       font-size: 13px; color: #6b7db8;
}
.mai-adm-voice__controls[data-v-4a0aa248] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mai-adm-voice__ctrlLabel[data-v-4a0aa248] {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  font-weight: 600;
}
.mai-adm-voice__select[data-v-4a0aa248] {
  padding: 7px 10px;
  background: #ffffff;
  color: #1a1d35;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.mai-adm-voice__error[data-v-4a0aa248] {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-size: 13px;
}
.mai-adm-voice__windowLabel[data-v-4a0aa248] {
  margin: 0 0 16px;
  font-size: 12px;
  color: #6b7280;
}

/* KPI cards — same visual language as the Conversations panel's totals. */
.mai-adm-voice__cards[data-v-4a0aa248] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.mai-adm-voice__card[data-v-4a0aa248] {
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.mai-adm-voice__card--accent[data-v-4a0aa248] {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.mai-adm-voice__cardLabel[data-v-4a0aa248] {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 6px;
}
.mai-adm-voice__cardValue[data-v-4a0aa248] {
  font-size: 24px;
  font-weight: 700;
  color: #1a1d35;
  font-variant-numeric: tabular-nums;
}
.mai-adm-voice__section[data-v-4a0aa248]      { margin-top: 20px;
}
.mai-adm-voice__sectionTitle[data-v-4a0aa248] {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #4b5eb8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mai-adm-voice__table[data-v-4a0aa248] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mai-adm-voice__table th[data-v-4a0aa248],
.mai-adm-voice__table td[data-v-4a0aa248] {
  padding: 10px 12px;
  text-align: start;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}
.mai-adm-voice__table thead th[data-v-4a0aa248] {
  background: #f9fafb;
  color: #6b7280;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mai-adm-voice__num[data-v-4a0aa248] {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mai-adm-voice__empty[data-v-4a0aa248] {
  padding: 24px 20px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}

.mai-adm-prompts__hdr[data-v-1464a466] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.mai-adm-prompts__heading[data-v-1464a466] { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #1a1d35;
}
.mai-adm-prompts__sub[data-v-1464a466]     { margin: 0;       font-size: 13px; color: #6b7db8;
}
.mai-adm-prompts__refreshBtn[data-v-1464a466] {
  flex-shrink: 0;
  padding: 8px 14px;
  background: #ffffff;
  color: #4b5eb8;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.mai-adm-prompts__refreshBtn[data-v-1464a466]:hover { background: #eef2ff; border-color: #b8c4ee;
}
.mai-adm-prompts__error[data-v-1464a466] {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-size: 13px;
}
.mai-adm-prompts__table[data-v-1464a466] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mai-adm-prompts__table th[data-v-1464a466],
.mai-adm-prompts__table td[data-v-1464a466] {
  padding: 10px 12px;
  text-align: start;
  border-bottom: 1px solid #e5e7eb;
}
.mai-adm-prompts__table thead th[data-v-1464a466] {
  background: #f9fafb;
  color: #6b7280;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mai-adm-prompts__table tbody tr[data-v-1464a466]:hover { background: #f8fafc;
}
.mai-adm-prompts__mono[data-v-1464a466] {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
}
.mai-adm-prompts__viewCol[data-v-1464a466] { width: 90px; text-align: end;
}
.mai-adm-prompts__pill[data-v-1464a466] {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #4b5563;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mai-adm-prompts__pill--active[data-v-1464a466] {
  background: #dcfce7;
  color: #15803d;
}
.mai-adm-prompts__viewBtn[data-v-1464a466] {
  padding: 5px 12px;
  background: #ffffff;
  color: #4b5eb8;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.mai-adm-prompts__viewBtn[data-v-1464a466]:hover { background: #eef2ff; border-color: #b8c4ee;
}
.mai-adm-prompts__empty[data-v-1464a466] {
  padding: 32px 24px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}

/* ── Modal ─────────────────────────────────────────────────────── */
.mai-adm-prompts__overlay[data-v-1464a466] {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 32px;
}
.mai-adm-prompts__modal[data-v-1464a466] {
  background: #ffffff;
  border-radius: 14px;
  width: 100%;
  max-width: 900px;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 17, 40, 0.3);
}
.mai-adm-prompts__modalHdr[data-v-1464a466] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}
.mai-adm-prompts__modalTitleWrap[data-v-1464a466] { flex: 1; min-width: 0;
}
.mai-adm-prompts__modalTitle[data-v-1464a466] {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #1a1d35;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.mai-adm-prompts__modalVersion[data-v-1464a466] { color: #6b7db8; font-weight: 500;
}
.mai-adm-prompts__modalMeta[data-v-1464a466] { display: flex; align-items: center; gap: 10px;
}
.mai-adm-prompts__modalDate[data-v-1464a466] { font-size: 12px; color: #6b7280;
}
.mai-adm-prompts__closeBtn[data-v-1464a466] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.mai-adm-prompts__closeBtn[data-v-1464a466]:hover { background: #e5e7eb; color: #1a1d35;
}
.mai-adm-prompts__content[data-v-1464a466] {
  margin: 0;
  padding: 20px 24px;
  overflow: auto;
  flex: 1;
  background: #ffffff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: #1a1d35;
  white-space: pre-wrap;
  word-break: break-word;
}

.mai-adm-notes__hdr[data-v-1b4bd3da] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mai-adm-notes__heading[data-v-1b4bd3da] { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #1a1d35;
}
.mai-adm-notes__sub[data-v-1b4bd3da]     { margin: 0;       font-size: 13px; color: #6b7db8;
}
.mai-adm-notes__controls[data-v-1b4bd3da] {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mai-adm-notes__ctrlGroup[data-v-1b4bd3da] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mai-adm-notes__ctrlLabel[data-v-1b4bd3da] {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  font-weight: 600;
}
.mai-adm-notes__select[data-v-1b4bd3da] {
  padding: 7px 10px;
  background: #ffffff;
  color: #1a1d35;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.mai-adm-notes__checkWrap[data-v-1b4bd3da] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #1a1d35;
  cursor: pointer;
  margin-top: 15px;
}
.mai-adm-notes__error[data-v-1b4bd3da] {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-size: 13px;
}
.mai-adm-notes__table[data-v-1b4bd3da] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.mai-adm-notes__table th[data-v-1b4bd3da],
.mai-adm-notes__table td[data-v-1b4bd3da] {
  padding: 10px 12px;
  text-align: start;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}
.mai-adm-notes__table thead th[data-v-1b4bd3da] {
  background: #f9fafb;
  color: #6b7280;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mai-adm-notes__titleCol[data-v-1b4bd3da] { width: 180px;
}
.mai-adm-notes__refCol[data-v-1b4bd3da]   { width: 160px;
}
.mai-adm-notes__userCol[data-v-1b4bd3da]  { width: 160px;
}
.mai-adm-notes__dateCol[data-v-1b4bd3da]  { width: 110px; white-space: nowrap;
}
.mai-adm-notes__titleCell[data-v-1b4bd3da] {
  font-weight: 600;
  color: #1a1d35;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mai-adm-notes__bodyCell[data-v-1b4bd3da] {
  color: #4e5a82;
  overflow-wrap: anywhere;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: help;
}
.mai-adm-notes__refPill[data-v-1b4bd3da] {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #e5e7eb;
  color: #4b5563;
}
.mai-adm-notes__refPill--dealsheet[data-v-1b4bd3da] { background: #eef2ff; color: #4b5eb8;
}
.mai-adm-notes__refPill--forecast[data-v-1b4bd3da]  { background: #f3eefe; color: #6d28d9;
}
.mai-adm-notes__refPill--skill[data-v-1b4bd3da]     { background: #ecfdf5; color: #047857;
}
.mai-adm-notes__row--deleted td[data-v-1b4bd3da] { opacity: 0.6;
}
.mai-adm-notes__deletedBadge[data-v-1b4bd3da] {
  display: inline-block;
  padding: 1px 6px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: -moz-fit-content;
  width: fit-content;
}
.mai-adm-notes__empty[data-v-1b4bd3da] {
  padding: 32px 24px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}
.mai-adm-notes__pageFooter[data-v-1b4bd3da] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}
.mai-adm-notes__pageInfo[data-v-1b4bd3da] { font-size: 12px; color: #6b7280;
}
.mai-adm-notes__pageBtns[data-v-1b4bd3da] { display: inline-flex; gap: 8px;
}
.mai-adm-notes__pageBtn[data-v-1b4bd3da] {
  padding: 6px 14px;
  background: #ffffff;
  color: #4b5eb8;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.mai-adm-notes__pageBtn[data-v-1b4bd3da]:hover:not(:disabled) { background: #eef2ff; border-color: #b8c4ee;
}
.mai-adm-notes__pageBtn[data-v-1b4bd3da]:disabled { opacity: 0.4; cursor: not-allowed;
}

.mai-adm-fb__hdr[data-v-4d8bcd80] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.mai-adm-fb__heading[data-v-4d8bcd80] { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #1a1d35;
}
.mai-adm-fb__sub[data-v-4d8bcd80]     { margin: 0;       font-size: 13px; color: #6b7db8;
}
.mai-adm-fb__filterBar[data-v-4d8bcd80] {
  display: inline-flex;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.mai-adm-fb__filterBtn[data-v-4d8bcd80] {
  padding: 6px 14px;
  background: transparent;
  color: #4b5563;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.mai-adm-fb__filterBtn[data-v-4d8bcd80]:hover { color: #1a1d35;
}
.mai-adm-fb__filterBtn.active[data-v-4d8bcd80] {
  background: #ffffff;
  color: #4b5eb8;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 17, 40, 0.08);
}
.mai-adm-fb__error[data-v-4d8bcd80] {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-size: 13px;
}
.mai-adm-fb__table[data-v-4d8bcd80] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
.mai-adm-fb__table th[data-v-4d8bcd80],
.mai-adm-fb__table td[data-v-4d8bcd80] {
  padding: 10px 12px;
  text-align: start;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}
.mai-adm-fb__table thead th[data-v-4d8bcd80] {
  background: #f9fafb;
  color: #6b7280;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mai-adm-fb__ratingCol[data-v-4d8bcd80] { width: 54px;  text-align: center;
}
.mai-adm-fb__userCol[data-v-4d8bcd80]   { width: 160px;
}
.mai-adm-fb__dateCol[data-v-4d8bcd80]   { width: 140px; white-space: nowrap;
}
.mai-adm-fb__messageCell[data-v-4d8bcd80],
.mai-adm-fb__commentCell[data-v-4d8bcd80] {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
  color: #1a1d35;
}
.mai-adm-fb__ellipsis[data-v-4d8bcd80] { color: #94a3b8; font-weight: 600;
}
.mai-adm-fb__dim[data-v-4d8bcd80]      { color: #94a3b8;
}
.mai-adm-fb__pill[data-v-4d8bcd80] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
}
.mai-adm-fb__pill--up[data-v-4d8bcd80]   { background: #dcfce7;
}
.mai-adm-fb__pill--down[data-v-4d8bcd80] { background: #fee2e2;
}
.mai-adm-fb__empty[data-v-4d8bcd80] {
  padding: 32px 24px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}
.mai-adm-fb__pageFooter[data-v-4d8bcd80] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}
.mai-adm-fb__pageInfo[data-v-4d8bcd80] { font-size: 12px; color: #6b7280;
}
.mai-adm-fb__pageBtns[data-v-4d8bcd80] { display: inline-flex; gap: 8px;
}
.mai-adm-fb__pageBtn[data-v-4d8bcd80] {
  padding: 6px 14px;
  background: #ffffff;
  color: #4b5eb8;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}
.mai-adm-fb__pageBtn[data-v-4d8bcd80]:hover:not(:disabled) { background: #eef2ff; border-color: #b8c4ee;
}
.mai-adm-fb__pageBtn[data-v-4d8bcd80]:disabled { opacity: 0.4; cursor: not-allowed;
}

.mai-adm-conv__hdr[data-v-d7141807] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.mai-adm-conv__heading[data-v-d7141807] { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #1a1d35;
}
.mai-adm-conv__sub[data-v-d7141807]     { margin: 0;       font-size: 13px; color: #6b7db8;
}
.mai-adm-conv__refreshBtn[data-v-d7141807] {
  flex-shrink: 0;
  padding: 8px 14px;
  background: #ffffff;
  color: #4b5eb8;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.mai-adm-conv__refreshBtn[data-v-d7141807]:hover { background: #eef2ff; border-color: #b8c4ee;
}
.mai-adm-conv__error[data-v-d7141807] {
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-size: 13px;
}

/* KPI cards — matches the usage-dashboard card look. */
.mai-adm-conv__cards[data-v-d7141807] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.mai-adm-conv__card[data-v-d7141807] {
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.mai-adm-conv__card--accent[data-v-d7141807] {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.mai-adm-conv__cardLabel[data-v-d7141807] {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 6px;
}
.mai-adm-conv__cardValue[data-v-d7141807] {
  font-size: 24px;
  font-weight: 700;
  color: #1a1d35;
  font-variant-numeric: tabular-nums;
}
.mai-adm-conv__section[data-v-d7141807] { margin-top: 20px;
}
.mai-adm-conv__section + .mai-adm-conv__section[data-v-d7141807] { margin-top: 28px;
}
.mai-adm-conv__sectionTitle[data-v-d7141807] {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #4b5eb8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mai-adm-conv__table[data-v-d7141807] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.mai-adm-conv__table th[data-v-d7141807],
.mai-adm-conv__table td[data-v-d7141807] {
  padding: 10px 12px;
  text-align: start;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}
.mai-adm-conv__table thead th[data-v-d7141807] {
  background: #f9fafb;
  color: #6b7280;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mai-adm-conv__num[data-v-d7141807] {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mai-adm-conv__userCol[data-v-d7141807] { width: 180px;
}
.mai-adm-conv__dateCol[data-v-d7141807] { width: 140px; white-space: nowrap;
}
.mai-adm-conv__titleCell[data-v-d7141807] {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.mai-adm-conv__empty[data-v-d7141807] {
  padding: 24px 20px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}

.mai-adm-page[data-v-051eceb7] {
  padding: 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.mai-adm-header[data-v-051eceb7] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.mai-adm-header-text[data-v-051eceb7] { flex: 1 1 260px; min-width: 0;
}
.mai-adm-title[data-v-051eceb7]    { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: #1a1d35;
}
.mai-adm-subtitle[data-v-051eceb7] { margin: 0;       font-size: 13px; color: #6b7db8;
}

/* Two-panel layout — left nav fixed-width + sticky, content flexes.
   Collapses to a stacked column at <= 760px with the nav above the
   content (nav loses its sticky positioning on narrow screens). */
.mai-adm-layout[data-v-051eceb7] {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}
.mai-adm-nav[data-v-051eceb7] {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 10px;
  position: sticky;
  top: 20px;
}
.mai-adm-nav-section + .mai-adm-nav-section[data-v-051eceb7] { margin-top: 16px;
}
.mai-adm-nav-header[data-v-051eceb7] {
  padding: 8px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mai-adm-nav-item[data-v-051eceb7] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #1a1d35;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: start;
  transition: background 0.12s, color 0.12s;
}
.mai-adm-nav-item[data-v-051eceb7]:hover { background: #f3f4f6;
}
.mai-adm-nav-item.active[data-v-051eceb7] {
  background: #eef2ff;
  color: #4b5eb8;
  font-weight: 600;
}
.mai-adm-nav-icon[data-v-051eceb7]  { display: flex; align-items: center; color: inherit; flex-shrink: 0;
}
.mai-adm-nav-label[data-v-051eceb7] { flex: 1; min-width: 0;
}
.mai-adm-content[data-v-051eceb7] {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  min-height: 320px;
}
@media (max-width: 760px) {
.mai-adm-page[data-v-051eceb7]   { padding: 16px;
}
.mai-adm-title[data-v-051eceb7]  { font-size: 18px;
}
.mai-adm-layout[data-v-051eceb7] { grid-template-columns: 1fr;
}
.mai-adm-nav[data-v-051eceb7]    { position: static;
}
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.list-item {
  display: list-item;
}
.hidden {
  display: none;
}
.flex-shrink {
  flex-shrink: 1;
}
.shrink {
  flex-shrink: 1;
}
.grow {
  flex-grow: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.flex-wrap {
  flex-wrap: wrap;
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.underline {
  text-decoration-line: underline;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #1a1d35;
}

.ask-mosaic-view[data-v-b9b3b39a] {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ask-mosaic-view__card[data-v-b9b3b39a] {
  max-width: 520px;
  width: 100%;
  padding: 40px 32px;
  background: #ffffff;
  border: 1px solid #e2e5f0;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(20, 26, 60, 0.08);
  text-align: center;
  color: #1a1d35;
}
.ask-mosaic-view__icon[data-v-b9b3b39a] {
  color: #4b5eb8;
  margin-bottom: 12px;
}
.ask-mosaic-view__title[data-v-b9b3b39a] {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
}
.ask-mosaic-view__body[data-v-b9b3b39a] {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: #4e5a82;
}
.ask-mosaic-view__hint[data-v-b9b3b39a] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef1fb;
  color: #4b5eb8;
  font-size: 12px;
  margin-bottom: 20px;
}
.ask-mosaic-view__hint kbd[data-v-b9b3b39a] {
  font-family: inherit;
  padding: 1px 6px;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid #d6dae8;
  color: #1a1d35;
  font-size: 11px;
  font-weight: 600;
}
.ask-mosaic-view__btn[data-v-b9b3b39a] {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #4b5eb8 0%, #2f3f8a 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(31, 41, 84, 0.18);
}
.ask-mosaic-view__btn[data-v-b9b3b39a]:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31, 41, 84, 0.22);
}