/* Basis container en bubble */
#cca-root { position: fixed; right:25px; bottom:80px; z-index: 9999; font-family:"gtflexastandardreg"; }
/* Bubble rechtsonder */
#cca-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  cursor: pointer;
  overflow: hidden; /* avatar netjes rond */
  padding: 0;
}
#cca-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Header bovenin venster */
#cca-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
}

#cca-head-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.cca-head-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cca-head-title {
  font-weight: 700;
  font-size: 15px;
  color: #111;
}

.cca-head-sub {
  font-size: 12px;
  color: #666;
}


/* Venster met vaste hoogte en scroll in de berichtenlijst */
#cca-win {
  position: relative;
  width: 360px; height: 500px;   /* desktop hoogte */
  background:#fff; border-radius: 14px;
  box-shadow:0 20px 50px rgba(0,0,0,.2);
  display:none; flex-direction: column; overflow:hidden;
}

#cca-head { padding:12px 14px; border-bottom:1px solid #eee; font-weight:700; }

#cca-msgs {
  flex: 1;
  padding:12px;
  overflow-y: auto;               /* scrollbar */
  display:flex; flex-direction:column; gap:8px;
}

.cca-bub.bot .cca-cta {
  display:inline-block;
  background:#a02aba;
  color:#fff;
  font-weight:600;
  padding:6px 12px;
  margin-top:6px;
  border-radius:20px;
  text-decoration:none;
  transition:background .2s;
}
.cca-bub.bot .cca-cta:hover { background:#002169; }
/* Bubbels */
.cca-bub { padding:10px 12px; border-radius:12px; line-height:1.35; }
.cca-bub.user { background:#002169; color:#fff; align-self:flex-end; }
.cca-bub.bot  { background:#f5f5f5; color:#111; align-self:flex-start; white-space:pre-wrap; }

/* Linkjes in bot-bubbels als button */
.cca-bub.bot a {
  display: inline-block;
  background: #a02aba;      /* fel rood Festival Circolo vibe, pas gerust aan */
  color: #fff;
  font-weight: 600;
  padding: 6px 12px;
  margin-top: 6px;
  border-radius: 20px;
  text-decoration: none;
  transition: background .2s ease;
}

.cca-bub.bot a:hover {
  background: #002169;
  color:#FFF;
}

.cca-bub.bot a:hover::after { width:0 !important; }

.cca-bub.bot .cca-ticket-line { display: inline-block; margin-top: 6px; }

.cca-bub.bot .cca-cover{
  margin-top:8px;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:10px;
}
.cca-bub.bot .cca-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cca-bub.bot .cca-title{
  font-weight: 700;
  margin: 2px 0 4px;
}
/* Inputbalk */
#cca-input { display:flex; gap:8px; padding:12px; border-top:1px solid #eee; }
#cca-input input { flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:10px; }
#cca-input button { padding:10px 14px; border:0; border-radius:10px; background:#111; color:#fff; cursor:pointer; }

/* Close knop */
#cca-close {
  position: absolute; top: 8px; right: 8px;
  background: transparent; border: none; font-size: 20px;
  cursor: pointer; color: #666;
}
#cca-close:hover { color: #000; }

/* Quick replies */
.cca-qr { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.cca-qr button { border:1px solid #ddd; background:#fff; padding:6px 10px; border-radius:999px; cursor:pointer; }
.cca-qr button:hover { border-color:#bbb; }

/* Typ-indicator */
.cca-typing { display:flex; align-items:center; gap:8px; color:#666; font-size:.9em; }
.cca-dots { display:inline-block; width:24px; text-align:left; }
.cca-dots span { display:inline-block; opacity:.2; animation: cca-bounce 1.2s infinite; }
.cca-dots span:nth-child(2) { animation-delay: .2s; }
.cca-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cca-bounce { 0%, 80%, 100% { opacity:.2; } 40% { opacity:1; } }

/* Scrollbar subtieler, alleen waar ondersteund */
#cca-msgs::-webkit-scrollbar { width: 8px; }
#cca-msgs::-webkit-scrollbar-track { background: transparent; }
#cca-msgs::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 8px; }
#cca-msgs { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.15) transparent; }

/* Responsief: 200px hoog op tablet en mobiel */
@media (max-width: 1024px) {
  #cca-win { height: 300px; width: 95%; right: 2.5%; }
}

@media (max-width: 768px) {
  #cca-root {
    right: 5%;     /* iets meer marge rechts */
    bottom: 20px;  /* iets hoger van de rand */
    width: 90%;    /* root breedte volgt venster breedte */
  }

  #cca-win {
    width: 100%;   /* pakt dan de volle breedte van root */
    height: 380px;
    bottom: auto;  /* root regelt nu de bottom spacing */
  }
}