/* ============= stage 02 =============== */

/* تنظیمات چیدمان استیج 2 برای هم‌ترازی میلی‌متری با استیج 1 */
#stage-2 #stage2-flow {
    justify-content: flex-start !important;
    padding-top: 0 !important; /* حذف فاصله اضافه تا کادر دقیقا از نقطه شروع استیج 1 باز شود */
    padding-bottom: 78px !important; /* فضای پایین هم‌اندازه با ارتفاع کم‌شدهٔ s2-chatBar */
    height: 100%;
    box-sizing: border-box; /* برای محاسبه صحیح ارتفاع با پدینگ‌ها */
}

/* استایل باکس شیشه‌ای برای ادیتور حرفه‌ای */
.custom-quill-wrapper {
    width: 100%;
    background: var(--glass-bg, rgba(20, 20, 20, 0.45));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    
    /* تغییرات مهم ارتفاع */
    height: 100%; /* پر کردن کل فضای باقی‌مانده (بدون رفتن زیر چت‌بار) */
    flex-grow: 1;
    margin-bottom: 0;
}

/* شخصی‌سازی نوار ابزار بالای ادیتور (تاریک و شیشه‌ای) */
.ql-toolbar.ql-snow {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.02);
    padding: 12px 16px !important;
    font-family: inherit;
}

/* تغییر رنگ آیکون‌های نوار ابزار */
.ql-snow .ql-stroke { stroke: rgba(255, 255, 255, 0.6) !important; }
.ql-snow .ql-fill { fill: rgba(255, 255, 255, 0.6) !important; }
.ql-snow .ql-picker { color: rgba(255, 255, 255, 0.6) !important; }

/* افکت هاور برای آیکون‌های نوار ابزار */
.ql-snow .ql-picker:hover .ql-picker-label,
.ql-snow .ql-picker-label.ql-active,
.ql-snow button:hover .ql-stroke,
.ql-snow button.ql-active .ql-stroke {
    stroke: #ffffff !important;
    color: #ffffff !important;
}
.ql-snow button:hover .ql-fill,
.ql-snow button.ql-active .ql-fill {
    fill: #ffffff !important;
}

/* تنظیمات خود کادر تایپ ادیتور */
.ql-container.ql-snow {
    border: none !important;
    flex-grow: 1;
    overflow-y: auto;
    font-size: 16px;
    color: #ffffff;
}

.ql-editor {
    padding: 30px;
    line-height: 1.8;
}

/* رنگ متن راهنما (Placeholder) */
.ql-editor.ql-blank::before {
    color: rgba(255, 255, 255, 0.3) !important;
    font-style: normal !important;
    left: 30px !important;
}

/* اسکرول‌بار اختصاصی و محو برای ادیتور */
.ql-container::-webkit-scrollbar { width: 6px; }
.ql-container::-webkit-scrollbar-track { background: transparent; }
.ql-container::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.15); 
    border-radius: 10px; 
}
.ql-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }


/* =========================================
   استایل منوهای آبشاری (Drop-downs) ادیتور
========================================= */
.ql-snow .ql-picker-options {
    background-color: #1a1a1a !important; /* پس‌زمینه تیره و مات */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
    padding: 8px 0 !important;
    z-index: 9999 !important; /* برای قرارگیری روی سایر عناصر */
}

/* آیتم‌های داخل منوی آبشاری */
.ql-snow .ql-picker-item {
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 6px 12px !important;
    transition: all 0.2s ease !important;
}

/* هاور و حالت انتخاب شده در منوهای آبشاری */
.ql-snow .ql-picker-item:hover,
.ql-snow .ql-picker-item.ql-selected {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* پالت رنگ‌ها (Color Picker) در Quill */
.ql-snow .ql-color-picker .ql-picker-options,
.ql-snow .ql-icon-picker .ql-picker-options {
    background-color: #1a1a1a !important;
    padding: 10px !important;
    width: 150px !important; /* عرض مناسب برای پالت رنگ */
}

/* استایل کادر انتخابگر (Label) */
.ql-snow .ql-picker-label {
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease;
}
.ql-snow .ql-picker-label:hover {
    color: #fff !important;
}

/* اصلاح رنگ فلش (Arrow) کنار منوهای آبشاری */
.ql-snow .ql-picker-label svg polygon {
    stroke: none !important;
    fill: rgba(255, 255, 255, 0.6) !important;
}
.ql-snow .ql-picker-label:hover svg polygon {
    fill: #ffffff !important;
}

  /* تنظیم فونت پیش‌فرض ادیتور Quill به Tahoma */
  .ql-editor {
    font-family: 'Tahoma', sans-serif !important;
  }

/* استیج ۲: چت‌بار فشرده‌تر تا روی Quill نیفتد؛ نوار ورودی عمودی وسط */
#s2-chatBar.chat-container {
  padding: 10px 0 12px 0;
}

#s2-chatBar .content-constrained {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  box-sizing: border-box;
}

#s2-chatBar .s2-bottom-toolbar {
  margin-bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}

#s2-chatBar .s2-bottom-toolbar .chat-input-wrapper {
  width: 100%;
}