/*:root {
  --cyan:      #0097B2;
  --cyan-dark: #007A91;
  --lima:      #B6C600;
  --gris:      #A7A9AC;
  --ink:       #111318;
  --surface:   #FFFFFF;
  --surface-2: #F7F8FA;
  --border:    #E2E5EC;
  --font:      'Segoe UI',system-ui,-apple-system,sans-serif;
  --radius:    12px;
  --shadow:    0 8px 32px rgba(0,0,0,0.15);
}
*/
* { box-sizing:border-box; margin:0; padding:0; }

/* ── BOTÓN FLOTANTE ── */
#ekko-btn {
  position:fixed;
  bottom:24px; right:24px;
  width:60px; height:60px;
  background:var(--cyan);
  border-radius:50%;
  border:none;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,151,178,0.4);
  display:flex; align-items:center; justify-content:center;
  z-index:9998;
  transition:transform .2s, box-shadow .2s;
}
#ekko-btn:hover {
  transform:scale(1.08);
  box-shadow:0 6px 20px rgba(0,151,178,0.5);
}
#ekko-btn svg { width:28px; height:28px; fill:#fff; }
#ekko-badge {
  position:absolute;
  top:-4px; right:-4px;
  width:18px; height:18px;
  background:var(--lima);
  border-radius:50%;
  border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:var(--ink);
}

/* ── VENTANA DEL CHAT ── */
#ekko-chat {
  position:fixed;
  bottom:96px; right:24px;
  width:360px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 120px);
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:9999;
  font-family:var(--font);
  border:1px solid var(--border);
}
#ekko-chat.open { display:flex; }

/* ── HEADER ── */
.ek-header {
  background:linear-gradient(135deg, var(--ink) 0%, #2D2D2D 100%);
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.ek-avatar {
  width:36px; height:36px;
  background:var(--cyan);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.ek-header-info { flex:1; }
.ek-header-name {
  font-size:14px; font-weight:700; color:#fff;
  letter-spacing:.3px;
}
.ek-header-status {
  font-size:11px; color:var(--gris);
  display:flex; align-items:center; gap:5px;
}
.ek-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--lima); flex-shrink:0;
}
.ek-close {
  background:none; border:none; cursor:pointer;
  color:var(--gris); font-size:20px; line-height:1;
  padding:4px; transition:color .15s;
}
.ek-close:hover { color:#fff; }

/* ── MENSAJES ── */
.ek-messages {
  flex:1; overflow-y:auto;
  padding:16px 14px;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent; 
  background:var(--surface-2);
}
.ek-messages::-webkit-scrollbar { width:4px; }
.ek-messages::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.ek-msg {
  max-width:82%;
  font-size:13.5px;
  line-height:1.55;
  word-break:break-word;
}
.ek-msg.bot {
  align-self:flex-start;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px 12px 12px 12px;
  padding:10px 13px;
  color:var(--ink);
}
.ek-msg.user {
  align-self:flex-end;
  background:var(--cyan);
  color:#fff;
  border-radius:12px 4px 12px 12px;
  padding:10px 13px;
}
.ek-msg strong { font-weight:700; }
.ek-msg em { font-style:italic; }

/* Botón WhatsApp dentro del mensaje */
.ek-wa-btn {
  display:inline-flex; align-items:center; gap:7px;
  margin-top:10px;
  background:#25D366; color:#fff;
  border:none; border-radius:8px;
  padding:8px 14px; font-size:13px; font-weight:600;
  cursor:pointer; font-family:var(--font);
  text-decoration:none; transition:background .15s;
  width:100%; justify-content:center;
}
.ek-wa-btn:hover { background:#1DA851; }
.ek-wa-btn svg { width:18px; height:18px; fill:#fff; flex-shrink:0; }

/* ── TYPING INDICATOR ── */
.ek-typing {
  align-self:flex-start;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px 12px 12px 12px;
  padding:10px 14px;
  display:none;
}
.ek-typing.visible { display:flex; gap:5px; align-items:center; }
.ek-typing span {
  width:7px; height:7px; border-radius:50%;
  background:var(--gris); display:inline-block;
  animation:bounce .9s infinite;
}
.ek-typing span:nth-child(2) { animation-delay:.15s; }
.ek-typing span:nth-child(3) { animation-delay:.30s; }
@keyframes bounce {
  0%,60%,100% { transform:translateY(0); }
  30%          { transform:translateY(-5px); }
}

/* ── SUGERENCIAS ── */
.ek-suggestions {
  padding:8px 14px 4px;
  display:flex; flex-wrap:wrap; gap:6px;
  flex-shrink:0; background:var(--surface);
  border-top:1px solid var(--border);
}
.ek-sug {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:100px; padding:5px 12px;
  font-size:12px; color:var(--ink); cursor:pointer;
  font-family:var(--font); transition:all .15s; white-space:nowrap;
}
.ek-sug:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,151,178,0.06); }

/* ── INPUT ── */
.ek-input-wrap {
  padding:10px 12px;
  display:flex; gap:8px; align-items:flex-end;
  border-top:1px solid var(--border);
  background:var(--surface);
  flex-shrink:0;
}
#ek-input {
  flex:1; resize:none; border:1.5px solid var(--border);
  border-radius:8px; padding:9px 12px; font-size:13.5px;
  font-family:var(--font); color:var(--ink);
  max-height:80px; min-height:38px;
  transition:border-color .15s;
  background:var(--surface-2);
}
#ek-input:focus { outline:none; border-color:var(--cyan); background:var(--surface); }
#ek-input::placeholder { color:var(--gris); }
#ek-send {
  width:38px; height:38px; flex-shrink:0;
  background:var(--cyan); border:none; border-radius:8px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
#ek-send:hover { background:var(--cyan-dark); }
#ek-send svg { width:18px; height:18px; fill:#fff; }

/* ── RESPONSIVE MÓVIL ── */
@media(max-width:400px) {
  #ekko-chat {
    top:0; right:0; bottom:0; left:0;
    width:100%; height:100%;
    max-width:100vw; max-height:100vh;
    border-radius:0;
  }
  .ek-messages {
    background-color: #e5ddd5; /* Tono similar a WhatsApp */
    background-image: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png");
  }
  #ekko-btn { right:12px; bottom:16px; }
}