/* ================================================================
   Capsdesuro · SURO Chatbot v1 — tema clar (paper · cork · barretina)
   ================================================================ */
:root {
  --c-accent:      #c83221;   /* vermell barretina */
  --c-accent-deep: #a52818;
  --c-accent-20:   rgba(200,50,33,.14);
  --c-accent-08:   rgba(200,50,33,.06);
  --c-glow:        rgba(200,50,33,.22);
  --c-bg:          #faf6ef;   /* paper */
  --c-surface:     #ffffff;
  --c-card:        #ffffff;
  --c-card2:       #f4ede2;
  --c-border:      #e3d8c8;
  --c-border-acc:  rgba(200,50,33,.25);
  --c-text:        #2b2521;   /* ink */
  --c-muted:       #8a7d70;
  --c-user-bg:     #c83221;
  --c-user-text:   #fdf7ef;
  --c-user-border: #a52818;
  --c-shadow:      0 18px 48px rgba(43,37,33,.18), 0 4px 14px rgba(43,37,33,.10);
  --radius:        14px;
  --font:          inherit;
  --z:             2147483000;
  --w:             380px;
  --h:             560px;
  --fab:           64px;
}

/* ── Root ─────────────────────────────────────────────────── */
#cds-root {
  position: fixed;
  bottom: 150px;
  right: 20px;
  z-index: var(--z);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* ── Bombolla proactiva ───────────────────────────────────── */
#cds-proactive {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 16px 16px 4px 16px;
  padding: 12px 16px;
  max-width: 260px;
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.5;
  box-shadow: var(--c-shadow);
  position: relative;
  opacity: 0;
  transform: translateY(10px) scale(.95);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
#cds-proactive.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#cds-proactive-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none;
  color: var(--c-muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 4px;
}
#cds-proactive-close:hover { color: var(--c-text); }

/* ── FAB ──────────────────────────────────────────────────── */
#cds-fab {
  width: var(--fab); height: var(--fab);
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-accent);
  padding: 0;
  box-shadow: 0 6px 20px rgba(43,37,33,.28);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
  position: relative; flex-shrink: 0; overflow: hidden;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
#cds-fab.open {
  background-color: var(--c-accent);
  border-color: var(--c-accent-deep);
}
#cds-fab:hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(43,37,33,.34); }
#cds-fab:active { transform: scale(.93); }
#cds-fab svg { width: 26px; height: 26px; fill: #fff; transition: opacity .2s, transform .25s; }

.cds-chat {
  opacity: 1; transform: scale(1) rotate(0deg);
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit; overflow: hidden;
  transition: opacity .2s, transform .25s;
}
#cds-fab .cds-chat img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.cds-close { opacity: 0; transform: scale(.4) rotate(-80deg); position: absolute; }
#cds-fab.open .cds-chat  { opacity: 0; transform: scale(.4) rotate(80deg); }
#cds-fab.open .cds-close { opacity: 1; transform: scale(1) rotate(0deg); }

/* anelles de pulsació */
#cds-fab::before, #cds-fab::after {
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid var(--c-accent);
  opacity: 0; animation: ring 2.8s ease-out infinite;
}
#cds-fab::after { animation-delay: .9s; }
@keyframes ring {
  0%   { opacity: .35; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.55); }
}

/* distintiu */
#cds-badge {
  position: absolute; top: -4px; right: -4px;
  width: 20px; height: 20px;
  background: var(--c-accent); border: 2px solid var(--c-bg);
  border-radius: 50%; color: #fff;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  z-index: 2;
}
#cds-badge.show { transform: scale(1); }

/* etiqueta */
#cds-label {
  position: absolute;
  right: calc(var(--fab) + 14px);
  top: 50%; transform: translateY(-50%);
  white-space: nowrap;
  background: var(--c-surface);
  color: var(--c-accent);
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  padding: 7px 16px; border-radius: 20px;
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 12px rgba(43,37,33,.12);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
#cds-label.gone,
#cds-root.open #cds-label { opacity: 0; transform: translateY(-50%) translateX(8px); }

/* ── Finestra de xat ──────────────────────────────────────── */
#cds-window {
  width: var(--w);
  background: var(--c-bg);
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
  max-height: var(--h);
  transform-origin: bottom right;
  transform: scale(.86) translateY(20px);
  opacity: 0; pointer-events: none;
  transition: transform .38s cubic-bezier(.34,1.56,.64,1), opacity .28s ease;
}
#cds-root.open #cds-window { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }

/* ── Capçalera ────────────────────────────────────────────── */
#cds-hdr {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px;
  background: var(--c-accent);
  flex-shrink: 0;
}
#cds-av {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
#cds-av img { width: 100%; height: 100%; object-fit: cover; }
#cds-av svg { width: 22px; height: 22px; fill: var(--c-accent); }
#cds-hinfo { flex: 1; min-width: 0; }
#cds-hname {
  color: #fff; font-weight: 800; font-size: 14px;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.2;
}
#cds-hsub {
  color: rgba(255,255,255,.85); font-size: 11px; font-weight: 500;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cds-close-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.75); padding: 4px; transition: color .2s;
}
#cds-close-btn:hover { color: #fff; }
#cds-close-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* ── Missatges ────────────────────────────────────────────── */
#cds-msgs {
  flex: 1; overflow-y: auto;
  padding: 16px 13px 10px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--c-bg);
  background-image: radial-gradient(circle at 1px 1px, rgba(181,121,63,.06) 1px, transparent 0);
  background-size: 28px 28px;
  scroll-behavior: smooth;
}
#cds-msgs::-webkit-scrollbar { width: 4px; }
#cds-msgs::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }

.cds-row { display: flex; gap: 8px; align-items: flex-end; }
.cds-row.user { flex-direction: row-reverse; }
.cds-wrap { max-width: 82%; display: flex; flex-direction: column; gap: 3px; }
.cds-row.user .cds-wrap { align-items: flex-end; }

/* bombolles */
.cds-bubble {
  padding: 10px 13px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.55;
  word-break: break-word;
  animation: pop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop {
  from { opacity: 0; transform: scale(.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cds-row.bot  .cds-bubble { background: var(--c-card); color: var(--c-text); border: 1px solid var(--c-border); border-bottom-left-radius: 4px; }
.cds-row.user .cds-bubble { background: var(--c-user-bg); color: var(--c-user-text); border: 1px solid var(--c-user-border); border-bottom-right-radius: 4px; }
.cds-bubble.error { background: #fbeceb; border-color: rgba(200,50,33,.35); color: #a52818; }

.cds-bubble strong { color: #1a1a1a; font-weight: 700; }
.cds-row.user .cds-bubble strong { color: #fff; }
.cds-bubble em     { color: var(--c-accent-deep); font-style: normal; }
.cds-bubble a      { color: var(--c-accent); }
.cds-row.user .cds-bubble a { color: #fff; text-decoration: underline; }
.cds-bubble ul     { margin: 5px 0 0 15px; padding: 0; }
.cds-bubble li     { margin-bottom: 3px; }
.cds-bubble p      { margin: 0 0 5px; }
.cds-bubble p:last-child { margin: 0; }
.cds-bubble br     { display: block; margin: 2px 0; }

/* mini avatar */
.cds-mini {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-surface); border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.cds-mini img { width: 100%; height: 100%; object-fit: cover; }
.cds-mini svg { width: 14px; height: 14px; fill: var(--c-accent); }
.cds-row.user .cds-mini { display: none; }

.cds-time { font-size: 10px; color: var(--c-muted); padding: 0 3px; }

/* escrivint */
.cds-typing {
  display: flex; gap: 5px; padding: 12px 14px;
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: 16px; border-bottom-left-radius: 4px; width: fit-content;
}
.cds-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent); opacity: .5;
  animation: td .9s ease-in-out infinite;
}
.cds-typing span:nth-child(2) { animation-delay: .18s; }
.cds-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes td {
  0%,80%,100% { opacity: .4; transform: translateY(0); }
  40%          { opacity: 1;  transform: translateY(-5px); }
}

/* ── Targeta d'escalació a contacte ───────────────────────── */
.cds-escalate {
  background: var(--c-card2); border: 1px solid var(--c-border);
  border-radius: 14px; padding: 14px 16px;
  animation: pop .35s cubic-bezier(.34,1.56,.64,1);
}
.cds-escalate p { color: var(--c-muted); font-size: 12px; margin: 0 0 10px; }
.cds-escalate-title { color: var(--c-text); font-weight: 700; font-size: 13px; margin: 0 0 6px; }
.cds-email-link {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--c-accent); color: #fff;
  border: 1px solid var(--c-accent-deep); border-radius: 20px;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  text-decoration: none; transition: background .2s;
}
.cds-email-link:hover { background: var(--c-accent-deep); }
.cds-email-link svg { width: 14px; height: 14px; fill: currentColor; }

/* ── Peu / entrada ────────────────────────────────────────── */
#cds-footer {
  display: flex; align-items: flex-end; gap: 9px;
  padding: 11px 13px; background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  flex-shrink: 0;
}
#cds-input {
  flex: 1;
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: 20px; padding: 9px 15px;
  font-size: 13.5px; font-family: var(--font); color: var(--c-text);
  outline: none; resize: none; overflow-y: auto;
  max-height: 100px; line-height: 1.45;
  transition: border-color .2s, box-shadow .2s;
}
#cds-input:empty:before { content: attr(data-ph); color: var(--c-muted); pointer-events: none; }
#cds-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent-08); }

#cds-send {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 10px !important;
  background: var(--c-accent);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0; line-height: 0;
  transition: transform .2s, opacity .2s, background .2s;
  outline: none;
}
#cds-send:hover  { transform: scale(1.08); background: var(--c-accent-deep); }
#cds-send:active { transform: scale(.9); }
#cds-send:disabled { opacity: .35; cursor: not-allowed; transform: none; }
#cds-send svg { width: 18px; height: 18px; fill: #fff; display: block; pointer-events: none; }

/* ── Mòbil ────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #cds-root { bottom: 60px; right: 80%; }
  #cds-window {
    position: fixed; top: 0; bottom: 0; left: 0; right: 0;
    width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0; transform-origin: bottom center;
  }
  #cds-footer { padding-bottom: calc(11px + env(safe-area-inset-bottom)); }
  #cds-root.open #cds-fab,
  #cds-root.open #cds-label { display: none; }
  html.cds-chat-open,
  html.cds-chat-open body { overflow: hidden !important; }
  #cds-label { display: none; }
  #cds-proactive { max-width: 220px; }
}

/* mode ocult al mòbil */
.cds-no-mobile #cds-root { display: none; }
@media (min-width: 769px) { .cds-no-mobile #cds-root { display: flex; } }