:root {
  --cw-primary: #0071ce;
  --cw-bg: #0b1329;
  --cw-panel: #0d1a2a;
  --cw-text: #e5e7eb;
  --cw-muted: #9ca3af;
  --cw-border: #1f2937;
  --cw-danger: #ef4444;
  --cw-radius: 14px;
  --cw-shadow: 0 12px 30px rgba(0,0,0,0.4);
  --cw-font: 'Montserrat', system-ui, sans-serif
}

#cw-floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: end;
  font-family: var(--cw-font);
}

#cw-badge {
  background: var(--cw-primary);
  color: #fff; border-radius: 999px;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: var(--cw-shadow);
  display: none; 
  align-items: center;
  gap: 10px;
  font-family: var(--cw-font);
  border: 0;
}
#cw-badge.mostrar { 
  display: flex;
}

#cw-badge .cw-dot { 
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset;
}
#cw-badge .cw-title { 
  font-weight: 600;
  font-size: 17px;
  letter-spacing:.2px 
}

#cw-panel {
  width: min(380px, 92vw);
  height: 520px; 
  background: var(--cw-panel);
  border-radius: var(--cw-radius); 
  overflow: hidden; box-shadow: var(--cw-shadow);
  border: 1px solid var(--cw-border);
  display: none; 
  flex-direction: column;
}
#cw-panel.open { display: flex; }
#cw-header {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cw-text);
  border-bottom: 1px solid var(--cw-border);
}
#cw-header .cw-avatar { 
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--cw-primary);
  display: grid; 
  place-items: center; 
  color: #fff; 
  font-weight: 700;
}
.cw-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}
#cw-header .cw-heading { 
  display: flex;
  flex-direction:
  column; line-height: 1.1 
}
#cw-header .cw-name { 
  font-size: 17px; 
  font-weight: 700 
}
#cw-header .cw-status { 
  font-size: 12px;
  color: var(--cw-muted)
}
#cw-header .cw-close { 
  margin-left: auto; 
  background: transparent;
  color: var(--cw-muted);
  border: 0;
  cursor: pointer;
  font-size: 18px
}

#cw-messages {
  flex: 1; padding: 12px; overflow-y: auto; background: var(--cw-bg);
  display: flex; flex-direction: column; gap: 8px;
}
.cw-msg { 
  max-width: 85%; 
  padding: 10px 12px; 
  border-radius: 14px; 
  font-size: 14px;
  line-height: 1.35;
  white-space: pre-line
}
.cw-msg a {
  color: #007bff;
  text-decoration: underline;
  word-break: break-word;
}
.cw-msg.bot { 
  background: #0b1329; 
  color: var(--cw-text);
  border: 1px solid var(--cw-border) }
.cw-msg.user { 
  background: #18213d;
  color: var(--cw-text);
  margin-left: auto;
  border: 1px solid #26304c
}
.cw-time { 
  display:block;
  font-size: 11px;
  color: var(--cw-muted);
  margin-top: 4px
}  

#cw-typing { 
  display:none;
  align-items:center;
  gap:6px;
  color: var(--cw-muted);
  font-size: 12px;
  padding: 0 12px 8px;
  background-color: var(--cw-bg);
}
#cw-typing .dot { 
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cw-muted);
  opacity:.6;
  animation: cw-bob 1.2s infinite ease-in-out;
}
#cw-typing .dot:nth-child(2){ animation-delay: .15s } 
#cw-typing .dot:nth-child(3){ animation-delay: .3s }
@keyframes cw-bob { 0%,80%,100%{ transform: translateY(0) } 40%{ transform: translateY(-2px) } }

#cw-input {
  display: grid; 
  grid-template-columns: 1fr auto; 
  gap: 8px; 
  padding: 10px; 
  background: var(--cw-bg); 
  border-top: 1px solid var(--cw-border);
}
#cw-input input {
  background: #0a1022;
  border: 1px solid var(--cw-border);
  border-radius: 12px;
  color: var(--cw-text);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  font-family: var(--cw-font);
}
#cw-input input:disabled{ 
  opacity:.6;
  cursor: not-allowed
}
#cw-input button {
  background: var(--cw-primary);
  color: #fff;
  border: 0;
  padding: 0 14px;
  border-radius: 12px; 
  cursor: pointer; 
  font-weight: 600;
}
#cw-input button:disabled{ 
  opacity:.6; 
  cursor:not-allowed
}

#cw-badge[aria-busy="true"] { filter: saturate(.7); }

/* Mini tooltip para estados */
.cw-tip {
  position: absolute;
  right: 0;
  bottom: 62px;
  background: #111827;
  color: #fff;
  border: 1px solid var(--cw-border);
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 8px;
  display: none;
  max-width: 240px;
  box-shadow: var(--cw-shadow);
}
#cw-floating.show-tip .cw-tip{ display:block }

#cw-send {
  font-family: var(--cw-font);
}