/* MIDE OS · Portal Cliente · Agentes de IA (reference client/04). Layout of the view only:
   components come from ui/components.css and every value from ui/tokens.css. */
@layer views {
  .agents-panel { display: grid; gap: var(--mide-space-5); min-width: 0; }
  .agents .ui-card-body { display: grid; gap: var(--mide-space-3); }
  .agents-agent-body { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 18rem); align-items: start; gap: var(--mide-space-4) var(--mide-space-6); }
  .agents-agent-tile { width: 56px; height: 56px; border-radius: var(--mide-radius); }
  .agents-agent-tile .ui-icon { width: 28px; height: 28px; }
  .agents-agent-text { display: grid; gap: var(--mide-space-2); justify-items: start; min-width: 0; }
  @media (max-width: 1280px) { .agents-agent-body { grid-template-columns: auto minmax(0, 1fr); } .agents-agent-body > .agents-facts { grid-column: 1 / -1; } }
  .agents-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mide-space-2) var(--mide-space-4); margin: 0; font-size: var(--mide-text-sm); }
  .agents-facts dt { color: var(--mide-muted); }
  .agents-facts dd { margin: 0; color: var(--mide-ink); font-weight: var(--mide-weight-semibold); text-align: right; overflow-wrap: anywhere; }
  .agents-config .agents-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .agents-config .agents-facts dd { margin-bottom: var(--mide-space-3); text-align: left; }
  .agents-config .agents-facts dd:last-child { margin-bottom: 0; }
  .agents-help, .agents-readonly { margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); line-height: var(--mide-leading); }
  .agents-readonly { padding-top: var(--mide-space-3); border-top: 1px solid var(--mide-line-2); color: var(--mide-muted); }
  .agents-subtitle { margin: var(--mide-space-2) 0 0; color: var(--mide-ink); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-bold); }
  .agents-quote { margin: 0; padding: var(--mide-space-3); border-radius: var(--mide-radius-sm); background: var(--mide-surface-2); color: var(--mide-ink-2); font-size: var(--mide-text-sm); line-height: var(--mide-leading); }
  .agents-config { display: grid; gap: var(--mide-space-2); justify-items: stretch; }
  .agents-config > .ui-chip { justify-self: start; }
  .agents-status { margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-semibold); }
  .agents-status:empty { display: none; }
  .agents-knowledge-title { display: grid; gap: 2px; min-width: 0; }
  .agents-knowledge-meta { color: var(--mide-muted); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-regular, 400); line-height: 1.35; }
  /* Acciones por fila: «Editar» siempre a la vista; un motivo de acción bloqueada se lee en su propia línea, sin ensanchar la tabla. */
  .agents-row-actions { min-width: 0; }
  .agents-row-actions .ui-disabled-reason { max-width: 24ch; }
  td:has(> .agents-row-actions) { min-width: 13rem; }
  .agents-muted { color: var(--mide-muted); font-size: var(--mide-text-sm); }
  .agents-error:empty { display: none; }
  .agents-error { border: 1px solid var(--mide-panel-line); border-radius: var(--mide-radius-lg); background: var(--mide-surface); }
  .agents-soon .ui-state { gap: var(--mide-space-2); }
  /* Primer contacto: editor + WhatsApp preview. Side by side (preview sticky, always in view while
     editing) when the panel has room; stacked otherwise, with a compact preview before «Guardar». */
  .agents-fc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mide-space-5); align-items: start; }
  #aiFirstContact, .agents-fc-editor { container-type: inline-size; }
  @container (min-width: 44rem) {
    .agents-fc { grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); }
    .agents-fc-preview { position: sticky; top: calc(var(--mx-topbar-h, 72px) + var(--mide-space-3)); }
  }
  .agents-fc-compact { display: none; gap: var(--mide-space-2); }
  @media (max-width: 640px) {
    .agents-fc-compact { display: grid; }
    .agents-fc-preview { display: none; }
  }
  .agents-fc-fixed { display: flex; align-items: flex-start; gap: var(--mide-space-2); padding: var(--mide-space-3); border-radius: var(--mide-radius-sm); background: var(--mide-surface-2); color: var(--mide-ink-2); font-size: var(--mide-text-sm); line-height: var(--mide-leading); }
  .agents-fc-fixed > .ui-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--mide-muted); }
  .agents-fc-fixed p { margin: 0; }
  .agents-fc-fixed strong { color: var(--mide-ink); font-weight: var(--mide-weight-semibold); }
  .agents-fc-menu { display: grid; gap: var(--mide-space-3); margin: 0; padding: 0; border: 0; min-width: 0; }
  .agents-fc-menu > legend { padding: 0; }
  .agents-fc-options { display: grid; gap: var(--mide-space-3); margin: 0; padding: 0; list-style: none; }
  .agents-fc-option { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--mide-space-3); align-items: start; padding: var(--mide-space-3); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-sm); background: var(--mide-surface-2); }
  .agents-fc-option.is-invalid { border-color: var(--mide-danger); }
  /* «Quitar opción» stays next to the option's text box (below its label), also when an error grows the field. */
  .agents-fc-option > .ui-button { align-self: start; margin-top: 24px; min-width: 44px; min-height: 44px; }
  /* The whole 44 × 44 target is visible (border and surface), not only the 18 px «X». */
  .agents-fc-option > .ui-button-icon { border-color: var(--mide-line); background: var(--mide-surface); }
  @container (max-width: 34rem) {
    .agents-fc-option { grid-template-columns: minmax(0, 1fr) auto; }
    .agents-fc-option > .ui-field:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .agents-fc-option > .ui-button { grid-column: 2; grid-row: 1; }
  }
  .agents-fc-title { display: grid; gap: var(--mide-space-1); }
  .agents-fc-counter { justify-self: end; }
  .agents-fc-limit { margin: 0; color: var(--mide-ink-2); font-size: var(--mide-text-xs); }
  .agents-fc-limit:empty { display: none; }
  .agents-fc-menu > .ui-button { justify-self: start; }
  .agents-fc-phone { display: grid; gap: var(--mide-space-3); padding: var(--mide-space-4); border: 1px solid var(--mide-line); border-radius: var(--mide-radius-lg); background: var(--mide-canvas); }
  .agents-fc-phone-compact { padding: var(--mide-space-3); }
  .agents-fc-chat { display: grid; gap: var(--mide-space-3); }
  .agents-fc-sample { display: grid; gap: var(--mide-space-1); justify-items: start; }
  .agents-fc-caption { color: var(--mide-muted); font-size: var(--mide-text-xs); }
  .agents-fc-bubble { display: grid; gap: var(--mide-space-2); margin: 0; padding: var(--mide-space-3) var(--mide-space-4); border-radius: var(--mide-radius); background: var(--mide-surface); color: var(--mide-ink); font-size: var(--mide-text-sm); line-height: var(--mide-leading); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--mide-shadow-sm); }
  .agents-fc-in { max-width: 70%; border-top-left-radius: var(--mide-space-1); }
  .agents-fc-out { display: grid; gap: var(--mide-space-2); justify-self: end; width: min(100%, 18rem); }
  .agents-fc-out > .agents-fc-bubble { border-top-right-radius: var(--mide-space-1); background: var(--mide-green-50); }
  .agents-fc-disclosure { font-weight: var(--mide-weight-bold); }
  .agents-fc-prompt { color: var(--mide-ink-2); }
  .agents-fc-buttons { display: grid; gap: var(--mide-space-1); }
  .agents-fc-button { padding: var(--mide-space-2) var(--mide-space-3); border-radius: var(--mide-radius-sm); background: var(--mide-surface); color: var(--mide-link); font-size: var(--mide-text-sm); font-weight: var(--mide-weight-semibold); text-align: center; box-shadow: var(--mide-shadow-sm); }
  .agents-fc-off { margin: 0; color: var(--mide-muted); font-size: var(--mide-text-sm); }
  .agents-fc-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mide-space-3); padding-top: var(--mide-space-3); border-top: 1px solid var(--mide-line-2); }
  .agents-fc-save > .ui-notice-region { flex: 1 1 100%; margin: 0; }
  .agents-status[data-tone="ok"] { color: var(--mide-ok); }
  .agents-status[data-tone="danger"] { color: var(--mide-danger); }
}