/* =========================
   Continental Assist Theme
   Global overrides
   Colors from logo:
   Navy: #00234B
   Cyan: #00C6FE
   ========================= */

:root{
  --ca-navy: #00234B;
  --ca-cyan: #00C6FE;

  /* Tonos auxiliares */
  --ca-navy-2: #001A38;
  --ca-navy-3: #0B2F5D;

  /* Bootstrap 5.3 variables (global) */
  --bs-primary: var(--ca-cyan);
  --bs-primary-rgb: 0,198,254;

  --bs-link-color: var(--ca-cyan);
  --bs-link-hover-color: #33D4FF;

  --bs-body-color: #0f172a;
  --bs-body-bg: #f7fbff;

  --bs-border-color: rgba(0,35,75,.12);

  --bs-dark: var(--ca-navy);
  --bs-dark-rgb: 0,35,75;
}

body{
  background: var(--bs-body-bg);
}

/* Top bars / headers oscuros */
.navbar,
.top-header,
.header,
.app-header,
.border-bottom.header,
.chat-content-header{
  background: var(--ca-navy) !important;
  color: #ffffff !important;
}
.navbar a,
.top-header a,
.header a,
.app-header a{
  color: rgba(255,255,255,.92) !important;
}

/* =========================
   BOTÓN PRINCIPAL (Chat Send)
   ========================= */
.btn-primary{
  background-color: var(--ca-cyan) !important;
  border-color: var(--ca-cyan) !important;
  color: #00184C !important;
  font-weight: 600;
}
.btn-primary i,
.btn-primary .bx,
.btn-primary .lni{
  color: #00184C !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background-color: #33D4FF !important;
  border-color: #33D4FF !important;
  color: #00184C !important;
}
.btn-primary:hover i,
.btn-primary:focus i{
  color: #00184C !important;
}

.btn-outline-primary{
  border-color: var(--ca-cyan) !important;
  color: var(--ca-cyan) !important;
}
.btn-outline-primary:hover{
  background: var(--ca-cyan) !important;
  color: #001A38 !important;
}

/* Badges / Pills */
.badge.bg-primary,
.bg-primary{
  background-color: var(--ca-cyan) !important;
  color: #001A38 !important;
}

/* Inputs focus */
.form-control:focus,
.form-select:focus{
  border-color: rgba(0,198,254,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(0,198,254,.22) !important;
}

/* Tarjetas */
.card{
  border-color: rgba(0,35,75,.10) !important;
  box-shadow: 0 8px 22px rgba(0,35,75,.06);
}

/* Sidebar (si tu template la usa) */
.sidebar,
.side-nav,
.vertical-menu,
.chat-sidebar{
  background: linear-gradient(180deg, var(--ca-navy) 0%, var(--ca-navy-2) 100%) !important;
  color: rgba(255,255,255,.92) !important;
}
.sidebar a,
.side-nav a,
.vertical-menu a,
.chat-sidebar a{
  color: rgba(255,255,255,.88) !important;
}
.sidebar a:hover,
.side-nav a:hover,
.vertical-menu a:hover{
  color: #ffffff !important;
}

/* =========================
   Chat look & feel
   ========================= */
.chat-left-msg-text{
  background: #ffffff !important;
  border: 1px solid rgba(0,35,75,.10) !important;
  color: #0b1220 !important;
}
.chat-right-msg-text{
  background: linear-gradient(135deg, var(--ca-navy) 0%, var(--ca-navy-3) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0,198,254,.25) !important;
}

/* Íconos */
i.bx, i.lni, .icon-base{
  color: var(--ca-cyan);
}

/* Separadores */
.border-top, .border-bottom, .border, hr{
  border-color: rgba(0,35,75,.12) !important;
}

.header-brand img{
  filter: drop-shadow(0 4px 10px rgba(0,35,75,.15));
}

/* =========================
   Chat - spacing profesional
   ========================= */

/* FULL WIDTH: asegura que el layout use todo el ancho */
.chat-main,
.chat-main > .d-flex.flex-column.flex-grow-1{
  width: 100% !important;
  max-width: none !important;
}

/* Área de mensajes: padding responsivo para usar mejor el ancho */
#chatScrollArea{
  padding: clamp(16px, 2vw, 28px) !important;
}

/* Burbujas: padding, radio, ancho, tipografía */
.chat-left-msg-text,
.chat-right-msg-text{
  padding: 14px 16px !important;
  border-radius: 14px !important;
  line-height: 1.55 !important;
  font-size: 0.95rem !important;
  letter-spacing: .1px;
  max-width: 860px; /* dejamos lectura cómoda; layout sigue full width */
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Contenedor de cada mensaje */
.chat-left-msg,
.chat-right-msg{
  gap: 10px !important;
  margin-bottom: 16px !important;
}

/* Timestamp */
.chat-left-msg-content .small.text-muted,
.chat-right-msg-content .small.text-muted{
  margin-top: 6px !important;
  font-size: 0.78rem !important;
  opacity: .75;
}

/* Código inline */
.chat-left-msg-text code,
.chat-right-msg-text code{
  background: rgba(0,0,0,.06);
  padding: 2px 6px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
}

/* Chips */
.chat-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 6px;
}
.chat-badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.9rem;
  background: rgba(0,35,75,.06);
  border: 1px solid rgba(0,35,75,.10);
  color: #00184C;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.chat-msg{
  white-space: pre-wrap;
}

/* Input */
#messageInput{
  border-radius: 14px;
  padding: 12px 14px;
}

/* Botón enviar */
#btnSend{
  border-radius: 14px;
  min-width: 52px;
  box-shadow: 0 10px 20px rgba(0,35,75,.10);
}

/* =========================
   Markdown "Playground-like"
   ========================= */
.chat-prose{
  color: #0b1220;
}
.chat-prose h1, .chat-prose h2, .chat-prose h3{
  margin: 14px 0 10px;
  font-weight: 800;
  color: #00184C;
}
.chat-prose h2{ font-size: 1.15rem; }
.chat-prose h3{ font-size: 1.05rem; }
.chat-prose p{
  margin: 0 0 10px;
}
.chat-prose ul, .chat-prose ol{
  margin: 8px 0 12px 18px;
  padding-left: 18px;
}
.chat-prose li{
  margin: 6px 0;
}
.chat-prose .chat-spacer{ height: 10px; }
.chat-prose hr{
  margin: 14px 0;
  border-top: 1px solid rgba(0,35,75,.12);
}
.chat-prose code{
  background: rgba(0,0,0,.06);
  padding: 2px 6px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
}
.chat-prose pre{
  background: #0b1220;
  color: #e6edf3;
  padding: 12px 14px;
  border-radius: 12px;
  overflow: auto;
  margin: 10px 0 12px;
}
.chat-prose pre code{
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: 0.92em;
}
.chat-prose blockquote{
  border-left: 4px solid rgba(0,198,254,.65);
  padding: 6px 12px;
  margin: 10px 0 12px;
  background: rgba(0,198,254,.08);
  border-radius: 10px;
}

/* =========================
   Chat input alignment
   ========================= */

/* El form debe alinear todo a la misma altura */
#chatForm{
  align-items: stretch !important;
}

/* Textarea ocupa todo el alto del row y se ve “product” */
#messageInput{
  min-height: 44px;
}

/* Botón enviar: cuadrado / centrado */
#btnSend{
  height: 44px !important;
  width: 54px !important;
  min-width: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

/* Icono centrado y consistente */
#btnSend i{
  line-height: 1 !important;
  font-size: 1.25rem;
}

/* Dots typing */
.dots span{
  display:inline-block;
  animation: dotPulse 1.2s infinite;
}
.dots span:nth-child(2){ animation-delay: .15s; }
.dots span:nth-child(3){ animation-delay: .3s; }

@keyframes dotPulse{
  0%, 20% { opacity: .2; transform: translateY(0); }
  50%     { opacity: 1;  transform: translateY(-1px); }
  100%    { opacity: .2; transform: translateY(0); }
}