/*
 * MCP embeddable stylesheet.
 *
 * Loaded by the consumer app via the URL exported as `stylesheetUrl` from
 * /v1/controllers.js. Every selector is prefixed `mcp_` (and CSS variables
 * `--mcp_`) so nothing collides with the host application's own styles.
 */

/* ============================================================
 * Autopilot wizard
 * ============================================================ */
@keyframes mcp_autopilot_card_enter {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mcp_autopilot_panel_sheen {
  0%   { transform: translateX(-45%) rotate(16deg); opacity: 0; }
  18%  { opacity: 0.7; }
  44%  { opacity: 0; }
  100% { transform: translateX(165%) rotate(16deg); opacity: 0; }
}
@keyframes mcp_autopilot_step_rise {
  0%   { opacity: 0; transform: translateY(9px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes mcp_autopilot_dot_pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.16); }
  50%      { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0.08); }
}
@keyframes mcp_autopilot_box_float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(2deg); }
}
@keyframes mcp_autopilot_box_glow {
  0%, 100% { filter: drop-shadow(0 12px 18px rgba(124, 58, 237, 0.30)); }
  50%      { filter: drop-shadow(0 18px 30px rgba(236, 72, 153, 0.45)); }
}
@keyframes mcp_autopilot_box_scan {
  0%   { opacity: 0; transform: translateY(-12px); }
  45%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(28px); }
}
@keyframes mcp_autopilot_orbit {
  from { transform: rotate(0deg)   translateX(72px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(72px) rotate(-360deg); }
}
@keyframes mcp_autopilot_route_dash {
  to { stroke-dashoffset: -32; }
}
@keyframes mcp_autopilot_success_pop {
  0%   { opacity: 0; transform: scale(0.82); }
  70%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.mcp_autopilot_frame,
.mcp_autopilot_frame * {
  box-sizing: border-box;
}

.mcp_autopilot_frame {
  display: block;
  width: min(100%, 450px);
  margin: 0 auto;
  padding: 2px 23px 10px;
  color: #111827;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mcp_autopilot_card {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 644px;
  border: 1px solid #9bb8ff;
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 9%, rgba(124, 58, 237, 0.1), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.13);
  padding: 33px 31px 32px;
  animation: mcp_autopilot_card_enter 320ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.mcp_autopilot_card::before {
  content: "";
  position: absolute;
  top: -28%;
  left: 0;
  width: 42%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  pointer-events: none;
  animation: mcp_autopilot_panel_sheen 5.5s ease-in-out 600ms infinite;
}

.mcp_autopilot_card > * {
  position: relative;
  z-index: 1;
}

.mcp_autopilot_card__success {
  border-color: #86efac;
  background:
    radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.14), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.mcp_autopilot_header {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
}

.mcp_autopilot_back {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #9ca3af;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.mcp_autopilot_back:hover {
  background: #f3f4f6;
  color: #4b5563;
  transform: translateX(-2px);
}

/* Forward variant — shares all base styling but flips the hover slide and
   strips <button> defaults so the priorities header's save action sits
   visually identical to the back arrow on the other side. */
.mcp_autopilot_back__forward {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.mcp_autopilot_back__forward:hover {
  transform: translateX(2px);
}

.mcp_autopilot_back svg {
  width: 21px;
  height: 21px;
}

.mcp_autopilot_progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.mcp_autopilot_dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  transition: transform 180ms ease, background-color 180ms ease;
}
.mcp_autopilot_dot__done { background: #7c3aed; }
.mcp_autopilot_dot__current {
  background: #7c3aed;
  animation: mcp_autopilot_dot_pulse 1.8s ease-in-out infinite;
}
.mcp_autopilot_dot__upcoming { background: #e5e7eb; }
.mcp_autopilot_dot_line {
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: #e5e7eb;
}
.mcp_autopilot_dot_line__done { background: #7c3aed; }

.mcp_autopilot_title {
  margin: 25px 0 0;
  max-width: 315px;
  color: #111827;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

.mcp_autopilot_title__center {
  max-width: none;
  text-align: center;
}

.mcp_autopilot_copy {
  margin: 9px 0 0;
  color: #6b7280;
  font-size: 18px;
  line-height: 1.45;
}

.mcp_autopilot_copy__center {
  text-align: center;
}

.mcp_autopilot_form {
  margin-top: 26px;
}

.mcp_autopilot_stack {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.mcp_autopilot_step_item {
  animation: mcp_autopilot_step_rise 320ms ease-out both;
}

.mcp_autopilot_step_item:nth-child(2) { animation-delay: 55ms; }
.mcp_autopilot_step_item:nth-child(3) { animation-delay: 110ms; }
.mcp_autopilot_step_item:nth-child(4) { animation-delay: 165ms; }
.mcp_autopilot_step_item:nth-child(5) { animation-delay: 220ms; }

.mcp_autopilot_label {
  display: block;
  margin: 0 0 8px;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.mcp_autopilot_help {
  margin: 4px 0 0;
  color: #9ca3af;
  font-size: 12px;
  line-height: 1.4;
}

.mcp_autopilot_input_suffix {
  color: #9ca3af;
  font-size: 13px;
}

.mcp_autopilot_field .ds-input-container-icons-end {
  pointer-events: none;
}

.mcp_autopilot_field .ds-input-container {
  position: relative;
}

.mcp_autopilot_field .ds-input {
  width: 100%;
  height: 42px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  padding: 0 12px;
  color: #111827;
  font-size: 14px;
  line-height: 20px;
  outline: none;
}

.mcp_autopilot_field .ds-input:focus {
  border: 2px solid #6f42e8;
  background: #f9fafb;
}

.mcp_autopilot_field .ds-input-with-end-icon {
  padding-right: 88px;
}

.mcp_autopilot_field .ds-input-container-icons-end {
  position: absolute;
  inset: 0 12px 0 auto;
  display: flex;
  align-items: center;
}

.mcp_autopilot_slider_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #374151;
  font-size: 14px;
  line-height: 1.4;
}

.mcp_autopilot_slider_output {
  flex: 0 0 auto;
  color: #111827;
  font-weight: 600;
}

/* Package-mix state — written by `mcp--autopilot-package-mix` as
   data-mcp-state="ok|over|short" on the total readout, hint, and submit. */
.mcp_autopilot_slider_output[data-mcp-state="ok"]    { color: #047857; }
.mcp_autopilot_slider_output[data-mcp-state="over"],
.mcp_autopilot_slider_output[data-mcp-state="short"] { color: #b91c1c; }

.mcp_autopilot_help[data-mcp-state="ok"]    { color: #047857; }
.mcp_autopilot_help[data-mcp-state="over"],
.mcp_autopilot_help[data-mcp-state="short"] { color: #b91c1c; }

.mcp_autopilot_slider {
  display: block;
  width: 100%;
  height: 6px;
  margin: 11px 0 0;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    #6f42e8 0%, #6f42e8 var(--mcp_autopilot_fill, 50%),
    #e5e7eb var(--mcp_autopilot_fill, 50%), #e5e7eb 100%
  );
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.mcp_autopilot_slider::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #6f42e8;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.35);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.mcp_autopilot_slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #6f42e8;
  border-radius: 9999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.35);
  cursor: pointer;
}

.mcp_autopilot_range_pair {
  position: relative;
  height: 22px;
  margin-top: 11px;
}

.mcp_autopilot_range_pair::before,
.mcp_autopilot_range_pair::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 6px;
  border-radius: 999px;
  pointer-events: none;
}

.mcp_autopilot_range_pair::before {
  background: #e5e7eb;
}

.mcp_autopilot_range_pair::after {
  left: var(--mcp_autopilot_range_start, 0%);
  right: calc(100% - var(--mcp_autopilot_range_end, 100%));
  background: #6f42e8;
}

.mcp_autopilot_range_pair_input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.mcp_autopilot_range_pair_input__max {
  z-index: 3;
}

.mcp_autopilot_range_pair_input::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent;
}

.mcp_autopilot_range_pair_input::-moz-range-track {
  height: 6px;
  background: transparent;
}

.mcp_autopilot_range_pair_input::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 2px solid #6f42e8;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.35);
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
}

.mcp_autopilot_range_pair_input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #6f42e8;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.35);
  cursor: pointer;
  pointer-events: auto;
}

.mcp_autopilot_range_limits {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: #9ca3af;
  font-size: 12px;
}

.mcp_autopilot_button {
  display: inline-flex;
  width: 100%;
  min-height: 42px;
  margin-top: 35px;
  align-items: center;
  justify-content: center;
  border: 1px solid #4f46e5;
  border-radius: 8px;
  background: #4f46e5;
  padding: 10px 16px;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mcp_autopilot_button:hover {
  background: #4338ca;
  border-color: #4338ca;
  transform: translateY(-1px);
}

.mcp_autopilot_button:disabled,
.mcp_autopilot_button[disabled] {
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.mcp_autopilot_error {
  margin: 16px 0 0;
  color: #dc2626;
  font-size: 13px;
  line-height: 1.4;
}

.mcp_autopilot_hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 34px;
}

.mcp_autopilot_box_stage {
  position: relative;
  width: 11rem;
  height: 11rem;
  perspective: 600px;
}
.mcp_autopilot_box_svg {
  width: 100%;
  height: 100%;
  animation:
    mcp_autopilot_box_float 4.5s ease-in-out infinite,
    mcp_autopilot_box_glow  3.0s ease-in-out infinite;
  transform-origin: center;
  transform-style: preserve-3d;
}
.mcp_autopilot_box_scanline {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 38%;
  height: 2px;
  border-radius: 9999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  mix-blend-mode: screen;
  animation: mcp_autopilot_box_scan 2.4s ease-in-out infinite;
  pointer-events: none;
}
.mcp_autopilot_box_sparkle {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 9999px;
  background: radial-gradient(circle, #ffffff 0%, #c4b5fd 60%, transparent 70%);
  box-shadow: 0 0 8px rgba(196, 181, 253, 0.85);
  animation: mcp_autopilot_orbit 6s linear infinite;
}
.mcp_autopilot_box_sparkle__b {
  width: 4px; height: 4px; margin: -2px 0 0 -2px;
  animation-duration: 4.2s;
  animation-delay: -1.4s;
}
.mcp_autopilot_box_sparkle__c {
  width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  animation-duration: 5.4s;
  animation-delay: -2.8s;
}

.mcp_autopilot_route {
  width: min(100%, 300px);
  margin-top: 20px;
}

.mcp_autopilot_route_path {
  stroke-dasharray: 8 8;
  animation: mcp_autopilot_route_dash 1.2s linear infinite;
}

.mcp_autopilot_option_grid {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.mcp_autopilot_option {
  display: block;
  cursor: pointer;
}

.mcp_autopilot_option_input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.mcp_autopilot_option_body {
  display: grid;
  grid-template-columns: 42px 1fr 18px;
  gap: 14px;
  align-items: center;
  min-height: 74px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  padding: 14px;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mcp_autopilot_option:hover .mcp_autopilot_option_body {
  border-color: #a78bfa;
  background: #faf8ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.1);
}

.mcp_autopilot_option_input:checked + .mcp_autopilot_option_body {
  border-color: #6f42e8;
  background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.mcp_autopilot_option_icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f5f3ff;
  color: #6d28d9;
}

.mcp_autopilot_option_input:checked + .mcp_autopilot_option_body .mcp_autopilot_option_icon {
  background: #6f42e8;
  color: #ffffff;
}

.mcp_autopilot_option_icon svg {
  width: 21px;
  height: 21px;
}

.mcp_autopilot_option_title {
  display: block;
  color: #111827;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
}

.mcp_autopilot_option_subtitle {
  display: block;
  margin-top: 3px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
}

.mcp_autopilot_option_arrow {
  color: #c4c7cf;
}

.mcp_autopilot_insight {
  margin-top: 24px;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  background: linear-gradient(135deg, #f5f3ff, #eef2ff);
  padding: 12px;
  color: #5b21b6;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.mcp_autopilot_link_note {
  display: block;
  margin-top: 9px;
  color: #6d28d9;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}

.mcp_autopilot_success_icon {
  display: inline-flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  animation: mcp_autopilot_success_pop 420ms cubic-bezier(0.2, 0.9, 0.25, 1) 120ms both;
}

.mcp_autopilot_success_icon svg {
  width: 38px;
  height: 38px;
}

.mcp_autopilot_benefits {
  display: grid;
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.mcp_autopilot_benefit {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #374151;
  font-size: 14px;
  line-height: 1.4;
  animation: mcp_autopilot_step_rise 320ms ease-out both;
}

.mcp_autopilot_benefit:nth-child(2) { animation-delay: 70ms; }
.mcp_autopilot_benefit:nth-child(3) { animation-delay: 140ms; }
.mcp_autopilot_benefit:nth-child(4) { animation-delay: 210ms; }
.mcp_autopilot_benefit:nth-child(5) { animation-delay: 280ms; }

.mcp_autopilot_benefit_icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
  box-shadow: 0 6px 14px rgba(22, 163, 74, 0.14);
}

.mcp_autopilot_benefit_icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.7;
}

.mcp_autopilot_frame__dashboard {
  width: 100%;
  padding: 2px 8px 10px;
}

.mcp_autopilot_dashboard {
  display: grid;
  gap: 24px;
  width: 100%;
  color: #111827;
  animation: mcp_autopilot_card_enter 300ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.mcp_autopilot_dashboard_card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.mcp_autopilot_dashboard_strategy {
  padding: 27px 28px 24px;
}

.mcp_autopilot_dashboard_card_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mcp_autopilot_dashboard_title,
.mcp_autopilot_dashboard_section_title {
  margin: 0;
  color: #111827;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

.mcp_autopilot_dashboard_edit {
  display: inline-flex;
  min-width: 73px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #4f46e5;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mcp_autopilot_dashboard_edit:hover {
  border-color: #c4b5fd;
  box-shadow: 0 8px 16px rgba(79, 70, 229, 0.10);
  transform: translateY(-1px);
}

.mcp_autopilot_strategy_grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(2, minmax(0, 1fr));
  margin-top: 28px;
}

.mcp_autopilot_strategy_item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 0 28px;
  border-left: 1px solid #e5e7eb;
}

.mcp_autopilot_strategy_item:first-child {
  border-left: 0;
  padding-left: 0;
  padding-right: 34px;
}

.mcp_autopilot_strategy_item:last-child {
  padding-right: 0;
}

.mcp_autopilot_strategy_icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.mcp_autopilot_strategy_icon svg {
  width: 25px;
  height: 25px;
}

.mcp_autopilot_strategy_icon__price {
  background: #f2edff;
  color: #6f42e8;
}

.mcp_autopilot_strategy_icon__speed {
  background: #eef2ff;
  color: #4f46e5;
}

.mcp_autopilot_strategy_icon__certainty {
  background: #ecfdf5;
  color: #16a34a;
}

.mcp_autopilot_strategy_body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mcp_autopilot_strategy_body strong {
  color: #111827;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.mcp_autopilot_strategy_body span {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.mcp_autopilot_dashboard_glance {
  display: grid;
  gap: 20px;
}

.mcp_autopilot_glance_grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.mcp_autopilot_glance_card {
  display: grid;
  align-content: center;
  min-height: 118px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 22px 17px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.mcp_autopilot_glance_card strong {
  color: #111827;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}

.mcp_autopilot_glance_card span {
  margin-top: 12px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.22;
}

.mcp_autopilot_glance_card__attention strong,
.mcp_autopilot_glance_card__attention span {
  color: #d45b22;
}

.mcp_autopilot_working_banner {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  align-items: center;
  min-height: 90px;
  border-radius: 12px;
  background: linear-gradient(105deg, #ecfdf5 0%, #f7fee7 100%);
  padding: 20px 26px;
}

.mcp_autopilot_working_banner__paused {
  background: linear-gradient(105deg, #f3f4f6 0%, #f9fafb 100%);
}

.mcp_autopilot_working_icon__paused {
  background: #e5e7eb;
  color: #4b5563;
}

.mcp_autopilot_dashboard_toggle {
  display: inline-flex;
  min-width: 96px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.mcp_autopilot_dashboard_toggle__disable {
  border-color: #e5e7eb;
  color: #b91c1c;
}

.mcp_autopilot_dashboard_toggle__disable:hover {
  border-color: #fca5a5;
  box-shadow: 0 8px 16px rgba(185, 28, 28, 0.10);
  transform: translateY(-1px);
}

.mcp_autopilot_dashboard_toggle__enable {
  border-color: #bbf7d0;
  background: #16a34a;
  color: #ffffff;
}

.mcp_autopilot_dashboard_toggle__enable:hover {
  border-color: #16a34a;
  box-shadow: 0 8px 16px rgba(22, 163, 74, 0.18);
  transform: translateY(-1px);
}

.mcp_autopilot_working_icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dcfce7;
  color: #16a34a;
}

.mcp_autopilot_working_icon svg {
  width: 24px;
  height: 24px;
}

.mcp_autopilot_working_banner > span:nth-child(2) {
  display: grid;
  gap: 8px;
}

.mcp_autopilot_working_banner strong {
  color: #111827;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.mcp_autopilot_working_banner span span {
  color: #4b5563;
  font-size: 14px;
  line-height: 1.35;
}

@media (max-width: 480px) {
  .mcp_autopilot_frame {
    width: 100%;
    padding: 8px;
  }

  .mcp_autopilot_card {
    min-height: 0;
    border: 1px solid #9bb8ff;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    padding: 14px 13px 16px;
  }

  .mcp_autopilot_card::before {
    display: block;
    animation-duration: 7s;
    opacity: 0.55;
  }

  .mcp_autopilot_header {
    grid-template-columns: 26px 1fr 26px;
  }

  .mcp_autopilot_back {
    width: 26px;
    height: 26px;
  }

  .mcp_autopilot_back svg {
    width: 16px;
    height: 16px;
  }

  .mcp_autopilot_progress {
    gap: 5px;
  }

  .mcp_autopilot_dot {
    width: 8px;
    height: 8px;
  }

  .mcp_autopilot_dot_line {
    width: 20px;
  }

  .mcp_autopilot_title {
    margin-top: 12px;
    max-width: 250px;
    font-size: 18px;
    line-height: 1.22;
  }

  .mcp_autopilot_copy {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.35;
  }

  .mcp_autopilot_form,
  .mcp_autopilot_stack,
  .mcp_autopilot_option_grid {
    margin-top: 20px;
  }

  .mcp_autopilot_stack {
    gap: 16px;
  }

  .mcp_autopilot_label {
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 700;
  }

  .mcp_autopilot_help {
    display: none;
  }

  .mcp_autopilot_slider_row {
    font-size: 14px;
  }

  .mcp_autopilot_slider {
    height: 4px;
    margin-top: 7px;
  }

  .mcp_autopilot_range_pair {
    height: 16px;
    margin-top: 7px;
  }

  .mcp_autopilot_range_pair::before,
  .mcp_autopilot_range_pair::after {
    top: 6px;
    height: 4px;
  }

  .mcp_autopilot_slider::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
  }

  .mcp_autopilot_slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
  }

  .mcp_autopilot_range_pair_input {
    height: 16px;
  }

  .mcp_autopilot_range_pair_input::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4px;
  }

  .mcp_autopilot_range_pair_input::-moz-range-thumb {
    width: 12px;
    height: 12px;
  }

  .mcp_autopilot_button {
    margin-top: 27px;
  }

  .mcp_autopilot_box_stage {
    width: 12rem;
    height: 12rem;
  }

  .mcp_autopilot_option_body {
    grid-template-columns: 34px 1fr 16px;
    min-height: 60px;
    gap: 10px;
    padding: 10px;
  }

  .mcp_autopilot_option_icon {
    width: 34px;
    height: 34px;
  }

  .mcp_autopilot_option_title {
    font-size: 12px;
  }

  .mcp_autopilot_option_subtitle {
    font-size: 10px;
  }

  .mcp_autopilot_frame__dashboard {
    padding: 8px;
  }

  .mcp_autopilot_dashboard {
    gap: 20px;
  }

  .mcp_autopilot_dashboard_strategy {
    padding: 22px 18px;
  }

  .mcp_autopilot_dashboard_title,
  .mcp_autopilot_dashboard_section_title {
    font-size: 19px;
  }

  .mcp_autopilot_strategy_grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 24px;
  }

  .mcp_autopilot_strategy_item {
    min-height: 58px;
    padding: 0;
    border-left: 0;
  }

  .mcp_autopilot_strategy_body strong {
    font-size: 26px;
  }

  .mcp_autopilot_glance_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .mcp_autopilot_glance_card {
    min-height: 104px;
    padding: 18px;
  }

  .mcp_autopilot_glance_card strong {
    font-size: 27px;
  }

  .mcp_autopilot_working_banner {
    grid-template-columns: 38px 1fr;
    gap: 14px;
    padding: 18px;
  }

  .mcp_autopilot_working_icon {
    width: 38px;
    height: 38px;
  }

  .mcp_autopilot_dashboard_toggle {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 36px;
  }
}

/* ============================================================
 * SSE Quotation card
 * ============================================================ */
@keyframes mcp_sse_quotation_border_shine {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes mcp_sse_quotation_star_pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50%      { transform: scale(1.08) rotate(8deg); opacity: 1; }
}
/* Faster + glowing variant, used while the typewriter has anything in the
   queue. The class is toggled from the JS controller (see #setStarTyping). */
@keyframes mcp_sse_quotation_star_typing {
  0%, 100% {
    transform: scale(1) rotate(-6deg);
    filter: drop-shadow(0 0 0 rgba(124, 58, 237, 0));
  }
  50% {
    transform: scale(1.18) rotate(10deg);
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.75))
            drop-shadow(0 0 14px rgba(236, 72, 153, 0.45));
  }
}
@keyframes mcp_sse_quotation_cursor_blink {
  0%, 45%   { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@keyframes mcp_sse_quotation_cta_enter {
  0%   { opacity: 0; transform: translateY(8px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes mcp_sse_quotation_cta_glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.22), 0 10px 24px rgba(124, 58, 237, 0.20); }
  50%      { box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.34), 0 14px 34px rgba(236, 72, 153, 0.28); }
}
.mcp_sse_quotation_shell {
  background: linear-gradient(115deg, #a855f7, #7c3aed, #ec4899, #c084fc, #a855f7);
  background-size: 260% 260%;
  animation: mcp_sse_quotation_border_shine 4s ease infinite;
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.18);
}
.mcp_sse_quotation_star {
  animation: mcp_sse_quotation_star_pulse 1.8s ease-in-out infinite;
  transform-origin: center;
}
/* Double-class beats the base selector without `!important` — applied to the
   same SVG element by the controller while typing is in progress. */
.mcp_sse_quotation_star.mcp_sse_quotation_star_typing {
  animation: mcp_sse_quotation_star_typing 0.9s ease-in-out infinite;
}
.mcp_sse_quotation_cursor::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 3px;
  border-radius: 999px;
  background: #7c3aed;
  vertical-align: -2px;
  animation: mcp_sse_quotation_cursor_blink 0.85s steps(1) infinite;
}
.mcp_sse_quotation_logs {
  overflow: hidden;
  transition: height 220ms ease, padding-top 220ms ease, padding-bottom 220ms ease;
}
.mcp_sse_quotation_subtitle {
  transition: opacity 140ms ease;
}
.mcp_sse_quotation_cta {
  animation: mcp_sse_quotation_cta_enter 260ms ease-out both;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.mcp_sse_quotation_cta_primary {
  animation:
    mcp_sse_quotation_cta_enter 260ms ease-out both,
    mcp_sse_quotation_cta_glow 2.4s ease-in-out 260ms infinite;
  background: linear-gradient(115deg, #7c3aed, #a855f7, #ec4899);
  color: #ffffff;
}
.mcp_sse_quotation_cta_secondary {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #64748b;
  box-shadow: none;
}
.mcp_sse_quotation_cta_secondary:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

/* ==========================================================================
   Support tickets (F1b) — embedded index, drawer form and minimal detail.
   Same conventions as the autopilot embed: every class prefixed mcp_support_.
   The case-response drawer shares the scope: it mounts on the HOST's body
   (outside the panel — see the frame controller), so without its own entry
   here every token would resolve to nothing and the drawer paints bare.
   ========================================================================== */
.mcp_support_panel,
.mcp_support_casedrawer {
  --mcp_support_primary: #5233ea;          /* core/theme/primary/contrast-600 */
  --mcp_support_primary_dark: #4229bb;     /* core/theme/primary/contrast-700 */
  --mcp_support_text: #111928;             /* core/text/primary-gray900 */
  --mcp_support_text_secondary: #6b7280;   /* core/text/secondary-gray500 */
  --mcp_support_text_dark: #374151;        /* core/theme/gray/dark-700 */
  --mcp_support_border: #d1d5db;           /* core/border/primary-gray300 */
  --mcp_support_border_soft: #e5e7eb;      /* core/theme/gray/lighter-200 */
  --mcp_support_surface: #ffffff;          /* core/surface/light/white */
  --mcp_support_surface_soft: #f9fafb;     /* core/surface/gray/lighter-50 */
  --mcp_support_surface_gray: #f3f4f6;     /* core/surface/gray/light-100 */
  --mcp_support_success: #0e9f6e;          /* core/interactions/success-green500 */
  --mcp_support_success_soft: #def7ec;     /* core/surface/green/light-100 */
  --mcp_support_purple: #7e3af2;           /* core/theme/purple/contrast-600 */
  --mcp_support_purple_soft: #edebfe;      /* core/surface/purple/light-100 */
  --mcp_support_secondary_soft: #eeebfd;   /* core/surface/secondary/light-100 (círculo de Origen/Destino) */
  --mcp_support_indigo_text: #42389d;      /* indicators/indigo/text */
  --mcp_support_indigo_surface: #e5edff;   /* indicators/indigo/surface */
  --mcp_support_indigo_indicator: #6875f5; /* punto del badge (asset del nodo) */
  --mcp_support_teal: #0694a2;             /* core/theme/teal/base-500 */
  --mcp_support_teal_surface: #d5f5f6;     /* core/surface/teal/light-100 */
  --mcp_support_blue_dot: #3f83f8;         /* indicators/blue/indicator-500 */
  --mcp_support_blue_text: #1a56db;        /* indicators/blue/text-700 */
  --mcp_support_blue_surface: #e1effe;     /* indicators/blue/surface-100 */
  --mcp_support_info_surface: #ebf5ff;     /* alerts/info/blue50 (closing banner) */
  --mcp_support_info_border: #a4cafe;      /* core/theme/blue/light-300 */
  --mcp_support_blue_darkest: #1e429f;     /* core/theme/blue/darkest-800 */
  --mcp_support_navy: #0b005a;             /* núm. de envío del detalle y botón de buscar */
  --mcp_support_gray_darkest: #1f2a37;     /* core/theme/gray/darkest-800 */
  --mcp_support_text_invert: #ffffff;      /* core/text/invert-white */
  --mcp_support_yellow_surface: #fdfdea;   /* alerts/warning/yellow50 */
  --mcp_support_yellow_border: #ffcd05;    /* core/theme/yellow/light-300 */
  --mcp_support_yellow_text: #723b13;      /* core/theme/yellow/darkest-800 */
  --mcp_support_red: #f05252;              /* core/theme/red/base-500 */
  --mcp_support_red_bold: #e02424;         /* red-600: the attention headline's count (5826:410497) */
  /* Badge pairs finally extracted from the glossary node (5833:466814), which
     spells out every status with its own surface/text. They replace the two that
     were guessed. */
  --mcp_support_red_surface: #fde8e8;      /* indicators/red/surface-100 */
  --mcp_support_red_text: #9b1c1c;         /* indicators/red/text-800 */
  --mcp_support_yellow_badge: #fdf6b2;     /* indicators/yellow/surface-100 */
  --mcp_support_shadow: 0 1px 2px -1px #0000001a, 0 1px 3px 0 #0000001a;
  --mcp_support_shadow_md: 0 2px 4px -2px #0000000d, 0 4px 6px -1px #0000001a;
  --mcp_support_shadow_xl: 0 10px 10px 0 #0000000a, 0 20px 25px -5px #0000001a;
}

.mcp_support_panel {
  display: block;
  /* The host's own page gutter around the embed, measured by #syncHostBleed:
     it differs per host layout and per breakpoint. 0 without JS. */
  --mcp_support_bleed_top: 0px;
  --mcp_support_bleed_left: 0px;
  --mcp_support_bleed_right: 0px;
  /* El diseño mide 1248px porque su lienzo es de 1536, pero el contenedor de
     labels-light (#principal-container) es `w-full` y ya trae su propio
     padding: capar en 1248 dejaba una banda muerta a la derecha en monitores
     anchos. Se sube el tope y se reduce el padding lateral para aprovechar el
     ancho del host sin llegar a líneas incómodamente largas. */
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mcp_support_text);
}

.mcp_support_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

/* Stacked variant (merchant index): the actions ride the TITLE's row instead
   of centering against the taller title+subtitle block; the subtitle wraps to
   its own full-width line, keeping its usual 4px breathing room. */
.mcp_support_header--stacked {
  flex-wrap: wrap;
  row-gap: 0;
}

.mcp_support_header--stacked .mcp_support_subtitle {
  flex-basis: 100%;
}

.mcp_support_header_actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Vertical rule between "Nuevo reporte" and the glossary button, the same hairline
   the design uses for its horizontal separators. Its height matches the buttons
   it sits between (34px, the round one's box). */
.mcp_support_header_rule {
  width: 1px;
  height: 34px;
  flex-shrink: 0;
  background: var(--mcp_support_border_soft);
}


/* Design (Figma export): text-2xl / font-semibold / leading-9 / gray900 /
   line-clamp-1 — 24px 600 over a 36px line, one line max. Color and Inter
   already come from the panel (--mcp_support_text is core/text/primary-gray900). */
.mcp_support_title {
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}



/* Botón secundario del diseño (buttons/secondary/default/surface): blanco con
   borde. Lo usa "Nuevo reporte" en la cabecera del índice. */




.mcp_support_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* Fila = tarjeta con cabecera (fecha + estado) y rejilla de columnas, como el
   board de diseño. Rejilla y no <table>: dentro del embed el ancho lo manda
   labels-light y las columnas deben poder apilarse. */
.mcp_support_row {
  padding: 14px 16px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 12px;
  background: #fff;
}

.mcp_support_row:hover { border-color: var(--mcp_support_primary); }

/* The creator: inline after the date on desktop ("20/abr 4:00 pm Por: ..."),
   stacked under it on the mobile card (design 5794:327930). */
.mcp_support_row_by {
  margin-left: 8px;
  font-size: 12px;
  color: var(--mcp_support_text);
}

.mcp_support_row_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Separator between the header (date, unread bubble, status) and the data
     below. A border on this row, not an <hr>: no extra node, and it spans the
     card's CONTENT width — inset by the row's 16px side padding, which is the
     "almost full width" the design draws. The soft token is the same one the
     card's own border uses; it deliberately does NOT follow the card's
     border-color change on hover, which only targets `.mcp_support_row`. */
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--mcp_support_border_soft);
}

.mcp_support_row_when  { font-size: 12px; color: var(--mcp_support_text_secondary); }
.mcp_support_row_flags { display: flex; align-items: center; gap: 8px; }

/* The consolidated backoffice list: kind chip (which of the four types this
   row is) and the "Esperando respuesta" marker (the conversation's last human
   message is the customer's — the operator owes an answer). */
.mcp_support_row_kind {
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--mcp_support_border_soft);
  font-size: 12px;
  font-weight: 500;
  color: var(--mcp_support_text_secondary);
  white-space: nowrap;
}

.mcp_support_awaiting {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--mcp_support_red_surface);
  color: var(--mcp_support_red_text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* The row's shipment-status box: labels-light streams its badge in; empty
   when the shipment is unknown to the session. */
.mcp_support_cell_status { display: block; margin-top: 4px; }

/* The backoffice filter bar: one GET form, every control combinable. Wraps on
   narrow frames instead of scrolling. A class of ITS OWN: the merchant's
   toolbar has a `<details>` filter button, and sharing a name with it leaked
   this bar's `margin-bottom` into that button, lifting it out of line with the
   search box. */
.mcp_support_filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

/* The controls themselves are labels-light's DESIGN SYSTEM (.ds-select,
   .ds-select-input--sm, .ds-dropdown-menu, .ds-checkbox): the host already
   paints them and re-drawing that skin here is how the bar drifted away from
   the rest of the product. What is left below is ONLY what the DS cannot
   know: this bar's layout, and that our dropdown is a <details> instead of
   the host's JS-driven one. */
.mcp_support_filter { min-width: 152px; }

.mcp_support_filter--check {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

/* The DS label sits above its field. On the checkbox it sits BESIDE the box,
   and reads as a choice rather than a field name.
   TWO classes on the same element on purpose: the host's stylesheet loads
   AFTER this one, so a rule that only ties with `.ds-select .ds-select-label`
   would lose the tie. */
.mcp_support_filter--check.ds-select .ds-select-label { margin-bottom: 0; font-weight: 400; }

/* `summary` is a flex box here only so the trigger fills it and the chevron
   can hang over it; the arrow the browser draws is replaced by the DS icon. */
.mcp_support_filter_pick { display: block; cursor: pointer; list-style: none; }
.mcp_support_filter_pick::-webkit-details-marker { display: none; }
.mcp_support_filter_pick .ds-select-input {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.mcp_support_filter_pick .ds-select-input-icon svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.mcp_support_menu[open] > .mcp_support_filter_pick .ds-select-input-icon svg { transform: rotate(180deg); }

/* The DS dropdown is positioned by the host's JS, which the embed does not
   run: placed under its own trigger here. `.ds-dropdown` pins itself to
   top:0 (it expects a wrapper below the field), so this needs to outrank it —
   hence both classes on the element. */
.mcp_support_filter_options.ds-dropdown {
  top: calc(100% + 4px);
  min-width: 100%;
}

/* Same green check labels-light's pagination dropdown marks its choice with. */
.mcp_support_filter_options .ds-dropdown-item svg { color: var(--mcp_support_success); flex: none; }

.mcp_support_filterbar_clear {
  padding-bottom: 8px;
  font-size: 14px;
  color: var(--mcp_support_primary);
  text-decoration: none;
}
.mcp_support_filterbar_clear:hover { text-decoration: underline; }

.mcp_support_row_grid {
  display: grid;
  /* Proporciones del diseño: ID estrecho, y hueco suficiente para que
     "Tiempo estimado de resolución" quepa en UNA línea. La última columna es
     el botón de la fila. */
  grid-template-columns: 0.8fr 1.2fr 1.2fr 1.4fr 1.2fr auto;
  gap: 12px 16px;
  align-items: start;
}

.mcp_support_cell { display: grid; gap: 2px; min-width: 0; }
.mcp_support_cell--action { align-self: center; justify-self: end; }

.mcp_support_cell_label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mcp_support_indigo_text);
}

.mcp_support_cell_value { font-size: 13px; color: var(--mcp_support_text); }
.mcp_support_cell_value--muted { color: var(--mcp_support_text_secondary); }
.mcp_support_cell_sub { font-size: 12px; color: var(--mcp_support_text_secondary); }

.mcp_support_tracking { color: var(--mcp_support_primary); }

/* Botón de copiar: ahora su contenido es el SVG `square-2-stack`, así que la
   caja la da el icono y no un tamaño de letra. */
.mcp_support_copy {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--mcp_support_text_secondary);
  cursor: pointer;
  padding: 0 2px;
}

.mcp_support_copy:hover { color: var(--mcp_support_primary); }

.mcp_support_eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--mcp_support_border);
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
}

.mcp_support_eye:hover { border-color: var(--mcp_support_primary); }

.mcp_support_row_link { color: var(--mcp_support_primary); text-decoration: none; font-size: 13px; }
.mcp_support_row_link:hover { text-decoration: underline; }
.mcp_support_row_subject { font-weight: 600; }

/* Contador de mensajes del equipo sin leer (burbuja del diseño). */
.mcp_support_unread {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  /* El contador va posicionado sobre la burbuja y se sale por la derecha: sin
     este hueco pisaba el badge de estado que va a continuación. */
  padding-right: 12px;
  color: var(--mcp_support_primary);
}
/* Globo del contador (nodo 5769:1198801): NO es un círculo. Mide 22x17 y tiene
   la esquina INFERIOR IZQUIERDA en ángulo recto — las otras tres redondeadas —,
   de modo que ese vértice apunta a la burbuja de chat que lleva debajo. Va 4px
   a la derecha de su borde izquierdo y sobresale 12px por arriba. */
.mcp_support_unread_count {
  position: absolute;
  left: 4px;
  /* El solape es de UN TERCIO de la burbuja (en el diseño, 4px de sus 11 de
     alto): el vértice apoya en su borde superior, no se la come. */
  bottom: 10px;
  box-sizing: border-box;
  min-width: 22px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px 999px 999px 0;
  background: var(--mcp_support_success);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The glossary's two extra markers (5833:466814). `--notice` is the solid one with
   no number — the counter keeps its shape so the row reads as the same family —
   and `--read` drops the counter altogether, leaving the outline bubble that means
   "nothing new". */
.mcp_support_unread--notice .mcp_support_unread_count {
  min-width: 17px;
  padding: 0;
}

.mcp_support_unread--read { color: var(--mcp_support_text_secondary); }
/* The design draws the read (gray) bubble slightly larger than the counters. */
.mcp_support_unread--read svg { width: 20px; height: 18px; }

/* Glossary modal (5833:466814). A native <dialog>: `::backdrop` and the top layer
   come free, which is what keeps it above labels-light's own stacking contexts. */
.mcp_support_glossary {
  width: min(704px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 16px;
  border: 0;
  border-radius: 8px;
  background: var(--mcp_support_surface);
  box-shadow: var(--mcp_support_shadow);
  color: var(--mcp_support_text);
}

.mcp_support_glossary::backdrop { background: #11192866; }

.mcp_support_glossary_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mcp_support_glossary_title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* The "Marcador de mensaje" subtitle (the h3, not the dialog's h2 inside the
   head row) breathes 16px off the states list above it. */
h3.mcp_support_glossary_title { margin-top: 16px; }

.mcp_support_glossary_close {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mcp_support_text);
  cursor: pointer;
  line-height: 0;
}

.mcp_support_glossary_close:hover { color: var(--mcp_support_primary); }

.mcp_support_glossary_sep {
  height: 1px;
  margin: 16px 0;
  border: 0;
  background: var(--mcp_support_border_soft);
}

/* The design indents the rows 16px from the modal's own padding. */
.mcp_support_glossary_states {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0 16px;
}

/* Badge over its description, not beside it: the descriptions are full sentences
   and the design stacks them. */
.mcp_support_glossary_row {
  display: grid;
  gap: 8px;
}

.mcp_support_glossary_row dt,
.mcp_support_glossary_row dd { margin: 0; }

.mcp_support_glossary_row dd {
  font-size: 14px;
  color: var(--mcp_support_text_secondary);
}

.mcp_support_glossary_markers {
  display: flex;
  align-items: center;
  gap: 21px;
  padding: 0 16px;
}

.mcp_support_glossary_hint {
  margin: 16px 0 0;
  padding: 0 16px;
  font-size: 12px;
}

.mcp_support_glossary_actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Dos tarjetas sobre los tabs (diseño): atención + envíos. */
.mcp_support_cards {
  display: grid;
  /* Design 5794:327911 "Card panel": 753px vs 479px of a 1248 frame — the
     attention slot takes the wide column, the shipments card the narrow one. */
  grid-template-columns: 61fr 39fr;
  gap: 16px;
  margin-bottom: 16px;
}

.mcp_support_card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  background: var(--mcp_support_surface);
}

/* Title/headline + its action, one row; the descriptive line runs full width
   underneath (both cards of the design share this shape). */
.mcp_support_card_toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

/* "Card panel - proactivos" (design 5794:327911 calm, 5826:410497 attention):
   BOTH states of the attention slot paint the same gradient — only the copy
   and the action change. The stops are the design's literal values — it
   paints them raw, no token exists for them. */
.mcp_support_card--calm,
.mcp_support_card--attention {
  border-color: var(--mcp_support_border_soft);
  background: linear-gradient(180deg, #e8f2ff 0%, #f6f1ff 100%);
}

.mcp_support_card_headline {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mcp_support_text);
}

/* The calm card's second line: 16px regular, full-width under the headline. */
.mcp_support_card_note {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--mcp_support_text);
}

/* "Consultar historial": the design's compact secondary button (12px Medium),
   noticeably smaller than the host's ds-button sizes. */
.mcp_support_card_btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid var(--mcp_support_border);
  border-radius: 8px;
  background: var(--mcp_support_surface);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--mcp_support_gray_darkest);
  text-decoration: none;
}

.mcp_support_card_btn:hover { border-color: var(--mcp_support_primary); }

/* The attention headline's count: the design paints it Bold in its strong red
   (#e02424), tighter-tracked, same 24px as the rest of the line. */
.mcp_support_card_count {
  font-weight: 700;
  letter-spacing: -0.24px;
  color: var(--mcp_support_red_bold);
}

/* "Gestionar ahora": the design's compact primary button (12px Medium, same
   size as the calm state's secondary), with the notification dot riding its
   top-right corner — the design's "Indicators" ellipse, an 18px disc ringed
   in the card's white. */
.mcp_support_card_cta {
  position: relative;
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--mcp_support_primary);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
}

.mcp_support_card_cta:hover { background: var(--mcp_support_navy); }

.mcp_support_card_cta--dot::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--mcp_support_red);
  box-shadow: 0 0 0 2px var(--mcp_support_surface);
}

.mcp_support_card_title { margin: 0; font-size: 16px; font-weight: 500; }
.mcp_support_card_hint { margin: 0; font-size: 16px; color: var(--mcp_support_text_secondary); }

/* "Ver más": the design's tertiary button — 12px Medium in primary, no border. */
.mcp_support_card_link {
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--mcp_support_primary);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.mcp_support_card_link:hover { text-decoration: underline; }

/* Design 5770:152124 "Table header": the row the table hangs from — 20px of
   air above the controls, 16px around them, and 8px between the two blocks. */
.mcp_support_toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 20px 16px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 12px;
  background: #fff;
}

/* Design 5794:327911 "buscador + filter button": takes the row space left by
   the tabs and pushes its content RIGHT, 12px apart. */
.mcp_support_toolbar_actions { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 12px; }

.mcp_support_menu { position: relative; }

/* Design 5794:327911 "Filter buttons": white surface, primary-900 border, icon
   and label both primary-900, 14px Medium, 12x8 padding. The icon rides
   currentColor, so one `color` paints the whole control. */
.mcp_support_filter_trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--mcp_support_navy);
  border-radius: 8px;
  background: var(--mcp_support_surface);
  color: var(--mcp_support_navy);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  list-style: none;
  text-decoration: none;
}

/* A filter in force has to READ as one from the closed button: the drawer is
   shut and the pills only ever show the status.
   TINTED, not filled — the same shape orders gives the same state
   (`.ds-button--secondary.ds-button--filter.ds-button--active` → `bg-indigo-100`,
   which is this very token). Filling it navy made a secondary control read as
   the page's primary action, louder than "Nuevo reporte" beside it. */
.mcp_support_filter_trigger--on { background: var(--mcp_support_indigo_surface); }

.mcp_support_filter_trigger::-webkit-details-marker,
.mcp_support_menu > summary::-webkit-details-marker { display: none; }

.mcp_support_menu[open] > .mcp_support_iconbtn { border-color: var(--mcp_support_primary); }

.mcp_support_menu_popover {
  position: absolute;
  z-index: 2;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  gap: 8px;
  min-width: 188px;
  padding: 12px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  background: var(--mcp_support_surface);
  box-shadow: var(--mcp_support_shadow);
}

.mcp_support_menu_popover--sort { left: 0; right: auto; }
.mcp_support_menu_title { margin: 0; font-size: 12px; font-weight: 600; color: var(--mcp_support_text_secondary); }
.mcp_support_menu_option { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px; border-radius: 6px; color: var(--mcp_support_text); font-size: 13px; text-decoration: none; white-space: nowrap; }
.mcp_support_menu_option:hover { background: var(--mcp_support_surface_gray); }

/* Mirrors labels-light's pagination dropdown: a title separated from its
   numeric options, with the selected value marked by a green check — never a
   selected-row background. */
.mcp_support_menu_popover--page-size { gap: 0; min-width: 112px; padding: 4px 0; }
.mcp_support_menu_popover--page-size .mcp_support_menu_title {
  padding: 8px 16px;
  border-bottom: 1px solid var(--mcp_support_border_soft);
  color: var(--mcp_support_text);
  font-size: 14px;
}
.mcp_support_menu_popover--page-size .mcp_support_menu_option { padding: 8px 16px; border-radius: 0; }
.mcp_support_menu_popover--page-size .mcp_support_menu_option svg { color: var(--mcp_support_success); }





/* The box IS the container: the input goes inside with no border of its own and
   the magnifier button sits FLUSH to the right, as the design has it (before, the
   button hung outside the box). */
/* Design 5794:327911 "Search tablas": FIXED 329px wide (the bar does not grow
   with the row), 8px radius, 37px tall, 16px of left breathing room and the
   28px submit tucked 8px from the right edge. */
.mcp_support_search {
  display: flex;
  width: 329px;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 16px;
  border: 1px solid var(--mcp_support_border);
  border-radius: 8px;
  background: var(--mcp_support_surface);
}
.mcp_support_search:focus-within { border-color: var(--mcp_support_primary); }

/* Doubled selector ON PURPOSE: the host's Tailwind form reset styles
   `[type='search']` (16px font, 8px/12px padding) with the same specificity as
   one class and loads after us, so a bare `.mcp_support_search_input` loses and
   the bar inflates to 50px. Same host-bleed family as the :focus note below. */
.mcp_support_search .mcp_support_search_input {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
}

/* HOST CSS BLEED — read this before touching any `:focus` rule below.
   The embed shares labels-light's document, so its Tailwind form styles reach
   our inputs and paint a 1px ring on focus (a `box-shadow`, in the host's own
   blue, with NO border-radius). Inside our rounded wrapper it reads as a second,
   square border. `outline: none` never covered it because it is not an outline.
   Every MCP control therefore has to clear the shadow too, and supply its own
   focus indicator — here the wrapper's `:focus-within` border. */
/* Doubled like the base rule above and for the same reason: the host's own
   `[type='search']:focus` ring ties this specificity and loads later. */
.mcp_support_search .mcp_support_search_input:focus { outline: none; box-shadow: none; border: 0; }

.mcp_support_search_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: var(--mcp_support_navy);
  color: #fff;
  cursor: pointer;
}

/* 18px glyph, over the icon file's own 16.25px. */
.mcp_support_search_submit svg { width: 18px; height: 18px; }

.mcp_support_search_submit:hover { background: var(--mcp_support_primary); }

/* ==========================================================================
   "Gestión de casos" (design 5826:411193) — proactive cases index.
   ========================================================================== */
.mcp_support_pro_header { margin-bottom: 16px; }

/* Tertiary back button, primary-colored as the design paints it. */
.mcp_support_pro_back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--mcp_support_primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.mcp_support_pro_back:hover { text-decoration: underline; }

/* This page's title runs bigger than the inbox's (24px semibold in the node). */
.mcp_support_title--pro { font-size: 24px; font-weight: 600; }

.mcp_support_pro_window {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 500;
  color: var(--mcp_support_text);
}

.mcp_support_pro_metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.mcp_support_metric {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  background: var(--mcp_support_surface);
}

/* 48px tile, 32px glyph centered — the design's Icon Shapes. */
.mcp_support_metric_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 8px;
}

/* The node's three tiles: green (detected), purple (response time), gray
   (resolved) — 5826:411193 "Card por recibir" ×3. */
.mcp_support_metric_icon--green  { background: var(--mcp_support_success_soft); color: var(--mcp_support_success); }
.mcp_support_metric_icon--purple { background: var(--mcp_support_purple_soft);  color: var(--mcp_support_purple); }
.mcp_support_metric_icon--gray   { background: var(--mcp_support_surface_gray); color: var(--mcp_support_text_secondary); }

.mcp_support_metric_label { margin: 0; font-size: 16px; color: var(--mcp_support_text_secondary); }
.mcp_support_metric_value { margin: 0; font-size: 18px; font-weight: 500; color: var(--mcp_support_text); }

/* Holds the search box AND the "Filtros" trigger, so it needs the same
   centring and gap the inbox toolbar has (.mcp_support_toolbar_actions):
   without them the two controls sat flush against each other.

   The controls stay ON THE PAGE's grey: the design's white surface belongs to
   the header band above (node 5722:117067), not here. */
.mcp_support_pro_toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.mcp_support_pro_list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  /* NOT overflow: hidden — it beheaded the row kebab's dropdown. The rounded
     corners are painted by the first/last rows instead. */
}

/* Notification-style row: dot gutter, text block, badge, eye. */
.mcp_support_pro_row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--mcp_support_surface);
}

.mcp_support_pro_row:first-child { border-radius: 8px 8px 0 0; }
.mcp_support_pro_row:last-child { border-radius: 0 0 8px 8px; }
.mcp_support_pro_row:only-child { border-radius: 8px; }

/* The row whose menu is open paints OVER its siblings — rows are stacking
   siblings and the next one covered the dropdown. */
.mcp_support_pro_row:has(.mcp_support_pro_menu[open]) { z-index: 30; }

.mcp_support_pro_row + .mcp_support_pro_row { border-top: 1px solid var(--mcp_support_border_soft); }

.mcp_support_pro_dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 6px;
  border-radius: 50%;
  background: transparent;
}

/* RED, as the node paints it (core/theme/red/base-500) — not the primary. On
   while the case WAITS ON THE USER (status group "action"), the same set the
   attention card counts. */
.mcp_support_pro_dot--on { background: var(--mcp_support_red); }

/* BLUE (indicators/blue/indicator-500): the feed's unread mark — an
   informational case with agent activity not seen yet (5826:441398 "Unread"). */
.mcp_support_pro_dot--info { background: var(--mcp_support_blue_dot); }

/* The feed's closed cases: the node's "Disabled" row, grayed whole. */
.mcp_support_pro_row--done { background: var(--mcp_support_surface_gray); }

/* Feed rows are TOP-aligned (the node draws them items-start): the metadata
   column (time + kebab) makes the row taller than the text, and centering
   pushed the title below the dot. The dot's margin centers its 10px on the
   title's 21px first line. */
.mcp_support_pro_row--feed { align-items: flex-start; }
.mcp_support_pro_row--feed .mcp_support_pro_dot { margin-top: 5px; }

/* The feed row's "Metadata" column (5826:441398): the time rides the row's
   right edge, top-aligned — the kebab the node draws under it is pending its
   actions. The margin cancels pro_meta's under-text spacing. */
.mcp_support_pro_metacol {
  margin-left: auto;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mcp_support_pro_metacol .mcp_support_pro_meta { margin: 0; }

/* The row's kebab (5826:441399): a tertiary 37px button under the time, and
   the DS dropdown hanging from its right edge. */
.mcp_support_pro_menu { position: relative; }

.mcp_support_pro_menu summary { list-style: none; }
.mcp_support_pro_menu summary::-webkit-details-marker { display: none; }

.mcp_support_pro_menu_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border-radius: 8px;
  color: #4b5563; /* core/theme/gray/contrast-600, the node's icon color */
  cursor: pointer;
}

.mcp_support_pro_menu_btn:hover { background: var(--mcp_support_surface_gray); }

.mcp_support_pro_menu_btn svg { width: 18px; height: 18px; }

.mcp_support_pro_menu_list {
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 20;
  min-width: 155px;
  padding: 4px 0;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  background: var(--mcp_support_surface);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.mcp_support_pro_menu_item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--mcp_support_text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mcp_support_pro_menu_item svg { width: 20px; height: 20px; flex-shrink: 0; }

.mcp_support_pro_menu_item:hover { background: var(--mcp_support_surface_gray); }

.mcp_support_pro_body { flex: 1; min-width: 0; }

.mcp_support_pro_title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--mcp_support_text);
}

.mcp_support_pro_sub { margin: 0; font-size: 14px; color: var(--mcp_support_text_secondary); }
.mcp_support_pro_sub strong { font-weight: 500; }

.mcp_support_pro_meta { margin: 4px 0 0; font-size: 12px; color: #9ca3af; }

/* Status chip of the row: white, gray300 border, 14px Medium, flag at the
   right — the node draws the state as this bordered control, not as the
   inbox's colored pill. */
.mcp_support_pro_chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid var(--mcp_support_border);
  border-radius: 8px;
  background: var(--mcp_support_surface);
  color: var(--mcp_support_gray_darkest);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.mcp_support_pro_chip:hover { border-color: var(--mcp_support_primary); }

/* The node's corner indicator (the same "Indicators" ellipse the attention
   card's CTA carries): an 18px disc ringed in white riding the chip's
   top-right corner while the case waits on the user. */
.mcp_support_pro_chip { position: relative; }

.mcp_support_pro_chip--alert::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--mcp_support_red);
  box-shadow: 0 0 0 2px var(--mcp_support_surface);
}

/* ------ Case-response drawer (design 5826:415460) ------
   Mounted over Gestión de casos by the frame controller. The backdrop dims the
   page at the SAME intensity as the host's drawers (`bg-gray-800
   bg-opacity-50`); the panel rides its right edge. */
.mcp_support_casedrawer_backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(31, 41, 55, 0.5);
}

.mcp_support_casedrawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 586px;
  max-width: 100vw;
  padding: 16px;
  overflow-y: auto;
  background: #f9fafb;
  border-left: 1px solid var(--mcp_support_border_soft);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
}

.mcp_support_casedrawer_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mcp_support_casedrawer_title { margin: 0; font-size: 18px; font-weight: 700; color: var(--mcp_support_text); }

.mcp_support_casedrawer_close {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mcp_support_text);
  cursor: pointer;
}

.mcp_support_casedrawer_close svg { width: 18px; height: 18px; }

/* ------ Filters drawer (design 5770:150838) ------
   The case drawer's overlay with the design's own panel: white, 512px, 16px of
   padding, and the sections separated by 1px rules. */
.mcp_support_filterdrawer {
  /* 586px and not the node's 512: the range picker opens BESIDE the periods
     (as the orders drawer does) and the two columns do not fit in 512. */
  width: 586px;
  gap: 8px;
  background: var(--mcp_support_surface);
  border-left: 0;
  border: 1px solid var(--mcp_support_border_soft);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.mcp_support_filterdrawer_form { display: grid; gap: 16px; padding: 0 16px 16px; }

.mcp_support_filterdrawer_rule { margin: 0; border: 0; border-top: 1px solid var(--mcp_support_border_soft); }

/* A `<details>` for the collapsible categories and a `<fieldset>` for the
   dates: same box, and the fieldset drops the UA's own border and padding. */
.mcp_support_filterdrawer_group { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }

.mcp_support_filterdrawer_legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--mcp_support_text);
  cursor: pointer;
  list-style: none;
}

.mcp_support_filterdrawer_legend::-webkit-details-marker { display: none; }

/* The chevron IS the open state: it points DOWN when the category is folded
   and up while it is open, which is how the design draws every one of them.
   (`icons/chevron` is the pager's, which points right — not this one.) */
.mcp_support_filterdrawer_chevron { display: inline-flex; padding: 4px; }
.mcp_support_filterdrawer_chevron svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.mcp_support_filterdrawer_group[open] .mcp_support_filterdrawer_chevron svg { transform: rotate(180deg); }

.mcp_support_filterdrawer_check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--mcp_support_text);
  cursor: pointer;
}

/* The options hang UNDER "Todos", indented, as the design nests them. */
.mcp_support_filterdrawer_options { display: grid; gap: 8px; padding-left: 16px; }

/* The boxes and the date fields wear the HOST's skin (`ds-checkbox-input`,
   `ds-select-input`), like the orders and shipments filters: nothing to redraw
   here, only where they sit. */

/* "Fecha de creación": ONE field, 269px as the design measures it, with the
   calendar icon inside the trigger and the chevron over its right edge. The
   269px belong to the TRIGGER, not to the box: the popover under it holds the
   periods AND the calendar, and is nearly twice as wide. */
.mcp_support_filterdrawer_period > summary { max-width: 269px; }
.mcp_support_filterdrawer_period .ds-select-input { gap: 8px; }
.mcp_support_filterdrawer_period .ds-select-input svg { width: 18px; height: 18px; flex: none; color: var(--mcp_support_text_secondary); }

/* The three states of the orders trigger, measured on it: gray-800 at rest;
   primary text over gray-100 under the cursor; and while it is OPEN, primary
   text with a 2px primary OUTLINE — outside the 1px gray border, which never
   changes. The icons stay gray-500 throughout, so they are left alone.
   Three classes because the host's own `.ds-select .ds-select-input` ties on
   specificity and loads after us. */
.mcp_support_filterdrawer_period > summary .ds-select-input { color: var(--mcp_support_gray_darkest); }

.mcp_support_filterdrawer_period > summary:hover .ds-select-input {
  background: var(--mcp_support_surface_gray);
  color: var(--mcp_support_primary);
}

.mcp_support_filterdrawer_period[open] > summary .ds-select-input {
  color: var(--mcp_support_primary);
  outline: 2px solid var(--mcp_support_primary);
}

/* The period rows are LABELS wrapping a radio (a link would navigate and take
   the drawer with it), painted like the host's: the label on the left, a check
   on the chosen one, and NO control in sight. */
.mcp_support_filterdrawer_period .ds-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

/* Off the screen, not `display: none`: a hidden radio is unreachable by
   keyboard and stops being a form control. */
.mcp_support_filterdrawer_period .ds-dropdown-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mcp_support_filterdrawer_period .ds-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--mcp_support_primary);
  visibility: hidden;
}

/* The check follows the radio, so it is right even after a filter applies
   (only the list behind re-renders, never the open drawer). */
.mcp_support_filterdrawer_period .ds-dropdown-item:has(input:checked) svg { visibility: visible; }

/* The DS menu caps itself at 230px for lists that grow; these are seven fixed
   options and the calendar under them, and scrolling that reads as a defect.
   Three classes on purpose: the host's own `.ds-dropdown .ds-dropdown-menu`
   ties on specificity and loads after us (same bleed the search box notes). */
.mcp_support_filterdrawer_period .ds-dropdown .ds-dropdown-menu { max-height: none; }

/* With the calendar open the popover is wider than its 269px trigger, so it
   stops being pinned to both edges and takes the width of its content. */
.mcp_support_filterdrawer_period .ds-dropdown {
  right: auto;
  /* `min-width: 100%` is the backoffice bar's (a menu as wide as its field);
     here the popover is its own size — narrower than the field with the
     calendar folded, wider with it open. */
  min-width: auto;
  width: max-content;
  max-width: 100%;
}

/* The DS menu scrolls what overflows; here it would only ever cut the
   calendar, which the popover is now wide enough to hold. A ROW: periods on
   the left, the range picker on the right, like the orders drawer. */
.mcp_support_filterdrawer_period .ds-dropdown .ds-dropdown-menu {
  display: flex;
  align-items: flex-start;
  overflow: visible;
}

/* 238px, the host's own column, and NO `flex: 1`: a growing item makes the
   popover's `max-content` blow up to the full row even with the calendar
   folded away. */
.mcp_support_filterdrawer_periods { flex: none; min-width: 238px; }

/* The range sits BESIDE the options, sharing the popover's surface. */
.mcp_support_filterdrawer_dates {
  flex: none;
  border-left: 1px solid var(--mcp_support_border_soft);
}

/* "Limpiar" and the applied chips (the orders drawer's own): what is in force,
   listed on top, each removable on its own. */
.mcp_support_filterdrawer_clear {
  justify-self: start;
  padding: 8px 12px 0 0;
  border: 0;
  background: none;
  color: var(--mcp_support_primary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.mcp_support_filterdrawer_clear:hover { text-decoration: underline; }

/* `filterchip` and not `chip`: the composer already owns `.mcp_support_chip`
   for its attachments (a rounded 12px pill with a grey ✕), and sharing the
   name left each of them wearing half of the other's rules. */
.mcp_support_filterchips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Measured on the orders drawer's own pill: 2/10 padding, 6px radius,
   gray-300 border, and gray-800 (not gray-900) at 14px Medium. */
.mcp_support_filterchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  border: 1px solid var(--mcp_support_border);
  border-radius: 6px;
  background: var(--mcp_support_surface);
  font-size: 14px;
  font-weight: 500;
  /* The host's `text-sm` is 14/20, not the 1.5 the drawer inherits: without
     this the pill stands 1px taller than the orders one. */
  line-height: 20px;
  color: var(--mcp_support_gray_darkest);
}

/* The ✕ is the only thing that reacts: primary-700 at rest, primary-600 under
   the cursor. The pill itself has no hover state there either. */
.mcp_support_filterchip_drop {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mcp_support_primary_dark);
  cursor: pointer;
}
.mcp_support_filterchip_drop:hover { color: var(--mcp_support_primary); }
.mcp_support_filterchip_drop svg { width: 14px; height: 14px; }

/* ------ Range picker (labels-light's Shared::Calendar::DatesRangeComponent) --
   A 284px month grid: 7 columns of 36x32 cells, the two ends of the range
   solid and rounded outwards, everything between them a flat band. */
.mcp_support_calendar { width: 284px; padding: 0 16px 8px; }

.mcp_support_calendar_title { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--mcp_support_text); }

.mcp_support_calendar_head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.mcp_support_calendar_month { flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: var(--mcp_support_text); }

.mcp_support_calendar_nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  color: var(--mcp_support_text);
}
.mcp_support_calendar_nav:hover { background: var(--mcp_support_surface_gray); }
.mcp_support_calendar_nav svg { width: 20px; height: 20px; }
/* One arrow asset, mirrored for the other way. */
.mcp_support_calendar_nav--next svg { transform: scaleX(-1); }

.mcp_support_calendar_grid { display: grid; grid-template-columns: repeat(7, 36px); padding-top: 8px; }

.mcp_support_calendar_weekday {
  height: 32px;
  padding: 4px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--mcp_support_text_secondary);
}

.mcp_support_calendar_day {
  height: 32px;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--mcp_support_text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.mcp_support_calendar_day:hover { background: var(--mcp_support_border_soft); }
/* The days of the neighbouring months are drawn but dead, so they never hover
   either. */
.mcp_support_calendar_day:disabled { color: var(--mcp_support_text_secondary); opacity: 0.5; pointer-events: none; }

/* The band is square between the ends and rounds only outwards, so a range
   reads as one bar instead of a row of pills.
   TWO classes each, and after the hover rule: a hovered end must stay the end
   (`:hover` alone outranked a single class and greyed it out). */
.mcp_support_calendar_day.mcp_support_calendar_day--in { border-radius: 0; background: var(--mcp_support_surface_gray); }
.mcp_support_calendar_day.mcp_support_calendar_day--start,
.mcp_support_calendar_day.mcp_support_calendar_day--end { background: var(--mcp_support_primary); color: #fff; }
.mcp_support_calendar_day.mcp_support_calendar_day--start { border-radius: 8px 0 0 8px; }
.mcp_support_calendar_day.mcp_support_calendar_day--end { border-radius: 0 8px 8px 0; }
/* A range of one day is both ends at once. */
.mcp_support_calendar_day.mcp_support_calendar_day--start.mcp_support_calendar_day--end { border-radius: 8px; }

/* "Card detalle envío": white card, carrier row + tracking row. */
.mcp_support_casedrawer_shipment {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  background: var(--mcp_support_surface);
}

.mcp_support_casedrawer_carrier {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--mcp_support_text);
}

.mcp_support_casedrawer_tracking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 16px;
  color: var(--mcp_support_text);
}

.mcp_support_casedrawer_tracking_value { display: inline-flex; align-items: center; gap: 4px; }

.mcp_support_casedrawer_rule { margin: 0; border: 0; border-top: 1px solid var(--mcp_support_border_soft); }

/* "Encontramos que:" — the same gradient family as the attention card, on the
   node's own border (#d5e2ff) and 6px radius. */
.mcp_support_casedrawer_finding {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid #d5e2ff;
  border-radius: 6px;
  background: linear-gradient(180deg, #e8f2ff 0%, #f6f1ff 100%);
}

.mcp_support_casedrawer_finding_title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--mcp_support_primary);
}

.mcp_support_casedrawer_finding_title svg { width: 24px; height: 24px; flex-shrink: 0; }

.mcp_support_casedrawer_finding_body { margin: 0; padding-left: 32px; font-size: 16px; color: var(--mcp_support_text); }

/* "Bloque respuesta": the agent's last word and the reply box. */
.mcp_support_casedrawer_reply {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  background: var(--mcp_support_surface);
}

.mcp_support_casedrawer_reply_title { margin: 0; font-size: 16px; font-weight: 700; color: var(--mcp_support_text); }

.mcp_support_casedrawer_thread {
  padding: 8px 16px;
  border-radius: 8px;
  background: #f9fafb;
}

/* Inside the drawer the agent's message never folds: the case's answer may
   hinge on the last line (the list of options), so the full text renders by
   default and the thread's "Ver más" control is not painted. The selector
   mirrors the clamp rule's shape to out-rank it without !important. */
.mcp_support_casedrawer_thread
.mcp_support_more:not(:has(.mcp_support_more_fold[open])) .mcp_support_msg_body {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

.mcp_support_casedrawer_thread .mcp_support_more_fold { display: none; }

.mcp_support_casedrawer_form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 8px;
  background: #f9fafb;
}

.mcp_support_casedrawer_label { font-size: 14px; font-weight: 500; color: var(--mcp_support_text); }

/* The DS textarea's 95px base height (component doc). */
.mcp_support_casedrawer_input {
  width: 100%;
  min-height: 95px;
  padding: 8px 16px;
  border: 1px solid var(--mcp_support_border);
  border-radius: 8px;
  background: var(--mcp_support_surface);
  font: inherit;
  font-size: 14px;
  color: var(--mcp_support_text);
  resize: vertical;
}

.mcp_support_casedrawer_input:focus { outline: 2px solid var(--mcp_support_primary); outline-offset: -1px; }

.mcp_support_casedrawer_actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 8px;
}

.mcp_support_pagebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--mcp_support_border);
  border-radius: 8px;
  color: var(--mcp_support_text);
  text-decoration: none;
}

/* Fila de paginación: orden · rango · flechas. */
.mcp_support_pagerow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 8px;
}

.mcp_support_count { font-size: 14px; font-weight: 500; }

.mcp_support_pager { display: flex; gap: 4px; }

.mcp_support_iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 50%;
  color: var(--mcp_support_text);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

.mcp_support_menu > .mcp_support_iconbtn { cursor: pointer; list-style: none; }

.mcp_support_iconbtn:hover { border-color: var(--mcp_support_primary); color: var(--mcp_support_primary); }

.mcp_support_iconbtn--off { color: var(--mcp_support_text_secondary); opacity: .5; }

/* Design 5833:468097. A modifier over the base above (already a centred circle
   with the same hover): the node differs only in size — 9px of padding around a
   16px icon, so 36px — and in using the solid border and darkest gray instead of
   the soft pair. MUST stay AFTER the base rule: same specificity, so declaring
   it earlier let the base win and the button rendered at 28px. */
.mcp_support_iconbtn--round {
  /* 34x34 per the node's own box (9px padding + a 16px icon), border included. */
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  border-color: var(--mcp_support_border);
  background: var(--mcp_support_surface);
  color: var(--mcp_support_gray_darkest);
  /* The icon is the only content: without this the line box adds height and the
     circle turns into an oval. */
  line-height: 0;
  cursor: pointer;
}

/* Un solo chevron exportado sirve para las dos flechas. */
.mcp_support_iconbtn--prev svg { transform: rotate(180deg); }
/* El icono de orden se voltea cuando la lista va de más antiguo a más reciente. */
.mcp_support_iconbtn--flip svg { transform: scaleY(-1); }

/* Separador vertical entre el orden y el rango (diseño). */
.mcp_support_pagerow_sep {
  width: 1px;
  height: 24px;
  background: var(--mcp_support_border_soft);
}

.mcp_support_subtitle { margin: 4px 0 0; font-size: 16px; color: var(--mcp_support_text); }

/* ==========================================================================
   Móvil (diseño 5782:214609). El embed hereda el ancho del contenedor de
   labels-light, así que el corte va por el ancho del propio panel: en pantalla
   estrecha la fila deja de ser rejilla de columnas y se apila con la etiqueta
   encima del valor, rematada por un botón de ancho completo.
   ========================================================================== */
@media (max-width: 640px) {
  .mcp_support_panel { padding: 16px; }

  /* The panel's padding is uniform here, so the band cancels 16px a side. */
  .mcp_support_dethead,
  .mcp_support_pro_headband {
    margin-top: calc(-16px - var(--mcp_support_bleed_top));
    margin-right: calc(-16px - var(--mcp_support_bleed_right));
    margin-left: calc(-16px - var(--mcp_support_bleed_left));
  }

  /* Cabecera: el botón pasa a icono, como en el diseño móvil. */
  .mcp_support_header { align-items: flex-start; }
  .mcp_support_title { font-size: 20px; }

  .mcp_support_cards { grid-template-columns: 1fr; }

  .mcp_support_card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* The attention/calm headline shares the page title's mobile scale, and the
     top row is allowed to wrap so the CTA never squeezes the count line. */
  .mcp_support_card_headline { font-size: 20px; }
  .mcp_support_card_toprow { flex-wrap: wrap; gap: 8px; }

  .mcp_support_toolbar { flex-direction: column; align-items: stretch; }

  /* Mobile order: the search row goes ABOVE the pills. The bar drops its fixed
     329px and flexes into whatever the filter button leaves, instead of
     overflowing the panel. */
  .mcp_support_toolbar_actions { order: -1; }

  .mcp_support_search {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  /* The host's pill tabs are ~630px of intrinsic width (7 states): on a phone
     they cannot fit, and left alone they dragged the whole toolbar into
     horizontal page overflow. They scroll on their own instead. */
  .mcp_support_toolbar .ds-pill-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  /* --- "Gestión de casos" on a phone --------------------------------------- */

  /* The desktop headline size reads as a banner on a small screen; fall back
     to the inbox title size. */
  .mcp_support_title--pro { font-size: 20px; }

  /* The search drops its fixed 329px and takes the row, like the inbox's. */
  .mcp_support_pro_toolbar .mcp_support_search {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  /* Notification rows stack: text block on top (full width), the actions —
     status chip stretched plus the eye — on their own row below, mirroring the
     inbox's mobile card footer. */
  .mcp_support_pro_row {
    flex-wrap: wrap;
    padding: 16px;
  }

  .mcp_support_pro_body { flex-basis: calc(100% - 22px); }

  .mcp_support_pro_chip {
    flex: 1;
    justify-content: center;
  }

  /* The inbox's mobile rules stretch ANY eye into a full-width button, which
     here stacked a second full-width action over the chip — both opening the
     same detail. One action is enough on a phone, and the chip is the one
     carrying text. */
  .mcp_support_pro_row .mcp_support_eye { display: none; }

  /* Mobile design: the action buttons keep only their icon. `font-size: 0` and
     not `display: none` on the label — it is a bare text node (nothing to
     target), and this way screen readers still announce it. */
  .mcp_support_header_actions .ds-button,
  .mcp_support_filter_trigger {
    font-size: 0;
    gap: 0;
    padding: 8px;
  }

  /* Design 5794:327930 "Card reporte - Mobile": each row becomes a CARD —
     white, 8px radius, soft double shadow instead of a border, fields stacked
     in one 16px-gapped column, and the row action grows from the desktop eye
     icon into a full-width "Mostrar detalle" button. */
  .mcp_support_row {
    padding: 16px;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .mcp_support_row_grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .mcp_support_cell { width: 100%; }

  .mcp_support_row_by {
    display: block;
    margin-left: 0;
  }


  /* The design reads values at 14px on the card (13px is the table size). */
  .mcp_support_cell_value { font-size: 14px; }

  /* The eye becomes the card's footer button. The label ships in `data-label`
     (the view sets it for exactly this) and ::before renders it: on desktop
     the same element stays icon-only without a second node in the DOM. */
  .mcp_support_cell--action { width: 100%; }

  .mcp_support_eye {
    display: flex;
    width: 100%;
    height: auto;
    gap: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--mcp_support_text);
  }

  .mcp_support_eye::before { content: attr(data-label); }

  /* Las dos columnas de la tarjeta del envío no caben en el drawer móvil: el
     número de rastreo se parte a media palabra antes que apilarse solo. */
  .mcp_support_shipmentcard_grid { flex-direction: column; }
  .mcp_support_shipmentcard_grid .mcp_support_cell { width: 100%; }

  /* En móvil el botón principal ocupa el ancho, como el diseño. Aplica a los
     botones del design system del host, que son los que usamos ahora. */
  .mcp_support_composer_bar .ds-button,
  .mcp_support_bannerrow .ds-button { width: 100%; }
}

/* Badge de estado: punto de color + etiqueta. Medidas del componente del diseño
   ("Badge indicators", 5819:22818): 2 de padding vertical, 10 horizontal, 8 de
   gap, texto 12/500 y el punto de 12 — el punto es un círculo completo, no un
   puntito. */
.mcp_support_badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* El punto NO es del color del texto: el diseño le da un tono propio, más claro.
   Solo está extraído el del indigo (el asset del nodo trae `#6875F5`); las demás
   variantes caen al color del texto hasta que se extraigan los suyos. */
.mcp_support_badge::before {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mcp_support_badge_dot, currentcolor);
}

/* Palette from the glossary node (5833:466814), which is the first place the
   design names all six pairs at once. It CORRECTS three that had been guessed:
   `progress` was indigo and is yellow, `indemnified` was green and is the same
   gray as `finished`, and indigo now belongs to `reopened`. The glossary is the
   screen that teaches these colours, so it and the badges cannot disagree. */
.mcp_support_badge--created     { background: var(--mcp_support_blue_surface); color: var(--mcp_support_blue_text);
                                  --mcp_support_badge_dot: var(--mcp_support_blue_dot); }
.mcp_support_badge--reopened    { background: var(--mcp_support_indigo_surface); color: var(--mcp_support_indigo_text);
                                  --mcp_support_badge_dot: var(--mcp_support_indigo_indicator); }
.mcp_support_badge--progress    { background: var(--mcp_support_yellow_badge); color: var(--mcp_support_yellow_text); }
.mcp_support_badge--action      { background: var(--mcp_support_red_surface); color: var(--mcp_support_red_text);
                                  --mcp_support_badge_dot: var(--mcp_support_red); }
.mcp_support_badge--finished    { background: var(--mcp_support_surface_gray); color: var(--mcp_support_text_secondary); }
.mcp_support_badge--indemnified { background: var(--mcp_support_surface_gray); color: var(--mcp_support_text_secondary); }

/* Confirmación al crear (diseño 5812:341826). */
.mcp_support_success {
  text-align: center;
  padding: 24px 16px;
  border-radius: 12px;
  background: var(--mcp_support_surface);
}

.mcp_support_success_art { display: flex; justify-content: center; margin-bottom: 16px; }
/* 77x77 es el lienzo del nodo 6274:255149; las tres capas están compuestas con
   los offsets de ese tamaño, así que no se escala. */
.mcp_support_success_art svg { width: 77px; height: 77px; }

.mcp_support_success_title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--mcp_support_text);
}

.mcp_support_success_hint {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--mcp_support_text_secondary);
}

/* Los dos bloques de la confirmación: tarjetas grises DENTRO de la tarjeta
   blanca, como el diseño (no bloques blancos con borde sobre blanco). */
.mcp_support_summary,
/* "This motive is already reported" warning (design 6026:111687). The design
   system's "Alerts" component in its Warning variant, with NO icon and no button:
   the node carries only the text. It lives inside the form card, under the
   select. */
.mcp_support_alert {
  margin: 0;
  padding: 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.mcp_support_alert--info {
  border: 1px solid var(--mcp_support_info_border);
  background: var(--mcp_support_info_surface);
  color: var(--mcp_support_blue_darkest);
}

.mcp_support_alert--warning {
  border: 1px solid var(--mcp_support_yellow_border);
  background: var(--mcp_support_yellow_surface);
  color: var(--mcp_support_yellow_text);
}

/* "Detalles del reporte" from the same node. It shares the confirmation's grey
   surface, but its type is 16 and not 14: there it summarises what the user just
   created, here it stands in for the whole form.
   The 16 gap is a margin because the node is a flex column and
   `.mcp_support_formcard` is a block, so its children stack flush — without it
   the warning, the details and the ETA read as one paragraph and the cards lose
   their edges. */
.mcp_support_reportcard,
.mcp_support_etacard {
  margin: 16px 0 0;
  padding: 16px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  background: var(--mcp_support_surface_soft);
  text-align: left;
}

.mcp_support_reportcard_title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--mcp_support_text);
}

.mcp_support_reportcard_rows { display: grid; gap: 16px; margin: 0; }
.mcp_support_reportcard_rows > div { display: flex; justify-content: space-between; gap: 12px; }
.mcp_support_reportcard_rows dt { font-size: 16px; color: var(--mcp_support_text_secondary); }
.mcp_support_reportcard_rows dd { margin: 0; font-size: 16px; font-weight: 500; color: var(--mcp_support_text); }

.mcp_support_etacard_head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--mcp_support_text);
}

.mcp_support_etacard_head svg { width: 24px; height: 24px; }
.mcp_support_etacard strong { font-size: 16px; font-weight: 600; color: var(--mcp_support_text); }

.mcp_support_summary_eta {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  background: var(--mcp_support_surface_soft);
  text-align: left;
}

.mcp_support_summary_title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mcp_support_text);
}

.mcp_support_summary_rows { display: grid; gap: 8px; margin: 0; }
.mcp_support_summary_rows > div { display: flex; justify-content: space-between; gap: 12px; }
.mcp_support_summary_rows dt { font-size: 14px; color: var(--mcp_support_text_secondary); }
.mcp_support_summary_rows dd { margin: 0; font-size: 14px; font-weight: 500; }

.mcp_support_summary_eta { margin-bottom: 0; font-size: 14px; }

/* Reloj + etiqueta en una línea, el plazo debajo (diseño 5812:341835). */
.mcp_support_summary_eta_head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mcp_support_text);
}

/* El reloj no se encoge si la etiqueta se parte en dos líneas. */
.mcp_support_summary_eta_head svg { flex-shrink: 0; }

.mcp_support_summary_eta strong { display: block; margin-top: 8px; color: var(--mcp_support_text); }

.mcp_support_actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* Panel lateral de creación. El embed comparte DOM con labels-light, así que
   `position: fixed` se ancla al viewport y el drawer cubre la app entera,
   como en el diseño. */
/* Panel que solo ancla el drawer: sus dos hijos son fijos, así que el panel no
   debe medir nada. Sin esto el padding/max-width de página mete una banda
   vacía de 48px donde el host inyecta el drawer y empuja su contenido. */
.mcp_support_panel--overlay {
  margin: 0;
  padding: 0;
  max-width: none;
}

.mcp_support_backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.35);
  /* Por encima del navbar del host (usa hasta z-50): si no, su barra superior
     tapa la cabecera del drawer. */
  z-index: 1000;
}

.mcp_support_drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* Un tercio del ancho, con topes: por debajo de 420px el formulario se
     apretuja y por encima de 720px queda un panel desierto. */
  width: clamp(420px, 33.333vw, 720px);
  max-width: 100vw;
  overflow-y: auto;
  padding: 24px;
  /* Cuerpo gris claro con las tarjetas en blanco encima, como el diseño. */
  background: var(--mcp_support_surface_soft);
  box-shadow: var(--mcp_support_shadow_xl);
  z-index: 1001;
}

.mcp_support_close {
  border: 0;
  background: transparent;
  color: var(--mcp_support_text_secondary);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.mcp_support_close:hover { color: var(--mcp_support_primary); }

/* Cabecera del drawer: volver · título · cerrar. */
.mcp_support_drawer_head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.mcp_support_drawer_head .mcp_support_title { font-size: 16px; margin: 0; }

/* Back and close are SVG icons (not the ← and × glyphs): `display: flex` so the
   box is the icon's and not a line of text's. */
.mcp_support_back,
.mcp_support_close {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Purple arrow and dark-gray x, as the design has them (the SVGs use
   currentColor). */
.mcp_support_back { color: var(--mcp_support_primary); }

/* The class is shared with the DETAIL, where the link sits above the title and
   carries a bottom margin. In this header it is a flex row: `align-items: center`
   centres the MARGIN box, so that margin pushed the arrow 6px above the title. */
.mcp_support_drawer_head .mcp_support_back { margin: 0; }
.mcp_support_close { margin-left: auto; color: var(--mcp_support_text); }
.mcp_support_back:hover, .mcp_support_close:hover { color: var(--mcp_support_primary); }

/* Tarjeta del formulario. */
.mcp_support_formcard {
  padding: 16px;
  border-radius: 12px;
  background: var(--mcp_support_surface);
  border: 1px solid var(--mcp_support_border_soft);
}

.mcp_support_formcard_title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 500;
}

/* Insignia redonda del icono de la tarjeta (5769:1195894). */
.mcp_support_formcard_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--mcp_support_teal_surface);
  color: var(--mcp_support_teal);
}

/* Tarjeta del centro de ayuda. */
/* Tarjeta del Centro de ayuda (nodo 5769:1196045). El degradado, el borde y el
   radio salen del nodo; son hex crudos porque ahí el diseño no usa tokens
   nombrados (antes era un azul plano inventado). */
.mcp_support_helpcard {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #d5e2ff;
  border-radius: 6px;
  background: linear-gradient(180deg, #e8f2ff, #f6f1ff);
}

/* Layout only: the card's art is an illustration slot and is sized with the
   others, per brand (see .mcp_support_illustration). */
.mcp_support_helpcard .mcp_support_illustration { flex-shrink: 0; }

.mcp_support_helpcard_title { margin: 0 0 8px; font-size: 16px; font-weight: 500; }

.mcp_support_helpcard_link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mcp_support_primary);
  font-size: 16px;
  text-decoration: none;
}

.mcp_support_helpcard_link:hover { text-decoration: underline; }

/* Drawer welcome banner. Each brand draws it differently via
   `mcp_support_help--<namespace>`; this rule only holds the shared box. */
.mcp_support_help {
  display: flex;
  margin-bottom: 20px;
}

/* Skydropx: the original borderless row, centred, horizontal gradient. */
.mcp_support_help--skydropx {
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--mcp_support_indigo_surface), var(--mcp_support_surface));
}

.mcp_support_help--skydropx .mcp_support_help_title { font-size: 14px; font-weight: 600; }
.mcp_support_help--skydropx .mcp_support_help_hint { font-size: 13px; color: var(--mcp_support_text_secondary); }

/* Solo Envíos (node 6216:443823): art on top, vertical gradient, bordered and
   clipped to the radius. The border colour has no named token yet. */
.mcp_support_help--solo_envios {
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  overflow: clip;
  border: 1px solid #bad6ff;
  border-radius: 6px;
  background: linear-gradient(180deg, #f9fafb, rgba(234, 244, 255, 0.2));
}

/* min-width: 0 so a long tracking number wraps instead of pushing the art out. */
.mcp_support_help--solo_envios .mcp_support_help_text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  overflow-wrap: anywhere;
}

.mcp_support_help--solo_envios .mcp_support_help_title {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #111928;
}

.mcp_support_help--solo_envios .mcp_support_help_hint {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.8);
}

.mcp_support_help_art { flex-shrink: 0; display: flex; }
.mcp_support_help_art svg { width: 52px; height: auto; }
.mcp_support_help_title { display: block; }

/* The drawer's tracking search: a single field with the magnifier inside. */
.mcp_support_trackfield {
  position: relative;
  display: block;
  margin-bottom: 12px;
}

/* DOUBLED selector on purpose (same bleed as `.mcp_support_search_input`):
   the host's Tailwind form reset styles `[type='search']` with the same
   specificity as one class and loads after this sheet, so a single class
   lost — the input rendered square, 16px, host-bordered. */
.mcp_support_trackfield .mcp_support_trackfield_input {
  width: 100%;
  padding: 11px 12px 11px 38px;
  background: var(--mcp_support_surface);
  border: 1px solid var(--mcp_support_border);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--mcp_support_text);
}

.mcp_support_trackfield_input::placeholder { color: var(--mcp_support_text_secondary); }
/* Its own outline IS the indicator here; the host's ring would sit inside it as
   a second square line (see the bleed note by `.mcp_support_search_input`). */
.mcp_support_trackfield .mcp_support_trackfield_input:focus {
  outline: 2px solid var(--mcp_support_primary);
  border-color: transparent;
  box-shadow: none;
}

.mcp_support_trackfield_icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--mcp_support_text_secondary);
  line-height: 0;
  cursor: pointer;
}

.mcp_support_trackfield_icon svg { width: 16px; height: 16px; }

.mcp_support_trackfield_icon:hover { color: var(--mcp_support_primary); }

/* The picker under the search: the history's cards stacked newest-first. The
   sentinel is invisible — it only exists for the observer to see. */
.mcp_support_shiplist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mcp_support_shiplist_more { height: 1px; }

/* Drawer guiado (wizard): pregunta → búsqueda de envío → formulario. */
.mcp_support_question { font-size: 15px; font-weight: 600; margin: 0 0 12px; }

.mcp_support_choices { display: flex; gap: 12px; margin-bottom: 16px; }

.mcp_support_choice {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--mcp_support_border);
  border-radius: 8px;
  background: #fff;
  color: var(--mcp_support_text_dark);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.mcp_support_choice:hover { border-color: var(--mcp_support_primary); color: var(--mcp_support_primary); }

/* The picked answer of the wizard's question ("Sí" while the shipment is
   chosen). AFTER the base and the hover on purpose: same specificity, so only
   cascade order lets it win — declared earlier, the base overrode it and the
   selection was never visible. */
.mcp_support_choice--on {
  border-color: var(--mcp_support_primary);
  color: var(--mcp_support_primary);
}

/* Single-checkbox consent ("Entiendo que el retorno genera cargos…"): the
   sentence IS the label and sits next to the box, so the whole block is a
   clickable label. The box does not stretch with the text. */
.mcp_support_checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--mcp_support_text_dark);
}

/* Only what the skin does not decide: the box keeps its size in a flex row and
   sits on the first line of a sentence that wraps. Its LOOK — border, radius,
   checked colour — is the design system's now (`ds-checkbox-input`), not an
   `accent-color` over the browser default. */
.mcp_support_checkbox .ds-checkbox-input { flex-shrink: 0; margin-top: 2px; }

/* The backoffice badge-dropdown: the detail's status IS the menu that moves
   it. The summary inherits the badge (colour per status) and only adds the
   chevron; the options are forms (button_to), so the inner button is stripped
   down to read as a menu option. */
.mcp_support_status_menu { position: relative; display: inline-block; }

.mcp_support_status_trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}

.mcp_support_status_trigger::-webkit-details-marker { display: none; }

.mcp_support_status_trigger svg { width: 12px; height: 12px; transform: rotate(90deg); }

.mcp_support_status_options { right: 0; left: auto; min-width: 200px; }

/* The report's two controls, together right of the title: the board it lives
   on and the status it is in. */
.mcp_support_header_controls { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* The pipeline reads as data (small label + value), not as a badge: it is not
   a status of the report, it is WHERE it is handled. */
.mcp_support_pipeline_trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--mcp_support_border);
  border-radius: 8px;
  background: var(--mcp_support_surface);
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  white-space: nowrap;
}
.mcp_support_pipeline_trigger::-webkit-details-marker { display: none; }
.mcp_support_pipeline_trigger:hover { border-color: var(--mcp_support_primary); }
.mcp_support_pipeline_menu[open] > .mcp_support_pipeline_trigger { border-color: var(--mcp_support_primary); }
.mcp_support_pipeline_trigger svg { width: 12px; height: 12px; transform: rotate(90deg); }
.mcp_support_pipeline_label { color: var(--mcp_support_text_secondary); }
.mcp_support_pipeline_value { font-weight: 500; color: var(--mcp_support_text); }

.mcp_support_pipeline_options { right: 0; left: auto; min-width: 220px; max-height: 320px; overflow-y: auto; }

/* The changelog, under the report's details in the side card: newest first,
   the time leading and the author behind it. */
.mcp_support_changelog { margin-top: 24px; }
.mcp_support_changelog_list {
  display: grid;
  gap: 12px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.mcp_support_changelog_item {
  display: grid;
  gap: 2px;
  padding-left: 12px;
  border-left: 2px solid var(--mcp_support_border_soft);
  font-size: 13px;
}
.mcp_support_changelog_when { color: var(--mcp_support_text_secondary); font-size: 12px; }
.mcp_support_changelog_what { color: var(--mcp_support_text); font-weight: 500; }
.mcp_support_changelog_who { color: var(--mcp_support_text_secondary); }

.mcp_support_status_form { display: block; }

.mcp_support_status_form .mcp_support_menu_option {
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

/* Each option wears its status pill: the colour IS the meaning. The hover goes
   on the row, not the pill, so the badge reads as it does in the list. */
.mcp_support_status_option { display: flex; align-items: center; padding-block: 2px; }

.mcp_support_status_option:hover { background: var(--mcp_support_surface_soft, #f3f4f6); border-radius: 6px; }


/* Contexto del envío elegido, fijo arriba del formulario. */
/* Tarjeta "card envío drawer" (nodo 5812:345702): blanca, radio 8, 16 de padding
   y 8 entre encabezado y contenido. El diseño la separa del fondo con SOMBRA, no
   con borde (el mismo par de drop shadows del design system). */
.mcp_support_shipmentcard {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 8px;
  background: var(--mcp_support_surface);
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .1);
}

/* Every row is a grid item and its `min-width: auto` floors the card's single
   column at the row's content: the 200px cells + gap outgrow a narrow drawer,
   the column widens past the card, and the header (filling that wider track)
   pushed the status badge through the 16px padding. Zero floors the track at
   the card's own width; the rows' flex children already know how to shrink. */
.mcp_support_shipmentcard > * { min-width: 0; }

/* "Card detalle envío" (6024:328806): the form header's collapsible shipment
   card. White card, 16px paddings and gaps, 16px text — closed it shows the
   carrier row and the tracking row; the chevron unfolds the rest. */
.mcp_support_detailcard {
  display: grid;
  gap: 16px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  background: var(--mcp_support_surface);
}

.mcp_support_detailcard > * { min-width: 0; }

/* The whole carrier row is the disclosure control (a plain div when the
   snapshot brought nothing to unfold — same markup, no chevron). */
.mcp_support_detailcard_toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: var(--mcp_support_text);
}

button.mcp_support_detailcard_toggle { cursor: pointer; }

.mcp_support_detailcard_carrier {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
}

.mcp_support_detailcard_chevron {
  display: inline-flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform 0.15s ease;
}

.mcp_support_detailcard_chevron svg { width: 100%; height: 100%; }

.mcp_support_detailcard_toggle[aria-expanded="true"] .mcp_support_detailcard_chevron {
  transform: rotate(180deg);
}

/* Label left, value right — the node's 16px regular rows. */
.mcp_support_detailcard_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 16px;
  color: var(--mcp_support_text);
}

.mcp_support_detailcard_value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* `display` only when shown: an unconditional one would override the `hidden`
   attribute the toggle flips. */
.mcp_support_detailcard_more:not([hidden]) {
  display: grid;
  gap: 16px;
}

/* Origen y destino: two bordered boxes joined by the arrow, ALWAYS one row
   (the design's 6024:328771). Equal halves with basis 0 instead of the node's
   fixed 241px: on a narrow drawer the addresses wrap inside their box, the
   row never breaks. */
.mcp_support_detailcard_route {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mcp_support_detailcard_stop {
  flex: 1 1 0;
  min-width: 0;
  /* Both boxes the same height whatever their address wraps to (the arrow
     stays centered between equals, as the node draws it). */
  align-self: stretch;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
}

.mcp_support_detailcard_stoptitle {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--mcp_support_text);
}

.mcp_support_detailcard_stopicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mcp_support_secondary_soft);
  color: var(--mcp_support_primary);
}

.mcp_support_detailcard_stopicon svg { width: 20px; height: 20px; }

.mcp_support_detailcard_address {
  font-size: 14px;
  color: var(--mcp_support_text);
  overflow-wrap: break-word;
}

.mcp_support_detailcard_address--muted { color: var(--mcp_support_text_secondary); }

.mcp_support_detailcard_arrow {
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--mcp_support_text);
}

.mcp_support_detailcard_arrow svg { width: 100%; height: 100%; }

/* Motive combobox (node 5754:1172848): the MENU is the host design system's
   ds-dropdown; here it is only anchored under the input (the DS ships it with
   top-0, meant for its own wrapper) and placeholder, check and chevron rotation
   are painted — items, hover and shadow are the host's rules. */
.mcp_support_reason_dropdown { top: calc(100% + 4px); }

.mcp_support_reason_trigger { display: flex; align-items: center; }

.mcp_support_reason_placeholder {
  color: var(--mcp_support_text_secondary);
  font-size: 14px;
}

.mcp_support_reason_value { font-size: 14px; }

.mcp_support_reason_trigger[aria-expanded="true"] .mcp_support_select_icon svg {
  transform: rotate(180deg);
}

.mcp_support_reason_check {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--mcp_support_primary);
}

/* The unselected options carry this span with the `hidden` ATTRIBUTE
   (_field.html.erb), and the explicit display above beats the browser's own
   `[hidden] { display: none }` (author rules outrank UA rules) — in sbx that
   showed the check on EVERY option. Locally the host's newer Tailwind
   preflight (`[hidden] { … !important }`) masked it. Own the state instead
   of depending on the host's CSS version. */
.mcp_support_reason_check[hidden] { display: none; }

.mcp_support_reason_check svg { width: 100%; height: 100%; }

/* Encabezado de 24 de alto: a la izquierda el origen del envío y quién lo creó,
   a la derecha el estado de rastreo. */
.mcp_support_shipmentcard_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}

.mcp_support_shipmentcard_origin {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
}

/* The origin is filled in by labels-light (its own markup lands inside this box),
   so the height is reserved here: without it the header would jump when the
   fragment arrives. 24 is the platform square the design draws. */
.mcp_support_shipmentcard_origin { min-height: 24px; }

/* Placeholder while that fetch is in flight. */
.mcp_support_skeleton {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg,
              var(--mcp_support_surface_gray) 25%,
              var(--mcp_support_border_soft) 37%,
              var(--mcp_support_surface_gray) 63%);
  background-size: 400% 100%;
  animation: mcp_support_skeleton_sweep 1.4s ease infinite;
}

.mcp_support_skeleton--origin { width: 140px; height: 24px; }

/* The status badge is also labels-light's stream (same fetch, second target):
   a pill-shaped placeholder holds its spot so the header does not jump.
   `min-width: 0` + `overflow: hidden` because the box must SHRINK inside the
   head's flex: whatever the host paints stays inside the card's 16px padding. */
.mcp_support_shipmentcard_status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
  min-width: 0;
  overflow: hidden;
}
.mcp_support_skeleton--badge { width: 96px; height: 22px; border-radius: 11px; }

/* The host's badge is a `w-max` pill (max-content never shrinks on its own):
   cap it to the box and ellipsize its label instead of overflowing the card.
   The indicator dot keeps its size — only the text gives ground. */
.mcp_support_shipmentcard_status > div { max-width: 100%; min-width: 0; }
.mcp_support_shipmentcard_status > div > div { flex-shrink: 0; }
.mcp_support_shipmentcard_status > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes mcp_support_skeleton_sweep {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .mcp_support_skeleton { animation: none; }
}

/* Cuadrito gris con el logo de la plataforma de origen ("Plataformas / sm" del
   diseño): 24, radio 4 y el logo centrado con aire arriba y abajo. El asset lo
   sirve labels-light, así que si no carga queda el cuadro vacío y nada se
   descuadra. */
.mcp_support_shipmentcard_platform {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 3px;
  border-radius: 4px;
  background: var(--mcp_support_surface_gray);
}

.mcp_support_shipmentcard_platform_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mcp_support_shipmentcard_sep { color: var(--mcp_support_text_secondary); }

.mcp_support_shipmentcard_author {
  overflow: hidden;
  color: var(--mcp_support_text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Las dos columnas del diseño: bloques de 200 repartidos a los extremos, no
   fracciones iguales (nodo 5812:345702: `Content` es flex con
   justify-between y cada columna mide 200). Los gaps internos también son
   del nodo: 8 en paquetería, 4 en rastreo — de ahí que se pisen los 2 que la
   celda hereda de la tabla del índice. */
.mcp_support_shipmentcard_grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.mcp_support_shipmentcard_grid .mcp_support_cell {
  width: 200px;
  max-width: 100%;
  gap: 8px;
}

.mcp_support_shipmentcard_grid .mcp_support_cell--tracking { gap: 4px; }

/* En la tarjeta el nombre de la paquetería y su servicio van a 14 (el diseño los
   sube respecto de la tabla del índice, que es de donde vienen estas clases). */
.mcp_support_shipmentcard .mcp_support_cell_value { font-size: 14px; font-weight: 600; }
.mcp_support_shipmentcard .mcp_support_cell_sub   { font-size: 14px; }

.mcp_support_shipmentcard_tracking {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

/* Paquetería con su logo (diseño `card envío drawer`, 5812:345789). El SVG
   viene del sprite del host vía `<use>`: si esa paquetería no está en el
   sprite no pinta nada y queda el nombre, así que el gap no debe reservar
   hueco — por eso el logo dimensiona el hueco, no un contenedor fijo. */
.mcp_support_carrier { display: flex; align-items: center; gap: 8px; }
.mcp_support_carrier_text { display: grid; gap: 2px; }

.mcp_support_carrier_logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 6px;
}

/* El de la tarjeta de detalle es el "Small / Cuadradito" del diseño. */
.mcp_support_carrier_logo--xs { width: 18px; height: 18px; border-radius: 4px; }
.mcp_support_carrier_logo--sm { width: 24px; height: 24px; border-radius: 4px; }

/* El de la tarjeta del envío es el "Medium / Cuadradito" (48). */
.mcp_support_carrier_logo--md { width: 48px; height: 48px; border-radius: 4px; }

/* La MISMA tarjeta como resultado de la búsqueda: es el enlace que continúa el
   flujo, así que hereda el color del texto y marca el hover con la sombra (el
   diseño no le da borde a la tarjeta). */
.mcp_support_shipmentcard--link {
  display: grid;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.mcp_support_shipmentcard--link:hover {
  box-shadow: 0 0 0 1px var(--mcp_support_primary), 0 1px 3px rgba(0, 0, 0, .1);
}

/* The SAME card as the picker's BUTTON inside the form: a <button> brings its
   own font, alignment and border from the UA (and the host reset), so they are
   neutralised here; the chosen one keeps the design's violet border (node
   1039581:135443) persistently, not only on hover. */
button.mcp_support_shipmentcard--link {
  font: inherit;
  text-align: left;
  width: 100%;
  border: none;
  background: #fff;
}

.mcp_support_shipmentcard--picked,
.mcp_support_shipmentcard--picked:hover {
  box-shadow: 0 0 0 2px var(--mcp_support_primary), 0 1px 3px rgba(0, 0, 0, .1);
}

/* The picker's search box lives INSIDE the form (it is not the wizard's form):
   same look, without the extra margin the wizard uses to clear its step. */
.mcp_support_trackfield--infield { margin: 4px 0 8px; }

/* An extra charge's card (node 1039410): type + status on top, and the
   shipment card's same grid of cells below. */
.mcp_support_chargecard { margin-top: 8px; }

.mcp_support_chargecard_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

/* Type name preceded by its shape (node 1039581:134884): a 24px rounded square
   whose colour is the charge type's, with the glyph in white. */
.mcp_support_chargecard_type {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--mcp_support_text);
}

.mcp_support_chargeicon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #fff;
}

.mcp_support_chargeicon svg { width: 20px; height: 20px; display: block; }

/* The charge card reads the two lines under "Núm de rastreo" the other way
   round from the shipment card: there the sub is the service (regular, grey),
   here it is the carrier (semibold, gray900). Scoped so the shipment card,
   which shares these classes, keeps its own hierarchy. */
.mcp_support_chargecard .mcp_support_cell_sub {
  font-weight: 600;
  color: var(--mcp_support_text);
}

.mcp_support_chargecard .mcp_support_cell_value {
  font-weight: 400;
  color: #6b7280;
}

/* The amount leads with a down arrow: the charge is money going out. The RED
   lives in the arrow only (the icon carries its own fill) — the figure itself
   is gray900 like the rest of the card. Scoped past `.mcp_support_cell_value`,
   which it also wears and which would otherwise win on specificity. */
.mcp_support_chargecard .mcp_support_chargecard_amount {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mcp_support_text);
}


.mcp_support_chargearrow { display: flex; flex: none; }
.mcp_support_chargearrow svg { width: 16px; height: 16px; display: block; }

.mcp_support_chargestatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

/* The badge carries a dot of its own colour, as the design's Indicators do. */
.mcp_support_chargedot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.mcp_support_chargestatus--paid { background: #def7ec; color: #03543f; }

.mcp_support_chargestatus--pending { background: #fdf6b2; color: #723b13; }


.mcp_support_empty {
  text-align: center;
  padding: 48px 16px;
  border-radius: 12px;
  background: var(--mcp_support_surface);
  box-shadow: var(--mcp_support_shadow_md);
}

.mcp_support_empty_art { display: flex; justify-content: center; margin-bottom: 20px; }

/* The alias notice (design 1040075:139288): the same empty-state card with a
   text column capped at 700px and the two buttons under it. */
.mcp_support_empty--alias .mcp_support_empty_title,
.mcp_support_empty--alias .mcp_support_empty_hint { max-width: 700px; margin-inline: auto; }

.mcp_support_empty_actions { display: flex; justify-content: center; gap: 16px; margin-top: 16px; }
/* 128px, as the design's empty-state panel sizes its illustration; the feed's
   quiet state draws its art larger (174px, design 5783:255651). */
.mcp_support_empty_art svg { width: auto; height: 128px; }
.mcp_support_empty_art--lg svg { height: 174px; }

/* Illustrations rendered as <img> (the Solo Envíos exports and the Skydropx
   help-center PNG); the inlined ones keep the `svg` rules above. Width only:
   `height: auto` keeps each export's own ratio, so nothing is distorted. */
.mcp_support_illustration { display: block; height: auto; }

/* Solo Envíos vectors, at the size each slot draws them (Figma 1040392:141533). */
.mcp_support_illustration--solo_envios.mcp_support_illustration--help { width: 66px; }
.mcp_support_illustration--solo_envios.mcp_support_illustration--help_center { width: 77px; }
.mcp_support_illustration--solo_envios.mcp_support_illustration--success { width: 128px; }
.mcp_support_illustration--solo_envios.mcp_support_illustration--empty { width: 139px; }
.mcp_support_illustration--solo_envios.mcp_support_illustration--no_results { width: 128px; }
.mcp_support_illustration--solo_envios.mcp_support_illustration--creating_report { width: 100px; }
.mcp_support_illustration--solo_envios.mcp_support_illustration--csat_thanks { width: 146px; }

/* Skydropx keeps its help-center PNG: 415x372 cropped into the node's slot. */
.mcp_support_illustration--skydropx.mcp_support_illustration--help_center {
  width: 68px;
  height: 61px;
  object-fit: cover;
}

.mcp_support_empty_title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--mcp_support_text);
}

.mcp_support_empty_hint {
  margin: 0;
  font-size: 14px;
  color: var(--mcp_support_text_dark);
}

.mcp_support_pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

/* Form fields (design 5754:1174625). 8px between the label and its control,
   16px between fields; the control itself comes from labels-light's design
   system, see _field.html.erb. */
.mcp_support_field { display: grid; gap: 8px; margin-bottom: 16px; }
/* An author `display` BEATS the browser's `[hidden]` rule, so hiding a field from
   JavaScript (the catalog inputs, once the host's address component mirrors into
   them) needs this or they stay on screen. */
.mcp_support_field[hidden] { display: none; }
.mcp_support_label { font-size: 14px; font-weight: 500; color: var(--mcp_support_text); }

/* The delta between the design and the design system: the design draws every
   control with an 8px radius and 16px of horizontal padding. `ds-select-input`
   already matches, but `ds-input`/`ds-textarea` still carry 6px (and the input
   12px of padding), so ONLY that travels here — height, colours, focus, error
   and disabled states stay with the design system. */
/* Element + class INSIDE the field: the design system's rules are descendant
   selectors (`.ds-input-field .ds-input`), so a bare `.mcp_support_input` loses
   the specificity fight and the delta silently does nothing. */
.mcp_support_field input.mcp_support_input,
.mcp_support_field textarea.mcp_support_input { border-radius: 8px; }
.mcp_support_field input.mcp_support_input { padding-inline: 16px; }

/* Money leaves room for the symbol: 16px to the icon + its 18px + the design's
   8px gap. Without this the 16px above (which now outranks the design system's
   `pl-10`) would run the amount straight over the "$". */
.mcp_support_field input.mcp_support_input.ds-input-with-start-icon { padding-left: 42px; }
.mcp_support_field span.mcp_support_input_unit { padding-right: 16px; }

/* The chevron the design puts inside the select: `ds-select-input` disables the
   native arrow, `ds-select-input-icon` positions this one. */
.mcp_support_select_icon { color: var(--mcp_support_text); }
.mcp_support_select_icon svg { width: 18px; height: 18px; }

/* Field that fills itself from the context and is not edited ("Tipo de cargo"):
   the design paints it with a gray surface and muted text. */
.mcp_support_input--locked {
  background: var(--mcp_support_surface_gray);
  color: var(--mcp_support_text_secondary);
  cursor: not-allowed;
}

/* "Creando reporte" (design 6069:254369): a 259px card with the illustration, an
   indeterminate bar and two lines. Indeterminate because there is nothing to
   measure — the wait is HubSpot returning an id — so the fill slides instead of
   growing. `prefers-reduced-motion` stops it: a looping animation is exactly what
   that setting exists for. */
.mcp_support_creating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 259px;
  padding: 16px;
  border-radius: 8px;
  background: var(--mcp_support_surface);
  text-align: center;
}

/* The slot wraps its art: Skydropx keeps its inline 76x76 drawing, Solo Envíos
   draws its export larger (.mcp_support_illustration--creating_report). */
.mcp_support_creating_art svg { display: block; width: 76px; height: 76px; }

.mcp_support_creating_bar {
  position: relative;
  width: 350px;
  max-width: 100%;
  height: 6px;
  border-radius: 2px;
  background: var(--mcp_support_border_soft);
  overflow: hidden;
}

.mcp_support_creating_bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  border-radius: 2px;
  background: var(--mcp_support_primary);
  animation: mcp_support_creating_slide 1.4s ease-in-out infinite;
}

@keyframes mcp_support_creating_slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@media (prefers-reduced-motion: reduce) {
  .mcp_support_creating_bar span { animation: none; }
}

.mcp_support_creating_text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.mcp_support_creating_title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mcp_support_text);
}

.mcp_support_creating_hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mcp_support_text_secondary);
}

/* Evidence dropzone (design 5754:1172035): a dashed drop area inside a bordered
   card, with the field's description beside it. The real <input type=file> is
   inside the label and hidden — clicking anywhere in the zone opens the picker,
   and the drop handler assigns the dropped files to it. */
/* Two layouts, both from the design: the label sits ABOVE the box by default
   (1039581:135506) and BESIDE the dropzone where the screen asks for it
   (1039581:135215). */
.mcp_support_upload--beside {
  flex-direction: row !important;
  align-items: center !important;
}

/* 252px is the design's width, but as a STARTING size, not a fixed one. The
   drawer runs from 420px to 720px and its paddings eat 82, so at the floor the
   row is ~338: rigid (`flex: none`) the zone spilled out of the card. Letting
   the row WRAP does not fix it either — a wrapping container breaks the line
   before it shrinks anything, which drops the description under the zone and
   loses the design. Shrinking is what keeps them side by side, down to 150.
   `box-sizing` because the base zone is content-box: the 8px padding and the
   2px dashed border made the design's 252 measure 271 on screen. */
.mcp_support_upload--beside .mcp_support_dropzone {
  box-sizing: border-box;
  flex: 0 1 252px;
  width: auto;
  min-width: 150px;
}

/* 160 was more than the drawer can spare beside the zone; the description reads
   fine in 120 and takes the lines it needs. */
.mcp_support_upload_label { flex: 1 0 0; min-width: 120px; }

.mcp_support_upload {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  background: var(--mcp_support_surface);
}

.mcp_support_dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 128px;
  padding: 8px;
  border: 2px dashed var(--mcp_support_border_soft);
  border-radius: 8px;
  background: var(--mcp_support_surface_soft);
  text-align: center;
  cursor: pointer;
}

.mcp_support_dropzone--over { border-color: var(--mcp_support_primary); }
/* The author `display` above outranks the UA `[hidden]` rule, so the hidden zone
   stayed visible next to the chips. Scoped, never a bare `[hidden]`. */
.mcp_support_dropzone[hidden] { display: none; }

.mcp_support_dropzone_icon { color: var(--mcp_support_text_secondary); }
.mcp_support_dropzone_icon svg { width: 24px; height: 24px; }

.mcp_support_dropzone_pick,
.mcp_support_dropzone_drag {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mcp_support_text_secondary);
}

.mcp_support_dropzone_link { color: var(--mcp_support_primary); }

.mcp_support_dropzone_limit {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mcp_support_text_secondary);
}

/* Hidden, not removed: it is the field that actually carries the upload. */
.mcp_support_dropzone_input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Uploaded attachment (1039441:137153): inside the same white card, one chip
   per file — light grey background, semibold name and the bin that removes ONLY
   that file. The dotted zone hides while there are chips. */
.mcp_support_upload_chips:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  min-width: 0;
}

.mcp_support_filechip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: var(--mcp_support_surface_soft);
}

.mcp_support_filechip_icon,
.mcp_support_filechip_remove {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.mcp_support_filechip_icon { color: var(--mcp_support_text); }
.mcp_support_filechip_icon svg, .mcp_support_filechip_remove svg { width: 100%; height: 100%; }

.mcp_support_filechip_name {
  font-size: 14px;
  font-weight: 600;
  color: var(--mcp_support_text);
  overflow-wrap: anywhere;
}

.mcp_support_filechip_remove {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--mcp_support_primary);
}

.mcp_support_upload_hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mcp_support_text);
}

/* Counter (design 5754:1174625): one bordered box 142px wide, the two 42px steps
   at the ends and the number centred between them. The steps keep their own
   border so they read as buttons, and the input loses the native spinners — the
   design's arrows ARE the steps. */
.mcp_support_counter {
  display: flex;
  align-items: center;
  width: 142px;
  border: 1px solid var(--mcp_support_border);
  border-radius: 8px;
  background: var(--mcp_support_surface);
}

.mcp_support_counter_step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  padding: 12px 8px;
  border: 1px solid var(--mcp_support_border);
  background: var(--mcp_support_surface);
  color: var(--mcp_support_text);
  cursor: pointer;
}

.mcp_support_counter_step:first-child { border-radius: 8px 0 0 8px; }
.mcp_support_counter_step:last-child { border-radius: 0 8px 8px 0; }

.mcp_support_counter_input {
  flex: 1 0 0;
  min-width: 0;
  padding: 12px 16px;
  border: 0;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  color: var(--mcp_support_text);
  background: transparent;
}

.mcp_support_counter_input:focus { outline: none; box-shadow: none; }
.mcp_support_counter_input::-webkit-outer-spin-button,
.mcp_support_counter_input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.mcp_support_counter_input[type="number"] { appearance: textfield; }

/* Money field: the symbol sits where the design system's start-icon slot is and
   the currency at the end one. Neither is typed into, so neither takes clicks. */
.mcp_support_field span.mcp_support_input_icon { padding-left: 16px; }
.mcp_support_input_icon { color: var(--mcp_support_text_secondary); }
.mcp_support_input_icon svg { width: 18px; height: 18px; }

.mcp_support_input_unit {
  font-size: 12px;
  line-height: 1.5;
  color: var(--mcp_support_text_secondary);
  pointer-events: none;
}

/* Radios of the shipment form (HubSpot's yes/no): in a row, 16px apart as the
   design has them. The control itself is `ds-radio-input` (16x16 with 4px above
   and below = the design's 16x24 box, and the checked colour of the design
   system), so nothing about its looks is repeated here. */
.mcp_support_radios { display: flex; flex-wrap: wrap; gap: 16px; }

.mcp_support_radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mcp_support_text);
  cursor: pointer;
}

.mcp_support_fieldhint {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mcp_support_text_secondary);
}

.mcp_support_error { color: #b91c1c; font-size: 13px; margin: 0; }

.mcp_support_context,
.mcp_support_hint {
  font-size: 13px;
  color: var(--mcp_support_text_secondary);
  margin: 0 0 14px;
}

.mcp_support_flash {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--mcp_support_surface_gray);
  margin-bottom: 16px;
}

.mcp_support_flash--success { background: var(--mcp_support_success_soft); color: var(--mcp_support_success); }

.mcp_support_detail { display: grid; gap: 4px; margin: 0 0 18px; }
.mcp_support_detail dt { font-size: 13px; color: var(--mcp_support_text_secondary); margin-top: 10px; }
.mcp_support_detail dd { margin: 0; }

/* Support tickets — F2 timeline & composer */

/* Aviso de reporte proactivo (nodo 6076:383442): es el componente "Alerts" del
   design system, con el MISMO fondo degradado y borde que la tarjeta del Centro
   de ayuda — hexes crudos porque ahí el diseño no usa tokens nombrados. El texto
   va en el violeta de contraste (core/text/contrast-primary600) y el icono en un
   azul propio, más saturado. */
.mcp_support_proactive {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #d5e2ff;
  border-radius: 6px;
  background: linear-gradient(180deg, #e8f2ff, #f6f1ff);
  color: var(--mcp_support_primary);
  font-size: 14px;
  line-height: 1.5;
}

/* Caja de 20 con el glifo de 16 centrado, como el nodo. */
.mcp_support_proactive_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #1227e2;
}

.mcp_support_chat_title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--mcp_support_text);
}

/* Mensajes: tarjetas de ancho completo con avatar + autor + fecha, NO burbujas
   alineadas por autor (así lo define el diseño 5782:203172). */
.mcp_support_timeline {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--mcp_support_surface_soft);
}

.mcp_support_msg {
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--mcp_support_surface);
}

.mcp_support_msg_head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.mcp_support_avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mcp_support_surface_gray);
  color: var(--mcp_support_text_secondary);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

/* El agente se distingue por el avatar, no por la alineación. */
.mcp_support_avatar--agent {
  background: var(--mcp_support_primary);
  color: #fff;
}

.mcp_support_msg_author { font-size: 12px; font-weight: 600; }

.mcp_support_msg_date {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--mcp_support_text_secondary);
}

/* Agent replies come from HubSpot carrying long spaceless links. */
.mcp_support_msg_body { margin: 0; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }

/* Plegado "Ver más": el <details> cerrado recorta a 4 líneas. */
.mcp_support_more summary { list-style: none; }
.mcp_support_more summary::-webkit-details-marker { display: none; }

/* Screenshots support pastes into a reply. HubSpot composes them at their natural
   size (the sample was 900px wide), and its `style`/`width` attributes are stripped
   on sanitising — so the cap has to live here or the image would blow the thread's
   card open. `height: auto` keeps the aspect ratio. */
.mcp_support_msg_body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px 0;
  border-radius: 6px;
}

/* What replaces an image that failed to load (see `#handleImageError`). Support's
   screenshots are served from HubSpot behind a session the customer does not have,
   so the browser's broken-image icon would read as our bug and explain nothing. */
.mcp_support_img_missing {
  display: block;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px dashed var(--mcp_support_border);
  border-radius: 6px;
  background: var(--mcp_support_surface_soft);
  color: var(--mcp_support_text_secondary);
  font-size: 13px;
}

/* The fold is driven by `:has()` on the wrapper, not by `[open]` on the
   <details> itself: the body is a SIBLING of the toggle, because a closed
   <details> hides every child that is not the <summary> and no line stayed
   visible. `:has()` is guaranteed by `allow_browser versions: :modern`. */
.mcp_support_more:not(:has(.mcp_support_more_fold[open])) .mcp_support_msg_body {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mcp_support_more_toggle {
  margin-top: 6px;
  color: var(--mcp_support_primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* The toggle stays visible once expanded — it becomes "Ver menos", so a long
   message can be folded back. Both labels are in the markup (the locale files
   own the copy) and only one shows at a time. */
.mcp_support_more_fold:not([open]) .mcp_support_more_hide,
.mcp_support_more_fold[open] .mcp_support_more_show {
  display: none;
}

/* An evidence URL arrives as an answer value: one ~185-char token that would
   otherwise set the line's min-content and scroll the whole thread sideways. */
.mcp_support_answer { margin: 0 0 4px; font-size: 14px; overflow-wrap: anywhere; }
.mcp_support_answer_label { color: var(--mcp_support_text_secondary); }

/* Composer (nodos 5813:375308 y 5813:385637): el recuadro contiene SOLO el área
   de texto y la fila de acciones va DEBAJO, fuera de él. Antes esa fila vivía
   dentro del recuadro, separada por una línea divisoria que el diseño no tiene. */
.mcp_support_composer {
  display: grid;
  gap: 12px;
}

/* The bordered box: the editable area on top, the picked files under it. The
   border lives here and not on the editable area so a chip sits INSIDE the same
   frame as the text it belongs to. */
.mcp_support_composer_box {
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 12px;
  background: var(--mcp_support_surface);
}

.mcp_support_composer_box:focus-within { border-color: var(--mcp_support_primary); }

.mcp_support_composer_input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
  /* A pasted URL is one unbreakable word: without this the contenteditable
     grows past its box and drags the composer's width with it (the message body
     above has carried the same rule since it started rendering agent replies). */
  overflow-wrap: anywhere;
  min-width: 0;
}

.mcp_support_composer_input:focus { outline: none; box-shadow: none; }

/* Fila de acciones: sin borde ni fondo propios — el diseño la deja al aire bajo
   el recuadro, con las acciones a la izquierda y el envío a la derecha. */
/* Toolbar and send button share ONE line, pushed to opposite ends (node
   5782:203075: `flex items-center justify-between`). The attachment chips and the
   link box still wrap onto their own full-width lines below. */
.mcp_support_composer_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.mcp_support_attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mcp_support_text_secondary);
  font-size: 13px;
  cursor: pointer;
}

.mcp_support_attach:hover { color: var(--mcp_support_primary); }

/* El input real queda accesible pero fuera de la barra: la etiqueta lo abre. */
.mcp_support_attach_input {
  width: 1px;
  height: 1px;
  opacity: 0;
  position: absolute;
}

.mcp_support_composer_bar .ds-button { margin-left: auto; }

/* Lo elegido antes de enviar: un chip por archivo, con su peso y una × para
   quitarlo. El diseño no especifica esta zona (su composer solo tiene la barra),
   pero sin ella el input vive detrás de un icono y elegir archivos no cambia nada
   en pantalla. */
/* Inside the box, under the text: its own padding (the editable area's does not
   reach here) and a hairline that separates it from what is being written. */
.mcp_support_attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding: 8px 16px 12px;
  border-top: 1px solid var(--mcp_support_border_soft);
}

/* Same trap as the link box: an author `display` beats the `hidden` attribute's
   own `display: none`, so this empty row was claiming a full-width line of the
   composer bar and pushing the send button onto a third one. */
.mcp_support_attachments[hidden] { display: none; }

.mcp_support_chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 999px;
  background: var(--mcp_support_surface);
  font-size: 12px;
  color: var(--mcp_support_text);
}

.mcp_support_chip_name {
  overflow: hidden;
  max-width: 180px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mcp_support_chip_size { color: var(--mcp_support_text_secondary); }

.mcp_support_chip_drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--mcp_support_surface_gray);
  color: var(--mcp_support_text_secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.mcp_support_chip_drop:hover { color: var(--mcp_support_red); }

.mcp_support_attach_error {
  width: 100%;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--mcp_support_red);
}

.mcp_support_flash--error { background: #fee2e2; color: #b91c1c; }

/* Evidencias: rejilla de miniaturas, no lista de nombres. */
/* Rejilla 2x2 con la celda del nodo (5782:203172): 124x85, gap 8. `max-content`
   para que con una sola evidencia la celda no se estire a media conversación. */
/* Evidence 2x2 grid (node 5770:195319 → 5183:138448): 122x80 tiles 4 apart,
   three thumbnails and the "+N" tile. */
.mcp_support_evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 122px));
  justify-content: start;
  gap: 4px;
  margin-top: 10px;
}

.mcp_support_thumb {
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--mcp_support_surface_gray);
  color: var(--mcp_support_text_secondary);
  font-size: 11px;
  text-align: center;
  text-decoration: none;
  padding: 6px;
}

/* Celda sin miniatura: icono + nombre recortado a dos líneas, para que un nombre
   largo no reviente la celda. */
.mcp_support_thumb_icon { display: flex; }
.mcp_support_thumb_icon svg { width: 20px; height: 20px; }

.mcp_support_thumb_name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-word;
}

.mcp_support_thumb img { width: 100%; height: 100%; object-fit: cover; }

/* The ones the "+N" covers. They are in the DOM from the start: opening is a
   class, not a request. */
.mcp_support_thumb--folded { display: none; }
.mcp_support_evidence--open .mcp_support_thumb--folded { display: flex; }
.mcp_support_evidence--open .mcp_support_thumb--more { display: none; }

/* The node's "+N" (5183:138448) is a tile filled with violet. Here it also shows
   the FIRST file it covers, blurred underneath, so it reads as "more photos" and
   not as an abstract button. The violet becomes a translucent layer on top:
   without it the number disappears over a light photo. */
.mcp_support_thumb--more {
  position: relative;
  background: var(--mcp_support_primary);
  color: var(--mcp_support_text_invert);
  font-size: 16px;
  font-weight: 600;
  padding: 0;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}

.mcp_support_thumb_peek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* `scale` so the blur does not leave the edges see-through. */
  filter: blur(6px);
  transform: scale(1.15);
}

.mcp_support_thumb--more::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mcp_support_primary);
  opacity: 0.72;
}

/* z-index because ::after comes LATER in the DOM: without it the violet layer
   would cover the number. */
.mcp_support_thumb_more_label { position: relative; z-index: 1; }

/* Avisos del sistema: píldora gris centrada con separador arriba. */
/* Nota de estado bajo el composer (solo mientras el reporte se registra).
   Es una pastilla centrada: antes llevaba encima una línea de 100vw que separaba
   la nota del hilo cuando vivía DENTRO de él; con el composer en medio, esa
   línea quedaba suelta bajo el botón de enviar sin separar nada. */
.mcp_support_system {
  margin: 20px auto 16px;
  padding: 4px 12px;
  width: fit-content;
  border-radius: 8px;
  background: var(--mcp_support_surface_gray);
  color: var(--mcp_support_text_dark);
  font-size: 12px;
}



.mcp_support_reopen { margin: 0 0 16px; }

/* Support tickets — detail: header, two columns and the thread's separators
   (nodes 5813:375308 open and 5813:385637 closed). */

/* "‹ Regresar": a link, not a button, and ABOVE the title. */
.mcp_support_back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  color: var(--mcp_support_primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.mcp_support_back:hover { text-decoration: underline; }

/* Paquetería y número de envío bajo el título. */
.mcp_support_shipmeta { display: grid; gap: 6px; margin: 0 0 18px; }
.mcp_support_shipmeta_row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
}
.mcp_support_shipmeta_label { color: var(--mcp_support_text); }

/* The tracking row + the "Estado del envío" chip RIGHT AFTER the copy button
   (not flung to the right edge): one flow with a breath between both pairs.
   labels-light paints the badge as it does in the picker cards (box + skeleton,
   and the same reins on the host's `w-max` pill). */
.mcp_support_shipmeta_row--split { gap: 16px; flex-wrap: wrap; }

.mcp_support_shipmeta_pair {
  display: inline-flex;
  /* By BASELINE, not centred: the label is 16px and the number 14px (as the
     node draws them), and centring leaves the number floating between lines.
     Sharing the baseline is what makes them read as a single line. */
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

/* The copy button stays centred against the number; the status pill has no
   useful baseline (it is a box), so it goes back to the row's centre. */
.mcp_support_shipmeta_pair .mcp_support_shipmeta_tracking { align-items: center; }
.mcp_support_shipmeta_pair .mcp_support_shipmeta_status { align-self: center; }

.mcp_support_shipmeta_status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
  min-width: 0;
  overflow: hidden;
}

/* The badge, as node 6013:325311: ONLY the text in a neutral pill — white,
   grey border, radius 6, 12px medium — with no colour dot. labels-light still
   paints the text (always live); these rules DRESS its pill inside this box,
   and the !important exist because the host's ColorBadge brings its colours as
   inline styles, which no normal rule overrides. */
.mcp_support_shipmeta_status > div {
  max-width: 100%;
  min-width: 100px;
  justify-content: center;
  padding: 2px 10px;
  background: var(--mcp_support_surface) !important;
  border: 1px solid var(--mcp_support_border) !important;
  border-radius: 6px !important;
}

/* The host's indicator dot does not exist in this design. */
.mcp_support_shipmeta_status > div > div { display: none; }

.mcp_support_shipmeta_status > div > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--mcp_support_gray_darkest) !important;
}
.mcp_support_shipmeta_row strong { font-weight: 600; }
.mcp_support_shipmeta_tracking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--mcp_support_navy);
}

/* Banner de cierre + "Reabrir reporte": comparten la MISMA rejilla que el
   bloque de abajo, así que el banner mide lo que la tarjeta del chat y el botón
   se alinea con la ficha lateral (nodo 5813:385637). Con `flex` el banner se
   estiraba hasta el borde de la página y no cuadraba con ninguna columna. */
.mcp_support_bannerrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: stretch;
  margin: 0 0 16px;
}
@media (max-width: 900px) {
  .mcp_support_bannerrow { grid-template-columns: minmax(0, 1fr); }
}
/* Closing alert (node 5782:202284). Its own `alerts/info` blue, not the
   "Creado" badge's `indicators/blue`, and the icon rides at the top so it holds
   when the copy wraps. */
.mcp_support_banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--mcp_support_info_border);
  border-radius: 6px;
  background: var(--mcp_support_info_surface);
  color: var(--mcp_support_blue_darkest);
  font-size: 14px;
}
.mcp_support_bannerrow .mcp_support_reopen { margin: 0; display: flex; }
.mcp_support_bannerrow .ds-button { width: 100%; white-space: nowrap; }

/* Dos columnas: hilo + "Detalles del ticket". Bajo 900px se apilan. */
.mcp_support_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .mcp_support_layout { grid-template-columns: minmax(0, 1fr); }
}

.mcp_support_chatcard,
.mcp_support_sidecard {
  padding: 16px;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 12px;
  background: var(--mcp_support_surface);
}
.mcp_support_sidecard_title {
  margin: 0 0 14px;
  color: var(--mcp_support_primary);
  font-size: 16px;
  font-weight: 500;
}
.mcp_support_side { margin: 0; display: grid; gap: 2px; }
.mcp_support_side dt {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mcp_support_text);
}
.mcp_support_side dt:first-child { margin-top: 0; }
.mcp_support_side dd { margin: 0; font-size: 14px; }

/* 36-char UUIDs would set the min-content of a 300px column. */
.mcp_support_side_id { overflow-wrap: anywhere; }
.mcp_support_side_muted { color: var(--mcp_support_text_secondary); }

/* Chip "Mis reportes" del origen del reporte. */
.mcp_support_origin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--mcp_support_border_soft);
  /* rounded-md (6px), no pastilla completa. */
  border-radius: 6px;
  background: var(--mcp_support_surface);
  font-size: 13px;
}
.mcp_support_origin .mcp_support_icon { width: 14px; height: 14px; }

/* El hilo scrollea dentro de la tarjeta: la altura del diseño es fija y el
   composer queda siempre visible al pie. El min-height evita que un reporte
   recién creado deje la tarjeta encogida, y con hilos largos aparece el
   scroll interno en vez de estirar la página. */
.mcp_support_timeline {
  min-height: 420px;
  max-height: 60vh;
  overflow-y: auto;
  align-content: start;
}

/* Cabecera del DETALLE: el badge va PEGADO al título (el diseño lo pone justo
   al lado), no empujado al extremo como en el índice, que sí lleva un botón
   a la derecha. */
.mcp_support_header--detail { justify-content: flex-start; }
.mcp_support_header--detail .mcp_support_title { font-size: 24px; font-weight: 600; }

/* The detail header's white band (node 1040075:135480). It bleeds to the
   column edges — the design has no gutter around it — so the negative margins
   cancel the panel's padding plus the host's. Children give up their bottom
   margin: the node spaces them with an 8px gap. */
/* The white band behind a page's own header, bleeding to the page column: it
   cancels the panel's padding PLUS whatever gutter the host adds (measured into
   --mcp_support_bleed_* by the frame controller), so the surface reaches the
   edges the way the design draws it.
   TWO pages wear it — the report detail and the proactive lists (design
   5826:411193, node 5722:117067 "Headers") — so the box is shared and they
   differ only in the gap their own content asks for. */
.mcp_support_dethead,
.mcp_support_pro_headband {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: calc(-24px - var(--mcp_support_bleed_top));
  margin-right: calc(-8px - var(--mcp_support_bleed_right));
  margin-bottom: 16px;
  margin-left: calc(-8px - var(--mcp_support_bleed_left));
  padding: 20px 16px 16px;
  background: var(--mcp_support_surface);
}

.mcp_support_dethead { gap: 8px; }

/* 24px between the header and the metrics, as the design's "Headers" sets.
   Its children drop their own bottom margins: the band's gap owns the rhythm. */
.mcp_support_pro_headband { gap: 24px; }

.mcp_support_pro_headband > * { width: 100%; }

.mcp_support_pro_headband .mcp_support_pro_header,
.mcp_support_pro_headband .mcp_support_pro_metrics,
.mcp_support_pro_headband .mcp_support_pro_toolbar { margin-bottom: 0; }

/* "Métricas": the window label over the three cards, 8px apart. */
.mcp_support_pro_summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcp_support_pro_summary .mcp_support_pro_window { margin-bottom: 0; }

.mcp_support_dethead .mcp_support_back,
.mcp_support_dethead .mcp_support_header,
.mcp_support_dethead .mcp_support_shipmeta { margin-bottom: 0; }

/* In the header, carrier and service are ONE name on one line ("Fedex
   Standard", node 1040075:135494). Scoped here on purpose: `_shipment_card`
   shares the class and its stacked form earns its place in a list. */
.mcp_support_dethead .mcp_support_carrier_text {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.mcp_support_dethead .mcp_support_cell_sub {
  font-size: 16px;
  font-weight: 600;
  color: var(--mcp_support_text);
}

/* Chip del día: separador centrado ENTRE mensajes, fuera de sus tarjetas. */
.mcp_support_daychip {
  margin: 4px 0;
  text-align: center;
  line-height: 1;
}
.mcp_support_daychip span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mcp_support_surface_gray);
  color: var(--mcp_support_text);
  font-size: 12px;
  font-weight: 500;
}

/* Sello de sistema: pastilla centrada SOBRE una línea fina. */
.mcp_support_syschip {
  position: relative;
  margin: 4px 0;
  text-align: center;
  line-height: 1;
}
.mcp_support_syschip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--mcp_support_border_soft);
}
.mcp_support_syschip span {
  position: relative;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mcp_support_surface_gray);
  color: var(--mcp_support_text_secondary);
  font-size: 12px;
}

/* Plegado del reporte inicial: el <details> cerrado deja las primeras cuatro
   respuestas (ANSWER_FOLD) y "Ver más" revela el resto. */
/* `minmax(0, 1fr)` and not the implicit `auto`: an auto track sizes to
   max-content, so one long answer URL widened the column. */
.mcp_support_answers { display: grid; grid-template-columns: minmax(0, 1fr); }
.mcp_support_more:not(:has(.mcp_support_more_fold[open])) .mcp_support_answers .mcp_support_answer:nth-child(n+5) {
  display: none;
}

/* Composer deshabilitado (reporte cerrado): visible pero sin acción, para que
   se vea dónde escribir tras reabrir. */
.mcp_support_composer_input:disabled {
  background: var(--mcp_support_surface_soft);
  color: var(--mcp_support_text_secondary);
}

/* El icono del banner de cierre lleva SU color de Figma (blue/#1c64f2), que no
   es el del texto del banner (blue/darkest-800). */
.mcp_support_icon--info { flex-shrink: 0; width: 20px; height: 20px; color: #1c64f2; }

/* Barra de formato del composer (nodos 5813:375308 y 5813:385637): B I U S ·
   listas · adjuntar · enlace, a la izquierda de la fila, y el envío a la
   derecha. */
.mcp_support_tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.mcp_support_tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mcp_support_text_dark);
  cursor: pointer;
}
.mcp_support_tool:hover { background: var(--mcp_support_surface_gray); }

/* Separadores verticales entre grupos, como el diseño. */
.mcp_support_tools_sep {
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: var(--mcp_support_border_soft);
}


.mcp_support_composer_input[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--mcp_support_text_secondary);
}
/* Versión inerte del reporte cerrado: mismo recuadro, sin edición. */
.mcp_support_composer_input--off {
  margin: 0;
  min-height: 76px;
  background: var(--mcp_support_surface_soft);
  color: var(--mcp_support_text_secondary);
}

/* El formato que admite el saneador, pintado en el hilo Y en el editor.
   OJO: el preflight de Tailwind del host hace `ul, ol { list-style: none;
   margin: 0; padding: 0 }`, así que hay que devolver viñeta y sangría a mano.
   Sin esto la lista SÍ se crea (execCommand devuelve true) pero se ve idéntica
   a un párrafo, y parece que el botón no hace nada. */
.mcp_support_msg_body ul,
.mcp_support_composer_input ul { list-style: disc; margin: 6px 0; padding-left: 22px; }
.mcp_support_msg_body ol,
.mcp_support_composer_input ol { list-style: decimal; margin: 6px 0; padding-left: 22px; }
.mcp_support_msg_body li,
.mcp_support_composer_input li { margin: 2px 0; }
.mcp_support_msg_body p,
.mcp_support_composer_input p { margin: 0 0 6px; }
.mcp_support_msg_body a,
.mcp_support_composer_input a { color: var(--mcp_support_primary); text-decoration: underline; }

/* Botón de formato ACTIVO bajo el caret. Se distingue del hover: el hover es
   gris y el activo lleva el morado de marca, para que se lea como "encendido"
   y no como "el ratón está encima". */
.mcp_support_tool--on {
  background: var(--mcp_support_purple_soft);
  color: var(--mcp_support_primary);
}

/* ==========================================================================
   CSAT (F5, design 6076:385715)
   Native <dialog open>, same reason as the glossary: rendered inside
   labels-light's document, the top layer is the only reliable way to sit above
   the host's stacking contexts.
   ========================================================================== */
.mcp_support_csat {
  margin: auto;
  border: 1px solid var(--mcp_support_border_soft);
  border-radius: 8px;
  padding: 0;
  max-width: 586px;
  width: calc(100% - 32px);
  background: var(--mcp_support_surface);
  /* shadow-md from the node: two shadows, not one. */
  box-shadow: 0 2px 4px -2px #0000000d, 0 4px 6px -1px #0000001a;
  color: var(--mcp_support_text);
}

.mcp_support_csat::backdrop { background: #11192866; }

.mcp_support_csat_body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 20px 16px;
  position: relative;
}

/* `right`/`top` rather than the logical properties: the panel lives inside the
   host's document and we do not control its `direction`. */
.mcp_support_csat_x {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mcp_support_text_secondary);
  cursor: pointer;
}

.mcp_support_csat_x svg { width: 12px; height: 12px; }

.mcp_support_csat_title {
  margin: 0;
  padding-inline: 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.mcp_support_csat_about {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: var(--mcp_support_text_secondary);
}

/* The two faces. `fieldset` for group semantics; no border, because the node
   does not draw one. */
.mcp_support_csat_scores {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin: 0;
  padding: 4px 0;
  border: 0;
}

/* Visually hidden but announced: the group needs an accessible name, and the
   title above already says it. */
.mcp_support_csat_legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A circle, not a rectangle: the node draws each face inside a 107px
   `rounded-[99px]` container, with the emoji and its word stacked in it. */
.mcp_support_csat_score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 107px;
  height: 107px;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  border: 2px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.mcp_support_csat_score:hover { background: var(--mcp_support_surface_soft); }

.mcp_support_csat_score:has(input:checked) {
  background: var(--mcp_support_surface_soft);
  border-color: var(--mcp_support_primary);
}

/* The native radio is hidden but keeps keyboard focus, which is painted on the
   label via :has(). */
.mcp_support_csat_score input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.mcp_support_csat_score:has(input:focus-visible) {
  outline: 2px solid var(--mcp_support_primary);
  outline-offset: 2px;
}

/* Always IN COLOUR: in grayscale the emoji read as flat grey blobs. What marks
   the chosen one is the label's ring, not dimming the other. */
.mcp_support_csat_face {
  font-size: 56px;
  /* 1.18 and not 1: the emoji's INK measures 66px at `font-size: 56px` (measured
     with `actualBoundingBox`), so `line-height: 1` let it overflow its box by 10px
     and the flex centring sat visually high — 9px of air above against 14 below.
     With the box equal to the ink, centring the box centres what is seen. */
  line-height: 1.18;
  transition: transform 120ms ease;
}

.mcp_support_csat_score:has(input:checked) .mcp_support_csat_face {
  transform: scale(1.06);
}

.mcp_support_csat_word {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--mcp_support_text_secondary);
}

.mcp_support_csat_score:has(input:checked) .mcp_support_csat_word {
  color: var(--mcp_support_text);
}

.mcp_support_csat_field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcp_support_csat_label {
  font-size: 16px;
  line-height: 1.5;
  color: var(--mcp_support_text_secondary);
}

.mcp_support_csat_optional { color: var(--mcp_support_text_secondary); }

/* 95px is the base height the design system's Text Area component documents. */
.mcp_support_csat_textarea {
  height: 95px;
  padding: 8px 16px;
  border: 1px solid var(--mcp_support_border);
  border-radius: 8px;
  background: var(--mcp_support_surface);
  font: inherit;
  color: var(--mcp_support_text);
  resize: vertical;
}

.mcp_support_csat_textarea:focus-visible {
  outline: 2px solid var(--mcp_support_primary);
  outline-offset: -1px;
}

.mcp_support_csat_hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
  color: var(--mcp_support_text_secondary);
}

.mcp_support_csat_footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  /* No padding of its own: it lives inside .mcp_support_csat_body, which already
     provides it. The node draws it as a separate block only because of how Figma
     groups things. */
  padding: 0;
}

/* The CSAT "send" button while no face is chosen. The attribute is set by JS
   (see #syncCsatSubmit); this only makes it evident. */
.mcp_support_csat_footer .ds-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* CSAT thank-you state (design 5782:232462): same shell, different content.
   Centred and without the textarea, so it breathes more. */
.mcp_support_csat_body--thanks {
  align-items: center;
  /* 16px like the rest of the node; it was 12 and read as cramped. */
  gap: 16px;
  /* 63px on top, not 20: in the node this variant leaves its title slot UNUSED,
     and that gap (20 of padding + 27 of the slot + 16 of spacing) is what gives
     the illustration room. Reproducing it as padding avoids putting an empty
     element in the markup just to take up space. */
  padding: 63px 20px 20px;
}

/* The illustration is a composed SVG (star bar + hand); it scales by width and
   keeps its ratio from the viewBox. */
.mcp_support_csat_art svg {
  display: block;
  /* 84px: the group's real size in the node (84.02 × 71.10). */
  width: 84px;
  height: auto;
}

/* A single, centred button: there is nothing to dismiss here. */
.mcp_support_csat_footer--single {
  justify-content: center;
  /* The node separates footer from body with its own gap, on top of the flex gap. */
  margin-top: 8px;
}