:root{
  --card:#ffffff;
  --chip:#ffffff;
  --accent:#6b5b95;
  --accent-weak:#d9cfee;
  --text:#1f1f1f;
  --shadow:0px 10px 30px rgba(0,0,0,.20);

  /* offsets personalizáveis por cliente */
  --popup-right: 20px;
  --popup-bottom: 150px;
  --chip-left: 20px;
  --chip-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* ====== CONTAINER ABERTO (card) ====== */
#popup.popup-container{
  position: fixed;
  top: 260px;
  right: 16px;
  left: auto;
  bottom: auto;
width: clamp(220px, 60vw, 360px);
height: auto;
 

  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 99999;
}

/* Image area */
#popup .popup-media{
  position: relative;
  background: #d9d9e2;
  flex: 0 0 auto;
  overflow: hidden;
  max-height: 60vh;
}

#popup .popup-media img{
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 60vh;
  display: block;
  object-fit: cover;
}

/* close button (canto) */
#popup .close-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1;
  z-index:10;
}

/* base branca com botões e dots */
#popup .popup-base{
  background: #fff;
  padding: 14px 16px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
}

#popup .dots{ display:flex; justify-content:center; gap:8px; margin:8px 0 14px; }
#popup .dot{ width:8px; height:8px; border-radius:999px; background:#d2d2d7; opacity:.9; }
#popup .dot.is-active{ background:#000; }

#popup .controls{ display:flex; gap:12px; }

/* Botões do widget (não afetam o site) */
#popup .btn{
  flex:1; padding:12px 10px; border:none; cursor:pointer; border-radius:12px;
  background:#f5f6f7; color:#2d2751; font-weight:600;
}
#popup .btn.primary{ background:#3e71e1; color:#fff; }
#popup .btn:active{ transform:translateY(1px); }

/* small entrance animation */
#popup.popup-container.show{ animation:pop .18s ease-out both; }
@keyframes pop{ from{ transform:translateY(8px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* ====== BOTÃO MINIMIZADO (chip flutuante) ====== */
#popupMinimized.popup-minimized{
  position:fixed; left:var(--chip-left); bottom:var(--chip-bottom);
  display:none; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:var(--chip); color:var(--text);
  box-shadow:var(--shadow);
  z-index:99998;
  border:none;
}
#popupMinimized .badge{
  width:28px; height:28px; border-radius:999px; background:#b3261e; color:#fff;
  display:grid; place-items:center; font-weight:700;
}
#popupMinimized .title-chip{ font-weight:600; white-space:nowrap; }
#popupMinimized .kebab{ border:none; background:transparent; font-size:22px; line-height:1; cursor:pointer; padding:0 2px; }

/* Responsivo */
@media (max-width:420px){
  #popup .popup-media{ height:auto; }
}

/* link/estado clicável da imagem */
#popup .media-link{ display:block; width:100%; height:100%; }
#popup .media-link:is(:link,:visited){ cursor:pointer; }
#popup .media-link.is-disabled{ pointer-events:none; cursor:default; }

/* barra de progresso (fininha) */
#popup .progress{ height:2px; background:#eee; border-radius:999px; overflow:hidden; margin:4px 0 10px; }
#popup .progress-fill{ height:100%; width:0%; background:var(--accent); transition:width .1s linear; }