/* PMM Support Chat v4 — Frontend
   Design: Navy + Green  |  Font: Outfit
   Primary nav: #0D2054  |  Brand green: #009E4D */
:root{
  --pmm:#009E4D;--pmm-a:#00C853;
  --navy:#0D2054;--navy-d:#091740;--navy-l:#1e3a7e;
  --pmm-l:auto;--pmm-r:24px;
  --bg:#ffffff;--sf:#F4F7FB;--bd:#E4EAF3;
  --tx:#0D2054;--tx2:#4A5C82;--tx3:#8A97B5;
  --fn:'Outfit',system-ui,-apple-system,sans-serif;
}

/* ── FAB ─────────────────────────────────────────── */
#pmm-fab{
  position:fixed;bottom:28px;right:var(--pmm-r);left:var(--pmm-l);
  width:58px;height:58px;background:var(--navy);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:99999;
  box-shadow:0 6px 24px rgba(13,32,84,.42),0 2px 8px rgba(13,32,84,.2);
  transition:transform .2s,box-shadow .2s;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
#pmm-fab:hover{transform:scale(1.07);box-shadow:0 8px 30px rgba(13,32,84,.55)}
#pmm-fab:active{transform:scale(.93)}
.pmm-fab-badge{
  position:absolute;top:-3px;right:-3px;
  background:#ef4444;color:#fff;font-size:10px;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fn);padding:0 4px;
  box-shadow:0 2px 6px rgba(239,68,68,.4);border:2px solid #fff;
}
.pmm-fab-logo{
  width:36px;height:36px;border-radius:50%;object-fit:contain;
  display:block;filter:brightness(0) invert(1);
}
.pmm-fab-x{display:none}

/* ── Window ──────────────────────────────────────── */
#pmm-w{
  position:fixed;bottom:100px;right:var(--pmm-r);left:var(--pmm-l);
  width:372px;max-width:calc(100vw - 20px);
  height:586px;max-height:calc(100vh - 120px);
  background:var(--bg);border-radius:20px;
  box-shadow:0 20px 60px rgba(13,32,84,.18),0 4px 16px rgba(13,32,84,.08);
  display:flex;flex-direction:column;overflow:hidden;
  z-index:99998;font-family:var(--fn);font-size:13px;
  border:1px solid var(--bd);
  opacity:0;transform:translateY(16px) scale(.96);
  pointer-events:none;
  transition:opacity .25s,transform .3s cubic-bezier(.34,1.56,.64,1);
  transform-origin:bottom right;
}
#pmm-w.open{opacity:1;transform:translateY(0) scale(1);pointer-events:all}

/* ── Header ──────────────────────────────────────── */
.pmm-hd{
  background:var(--navy);padding:13px 16px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.pmm-hd-l{display:flex;align-items:center;gap:11px}
.pmm-av{
  width:40px;height:40px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
}
.pmm-av img{width:100%;height:100%;object-fit:contain;padding:3px}
.pmm-hd-t{display:flex;flex-direction:column;gap:2px}
.pmm-hd-n{color:#fff;font-weight:700;font-size:15px;letter-spacing:.1px}
.pmm-hd-s{color:rgba(255,255,255,.65);font-size:11px;display:flex;align-items:center;gap:5px}
.pmm-dot{width:7px;height:7px;border-radius:50%;background:#00E676;animation:blink 2.5s ease-in-out infinite;box-shadow:0 0 6px #00E676}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.pmm-hd-btns{display:flex;align-items:center;gap:4px}
.pmm-hd-btn{
  width:30px;height:30px;border-radius:8px;
  background:rgba(255,255,255,.1);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:rgba(255,255,255,.75);
  transition:background .2s,color .2s;flex-shrink:0;
}
.pmm-hd-btn:hover{background:rgba(255,255,255,.22);color:#fff}

/* ── Scrollable body ─────────────────────────────── */
.pmm-bd{
  flex:1;overflow-y:auto;padding:14px 12px 8px;
  display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;
}
.pmm-bd::-webkit-scrollbar{width:3px}
.pmm-bd::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}

/* ── Welcome Screen ──────────────────────────────── */
.pmm-welcome{
  flex:1;display:flex;flex-direction:column;padding:16px 14px 8px;
  gap:12px;overflow-y:auto;
}
.pmm-welcome::-webkit-scrollbar{width:3px}
.pmm-welcome::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px}

.pmm-w-hero{display:flex;align-items:flex-start;gap:11px}
.pmm-w-hero-av{
  width:40px;height:40px;border-radius:50%;background:#fff;
  border:2px solid var(--bd);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;box-shadow:0 2px 8px rgba(13,32,84,.1);
}
.pmm-w-hero-av img{width:100%;height:100%;object-fit:contain;padding:3px}
.pmm-w-hero-body{}
.pmm-w-hero-title{font-size:17px;font-weight:700;color:var(--tx);margin:0 0 4px;letter-spacing:-.2px}
.pmm-w-hero-sub{font-size:12px;color:var(--tx2);line-height:1.55;margin:0}

.pmm-w-divider{display:flex;align-items:center;gap:8px}
.pmm-w-divider span{font-size:10.5px;font-weight:600;color:var(--tx3);white-space:nowrap;letter-spacing:.5px;text-transform:uppercase}
.pmm-w-divider::before,.pmm-w-divider::after{content:'';flex:1;height:1px;background:var(--bd)}

.pmm-w-cards{display:flex;flex-direction:column;gap:6px}
.pmm-w-card{
  display:flex;align-items:center;gap:11px;padding:10px 12px;
  border:1.5px solid var(--bd);border-radius:12px;background:#fff;
  cursor:pointer;font-family:var(--fn);transition:all .18s;text-align:left;width:100%;
}
.pmm-w-card:hover{border-color:var(--navy);box-shadow:0 2px 10px rgba(13,32,84,.1);transform:translateX(2px)}
.pmm-w-card-icon{
  width:36px;height:36px;border-radius:10px;background:var(--sf);
  border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--navy);
}
.pmm-w-card-body{flex:1;min-width:0}
.pmm-w-card-title{font-size:13px;font-weight:600;color:var(--tx);display:block;margin-bottom:1px}
.pmm-w-card-sub{font-size:11px;color:var(--tx2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmm-w-card-arr{color:var(--tx3);flex-shrink:0}

.pmm-w-pq{display:flex;flex-direction:column;gap:5px;padding-bottom:4px}
.pmm-w-pq-item{
  display:flex;align-items:center;gap:9px;padding:8px 11px;
  border:1.5px solid var(--bd);border-radius:10px;
  background:var(--sf);cursor:pointer;font-family:var(--fn);transition:all .18s;text-align:left;width:100%;
}
.pmm-w-pq-item:hover{border-color:var(--navy);background:#fff;transform:translateX(2px)}
.pmm-w-pq-item-icon{color:var(--tx3);flex-shrink:0;display:flex}
.pmm-w-pq-item span{font-size:12.5px;color:var(--tx);font-weight:500}

/* ── Message rows ────────────────────────────────── */
.pmm-r{display:flex;gap:8px;max-width:86%;animation:mUp .22s ease}
@keyframes mUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.pmm-r.b{align-self:flex-start;align-items:flex-end}
.pmm-r.u{align-self:flex-end;flex-direction:row-reverse}
.pmm-r-av{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  margin-bottom:20px;overflow:hidden;background:#fff;
  border:1.5px solid var(--bd);
}
.pmm-r-av img{width:100%;height:100%;object-fit:contain;padding:2px}

/* ── Bubbles ─────────────────────────────────────── */
.pmm-bub{padding:10px 13px;border-radius:16px;line-height:1.6;font-size:13px;word-wrap:break-word}
.pmm-r.b .pmm-bub{
  background:var(--sf);color:var(--tx);border-bottom-left-radius:4px;border:1.5px solid var(--bd);
}
.pmm-r.b .pmm-bub a{color:var(--pmm);text-decoration:none;font-weight:600}
.pmm-r.b .pmm-bub a:hover{text-decoration:underline}
.pmm-r.u .pmm-bub{
  background:var(--navy);color:#fff;border-bottom-right-radius:4px;
  box-shadow:0 3px 10px rgba(13,32,84,.2);
}
.pmm-ts{font-size:10px;color:var(--tx3);margin-top:4px}
.pmm-r.u .pmm-ts{text-align:right;color:rgba(13,32,84,.4)}

/* Agent bubble */
.pmm-r.a .pmm-bub{
  background:linear-gradient(135deg,#e8f5e9,#f0f8f1);color:var(--tx);
  border-bottom-left-radius:4px;border:1.5px solid #b2dfdb;font-weight:500;
}
.pmm-r.a{align-self:flex-start;align-items:flex-end}
.pmm-r.a .pmm-r-av{background:linear-gradient(135deg,#42a5f5,#1565c0);border:none}

/* ── Reactions ───────────────────────────────────── */
.pmm-rx{display:flex;gap:4px;margin-top:5px}
.pmm-rx button{
  background:0;border:1.5px solid var(--bd);border-radius:6px;
  padding:3px 8px;font-size:10.5px;color:var(--tx2);cursor:pointer;
  font-family:var(--fn);transition:all .15s;
}
.pmm-rx button:hover{border-color:var(--pmm);color:var(--pmm)}
.pmm-rx button.on{border-color:var(--pmm);color:var(--pmm);background:rgba(0,158,77,.07);font-weight:600}

/* ── Action buttons below bot message ────────────── */
.pmm-msg-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;max-width:calc(86% - 34px)}
.pmm-msg-action{
  padding:6px 12px;border:1.5px solid var(--bd);border-radius:18px;
  background:#fff;font-size:11.5px;font-weight:500;color:var(--tx);
  cursor:pointer;font-family:var(--fn);transition:all .18s;
  display:inline-flex;align-items:center;gap:6px;
}
.pmm-msg-action:hover{background:var(--navy);border-color:var(--navy);color:#fff}

/* ── Lead Form Card ──────────────────────────────── */
.pmm-lead{
  background:#fff;border:1.5px solid var(--bd);border-radius:16px;
  padding:18px;margin:4px 0;animation:mUp .3s ease;
  box-shadow:0 4px 16px rgba(13,32,84,.07);
}
.pmm-lead h4{font-size:13.5px;font-weight:700;color:var(--tx);margin:0 0 14px}
.pmm-lead-field{margin-bottom:10px}
.pmm-lead-field label{font-size:11px;font-weight:600;color:var(--tx2);display:block;margin-bottom:4px}
.pmm-lead input{
  width:100%;border:1.5px solid var(--bd);border-radius:9px;
  padding:9px 12px;font-size:13px;font-family:var(--fn);color:var(--tx);
  background:var(--sf);outline:none;box-sizing:border-box;
  transition:border-color .2s,box-shadow .2s;
}
.pmm-lead input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,32,84,.07);background:#fff}
.pmm-lead input::placeholder{color:var(--tx3)}
.pmm-lead input.err{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.08)}
.pmm-lead-btns{display:flex;gap:8px;margin-top:14px}
.pmm-lead-submit{
  flex:1;padding:10px 14px;border:none;border-radius:9px;
  background:var(--navy);color:#fff;font-size:13px;font-weight:600;
  font-family:var(--fn);cursor:pointer;
  transition:background .2s,transform .15s;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.pmm-lead-submit:hover{background:var(--navy-l);transform:translateY(-1px)}
.pmm-lead-submit:disabled{opacity:.5;cursor:default;transform:none}
.pmm-lead-cancel{
  padding:10px 14px;border:1.5px solid var(--bd);border-radius:9px;
  background:#fff;color:var(--tx2);font-size:13px;font-weight:500;
  font-family:var(--fn);cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.pmm-lead-cancel:hover{border-color:var(--tx);color:var(--tx);background:var(--sf)}
.pmm-lead-sent{text-align:center;color:var(--pmm);font-weight:600;font-size:12.5px;padding:8px 0}

/* ── Typing indicator ────────────────────────────── */
.pmm-typing{display:flex;gap:8px;align-self:flex-start;align-items:flex-end;animation:mUp .22s ease}
.pmm-typing-b{
  background:var(--sf);border:1.5px solid var(--bd);
  padding:11px 14px;border-radius:16px;border-bottom-left-radius:4px;
  display:flex;gap:4px;align-items:center;
}
.pmm-td{width:5px;height:5px;border-radius:50%;background:var(--tx3);animation:dot 1.3s ease-in-out infinite}
.pmm-td:nth-child(2){animation-delay:.18s}.pmm-td:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ── Escalation notice ───────────────────────────── */
.pmm-esc{
  margin:0 10px 6px;padding:8px 13px;
  background:#fffbeb;border:1.5px solid #f5d060;border-radius:9px;
  font-size:11px;color:#7c5a00;font-weight:500;text-align:center;animation:mUp .25s ease;
}

/* ── Chip strip ──────────────────────────────────── */
.pmm-ch{
  padding:8px 10px;display:flex;flex-wrap:wrap;gap:5px;
  border-top:1.5px solid var(--bd);background:var(--bg);flex-shrink:0;min-height:0;
}
.pmm-chip{
  padding:5px 12px;border:1.5px solid var(--bd);border-radius:18px;
  background:var(--bg);font-size:11.5px;font-weight:500;color:var(--tx);
  cursor:pointer;white-space:nowrap;font-family:var(--fn);transition:all .18s;
}
.pmm-chip:hover{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 2px 8px rgba(13,32,84,.15)}

/* ── Footer input ────────────────────────────────── */
.pmm-ft{
  padding:8px 10px 10px;display:flex;align-items:center;gap:7px;
  border-top:1.5px solid var(--bd);flex-shrink:0;background:#fff;
}
.pmm-in{
  flex:1;border:1.5px solid var(--bd);border-radius:12px;
  padding:9px 13px;font-size:13px;font-family:var(--fn);color:var(--tx);
  background:var(--sf);outline:none;transition:border-color .2s,box-shadow .2s;
}
.pmm-in:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,32,84,.07);background:#fff}
.pmm-in::placeholder{color:var(--tx3)}
.pmm-snd{
  width:38px;height:38px;border-radius:11px;background:var(--navy);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:transform .15s,background .15s;
  box-shadow:0 3px 8px rgba(13,32,84,.25);
}
.pmm-snd:hover{transform:scale(1.06);background:var(--navy-l)}
.pmm-snd:active{transform:scale(.93)}
.pmm-snd:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
.pmm-snd svg{pointer-events:none}

/* ── Branding footer ─────────────────────────────── */
.pmm-br{
  text-align:center;padding:4px 0 2px;font-size:10px;color:var(--tx3);flex-shrink:0;
}
.pmm-br strong{color:var(--tx2);font-weight:600}

/* ── Mobile ──────────────────────────────────────── */
@media(max-width:480px){
  #pmm-w{right:8px;bottom:88px;width:calc(100vw - 16px);height:calc(100vh - 108px);max-height:none}
  #pmm-fab{right:14px;bottom:14px}
}