/* ═══════════════════════════════════════
   chatbot.css — Shapoorji Imperia Tardeo (MMR)
   Menu STAYS visible, convo appears below
   ═══════════════════════════════════════ */

.chat-fab {
  position:fixed; bottom:24px; right:24px; z-index:999999;
  width:58px; height:58px; border-radius:50%;
  background:#0b539b; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .22s;
  animation: popup 1s ease-in-out infinite;
}

@keyframes popup {
    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

.chat-fab:hover { transform:scale(1.08); }

.chat-win {
  position:fixed; bottom:92px; right:20px; z-index:9998;
  width:330px; background:#fff; border-radius:14px;
  box-shadow:0 12px 52px rgba(0,0,0,0.22);
  display:none; flex-direction:column; overflow:hidden;
  border:1px solid #e0dbd4; max-height:580px;
  animation:cwUp .26s ease;
}
@keyframes cwUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ── Header ── */
.cw-head {
  background:#0b539b; padding:14px 16px;
  display:flex; align-items:flex-start; gap:12px; flex-shrink:0;
}
.cw-av {
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px; flex-shrink:0;
}
.cw-agent-info { flex:1; }
.cw-agent-name { color:#fff; font-size:15px; font-weight:700; line-height:1.2; margin-bottom:4px; }
.cw-agent-msg  { color:rgba(255,255,255,.92); font-size:12.5px; line-height:1.45; }
.cw-close {
  background:none; border:none; color:rgba(255,255,255,.82);
  font-size:24px; cursor:pointer; line-height:1; flex-shrink:0; margin-top:-3px;
}
.cw-close:hover { color:#fff; }

/* ── Scrollable body: menu + convo together ── */
.cw-body {
  flex:1; overflow-y:auto; min-height:0;
  scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.08) transparent;
}
.cw-body::-webkit-scrollbar { width:4px; }
.cw-body::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:2px; }

/* ── Menu — ALWAYS visible ── */
.cw-menu { display:block; }

.cw-menu-item {
  display:flex; align-items:center; gap:14px;
  padding:13px 18px; border:none; border-bottom:1px solid #f0ebe4;
  background:#fff; width:100%; text-align:left;
  cursor:pointer; font-family:'Open Sans',sans-serif; transition:background .15s;
}
.cw-menu-item:last-child { border-bottom:none; }
.cw-menu-item:hover { background:#fdf8f4; }
/* selected/active state — greyed out with check */
.cw-menu-item.cw-selected { background:#fdf8f4; opacity:.55; pointer-events:none; }

.cw-menu-icon { width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#888; }
.cw-menu-label { flex:1; font-size:14px; font-weight:500; color:#1c1c1c; line-height:1.3; }
.cw-menu-arrow { color:#ccc; font-size:13px; flex-shrink:0; }

/* ── Conversation — appears BELOW menu ── */
.cw-convo {
  display:none; flex-direction:column; border-top:1px solid #e8e3db;
}
.cw-convo.active { display:flex; }

/* orange pill */
.cw-selected-pill {
  background:#d4621a; color:#fff;
  padding:10px 18px; font-size:13.5px; font-weight:600;
  font-family:'Open Sans',sans-serif; flex-shrink:0;
}

/* messages */
.cw-msgs {
  padding:12px 16px;
  display:flex; flex-direction:column; gap:8px;
  min-height:50px;
}
.cm-bot { align-self:flex-start; max-width:90%; }
.cm-usr { align-self:flex-end; max-width:90%; }
.cm-bbl { padding:9px 13px; border-radius:10px; font-size:13.5px; line-height:1.52; font-family:'Open Sans',sans-serif; }
.cm-bot .cm-bbl { background:#f5f0eb; color:#1c1c1c; border-bottom-left-radius:3px; }
.cm-usr .cm-bbl { background:#d4621a; color:#fff; border-bottom-right-radius:3px; }

/* typing */
.typing-b { display:inline-flex; gap:4px; padding:10px 13px; background:#f5f0eb; border-radius:10px; border-bottom-left-radius:3px; }
.typing-b span { width:6px; height:6px; border-radius:50%; background:#ccc; display:inline-block; animation:cwDot 1.2s infinite; }
.typing-b span:nth-child(2) { animation-delay:.2s; }
.typing-b span:nth-child(3) { animation-delay:.4s; }
@keyframes cwDot { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

/* ── Input Row — hidden until flow starts ── */
.cw-inp-row {
  display:none; padding:10px 12px; border-top:1px solid #ede9e3;
  align-items:center; gap:8px; background:#fff; flex-shrink:0;
}
.cw-inp-row.cw-inp-visible { display:flex; }

.cw-inp {
  flex:1; border:1.5px solid #ddd; border-radius:22px;
  padding:9px 15px; font-size:13.5px; outline:none;
  font-family:'Open Sans',sans-serif; color:#1c1c1c; background:#fff;
  transition:border-color .2s;
}
.cw-inp:focus { border-color:#d4621a; }
.cw-inp.cw-hidden { display:none; }

.cw-inp-phone-wrap {
  flex:1; display:none; align-items:center;
  border:1.5px solid #ddd; border-radius:22px; overflow:hidden;
  background:#fff; transition:border-color .2s;
}
.cw-inp-phone-wrap.cw-phone-visible { display:flex; }
.cw-inp-phone-wrap:focus-within { border-color:#d4621a; }

.cw-cc-inline {
  display:flex; align-items:center; gap:4px;
  padding:9px 8px 9px 13px; font-size:13px; font-weight:600; color:#333;
  font-family:'Open Sans',sans-serif; background:#faf8f5;
  border-right:1px solid #eee; flex-shrink:0; white-space:nowrap;
}
.cw-inp-phone {
  flex:1; border:none; outline:none; padding:9px 12px;
  font-size:13.5px; font-family:'Open Sans',sans-serif; color:#1c1c1c;
  background:transparent;
}

.cw-send {
  width:38px; height:38px; border-radius:50%;
  background:#d4621a; color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; transition:background .2s;
}
.cw-send:hover { background:#b8521a; }

.cw-restart-btn {
  background:#d4621a; color:#fff; border:none;
  width:100%; padding:10px 14px; border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer;
  font-family:'Open Sans',sans-serif; margin-top:6px;
}
.cw-restart-btn:hover { background:#b8521a; }

@media(max-width:600px){
  .chat-fab { bottom:90px; right:14px; width:52px; height:52px; }
  .chat-win {
    right:0; left:0; bottom:70px;
    width:100%; border-radius:20px 20px 0 0;
    max-height:82vh; max-height:82svh;
  }
  .cw-head { padding:12px 14px; }
  .cw-av { width:40px; height:40px; font-size:18px; }
  .cw-agent-name { font-size:14px; }
  .cw-agent-msg  { font-size:12px; }
  .cw-menu-item  { padding:12px 16px; }
  .cw-menu-label { font-size:13.5px; }
}