/* ==========================================================================
   word-responsive.css  v1.0.0
   لایه‌ی ریسپانسیو ابزار ورد آنلاین (word_editor.php)

   - این فایل «بعد از» word.css / word-ui.css / custom.css لود می‌شود و هیچ
     قانونی را در فایل‌های قبلی حذف یا بازنویسی نمی‌کند؛ فقط روی تبلت/موبایل
     و دستگاه‌های لمسی لایه‌ی اضافه می‌کند. نمای دسکتاپ بدون تغییر می‌ماند.
   - کلاس‌های کمکی که توسط word-responsive.js اضافه می‌شوند:
       .wd-fluid          روی #wdApp  → حالت «متنی/بازچینش» (کاغذ به عرض صفحه)
       html.wd-is-fluid   روی <html>  → برای دکمه‌های بیرون از ادیتور
   - بریک‌پوینت‌ها:  ≤1150px تبلت (هم‌راستا با sidebar.css)
                    ≤768px  موبایل
                    ≤600px  گوشی (باتم‌شیت دیالوگ‌ها)
                    ≤480px  گوشی کوچک
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) پایه: لمس، فوکوس، حذف تأخیر ۳۰۰ms
   -------------------------------------------------------------------------- */
.wd-app { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.wd-app button,
.wd-tab, .wd-big, .wd-sm, .wd-ib, .wd-style, .wd-status button,
.persistent-toolbar .btn-mini, .persistent-toolbar .btn-premium { touch-action: manipulation; }

/* حلقه‌ی فوکوس برای کاربران کیبورد (فقط با focus-visible، نه با لمس/کلیک) */
.wd-ribbon :focus-visible,
.wd-menu :focus-visible,
.wd-status :focus-visible,
.wd-dialog :focus-visible { outline: 2px solid #2B579A; outline-offset: -2px; }
.wd-titlebar :focus-visible,
.wd-tabs :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.persistent-toolbar :focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

/* دکمه‌ی A4 (فقط موبایل؛ توسط JS ساخته می‌شود) */
.wd-status .wd-a4btn {
    display: none; min-width: 34px; height: 22px; padding: 0 6px; border: 1px solid transparent; background: transparent;
    font: 700 11px/1 "Segoe UI", Tahoma, Arial, sans-serif; color: #444; cursor: pointer; letter-spacing: .3px;
}
.wd-status .wd-a4btn:hover { background: #E1E1E1; }
.wd-status .wd-a4btn.is-active { background: #C8C8C8; }

/* محو شدن لبه‌ها وقتی ریبون/نوار دکمه‌ها قابل اسکرول است (مقادیر را JS می‌دهد) */
.wd-ribbon,
.persistent-toolbar {
    --fl: 0px; --fr: 0px;
}

/* --------------------------------------------------------------------------
   1) تبلت و کوچک‌تر (≤1150px) — سایدبار به‌صورت drawer است
   -------------------------------------------------------------------------- */
@media (max-width: 1150px) {
    .header-h1-title { font-size: clamp(18px, 4.6vw, 26px); line-height: 1.55; }

    /* زیر نوار بالای ثابت (۵۶px) بچسبد، نه ۷۰px */
    .wd-chrome { top: 56px !important; }

    .wd-tabs {
        overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .wd-tabs::-webkit-scrollbar { display: none; }
    .wd-tab { flex: none; }

    .wd-ribbon {
        -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
    }
    .wd-ribbon::-webkit-scrollbar { display: none; }
    .wd-group { scroll-snap-align: start; }

    /* پنل کادرها / هوش مصنوعی */
    .ai-sidebar { max-width: 100vw; }
}

/* --------------------------------------------------------------------------
   2) دستگاه‌های لمسی: دکمه‌های ریبون بزرگ‌تر (حداقل هدف لمس ~۴۰px)
      با zoom کل ریبون متناسب بزرگ می‌شود تا چیدمان گروه‌ها به‌هم نریزد.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) and (max-width: 1150px) {
    .wd-ribbon { zoom: 1.2; }
    .wd-qbtn { width: 36px; height: 34px; }
    .wd-spin { font-size: 16px; height: 26px; }          /* جلوگیری از zoom خودکار iOS */
    .wd-tell input { font-size: 16px; }
}
/* hover چسبنده روی لمس نداشته باشیم */
@media (hover: none) {
    .wd-big:hover, .wd-sm:hover, .wd-ib:hover, .wd-gallery-nav button:hover,
    .wd-tab:hover, .wd-qbtn:hover, .wd-act:hover { background: transparent; border-color: transparent; }
    .wd-tab.is-active:hover { background: var(--wd-ribbon, #F3F3F3); }
    .wd-tab-file:hover { background: var(--wd-blue-dark, #234A85); }
    .wd-big:active, .wd-sm:active, .wd-ib:active { background: var(--wd-press, #C8C8C8); }
    .persistent-toolbar .btn-mini:hover, .persistent-toolbar .btn-premium:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   3) حالت «متنی / بازچینش» (.wd-fluid)
      موبایل (≤768px) به‌صورت پیش‌فرض + Web Layout در دسکتاپ.
      به‌جای کوچک کردن A4 تا ۴۰٪، کاغذ عرض صفحه را می‌گیرد و متن خوانا می‌ماند.
      خروجی Word / PDF / چاپ دست‌نخورده A4 می‌ماند (جداگانه صفحه‌بندی می‌شود).
   -------------------------------------------------------------------------- */
.wd-app.wd-fluid {
    /* !important تا بر مقادیر inline که applyGeometry() ست می‌کند غلبه کند */
    --wd-mx: 20px !important;
    --wd-mt: 12px !important;
    --wd-mb: 12px !important;
    --wd-hdr-top: 10px !important;
    --wd-ftr-bot: 10px !important;
    --wd-zoom: 1 !important;
}
.wd-app.wd-fluid .wd-workspace {
    padding: 10px 8px 20px;
    min-height: calc(100vh - 230px); min-height: calc(100dvh - 230px);
    overflow-x: hidden;
}
.wd-app.wd-fluid .wd-zoomwrap { zoom: 1 !important; width: 100%; max-width: 100%; margin: 0; }
.wd-app.wd-fluid .wd-page,
.wd-app.wd-fluid .wd-page.landscape {
    width: 100%; max-width: 960px; min-height: calc(100vh - 270px); min-height: calc(100dvh - 270px);
}
.wd-app.wd-fluid .wd-page { box-shadow: 0 0 0 1px #d4d4d4, 0 1px 4px rgba(0,0,0,.12); }
.editor-wrapper.wd-app.wd-fluid .wd-page #editor.editor {
    min-height: 40vh; font-size: 16px; line-height: 1.9;
    overflow-wrap: break-word; word-wrap: break-word;
}
.wd-app.wd-fluid #editor img { max-width: 100%; height: auto; }
.wd-app.wd-fluid #editor table { max-width: 100%; table-layout: auto; }
.wd-app.wd-fluid #editor pre { max-width: 100%; }

/* در حالت متنی، مفهوم «صفحه A4 / زوم / شماره صفحه» بی‌معنی است */
.wd-app.wd-fluid .page-break-overlay,
.wd-app.wd-fluid #wdPageInfo,
.wd-app.wd-fluid #wdZoomOut, .wd-app.wd-fluid #wdZoomIn,
.wd-app.wd-fluid .wd-zoom-slider, .wd-app.wd-fluid #wdZoomVal { display: none !important; }
html.wd-is-fluid #togglePageBreaksBtn { display: none !important; }

/* --------------------------------------------------------------------------
   4) موبایل (≤768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .wd-chrome { top: 56px !important; }

    /* ---- نوار دکمه‌های بالای ابزار: یک ردیف قابل اسکرول به‌جای چندخطه ---- */
    .persistent-toolbar {
        flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 8px -4px 12px; padding: 4px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
    }
    .persistent-toolbar::-webkit-scrollbar { display: none; }
    .persistent-toolbar .btn-mini,
    .persistent-toolbar .btn-premium { flex: none; min-height: 40px; height: 40px; padding: 0 14px; font-size: 13px; scroll-snap-align: start; }
    .persistent-toolbar .toolbar-mini-separator { display: none; }

    /* ---- Title bar / Tabs ---- */
    .wd-titlebar { height: 36px; }
    .wd-qbtn { width: 38px; height: 36px; }
    .wd-qarrow { display: none; }
    .wd-title { font-size: 12px; padding: 0 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wd-tabs { height: 40px; }
    .wd-tab { height: 40px; padding: 0 15px; font-size: 13px; }
    .wd-tab-file { min-width: 56px; margin-right: 2px; }
    /* برچسب «Header & Footer Tools» با overflow تب‌ها بریده می‌شد */
    .wd-ctx::before, .wd-ctx-label { display: none; }
    .wd-ctx { margin-left: 0; }

    /* ---- منوها ---- */
    .wd-menu {
        max-width: calc(100vw - 12px); max-height: 70vh; max-height: 70dvh; overflow-y: auto;
        -webkit-overflow-scrolling: touch; font-size: 14px;
    }
    .wd-menu button { min-height: 42px; font-size: 14px; padding: 8px 16px 8px 12px; }
    .wd-menu .wd-mhead { font-size: 12px; padding: 6px 12px; }

    /* ---- Status bar ---- */
    .wd-status {
        height: calc(36px + env(safe-area-inset-bottom, 0px)); padding: 0 8px env(safe-area-inset-bottom, 0px);
        gap: 10px; overflow-x: auto; scrollbar-width: none;
    }
    .wd-status::-webkit-scrollbar { display: none; }
    .wd-status .wd-sitem { flex: none; }
    .wd-status .wd-right { flex: none; gap: 2px; }
    .wd-status .wd-vbtn { width: 36px; height: 30px; }
    .wd-status .wd-a4btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; min-width: 38px; }
    .wd-zoom-btn { width: 30px; height: 30px; font-size: 20px; }
    .wd-zoom-slider { width: 80px; }

    /* ---- Backstage (منوی File) ---- */
    .wd-backstage { flex-direction: column; }
    .wd-bs-nav { width: 100%; display: flex; align-items: center; overflow-x: auto; padding-top: 0; flex: none; scrollbar-width: none; }
    .wd-bs-nav::-webkit-scrollbar { display: none; }
    .wd-bs-back { flex: none; width: 48px; height: 46px; }
    .wd-bs-nav .wd-bs-item { width: auto; flex: none; white-space: nowrap; padding: 13px 16px; font-size: 14px; }
    .wd-bs-main { padding: 18px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .wd-bs-main h2 { font-size: 22px; margin-bottom: 14px; }
    .wd-bs-main .wd-bs-big { display: flex; width: 100%; margin: 0 0 10px; padding: 14px 16px; }

    /* ---- دیالوگ‌های داخلی ورد (wd-dialog) ---- */
    .wd-dialog { min-width: 0 !important; width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
    .wd-dialog-body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; }
    .wd-dialog-head { height: 44px; font-size: 14px; flex: none; }
    .wd-dialog-x { width: 48px; height: 44px; }
    .wd-dialog-body input[type=text], .wd-dialog-body select { height: 40px; font-size: 16px; }
    .wd-dialog-body .wd-list div { padding: 10px 10px; }
    .wd-dialog-foot { flex-wrap: wrap; flex: none; }
    .wd-btn { min-width: 88px; height: 40px; font-size: 14px; }

    /* ---- مودال‌های سایت (نامه اداری، جدول، ورود، اعتبار، کادر) ---- */
    .modal-content {
        margin: 12px auto; padding: 20px 16px; width: calc(100% - 24px); border-radius: 16px;
    }
    .modal-content h2 { font-size: 18px; line-height: 1.6; }
    .modal-content input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
    .modal-content select { min-height: 44px; font-size: 16px; padding: 10px 12px; }
    .modal-content textarea { min-height: 120px; font-size: 16px; padding: 10px 12px; }
    .modal-content button, .modal-content .btn { min-height: 44px; }
    .modal-content .modal-action-btn-primary { width: 100%; }
    .modal .close { padding: 0 8px; font-size: 34px; line-height: 40px; }
    .large-modal-content { max-width: 100% !important; }

    /* ---- پنل هوش مصنوعی / سئو (سایدبار راست) ---- */
    .ai-sidebar-tabs { overflow-x: auto; scrollbar-width: none; }
    .ai-sidebar-tabs::-webkit-scrollbar { display: none; }
    .ai-sidebar-tab-btn { flex: 1 0 auto; min-width: 72px; padding: 14px 10px; font-size: 12px; }
    .ai-sidebar-close { width: 44px; height: 44px; font-size: 24px; }
    .sidebar-input, .sidebar-textarea { font-size: 16px; }
    .ai-sidebar-content { -webkit-overflow-scrolling: touch; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    .ai-slash-menu { max-width: calc(100vw - 16px); }

    /* ریل تاریخچه نسخه‌ها: روی لبه‌ی چپ کاغذ می‌نشیند، نیمه‌بیرون نرود */
    .ai-history-rail { transform: none !important; }

    /* متن «درباره ابزار» زیر ادیتور */
    .about_tool { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   5) گوشی (≤600px): دیالوگ‌ها به‌صورت Bottom Sheet، ریبون پیش‌فرض بسته
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .wd-overlay { align-items: flex-end; }
    .wd-dialog {
        width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh; border: 0;
        border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: wdSheetUp .2s ease-out;
    }
    .wd-dialog-foot .wd-btn { flex: 1 1 40%; }
    .wd-title { display: none; }                   /* جا برای دکمه‌های QAT و دکمه‌های دانلود/چاپ */
}
@keyframes wdSheetUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }

/* --------------------------------------------------------------------------
   6) گوشی کوچک (≤480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .upseo-main-panel { padding: 10px !important; }
    .wd-app.wd-fluid { --wd-mx: 16px !important; }
    .wd-app.wd-fluid .wd-workspace { padding: 8px 4px 16px; }

    /* پنل کادرها/هوش مصنوعی: تمام‌عرض */
    .ai-sidebar { width: 100vw; right: -105vw; height: 100vh; height: 100dvh; }
    .ai-sidebar.active { right: 0; }
}

/* --------------------------------------------------------------------------
   7) گوشی در حالت افقی (landscape): ارتفاع کم است؛ نوار ابزار نباید جا بگیرد
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .wd-chrome { position: relative !important; top: auto !important; }
    .wd-app.wd-fluid .wd-workspace { min-height: 70vh; }
    .wd-app.wd-fluid .wd-page { min-height: 60vh; }
    .wd-dialog { max-height: calc(100dvh - 16px); }
    .wd-overlay { align-items: center; }
    .wd-dialog { border-radius: 8px; width: min(560px, calc(100vw - 24px)); }
}

/* --------------------------------------------------------------------------
   8) کاهش حرکت
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .wd-dialog { animation: none; }
    .ai-sidebar { transition: none !important; }
    .wd-ribbon, .persistent-toolbar, .wd-tabs { scroll-behavior: auto; }
}

/* چاپ: هیچ‌کدام از قوانین بالا نباید روی خروجی اثر بگذارد */
@media print {
    .wd-app.wd-fluid .wd-zoomwrap, .wd-app.wd-fluid .wd-page { max-width: none; }
    .wd-ribbon { zoom: 1; -webkit-mask-image: none; mask-image: none; }
}


/* H1 داخل نوار عنوان ورد (بعد از قوانین عمومی h1 تا بازنویسی نشود) */
.wd-chrome .wd-titlebar h1.wd-h1 { font-size: 12.5px !important; line-height: 30px !important; }
@media (max-width: 1150px) { .wd-chrome .wd-titlebar h1.wd-h1 { font-size: 12.5px !important; line-height: 36px !important; } }
@media (max-width: 600px) { .wd-chrome .wd-titlebar h1.wd-h1 { max-width: 55%; font-size: 12px !important; } }

/* ===== کم‌کردن فضای بالای ریبون و حذف نوار خاکستری ===== */
/* ارتفاع هدر ثابت ۵۶px است؛ top:70px باعث می‌شد زمینه‌ی خاکستری بالای نوار آبی دیده شود */
.wd-chrome { top: 56px !important; }
@media (max-width: 768px) { .wd-chrome { top: 56px !important; } }

/* نوار دکمه‌های قدیمی فقط دکمه‌های مخفی دارد؛ حاشیه‌اش فضای خالی می‌ساخت */
.main-index > .persistent-toolbar { margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: 0 !important; overflow: visible; }

/* پدینگ‌های بالای پنل و کادر اصلی */
.upseo-main-panel { padding-top: 8px !important; }
.upseo-main-panel .main-index { padding-top: 8px !important; }
.upseo-main-panel .editor-wrapper.wd-app { margin-top: 0 !important; }
@media (max-width: 640px) {
    .upseo-main-panel { padding-top: 4px !important; }
    .upseo-main-panel .main-index { padding-top: 4px !important; }
}

/* ===== چسبیدن ریبون به بالا: زمینه‌ی کادر آبی شود تا هیچ نوار خاکستری بالای ریبون دیده نشود ===== */
.editor-wrapper.wd-app { background: var(--wd-blue, #2B579A) !important; }
.editor-wrapper.wd-app .wd-workspace { background: var(--wd-canvas, #E6E6E6); }

/* ===== ریبون دقیقاً به لبه‌ی بالای کادر بچسبد =====
   .upseo-main-panel دارای overflow-x:hidden است و در عمل خودش محفظه‌ی اسکرول می‌شود؛
   پس فاصله‌ی sticky نسبت به بالای همین پنل حساب می‌شود (نه بالای پنجره) و top:56px
   ریبون را ~۴۰px پایین می‌راند و نوار آبی/خاکستری خالی می‌ساخت. */
.wd-chrome,
.editor-wrapper.wd-app > .wd-chrome { top: 0 !important; }
@media (max-width: 1150px) { .wd-chrome { top: 0 !important; } }
@media (max-width: 768px) { .wd-chrome { top: 0 !important; } }