/* =========================
   پایه (Mobile-first) + متغیرها
   ========================= */
:root{
  --bg:#0b0f14;
  --card:rgba(255,255,255,.06);
  --muted:rgba(232,238,247,.75);
  --border:rgba(255,255,255,.12);
  --primary:rgba(255,255,255,.10);
  --primaryText:#e8eef7;
}
html { -webkit-text-size-adjust:100%; } /* فیکس سافاری */
body.page-template-harsanieh-gratitudes-chat{ background:var(--bg) !important; color:#e8eef7 !important; }

/* لایه‌بندی عمومی */
.hg-wrap{ max-width:1200px; margin:0 auto; padding:24px; }
.hg-layout{ display:grid; grid-template-columns:280px 1fr; gap:20px; min-height:calc(100vh - 120px); }
@media (max-width:980px){ .hg-layout{ grid-template-columns:1fr; } }

/* ستون چپ (درخت) */
.hg-left{
  position:sticky; top:16px; align-self:start;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:14px;
}
.hg-left h3{ margin:0 0 10px; font-size:15px; color:#e8eef7; }
.hg-tree{ display:flex; justify-content:center; align-items:center; padding:6px 0; }
.hg-tree img, .hg-tree svg, .hg-tree canvas{
  max-width:180px !important; max-height:200px !important; width:100%; height:auto;
}

/* ستون وسط */
.hg-center{ display:flex; flex-direction:column; gap:14px; }

/* فرم ارسال */
.hg-form{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px;
}
.hg-form h2{ margin:0 0 12px; font-size:16px; }
.hg-form textarea, .hg-form select, .hg-form input[type="text"]{
  width:98%; padding:10px; border:1px solid var(--border); border-radius:10px; font-size:14px; margin:8px 0;
}
.hg-form .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.hg-form .btn{
  background:var(--primary); color:var(--primaryText); border:1px solid var(--border); border:none; padding:10px 14px; border-radius:10px; cursor:pointer;
}
.hg-form .muted{ color:var(--muted); font-size:13px; }

/* فید (بدون اسکرول داخلی) */
.hg-feed{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:14px; display:flex; flex-direction:column; gap:10px; min-height:420px;
}
.hg-empty{ text-align:center; padding:24px; color:var(--muted); }

/* آیتم‌ها */
.hg-msg{ display:flex; justify-content:center; }
.hg-bubble{
  width:min(680px,100%); background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:12px 14px; box-shadow:none;
}
.hg-bubble .meta{
  display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; color:var(--muted); font-size:12px;
}
.hg-bubble .content{ font-size:15px; line-height:1.8; white-space:normal; word-break:break-word; }
.hg-bubble .tags{ display:flex; gap:8px; margin-top:8px; font-size:12px; }
.hg-tag{ background:rgba(255,255,255,.08); border:1px solid var(--border); padding:2px 8px; border-radius:999px; }
.hg-tag.lock{ background:rgba(255,70,130,.12); border-color:rgba(255,70,130,.35); color:#ffd7e6; }

/* صفحه‌بندی */
.hg-pagination{
  display:flex; justify-content:center; gap:8px; margin-top:10px; min-height:44px;
}
.hg-pagination button{
  background:rgba(255,255,255,.10); color:#e8eef7; border:none; border-radius:8px; padding:6px 12px; cursor:pointer;
}
.hg-pagination button:disabled{ opacity:.6; cursor:default; }

/* وضعیت لود */
.hg-status{ margin-top:10px; font-size:12px; color:#666; min-height:18px; }

/* --- سازگاری با بخش‌های قدیمی GratiChat (درصورت استفاده همزمان) --- */
.gc-app { display:block; }
.gc-side, .gc-main { background:transparent; }
.gc-card{
  background:#fffefa; border:1px solid #eae7d6; border-radius:14px; padding:12px;
}
.gc-card-title{ font-weight:700; margin-bottom:10px; }
#forest-canvas-wrap{ width:100%; max-height:280px; overflow:hidden; } /* موبایل */
@media (min-width:981px){ #forest-canvas-wrap{ max-height:60vh; } }

/* ===== برگ‌ها زیر درخت (افقی) ===== */
.tree-leaf-stats{
  margin-top:8px; display:flex; justify-content:center;
  font-size:14px; font-weight:600;
  /* فالبک برای مرورگرهای بدون gap */
  --gap:20px;
}
.tree-leaf-stats span{
  background:#fffefa; border:1px solid #eae7d6; border-radius:8px; padding:4px 10px;
  margin:0;
}
.tree-leaf-stats span + span{ margin-inline-start:var(--gap); }
@supports (gap:10px){
  .tree-leaf-stats{ gap:20px; }
  .tree-leaf-stats span + span{ margin-inline-start:0; }
}

/* ===== کارت مدال‌ها ===== */
.hg-medals-card{
  margin-top:12px; background:var(--card); border:1px solid #e5e7eb; border-radius:12px; padding:12px;
}
.hg-medals-head{ font-weight:700; font-size:14px; margin-bottom:8px; text-align:center; }
.hg-medals-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.hg-medal-item{ display:flex; align-items:center; gap:8px; border:1px solid #efe9cf; background:#fffeef; border-radius:10px; padding:6px 8px; }
.hg-medal-icon{ width:22px; height:22px; object-fit:contain; }
.hg-medal-name{ font-size:13px; }
.hg-medals-empty{ text-align:center; font-size:13px; padding:6px 0; }

/* ===== نوار بالا (Topbar) — نسخهٔ نهایی و یکتا ===== */
.hg-topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(247,247,251,.85);
  border-bottom:1px solid #e5e7eb;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.hg-topbar-inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:flex-start;
}
.hg-topbar .btn-forest{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; white-space:nowrap;
  font-weight:700; font-size:14px; line-height:1;
  padding:9px 14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(0deg,#0f766e,#0d9488);
  color:#e8eef7; box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .12s ease, box-shadow .12s ease;
}
.hg-topbar .btn-forest:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.16); }
.hg-topbar .btn-forest .icon{ font-size:18px; line-height:1; }
.hg-topbar .btn-forest .label{ display:inline-block; }

/* ===== ریسپانسیو ===== */
@media (max-width:980px){
  .hg-left{ position:static; }
}
@media (max-width:768px){
  .my-tree-img{ max-width:120px; }
  .tree-leaf-stats{ font-size:13px; }
  .tree-leaf-stats span{ padding:3px 6px; border-radius:6px; }

  .hg-medals-card{ padding:10px; }
  .hg-medals-head{ font-size:13px; margin-bottom:6px; }
  .hg-medals-list{ gap:6px; }
  .hg-medal-item{ padding:5px 8px; gap:6px; }
  .hg-medal-icon{ width:18px; height:18px; }
  .hg-medal-name{ font-size:12px; }

  /* دکمهٔ بازگشت: فقط آیکن */
  .hg-topbar .btn-forest{ font-size:13px; padding:8px 10px; border-radius:10px; }
  .hg-topbar .btn-forest .label{ display:none; }
  .hg-topbar .btn-forest .icon{ font-size:18px; }
}
@media (max-width:420px){
  .hg-topbar .btn-forest{ padding:8px; }
  .hg-topbar .btn-forest .icon{ font-size:16px; }
}
/* Tabs */
.gc-tabs{
  display:flex; gap:8px; border-bottom:1px solid #e5e7eb;
  margin:-6px -6px 12px; padding:0 6px; overflow:auto;
}
.tab-btn{
  background:transparent; border:1px solid transparent; border-bottom:none;
  padding:8px 12px; border-radius:8px 8px 0 0; font-weight:700; color:#374151; cursor:pointer;
}
.tab-btn:hover{ color:#e8eef7; }
.tab-btn.active{
  background:var(--card); color:#e8eef7;
  border:1px solid #e5e7eb; border-bottom-color:#e8eef7;
}
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* لیست اهداف/آرزوها */
.gc-simple-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.gc-simple-list li{
  display:flex; justify-content:space-between; gap:8px;
  background:var(--card); border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px;
}
.gc-simple-list .title{ font-weight:600; color:#e8eef7; }
.gc-simple-list .date{ font-size:12px; color:#6b7280; }

.is-hidden{ display:none !important; }

/* دکمه دانلود */
.btn.btn-cert{
  width:100%; margin-top:10px;
  background:rgba(255,255,255,.10); color:#e8eef7; border:none; border-radius:10px; padding:10px 12px; font-weight:700; cursor:pointer;
}
.btn.btn-cert:hover{ opacity:.95; }

/* کارت (مثل سند) */
.hg-cert-card{
  background:var(--card); border:1px solid #e9e7da; border-radius:16px; padding:14px;
  box-shadow:0 3px 16px rgba(0,0,0,.06); position:relative; overflow:hidden;
  width: 360px;  /* عرض ثابت برای خروجی مرتب */
}
.hg-cert-card::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 40% at 80% -10%, rgba(13,148,136,.10), transparent 60%),
    radial-gradient(40% 60% at -10% 100%, rgba(180,83,9,.08), transparent 60%);
  pointer-events:none;
}
.cert-ribbon{
  position:absolute; top:10px; left:-44px; transform:rotate(-12deg);
  background:#0d9488; color:#e8eef7; font-weight:800; letter-spacing:.5px;
  padding:6px 48px; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.cert-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px dashed #e5e7eb; padding-bottom:8px; margin-bottom:10px; }
.cert-user{ font-weight:800; font-size:15px; color:#0f172a; }
.cert-date{ font-size:12px; color:#64748b; }

.cert-body{ display:flex; flex-direction:column; gap:10px; }
.cert-tree{ display:flex; justify-content:center; }
.cert-tree-img{ max-width:140px; height:auto; object-fit:contain; }

.cert-counts{ display:flex; justify-content:center; gap:10px; }
.cert-counts .pill{
  display:flex; align-items:center; gap:6px;
  background:#fffefa; border:1px solid #efe7c9; border-radius:10px;
  padding:6px 10px; min-width:76px; justify-content:center;
}
.cert-counts .pill b{ font-size:16px; }
.cert-counts .pill small{ font-size:11px; color:#7a6b3e; }

.cert-medals{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; min-height:28px; }
.cert-medal{ width:24px; height:24px; object-fit:contain; }

.cert-codes{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:6px; }
#cert-barcode{ width:140px; height:40px; }
#cert-qr{ width:72px; height:72px; }

/* حالت رندر: نامرئی اما داخل ویوپورت تا html2canvas خالی نده */
.cert-rendering{
  left: 8px !important; top: 8px !important;  /* داخل صفحه */
  z-index: 9999 !important; opacity: 0.01 !important;
}
/* شیت مخفی ولی renderable */
#planner-sheet.planner-hidden{
  position: fixed; left:-10000px; top:-10000px;
  opacity:0; pointer-events:none; z-index:-1;
}
/* چاپ امن */
@media print{
  body *{ visibility:hidden !important; }
  #planner-sheet, #planner-sheet *{ visibility:visible !important; }
  #planner-sheet{
    position: static !important;
    left:auto !important; top:auto !important;
    margin:0 !important; opacity:1 !important; pointer-events:auto !important;
  }
  @page{ size:A4; margin:10mm; }
}

/* Badge: NEW */
.badge-new{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  margin-inline-start:8px;
  font-size:11px;
  font-weight:700;
  color:#065f46; /* سبز تیره */
  background:linear-gradient(180deg,#d1fae5,#a7f3d0); /* سبز روشن */
  border:1px solid #34d399;
  border-radius:999px;
  vertical-align:middle;
}
.badge-new::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 0 rgba(16,185,129,.6);
  animation:pulseDot 1.8s infinite;
}
@keyframes pulseDot{
  0%{   box-shadow:0 0 0 0 rgba(16,185,129,.6); }
  70%{  box-shadow:0 0 0 10px rgba(16,185,129,0); }
  100%{ box-shadow:0 0 0 0 rgba(16,185,129,0); }
}

/* =========================
   افزونه‌های کم‌ریسک و پولیش
   ========================= */

/* فوکوس واضح برای کیبورد */
.tab-btn:focus-visible,
.btn:focus-visible,
.hg-form .btn:focus-visible,
.hg-pagination button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 60%, #fff);
  outline-offset: 2px;
  border-radius: 10px;
}

/* دکمه غیرفعال یک‌دست */
.gc-disabled,
.hg-pagination button:disabled {
  opacity: .6;
  cursor: not-allowed !important;
}

/* شکست امن کلمات خیلی بلند داخل حباب‌ها */
.hg-bubble .content {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* کاهش حرکت برای کاربران حساس */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .badge-new::before { animation: none !important; }
}

/* تاچ‌تارگت بزرگ‌تر در موبایل */
.hg-pagination button,
.tab-btn,
.hg-form .btn,
.btn {
  min-height: 40px;
  min-width: 40px;
}

/* iOS sticky ریزفیکس */
@supports (-webkit-touch-callout: none) {
  .hg-topbar { position: sticky; }
}

/* دارک‌مود سیستمی (اختیاری) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b1220; --card:#0f172a;
    --border:#1f2a44; --muted:#9aa4b2; --primary:#3b82f6;
  }
  body.page-template-harsanieh-gratitudes-chat{ background:var(--bg) !important; color:#e8eef7 !important; }
  .hg-left,.hg-form,.hg-feed,.gc-simple-list li,.hg-medals-card,.hg-bubble {
    background: var(--card);
    border-color: var(--border);
    color: #e5e7eb;
  }
  .hg-tag { background:#0b1326; border-color: var(--border); color:#c7d2fe; }
  .hg-tag.lock { background:#28190f; border-color:#8a5a2c; color:#fbbf24; }
  .hg-pagination button { background:rgba(255,255,255,.10); color:#e5e7eb; }
  .gc-simple-list .title{ color:#e5e7eb; }
  .gc-simple-list .date{ color:#9aa4b2; }
  .hg-topbar { background: rgba(11,18,32,.75); border-bottom-color: var(--border); }
}
/* ==== Mobile polish for CTA & layout ==== */
@media (max-width: 520px){
  /* خط شمارنده عمودی و خواناتر */
  .hg-counter-line{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    font-size: 13px;
    line-height: 1.8;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
  }
  .hg-counter-badge{
    align-self: flex-start;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 999px;
  }

  /* CTA تمام‌عرض، دکمه‌مانند و قابل لمس */
  #gc-buy{
    display: block !important;
    width: 90%;
    text-align: center;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 900;
    background: var(--primary);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
  }
  #gc-buy:active{ transform: translateY(1px); }

  /* حباب‌ها و کارت‌ها فشرده‌تر */
  .hg-bubble{ padding: 12px; }
  .hg-bubble .content{ font-size: 14px; line-height: 1.7; }
  .hg-form textarea{ font-size: 14px; }

  /* تب‌ها قابل اسکرول با لمس بهتر */
  .gc-tabs{ gap: 6px; padding: 0 4px; }
  .tab-btn{ padding: 8px 10px; font-size: 13px; }

  /* توست CTA (از js) شیک‌تر در موبایل */
  .gg-toast-wrap{ right: 8px !important; left: 8px !important; }
  .gg-toast{ border-radius: 12px !important; padding: 12px 14px !important; }
}

/* حالت وقتی به سقف رسید (اگر با PHP/JS نمایش داده می‌شود، فقط استایل بهتر) */
#gc-buy{ transition: transform .08s ease, box-shadow .12s ease; }
#gc-buy:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.16); }
/* ===== MONSUN-LIKE TOPBAR (with RTL fix & font) ===== */
.hg-topbar.msn{
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9ff 60%, #f6f9ff00 100%);
  border-bottom: 1px solid rgba(0,0,0,.04);
  backdrop-filter: blur(6px);
  direction: rtl; /* متن راست‌به‌چپ */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "IRANYekan", Vazirmatn, sans-serif; /* فونت شبیه مون‌سان */
}
.hg-topbar.msn .hg-topbar-inner{
  max-width: 1200px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  /* آواتار سمت راست می‌ماند، پِل‌ها می‌روند سمت چپ */
}
.hg-topbar.msn .msn-left{
  margin-inline-start: auto; /* در RTL = هل دادن به چپ */
  display:flex; align-items:center; gap:10px;
}

/* پِل عمومی */
.msn-pill{
  display:inline-flex; align-items:center; gap:10px;
  height: 36px; padding: 0 14px;
  border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 13px; line-height: 1.1;
  color: #0c1b1e; background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}
.msn-pill:hover{ filter: brightness(1.03); }
.msn-pill-label{ white-space: nowrap; }

/* پِل سبز (پریمیوم) */
.msn-pill--green{
  background: #e9fff2;
  color: #0b7a3a;
  border-color: rgba(11,122,58,.15);
}

/* پِل مدال (به جای گل‌ها) */
.msn-pill--medal .msn-pill-medal-icon{
  width: 22px; height: 22px; border-radius: 999px; display:inline-block;
  box-shadow: inset 0 0 0 2px #fff, 0 1px 2px rgba(0,0,0,.08);
  background:
    radial-gradient(circle at 30% 30%, #fff6 0 40%, transparent 41%),
    conic-gradient(#f7c948 0 70%, #f1a208 70% 100%); /* طلایی */
  position: relative;
}
.msn-pill--medal .msn-pill-medal-icon::after{
  content: "🏅";
  position:absolute; inset:0; display:grid; place-items:center; font-size:13px;
}
/* اگر آیکن سفارشی از PHP آمد */
.msn-pill--medal .msn-pill-medal-icon[style*="--medal"]{
  background: var(--medal) no-repeat center/cover, #f7c948;
}

/* آواتار راست (مربع گرد با گرادیان) */
.msn-avatar{
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(145deg, #046a6a, #0b8c8c);
  display:grid; place-items:center; text-decoration:none; color:#e8eef7;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  overflow: hidden;
}
.msn-avatar img{ width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
.msn-avatar span{ font-size: 22px; line-height: 1; }

/* ریسپانسیو */
@media (max-width: 640px){
  .msn-pill{ height:34px; padding:0 12px; font-size:12px; }
  .msn-avatar{ width:40px; height:40px; border-radius:10px; }
}