:root {
  --cw-primary: #0071ce;
  --cw-bg: #0f172a;
  --cw-panel: #111827;
  --cw-text: #e5e7eb;
  --cw-muted: #9ca3af;
  --cw-border: #1f2937;
  --cw-danger: #ef4444;
  --cw-radius: 14px;
  --cw-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#cw-floating {
  position: fixed; right: 20px; bottom: 20px; z-index: 99999;
  display: flex; flex-direction: column; gap: 10px; align-items: end;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
#cw-badge {
  background: var(--cw-primary);
  color: #fff; border-radius: 999px; padding: 12px 16px; cursor: pointer;
  box-shadow: var(--cw-shadow); display: flex; align-items: center; gap: 10px;
}
#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: 14px; 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-header {
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  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: 28px; height: 28px; border-radius: 999px; background: var(--cw-primary); display: grid; place-items: center; color: #fff; font-weight: 700; }
#cw-header .cw-heading { display: flex; flex-direction: column; line-height: 1.1 }
#cw-header .cw-name { font-size: 14px; 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.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; }
#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: #0d142a; 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;
}
#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); }
#cw-panel.open { display: flex; }

/* 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 }