/*
 * Estilos de la burbuja del copiloto.
 *
 * Se inyecta dentro de una aplicacion ajena (Bulwark, Next.js), asi que la
 * regla que ordena todo este archivo es: NO tocar nada que no sea nuestro.
 *
 *   - Todos los selectores cuelgan de .cpx-root o llevan el prefijo .cpx-.
 *     Ni un selector de elemento suelto, ni un reset global: un `button{}` aqui
 *     repinta el webmail entero.
 *   - Todas las propiedades se declaran explicitas. Este arbol hereda de un CSS
 *     que no controlamos y que puede cambiar en cualquier version.
 *   - Los colores van por variables locales a .cpx-root, no en :root, para no
 *     pisar las de Bulwark si coincide algun nombre.
 *
 * La CSP de Bulwark trae `style-src 'self' 'unsafe-inline'`, y esta hoja se
 * sirve desde el mismo origen: pasa por 'self' sin tocar la politica.
 */

.cpx-root {
  /* Paleta clara por defecto. El tema se resuelve abajo. */
  --cpx-fg: #14181f;
  --cpx-fg-soft: #5b6472;
  --cpx-bg: #ffffff;
  --cpx-bg-soft: #f3f5f8;
  --cpx-borde: #dde2ea;
  --cpx-acento: #2f6fed;
  --cpx-acento-fg: #ffffff;
  --cpx-error: #b42318;
  --cpx-ok: #067647;
  --cpx-sombra: 0 12px 32px rgba(16, 24, 40, 0.18);
  --cpx-radio: 12px;

  /* Tipografia propia y no heredada: dentro de Bulwark la fuente base cambia
     por pantalla, y la burbuja debe verse igual en todas. */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cpx-fg);

  /* Ancla de posicionamiento. Ocupa cero espacio en el flujo: la burbuja no
     puede empujar ni un pixel del webmail. */
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2147483000; /* por debajo del techo de 32 bits, para que un modal
                          propio de Bulwark pueda seguir tapandola si hace falta */
}

/* Tema oscuro. Se atiende tanto la preferencia del sistema como el interruptor
   de Bulwark, que marca la raiz del documento: con solo lo primero, la burbuja
   se queda en claro cuando el usuario pone el webmail en oscuro a mano. */
@media (prefers-color-scheme: dark) {
  .cpx-root {
    --cpx-fg: #e8ecf3;
    --cpx-fg-soft: #9aa5b5;
    --cpx-bg: #171b22;
    --cpx-bg-soft: #21262f;
    --cpx-borde: #333b47;
    --cpx-acento: #5b8cf5;
    --cpx-acento-fg: #0b1220;
    --cpx-error: #ff9a91;
    --cpx-ok: #6ee7a8;
    --cpx-sombra: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}
html.dark .cpx-root,
html[data-theme="dark"] .cpx-root,
body.dark .cpx-root {
  --cpx-fg: #e8ecf3;
  --cpx-fg-soft: #9aa5b5;
  --cpx-bg: #171b22;
  --cpx-bg-soft: #21262f;
  --cpx-borde: #333b47;
  --cpx-acento: #5b8cf5;
  --cpx-acento-fg: #0b1220;
  --cpx-error: #ff9a91;
  --cpx-ok: #6ee7a8;
  --cpx-sombra: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.cpx-root *,
.cpx-root *::before,
.cpx-root *::after {
  box-sizing: border-box;
}

/* --- Boton flotante ------------------------------------------------------ */

.cpx-fab {
  position: fixed;
  right: 20px;
  /*
   * NO ES 20px, Y EL MOTIVO ESTA MEDIDO. Con el redactor abierto en 1920x1080,
   * Bulwark pinta su barra de acciones en y 1030-1070 y lleva "Schedule send"
   * hasta x 1904. Un boton en `bottom: 20px` ocupa y 1008-1060 y x 1848-1900:
   * se comia el clic de "Schedule send", igual que en movil se comia el de
   * "Discard". El hueco que queda entre la tarjeta del historico (termina en
   * 996) y esa barra es de 34px, insuficiente para un boton de 52.
   *
   * 90 = 1080 - 990, con lo que el boton ocupa y 938-990 y deja 40px de aire
   * hasta la barra del redactor. La franja derecha por encima de 1030 esta
   * libre de controles; la izquierda NO --el carril de iconos llega hasta
   * y 1068-- y por eso ninguna de las dos piezas puede irse a ese lado.
   */
  bottom: 90px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  margin: 0;
  padding: 0;
  background: var(--cpx-acento);
  color: var(--cpx-acento-fg);
  box-shadow: var(--cpx-sombra);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
/*
 * CONVIVENCIA CON EL LAYOUT DE BULWARK EN MOVIL.
 *
 * Medido contra produccion el 2026-09-09 en un viewport de 390x844:
 *
 *   .cpx-fab (right:20 bottom:20) ...... x 318-370, y 772-824
 *   barra de navegacion inferior ....... y 792-845 ("Settings" en x 312-390)
 *   boton "Discard" del redactor ....... x 311-374, y 802-830
 *
 * El centro de "Settings" (351,818) y el de "Discard" (342,816) caian DENTRO
 * del boton flotante. No era que se vieran mal: el navegador entregaba el clic
 * a la burbuja, asi que desde el movil no se podia entrar en Ajustes ni
 * descartar un borrador. Solo quedaba la X de cerrar el redactor.
 *
 * NO SE PUEDE RESOLVER OCULTANDO LA BURBUJA CUANDO HAY UN MODAL. Se comprobo
 * contra el DOM vivo: Bulwark no marca su redactor con `role="dialog"`, ni
 * `aria-modal`, ni `data-state`. El unico [role="dialog"] del documento es
 * nuestro propio panel. No hay nada que un selector pueda mirar, y montar un
 * MutationObserver sobre las clases internas de una aplicacion ajena seria
 * atarse a un detalle que cambia con cada version suya.
 *
 * Se mueve a la IZQUIERDA y no solo hacia arriba porque la columna derecha ya
 * la ocupa el boton flotante de redactar de Bulwark (x 318-374, y 719-775):
 * subir el nuestro por esa vertical solo cambiaria de victima.
 */
@media (max-width: 767px) {
  .cpx-fab {
    left: 20px;
    right: auto;
    /* Sprint-011: era bottom:77 (y 715-767) y tapaba "Select emails", que
       Bulwark pinta abajo a la izquierda de la bandeja en movil (centro 32,744,
       medido contra produccion por tests/webmail-e2e el 2026-10-03). Sube por
       el MISMO carril izquierdo: los centros de las filas de la bandeja quedan
       en mitad de pantalla, asi que el borde izquierdo no tapa ninguna, y la
       columna derecha sigue siendo del boton de redactar de Bulwark.
       844 - 150 - 52 = 642: ocupa y 642-694 y deja ~30px sobre "Select emails". */
    bottom: 150px;
  }
}

.cpx-fab:hover { transform: scale(1.06); }
.cpx-fab:focus-visible {
  outline: 2px solid var(--cpx-acento);
  outline-offset: 3px;
}
.cpx-fab-ico { font-size: 22px; line-height: 1; }

/* Punto de actividad. Solo aparece con .cpx-on, que el JS pone mientras hay
   una peticion en vuelo: es la unica senal de vida si el panel esta cerrado. */
.cpx-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
}
.cpx-badge.cpx-on {
  background: var(--cpx-ok);
  animation: cpx-late 1.1s ease-in-out infinite;
}
@keyframes cpx-late {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
/* Quien pide menos movimiento no recibe el parpadeo, pero conserva el punto:
   la informacion no se pierde, solo la animacion. */
@media (prefers-reduced-motion: reduce) {
  .cpx-badge.cpx-on { animation: none; }
  .cpx-fab { transition: none; }
}

/* --- Panel --------------------------------------------------------------- */

.cpx-panel {
  position: fixed;
  right: 20px;
  /* Encima del boton flotante, que subio a 90 para librar la barra de
     acciones del redactor: 90 + 52 de alto + 12 de separacion. */
  bottom: 154px;
  width: 380px;
  /* Alto maximo relativo al viewport para que no se salga por arriba en
     pantallas bajas; el historial es lo que scrollea. */
  max-height: min(620px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--cpx-bg);
  border: 1px solid var(--cpx-borde);
  border-radius: var(--cpx-radio);
  box-shadow: var(--cpx-sombra);
  overflow: hidden;
}
/* `hidden` no basta: el display:flex de arriba gana al display:none implicito
   del atributo, y el panel se quedaria visible siempre. */
.cpx-panel[hidden] { display: none; }

/* En movil ocupa casi todo el ancho: 380px fijos se salen de la pantalla. */
@media (max-width: 460px) {
  .cpx-panel {
    right: 10px;
    left: 10px;
    width: auto;
    /* Sigue al FAB, que en movil esta en bottom:150 (ver .cpx-fab):
       150 + 52 de alto + 6 de separacion. Si no se mueven juntos, el panel se
       abre encima del boton y lo tapa. */
    bottom: 208px;
  }
}

.cpx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cpx-borde);
  background: var(--cpx-bg-soft);
  flex: 0 0 auto;
}
.cpx-title { display: flex; flex-direction: column; min-width: 0; }
.cpx-title strong { font-size: 14px; font-weight: 600; }
.cpx-sub {
  font-size: 11px;
  color: var(--cpx-fg-soft);
  /* La direccion del buzon puede ser larga: se recorta en vez de ensanchar la
     cabecera y empujar la X fuera del panel. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cpx-x {
  border: none;
  background: transparent;
  color: var(--cpx-fg-soft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex: 0 0 auto;
}
.cpx-x:hover { color: var(--cpx-fg); }

.cpx-body {
  display: flex;
  flex-direction: column;
  min-height: 0; /* sin esto, un hijo con overflow no encoge dentro del flex */
  overflow: hidden;
}

/* --- Vistas de identificacion, consentimiento y aviso -------------------- */

.cpx-auth,
.cpx-consent,
.cpx-aviso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
}
.cpx-auth-t { margin: 0; font-size: 15px; font-weight: 600; }
.cpx-auth-d { margin: 0; font-size: 12.5px; color: var(--cpx-fg-soft); }
.cpx-aviso p { margin: 0; font-size: 13px; }

.cpx-lista {
  margin: 2px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--cpx-fg-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* --- Modos rapidos ------------------------------------------------------- */

.cpx-modos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cpx-borde);
  flex: 0 0 auto;
}
.cpx-modo {
  border: 1px solid var(--cpx-borde);
  background: var(--cpx-bg-soft);
  color: var(--cpx-fg);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.cpx-modo:hover { border-color: var(--cpx-acento); color: var(--cpx-acento); }

/* --- Historial ----------------------------------------------------------- */

.cpx-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.cpx-hist {
  flex: 1 1 auto;
  min-height: 180px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cpx-msg {
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 13px;
  /* El texto viene de correos y de un modelo: puede traer palabras larguisimas
     o URLs sin espacios. Sin esto, una sola de ellas ensancha el panel. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cpx-yo {
  align-self: flex-end;
  background: var(--cpx-acento);
  color: var(--cpx-acento-fg);
}
.cpx-bot {
  align-self: flex-start;
  background: var(--cpx-bg-soft);
  border: 1px solid var(--cpx-borde);
}
.cpx-sys {
  align-self: stretch;
  max-width: 100%;
  background: transparent;
  border: 1px dashed var(--cpx-borde);
  color: var(--cpx-fg-soft);
  font-size: 12px;
}

.cpx-estado {
  align-self: flex-start;
  font-size: 12px;
  color: var(--cpx-fg-soft);
  font-style: italic;
}

/* --- Tarjeta de aprobacion ----------------------------------------------- */

.cpx-card {
  border: 1px solid var(--cpx-acento);
  border-radius: 10px;
  padding: 11px;
  background: var(--cpx-bg-soft);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cpx-card.cpx-ok { border-color: var(--cpx-ok); }
.cpx-card-t { font-weight: 600; font-size: 13px; }

.cpx-f { display: flex; gap: 8px; font-size: 12.5px; }
.cpx-k { color: var(--cpx-fg-soft); flex: 0 0 58px; }
/* El destinatario es el dato que el usuario esta aprobando: se muestra entero,
   partiendolo si hace falta. Recortarlo con puntos suspensivos convertiria la
   confirmacion en un acto de fe. */
.cpx-v { flex: 1 1 auto; overflow-wrap: anywhere; }

.cpx-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.cpx-b {
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--cpx-borde);
  background: var(--cpx-bg);
  color: var(--cpx-fg);
}
.cpx-b1 {
  background: var(--cpx-acento);
  border-color: var(--cpx-acento);
  color: var(--cpx-acento-fg);
  font-weight: 600;
}
.cpx-b:disabled { opacity: 0.6; cursor: default; }

.cpx-err {
  color: var(--cpx-error);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.cpx-err[hidden] { display: none; }
.cpx-okmsg { color: var(--cpx-ok); font-size: 12.5px; }

/* --- Entrada ------------------------------------------------------------- */

.cpx-pie {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--cpx-borde);
  flex: 0 0 auto;
}
.cpx-in {
  flex: 1 1 auto;
  min-width: 0; /* un input en flex no encoge por debajo de su tamano
                   intrinseco sin esto, y desborda el panel */
  border: 1px solid var(--cpx-borde);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--cpx-bg);
  color: var(--cpx-fg);
}
.cpx-in:focus {
  outline: none;
  border-color: var(--cpx-acento);
}
.cpx-auth .cpx-in { width: 100%; }

.cpx-send {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  background: var(--cpx-acento);
  color: var(--cpx-acento-fg);
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  flex: 0 0 auto;
}

/* --- Nota de permisos ---------------------------------------------------- */

.cpx-nota {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px 12px;
  border-top: 1px solid var(--cpx-borde);
  background: var(--cpx-bg-soft);
  font-size: 11.5px;
  color: var(--cpx-fg-soft);
  flex: 0 0 auto;
}
.cpx-link {
  border: none;
  background: transparent;
  color: var(--cpx-acento);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* --- Ajustes ---------------------------------------------------------------
   El engranaje va junto a la X, no dentro del cuerpo: la cabecera es lo unico
   que sigue visible pase lo que pase en el panel, asi que el usuario siempre
   tiene a mano el sitio donde apagar la burbuja. */
.cpx-cfg {
  border: none;
  background: transparent;
  color: var(--cpx-fg-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex: 0 0 auto;
  /* La cabecera es flex con space-between; sin auto la X y el engranaje se
     separarian a los dos extremos en vez de quedar juntos a la derecha. */
  margin-left: auto;
}
.cpx-cfg:hover { color: var(--cpx-fg); }

.cpx-cfg-panel {
  padding: 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cpx-cfg-t { font-size: 14px; font-weight: 600; margin: 0; }
.cpx-cfg-h { font-size: 11px; color: var(--cpx-fg-soft); margin: -6px 0 0; line-height: 1.45; }

.cpx-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  /* Area de toque comoda: el interruptor es el control que mas se va a usar de
     esta pantalla y es el unico irreversible sin pasar por el panel. */
  padding: 8px 10px;
  border: 1px solid var(--cpx-borde);
  border-radius: 10px;
  background: var(--cpx-bg-soft);
}
.cpx-toggle input { width: 16px; height: 16px; accent-color: var(--cpx-acento); cursor: pointer; }

.cpx-cfg-l {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--cpx-fg-soft);
}
.cpx-sel, .cpx-ta {
  font: inherit;
  font-size: 13px;
  color: var(--cpx-fg);
  background: var(--cpx-bg);
  border: 1px solid var(--cpx-borde);
  border-radius: 8px;
  padding: 7px 9px;
  width: 100%;
  box-sizing: border-box;
}
.cpx-ta { resize: vertical; min-height: 56px; font-family: inherit; }
.cpx-sel:focus, .cpx-ta:focus { outline: 2px solid var(--cpx-acento); outline-offset: -1px; }

.cpx-uso { font-size: 12px; color: var(--cpx-fg-soft); display: flex; flex-direction: column; gap: 6px; }
.cpx-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--cpx-borde);
  overflow: hidden;
}
.cpx-barra-in {
  height: 100%;
  background: var(--cpx-acento);
  /* Sin transicion el salto de 0 a 100% al abrir el panel parece un fallo de
     pintado. Con ella se lee como lo que es: una medida. */
  transition: width 240ms ease;
}

.cpx-cfg-acc { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.cpx-err { font-size: 12px; color: var(--cpx-error); margin: 0; }