: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(20px + env(safe-area-inset-bottom));
}

/* ====== CONTAINER ABERTO (card) ====== */
#popup.popup-container{
  position:fixed; right:var(--popup-right); bottom:var(--popup-bottom);
  width:min(360px, calc(100vw - 32px));
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  display:none; /* JS liga */
  flex-direction:column;
  overflow:hidden;
  z-index:99999;
}

/* Image area */
#popup .popup-media{ position:relative; height:auto; background:#d9d9e2; }
#popup .popup-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 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;
}

/* base branca com botões e dots */
#popup .popup-base{ background:#fff; padding:14px 16px 16px; }
#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; }