:root{
  --tcp-bg:rgba(255,255,255,0.55);
  --tcp-fg:#222;
  --tcp-muted:#555;
  --tcp-border:rgba(0,0,0,0.08);
  --tcp-shadow:rgba(0,0,0,0.25);
  --tcp-glow:rgba(76,132,255,0.15);

  /* متغیرهای پوزیشن توسط JS ست می‌شوند */
  --tcp-horiz: right;
  --tcp-vert: bottom;
  --tcp-x: 24px;
  --tcp-y: 24px;
  --tcp-modal-top: auto;
  --tcp-modal-bottom: 88px;
  --tcp-modal-left: auto;
  --tcp-modal-right: 24px;
  --tcp-modal-origin: top right;
}

html[dir="rtl"] #tcp-button i,
html[dir="rtl"] .tcp-item i { margin-left: 0; }

/* حالت تم تیره (ست شدن با کلاس روی body یا CSS variables) */
.tcp-theme-dark{
  --tcp-bg:rgba(20,20,20,0.55);
  --tcp-fg:#fff;
  --tcp-muted:#ccc;
  --tcp-border:rgba(255,255,255,0.12);
  --tcp-shadow:rgba(0,0,0,0.6);
  --tcp-glow:rgba(120,180,255,0.25);
}

.tcp-hidden{display:none}

/* ---------- Contact Button ---------- */
#tcp-button{
  position:fixed;z-index:99998;
  inset:auto auto auto auto;
  /* از متغیرها برای پوزیشن */
  right:initial; left:initial; top:initial; bottom:initial;
  /* با JS مقداردهی می‌شود: */
  padding:12px 24px;
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:600;
  border-radius:9999px;
  color:var(--tcp-fg);
  background:rgba(255,255,255,0.4);
  border:1px solid rgba(255,255,255,0.45);
  box-shadow:0 6px 28px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.25);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  cursor:pointer;
  overflow:hidden;
  transition:all .35s ease;
  animation:tcp-softpulse 4s ease-in-out infinite;
}
@keyframes tcp-softpulse{
  0%,100%{transform:scale(1); box-shadow:0 0 10px rgba(120,180,255,0.1);}
  50%{transform:scale(1.04); box-shadow:0 0 20px rgba(120,180,255,0.25);}
}
#tcp-button::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(120,180,255,0.35), transparent 40%);
  opacity:0;transition:opacity .3s ease;
}
#tcp-button:hover::before{opacity:.8;}
#tcp-button:hover{
  transform:translateY(-2px) scale(1.05);
  background:rgba(255,255,255,0.55);
  box-shadow:0 10px 35px rgba(120,180,255,0.35);
}
#tcp-button:active{transform:scale(.96);}

@media (prefers-color-scheme: dark){
  body:not(.tcp-theme-light) #tcp-button{
    background:rgba(50,50,50,0.6);
    color:#f2f2f2;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 6px 25px rgba(0,0,0,0.6);
    animation:tcp-softpulse-dark 4s ease-in-out infinite;
  }
  @keyframes tcp-softpulse-dark{
    0%,100%{transform:scale(1); box-shadow:0 0 10px rgba(255,255,255,0.08);}
    50%{transform:scale(1.04); box-shadow:0 0 22px rgba(255,255,255,0.25);}
  }
  body:not(.tcp-theme-light) #tcp-button:hover{
    background:rgba(70,70,70,0.85);
    box-shadow:0 10px 30px rgba(255,255,255,0.15);
  }
}

/* ---------- Overlay ---------- */
#tcp-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  backdrop-filter:blur(4px) saturate(120%);
  -webkit-backdrop-filter:blur(4px) saturate(120%);
  z-index:99996;
}

/* ---------- Modal ---------- */
#tcp-modal{
  position:fixed;z-index:99997;max-width:460px;width:calc(100% - 32px);
  background:var(--tcp-bg);color:var(--tcp-fg);
  border:1px solid var(--tcp-border);border-radius:20px;
  box-shadow:0 12px 36px var(--tcp-shadow);
  padding:16px;line-height:1.7;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  overflow:hidden;

  /* با متغیرها از JS جای‌گذاری می‌شود */
  top:var(--tcp-modal-top);
  bottom:var(--tcp-modal-bottom);
  left:var(--tcp-modal-left);
  right:var(--tcp-modal-right);
  transform-origin:var(--tcp-modal-origin);

  opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity .25s ease,transform .25s ease;
}
#tcp-modal:not(.tcp-hidden){opacity:1;transform:translateY(0) scale(1)}

#tcp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;z-index:2;position:relative}
#tcp-header h3{margin:0;font-size:16px;font-weight:700}
#tcp-close{background:transparent;border:none;cursor:pointer;color:var(--tcp-muted);font-size:18px}
#tcp-close:hover{color:inherit}

.tcp-section{border-top:1px dashed var(--tcp-border);padding-top:10px;margin-top:10px;position:relative;z-index:2}
.tcp-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;z-index:2;position:relative}
.tcp-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--tcp-border);border-radius:12px;
  background:rgba(255,255,255,0.25);
  backdrop-filter:blur(6px) saturate(140%);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
  box-shadow:0 4px 12px var(--tcp-shadow),inset 0 1px 0 rgba(255,255,255,0.12);
  transition:all .2s ease;
}
.tcp-item:hover{transform:translateY(-1px);background:rgba(255,255,255,0.4)}
.tcp-item i{font-size:16px;min-width:18px}
.tcp-item a,.tcp-item span{color:inherit;text-decoration:none;font-size:14px;word-break:break-all}
.tcp-muted{color:var(--tcp-muted);font-size:12px}

@media (max-width:480px){
  .tcp-list{grid-template-columns:1fr}
  #tcp-modal{max-width:95vw;padding:14px}
}

/* ---------- Floating squares ---------- */
#tcp-modal .tcp-squares{position:absolute;inset:0;overflow:hidden;z-index:0;border-radius:inherit;}
#tcp-modal .tcp-square{
  position:absolute;bottom:-60px;left:50%;
  width:var(--size,60px);height:var(--size,60px);
  margin-left:calc(var(--size,60px)/-2);
  background:rgba(255,255,255,0.3);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:12px;
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  box-shadow:0 10px 25px var(--tcp-shadow),inset 0 1px 0 rgba(255,255,255,0.1);
  opacity:.8;
  animation:tcp-rise var(--dur,14s) ease-in infinite;
}
#tcp-modal .tcp-square::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(100% 100% at 20% 20%, var(--tcp-glow), transparent 70%);
  mix-blend-mode:screen;
}
@keyframes tcp-rise{
  0%{transform:translateY(0) scale(1) rotate(0deg);opacity:.7}
  80%{opacity:.9}
  100%{transform:translateY(-120%) scale(1.2) rotate(25deg);opacity:0}
}