/* ══════════════════════════════════════════════════════════════
   CONCIERGE WIDGET — Assistente AI · Elements Guest House Roma
   ══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
#concierge-widget {
  --c-fab-bg:      #C49A3C;
  --c-fab-hover:   #ad872f;
  --c-panel-bg:    #ffffff;
  --c-header-bg:   #1a1a1a;
  --c-header-text: #ffffff;
  --c-msg-user:    #C49A3C;
  --c-msg-user-t:  #ffffff;
  --c-msg-bot:     #f5f0e8;
  --c-msg-bot-t:   #1a1a1a;
  --c-pill-bg:     #faf7f0;
  --c-pill-hover:  #f5f0e8;
  --c-pill-text:   #5a4a2a;
  --c-pill-border: #e8dfc8;
  --c-input-bg:    #faf7f0;
  --c-input-bdr:   #e8dfc8;
  --c-send-bg:     #C49A3C;
  --c-send-hover:  #ad872f;
  --c-shadow:      0 8px 32px rgba(0,0,0,0.14);
  --radius-panel:  16px;
  --radius-msg:    12px;
  --font-title:    'Lora', Georgia, serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── FAB ─────────────────────────────────────────────────────── */
.concierge-fab {
  position:         fixed;
  bottom:           24px;
  right:            24px;
  z-index:          9999;
  width:            56px;
  height:           56px;
  border-radius:    50%;
  background:       var(--c-fab-bg);
  color:            #fff;
  border:           none;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  box-shadow:       0 4px 18px rgba(196,154,60,0.40);
  transition:       background 0.2s, transform 0.2s;
}
.concierge-fab:hover  { background: var(--c-fab-hover); transform: scale(1.07); }
.concierge-fab:active { transform: scale(0.96); }

.concierge-fab__icon--close { display: none; }
.concierge-fab--open .concierge-fab__icon--open  { display: none; }
.concierge-fab--open .concierge-fab__icon--close { display: block; }

/* ── Panel ───────────────────────────────────────────────────── */
.concierge-panel {
  position:        fixed;
  bottom:          90px;
  right:           24px;
  z-index:         9998;
  width:           360px;
  max-width:       calc(100vw - 32px);
  border-radius:   var(--radius-panel);
  background:      var(--c-panel-bg);
  box-shadow:      var(--c-shadow);
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  transform:       translateY(12px) scale(0.96);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.22s ease, transform 0.22s ease;
  font-family:     var(--font-body);
  max-height:      calc(100svh - 120px);
}
.concierge-panel--open {
  opacity:         1;
  transform:       translateY(0) scale(1);
  pointer-events:  all;
}

/* ── Header ──────────────────────────────────────────────────── */
.concierge-panel__header {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         14px 16px;
  background:      var(--c-header-bg);
  color:           var(--c-header-text);
  flex-shrink:     0;
}
.concierge-panel__avatar {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  background:      #C49A3C;
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
  font-size:       15px;
  font-family:     var(--font-title);
  flex-shrink:     0;
}
.concierge-panel__title {
  font-size:       15px;
  font-weight:     600;
  line-height:     1.2;
  font-family:     var(--font-title);
}
.concierge-panel__sub {
  font-size:       11px;
  opacity:         0.65;
  line-height:     1.2;
  font-family:     var(--font-body);
}
.concierge-panel__close {
  margin-left:     auto;
  background:      none;
  border:          none;
  color:           rgba(255,255,255,0.55);
  cursor:          pointer;
  padding:         4px;
  flex-shrink:     0;
  line-height:     0;
  transition:      color 0.15s;
}
.concierge-panel__close:hover { color: #fff; }

/* ── Messages ────────────────────────────────────────────────── */
.concierge-panel__messages {
  flex:            1;
  overflow-y:      auto;
  padding:         14px 14px 6px;
  display:         flex;
  flex-direction:  column;
  gap:             8px;
  min-height:      250px;
  scroll-behavior: smooth;
}
.concierge-panel__messages { scrollbar-width: none; }
.concierge-panel__messages::-webkit-scrollbar { display: none; }

.concierge-msg {
  max-width:       85%;
  padding:         9px 12px;
  border-radius:   var(--radius-msg);
  font-size:       15px;
  line-height:     1.7;
  word-break:      break-word;
  animation:       msgFadeIn 0.2s ease;
  font-family:     var(--font-body);
}
@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.concierge-msg--user {
  align-self:      flex-end;
  background:      var(--c-msg-user);
  color:           var(--c-msg-user-t);
  border-bottom-right-radius: 4px;
}
.concierge-msg--model {
  align-self:      flex-start;
  background:      var(--c-msg-bot);
  color:           var(--c-msg-bot-t);
  border-bottom-left-radius: 4px;
}

.concierge-msg--model a.chat-link {
  color:           var(--color-ocra, #C49A3C);
  text-decoration: underline;
  word-break:      break-all;
}

/* ── Typing indicator ────────────────────────────────────────── */
.concierge-msg--typing {
  display:         flex;
  align-items:     center;
  gap:             4px;
  padding:         10px 14px;
}
.concierge-msg--typing span {
  width:           7px;
  height:          7px;
  border-radius:   50%;
  background:      #c4a96a;
  animation:       typingBounce 1.2s ease-in-out infinite;
}
.concierge-msg--typing span:nth-child(2) { animation-delay: 0.2s; }
.concierge-msg--typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-6px); }
}

/* ── Pills ───────────────────────────────────────────────────── */
.concierge-panel__pills {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   6px;
  padding:               6px 14px 2px;
  flex-shrink:           0;
}
.concierge-pill {
  background:      var(--c-pill-bg);
  color:           var(--c-pill-text);
  border:          1px solid var(--c-pill-border);
  border-radius:   20px;
  padding:         6px 10px;
  font-size:       12px;
  font-weight:     500;
  font-family:     var(--font-body);
  cursor:          pointer;
  transition:      background 0.15s, border-color 0.15s, color 0.15s;
  text-align:      center;
  white-space:     normal;
}
.concierge-pill:hover {
  background:      var(--c-pill-hover);
  border-color:    #C49A3C;
  color:           #C49A3C;
}

/* ── Turnstile (invisible) ───────────────────────────────────── */
#concierge-turnstile {
  height:          0;
  overflow:        hidden;
}

/* ── Input form ──────────────────────────────────────────────── */
.concierge-panel__form {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         10px 12px;
  border-top:      1px solid var(--c-input-bdr);
  flex-shrink:     0;
}
.concierge-panel__input {
  flex:            1;
  border:          1px solid var(--c-input-bdr);
  border-radius:   20px;
  padding:         8px 14px;
  font-size:       16px; /* ≥16px previene zoom automatico su iOS */
  background:      var(--c-input-bg);
  color:           #1a1a1a;
  outline:         none;
  transition:      border-color 0.15s;
  font-family:     var(--font-body);
}
.concierge-panel__input:focus { border-color: #C49A3C; }
.concierge-panel__input::placeholder { color: #b0a080; }
textarea.concierge-panel__input { resize: none; overflow-y: hidden; max-height: 120px; line-height: 1.5; padding-top: 9px; }
.concierge-panel__form { align-items: flex-end; }

.concierge-panel__send {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      var(--c-send-bg);
  color:           #fff;
  border:          none;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      background 0.15s;
  line-height:     0;
}
.concierge-panel__send:hover    { background: var(--c-send-hover); }
.concierge-panel__send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── FAQ inline CTA ─────────────────────────────────────────── */
.faq-concierge-cta {
  display:         flex;
  align-items:     center;
  gap:             16px;
  background:      #faf7f0;
  border:          1px solid #e8dfc8;
  border-radius:   12px;
  padding:         18px 20px;
  margin:          24px 0;
  font-family:     var(--font-body);
}
.faq-concierge-cta__icon {
  font-size:       28px;
  flex-shrink:     0;
}
.faq-concierge-cta strong {
  display:         block;
  font-size:       14px;
  font-weight:     600;
  color:           #1a1a1a;
  margin-bottom:   4px;
  font-family:     var(--font-title);
}
.faq-concierge-cta p {
  font-size:       13px;
  color:           #6b5a3a;
  margin:          0;
  line-height:     1.45;
}
.faq-concierge-cta__btn {
  margin-left:     auto;
  flex-shrink:     0;
  background:      #C49A3C;
  color:           #fff;
  border:          none;
  border-radius:   20px;
  padding:         9px 18px;
  font-size:       13px;
  font-weight:     600;
  font-family:     var(--font-body);
  cursor:          pointer;
  transition:      background 0.15s;
  white-space:     nowrap;
}
.faq-concierge-cta__btn:hover { background: #ad872f; }
@media (max-width: 560px) {
  .faq-concierge-cta { flex-wrap: wrap; }
  .faq-concierge-cta__btn { margin-left: 0; }
}

/* ── Book bar ────────────────────────────────────────────────── */
.concierge-book-bar {
  padding:         8px 12px;
  text-align:      center;
  flex-shrink:     0;
  background:      #fafafa;
  border-top:      1px solid #f0f0f0;
}
.concierge-book-link {
  display:         inline-block;
  background:      #C49A3C;
  color:           #fff;
  text-decoration: none;
  border-radius:   20px;
  padding:         7px 20px;
  font-size:       13px;
  font-weight:     600;
  font-family:     var(--font-body);
  letter-spacing:  0.01em;
  transition:      background 0.15s;
}
.concierge-book-link:hover { background: #ad872f; color: #fff; }

.concierge-book-link.pulse {
  animation: pulse-gold 0.6s ease-in-out 3;
}
@keyframes pulse-gold {
  0%, 100% { transform: scale(1);    box-shadow: none; }
  50%       { transform: scale(1.05); box-shadow: 0 0 12px rgba(196,154,60,0.4); }
}

/* ── Panel footer ────────────────────────────────────────────── */
.concierge-panel__footer {
  padding:         6px 16px 8px;
  text-align:      center;
  font-size:       10px;
  font-family:     var(--font-body, 'Inter', sans-serif);
  color:           #aaa;
  letter-spacing:  0.02em;
  border-top:      1px solid #f0f0f0;
  background:      #fafafa;
  border-radius:   0 0 16px 16px;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .concierge-fab { bottom: 16px; right: 16px; }

  .concierge-panel {
    position:      fixed;
    top:           0;
    left:          0;
    right:         0;
    bottom:        0;
    width:         100%;
    height:        100vh;
    height:        100dvh;
    max-width:     100%;
    max-height:    100dvh;
    min-height:    0;
    border-radius: 0;
    z-index:       9999;
    will-change:   height, top;
    transition:    none; /* No animation during keyboard resize */
  }

  /* Prevent body scroll when chat is open on iOS */
  body.concierge-open {
    overflow: hidden;
    position: fixed;
    width:    100%;
    height:   100%;
  }

  .concierge-panel__messages {
    flex:                       1;
    min-height:                 0;
    overflow-y:                 auto;
    -webkit-overflow-scrolling: touch;
  }

  .concierge-panel__header {
    position: sticky;
    top:      0;
    z-index:  10;
    padding:  12px 16px;
  }

  .concierge-panel__close {
    width:     44px;
    height:    44px;
    min-width: 44px;
    font-size: 1.2rem;
  }

  .concierge-panel__form {
    position:       sticky;
    bottom:         0;
    padding-bottom: env(safe-area-inset-bottom, 20px);
  }

  .concierge-panel__pills {
    padding: 8px 12px;
  }

  .concierge-pill {
    font-size:       0.82rem;
    padding:         8px 12px;
    min-height:      44px;
    display:         flex;
    align-items:     center;
    justify-content: center;
  }

  .concierge-book-link {
    min-height:      44px;
    display:         flex;
    align-items:     center;
    justify-content: center;
  }

  .concierge-panel__footer {
    border-radius: 0;
  }
}