/* ==========================================================================
   PM Infotech — Support Chat Widget
   Self-hosted, no third-party service. Drop into /static/css/.
   ========================================================================== */

:root{
  --pmc-navy-900:#0B1B30;
  --pmc-navy-800:#122b4a;
  --pmc-navy-700:#1c3d63;
  --pmc-amber:#E8A33D;
  --pmc-amber-dark:#c8862a;
  --pmc-ink:#0B1B30;
  --pmc-paper:#F4F6F9;
  --pmc-white:#FFFFFF;
  --pmc-online:#34C77B;
  --pmc-radius:14px;
  --pmc-font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#pmc-root{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:99999;
  font-family:var(--pmc-font);
  --pmc-open: 0;
}

/* ---- Launcher button ---- */
#pmc-launcher{
  width:60px;
  height:60px;
  border-radius:50%;
  background:linear-gradient(155deg, var(--pmc-navy-800), var(--pmc-navy-900));
  box-shadow:0 10px 26px rgba(11,27,48,.35);
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
#pmc-launcher:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(11,27,48,.42); }
#pmc-launcher svg{ width:26px; height:26px; }
#pmc-launcher .pmc-dot{
  position:absolute;
  top:2px; right:2px;
  width:13px; height:13px;
  border-radius:50%;
  background:var(--pmc-online);
  border:2px solid var(--pmc-white);
}

/* ---- Panel ---- */
#pmc-panel{
  position:absolute;
  right:0;
  bottom:76px;
  width:360px;
  max-width:calc(100vw - 44px);
  height:520px;
  max-height:calc(100vh - 140px);
  background:var(--pmc-white);
  border-radius:var(--pmc-radius);
  box-shadow:0 20px 48px rgba(11,27,48,.28);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  opacity:0;
  transform:translateY(14px) scale(.98);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
#pmc-root.pmc-open #pmc-panel{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* ---- Header ---- */
#pmc-header{
  background:var(--pmc-navy-900);
  color:var(--pmc-white);
  padding:16px 16px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
#pmc-header .pmc-avatar{
  width:38px; height:38px;
  border-radius:10px;
  background:var(--pmc-amber);
  color:var(--pmc-navy-900);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  font-size:15px;
  flex-shrink:0;
}
#pmc-header .pmc-head-text{ flex:1; min-width:0; }
#pmc-header .pmc-title{ font-size:14.5px; font-weight:600; line-height:1.25; }
#pmc-header .pmc-sub{ font-size:12px; color:#9FB3CC; display:flex; align-items:center; gap:5px; margin-top:1px; }
#pmc-header .pmc-sub .pmc-online-dot{ width:7px; height:7px; border-radius:50%; background:var(--pmc-online); display:inline-block; }
#pmc-close{
  background:none; border:none; cursor:pointer; color:#B8C6DA;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:8px;
}
#pmc-close:hover{ background:rgba(255,255,255,.08); color:var(--pmc-white); }

/* ---- Message thread ---- */
#pmc-thread{
  flex:1;
  overflow-y:auto;
  padding:16px 14px;
  background:var(--pmc-paper);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pmc-row{ display:flex; }
.pmc-row.pmc-bot{ justify-content:flex-start; }
.pmc-row.pmc-user{ justify-content:flex-end; }

.pmc-bubble{
  max-width:82%;
  padding:10px 13px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.45;
  white-space:pre-wrap;
}
.pmc-bot .pmc-bubble{
  background:var(--pmc-white);
  color:var(--pmc-ink);
  border:1px solid #E3E9F0;
  border-bottom-left-radius:4px;
}
.pmc-user .pmc-bubble{
  background:var(--pmc-navy-900);
  color:var(--pmc-white);
  border-bottom-right-radius:4px;
}

.pmc-typing .pmc-bubble{ display:flex; gap:4px; align-items:center; padding:12px 14px; }
.pmc-typing .pmc-tdot{
  width:6px; height:6px; border-radius:50%; background:#9AA7B8;
  animation:pmc-bounce 1.1s infinite ease-in-out;
}
.pmc-typing .pmc-tdot:nth-child(2){ animation-delay:.15s; }
.pmc-typing .pmc-tdot:nth-child(3){ animation-delay:.3s; }
@keyframes pmc-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-3px); opacity:1; } }

/* ---- Quick replies ---- */
#pmc-quick{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:0 14px 12px;
  background:var(--pmc-paper);
  flex-shrink:0;
}
.pmc-chip{
  border:1.5px solid var(--pmc-navy-700);
  color:var(--pmc-navy-800);
  background:var(--pmc-white);
  border-radius:999px;
  padding:6px 12px;
  font-size:12.5px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
  font-family:var(--pmc-font);
}
.pmc-chip:hover{ background:var(--pmc-navy-900); color:var(--pmc-white); }

/* ---- Contact icons row (call / WhatsApp / email / social) ---- */
#pmc-contact{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  background:var(--pmc-white);
  border-top:1px solid #E3E9F0;
  flex-shrink:0;
}
.pmc-contact-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--pmc-paper);
  border:1px solid #E3E9F0;
  color:var(--pmc-navy-800);
  text-decoration:none;
  transition:background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.pmc-contact-btn svg{ width:16px; height:16px; }
.pmc-contact-btn:hover{
  background:var(--pmc-navy-900);
  border-color:var(--pmc-navy-900);
  color:var(--pmc-white);
  transform:translateY(-2px);
}
/* WhatsApp gets its brand-ish green on hover so it's instantly recognizable */
.pmc-contact-btn.pmc-whatsapp:hover{ background:#25D366; border-color:#25D366; color:#fff; }

/* ---- Input ---- */
#pmc-inputbar{
  border-top:1px solid #E3E9F0;
  padding:10px;
  display:flex;
  gap:8px;
  background:var(--pmc-white);
  flex-shrink:0;
}
#pmc-input{
  flex:1;
  border:1.5px solid #DCE3EC;
  border-radius:10px;
  padding:10px 12px;
  font-size:13.5px;
  font-family:var(--pmc-font);
  resize:none;
  outline:none;
}
#pmc-input:focus{ border-color:var(--pmc-navy-700); }
#pmc-send{
  width:40px; height:40px; flex-shrink:0;
  border-radius:10px;
  border:none;
  background:var(--pmc-amber);
  color:var(--pmc-navy-900);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
#pmc-send:hover{ background:var(--pmc-amber-dark); }
#pmc-send svg{ width:17px; height:17px; }

/* ---- Footer note ---- */
#pmc-footer{
  text-align:center;
  font-size:10.5px;
  color:#9AA7B8;
  padding:6px 0 9px;
  background:var(--pmc-white);
  flex-shrink:0;
}

/* ---- Scrollbar ---- */
#pmc-thread::-webkit-scrollbar{ width:6px; }
#pmc-thread::-webkit-scrollbar-thumb{ background:#C7D2E0; border-radius:6px; }

/* ---- Mobile ---- */
@media (max-width:480px){
  #pmc-root{ right:12px; bottom:12px; }
  #pmc-panel{ width:calc(100vw - 24px); height:calc(100vh - 110px); bottom:74px; }
}