/* ==========================================================================
   CHAPHUTS AI CONCIERGE — Widget Styles
   ========================================================================== */
#ai-concierge{position:fixed;right:1.6rem;bottom:1.6rem;z-index:950;font-family:var(--font-body);display:flex;align-items:center;gap:.7rem;}

/* ---------- Toggle label ---------- */
.ai-toggle-label{
  background:var(--forest-deep);color:var(--white);padding:.65em 1.1em;border-radius:100px;
  font-family:var(--font-label);font-size:.8rem;font-weight:600;white-space:nowrap;
  box-shadow:0 10px 24px -10px rgba(11,46,34,.5);
  animation:ai-label-float 3.2s ease-in-out infinite;
}
#ai-concierge.open .ai-toggle-label{opacity:0;visibility:hidden;transform:translateX(6px);}
@keyframes ai-label-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@media (max-width:480px){
  .ai-toggle-label{display:none;}
}

/* ---------- Toggle button ---------- */
#ai-concierge-toggle{
  width:58px;height:58px;border-radius:50%;border:0;position:relative;
  background:linear-gradient(155deg,var(--orange),var(--orange-deep));
  color:var(--white);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -10px rgba(226,103,42,.55);
  transition:transform var(--fast) var(--ease);
}
#ai-concierge-toggle:hover{transform:translateY(-3px) scale(1.04);}
#ai-concierge-toggle .icon-open,#ai-concierge-toggle .icon-close{
  position:absolute;font-size:1.35rem;transition:opacity .2s var(--ease), transform .2s var(--ease);
}
#ai-concierge-toggle .icon-close{opacity:0;transform:scale(.6) rotate(-45deg);}
#ai-concierge.open #ai-concierge-toggle .icon-open{opacity:0;transform:scale(.6) rotate(45deg);}
#ai-concierge.open #ai-concierge-toggle .icon-close{opacity:1;transform:scale(1) rotate(0);}

.ping{
  position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;
  background:var(--forest);border:2px solid var(--white);
}
.ping::after{
  content:'';position:absolute;inset:0;border-radius:50%;background:var(--forest);
  animation:ai-ping 2.2s ease-out infinite;
}
@keyframes ai-ping{0%{transform:scale(1);opacity:.7;}100%{transform:scale(2.4);opacity:0;}}

#ai-concierge.bounce #ai-concierge-toggle{animation:ai-bounce 1.8s ease-in-out;}
@keyframes ai-bounce{0%,100%{transform:translateY(0);}20%{transform:translateY(-10px);}40%{transform:translateY(0);}60%{transform:translateY(-6px);}80%{transform:translateY(0);}}

/* ---------- Panel ---------- */
#ai-concierge-panel{
  position:absolute;right:0;bottom:74px;width:380px;max-width:calc(100vw - 2rem);
  height:min(600px,72vh);background:var(--white);border-radius:20px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.4);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:bottom right;
  transition:all .3s var(--ease);
}
#ai-concierge.open #ai-concierge-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1);}

.ai-panel-header{
  background:var(--forest-deep);color:var(--white);padding:1.1rem 1.2rem;
  display:flex;align-items:center;gap:.8rem;flex-shrink:0;
}
.ai-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ai-avatar img{width:20px;height:20px;}
.ai-header-text{flex:1;min-width:0;}
.ai-header-text h4{color:var(--white);margin:0;font-size:.98rem;font-family:var(--font-label);font-weight:600;}
.ai-header-text span{font-size:.74rem;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:.4em;}
.ai-status-dot{width:7px;height:7px;border-radius:50%;background:#3ECF8E;display:inline-block;}
.ai-panel-close{background:none;border:0;color:rgba(255,255,255,.75);font-size:1rem;padding:.4rem;}
.ai-panel-close:hover{color:var(--white);}

.ai-panel-body{
  flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:1rem;
  background:var(--cream);
}
.ai-msg{display:flex;gap:.6rem;align-items:flex-end;max-width:92%;}
.ai-msg-bot{align-self:flex-start;}
.ai-msg-user{align-self:flex-end;flex-direction:row-reverse;}
.ai-msg-avatar{width:26px;height:26px;border-radius:50%;background:var(--forest-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ai-msg-avatar img{width:14px;height:14px;}
.ai-bubble{
  padding:.75em 1em;border-radius:14px;font-size:.86rem;line-height:1.55;
  background:var(--white);color:var(--ink);box-shadow:0 4px 14px -8px rgba(0,0,0,.15);
}
.ai-msg-bot .ai-bubble{border-bottom-left-radius:4px;}
.ai-msg-user .ai-bubble{background:var(--forest-deep);color:var(--white);border-bottom-right-radius:4px;}
.ai-bubble a{color:var(--orange);text-decoration:underline;}
.ai-msg-user .ai-bubble a{color:var(--orange-light);}
.ai-bubble b{color:var(--forest-deep);}
.ai-msg-user .ai-bubble b{color:var(--white);}

.ai-typing{display:flex;gap:4px;padding:.9em 1em;align-items:center;}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--gray-400);animation:ai-typing-bounce 1.2s infinite ease-in-out;}
.ai-typing span:nth-child(2){animation-delay:.15s;}
.ai-typing span:nth-child(3){animation-delay:.3s;}
@keyframes ai-typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}

/* ---------- Cards inside bot bubbles (typology result) ---------- */
.ai-card{background:var(--forest-mist);border-radius:12px;padding:.9em 1em;margin-top:.2em;}
.ai-card-title{font-family:var(--font-label);font-weight:700;font-size:.86rem;color:var(--forest-deep);}
.ai-card-meta{font-size:.76rem;color:var(--gray-600);margin-top:.15em;}
.ai-card-price{font-family:var(--font-display);font-size:1.15rem;color:var(--orange-deep);margin:.3em 0;}
.ai-card-link{font-family:var(--font-label);font-size:.78rem;font-weight:600;color:var(--forest) !important;text-decoration:none !important;}
.ai-card-link:hover{color:var(--orange) !important;}

/* ---------- Quick reply chips ---------- */
.ai-quick-replies{
  display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1.2rem .9rem;flex-shrink:0;background:var(--cream);
}
.ai-chip{
  padding:.5em 1em;border-radius:100px;border:1px solid var(--gray-200);background:var(--white);
  font-family:var(--font-label);font-size:.75rem;font-weight:600;color:var(--forest);
  transition:all var(--fast) var(--ease);
}
.ai-chip:hover{background:var(--forest-deep);color:var(--white);border-color:var(--forest-deep);}

/* ---------- Input ---------- */
.ai-panel-input{
  display:flex;gap:.6rem;padding:.9rem 1.1rem;border-top:1px solid var(--gray-200);flex-shrink:0;background:var(--white);
}
.ai-panel-input input{
  flex:1;border:1px solid var(--gray-200);border-radius:100px;padding:.7em 1.1em;
  font-size:.85rem;background:var(--gray-100);
}
.ai-panel-input input:focus{outline:0;border-color:var(--forest);background:var(--white);}
.ai-panel-input button{
  width:42px;height:42px;border-radius:50%;background:var(--orange);border:0;color:var(--white);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--fast);
}
.ai-panel-input button:hover{background:var(--orange-deep);}
.ai-panel-footer{font-size:.66rem;color:var(--gray-600);text-align:center;padding:.5rem 1rem .8rem;background:var(--white);flex-shrink:0;}
.ai-panel-footer a{color:var(--forest);text-decoration:underline;}

/* ---------- Responsive ---------- */
@media (max-width:480px){
  #ai-concierge{right:1rem;bottom:1rem;}
  #ai-concierge-panel{
    position:fixed;right:.6rem;left:.6rem;bottom:5rem;width:auto;max-width:none;height:70vh;
  }
}