/* ══════════════════════════════════════════════════════════════════════════
   nisto-copiloto.css — el tab Copiloto del Agent Builder (chat interior).

   Convive con nisto-perla.css: las cards reusan .prl-action-card / .prl-diff*
   como base y acá SOLO se re-geometrizan dentro de .cop-chat (la Perla global
   flotante no se toca). Todo lo propio va prefijado cop-.

   Tokens: grafito + coral + --draft-* (borrador) / --live-* (en vivo).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Host: el chat ocupa el alto util del area de contenido ───────────────
   #nisto-main es una columna de 100dvh y su hijo visible es el scroller de la
   vista. En modo Copiloto ese scroller no scrollea: scrollea la conversacion.
   La especificidad tiene que empatar la regla de nisto-nav.css (#nisto-main >
   div[x-show]), por eso el selector lleva el id. */
/* `width:100%` no es redundante: el contenedor de la vista tiene `mx-auto` y, en un
   flex column, los margenes auto del eje cruzado DESACTIVAN el stretch — sin esto el
   chat se encoge al ancho de su contenido en vez de ocupar el area. */
#nisto-main > div[x-show].cop-page { padding-bottom: 0; overflow: hidden; width: 100%; }

.cop-host {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.cop-chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 14px 0;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  overflow: hidden;
}

/* ── Toggle Editor | Copiloto ────────────────────────────────────────────── */

.cop-seg { display: flex; gap: 3px; padding: 2px; background: var(--neutral-100); border-radius: 9px; }
.cop-seg-opt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px;
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cop-seg-opt.active { background: var(--surface-card); color: var(--text-strong); box-shadow: 0 1px 2px rgba(16,16,18,.09); }

/* Barra del toggle en mobile: pegada arriba del contenido. */
.cop-mtabs {
  position: sticky;
  top: 0;
  z-index: 25;
  padding: 10px 0;
  background: var(--surface-page);
}

/* ── Submenu del agente en modo Copiloto (sesiones) ──────────────────────── */

.cop-newsession {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 9px;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity var(--dur-fast);
}
.cop-newsession:hover { opacity: .9; }

.cop-sess-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 26px 12px;
  color: var(--text-faint);
}
.cop-sess-empty-title { font-size: 12.5px; font-weight: 600; color: var(--text-body); }
.cop-sess-empty-sub { font-size: 11px; line-height: 1.4; color: var(--text-faint); }

.cop-sess-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.cop-sess-item:hover { background: var(--neutral-50); }
.cop-sess-item.active { background: var(--surface-page); }
.cop-sess-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cop-sess-item.active .cop-sess-name { font-weight: 600; color: var(--text-strong); }
.cop-sess-date { font-size: 10.5px; color: var(--text-faint); margin-top: 1px; }
.cop-sess-bar { width: 3px; height: 22px; border-radius: 2px; background: var(--text-strong); flex: none; }

/* Fila titulo + punto: el titulo se recorta y el punto no se comprime. */
.cop-sess-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cop-sess-row .cop-sess-name { min-width: 0; }
.cop-sess-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--draft-fg);
  flex: none;
}

/* El rail scrollea por dentro: el submenu no crece con el historial. */
.cop-sess-list { max-height: 340px; overflow-y: auto; }

.cop-sess-all {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--coral-500);
  padding: 8px;
  cursor: pointer;
}
.cop-sess-all:hover { opacity: .8; }

/* ── Orbe coral ──────────────────────────────────────────────────────────── */

.cop-orb {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FF9A6A, var(--coral-500) 60%, #E24E2A);
  flex: none;
  display: inline-block;
}
.cop-orb-10 { width: 10px; height: 10px; }
.cop-orb-12 { width: 12px; height: 12px; }

/* ── Chip "vía Copiloto" (historial de versiones del builder) ─────────────
   Vive acá y no en el CSS del builder porque es la marca del Copiloto: la
   atribución `published_via='copiloto'` de una versión publicada desde el chat. */
.cop-via-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--coral-700);
  background: var(--coral-50);
  border: 1px solid var(--coral-300);
  padding: 3px 8px;
  border-radius: 99px;
  flex: none;
  white-space: nowrap;
}

/* ── Isotipo de marca en el chat (SDD Perla layout §2) ───────────────────────
   El orbe del asistente (header, vacío, turno) es el isotipo negro: el coral queda para el
   punto de la sesión activa y los acentos de traza. El SVG es partials/_nisto_mark.html. */
.cop-mark { flex: none; display: inline-flex; color: var(--text-strong); }
.cop-mark-26 { width: 26px; height: 26px; }
.cop-mark-30 { width: 30px; height: 30px; }
.cop-mark-empty { width: 44px; height: 44px; }
/* En el builder el orbe del turno es UNO por mensaje (columna izquierda); el de cada bloque
   de texto solo existe en Perla (#view-perla lo muestra). */
.cop-md-mark { display: none; }

/* ── Header del chat ─────────────────────────────────────────────────────── */

.cop-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.cop-head-title { display: flex; align-items: center; gap: 7px; }
.cop-brand { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.cop-conn { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cop-conn-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--live-fg); flex: none; }

/* ── Conversacion ────────────────────────────────────────────────────────── */

.cop-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 16px 10px;
  background: var(--surface-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cop-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 12px;
}
.cop-empty-title { font-size: 15px; font-weight: 600; color: var(--text-strong); margin-top: 12px; }
.cop-empty-sub { font-size: 12.5px; color: var(--text-muted); max-width: 290px; line-height: 1.5; margin-top: 3px; }
.cop-sugg { display: flex; flex-direction: column; gap: 7px; width: 100%; max-width: 380px; margin-top: 20px; }
.cop-sugg-btn {
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  border-radius: 9px;
  padding: 9px 11px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-body);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.cop-sugg-btn:hover { border-color: var(--border-default); background: var(--neutral-50); }

.cop-msg-user { display: flex; justify-content: flex-end; }
/* Burbuja clara (SDD Perla v3 §5) en las DOS superficies. El `pre-wrap` va SOLO en el texto:
   puesto en la burbuja pintaba como saltos el whitespace del template entre los hijos
   (burbujas altísimas con el texto flotando al medio). */
.cop-bubble-user {
  max-width: 82%;
  background: var(--surface-page);
  color: var(--pv3-text-thread);
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 13px;
  border-radius: 14px 14px 5px 14px;
  overflow-wrap: anywhere;
  min-width: 0;
}
.cop-bubble-text { white-space: pre-wrap; }
.cop-msg-bot { display: flex; gap: 10px; align-items: flex-start; }
.cop-bot-body { flex: 1; min-width: 0; }

.cop-md { font-size: 13px; line-height: 1.6; color: var(--text-body); word-break: break-word; }
.cop-md p { margin: 0 0 8px; }
.cop-md p:last-child { margin-bottom: 0; }
.cop-md ul, .cop-md ol { margin: 4px 0; padding-left: 20px; }
.cop-md ul { list-style: disc; }
.cop-md ol { list-style: decimal; }
.cop-md strong { color: var(--text-strong); }
.cop-md code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--neutral-100);
  padding: 1px 5px;
  border-radius: 5px;
}

/* ══ TRAZA v2 — grupos colapsables con pasos expandibles ══════════════════
   Markup: partials/_copiloto_trace_group.html (mismo para el turno en vivo y
   para la rehidratación). Estado: nisto-copiloto.js (helpers copGroup… y copStep…).

   Los valores puntuales del handoff que NO tienen token de marca se declaran acá
   como variables locales: son grises cálidos y un beige coral de un solo uso
   dentro de la traza (ningún azul — la paleta sigue siendo grafito + coral). */
.cop-chat {
  --cop-call-bg: #F9F9F8;       /* fondo del bloque "LLAMADA" */
  --cop-block-bd: #EDEDEB;      /* borde de los bloques LLAMADA / RESULTADO del expandido */
  --cop-shimmer-edge: #C8C9CC;  /* extremos del degradado del shimmer "Pensando…" */
  --cop-live-bg: #FFFAF7;       /* fila de estado vivo */
  --cop-live-bd: #F3D6CB;
}

/* ── Grupo (SDD Perla layout §3) ─────────────────────────────────────────────
   UNA línea de texto que se abre: título · meta + chevron-down a la derecha. Sin
   borde, sin fondo, sin caja. Varios grupos seguidos = varias líneas, no cajas. */

.cop-tg { margin: 4px 0; min-width: 0; }
.cop-tg-head {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
  padding: 3px 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast);
}
.cop-tg-head:hover { color: var(--text-strong); }
.cop-tg-title {
  min-width: 0;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "título · meta": el separador lleva su aire propio (la fila no tiene gap) para que el
   punto quede igual de lejos de los dos lados, como el " · " de adentro de la meta. */
.cop-tg-sep { flex: none; color: inherit; padding: 0 .4em; }
.cop-tg-meta { flex: none; color: inherit; white-space: nowrap; }
.cop-tg-elapsed {
  flex: none;
  color: var(--coral-500);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cop-tg-chev {
  flex: none;
  display: inline-flex;
  margin-left: 6px;
  color: var(--text-faint);
  transition: transform var(--dur-fast);
}
.cop-tg-chev--open { transform: rotate(180deg); }

/* Shimmer del grupo vivo: el degradado se recorta contra el texto. */
.cop-tg-shimmer {
  background: linear-gradient(90deg, var(--cop-shimmer-edge), var(--text-strong), var(--cop-shimmer-edge));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cop-shimmer 1.3s linear infinite;
}

/* Abierto: filete a la izquierda; los pasos son filas sueltas. */
.cop-tg-body {
  margin-top: 4px;
  border-left: 1px solid var(--pv3-border-soft);
  padding-left: 12px;
  display: flex;
  flex-direction: column;
}

/* ── Paso: una fila (label + `tool · duración`), separador entre filas ─────── */

.cop-ts { min-width: 0; }
.cop-ts + .cop-ts { border-top: 1px solid var(--pv3-border-row); }
.cop-ts-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; min-width: 0; }
.cop-ts-row--click { cursor: pointer; border-radius: 4px; }
.cop-ts-row--click:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
/* `min-width:0` sin `flex:1`: el label se encoge y elipsa cuando la fila no da, pero
   NO empuja la meta lejos del texto. */
.cop-ts-label {
  min-width: 0;
  font-size: 12.5px;
  color: var(--pv3-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cop-ts--error .cop-ts-label { color: var(--danger-fg); }
/* Encoge antes que el label (shrink 3): en 390px se lee el paso y la tool queda elidida. */
.cop-ts-tool {
  flex: 0 3 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Summary en la fila: SOLO para pasos legacy (sin args ni result que expandir). */
.cop-ts-sum {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cop-ts-chev { flex: none; display: inline-flex; color: var(--pv3-arrow); transition: transform var(--dur-fast); }
.cop-ts-chev--open { transform: rotate(90deg); }
/* Error: el mensaje debajo de la fila, en rojo y sin caja. */
.cop-ts-errtext {
  font-size: 12px;
  line-height: 1.5;
  color: var(--danger-fg);
  padding: 0 0 7px;
  overflow-wrap: anywhere;
}

/* ── Paso expandido: LLAMADA + RESULTADO ─────────────────────────────────── */

.cop-ts-det { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.cop-ts-block { border: 1px solid var(--cop-block-bd); border-radius: 8px; padding: 8px 10px; }
.cop-ts-call { background: var(--cop-call-bg); }
.cop-ts-res { background: var(--surface-card); }
.cop-ts-bhead {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 5px;
}
.cop-ts-code {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.cop-ts-sumtext { font-size: 12px; line-height: 1.5; color: var(--text-body); word-break: break-word; }
.cop-ts-sumtext + .cop-ts-code { margin-top: 6px; }
.cop-ts-errcode { color: var(--danger-fg); }
.cop-ts-more {
  border: none;
  background: transparent;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--coral-500);
  padding: 4px 0 0;
  cursor: pointer;
}
.cop-ts-more:hover { opacity: .8; }
.cop-ts-more-err { color: var(--danger-fg); }

/* ── Fila de estado vivo (bajo el header del chat) ───────────────────────── */

.cop-liverow {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  background: var(--cop-live-bg);
  border-bottom: 1px solid var(--cop-live-bd);
}
.cop-liverow-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--coral-500);
  flex: none;
  animation: cop-pulse-dot 1.1s infinite;
}
.cop-liverow-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--warning-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Meta del mensaje: "hace 2 min · Trabajó 12s" ────────────────────────── */

.cop-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.cop-meta-time { font-size: 10.5px; color: var(--text-faint); }
.cop-meta-dot { width: 3px; height: 3px; border-radius: 99px; background: var(--text-faint); flex: none; }
.cop-meta-worked { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }

/* Pensando (SDD Perla layout §4): isotipo girando + texto en shimmer. */
.cop-thinking { font-size: 12px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 8px; }
.cop-thinking-mark {
  flex: none;
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--text-strong);
  /* Gira y, mientras piensa, el color pasa por tonos tenues de la marca y vuelve a negro
     (el ciclo de color dura 3 vueltas). Con reduced-motion se apaga todo (ver @media). */
  animation: pv3Spin 1.6s var(--ease-in-out) infinite, pv3Tint 4.8s ease-in-out infinite;
}

@keyframes pv3Tint {
  0%, 100% { color: var(--text-strong); }
  20% { color: color-mix(in srgb, var(--coral-500) 55%, var(--neutral-0)); }
  40% { color: color-mix(in srgb, var(--pv3-ws-dot) 55%, var(--neutral-0)); }
  60% { color: color-mix(in srgb, var(--success-fg) 50%, var(--neutral-0)); }
  80% { color: color-mix(in srgb, var(--draft-fg) 60%, var(--neutral-0)); }
}

@keyframes cop-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes cop-pulse-dot { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes cop-spin { to { transform: rotate(360deg); } }
@keyframes cop-shimmer { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }

/* ── Cards de accion (base .prl-action-card, re-geometrizada acá) ────────── */

.cop-chat .prl-action-card {
  margin: 2px 0;
  padding: 0;
  overflow: hidden;
  border-radius: 13px;
  background: var(--surface-card);
}
/* Color = estado real (SDD Perla v3 §4). La tarjeta es blanca; el estado se lee en el borde,
   la pill de la cabecera y el pie. pending = propuesta sin resolver (neutra); live = atiende
   de verdad (verde); draft = aplicada pero todavía no atiende (ámbar); error (rojo); off =
   descartada, sin efecto (gris). */
.cop-chat .cop-card--pending { border-color: var(--border-default); background: var(--surface-card); }
.cop-chat .cop-card--draft { border-color: var(--draft-border); background: var(--surface-card); }
.cop-chat .cop-card--live { border-color: var(--live-border); background: var(--surface-card); }
.cop-chat .cop-card--error { border-color: var(--danger-fg); background: var(--surface-card); }
.cop-chat .cop-card--off { border-color: var(--border-subtle); background: var(--surface-subtle); opacity: .75; }
.cop-card--live .cop-card-ic { background: var(--live-bg); color: var(--live-fg); }
.cop-card--error .cop-card-ic { background: var(--danger-bg); color: var(--danger-fg); }
.cop-card--off .cop-card-ic { background: var(--neutral-100); color: var(--text-muted); }

/* Mini-card del banner de delta del editor: el MISMO cuerpo ANTES/AHORA de la card del
   chat (partial _copiloto_card_body.html) pero sin footer de aprobacion — aca el cambio
   ya esta aplicado al borrador. Vive FUERA de .cop-chat, asi que trae su propia caja. */
.cop-mini {
  border: 1px solid var(--draft-border);
  border-radius: 11px;
  background: var(--surface-card);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-fast), opacity var(--dur-fast);
}
.cop-mini:hover { opacity: .85; }
.cop-mini:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 1px; }
.cop-mini .cop-card-head { padding: 10px 12px 0; }
.cop-mini .cop-card-body { padding: 8px 12px 10px; }
.cop-mini .cop-card-ic { width: 24px; height: 24px; border-radius: 6px; }
.cop-mini .cop-card-ic svg { width: 13px; height: 13px; }
.cop-mini .cop-card-title { font-size: 12.5px; }

.cop-card-head { padding: 12px 14px 0; }
.cop-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cop-card-ic {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--draft-border);
  color: var(--draft-fg);
}
.cop-card-ic svg { width: 15px; height: 15px; }
.cop-card-tool {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--neutral-100);
  padding: 3px 8px;
  border-radius: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cop-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-strong); line-height: 1.35; }
.cop-card-pill {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--neutral-100);
  padding: 2px 7px;
  border-radius: 5px;
}
.cop-card-scope { font-size: 11px; color: var(--text-faint); line-height: 1.35; margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* El nombre del agente va como TEXTO en una pill (antes era HTML crudo con x-html). */
.cop-card-scope-pill {
  font-weight: 600;
  color: var(--text-body);
  background: var(--neutral-100);
  padding: 1px 7px;
  border-radius: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Contrato de tarjeta v3 (SDD Perla v3 §7) ── */
/* Pill de estado de la cabecera: tinta a full opacidad sobre fondo claro. */
.cop-card-status {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 6px;
  flex: none;
}
.cop-card-status--draft,
.cop-card-status--pending { color: var(--state-amber-fg); background: var(--state-amber-bg); }
.cop-card-status--live { color: var(--live-fg); background: var(--live-bg); }
.cop-card-status--error { color: var(--danger-fg); background: var(--danger-bg); }
.cop-card-status--off { color: var(--text-muted); background: var(--neutral-100); }
/* "Dónde": el lugar del producto que se toca y si es en vivo o borrador. */
.cop-card-where { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-top: 3px; min-width: 0; overflow-wrap: anywhere; }
/* Nota: la consecuencia real de aprobar. */
.cop-card-note {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 0 14px 12px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}
.cop-card-note svg { margin-top: 2px; color: var(--text-faint); }
.cop-foot-inverse { font-size: 11px; color: var(--text-faint); white-space: normal; }
.cop-card-body { padding: 10px 14px 12px; }

/* Layout "step": lineas mono, contexto gris y la nueva/editada resaltada. */
.cop-steps { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; }
.cop-step { display: flex; gap: 7px; border-radius: 5px; padding: 2px 6px; }
.cop-step-n { font-weight: 600; flex: none; }
.cop-step-ctx { color: var(--text-muted); }
.cop-step-add { background: var(--live-bg); color: var(--live-fg); margin-top: 3px; }
.cop-step-edit { background: var(--live-bg); color: var(--live-fg); margin-top: 3px; }
.cop-step-del { color: var(--text-faint); text-decoration: line-through; }

/* Layout "toggle": estado anterior -> nuevo. */
.cop-toggle-row { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cop-toggle-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-muted); }
.cop-toggle-state.now { font-weight: 600; color: var(--text-strong); }
.cop-toggle-sw { width: 30px; height: 17px; border-radius: 99px; background: var(--border-default); position: relative; flex: none; }
.cop-toggle-sw.on { background: var(--live-fg); }
.cop-toggle-knob { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 99px; background: var(--surface-card); }
.cop-toggle-sw.on .cop-toggle-knob { left: 15px; }
.cop-toggle-label { font-size: 11.5px; color: var(--text-body); text-align: center; margin-bottom: 9px; }

/* Layout "list": dos columnas ANTES / AHORA de chips. */
.cop-list { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
.cop-list-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .5px; color: var(--text-faint); margin-bottom: 4px; text-transform: uppercase; }
.cop-list-arrow { color: var(--draft-fg); display: flex; align-items: center; padding-top: 16px; }
.cop-tchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-body);
  margin: 4px 4px 0 0;
  word-break: break-word;
}
.cop-tchip.added { background: var(--live-bg); border-color: var(--live-border); color: var(--live-fg); font-weight: 600; }
.cop-tchip.removed { color: var(--text-faint); text-decoration: line-through; }
.cop-list-none { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

/* Lineas clave:valor (cards sin layout rico). */
.cop-lines { display: flex; flex-direction: column; gap: 4px; }
/* pre-wrap: una línea puede ser un texto con saltos (p.ej. la publicación completa de
   wa_groups_confirm_send) y la persona tiene que ver EXACTAMENTE lo que aprueba. */
.cop-line { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); word-break: break-word; white-space: pre-wrap; }

/* Layout lines v3: tabla clave → valor. Clave mono uppercase en columna flexible (no fija:
   las etiquetas en/pt son más largas); valor con saltos preservados. */
.cop-fields {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-card);
  overflow: hidden;
}
.cop-field { display: flex; gap: 12px; padding: 7px 11px; align-items: baseline; min-width: 0; }
.cop-field + .cop-field { border-top: 1px solid var(--border-subtle); }
.cop-field-k {
  flex: 0 1 118px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}
.cop-field-v { flex: 1 1 0; min-width: 0; font-size: 12.5px; color: var(--text-body); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Footers de la card por estado ───────────────────────────────────────── */

.cop-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-top: 1px solid var(--draft-border);
  background: var(--surface-subtle);
  flex-wrap: wrap;
}
.cop-foot-note { flex: 1; min-width: 140px; font-size: 11px; color: var(--text-faint); line-height: 1.35; }
.cop-foot-run { background: var(--draft-bg-light); }
.cop-foot-applied { background: var(--draft-bg); border-top-color: var(--draft-border); }
.cop-foot-applied-live { background: var(--live-bg-light); border-top-color: var(--live-border); }
.cop-foot-off { background: var(--surface-subtle); border-top-color: var(--border-subtle); }
.cop-foot-err { background: var(--danger-bg); border-top-color: var(--danger-fg); }

.cop-foot-title { font-size: 12px; font-weight: 600; color: var(--draft-fg); }
.cop-foot-title-live { color: var(--live-fg); }
.cop-foot-sub { font-size: 10.5px; color: var(--draft-fg-muted); }
.cop-foot-err-text { flex: 1; font-size: 11.5px; font-weight: 500; color: var(--danger-fg); }
.cop-foot-off-text { flex: 1; font-size: 11.5px; color: var(--text-faint); }

.cop-btn {
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  color: var(--text-body);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 8px;
  cursor: pointer;
  flex: none;
  transition: border-color var(--dur-fast), opacity var(--dur-fast);
}
.cop-btn:hover { border-color: var(--text-faint); }
.cop-btn-primary {
  border: none;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  flex: none;
  transition: opacity var(--dur-fast);
}
.cop-btn-primary:hover { opacity: .9; }
.cop-btn-primary:disabled { background: var(--border-default); color: var(--surface-card); cursor: not-allowed; }
.cop-btn-danger {
  border: 1px solid var(--danger-fg);
  background: var(--surface-card);
  color: var(--danger-fg);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 8px;
  cursor: pointer;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Foco visible (SDD v3 §12): los botones de la tarjeta son la acción irreversible de la
   pantalla; el teclado tiene que ver dónde está parado. */
.cop-btn:focus-visible, .cop-btn-primary:focus-visible, .cop-btn-danger:focus-visible,
.cop-send:focus-visible, .cop-mic:focus-visible, .cop-clip:focus-visible,
.cop-tg-head:focus-visible, .cop-ts-row--click:focus-visible, .prl-sugg-card:focus-visible, .prl-sess:focus-visible,
.prl-newbtn:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: 2px;
}

/* ── Cards de error de la conversacion (402 / red) ───────────────────────── */

.cop-alert { border-radius: 12px; padding: 13px 14px; }
.cop-alert-credits { border: 1px solid var(--draft-border); background: var(--draft-bg); }
.cop-alert-net { border: 1px solid var(--danger-fg); background: var(--danger-bg); }
.cop-alert-row { display: flex; align-items: center; gap: 9px; }
.cop-alert-ic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; }
.cop-alert-ic svg { width: 15px; height: 15px; }
.cop-alert-ic-credits { background: var(--draft-border); color: var(--draft-fg); }
.cop-alert-ic-net { background: var(--danger-bg); color: var(--danger-fg); }
.cop-alert-title { font-size: 12.5px; font-weight: 600; }
.cop-alert-sub { font-size: 11px; }
.cop-alert-credits .cop-alert-title { color: var(--draft-fg); }
.cop-alert-credits .cop-alert-sub { color: var(--draft-fg-muted); }
.cop-alert-net .cop-alert-title { color: var(--danger-fg); }
.cop-alert-net .cop-alert-sub { color: var(--danger-fg); opacity: .8; }
.cop-alert-btn { width: 100%; margin-top: 11px; justify-content: center; display: inline-flex; }

/* ── Composer ────────────────────────────────────────────────────────────── */

.cop-composer { flex: none; border-top: 1px solid var(--border-subtle); padding: 11px 14px; background: var(--surface-card); }
/* Dos pisos (SDD Perla v3 §2): el input arriba y `.cop-composer-bar` abajo (+ a la
   izquierda; micrófono y enviar a la derecha). */
.cop-composer-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 8px 8px 8px 13px;
  background: var(--surface-card);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.cop-composer-bar { display: flex; align-items: center; gap: 6px; margin-left: -5px; }
.cop-composer-gap { flex: 1; min-width: 0; }
.cop-composer-row:focus-within { border-color: var(--text-strong); }
.cop-input {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-strong);
  background: transparent;
  padding: 7px 0;
  max-height: 140px;
}
.cop-input::placeholder { color: var(--text-faint); }
.cop-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  transition: opacity var(--dur-fast);
}
.cop-send:disabled { opacity: .35; cursor: not-allowed; }
.cop-send:hover:not(:disabled) { background: var(--pv3-btn-hover); }
.cop-send--loading { opacity: .72; }
.cop-composer-hint { font-size: 10.5px; line-height: 1.35; color: var(--text-muted); text-align: center; margin-top: 6px; }
.cop-disclaimer { font-size: 10.5px; color: var(--text-faint); text-align: center; margin-top: 8px; }

/* ── Dictado por voz (F6) ─────────────────────────────────────────────────
   Cinco estados del composer, uno a la vez: mic en reposo (la fila normal, con
   .cop-mic entre el input y enviar), grabando, transcribiendo, fallo y permiso
   denegado. Los tres ultimos REEMPLAZAN la fila, asi que comparten la geometria
   de .cop-composer-row (mismo alto, mismo radio) para que el composer no salte. */

.cop-mic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  transition: background var(--dur-fast), opacity var(--dur-fast);
}
.cop-mic:hover:not(:disabled) { background: var(--surface-page); color: var(--text-strong); }
.cop-mic:disabled { opacity: .4; cursor: not-allowed; }

/* ── Adjuntos de imagen (F8) ───────────────────────────────────────────────
   El clip comparte geometria EXACTA con .cop-mic: los tres botones de la fila son
   34x34 con radio 9px, y cualquier diferencia se nota porque estan pegados. La fila
   de chips vive ARRIBA de .cop-composer-row y solo existe mientras haya algo que
   mostrar, asi el composer no cambia de alto en reposo. */
.cop-clip {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--pv3-text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  transition: background var(--dur-fast), opacity var(--dur-fast);
}
.cop-clip:hover:not(:disabled) { background: var(--surface-page); }
.cop-clip:disabled { opacity: .4; cursor: not-allowed; }

.cop-attach-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.cop-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 4px 4px 4px 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
}
.cop-attach-thumb {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
  background: var(--neutral-200);
}
.cop-attach-name {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cop-attach-x {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cop-attach-x:hover { background: var(--neutral-200); color: var(--text-strong); }
.cop-attach-busy { font-size: 11.5px; color: var(--text-faint); }
.cop-attach-err { font-size: 11.5px; color: var(--coral); }

/* Arrastre sobre la conversacion. Pegado al scroll (no fixed): las dos superficies que
   incluyen este cuerpo (_copiloto.html y _perla.html) tienen anchos distintos. */
.cop-drop {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px dashed var(--coral);
  border-radius: var(--radius-sm);
  background: var(--coral-50);
  color: var(--text-strong);
  font-size: 12.5px;
}

/* Imagen dentro de la burbuja del usuario: se alinea a la DERECHA como la burbuja. */
.cop-user-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 82%;
  min-width: 0;
}
.cop-msg-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 100%;
}
.cop-msg-img {
  max-width: min(260px, 100%);
  max-height: 260px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  object-fit: contain;
  background: var(--surface-sunken);
}
/* Con más de una, miniatura cuadrada: cuatro capturas a 260px de alto ocupan más que la
   ventana del chat y dejan la respuesta de Perla abajo de todo, fuera de la vista. */
.cop-msg-imgs-multi .cop-msg-img {
  width: 116px;
  height: 116px;
  max-width: 116px;
  max-height: 116px;
  object-fit: cover;
}

/* PR 4 · Documentos y planillas adjuntos (SDD §5): chip blanco dentro de la burbuja del
   usuario, con icono de archivo, nombre y peso en mono. */
.cop-msg-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  white-space: normal;
}
.cop-msg-files:first-child { margin-top: 0; }
.cop-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 6px 10px;
  background: var(--surface-card);
  color: var(--text-strong);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.cop-file-ico { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
.cop-file-name {
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cop-file-size {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  white-space: nowrap;
  flex: none;
}
.cop-attach-fileico {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-card);
  color: var(--text-muted);
}

/* (2) Grabando: borde coral + fondo calido, la barra ocupa TODO el ancho del composer. */
.cop-rec {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--coral);
  border-radius: 12px;
  padding: 8px 10px 8px 12px;
  background: var(--coral-50);
}
.cop-rec-dot {
  width: 9px; height: 9px; border-radius: 99px;
  background: var(--coral); flex: none;
  animation: cop-pulse 1.1s ease-in-out infinite;
}
.cop-rec-wave {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  height: 24px; overflow: hidden;
}
.cop-rec-bar {
  width: 2px; border-radius: 2px; flex: none;
  background: var(--coral);
  transform-origin: center;
  animation: cop-wave 1.05s ease-in-out infinite;
}
.cop-rec-time {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  color: var(--text-strong);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.cop-rec-max { color: var(--text-faint); }
.cop-rec-cancel {
  width: 26px; height: 26px; border-radius: 7px;
  border: none; background: transparent;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  flex: none; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cop-rec-cancel:hover { background: rgba(14,14,16,.06); color: var(--text-strong); }
.cop-rec-stop {
  width: 30px; height: 30px; border-radius: 8px;
  border: none;
  background: var(--surface-dark); color: var(--text-on-dark);
  display: flex; align-items: center; justify-content: center;
  flex: none; cursor: pointer;
  transition: opacity var(--dur-fast);
}
.cop-rec-stop:hover { opacity: .88; }

/* (3)(4)(5) Cajas de estado: misma silueta que la fila del composer. */
.cop-audio-box {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface-card);
}
.cop-audio-label { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text-body); line-height: 1.4; }
.cop-audio-skel {
  height: 9px; width: 90px; flex: none; border-radius: 5px;
  background: var(--neutral-200);
  background-image: linear-gradient(90deg, var(--neutral-200) 0px, var(--neutral-100) 70px, var(--neutral-200) 140px);
  background-size: 320px 100%;
  animation: nisto-shimmer 1.15s infinite linear;
}
.cop-audio-fail { border-color: var(--error-border); background: var(--danger-bg); }
.cop-audio-fail-text { color: var(--danger-fg); font-weight: 600; }
.cop-audio-denied { border-color: var(--draft-border); background: var(--draft-bg); }
.cop-audio-denied-text { color: var(--draft-fg); font-size: 11.5px; font-weight: 500; }
.cop-audio-x {
  width: 24px; height: 24px; border-radius: 6px;
  border: none; background: transparent; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  flex: none; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.cop-audio-x:hover { background: rgba(14,14,16,.06); color: var(--text-strong); }

/* Forma de onda: las barras respiran con desfase (animation-delay inline por barra).
   Es decorativa — no lee el nivel real del microfono. */
@keyframes cop-wave {
  0%, 100% { transform: scaleY(.45); }
  50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cop-rec-bar, .cop-rec-dot, .cop-audio-skel, .cop-liverow-dot, .cop-thinking-mark { animation: none; }
  /* El shimmer pinta el texto con un degradado recortado: apagar SOLO la animación
     dejaría "Pensando…" en color: transparent, o sea invisible. */
  .cop-tg-shimmer {
    animation: none;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--text-body);
  }
}

/* ── Mobile: chat a pantalla completa dentro del flujo del builder ───────── */

@media (max-width: 768px) {
  /* Full-bleed sin márgenes negativos: el padding horizontal se saca de la PÁGINA
     (el valor cambia entre breakpoints, así que un -24px fijo se pasaba de largo) y
     lo recupera la barra del toggle, que sí lo necesita. */
  #nisto-main > div[x-show].cop-page { padding-left: 0; padding-right: 0; padding-bottom: 0; }
  .cop-mtabs { padding: 10px 16px; }
  /* SIN reserva propia para la bottom bar: el shell mobile YA la reserva en el
     contenedor de #nisto-main — sumar 64px acá dejaba ~80px muertos entre el
     composer y el menu (bug real reportado). */
  .cop-host { padding-bottom: 0; }
  .cop-chat { margin: 0; border-radius: 0; border-left: none; border-right: none; }
  .cop-scroll { padding: 14px 12px 8px; }
  /* Traza: el blob del asistente baja a 22px y el expandido de un paso usa TODO el
     ancho (en 390px el margen derecho del detalle comía la mitad del JSON). */
  .cop-msg-bot .cop-mark-26 { width: 22px; height: 22px; }
  .cop-msg-bot { gap: 8px; }
  .cop-liverow { padding: 7px 12px; }
  .cop-list { grid-template-columns: 1fr; }
  .cop-list-arrow { padding-top: 0; transform: rotate(90deg); justify-content: center; }
  .cop-foot { flex-wrap: wrap; }
  .cop-foot .cop-btn, .cop-foot .cop-btn-primary { flex: 1; text-align: center; }
  /* Dictado: la barra ya ocupa el ancho (reemplaza la fila); solo se aprieta la
     geometria para que el contador y el stop entren en 390px. */
  .cop-rec { gap: 8px; padding: 8px 9px 8px 11px; }
  .cop-rec-wave { height: 22px; }
  .cop-rec-time { font-size: 11.5px; }
  .cop-audio-box { flex-wrap: wrap; }
  .cop-audio-denied-text { flex-basis: 0; }
}

/* ══════════════════ PERLA · SECCIÓN DEL MENÚ (P3) ══════════════════
   El chat es el mismo (.cop-chat); lo que cambia es el marco: la sección ocupa el
   viewport y suma un rail de sesiones a la izquierda. En móvil el rail pasa a ser un
   bottom sheet, igual que el de Nisto AI.
   ══════════════════════════════════════════════════════════════════ */

#view-perla {
  height: 100vh;
  display: flex;
  background: var(--surface-card, #fff);
}

/* Mismo caso que `.cop-page` arriba: scrollean el rail y la conversación, no la vista.
   La especificidad tiene que empatar la regla de nisto-nav.css
   (`#nisto-main > div[x-show]`, que trae `overflow-y:auto`), por eso el selector lleva
   los dos ids. */
#nisto-main > div[x-show]#view-perla { overflow: hidden; }

/* Rail de sesiones (SDD v3 §2): 274px, fondo casi blanco, borde derecho suave. */
.prl-rail {
  width: 274px;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 18px 14px 14px;
  min-height: 0;
  background: var(--pv3-rail-bg);
  border-right: 1px solid var(--pv3-border-soft);
}

.prl-newbtn {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  border: 1px solid var(--pv3-border);
  background: var(--surface-card);
  color: var(--text-strong);
  font: inherit; font-size: 15px; font-weight: 600;
  padding: 11px 13px; border-radius: 12px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,16,18,.04);
  transition: background var(--dur-fast) ease;
}
.prl-newbtn:hover { background: var(--neutral-50); }

.prl-search {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; padding: 0 12px;
  background: var(--surface-page);
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--text-faint);
  cursor: text;
}
.prl-search:focus-within { border-color: var(--pv3-border); background: var(--surface-card); }
.prl-search-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font: inherit; font-size: 14.5px; color: var(--text-strong);
  padding: 9px 0;
}
.prl-search-input::placeholder { color: var(--text-faint); }
.prl-search-input::-webkit-search-cancel-button { cursor: pointer; }

.prl-rail-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-faint);
  padding: 22px 11px 9px;
}

.prl-sesslist {
  display: flex; flex-direction: column; gap: 1px;
  overflow-y: auto; flex: 1; min-height: 0;
}

.prl-sess-empty {
  font-size: 13.5px; line-height: 1.5;
  color: var(--text-faint);
  padding: 8px 11px;
}

.prl-sess {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 10px 11px; border-radius: 10px;
  border: none; background: transparent; font: inherit; cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.prl-sess:hover { background: var(--neutral-100); }
.prl-sess.active { background: var(--neutral-100); }

.prl-sess-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--pv3-dot-idle);
}
.prl-sess.active .prl-sess-dot { background: var(--coral-500); }
/* Sesiones paralelas: la conversación que responde en segundo plano gira; la que terminó sin
   que la miraras queda con punto coral hasta abrirla. */
.prl-sess-dot.is-fresh, .cop-sess-dot.is-fresh { background: var(--coral-500); }
.prl-sess .prl-sess-dot.is-running, .cop-sess-spin {
  width: 10px; height: 10px; border-radius: 50%; flex: none; background: transparent;
  border: 1.5px solid var(--neutral-200); border-top-color: var(--text-strong);
  animation: cop-spin .8s linear infinite;
}
/* Mismo ancho que el punto (6 px): el título no se corre al girar. */
.prl-sess .prl-sess-dot.is-running { margin: 0 -2px; }

.prl-sess-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.prl-sess-title {
  font-size: 14.5px; color: var(--text-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prl-sess.active .prl-sess-title { font-weight: 600; color: var(--text-strong); }
.prl-sess-date { font-size: 12.5px; color: var(--pv3-text-hint); }

.prl-sess-del {
  flex: none; opacity: 0; color: var(--text-faint);
  width: 26px; height: 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
}
.prl-sess:hover .prl-sess-del, .prl-sess:focus-within .prl-sess-del { opacity: 1; }
.prl-sess-del:hover { color: var(--text-body); background: var(--surface-card); }

/* Overview por agente: sesiones fijas del rail + chip de los mensajes de sistema. */
.prl-ov-icon { flex: none; color: var(--text-faint); }
.prl-sess.active .prl-ov-icon { color: var(--coral-500); }
.prl-ov-badge {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--coral-500); color: var(--surface-card);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.cop-ov-chip {
  display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: 9px;
  background: var(--neutral-100); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
}
.cop-ov-cfg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cop-ov-select {
  font: inherit; font-size: 12px; color: var(--text-body);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 3px 8px;
}
.cop-ov-head {
  margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.prl-seeall {
  margin-top: 6px; padding: 8px 11px; border-radius: 10px;
  border: none; background: transparent; font: inherit; font-size: 13.5px;
  color: var(--text-muted); cursor: pointer; text-align: left;
}
.prl-seeall:hover { background: var(--neutral-100); }

.prl-page-main {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface-card);
}

/* El chat llena la columna, sin la tarjeta con borde del builder (SDD v3: el hilo ES la
   superficie blanca). */
.prl-page-chat { margin: 0; border: none; border-radius: 0; }

/* Sólo móvil: el rail es un bottom sheet */
.prl-sheet-veil { display: none; }
.prl-sheet-handle { display: none; }
.prl-sheet-btn { display: none; }

/* 768px, no 900: es donde corta TODO el chrome móvil de la app (nisto-ai.css:458,
   nisto-nav.css:687, nisto-mobile.css:29). Con 900 había una franja de 769-900px donde
   el rail se volvía bottom sheet con el sidebar de desktop todavía visible, y reservaba
   el alto de `--mnav-h` para una barra móvil que estaba oculta. */
@media (max-width: 768px) {
  #view-perla {
    height: calc(100dvh - var(--mnav-h, 0px)) !important;
    flex-direction: column;
  }
  /* Ancho completo en el teléfono: sin el padding de la columna ni la tarjeta con
     borde/radio de escritorio, que dejaban un marco gris alrededor del chat. Queda solo
     la línea superior, que separa el botón "Conversaciones" del chat. */
  .prl-page-main { padding: 0; }
  .prl-page-chat {
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 0;
  }

  .prl-rail {
    position: fixed; left: 0; right: 0; bottom: var(--mnav-h, 0px);
    top: 12%; width: 100% !important; z-index: 70;
    border-right: 0; border-top-left-radius: 22px; border-top-right-radius: 22px;
    box-shadow: 0 -16px 40px -20px rgba(16, 16, 18, .4);
    transform: translateY(110%); transition: transform .24s ease;
  }
  .prl-rail.prl-sheet-open { transform: translateY(0); }

  .prl-sheet-veil {
    display: block;
    position: fixed; inset: 0 0 var(--mnav-h, 0px) 0; z-index: 69;
    background: rgba(16, 16, 18, .28);
  }
  .prl-sheet-handle {
    display: flex; justify-content: center; padding: 2px 0 10px;
  }
  .prl-sheet-handle span {
    width: 38px; height: 4px; border-radius: 99px;
    background: var(--border-subtle, #E8E8E6);
  }
  .prl-sheet-btn {
    display: inline-flex; align-items: center; gap: 7px;
    align-self: flex-start; margin: 10px 12px;
    border: 1px solid var(--border-subtle, #E8E8E6);
    background: var(--surface-card, #fff);
    color: var(--text-body, #3C3D41);
    font: inherit; font-size: 12.5px; font-weight: 600;
    padding: 6px 11px; border-radius: 9px; cursor: pointer;
  }
}

/* ══════════════════ CARDS DE ACCIÓN (base) ══════════════════
   Vienen de nisto-perla.css, que se borró con la orbe flotante (P3). El chat las usa en
   las dos superficies —el tab Copiloto del builder y la sección Perla— y las
   re-geometriza más abajo; esto es la base que quedaba en el archivo viejo.
   ════════════════════════════════════════════════════════════ */

.prl-action-card {
  border: 1px solid var(--border-subtle, #E8E8E6);
  border-radius: var(--radius-sm, 11px);
  padding: 12px 14px;
  margin: 8px 0 8px 36px;
  background: var(--surface-card, #fff);
  transition: border-color 0.15s ease;
}

.prl-diff {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

.prl-diff-col {
  min-width: 0;
}

.prl-diff-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint, #A6A7AC);
  margin-bottom: 4px;
}

.prl-diff-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  background: var(--neutral-50, #F7F7F6);
  border-radius: 6px;
  padding: 8px 10px;
  /* Los diffs ya no se truncan server-side (son una APROBACIÓN): lo largo scrollea acá. */
  max-height: 320px;
  overflow-y: auto;
  color: var(--text-body, #3C3D41);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ══════════════════ PERLA v3 · HILO (SDD §2 · §3 · §5 · §6 · §7) ══════════════════
   UNA sola anatomía para las dos superficies del chat (12/10, "todo lo que está en Perla
   debería estar acá también"): la sección Perla (`#view-perla`) y el tab Copiloto del
   builder (`.cop-chat.cop-v3`, en _copiloto.html) comparten markup (_chat_body.html) Y
   estilos: hilo a 16px, columna de 820px centrada, tarjetas/traza/burbujas del handoff.
   Los componentes van bajo `:is(#view-perla, .cop-v3)` — `:is()` toma la especificidad
   del id, así que la Perla de siempre no cambia ni un píxel. Solo el MARCO de la página
   Perla (sin cabecera, sin fila viva, estado inicial centrado, botón del rail) queda bajo
   `#view-perla`; el Copiloto conserva su cabecera "Conectado a este agente vía MCP".
   `tests/test_copiloto_ui_unica.py` falla si un componente vuelve a quedar solo en Perla.
   Animaciones: SOLO pv3Rise / pv3Breathe / pv3Spin (§12).
   ════════════════════════════════════════════════════════════════════════════════ */

@keyframes pv3Rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pv3Breathe { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes pv3Spin { to { transform: rotate(360deg); } }

#view-perla .prl-page-chat,
.cop-chat.cop-v3 { font-size: 16px; color: var(--text-body); }

/* La fila "Nisto · PERLA · Conectada…" se va: la topbar ya dice dónde estás. */
#view-perla .cop-head { display: none; }
#view-perla .cop-liverow { padding: 8px 32px; }
#view-perla .cop-liverow-label { font-size: 13px; }
#view-perla .prl-sheet-btn { font-size: 13.5px; }

/* ── Hilo: columna de 820px centrada ── */
:is(#view-perla, .cop-v3) .cop-scroll {
  padding: 34px 32px 14px;
  gap: 26px;
  background: var(--surface-card);
  scrollbar-width: thin;
  scrollbar-color: var(--neutral-300) transparent;
}
/* `width:100%`: en un flex column los márgenes auto apagan el stretch. */
:is(#view-perla, .cop-v3) .cop-scroll > * { width: 100%; max-width: 820px; margin-left: auto; margin-right: auto; }
:is(#view-perla, .cop-v3) .cop-scroll > div { animation: pv3Rise .3s var(--ease-out); }

/* ── Mensaje del usuario (§5) ── */
:is(#view-perla, .cop-v3) .cop-user-stack { max-width: 76%; }
:is(#view-perla, .cop-v3) .cop-bubble-user {
  max-width: 100%;
  font-size: 16px;
  line-height: 1.58;
  padding: 15px 19px;
  border-radius: 18px 18px 6px 18px;
}
:is(#view-perla, .cop-v3) .cop-msg-files { gap: 8px; margin-top: 13px; }
:is(#view-perla, .cop-v3) .cop-msg-files:first-child { margin-top: 0; }
:is(#view-perla, .cop-v3) .cop-file-chip { gap: 9px; padding: 8px 11px; border-color: var(--pv3-border); }
:is(#view-perla, .cop-v3) .cop-file-ico { width: 15px; height: 15px; }
:is(#view-perla, .cop-v3) .cop-file-name { font-size: 13.5px; font-weight: 500; color: var(--text-body); }

/* ── Mensaje de Perla (§5): sin burbuja, orbe de 28px por bloque de texto ──
   El cuerpo va sangrado 42px (orbe 28 + gap 14) para que traza y tarjetas alineen con
   el texto; el orbe lo pinta cada `.cop-md` en su margen, como en el prototipo. */
:is(#view-perla, .cop-v3) .cop-msg-bot { display: block; }
:is(#view-perla, .cop-v3) .cop-msg-bot > .cop-mark { display: none; }
:is(#view-perla, .cop-v3) .cop-bot-body { margin-left: 0; display: flex; flex-direction: column; gap: 26px; }
:is(#view-perla, .cop-v3) .cop-bot-body > div { min-width: 0; }
/* Orbe del bloque de texto = isotipo de marca 28px en el margen sangrado (SDD layout §2).
   Nodo real (no ::before): el SVG sale de partials/_nisto_mark.html. */
:is(#view-perla, .cop-v3) .cop-md-row { position: relative; }
:is(#view-perla, .cop-v3) .cop-md-mark {
  /* SDD Isotipo animado §2: los mensajes de Nisto NO llevan isotipo (el texto arranca sin
     sangría); el isotipo de la sesión aparece solo, animado, mientras Nisto trabaja. */
  display: none;
  position: absolute;
  left: -42px;
  top: 2px;
  width: 28px;
  height: 28px;
  color: var(--text-strong);
}
:is(#view-perla, .cop-v3) .cop-md {
  font-size: 16px;
  line-height: 1.66;
  color: var(--pv3-text-thread);
  overflow-wrap: anywhere;
}
:is(#view-perla, .cop-v3) .cop-md p { margin: 0 0 12px; }
:is(#view-perla, .cop-v3) .cop-md p:last-child { margin-bottom: 0; }
:is(#view-perla, .cop-v3) .cop-md code { font-size: 13px; overflow-wrap: anywhere; }
/* Hilo con la letra del sistema (la de Claude / Grok / ChatGPT en cada SO), no la del panel:
   se lee como una conversación. Las listas con viñetas y números de verdad (el reset de
   Tailwind les sacaba el marcador y quedaban solo sangradas). */
:is(#view-perla, .cop-v3) .cop-md,
:is(#view-perla, .cop-v3) .cop-bubble-user,
:is(#view-perla, .cop-v3) .cop-tg-head,
:is(#view-perla, .cop-v3) .cop-ts-label {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}
:is(#view-perla, .cop-v3) .cop-md ul { list-style: disc; padding-left: 24px; margin: 6px 0 12px; }
:is(#view-perla, .cop-v3) .cop-md ol { list-style: decimal; padding-left: 24px; margin: 6px 0 12px; }
:is(#view-perla, .cop-v3) .cop-md ul ul { list-style: circle; margin: 4px 0; }
:is(#view-perla, .cop-v3) .cop-md li { margin: 4px 0; padding-left: 2px; }
:is(#view-perla, .cop-v3) .cop-md li::marker { color: var(--text-muted); }
:is(#view-perla, .cop-v3) .cop-md h1, :is(#view-perla, .cop-v3) .cop-md h2,
:is(#view-perla, .cop-v3) .cop-md h3, :is(#view-perla, .cop-v3) .cop-md h4 {
  font-size: 17px; font-weight: 650; line-height: 1.4; margin: 18px 0 6px; color: var(--text-strong);
}
:is(#view-perla, .cop-v3) .cop-md > :first-child { margin-top: 0; }
/* Pensando (§4): isotipo de 28px alineado con el orbe del turno (sale del sangrado). */
:is(#view-perla, .cop-v3) .cop-thinking { display: flex; gap: 10px; margin-left: 0; font-size: 14.5px; animation: pv3Rise .25s var(--ease-out); }
:is(#view-perla, .cop-v3) .cop-thinking-mark { width: 28px; height: 28px; }
:is(#view-perla, .cop-v3) .cop-meta { margin-top: -18px; }
:is(#view-perla, .cop-v3) .cop-meta-time, :is(#view-perla, .cop-v3) .cop-meta-worked { font-size: 13px; }

/* ── Traza (§3): una línea de 14px por grupo; abierto, filas sobre un filete ── */
/* `margin:-8px 0`: el hilo separa bloques con 26px; las líneas de traza van más juntas. */
:is(#view-perla, .cop-v3) .cop-tg { margin: -8px 0; }
:is(#view-perla, .cop-v3) .cop-tg-head { padding: 4px 0; font-size: 14px; }
:is(#view-perla, .cop-v3) .cop-tg-chev { margin-left: 8px; }
:is(#view-perla, .cop-v3) .cop-tg-body { margin-top: 6px; padding-left: 14px; }
:is(#view-perla, .cop-v3) .cop-tgs > .cop-tgs-body { margin-top: 2px; padding-left: 14px; border-left: 1px solid var(--pv3-border-soft); }
:is(#view-perla, .cop-v3) .cop-tgs-body .cop-tg { margin: 0; }
:is(#view-perla, .cop-v3) .cop-ts-row { gap: 9px; padding: 7px 0; }
:is(#view-perla, .cop-v3) .cop-ts-label { font-size: 14px; }
:is(#view-perla, .cop-v3) .cop-ts-tool { font-size: 11.5px; }
:is(#view-perla, .cop-v3) .cop-ts-sum { font-size: 13px; }
:is(#view-perla, .cop-v3) .cop-ts-errtext { font-size: 13.5px; line-height: 1.55; padding-bottom: 10px; }
:is(#view-perla, .cop-v3) .cop-ts-det { gap: 7px; margin: 2px 0 10px; }
:is(#view-perla, .cop-v3) .cop-ts-block { border-color: var(--pv3-border-soft); border-radius: 9px; padding: 9px 11px; }
:is(#view-perla, .cop-v3) .cop-ts-call { background: var(--pv3-call-bg); }
:is(#view-perla, .cop-v3) .cop-ts-bhead { font-size: 10px; letter-spacing: .9px; }
:is(#view-perla, .cop-v3) .cop-ts-code { font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
:is(#view-perla, .cop-v3) .cop-ts-sumtext { font-size: 13.5px; line-height: 1.55; }
:is(#view-perla, .cop-v3) .cop-ts-more { font-size: 12px; }

/* ── Tarjeta (§7) ── */
:is(#view-perla, .cop-v3) .prl-action-card {
  margin: 0;
  border: 1px solid var(--pv3-border-soft);
  border-radius: 16px;
  background: var(--surface-card);
  box-shadow: 0 1px 2px rgba(16,16,18,.04);
  opacity: 1;
}
/* Borde: más marcado mientras espera la aprobación; suave una vez resuelta (§5). */
:is(#view-perla, .cop-v3) .cop-card--pending { border-color: var(--pv3-border-card); }
:is(#view-perla, .cop-v3) .cop-card--error { border-color: var(--error-border); }

:is(#view-perla, .cop-v3) .cop-card-head { padding: 16px 18px 0; }
:is(#view-perla, .cop-v3) .cop-card-top { gap: 9px; flex-wrap: wrap; margin-bottom: 0; }
:is(#view-perla, .cop-v3) .cop-card-ic { display: none; }
:is(#view-perla, .cop-v3) .cop-card-tool {
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 6px;
  max-width: 100%;
}
:is(#view-perla, .cop-v3) .cop-card-status {
  font-size: 10px;
  letter-spacing: .8px;
  padding: 4px 9px;
  border-radius: 6px;
}
:is(#view-perla, .cop-v3) .cop-card-title {
  margin-top: 11px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.2px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
:is(#view-perla, .cop-v3) .cop-card-where { margin-top: 5px; font-size: 14px; }
:is(#view-perla, .cop-v3) .cop-card-pill { font-size: 11px; }
:is(#view-perla, .cop-v3) .cop-card-scope { font-size: 13px; }
:is(#view-perla, .cop-v3) .cop-card--off .cop-card-title { color: var(--text-muted); }

:is(#view-perla, .cop-v3) .cop-card-body { padding: 15px 18px 0; }

/* lines: clave mono 11px en columna flexible → valor 14.5px */
:is(#view-perla, .cop-v3) .cop-fields { border-color: var(--pv3-border-inner); border-radius: 12px; }
:is(#view-perla, .cop-v3) .cop-field { gap: 14px; padding: 10px 13px; }
:is(#view-perla, .cop-v3) .cop-field + .cop-field { border-top-color: var(--pv3-border-row); }
:is(#view-perla, .cop-v3) .cop-field-k { font-size: 11px; padding-top: 2px; }
:is(#view-perla, .cop-v3) .cop-field-v { font-size: 14.5px; line-height: 1.5; color: var(--pv3-text-thread); }
:is(#view-perla, .cop-v3) .cop-line { font-size: 12.5px; line-height: 1.6; }

/* list: ANTES → AHORA en chips; lo añadido con + en verde */
:is(#view-perla, .cop-v3) .cop-list { grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); gap: 12px; }
:is(#view-perla, .cop-v3) .cop-list-lbl { font-size: 10px; letter-spacing: .9px; margin-bottom: 9px; }
:is(#view-perla, .cop-v3) .cop-list-arrow { color: var(--pv3-arrow); justify-content: center; padding-top: 26px; }
:is(#view-perla, .cop-v3) .cop-tchip {
  font-size: 13.5px;
  color: var(--text-muted);
  background: var(--surface-page);
  border-color: var(--pv3-chip-border);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 0 7px 7px 0;
  overflow-wrap: anywhere;
}
:is(#view-perla, .cop-v3) .cop-tchip.added { color: var(--live-fg); background: var(--live-bg); border-color: var(--live-border); }
:is(#view-perla, .cop-v3) .cop-list-none { font-size: 13.5px; }

/* step: líneas mono numeradas; contexto tenue, añadidas en verde */
:is(#view-perla, .cop-v3) .cop-steps {
  font-size: 12.5px;
  line-height: 1.95;
  border: 1px solid var(--pv3-border-inner);
  border-radius: 12px;
  padding: 11px 13px;
  background: var(--surface-subtle);
}
:is(#view-perla, .cop-v3) .cop-step { gap: 11px; padding: 0 4px; margin-top: 0; border-radius: 4px; overflow-wrap: anywhere; }
:is(#view-perla, .cop-v3) .cop-step-n { font-weight: 400; min-width: 16px; }
:is(#view-perla, .cop-v3) .cop-step-ctx { color: var(--text-faint); }
:is(#view-perla, .cop-v3) .cop-step-ctx .cop-step-n { color: var(--pv3-arrow); }
:is(#view-perla, .cop-v3) .cop-step-add, :is(#view-perla, .cop-v3) .cop-step-edit { background: var(--state-live-line); color: var(--live-fg); }

/* toggle + diff de texto: solo tamaños */
:is(#view-perla, .cop-v3) .cop-toggle-label, :is(#view-perla, .cop-v3) .cop-toggle-state { font-size: 14px; }
:is(#view-perla, .cop-v3) .prl-diff-label { font-size: 10.5px; }
:is(#view-perla, .cop-v3) .prl-diff-text { font-size: 12.5px; }

/* Nota obligatoria (§7.5) */
:is(#view-perla, .cop-v3) .cop-card-note {
  gap: 10px;
  margin: 14px 18px 0;
  padding: 11px 13px;
  background: var(--surface-subtle);
  border-color: var(--neutral-100);
  border-radius: 11px;
  font-size: 13.5px;
  line-height: 1.5;
}
:is(#view-perla, .cop-v3) .cop-card-note svg { width: 15px; height: 15px; }

/* Pie. Pendiente: Descartar + Aprobar (ancho), sin franja. Resuelto: franja con leyenda
   mono en el color del estado. Solo se re-estiliza: clases y bindings son los mismos. */
:is(#view-perla, .cop-v3) .cop-foot {
  gap: 9px;
  margin-top: 15px;
  padding: 0 18px 17px;
  border-top: none;
  background: transparent;
}
:is(#view-perla, .cop-v3) .cop-foot-note { font-size: 13px; min-width: 0; }
:is(#view-perla, .cop-v3) .cop-foot-note:empty { display: none; }
:is(#view-perla, .cop-v3) .cop-foot .cop-btn,
:is(#view-perla, .cop-v3) .cop-foot .cop-btn-primary,
:is(#view-perla, .cop-v3) .cop-foot .cop-btn-danger {
  font-size: 14.5px;
  padding: 11px 17px;
  border-radius: 11px;
  min-height: 44px;
}
:is(#view-perla, .cop-v3) .cop-foot .cop-btn { border-color: var(--pv3-border-btn); }
:is(#view-perla, .cop-v3) .cop-foot .cop-btn:hover { background: var(--surface-page); }
:is(#view-perla, .cop-v3) .cop-foot > .cop-btn-primary:last-child { flex: 1 1 160px; }
:is(#view-perla, .cop-v3) .cop-btn-primary:hover:not(:disabled) { background: var(--pv3-btn-hover); opacity: 1; }

:is(#view-perla, .cop-v3) .cop-foot-run,
:is(#view-perla, .cop-v3) .cop-foot-applied,
:is(#view-perla, .cop-v3) .cop-foot-applied-live,
:is(#view-perla, .cop-v3) .cop-foot-off,
:is(#view-perla, .cop-v3) .cop-foot-err {
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--neutral-100);
}
:is(#view-perla, .cop-v3) .cop-foot-run { background: var(--surface-subtle); }
:is(#view-perla, .cop-v3) .cop-foot-run svg { animation: pv3Spin .8s linear infinite; }
:is(#view-perla, .cop-v3) .cop-foot-applied { background: var(--state-amber-foot); }
:is(#view-perla, .cop-v3) .cop-foot-applied-live { background: var(--state-live-foot); }
:is(#view-perla, .cop-v3) .cop-foot-off { background: var(--surface-hover-row); }
:is(#view-perla, .cop-v3) .cop-foot-err { background: var(--danger-bg); border-top-color: var(--error-border); }
:is(#view-perla, .cop-v3) .cop-foot-applied .cop-foot-note,
:is(#view-perla, .cop-v3) .cop-foot-applied-live .cop-foot-note { flex: 1 1 auto; min-width: 0; }
:is(#view-perla, .cop-v3) .cop-foot-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .7px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--state-amber-fg);
  overflow-wrap: anywhere;
}
:is(#view-perla, .cop-v3) .cop-foot-title-live { color: var(--live-fg); }
:is(#view-perla, .cop-v3) .cop-foot-run .cop-foot-title { color: var(--text-muted); }
:is(#view-perla, .cop-v3) .cop-foot-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
:is(#view-perla, .cop-v3) .cop-foot-inverse { font-size: 13px; line-height: 1.4; color: var(--text-faint); text-align: right; overflow-wrap: anywhere; }
:is(#view-perla, .cop-v3) .cop-foot-off-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .7px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}
:is(#view-perla, .cop-v3) .cop-foot-err-text { font-size: 13.5px; }
:is(#view-perla, .cop-v3) .cop-foot-applied .cop-btn,
:is(#view-perla, .cop-v3) .cop-foot-applied-live .cop-btn,
:is(#view-perla, .cop-v3) .cop-foot-off .cop-btn {
  font-size: 13.5px;
  padding: 7px 12px;
  min-height: 36px;
  border-radius: 10px;
}

/* ── Alertas (402 / red) a la escala del hilo ── */
:is(#view-perla, .cop-v3) .cop-alert-title { font-size: 14.5px; }
:is(#view-perla, .cop-v3) .cop-alert-sub { font-size: 13.5px; }

/* ── Composer (§2) ── */
:is(#view-perla, .cop-v3) .cop-composer { border-top: none; padding: 8px 32px 20px; background: var(--surface-card); }
:is(#view-perla, .cop-v3) .cop-composer > * { max-width: 820px; margin-left: auto; margin-right: auto; }
:is(#view-perla, .cop-v3) .cop-composer-row {
  gap: 4px;
  border-color: var(--pv3-border);
  border-radius: 18px;
  padding: 13px 14px 13px 20px;
  box-shadow: 0 2px 6px rgba(16,16,18,.04);
}
:is(#view-perla, .cop-v3) .cop-composer-row:focus-within { border-color: var(--border-default); box-shadow: 0 2px 10px rgba(16,16,18,.07); }
:is(#view-perla, .cop-v3) .cop-input { font-size: 18px; line-height: 1.45; padding: 4px 0 6px; max-height: 220px; }
:is(#view-perla, .cop-v3) .cop-input::placeholder { color: var(--pv3-text-hint); }
:is(#view-perla, .cop-v3) .cop-composer-bar { gap: 8px; margin-left: -6px; }
:is(#view-perla, .cop-v3) .cop-clip, :is(#view-perla, .cop-v3) .cop-mic, :is(#view-perla, .cop-v3) .cop-send { width: 36px; height: 36px; }
:is(#view-perla, .cop-v3) .cop-disclaimer { margin-top: 11px; font-size: 13px; }
:is(#view-perla, .cop-v3) .cop-attach-row { gap: 8px; margin-bottom: 10px; }
:is(#view-perla, .cop-v3) .cop-attach-name, :is(#view-perla, .cop-v3) .cop-attach-busy, :is(#view-perla, .cop-v3) .cop-attach-err { font-size: 13px; }
:is(#view-perla, .cop-v3) .cop-audio-label { font-size: 14px; }
:is(#view-perla, .cop-v3) .cop-audio-denied-text { font-size: 13.5px; }
:is(#view-perla, .cop-v3) .cop-rec, :is(#view-perla, .cop-v3) .cop-audio-box { border-radius: 18px; padding: 12px 14px; }

/* ── Estado inicial (§2 · pantallazo 01): orbe 62, saludo 40px, composer y sugerencias ── */
#view-perla .prl-empty { overflow-y: auto; justify-content: center; padding: 40px 0; }
#view-perla .prl-empty .cop-scroll { flex: none; overflow: visible; padding-top: 0; padding-bottom: 0; }
#view-perla .prl-empty .cop-liverow { display: none; }
/* En Perla el estado vivo lo dice la fila "Pensando" del turno (isotipo girando en color):
   la barra de arriba con el punto coral lo repetía. El Copiloto del builder la conserva. */
#view-perla .cop-liverow { display: none; }
#view-perla .cop-empty { padding: 0; flex: none; }
/* Isotipo de marca 62px respirando (SDD layout §2): mismo isotipo que el hilo. */
#view-perla .cop-empty .cop-mark-empty {
  width: 62px;
  height: 62px;
  animation: pv3Breathe 5s ease-in-out infinite;
}
#view-perla .cop-empty-title {
  margin-top: 30px;
  font-size: 40px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -1.1px;
  text-wrap: pretty;
}
#view-perla .cop-empty-sub {
  margin-top: 16px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}
#view-perla .prl-empty .cop-composer { padding-top: 38px; padding-bottom: 0; }

.prl-sugg { width: 100%; max-width: 884px; margin: 0 auto; padding: 34px 32px 8px; }
.prl-sugg-title { font-size: 15px; font-weight: 600; color: var(--pv3-text-soft); }
.prl-sugg-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.prl-sugg-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px 17px 18px;
  background: var(--surface-card);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.prl-sugg-card:hover { background: var(--surface-hover-row); }
.prl-sugg-ic { width: 19px; height: 19px; color: var(--text-muted); flex: none; }
.prl-sugg-text { font-size: 15px; line-height: 1.45; color: var(--text-body); overflow-wrap: anywhere; text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  :is(#view-perla, .cop-v3) .cop-scroll > div, #view-perla .cop-empty .cop-mark-empty { animation: none; }
}

/* ── Perla v3 en el teléfono: misma anatomía, márgenes de 16px y orbe de 24 ── */
@media (max-width: 768px) {
  :is(#view-perla, .cop-v3) .cop-scroll { padding: 20px 16px 10px; gap: 22px; }
  #view-perla .cop-liverow { padding: 8px 16px; }
  :is(#view-perla, .cop-v3) .cop-user-stack { max-width: 88%; }
  :is(#view-perla, .cop-v3) .cop-bubble-user { padding: 12px 15px; }
  :is(#view-perla, .cop-v3) .cop-bot-body { margin-left: 0; gap: 22px; }
  :is(#view-perla, .cop-v3) .cop-md-mark { left: -34px; width: 24px; height: 24px; }
  :is(#view-perla, .cop-v3) .cop-thinking { margin-left: 0; gap: 10px; }
  :is(#view-perla, .cop-v3) .cop-thinking-mark { width: 24px; height: 24px; }
  :is(#view-perla, .cop-v3) .cop-meta { margin-top: -14px; }
  :is(#view-perla, .cop-v3) .cop-tg { margin: -6px 0; }
  :is(#view-perla, .cop-v3) .cop-tg-body { padding-left: 12px; }
  :is(#view-perla, .cop-v3) .cop-card-head { padding: 14px 14px 0; }
  :is(#view-perla, .cop-v3) .cop-card-body { padding: 13px 14px 0; }
  :is(#view-perla, .cop-v3) .cop-card-note { margin: 12px 14px 0; }
  :is(#view-perla, .cop-v3) .cop-foot { padding: 0 14px 14px; }
  :is(#view-perla, .cop-v3) .cop-foot-run, :is(#view-perla, .cop-v3) .cop-foot-applied, :is(#view-perla, .cop-v3) .cop-foot-applied-live,
  :is(#view-perla, .cop-v3) .cop-foot-off, :is(#view-perla, .cop-v3) .cop-foot-err { padding: 12px 14px; }
  :is(#view-perla, .cop-v3) .cop-foot .cop-btn, :is(#view-perla, .cop-v3) .cop-foot .cop-btn-primary { flex: 1 1 auto; }
  :is(#view-perla, .cop-v3) .cop-list { grid-template-columns: minmax(0, 1fr); }
  :is(#view-perla, .cop-v3) .cop-list-arrow { padding-top: 0; }
  :is(#view-perla, .cop-v3) .cop-field { flex-direction: column; gap: 3px; }
  :is(#view-perla, .cop-v3) .cop-field-k { flex-basis: auto; }
  :is(#view-perla, .cop-v3) .cop-composer { padding: 6px 16px 10px; }
  :is(#view-perla, .cop-v3) .cop-composer-row { padding: 10px 10px 10px 14px; }
  :is(#view-perla, .cop-v3) .cop-input { font-size: 16px; }
  /* 44px de toque en el teléfono (§12) */
  :is(#view-perla, .cop-v3) .cop-clip, :is(#view-perla, .cop-v3) .cop-mic, :is(#view-perla, .cop-v3) .cop-send { width: 44px; height: 44px; }
  :is(#view-perla, .cop-v3) .cop-disclaimer { margin-top: 8px; font-size: 13px; }
  #view-perla .prl-empty { padding: 24px 0; }
  #view-perla .cop-empty-title { font-size: 30px; letter-spacing: -.7px; margin-top: 22px; }
  #view-perla .cop-empty-sub { font-size: 16px; padding: 0 8px; }
  #view-perla .prl-empty .cop-composer { padding-top: 26px; }
  .prl-sugg { padding: 26px 16px 8px; }
  .prl-sugg-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .prl-sugg-card { flex-direction: row; align-items: center; gap: 12px; padding: 14px 15px; }
  .prl-sess { min-height: 44px; }
  .prl-sess-del { opacity: 1; width: 36px; height: 36px; }
  .prl-sheet-btn { min-height: 40px; }
}

/* ── Conectar una integración desde la tarjeta (Perla v3 · PR 6, SDD §8) ──────────────
   La ventana del proveedor es REAL (popup); en la tarjeta solo va el rótulo mono "Ventana
   abierta por X · fuera de Nisto" con el host, y la barra "Esperando la ventana de X…". */
.cop-foot-auth { flex-direction: column; align-items: stretch; gap: 10px; }
.cop-auth-win {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.cop-auth-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; }
.cop-auth-host {
  text-transform: none; letter-spacing: 0; color: var(--text-faint);
  overflow-wrap: anywhere;
}
.cop-auth-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cop-auth-wait { color: var(--text-body); }
.cop-auth-actions { justify-content: flex-end; }
.cop-auth-mono { font-family: var(--font-mono); font-size: 11.5px; overflow-wrap: anywhere; }
/* Tarjeta verde de una conexión: la línea "cuenta · permisos" es larga y sin espacios útiles;
   la nota toma el ancho que queda en vez de empujar el ícono a otra fila. */
.cop-foot-connect .cop-foot-note,
:is(#view-perla, .cop-v3) .cop-foot-connect .cop-foot-note { flex: 1 1 0; min-width: 0; }
:is(#view-perla, .cop-v3) .cop-foot-auth { gap: 12px; }
:is(#view-perla, .cop-v3) .cop-auth-wait { font-size: 14.5px; }

/* ── Panel de canales y conexiones del agente (Perla v3 · SDD §5) ─────────────────────
   Lista blanca: cabecera 14px/600 y filas con cuadrado de iniciales de 34px coloreado por
   estado (ok verde · warn ámbar · off gris), nombre 14.5px/600, detalle 13px y, a la derecha,
   pill "Asignado / Conectado", spinner + connections_get…, o botón de acción. Hereda la
   sangría del cuerpo del mensaje (42px en la sección Perla), igual que las tarjetas. */
.cop-panel {
  border: 1px solid var(--pv3-border-soft);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-card);
  margin: 2px 0;
}
.cop-panel-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--pv3-border-inner);
  font-size: 14px; font-weight: 600; color: var(--text-strong);
}
.cop-panel-row {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--pv3-border-row);
}
.cop-panel-row:last-child { border-bottom: none; }
.cop-panel-ini {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
}
.cop-panel-ini--ok { background: var(--live-bg); color: var(--live-fg); }
.cop-panel-ini--warn { background: var(--draft-bg); color: var(--draft-fg); }
.cop-panel-ini--off { background: var(--neutral-100); color: var(--text-muted); }
.cop-panel-txt { flex: 1 1 auto; min-width: 0; }
.cop-panel-name {
  display: block; font-size: 14.5px; font-weight: 600; color: var(--text-strong);
  overflow-wrap: anywhere;
}
.cop-panel-detail {
  display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--text-muted);
  overflow-wrap: anywhere;
}
.cop-panel-pill {
  flex: none; display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
  padding: 5px 10px; border-radius: 7px;
}
.cop-panel-pill--ok { color: var(--live-fg); background: var(--live-bg); }
.cop-panel-pill--warn { color: var(--draft-fg); background: var(--draft-bg); }
.cop-panel-pill--off { color: var(--text-muted); background: var(--neutral-100); }
.cop-panel-checking {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.cop-panel-spin {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--pv3-border); border-top-color: var(--coral);
  animation: cop-spin .8s linear infinite;
}
.cop-panel-btn {
  flex: none; border: 1px solid var(--pv3-border-btn); background: var(--surface-card);
  color: var(--text-strong); font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast);
}
.cop-panel-btn:hover { background: var(--surface-subtle); }
.cop-panel-btn:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 1px; }
.cop-panel-btn:disabled { opacity: .5; cursor: default; }
.cop-panel-btn--warn { border-color: var(--draft-border); }
/* Copiloto del builder (columna angosta): la misma lista, más compacta. */
.cop-chat .cop-panel { border-radius: 13px; }
.cop-chat .cop-panel-head { padding: 11px 14px; font-size: 13.5px; }
.cop-chat .cop-panel-row { padding: 11px 14px; gap: 11px; }
/* 390px: el nombre manda; si el botón/pill no cabe al lado, baja a la derecha de la fila. */
@media (max-width: 480px) {
  .cop-panel-head { padding: 12px 14px; }
  .cop-panel-row { padding: 12px 14px; gap: 8px 11px; flex-wrap: wrap; }
  .cop-panel-txt { flex: 1 1 150px; }
  .cop-panel-pill, .cop-panel-checking, .cop-panel-btn { margin-left: auto; }
  .cop-panel-btn { min-height: 38px; }
}

/* ── Prueba del agente (Fase 3B · agents_test_message) ───────────────────────────────
   Mismo marco que el panel de conexiones: cabecera con pill del origen (borrador / versión),
   turno del cliente, respuesta del agente, herramientas con su pill (simulada / lectura real),
   razonamiento plegado y una línea al pie que dice que no se envió nada. */
.cop-test-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cop-test-turn { padding: 12px 18px; border-bottom: 1px solid var(--pv3-border-row); }
.cop-test-turn--agent { background: var(--surface-subtle); }
.cop-test-who {
  display: block; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted);
}
.cop-test-text {
  display: block; font-size: 14.5px; line-height: 1.5; color: var(--text-strong);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.cop-test-tools { padding: 12px 18px; border-bottom: 1px solid var(--pv3-border-row); }
.cop-test-tool { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
.cop-test-tool-name { font-size: 13.5px; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.cop-test-reason { padding: 10px 18px; border-bottom: 1px solid var(--pv3-border-row); font-size: 13px; color: var(--text-muted); }
.cop-test-reason summary { cursor: pointer; font-weight: 600; color: var(--text-strong); }
.cop-test-reason ol { margin: 6px 0 0 18px; list-style: decimal; }
.cop-test-reason li { margin: 2px 0; line-height: 1.45; }
.cop-test-foot { padding: 10px 18px; font-size: 12.5px; color: var(--text-muted); }
.cop-chat .cop-test-turn, .cop-chat .cop-test-tools, .cop-chat .cop-test-reason,
.cop-chat .cop-test-foot { padding-left: 14px; padding-right: 14px; }
@media (max-width: 480px) {
  .cop-test-turn, .cop-test-tools, .cop-test-reason, .cop-test-foot { padding-left: 14px; padding-right: 14px; }
}

/* ── Vista previa de un dashboard en la tarjeta (Nisto Apps F2) ───────────────────────
   El dashboard propuesto con el MISMO NistoCharts del visor (datos vivos, no guarda): marco
   compacto con scroll, celular 375 px o escritorio 1280 px achicado (zoom), y los avisos del
   lint debajo con los tonos del sistema (error = danger, aviso = ámbar). */
.cop-preview { margin: 0 14px 12px; min-width: 0; }
.cop-preview-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-width: 0; flex-wrap: wrap; }
.cop-preview-lbl {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.cop-preview-rev { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); min-width: 0; }
.cop-preview-seg {
  margin-left: auto; display: inline-flex; border: 1px solid var(--border-default);
  border-radius: 8px; overflow: hidden; flex: none;
}
.cop-preview-seg button {
  border: none; background: var(--surface-card); color: var(--text-muted); cursor: pointer;
  width: 32px; height: 28px; display: flex; align-items: center; justify-content: center;
}
.cop-preview-seg button + button { border-left: 1px solid var(--border-default); }
.cop-preview-seg button.on { background: var(--neutral-100); color: var(--text-strong); }
.cop-preview-frame {
  border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--neutral-50);
  max-height: 460px; overflow: auto; padding: 10px; overscroll-behavior: contain;
}
.cop-preview-canvas { max-width: 100%; margin: 0 auto; }
.cop-preview-canvas[style*="1280px"] { max-width: none; margin: 0; }
.cop-preview-msg {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px;
  color: var(--text-muted); padding: 10px 12px; border: 1px dashed var(--border-default);
  border-radius: 10px;
}
.cop-preview-err { color: var(--danger-fg); background: var(--danger-bg); border-style: solid; border-color: var(--error-border); }
.cop-preview-err .cop-btn { margin-left: auto; }
.cop-preview-open { width: 100%; }
.cop-lint { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cop-lint-item { border-radius: 9px; padding: 8px 10px; font-size: 12px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.cop-lint--warn { background: var(--state-amber-bg); color: var(--state-amber-fg); }
.cop-lint--error { background: var(--danger-bg); color: var(--danger-fg); }
.cop-lint-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cop-lint-code { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }
.cop-lint-where { font-size: 11px; opacity: .8; }
.cop-lint-msg { margin-top: 2px; color: var(--text-body); }
.cop-lint-sug { margin-top: 2px; }
:is(#view-perla, .cop-v3) .cop-preview { margin: 12px 18px 4px; }
:is(#view-perla, .cop-v3) .cop-lint-item { font-size: 13px; }
@media (max-width: 768px) {
  :is(#view-perla, .cop-v3) .cop-preview { margin: 12px 14px 0; }
  .cop-preview-frame { max-height: 380px; padding: 6px; }
}

/* Formulario SEGURO de credenciales en la tarjeta de conectar (Fase 2 · PR B). */
.cop-cred-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 14px 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
}
.cop-cred-head { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--text-muted); }
.cop-cred-head svg { color: var(--text-faint); }
.cop-cred-field { display: flex; flex-direction: column; gap: 3px; }
.cop-cred-label { font-size: 11.5px; font-weight: 500; color: var(--text-body); }
.cop-cred-input {
  width: 100%;
  font-size: 13px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 7px;
  padding: 6px 9px;
}
.cop-cred-input[type="password"] { font-family: var(--font-mono); }
.cop-cred-help { font-size: 11px; color: var(--text-faint); line-height: 1.45; margin: 0; }
.cop-cred-err { font-size: 11.5px; color: var(--danger-fg); margin: 0; }

/* ── Visor de adjuntos (partials/_cop_viewer.html) ───────────────────────
   Tocar una imagen o un archivo del chat lo abre a pantalla completa sobre un velo oscuro.
   Siempre oscuro (como cualquier visor de fotos): la imagen manda, el chrome se apaga. */
.cop-msg-img-btn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-sm);
}
.cop-msg-img-btn:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.cop-file-chip-btn {
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.cop-file-chip-btn:hover { border-color: var(--border-strong, var(--border-subtle)); background: var(--surface-sunken); }
.cop-attach-open {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
}

.cop-viewer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  background: rgba(12, 12, 14, .92);
  color: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.cop-viewer-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 22px;
}
.cop-viewer-title { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cop-viewer-name {
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cop-viewer-meta {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .55);
}
.cop-viewer-actions { flex: none; display: flex; gap: 4px; }
.cop-viewer-seg {
  flex: none;
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
}
.cop-viewer-seg button {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.cop-viewer-seg button.is-on { background: rgba(255, 255, 255, .92); color: var(--text-strong); }
.cop-viewer-iconbtn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
}
.cop-viewer-iconbtn:hover { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, 1); }
.cop-viewer-ico { display: grid; place-items: center; }

.cop-viewer-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 72px 28px;
}
.cop-viewer-status {
  /* Encima del contenido, nunca al lado: en la fila flex empujaría el iframe al cambiar de item. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
}
/* Estado vacío (sin permiso / sin archivo / sin vista previa): ícono + motivo, centrado. */
.cop-viewer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(360px, 80vw);
  text-align: center;
  line-height: 1.45;
}
.cop-viewer-empty svg { width: 30px; height: 30px; opacity: .6; }
.cop-viewer-imgwrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cop-viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  cursor: zoom-in;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .45);
}
/* Tamaño real: la imagen a escala 1:1, con scroll si no entra. */
.cop-viewer-imgwrap.is-zoom { overflow: auto; display: block; text-align: center; }
.cop-viewer-imgwrap.is-zoom .cop-viewer-img { max-width: none; max-height: none; cursor: zoom-out; }

.cop-viewer-frame {
  width: min(960px, 100%);
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: var(--surface-card);
}
.cop-viewer-paper { width: min(840px, 100%); }

.cop-viewer-sheet {
  width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  color: var(--text-body);
  border-radius: 8px;
  overflow: hidden;
}
.cop-viewer-sheet-note {
  flex: none;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}
.cop-viewer-sheet-scroll { overflow: auto; min-height: 0; }
.cop-viewer-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.cop-viewer-table th,
.cop-viewer-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cop-viewer-table th {
  position: sticky;
  top: 0;
  background: var(--surface-sunken);
  font-weight: 600;
  color: var(--text-strong);
}

.cop-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .9);
  cursor: pointer;
  z-index: 1;
}
.cop-viewer-nav:hover { background: rgba(255, 255, 255, .2); }
.cop-viewer-prev { left: 16px; }
.cop-viewer-next { right: 16px; }

@media (max-width: 768px) {
  .cop-viewer-top { padding: 10px 8px 10px 16px; }
  .cop-viewer-stage { padding: 0 0 12px; }
  .cop-viewer-frame, .cop-viewer-sheet { border-radius: 0; }
  .cop-viewer-nav { top: auto; bottom: 18px; transform: none; background: rgba(0, 0, 0, .45); }
  .cop-viewer-prev { left: 12px; }
  .cop-viewer-next { right: 12px; }
}

/* ── Gráfico de datos en el hilo (show_chart · panel `dashboard`) ─────────────────────────
   El tablero lo dibuja NistoCharts (mismo visor que Nisto AI) con su propio marco; acá solo se
   ajusta al ancho del hilo y se agrega el modal de "ampliar". */
.cop-chart { margin: 2px 0; min-width: 0; max-width: 100%; }
.cop-chart .nis-dashboard { border-color: var(--pv3-border-soft) !important; border-radius: 16px !important; }
.cop-chart .nis-body { padding-bottom: 0 !important; }

.cop-chart-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 12, 14, .55);
}
.cop-chart-modal-card {
  width: min(960px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(12, 12, 14, .25);
}
.cop-chart-modal-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--pv3-border-inner);
}
.cop-chart-modal-title { font-size: 15px; font-weight: 600; color: var(--text-strong); min-width: 0; }
.cop-chart-modal-close {
  flex: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 9px;
  background: var(--neutral-100);
  color: var(--text-muted);
  cursor: pointer;
}
.cop-chart-modal-close:hover { color: var(--text-strong); }
.cop-chart-modal-body { padding: 20px 22px; overflow-y: auto; }

@media (max-width: 640px) {
  .cop-chart-modal { padding: 0; align-items: flex-end; }
  .cop-chart-modal-card { border-radius: 18px 18px 0 0; max-height: 92%; }
  .cop-chart-modal-body { padding: 16px; }
}

/* ── Responder sobre un fragmento (Inicio) ── */
.cop-sel-pop { position: fixed; z-index: 1200; transform: translate(-50%, calc(-100% - 8px));
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 0; border-radius: 9px;
  background: var(--text-strong); color: var(--surface-card); font: inherit; font-size: 12.5px; font-weight: 600;
  box-shadow: 0 6px 18px -8px rgba(14,14,16,.45); cursor: pointer; }
.cop-quote-chip { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 8px 10px;
  border-left: 3px solid var(--border-default); background: var(--surface-sunken); border-radius: 8px;
  font-size: 13px; color: var(--text-body); }
.cop-quote-chip > svg { flex: none; margin-top: 2px; color: var(--text-muted); }
.cop-quote-text { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: pre-wrap; }
.cop-quote-x { flex: none; border: 0; background: none; padding: 2px; color: var(--text-muted); cursor: pointer; }
.cop-quote-x:hover { color: var(--text-strong); }
.cop-bubble-quote { margin: 0 0 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--border-default);
  color: var(--text-muted); font-size: .92em; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden; }

/* ══════════════════ «TU CORREO» (Mi correo · PR2e) ══════════════════
   Diseño: docs/perla-mi-correo-design/ (README §1–11, SDD Isotipo animado). Estado/métodos:
   nisto-mimail.js. Colores SOLO por tokens (nisto-tokens.css); el color del isotipo es un DATO
   de la lista cerrada de app/perla/session_icons.py (va como atributo `fill` del SVG).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Isotipo de sesión (SDD §4–§7) ── */
.nisto-iso { display: block; flex: none; overflow: visible; }
.nisto-iso .iso-eye { stroke: var(--neutral-0); }
.nisto-iso .iso-white { stroke: var(--neutral-0); }
.nisto-iso--thinking { transform-origin: 50% 56%; animation: isoBob 4s ease-in-out infinite; }
.nisto-iso--thinking .iso-eye { transform-box: fill-box; transform-origin: center; animation: isoEye 4s ease-in-out infinite; }
.nisto-iso--thinking .iso-acc { transform-box: fill-box; transform-origin: center; animation: isoAcc 4s ease-in-out infinite; }
@keyframes isoBob {
  0% { transform: translateY(0) rotate(0) scale(1, 1); }
  8% { transform: translateY(.5px) rotate(0) scale(1.04, .95); }
  18% { transform: translateY(-5px) rotate(-6deg) scale(.98, 1.03); }
  28% { transform: translateY(0) rotate(0) scale(1.03, .97); }
  34% { transform: translateY(0) rotate(0) scale(1, 1); }
  42% { transform: translateY(-1.5px) rotate(8deg); }
  50% { transform: translateY(-1.5px) rotate(-5deg); }
  56% { transform: translateY(0) rotate(0) scale(1, 1); }
  61% { transform: translateY(.5px) rotate(-8deg) scale(1.03, .97); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  80% { transform: translateY(-6px) rotate(190deg) scale(1, 1); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  90% { transform: translateY(0) rotate(356deg) scale(1.02, .98); }
  95% { transform: translateY(0) rotate(362deg) scale(1, 1); }
  100% { transform: translateY(0) rotate(360deg) scale(1, 1); }
}
@keyframes isoEye {
  0%, 18% { transform: translate(0, 0) scale(1, 1); }
  24% { transform: translate(0, -1.5px) scale(1, 1); }
  30% { transform: translate(0, 0) scale(1, .12); }
  34% { transform: translate(0, 0) scale(1, 1); }
  50% { transform: translate(-3px, 0) scale(.92, 1); }
  62% { transform: translate(3px, 0) scale(.92, 1); }
  74% { transform: translate(3px, 0) scale(.92, 1); }
  86% { transform: translate(0, 0) scale(1, 1); }
  92% { transform: scale(1, .12); }
  96%, 100% { transform: scale(1, 1); }
}
@keyframes isoAcc {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0); }
  22% { opacity: .4; transform: scale(.7) rotate(-12deg); }
  30% { opacity: 1; transform: scale(1.25) rotate(10deg); }
  45% { transform: scale(1) rotate(0); }
  60% { opacity: .55; transform: scale(.85); }
  75% { opacity: 1; transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .nisto-iso--thinking, .nisto-iso--thinking * { animation: none !important; }
}
.prl-iso-static { display: inline-flex; flex: none; }
.cop-thinking-iso { display: inline-flex; flex: none; }

/* ── Rail: filas fijas con isotipo (correo y Overview) ── */
.prl-sess--pinned { min-height: 52px; padding: 8px 11px; }
.prl-iso-btn {
  width: 32px; height: 32px; margin: -2px -4px -2px -6px; padding: 0; flex: none;
  border: none; background: none; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.prl-iso-btn:hover { background: var(--surface-sunken); }
.prl-iso-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* ── Cabecera del hilo (README §2): pill flotante centrada / barra móvil ── */
.prl-page-main { position: relative; }
.prl-mail-pillrow {
  position: absolute; top: 14px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; pointer-events: none;
}
.prl-mail-pill {
  pointer-events: auto; display: flex; align-items: center; gap: 9px; white-space: nowrap;
  max-width: calc(100% - 32px);
  background: color-mix(in srgb, var(--surface-card) 94%, transparent);
  border: 1px solid var(--pv3-border-soft); border-radius: var(--radius-pill);
  padding: 6px 14px 6px 8px; box-shadow: 0 2px 8px rgba(16, 16, 18, .04);
  font: inherit; cursor: pointer; color: var(--text-muted);
}
.prl-mail-pill:hover { border-color: var(--border-default); }
.prl-mail-pill-title { font-size: 14.5px; font-weight: 600; color: var(--text-strong); }
.prl-mail-pill-sub { font-size: 13.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
#view-perla .prl-page-chat.prl-mail-open .cop-scroll { padding-top: 78px; }
.prl-mail-mbar { display: none; }

/* ── Estados de conexión dentro de la sesión (README §3) ── */
.mail-gate {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 56px 16px 24px;
}
.mail-gate-title { font-size: 24px; font-weight: 600; letter-spacing: -.4px; color: var(--text-strong); }
.mail-gate-text { font-size: 16px; line-height: 1.6; color: var(--pv3-text-soft); max-width: 480px; }
.mail-gate-note { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); max-width: 440px; }
.mail-gate-btn { margin-top: 6px; min-height: 46px; padding: 0 26px; font-size: 15.5px; }
.mail-learning {
  position: relative; padding-left: 42px; display: flex; flex-direction: column; gap: 14px;
  font-size: 16px; line-height: 1.66; color: var(--pv3-text-thread);
}
.mail-learning p { margin: 0; }
.mail-learning-iso { position: absolute; left: 0; top: 0; }
.mail-learning-bar { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.mail-learning-track { height: 3px; background: var(--neutral-100); border-radius: 3px; overflow: hidden; }
.mail-learning-fill { height: 3px; background: var(--text-strong); transition: width .3s linear; }
.mail-learning-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
.mail-learning-muted { color: var(--text-muted); }
.mail-expired { display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.66; color: var(--pv3-text-thread); }
.mail-expired p { margin: 0; }
.mail-alert-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.mail-older { display: flex; justify-content: center; }

/* ── Resumen diario (part `mail_digest`, PR5, diseño §5) ── */
.mail-digest-sec + .mail-digest-sec { margin-top: 18px; }
.mail-digest .mail-digest-h { margin: 0 0 6px; }
.mail-digest .mail-digest-list { margin: 6px 0 0; }
.mail-digest-from { font-weight: 650; color: var(--text-strong); }
.mail-digest-lead { color: var(--text-muted); }
.mail-digest-link, .mail-digest-gmail {
  background: none; border: none; padding: 0; margin-left: 2px; font: inherit; color: var(--text-strong);
  cursor: pointer; text-decoration: underline; text-decoration-color: var(--neutral-300);
  text-underline-offset: 4px;
}
.mail-digest-gmail { color: var(--text-muted); }
.mail-digest-link:hover, .mail-digest-gmail:hover { text-decoration-color: var(--text-strong); }
.mail-digest-link:disabled { cursor: default; color: var(--text-muted); text-decoration-color: var(--neutral-200); }
.mail-digest-sec.is-security {
  padding: 12px 16px; border-radius: 14px; background: var(--surface-page); border: 1px solid var(--border-subtle);
}
:is(#view-perla, .cop-v3) .cop-md .mail-digest-sec.is-security .mail-digest-list,
.mail-digest-sec.is-security .mail-digest-list { list-style: none; padding-left: 0; margin: 0; }
.mail-quick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }

/* ── Detalles › Rutinas (PR5, diseño §10) ── */
.mail-routine {
  border: 1px solid var(--border-subtle); border-radius: 16px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.mail-routine-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mail-routine-title { font-size: 15px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; }
.mail-routine-sub { font-size: 13.5px; color: var(--text-muted); }
.mail-switch {
  width: 46px; height: 28px; border-radius: 99px; border: none; background: var(--neutral-300);
  position: relative; cursor: pointer; flex: none; transition: background .15s;
}
.mail-switch.is-on { background: var(--text-strong); }
.mail-switch:disabled { opacity: .6; cursor: default; }
.mail-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 99px;
  background: var(--surface-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s;
}
.mail-switch.is-on .mail-switch-knob { transform: translateX(18px); }
.mail-routine-x {
  width: 32px; height: 32px; border-radius: 99px; border: 1px solid var(--border-subtle); background: var(--surface-card);
  color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}

/* ── Botones de «Tu correo» (pill grafito del diseño) ── */
.mail-btn-primary, .mail-btn-ghost, .mail-btn-soft, .mail-btn-danger {
  font: inherit; font-size: 15px; font-weight: 500; min-height: 44px; padding: 0 22px;
  border-radius: var(--radius-pill); cursor: pointer; border: none;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.mail-btn-primary { background: var(--text-strong); color: var(--text-on-dark); }
.mail-btn-primary:hover { background: var(--pv3-btn-hover); }
.mail-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.mail-btn-primary:disabled, .mail-btn-danger:disabled { opacity: .45; cursor: not-allowed; }
.mail-btn-ghost { background: none; color: var(--text-body); padding: 0 10px; }
.mail-btn-ghost:hover { color: var(--text-strong); }
.mail-btn-bordered { border: 1px solid var(--pv3-border-btn); padding: 0 20px; }
.mail-btn-soft { background: var(--surface-page); color: var(--text-strong); font-size: 14.5px; min-height: 40px; padding: 0 16px; }
.mail-btn-danger { background: var(--danger-fg); color: var(--text-on-dark); }
.mail-link {
  background: none; border: none; padding: 0; font: inherit; font-size: 14.5px; color: var(--text-body);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pv3-arrow);
  min-height: 32px; display: inline-flex; align-items: center;
}
.mail-link:hover { color: var(--text-strong); text-decoration-color: var(--text-strong); }

/* ── Citas (README §6) ── */
.mail-cite { font-size: .72em; line-height: 0; margin-left: 1px; }
.mail-cite a {
  color: var(--text-muted); text-decoration: none; padding: 0 2px; border-radius: 4px;
  background: var(--neutral-100); font-weight: 600;
}
.mail-cite a:hover { color: var(--text-strong); background: var(--surface-sunken); }
.mail-sources { list-style: none; margin: -12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mail-source { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--text-muted); min-width: 0; }
.mail-source-n { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); flex: none; width: 14px; text-align: right; }
.mail-source-link { display: inline-flex; gap: 6px; min-width: 0; color: inherit; text-decoration: none; overflow: hidden; }
a.mail-source-link:hover .mail-source-subj { text-decoration: underline; text-underline-offset: 3px; }
.mail-source-from { color: var(--text-body); font-weight: 500; white-space: nowrap; }
.mail-source-subj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-source-date { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

/* ── Tarjeta de correo («Perla Correo - Mail.dc.html») ── */
.mail-card {
  background: var(--surface-card); border: 1px solid var(--pv3-border-soft); border-radius: var(--radius-lg);
  outline: none; animation: pv3Rise .3s var(--ease-out); color: var(--pv3-text-thread);
}
.mail-card:focus-visible, .mail-card:focus-within { border-color: var(--border-default); }
.mail-card-in { padding: 20px 22px 16px; display: flex; flex-direction: column; }
.mail-card-off { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 15px; color: var(--text-muted); }
.mail-card-head { display: flex; align-items: center; gap: 10px; }
.mail-card-ic {
  width: 28px; height: 28px; border-radius: 8px; background: var(--surface-page); color: var(--text-body);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.mail-card-kind { font-size: 15px; font-weight: 500; color: var(--text-body); flex: 1; }
.mail-card-stamp { font-size: 13px; color: var(--pv3-text-hint); }
.mail-card-subject {
  margin-top: 16px; width: 100%; border: none; outline: none; background: transparent; padding: 0;
  font: inherit; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--text-strong);
}
.mail-card-rows { display: flex; flex-direction: column; margin-top: 8px; }
.mail-card-row {
  display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--neutral-100);
  font-size: 15px; line-height: 1.45; min-width: 0; align-items: baseline;
}
.mail-card-k { color: var(--text-faint); flex: none; }
.mail-card-v { color: var(--pv3-text-thread); min-width: 0; overflow-wrap: anywhere; }
.mail-card-from {
  font: inherit; font-size: 15px; color: var(--pv3-text-thread); background: transparent;
  border: 1px solid var(--pv3-border); border-radius: 8px; padding: 2px 6px; max-width: 100%;
}
.mail-card-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; flex: 1; }
.mail-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 1px 4px 1px 9px; border-radius: var(--radius-pill); background: var(--surface-page);
  font-size: 14px; color: var(--pv3-text-thread); overflow-wrap: anywhere;
}
.mail-chip-x {
  width: 22px; height: 22px; border: none; background: none; border-radius: 99px; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.mail-chip-x:hover { background: var(--surface-sunken); color: var(--text-strong); }
.mail-chip-add {
  flex: 1; min-width: 90px; border: none; outline: none; background: transparent; padding: 2px 0;
  font: inherit; font-size: 14px; color: var(--text-strong);
}
.mail-chip-add::placeholder { color: var(--pv3-text-hint); }
.mail-card-cc {
  border: none; background: none; font: inherit; font-size: 13px; color: var(--text-muted); cursor: pointer;
  padding: 2px 6px; border-radius: 6px;
}
.mail-card-cc:hover { background: var(--surface-page); color: var(--text-strong); }
.mail-card-warn {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 10px;
  background: var(--warning-bg); color: var(--warning-fg); font-size: 13.5px; line-height: 1.45;
}
.mail-card-body { margin-top: 16px; }
.mail-card-text, .mail-card-hl {
  display: block; width: 100%; box-sizing: border-box; border: none; outline: none; resize: none;
  background: transparent; padding: 0; margin: 0; font: inherit; font-size: 16px; line-height: 1.66;
  color: var(--pv3-text-thread); white-space: pre-wrap; overflow-wrap: anywhere;
}
.mail-card-text[readonly] { cursor: default; }
.mail-card--sent .mail-card-text { color: var(--text-muted); }
.mail-card-hl .is-add { border-radius: 3px; animation: mailHl 2.2s ease-out forwards; }
@keyframes mailHl { 0%, 60% { background: var(--live-bg); } 100% { background: transparent; } }
.mail-card-rewrite { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13.5px; color: var(--text-muted); }
.mail-card-rewrite .mail-link { font-size: 13.5px; }
.mail-card-sig {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--pv3-border);
  display: flex; flex-direction: column; gap: 4px;
}
.mail-card-sig-text { white-space: pre-wrap; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.mail-card-sig-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--text-faint);
}
.mail-card-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mail-att {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--pv3-border);
  border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--text-body);
}
.mail-att svg { color: var(--text-muted); }
.mail-att-size { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.mail-card-foot { margin-top: 22px; min-height: 44px; }
.mail-foot-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; }
.mail-foot-menuwrap { position: relative; flex: 1; min-width: 0; }
.mail-foot-need {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; font: inherit;
  font-size: 15px; color: var(--text-muted); cursor: pointer; padding: 8px 0; min-height: 44px;
}
.mail-foot-need:hover { color: var(--text-strong); }
.mail-menu {
  position: absolute; left: -6px; bottom: 44px; z-index: 5; min-width: 236px; background: var(--surface-card);
  border: 1px solid var(--pv3-border); border-radius: 13px; box-shadow: 0 12px 32px rgba(14, 14, 16, .12);
  padding: 6px; display: flex; flex-direction: column; animation: pv3Rise .14s ease-out;
}
.mail-menu-item {
  text-align: left; background: none; border: none; font: inherit; font-size: 14.5px; color: var(--text-strong);
  padding: 10px 11px; border-radius: 9px; cursor: pointer; min-height: 44px;
}
.mail-menu-item:hover { background: var(--surface-page); }
.mail-foot-ask { flex: 1; min-width: 180px; font-size: 15px; color: var(--text-body); line-height: 1.4; overflow-wrap: anywhere; }
.mail-foot-ask strong { font-weight: 600; color: var(--text-strong); }
.mail-foot-sending { display: flex; flex-direction: column; gap: 8px; }
.mail-foot-text { flex: 1; font-size: 15px; color: var(--text-body); min-width: 0; }
.mail-foot-track { height: 2px; background: var(--neutral-100); border-radius: 2px; overflow: hidden; }
.mail-foot-fill { height: 2px; background: var(--coral-500); transition: width 1s linear; }
.mail-foot-ok { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--success-fg); }
.mail-foot-saved { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-body); }
.mail-foot-err { flex: 1; min-width: 200px; font-size: 15px; color: var(--danger-fg); line-height: 1.45; }

/* ── Detalles de la sesión (README §10) ── */
.mail-veil, .mail-pick-veil { position: fixed; inset: 0; z-index: 80; }
.mail-veil { background: rgba(14, 14, 16, .06); animation: mailFade .2s ease-out; }
.mail-pick-veil { z-index: 90; }
@keyframes mailFade { from { opacity: 0; } to { opacity: 1; } }
.mail-details {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; z-index: 81;
  background: var(--surface-card); border-left: 1px solid var(--border-subtle);
  box-shadow: -12px 0 40px rgba(14, 14, 16, .10); display: flex; flex-direction: column;
  animation: pv3Rise .2s ease-out;
}
.mail-details-top { display: flex; justify-content: flex-end; padding: 14px 14px 0; }
.mail-sheet-handle { display: none; }
.mail-details-x {
  width: 40px; height: 40px; border-radius: 99px; border: 1px solid var(--border-subtle); background: var(--surface-card);
  color: var(--text-body); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.mail-details-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 24px 26px; }
.mail-details-iso { border: none; background: none; padding: 8px; border-radius: 22px; cursor: pointer; }
.mail-details-iso:hover { background: var(--surface-page); }
.mail-details-title { font-size: 21px; font-weight: 600; letter-spacing: -.3px; color: var(--text-strong); }
.mail-details-sub { font-size: 13.5px; color: var(--text-muted); text-align: center; }
.mail-details-sec { padding: 0 20px; display: flex; flex-direction: column; gap: 10px; }
.mail-details-label { font-size: 14px; color: var(--text-muted); }
.mail-details-fill { flex: 1; }
.mail-details-foot { padding: 16px 20px 20px; border-top: 1px solid var(--neutral-100); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail-details-acct { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mail-details-acct-email { font-size: 14px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; }
.mail-details-acct-st { font-size: 12.5px; color: var(--text-muted); }
.mail-details-acct-st.is-warn { color: var(--danger-fg); }
.mail-details-act {
  background: none; border: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--text-strong);
  cursor: pointer; min-height: 44px; padding: 0 6px;
}
.mail-details-act.is-danger { color: var(--danger-fg); }
.mail-details-act.is-muted { color: var(--text-muted); font-weight: 400; }
.mail-details-act:disabled { opacity: .45; cursor: not-allowed; }
.mail-details-confirm { flex-direction: column; align-items: stretch; }
.mail-details-confirm-text { font-size: 14px; line-height: 1.5; color: var(--text-body); }
.mail-details-confirm-row { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Selector de isotipo (README §11) ── */
.mail-pick {
  position: fixed; z-index: 91; width: 340px; background: var(--surface-card); border: 1px solid var(--pv3-border);
  border-radius: 16px; box-shadow: 0 18px 44px rgba(14, 14, 16, .14); padding: 18px;
  display: flex; flex-direction: column; gap: 16px; animation: pv3Rise .16s ease-out;
}
.mail-pick-head { display: flex; align-items: center; gap: 14px; }
.mail-pick-title { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.mail-pick-group { display: flex; flex-direction: column; gap: 8px; }
.mail-pick-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-faint); }
.mail-pick-colors { display: flex; gap: 8px; }
.mail-pick-color { width: 32px; height: 32px; border-radius: 99px; border: none; cursor: pointer; padding: 0; }
.mail-pick-color.is-on { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--text-strong); }
.mail-pick-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mail-pick-shape {
  display: flex; align-items: center; justify-content: center; padding: 14px 4px; border-radius: 11px;
  border: 1px solid var(--pv3-border-soft); background: var(--surface-card); cursor: pointer; min-height: 60px;
}
.mail-pick-shape.is-on { border-color: var(--text-strong); background: var(--surface-page); }
.mail-pick-foot { display: flex; justify-content: flex-end; gap: 8px; }
.mail-pick-foot .mail-btn-primary, .mail-pick-foot .mail-btn-ghost { min-height: 40px; font-size: 14px; padding: 0 18px; }

/* ── «Tu correo» en el teléfono (390 px): hojas, barra superior y toques de 44 px ── */
@media (max-width: 768px) {
  .prl-mail-pillrow { display: none; }
  .prl-mail-mbar {
    display: flex; align-items: center; gap: 4px; padding: 6px 8px; flex: none;
    border-bottom: 1px solid var(--pv3-border-soft); background: var(--surface-card);
  }
  .prl-mail-mbar-btn, .prl-mail-mbar-gap {
    width: 44px; height: 44px; flex: none; border: none; background: none; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; color: var(--text-body); cursor: pointer;
  }
  .prl-mail-mbar-gap { cursor: default; }
  .prl-mail-mbar-title {
    flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: none; border: none; font: inherit; cursor: pointer; color: var(--text-muted); white-space: nowrap;
  }
  #view-perla .prl-page-chat.prl-mail-open .cop-scroll { padding-top: 20px; }
  #view-perla .prl-page-chat.prl-mail-open { border-top-width: 0; }
  .mail-gate { padding-top: 32px; }
  .mail-gate-title { font-size: 21px; }
  .mail-gate-btn { align-self: stretch; min-height: 50px; }
  .mail-learning { padding-left: 34px; font-size: 15.5px; }
  .mail-card-in { padding: 16px 16px 14px; }
  .mail-card-subject { font-size: 16.5px; }
  .mail-card-row { font-size: 14.5px; flex-direction: column; gap: 3px; }
  .mail-card-text, .mail-card-hl { font-size: 15.5px; }
  .mail-foot-row .mail-btn-primary { flex: 1 1 auto; }
  .mail-chip-x { width: 32px; height: 32px; }
  .mail-details {
    top: auto; left: 0; width: 100%; max-height: 88dvh; border-left: none;
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    box-shadow: 0 -16px 40px -20px rgba(16, 16, 18, .4);
    animation: mailSheetIn .28s cubic-bezier(.2, .8, .2, 1);
  }
  .mail-veil { background: rgba(16, 16, 18, .28); }
  .mail-sheet-handle { display: flex; justify-content: center; flex: 1; padding-top: 6px; }
  .mail-sheet-handle span { width: 38px; height: 4px; border-radius: 99px; background: var(--border-subtle); }
  .mail-details-top { align-items: flex-start; }
  .mail-details-act { min-height: 44px; }
  .mail-pick-veil.is-sheet { background: rgba(16, 16, 18, .28); }
  .mail-pick.is-sheet {
    left: 0; right: 0; bottom: 0; top: auto; width: 100%; border-radius: 22px 22px 0 0; border-bottom: none;
    padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    animation: mailSheetIn .28s cubic-bezier(.2, .8, .2, 1);
  }
  .mail-pick.is-sheet .mail-sheet-handle { padding: 0 0 4px; }
  .mail-pick.is-sheet .mail-pick-colors { justify-content: space-between; }
  .mail-pick.is-sheet .mail-pick-color { width: 40px; height: 40px; }
  .mail-pick.is-sheet .mail-pick-foot > * { flex: 1; min-height: 48px; }
}
@keyframes mailSheetIn { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mail-card, .mail-details, .mail-pick, .mail-veil, .mail-card-hl .is-add { animation: none; }
}

/* Tarjeta resuelta plegada a una línea (copCardFoldable): mismo estilo que un grupo de
   traza, con el check (aplicada) o la cruz (descartada / deshecha) adelante. */
.cop-tg-card-ic { flex: none; display: inline-flex; margin-right: 6px; color: var(--text-faint); }
.cop-tg-card-ic svg { width: 13px; height: 13px; }
.cop-tg-card-ic--applied { color: var(--success-fg); }