/* ---------- MUNSHI AVATAR ---------- */
/* Shared by the storefront widget and all three dashboards, so the assistant
   looks like one character everywhere. Sized by --munshi-size from the
   component; never restyle the image itself in a page stylesheet. */

.munshi-av{
  display:inline-block;flex:none;position:relative;
  width:var(--munshi-size,40px);height:var(--munshi-size,40px);
  border-radius:50%;overflow:hidden;background:#dce9f7;
}
.munshi-av img{width:100%;height:100%;object-fit:cover;display:block}

/* The green "online" dot, scaled off the avatar so it works at any size. */
.munshi-av--live{overflow:visible}
.munshi-av--live img{border-radius:50%}
.munshi-av--live:after{
  content:"";position:absolute;inset-inline-end:0;bottom:0;
  width:calc(var(--munshi-size,40px) * .28);height:calc(var(--munshi-size,40px) * .28);
  min-width:8px;min-height:8px;
  border-radius:50%;background:#46d16b;box-shadow:0 0 0 2px #fff;
}

/* A chat row: avatar beside the bubble it belongs to. */
.munshi-row{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.munshi-row>.munshi-av{margin-bottom:2px}
.munshi-row--center{align-items:center}

/* The storefront widget stacks its bubbles with flex, so the row — not the
   bubble inside it — is what has to sit on the left. */
.hp-body .munshi-row{align-self:flex-start;max-width:92%}
.hp-body .munshi-row .hb{max-width:none}

/* No artwork on disk yet: the old receipt glyph, centred and scaled. */
.munshi-av--glyph{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18)}
.munshi-av--glyph>span{font-size:calc(var(--munshi-size,40px) * .5);line-height:1}

  /* ---------- THE WIDGET ITSELF ----------
   Moved here from app.css so the Buyer and Seller Centers can carry Munshi
   too: they do not load the storefront's stylesheet. Every colour falls back,
   because each page defines its own variables. */
.help-launch{position:fixed;right:24px;bottom:24px;z-index:100;background:linear-gradient(135deg,#1c7ac4,#0f5391);color:#fff;border:none;border-radius:50%;width:60px;height:60px;font-size:26px;cursor:pointer;box-shadow:0 10px 26px rgba(15,83,145,.45);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.help-launch:hover{transform:translateY(-3px)}
.help-panel{position:fixed;right:24px;bottom:96px;width:360px;max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 130px);background:#fff;border:1px solid var(--line,#e3eaf2);border-radius:18px;box-shadow:0 20px 60px rgba(12,30,55,.3);z-index:100;display:none;flex-direction:column;overflow:hidden}
.help-panel.on{display:flex}
.hp-head{background:linear-gradient(120deg,#0c3b68,#1c7ac4);color:#fff;padding:14px 16px;display:flex;align-items:center;gap:11px}
.hp-head .av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);overflow:hidden;flex:none}
.hp-head .av img{width:100%;height:100%;object-fit:cover;display:block}
.hp-head b{font-size:15px;display:block}
.hp-head .st{font-size:11.5px;color:#cfe6ff;display:flex;align-items:center;gap:5px}
.hp-head .st i{width:8px;height:8px;border-radius:50%;background:#46d16b;display:inline-block}
.hp-head .x{margin-left:auto;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;line-height:1}
.hp-body{flex:1;overflow-y:auto;padding:14px;background:var(--cream,#f6f9fc);display:flex;flex-direction:column;gap:9px}
.hb,.hu,.hs{max-width:82%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.5}
.hb{background:#fff;border:1px solid var(--line,#e3eaf2);align-self:flex-start;border-bottom-left-radius:4px}
.hu{background:var(--blue,#1c7ac4);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
/* A person from the team, not Munshi — same side, no face, tinted so the
   buyer can see the hand-off actually happened. */
.hs{background:var(--sky,#eaf3fb);border:1px solid #cfe1f2;align-self:flex-start;border-bottom-left-radius:4px}
.hp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.hp-chips button{background:#fff;border:1px solid #cfe1f2;color:var(--blue2,#0f5391);border-radius:16px;padding:6px 11px;font-size:12px;cursor:pointer;font-family:inherit}
.hp-chips button:hover{background:var(--sky,#eaf3fb)}
.hp-foot{border-top:1px solid var(--line,#e3eaf2);padding:10px;background:#fff}
.hp-inrow{display:flex;gap:8px}
.hp-inrow input{flex:1;border:1.5px solid var(--line,#e3eaf2);border-radius:10px;padding:9px 12px;font-size:13px;font-family:inherit;outline:none}
.hp-inrow button{background:var(--blue,#1c7ac4);border:none;color:#fff;border-radius:10px;width:42px;font-size:15px;cursor:pointer}
/* Three equal tiles, icon over label. Every property the page could reach is
   set here, because this widget sits on the storefront and on four
   dashboards, each with its own idea of what a link or a button looks like. */
.hp-alt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.hp-link{box-sizing:border-box;width:100%;min-width:0;min-height:60px;margin:0;padding:9px 6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid var(--line,#e3eaf2);border-radius:12px;background:#f6f9fc;box-shadow:none;
  color:var(--navy,#0c3b68);font-family:inherit;font-size:12px;font-weight:600;line-height:1.25;letter-spacing:0;
  text-align:center;text-decoration:none;white-space:normal;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background .15s,border-color .15s,transform .15s}
.hp-link svg{width:19px;height:19px;flex:none}
.hp-link span{display:block;max-width:100%;overflow-wrap:anywhere}
.hp-link:hover{background:#eaf2fb;border-color:#bcd3ea;transform:translateY(-1px)}
.hp-link:focus-visible{outline:2px solid var(--blue,#1c7ac4);outline-offset:2px}
.hp-link-wa{background:#eafaf0;border-color:#bfe9cf;color:#128a47}
.hp-link-wa:hover{background:#dcf6e6;border-color:#9edcb6}
.hp-nudge{position:fixed;right:96px;bottom:34px;background:#fff;border:1px solid var(--line,#e3eaf2);box-shadow:0 8px 22px rgba(12,30,55,.18);border-radius:14px;padding:10px 13px;font-size:12.5px;color:var(--ink,#1f2a33);z-index:99;max-width:232px;display:none;cursor:pointer}
.hp-nudge.on{display:flex;align-items:center;gap:9px}

/* The day heading inside the widget's chat. */
.hp-day{display:flex;justify-content:center;margin:6px 0}
.hp-day span{padding:3px 11px;border-radius:20px;background:#e7eef6;color:#566b81;font-size:11px;font-weight:650}

@media(max-width:680px){
  .help-panel{inset-inline:12px;bottom:82px;width:auto;max-width:none;height:min(520px,calc(100dvh - 106px))}
  .hp-nudge{inset-inline:14px auto;inset-inline-end:72px;bottom:20px;max-width:calc(100vw - 100px)}
}