:root{
  --wewac-zindex: 99999;

  /* Brand / UI tokens */
  --wewac-accent: #25D366;
  --wewac-bg: #ffffff;
  --wewac-text: #0f172a;
  --wewac-muted: #64748b;
  --wewac-border: rgba(15, 23, 42, .10);

  --wewac-shadow: 0 18px 50px rgba(2, 6, 23, .18);
  --wewac-shadow-soft: 0 12px 30px rgba(2, 6, 23, .14);

  --wewac-radius-lg: 18px;
  --wewac-radius-md: 14px;
}

.wewac-wrap{
  position: fixed;
  bottom: 18px;
  z-index: var(--wewac-zindex);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none; /* sadece iç elemanlar tıklansın */
}

.wewac-right{ right: 18px; align-items: flex-end; }
.wewac-left{ left: 18px; align-items: flex-start; }

.wewac-wrap > * { pointer-events: auto; }

/* Floating Button */
.wewac-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  border-radius: 999px;
  padding: 12px 14px;

  text-decoration: none;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1px;

  color: #fff;
  background: linear-gradient(180deg, #2eea79 0%, #1db954 100%);
  box-shadow: var(--wewac-shadow-soft);
  border: 1px solid rgba(255,255,255,.22);

  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  will-change: transform;
}

.wewac-btn:hover{
  transform: translateY(-2px);
  filter: saturate(1.05);
  box-shadow: var(--wewac-shadow);
}

.wewac-btn:active{
  transform: translateY(0);
}

.wewac-btn svg{
  fill: currentColor;
  display:block;
}

/* icon-only */
.wewac-icon{
  padding: 12px;
  width: 50px;
  height: 50px;
  justify-content: center;
}

/* label */
.wewac-bubble .wewac-label{
  white-space: nowrap;
  font-weight: 800;
}

/* Panel */
.wewac-panel{
  width: 320px;
  max-width: calc(100vw - 36px);

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid var(--wewac-border);
  border-radius: var(--wewac-radius-lg);
  box-shadow: var(--wewac-shadow);

  overflow: hidden;
  transform-origin: bottom right;

  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
  display: block;
}

.wewac-wrap.wewac-left .wewac-panel{
  transform-origin: bottom left;
}

/* open state */
.wewac-panel.wewac-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity .16s ease, transform .16s ease;
}

/* Header */
.wewac-panel-head{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;

  background: linear-gradient(180deg, rgba(248,250,252,.9) 0%, rgba(255,255,255,.0) 100%);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.wewac-panel-title{
  font-size: 12px;
  font-weight: 800;
  color: var(--wewac-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* Close button */
.wewac-close{
  appearance:none;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.7);
  cursor:pointer;

  width: 34px;
  height: 34px;
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 18px;
  line-height: 1;
  color: rgba(15,23,42,.75);

  transition: transform .12s ease, background .12s ease;
}
.wewac-close:hover{ transform: scale(1.03); background: rgba(255,255,255,.95); }

/* Body */
.wewac-panel-body{
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.wewac-agent{
  font-weight: 900;
  color: var(--wewac-text);
  font-size: 16px;
  letter-spacing: .1px;
}

.wewac-availability{
  font-size: 13px;
  color: var(--wewac-muted);
  line-height: 1.4;
}

/* CTA inside panel */
.wewac-panel-btn{
  margin-top: 6px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: var(--wewac-radius-md);
  text-decoration:none;

  background: linear-gradient(180deg, #2eea79 0%, #1db954 100%);
  color:#fff;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(34, 197, 94, .28);
  border: 1px solid rgba(255,255,255,.22);

  transition: transform .14s ease, box-shadow .14s ease;
}
.wewac-panel-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(34, 197, 94, .32);
}

/* Shortcode inline button */
.wewac-inline{
  display:inline-flex;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--wewac-accent);
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

/* Mobile tweaks */
@media (max-width: 420px){
  .wewac-right{ right: 12px; }
  .wewac-left{ left: 12px; }
  .wewac-panel{ width: 92vw; }
}