/* Super 8 Trends — Sales AI Agent widget styles v1.
   Launcher: circular photo with a slow rotating dark-blue→green ring,
   pulsing green "online" dot and a notification badge that pops in.
   Panel: dark glass chat with canned demo replies. */

.s8-agent-btn {
  position: relative;
  width: 58px; height: 58px;
  border: 0; padding: 0; border-radius: 50%;
  background: none; cursor: pointer; flex: 0 0 auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
  transition: transform .25s ease;
}
.s8-agent-btn:hover { transform: translateY(-2px) scale(1.04); }
.s8-agent-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* the dark-blue → green animated ring */
.s8-agent-ring {
  position: absolute; inset: -3px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 0deg, #0B2447, #16C784 38%, #0E3A5B 62%, #25D366 82%, #0B2447);
  animation: s8-agent-spin 6s linear infinite;
}
@keyframes s8-agent-spin { to { transform: rotate(360deg); } }
.s8-agent-photo {
  position: relative; z-index: 1;
  width: 58px; height: 58px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 2px solid rgba(255,255,255,.9);
}
/* Monogram fallback, inserted by agent.js only when the avatar photo cannot load.
   It reuses the photo's own classes for sizing and border, so only the fill and
   the glyph need declaring here. */
.s8-agent-mono {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #0E5F63, #07353A);
  color: #E7DFD2;
  font: 600 1.3rem/1 "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .02em;
  user-select: none; -webkit-user-select: none;
}
.s8-agent-photo-sm.s8-agent-mono, .s8-toast-photo.s8-agent-mono { font-size: 1rem; }

/* online dot */
.s8-agent-online {
  position: absolute; z-index: 2;
  right: 2px; bottom: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #22C55E; border: 2.5px solid #fff;
  box-shadow: 0 0 0 0 rgba(34,197,94,.7);
  animation: s8-agent-pulse 2.2s ease-out infinite;
}
@keyframes s8-agent-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
/* notification badge — pops in after load.
   Sits ON the launcher's ring edge, not floating above it: the stack puts the
   agent button directly under the LINE icon, and a badge placed higher read
   as a notification on the LINE button (user-reported). */
.s8-agent-note {
  position: absolute; z-index: 3;
  top: -1px; right: -2px;
  min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 999px;
  background: #E23A3A; color: #fff;
  font: 800 .72rem/21px system-ui, sans-serif;
  text-align: center;
  border: 2px solid #fff;
  opacity: 0; transform: scale(.2);
}
.s8-agent-ping .s8-agent-note { animation: s8-agent-pop .6s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes s8-agent-pop {
  0%   { opacity: 0; transform: scale(.2); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- panel ---- */
.s8-agent-panel[hidden] { display: none; }
.s8-agent-panel {
  position: fixed; z-index: 71;
  right: max(.8rem, env(safe-area-inset-right));
  bottom: calc(max(.8rem, env(safe-area-inset-bottom)) + 130px);
  width: min(330px, calc(100vw - 1.6rem));
  max-height: min(470px, calc(100dvh - 190px));
  display: flex; flex-direction: column;
  background: rgba(13, 17, 23, .96);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  color: #F2EDE2; overflow: hidden;
  animation: s8-agent-in .3s cubic-bezier(.22,.8,.28,1);
}
@keyframes s8-agent-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.s8-agent-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(11,36,71,.9), rgba(22,199,132,.28) 70%, rgba(11,36,71,.9));
}
.s8-agent-photo-sm { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.85); }
.s8-agent-id { flex: 1; line-height: 1.25; }
.s8-agent-id strong { font-size: .92rem; display: block; }
.s8-agent-status { font-size: .72rem; color: #86EFAC; display: inline-flex; align-items: center; gap: .3rem; }
.s8-agent-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; display: inline-block;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: s8-agent-pulse 2.2s ease-out infinite; }
.s8-agent-x { border: 0; background: rgba(255,255,255,.1); color: #fff; width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; font-size: .8rem; }
.s8-agent-x:hover { background: rgba(255,255,255,.2); }

.s8-agent-log { flex: 1; overflow-y: auto; padding: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.s8-agent-msg {
  max-width: 82%; padding: .55rem .8rem; border-radius: 14px;
  font-size: .84rem; line-height: 1.45;
}
.s8-agent-msg.bot { align-self: flex-start; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.1); border-bottom-left-radius: 4px; }
.s8-agent-msg.me { align-self: flex-end; background: linear-gradient(135deg, #0E3A5B, #16A34A); color: #fff; border-bottom-right-radius: 4px; }
.s8-agent-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.s8-agent-chip {
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06);
  color: #F2EDE2; border-radius: 999px; padding: .35rem .75rem;
  font: 600 .76rem system-ui, sans-serif; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.s8-agent-chip:hover { background: rgba(22,199,132,.25); border-color: #16C784; }

.s8-agent-form { display: flex; gap: .5rem; padding: .7rem .8rem; border-top: 1px solid rgba(255,255,255,.12); }
.s8-agent-input {
  flex: 1; min-width: 0;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  background: rgba(255,255,255,.07); color: #F2EDE2;
  font: 500 .86rem system-ui, sans-serif; padding: .55rem .9rem; outline: none;
}
.s8-agent-input:focus { border-color: #16C784; }
.s8-agent-send {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #0B2447, #16A34A); color: #fff; font-size: .9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.s8-agent-demo { font-size: .62rem; color: rgba(242,237,226,.5); padding: 0 .9rem .6rem; margin: 0; }

@media (max-width: 480px) {
  .s8-agent-panel { bottom: calc(max(.7rem, env(safe-area-inset-bottom)) + 118px); }
}
@media (prefers-reduced-motion: reduce) {
  .s8-agent-ring, .s8-agent-online, .s8-agent-dot { animation: none; }
  .s8-agent-ping .s8-agent-note { animation: none; opacity: 1; transform: none; }
}

/* ---- toast: a small card that points at Mali ---- */
.s8-toast {
  position: fixed; z-index: 71;
  right: max(.8rem, env(safe-area-inset-right));
  bottom: calc(max(.8rem, env(safe-area-inset-bottom)) + 135px);
  display: flex; align-items: flex-start; gap: .6rem;
  width: min(310px, calc(100vw - 1.6rem));
  padding: .7rem .8rem;
  background: rgba(13, 17, 23, .96);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 22px 50px -18px rgba(0,0,0,.75);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  color: #F2EDE2; cursor: pointer;
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .45s cubic-bezier(.22,.8,.28,1), transform .45s cubic-bezier(.22,.8,.28,1);
}
.s8-toast-show { opacity: 1; transform: none; }
/* the little pointer down toward Mali */
.s8-toast::after {
  content: ""; position: absolute; right: 24px; bottom: -6px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: rgba(13, 17, 23, .96);
  border-right: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.s8-toast-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.85); }
.s8-toast-body { flex: 1; min-width: 0; font-size: .78rem; line-height: 1.45; }
.s8-toast-body strong { display: block; font-size: .74rem; letter-spacing: .02em; color: #86EFAC; margin-bottom: .15rem; }
.s8-toast-x {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.12); color: #fff;
  font-size: .62rem; cursor: pointer; line-height: 1;
}
.s8-toast-x:hover { background: rgba(255,255,255,.25); }