/* ====== پشتیبانی: صفحه‌ی اصلی، آموزش‌ها، چت ====== */
.support-hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 18px 0; }
.support-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--primary-color); background: #fff; border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 16px; padding: 22px; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07); transition: transform 0.25s, box-shadow 0.25s; }
.support-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12); }
.support-card h3 { font-size: 1.15rem; }
.support-card p { color: var(--text-muted); line-height: 1.8; font-size: 0.92rem; }
.support-ico { font-size: 2.2rem; }

.tutorial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; margin: 14px 0; }
.tutorial-card { background: #fff; border-radius: 14px; padding: 12px 12px 16px; box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; gap: 8px; }
.tutorial-card h3 { font-size: 1rem; color: var(--primary-color); line-height: 1.7; }
.tutorial-card.is-off { opacity: 0.6; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0F172A; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #94A3B8; font-size: 0.9rem; }
.tutorial-form textarea[name="video"] { font-family: monospace; font-size: 0.85rem; }

/* ---- سؤال و جواب (آکاردئون آموزش‌ها) ---- */
.faq { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; max-width: 860px; }
.faq-item { background: #fff; border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); overflow: hidden; transition: box-shadow 0.25s, border-color 0.25s; scroll-margin-top: 80px; }
.faq-item:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1); }
.faq-item.is-open { border-color: var(--gold-solid); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); }
.faq-q { font-size: 1rem; margin: 0; }
.faq-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 1.02rem; font-weight: 700; color: var(--primary-color); text-align: right; line-height: 1.7; }
.faq-btn:focus-visible { outline: 3px solid rgba(212, 175, 55, 0.5); outline-offset: -3px; border-radius: 14px; }
.faq-num { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-color); color: var(--gold-solid); font-size: 0.85rem; }
.faq-title { flex: 1; min-width: 0; }
.faq-chev { flex: 0 0 auto; color: var(--gold-solid); transition: transform 0.35s ease; }       /* بسته: > (در راست‌به‌چپ به سمت چپ) */
.faq-item.is-open .faq-chev { transform: rotate(-90deg); }                                      /* باز: به سمت پایین */
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s ease; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-panel-inner { overflow: hidden; min-height: 0; padding: 0 18px; }
.faq-item.is-open .faq-panel-inner { padding-bottom: 18px; }
.faq-desc { color: var(--text-muted); line-height: 1.9; margin-bottom: 12px; font-size: 0.93rem; }
@media (prefers-reduced-motion: reduce) { .faq-panel, .faq-chev { transition: none; } }

/* ====== چت پشتیبانی ====== */
.chat-shell { max-width: 880px; margin: 14px auto 0; }
.chat { background: #fff; border-radius: 20px; box-shadow: 0 10px 34px rgba(15, 23, 42, 0.12); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.4); }
.chat--user { height: clamp(520px, calc(100dvh - 190px), 820px); }
.chat--admin { height: clamp(520px, calc(100dvh - 160px), 780px); }

.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--primary-color); color: #F1F5F9; flex: 0 0 auto; }
.chat-back { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; color: var(--gold-solid); text-decoration: none; margin-inline-end: -4px; }
.chat-back:active { background: rgba(255, 255, 255, 0.12); }
.chat-avatar { width: 42px; height: 42px; border-radius: 50%; background: rgba(212, 175, 55, 0.18); border: 1px solid rgba(212, 175, 55, 0.6); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 auto; }
.chat-head-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.chat-head-info b { font-size: 1.02rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #94A3B8; }
.chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); flex: 0 0 auto; }
.chat-dot.is-off { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
.chat-banner { flex: 0 0 auto; background: #FEF3C7; color: #92400E; font-size: 0.85rem; font-weight: 600; padding: 8px 16px; text-align: center; border-bottom: 1px solid #FDE68A; }

.chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 18px 10px; display: flex; flex-direction: column; gap: 10px; background: #F4F8FC; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.chat-empty { margin: auto; text-align: center; max-width: 420px; line-height: 1.9; color: var(--text-muted); }
.chat-empty-ico { font-size: 2.6rem; margin-bottom: 4px; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.chat-chip { font-family: inherit; font-size: 0.85rem; padding: 7px 14px; border-radius: 18px; border: 1px solid rgba(212, 175, 55, 0.7); background: #fff; color: var(--primary-color); cursor: pointer; transition: background 0.2s; }
.chat-chip:hover { background: #FFFBEB; }
.chat-day { align-self: center; margin: 6px 0; }
.chat-day span { background: #E2E8F0; color: #475569; font-size: 0.74rem; padding: 2px 12px; border-radius: 12px; }

.bubble { max-width: min(74%, 560px); padding: 9px 14px 6px; border-radius: 16px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); word-break: break-word; overflow-wrap: anywhere; animation: bubble-in 0.22s ease-out; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bubble.is-mine { align-self: flex-start; background: var(--primary-color); color: #F1F5F9; border-bottom-right-radius: 4px; }   /* RTL: سمت راست = شروع */
.bubble.is-theirs { align-self: flex-end; background: #fff; color: var(--text-main); border-bottom-left-radius: 4px; border: 1px solid #E2E8F0; }
.bubble.is-theirs.from-admin { border-color: rgba(212, 175, 55, 0.6); background: #FFFBEB; }
.bubble-who { font-size: 0.74rem; font-weight: 800; opacity: 0.75; margin-bottom: 2px; }
.bubble.is-mine .bubble-who { color: var(--gold-solid); opacity: 1; }
.bubble-text { white-space: pre-wrap; line-height: 1.9; font-size: 0.97rem; }
.bubble-img img { display: block; max-width: 100%; max-height: 280px; border-radius: 10px; margin: 4px 0; }
.bubble-time { display: block; font-size: 0.68rem; opacity: 0.6; margin-top: 2px; text-align: left; }

/* ---- باکس نوشتن ---- */
.chat-form { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 12px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; }
.chat-row { display: flex; gap: 10px; align-items: flex-end; }
.chat-input-wrap { position: relative; flex: 1; min-width: 0; }
.chat-row textarea { display: block; width: 100%; resize: none; min-height: 64px; max-height: 220px; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: 16px; font-family: inherit; font-size: 1rem; background: #F8FAFC; outline: none; line-height: 1.9; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.chat-row textarea::placeholder { color: #94A3B8; }
.chat-row textarea:focus { border-color: var(--gold-solid); background: #fff; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18); }
.chat-count { position: absolute; bottom: 6px; left: 12px; font-size: 0.7rem; color: #B45309; background: #fff; padding: 0 4px; border-radius: 6px; }
.chat-attach { flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; border: 1.5px solid var(--border); color: var(--primary-color); cursor: pointer; background: #fff; transition: all 0.2s; }
.chat-attach:hover { border-color: var(--gold-solid); background: #FFFBEB; }
.chat-send { flex: 0 0 auto; height: 48px; min-width: 48px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 14px; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 800; background: var(--gold-gradient); background-size: 200% auto; color: var(--primary-color); box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4); transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; }
.chat-send:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(212, 175, 55, 0.5); }
.chat-send:disabled { opacity: 0.55; cursor: progress; }
.chat-form.is-sending .chat-send svg { animation: chat-pulse 0.8s infinite alternate; }
@keyframes chat-pulse { to { transform: translateX(-4px); opacity: 0.6; } }
.chat-hint { margin: 6px 4px 0; font-size: 0.74rem; color: #94A3B8; }
.chat-preview { position: relative; display: inline-block; margin: 0 0 10px; }
.chat-preview img { max-height: 110px; border-radius: 10px; border: 1px solid var(--border); display: block; }
.chat-preview button { position: absolute; top: -8px; left: -8px; width: 26px; height: 26px; border-radius: 50%; border: none; background: #DC2626; color: #fff; cursor: pointer; }

/* ---- ادمین ---- */
.alias-form { background: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
.alias-form input[type=text] { flex: 0 1 220px; min-width: 140px; }
.seg-link { padding: 7px 16px; text-decoration: none; color: var(--primary-color); font-size: 0.88rem; background: #fff; }
.seg-link.active { background: var(--primary-color); color: var(--gold-solid); }
.support-row { text-decoration: none; color: inherit; align-items: center; }
.support-row.is-unread { border-right: 5px solid #DC2626; }
.support-row:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12); }
.support-last { margin-top: 4px; }
.support-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; align-items: start; }
.admin-two-col .form-container { margin: 0; max-width: none; }
.charge-form { display: flex; flex-direction: column; gap: 10px; }
.charge-form input, .charge-form select { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; background: #F8FAFC; }
.charge-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.credit-balance { font-size: 1.5rem; color: #8A6A12; }
.amount-plus { color: #166534; }
.amount-minus { color: #991B1B; }
.badge-ok { background: var(--success-bg); color: var(--success-text); }
.user-card-actions { flex-direction: row !important; flex-wrap: wrap; gap: 8px !important; align-items: center; }


/* ====== زنده / به‌روزرسانی خودکار ====== */
.live-bar { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); margin: -6px 0 14px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: live-ping 1.8s infinite; }
.live-dot.is-off { background: #EF4444; animation: none; }
@keyframes live-ping { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.flash-num { animation: flash-num 0.9s ease; }
@keyframes flash-num { 0% { color: #16A34A; transform: scale(1.18); } 100% { transform: none; } }
.row-new { animation: row-new 2.2s ease; }
@keyframes row-new { 0% { background: #FEF9C3; } 100% { background: transparent; } }
.just-updated { animation: row-new 1.2s ease; }
.pay-status { display: inline-block; padding: 2px 11px; border-radius: 14px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.pay-paid { background: var(--success-bg); color: var(--success-text); }
.pay-pending { background: #FEF3C7; color: #92400E; }
.pay-failed { background: var(--error-bg); color: var(--error-text); }

/* ====== آیکون چشم رمز عبور ====== */
.pw-field { position: relative; }
.pw-field input { width: 100%; padding: 12px 15px; padding-inline-end: 48px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 1rem; background-color: #F8FAFC; outline: none; transition: all 0.3s; }
.pw-field input:focus { border-color: var(--gold-solid); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); }
.pw-eye { position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 8px; color: #64748B; cursor: pointer; }
.pw-eye:hover, .pw-eye.is-on { color: var(--primary-color); background: rgba(212, 175, 55, 0.14); }
.pw-eye.is-on { color: #8A6A12; }

@media (max-width: 768px) {
    .support-hub, .admin-two-col { grid-template-columns: 1fr; }
    .tutorial-grid { grid-template-columns: 1fr; }
    .faq-btn { padding: 14px; font-size: 0.97rem; gap: 10px; }
    .faq-panel-inner { padding: 0 12px; }
    .faq-item.is-open .faq-panel-inner { padding-bottom: 14px; }

    /* چت کاربر: تمام‌صفحه؛ ارتفاع را جاوااسکریپت با کیبورد هماهنگ می‌کند (--vvh) و باکس نوشتن همیشه پایین و بالای کیبورد است */
    .chat--user { position: fixed; z-index: 300; top: 0; right: 0; left: 0; height: var(--vvh, 100dvh); transform: translateY(var(--vvt, 0px)); border: none; border-radius: 0; box-shadow: none; }
    .chat--user .chat-back { display: inline-flex; }
    .chat--user .chat-head { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
    .chat--admin { height: min(80dvh, 640px); border-radius: 16px; }
    .chat-messages { padding: 14px 12px 8px; }
    .bubble { max-width: 86%; }
    .chat-form { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .chat-row { gap: 8px; }
    .chat-row textarea { min-height: 52px; padding: 11px 14px; font-size: 16px; border-radius: 14px; }   /* ۱۶px: iOS هنگام فوکوس زوم نمی‌کند */
    .chat-attach, .chat-send { width: 46px; height: 46px; padding: 0; border-radius: 13px; }
    .chat-send-label { display: none; }
    .chat-hint { display: none; }
}
html.chat-lock, html.chat-lock body { overflow: hidden; height: 100%; }
body.chat-page .site-footer { display: none; }
@media (max-width: 768px) { body.chat-page .page-back, body.chat-page .navbar, body.chat-page .flash-stack { display: none; } body.chat-page .page-main { padding: 0; } }