/* [hidden] must beat the display:flex rules above (UA rule loses to authors) */
.ciao-chat__window[hidden],
.ciao-chat__teaser[hidden] {
  display: none !important;
}

/* ---------- Live chat widget (config-driven, presets via body of settings) ---------- */
.ciao-chat { position: fixed; z-index: 180; font-family: inherit; }
.ciao-chat--right { right: 22px; bottom: 22px; }
.ciao-chat--left { left: 22px; bottom: 22px; }

.ciao-chat__bubble {
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .25s var(--ease-lux, ease), box-shadow .25s ease;
}
.ciao-chat__bubble:hover { transform: translateY(-2px); }
.ciao-chat__bubble.is-open svg { transform: rotate(90deg); }

/* shapes */
.ciao-chat--circle .ciao-chat__bubble { width: 56px; height: 56px; border-radius: 50%; }
.ciao-chat--square .ciao-chat__bubble { width: 56px; height: 56px; border-radius: 12px; }
.ciao-chat--pill .ciao-chat__bubble { height: 46px; padding: 0 20px; border-radius: 999px; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }

/* sizes */
.ciao-chat--sm .ciao-chat__bubble { width: 46px; height: 46px; }
.ciao-chat--lg .ciao-chat__bubble { width: 64px; height: 64px; }

/* presets */
.ciao-chat--espresso .ciao-chat__bubble { background: #2b1d12; border: 1px solid #c9a45c; color: #e9d9b8; }
.ciao-chat--midnight .ciao-chat__bubble { background: #011b31; color: #fff; }
.ciao-chat--ivory .ciao-chat__bubble { background: #f5efe3; color: #2b1d12; border: 1px solid #c9a45c; }
.ciao-chat--bronze-outline .ciao-chat__bubble { background: transparent; border: 2px solid #c9a45c; color: #c9a45c; backdrop-filter: blur(4px); }

/* attention */
.ciao-chat__bubble--pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid #c9a45c; animation: ciaoPulse 1.8s ease-out infinite;
}
@keyframes ciaoPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.ciao-chat__bubble--bounce { animation: ciaoBounce .9s var(--ease-lux, ease) 1; }
@keyframes ciaoBounce { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-10px); } 60% { transform: translateY(-4px); } }
.ciao-chat__bubble--dot { position: relative; }
.ciao-chat__bubble--dot::before {
  content: ""; position: absolute; top: -2px; right: -2px; width: 14px; height: 14px;
  border-radius: 50%; background: #e0533d; border: 2px solid #fff;
}

.ciao-chat__teaser {
  position: absolute; bottom: 72px; right: 0; max-width: 220px;
  background: #fff; color: #2b1d12; padding: 10px 14px; border-radius: 12px;
  font-size: .85rem; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.ciao-chat--left .ciao-chat__teaser { right: auto; left: 0; }

/* window */
.ciao-chat__window {
  position: absolute; bottom: 84px; right: 0;
  width: 340px; max-width: calc(100vw - 32px); height: 460px; max-height: 66vh;
  background: #fff; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  border: 1px solid rgba(0,0,0,.08);
}
.ciao-chat--left .ciao-chat__window { right: auto; left: 0; }

.ciao-chat__head {
  background: #2b1d12; color: #f5efe3; padding: 16px 18px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.ciao-chat__greet { margin: 0; font-weight: 600; font-size: 1rem; }
.ciao-chat__sub { margin: 4px 0 0; font-size: .8rem; opacity: .8; }
.ciao-chat__close { background: none; border: none; color: inherit; font-size: 1.4rem; cursor: pointer; line-height: 1; }

.ciao-chat__log { flex: 1; overflow-y: auto; padding: 14px; background: #faf6ee; display: flex; flex-direction: column; gap: 8px; }
.ciao-chat__row { display: flex; }
.ciao-chat__row--visitor { justify-content: flex-end; }
.ciao-chat__row--operator, .ciao-chat__row--system { justify-content: flex-start; }
.ciao-chat__msg { max-width: 80%; padding: 9px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45; background: #2b1d12; color: #fff; }
.ciao-chat__row--visitor .ciao-chat__msg { background: #c9a45c; color: #221507; }
.ciao-chat__sys { text-align: center; font-size: .75rem; color: #8a7a63; margin: 2px 0; }

.ciao-chat__form { display: flex; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid rgba(0,0,0,.06); }
.ciao-chat__input { flex: 1; border: 1px solid #ddd; border-radius: 999px; padding: 10px 16px; font: inherit; font-size: .9rem; outline: none; }
.ciao-chat__input:focus { border-color: #c9a45c; }
.ciao-chat__send { width: 42px; height: 42px; border-radius: 50%; border: none; background: #c9a45c; color: #221507; cursor: pointer; font-size: 1rem; }

@media (max-width: 640px) {
  .ciao-chat__window { position: fixed; inset: 0; width: auto; height: auto; max-height: none; border-radius: 0; }
  .ciao-chat--right .ciao-chat__window, .ciao-chat--left .ciao-chat__window { right: 0; left: 0; bottom: 0; }
}

/* booking link UI */
.ciao-chat__linktoggle {
  background: none; border: none; cursor: pointer;
  font-size: .75rem; color: #8a7a63; text-align: left;
  padding: 2px 14px 6px;
}
.ciao-chat__linktoggle:hover { color: #2b1d12; text-decoration: underline; }
.ciao-chat__linkform { display: flex; gap: 6px; padding: 0 10px 10px; background: #fff; }
.ciao-chat__linkform[hidden] { display: none !important; }
.ciao-chat__bkref {
  flex: 1; border: 1px dashed #c9a45c; border-radius: 8px;
  padding: 7px 10px; font-size: .8rem; outline: none;
}
.ciao-chat__linkform button {
  border: none; background: #2b1d12; color: #e9d9b8;
  border-radius: 8px; padding: 0 12px; font-size: .8rem; cursor: pointer;
}