/* Modulo de pantalla completa de Nexo IA (IA-2b). Reusa .caja como
   base, igual que la pantalla Cuenta. */

.nexo-ia-vista {
 max-width: 720px;
 display: flex;
 flex-direction: column;
 height: calc(100vh - 160px);
}

.nexo-ia-vista-cabecera {
 display: flex;
 align-items: center;
 gap: var(--nexo-space-3);
 padding-bottom: var(--nexo-space-3);
 border-bottom: 1px solid var(--nexo-line);
 margin-bottom: var(--nexo-space-3);
}

.nexo-ia-vista-cabecera .nexo-ia-marca {
 width: 64px;
 height: 64px;
 border-radius: 50%;
 object-fit: cover;
 object-position: center 20%;
 flex-shrink: 0;
 background: #fff;
 box-shadow: var(--nexo-shadow-card);
 transition: opacity .15s ease;
}

.nexo-ia-vista-cabecera h2 {
 margin: 0;
}

.nexo-ia-vista-subtitulo {
 margin: 2px 0 0;
 color: var(--nexo-text-muted);
 font-size: var(--nexo-font-size-sm);
}

.nexo-ia-vista-titulo-grupo {
 flex: 1;
 min-width: 0;
}

.nexo-ia-vista-acciones {
 display: flex;
 gap: var(--nexo-space-2);
 flex-shrink: 0;
}

.nexo-ia-vista-acciones button {
 border: 1px solid var(--nexo-line);
 background: var(--nexo-surface);
 color: var(--nexo-text);
 border-radius: var(--nexo-radius-sm);
 padding: 6px 12px;
 font-size: var(--nexo-font-size-sm);
 font-weight: 700;
 cursor: pointer;
 white-space: nowrap;
}

.nexo-ia-vista-acciones button:hover {
 background: var(--nexo-brand-soft);
}

@media (max-width: 560px) {
 .nexo-ia-vista-acciones button {
  padding: 6px 8px;
  font-size: 11px;
 }
}

.nexo-ia-mensajes {
 flex: 1;
 overflow-y: auto;
 padding: var(--nexo-space-3) 0;
 display: flex;
 flex-direction: column;
 gap: var(--nexo-space-2);
}

.nexo-ia-mensaje {
 max-width: 80%;
 padding: 10px 14px;
 border-radius: var(--nexo-radius-md);
 font-size: var(--nexo-font-size-md);
 line-height: 1.45;
 white-space: pre-wrap;
 word-break: break-word;
}

.nexo-ia-mensaje.usuario {
 align-self: flex-end;
 background: var(--nexo-brand-soft);
 color: var(--nexo-text);
 border-bottom-right-radius: 4px;
}

.nexo-ia-mensaje.asistente {
 align-self: flex-start;
 background: color-mix(in srgb, #00d4ff 6%, var(--nexo-surface));
 color: var(--nexo-text);
 border-left: 3px solid #2563ff;
 border-bottom-left-radius: 4px;
}

.nexo-ia-mensaje.pensando {
 align-self: flex-start;
 color: var(--nexo-text-muted);
 font-style: italic;
}

.nexo-ia-mensaje.error {
 align-self: center;
 background: color-mix(in srgb, var(--nexo-danger) 12%, #fff);
 color: var(--nexo-danger);
}

.nexo-ia-sugerencias {
 display: flex;
 flex-direction: column;
 gap: 6px;
 align-self: flex-start;
 max-width: 80%;
}

/* !important necesario: theme-runtime.css fuerza
   background:var(--brand-color) !important en cualquier <button> para
   que respete el color de marca configurable del negocio. Estos chips
   usan a proposito la identidad fija de Nexo, no el color de marca --
   mismo criterio que .nexo-ia-popover-preguntas en nexo-ia.css. */
.nexo-ia-sugerencias button {
 text-align: left;
 border: 1px solid var(--nexo-line) !important;
 background: var(--nexo-surface-soft) !important;
 color: var(--nexo-text) !important;
 border-radius: var(--nexo-radius-sm);
 padding: 8px 12px;
 font-size: var(--nexo-font-size-sm);
 cursor: pointer;
}

.nexo-ia-sugerencias button:hover {
 background: color-mix(in srgb, #2563ff 16%, var(--nexo-surface-soft)) !important;
}

.nexo-ia-entrada {
 display: flex;
 gap: var(--nexo-space-2);
 padding-top: var(--nexo-space-3);
 border-top: 1px solid var(--nexo-line);
}

.nexo-ia-entrada textarea {
 flex: 1;
 resize: none;
 height: 44px;
 max-height: 120px;
 padding: 10px 12px;
 border-radius: var(--nexo-radius-sm);
 border: 1px solid var(--nexo-line);
 font-family: var(--nexo-font-family);
 font-size: var(--nexo-font-size-md);
}

.nexo-ia-entrada button {
 width: auto;
 flex-shrink: 0;
 border: none;
 background: var(--nexo-brand);
 color: #fff;
 border-radius: var(--nexo-radius-sm);
 padding: 0 var(--nexo-space-5);
 cursor: pointer;
 font-size: var(--nexo-font-size-md);
 font-weight: 600;
}

.nexo-ia-entrada button:disabled {
 opacity: .6;
 cursor: default;
}

@media (max-width: 720px) {
 .nexo-ia-vista {
  height: calc(100vh - 200px);
 }
}