/* StaySafe Assistant widget — scoped under #ssmchat (self-contained, brand-styled). */
#ssmchat, #ssmchat * { box-sizing: border-box; }
#ssmchat {
  --b:#1C60F2; --bd:#0a3fc4; --dark:#101618; --muted:#6B7074; --line:#E8EBEF; --soft:#F4F6FA;
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* bubble */
#ssmchat .ssmc-bubble {
  width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer;
  background:#fff; color:#fff;
  box-shadow: 0 12px 30px rgba(28,96,242,.38); display:flex; align-items:center; justify-content:center;
  transition: transform .18s ease, box-shadow .18s ease; position: relative;
}
#ssmchat .ssmc-bubble:hover { transform: translateY(-2px) scale(1.04); }
#ssmchat .ssmc-logo { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
#ssmchat .ssmc-badge {
  position:absolute; top:-6px; right:-6px; background:#F43F5E; color:#fff; font-weight:800;
  font-size:11px; line-height:1; padding:5px 7px; border-radius:999px; box-shadow:0 3px 8px rgba(0,0,0,.2);
  border:2px solid #fff;
}

/* teaser nudge */
#ssmchat .ssmc-teaser { position:absolute; right:2px; bottom:80px; width:242px; background:#fff; color:var(--dark);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 14px 34px rgba(16,22,24,.22);
  padding:13px 28px 14px 15px; cursor:pointer;
  opacity:0; transform:translateY(8px) scale(.96); transition:opacity .25s ease, transform .25s ease; }
#ssmchat .ssmc-teaser.is-in { opacity:1; transform:none; }
#ssmchat .ssmc-teaser-h { font-size:14.5px; font-weight:700; line-height:1.3; color:var(--dark); }
#ssmchat .ssmc-teaser-p { font-size:12.5px; font-weight:500; line-height:1.35; color:var(--muted); margin-top:3px; }
#ssmchat .ssmc-teaser::after { content:''; position:absolute; right:24px; bottom:-7px; width:14px; height:14px;
  background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); }
#ssmchat .ssmc-teaser-x { position:absolute; top:4px; right:7px; background:transparent; border:none;
  color:var(--muted); font-size:16px; line-height:1; cursor:pointer; padding:2px; }
#ssmchat .ssmc-teaser-x:hover { color:var(--dark); }

/* panel */
#ssmchat .ssmc-panel {
  position: absolute; right: 0; bottom: 76px; width: 380px; max-width: calc(100vw - 32px);
  height: 588px; max-height: calc(100vh - 120px); background:#fff; border-radius: 20px;
  box-shadow: 0 24px 60px rgba(16,22,24,.24); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform: translateY(12px) scale(.98); pointer-events:none; transition: opacity .2s ease, transform .2s ease;
}
#ssmchat.is-open .ssmc-panel { opacity:1; transform: none; pointer-events:auto; }
#ssmchat.is-open .ssmc-bubble { transform: scale(.9); }

/* header */
#ssmchat .ssmc-head { background: linear-gradient(135deg, var(--b), var(--bd)); color:#fff; padding:16px 16px; display:flex; align-items:center; gap:11px; }
#ssmchat .ssmc-ava { width:38px; height:38px; border-radius:50%; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
#ssmchat .ssmc-ava svg { width:22px; height:22px; }
#ssmchat .ssmc-logo-sm { width:100%; height:100%; object-fit:cover; display:block; }
#ssmchat .ssmc-title { font-weight:700; font-size:15px; line-height:1.15; }
#ssmchat .ssmc-sub { font-size:12px; opacity:.85; display:flex; align-items:center; gap:6px; }
#ssmchat .ssmc-dot { width:7px; height:7px; border-radius:50%; background:#34D399; display:inline-block; }
#ssmchat .ssmc-x { margin-left:auto; background:transparent; border:none; color:#fff; cursor:pointer; opacity:.85; font-size:22px; line-height:1; padding:4px; }
#ssmchat .ssmc-x:hover { opacity:1; }

/* messages */
#ssmchat .ssmc-body { flex:1; overflow-y:auto; padding:16px; background:var(--soft); display:flex; flex-direction:column; gap:10px; }
#ssmchat .ssmc-msg { max-width:84%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
#ssmchat .ssmc-msg.bot { background:#fff; color:var(--dark); align-self:flex-start; border:1px solid var(--line); border-bottom-left-radius:5px; white-space:normal; }
#ssmchat .ssmc-msg.bot p { margin:0 0 8px; }
#ssmchat .ssmc-msg.bot p:last-child { margin-bottom:0; }
#ssmchat .ssmc-msg.bot ul, #ssmchat .ssmc-msg.bot ol { margin:6px 0; padding-left:20px; }
#ssmchat .ssmc-msg.bot li { margin:3px 0; }
#ssmchat .ssmc-msg.bot strong { font-weight:700; }
#ssmchat .ssmc-msg.bot a { color:var(--b); font-weight:600; text-decoration:underline; }
#ssmchat .ssmc-msg.user { background:var(--b); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
#ssmchat .ssmc-typing { display:inline-flex; gap:4px; padding:4px 2px; }
#ssmchat .ssmc-typing i { width:7px; height:7px; border-radius:50%; background:#B7BEC9; animation: ssmc-b 1.2s infinite ease-in-out; }
#ssmchat .ssmc-typing i:nth-child(2){ animation-delay:.15s; } #ssmchat .ssmc-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes ssmc-b { 0%,80%,100%{ transform:scale(.6); opacity:.5;} 40%{ transform:scale(1); opacity:1; } }

/* plan buttons + CTAs */
#ssmchat .ssmc-plans { display:flex; flex-direction:column; gap:8px; align-self:flex-start; max-width:92%; }
#ssmchat .ssmc-plan { display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none;
  background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:11px 13px; color:var(--dark); transition:border-color .15s, box-shadow .15s; }
#ssmchat .ssmc-plan:hover { border-color:var(--b); box-shadow:0 4px 14px rgba(28,96,242,.14); }
#ssmchat .ssmc-plan.pop { border-color:var(--b); }
#ssmchat .ssmc-plan b { font-size:14px; } #ssmchat .ssmc-plan small { color:var(--muted); font-size:12px; display:block; }
#ssmchat .ssmc-plan .ssmc-price { text-align:right; } #ssmchat .ssmc-plan .ssmc-price b{ color:var(--b); }
#ssmchat .ssmc-plan .ssmc-old { text-decoration:line-through; color:var(--muted); font-size:11px; }
#ssmchat .ssmc-pop-tag { background:var(--b); color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:6px; margin-left:6px; }
#ssmchat .ssmc-cta { align-self:flex-start; text-decoration:none; text-align:center; background:linear-gradient(135deg,var(--b),var(--bd)); color:#fff; font-weight:700; font-size:14px; padding:12px 18px; border-radius:12px; box-shadow:0 8px 20px rgba(28,96,242,.28); }
#ssmchat .ssmc-support { align-self:flex-start; font-size:13px; }
#ssmchat .ssmc-support a { color:var(--b); font-weight:600; }

/* input */
#ssmchat .ssmc-foot { border-top:1px solid var(--line); padding:10px 12px; background:#fff; }
#ssmchat .ssmc-inrow { display:flex; align-items:flex-end; gap:8px; }
#ssmchat .ssmc-in { flex:1; resize:none; border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; max-height:96px; outline:none; color:var(--dark); }
#ssmchat .ssmc-in:focus { border-color:var(--b); }
#ssmchat .ssmc-send { flex:0 0 auto; width:40px; height:40px; border-radius:12px; border:none; cursor:pointer; background:var(--b); color:#fff; display:flex; align-items:center; justify-content:center; }
#ssmchat .ssmc-send:disabled { opacity:.5; cursor:default; }
#ssmchat .ssmc-send svg { width:18px; height:18px; }
#ssmchat .ssmc-priv { font-size:10.5px; color:var(--muted); text-align:center; margin:7px 2px 0; }

@media (max-width:480px){
  #ssmchat { right:14px; bottom:14px; }
  #ssmchat .ssmc-panel { width: calc(100vw - 20px); height: calc(100vh - 96px); right:-4px; }
}
