:root {
  --cach-wa-header: #075E54;
  --cach-wa-bg: #ECE5DD;
  --cach-wa-in: #FFFFFF;
  --cach-wa-out: #DCF8C6;
  --cach-gold: #d4a437;
}

.cach-chat-fab {
  position: fixed; right: 1.5rem; bottom: 1.5rem;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--cach-wa-header); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--cach-gold); cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); z-index: 9999;
}
.cach-chat-fab svg { width: 32px; height: 32px; fill: #fff; }

.cach-chat-panel {
  position: fixed; right: 1.5rem; bottom: 6.5rem;
  width: 360px; max-width: calc(100vw - 2rem); height: 520px; max-height: calc(100vh - 8rem);
  background: var(--cach-wa-bg); border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.4); display: none; flex-direction: column;
  z-index: 9999; font-family: -apple-system, Segoe UI, Roboto, sans-serif;
}
.cach-chat-panel.open { display: flex; }

.cach-chat-header {
  background: var(--cach-wa-header); color: #fff;
  padding: .6rem .8rem; display: flex; align-items: center; gap: .6rem;
}
.cach-chat-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: #128C7E; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
}
.cach-chat-title { line-height: 1.2; }
.cach-chat-title strong { display: block; font-size: .95rem; }
.cach-chat-title span { font-size: .75rem; opacity: .85; }
.cach-chat-close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; }

.cach-chat-body {
  flex: 1; overflow-y: auto; padding: .8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23d9cfc2'/%3E%3C/svg%3E");
  display: flex; flex-direction: column; gap: .4rem;
}
.cach-msg { max-width: 78%; padding: .45rem .6rem; border-radius: 8px; font-size: .88rem; line-height: 1.35; position: relative; white-space: pre-wrap; word-wrap: break-word; }
.cach-msg.in { background: var(--cach-wa-in); align-self: flex-start; border-top-left-radius: 0; }
.cach-msg.out { background: var(--cach-wa-out); align-self: flex-end; border-top-right-radius: 0; }
.cach-msg .meta { display: block; text-align: right; font-size: .65rem; color: #667781; margin-top: .15rem; }
.cach-msg .meta .check { color: #34B7F1; }

.cach-typing { font-size: .8rem; color: #667781; align-self: flex-start; padding: .2rem .4rem; font-style: italic; }

.cach-chat-input { display: flex; gap: .4rem; padding: .5rem; background: #F0F0F0; }
.cach-chat-input input { flex: 1; border: 0; border-radius: 20px; padding: .55rem .8rem; font-size: .9rem; outline: none; }
.cach-chat-input button { background: var(--cach-wa-header); border: 0; color: #fff; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; }

@media (max-width: 640px) {
  /* Full-screen en móvil vía inset:0 (evita 100vw→overflow de scrollbar y 100vh→barra
     de URL). Se resetean max-width/max-height de la regla base, que si no capaban el
     ancho a 100vw-2rem dejando un hueco lateral. */
  .cach-chat-panel {
    top: 0; right: 0; bottom: 0; left: 0;
    width: auto; max-width: none;
    height: auto; max-height: none;
    border-radius: 0;
  }
  .cach-chat-fab { right: 1rem; bottom: 1rem; }
}