:root {
      /* Vision Pro Dark Theme Colors */
      --bg-ambient: #000000;
      --glass-bg: rgba(20, 20, 20, 0.45);
      --glass-bg-hover: rgba(40, 40, 40, 0.55);
      --glass-bg-active: rgba(255, 255, 255, 0.1);
      
      --glass-border: rgba(255, 255, 255, 0.08);
      --glass-border-hover: rgba(255, 255, 255, 0.2);
      
      --text-main: #f5f5f7;
      --text-muted: #86868b;
      
      --radius-sm: 12px;
      --radius-md: 18px;
      --radius-lg: 24px;
      --radius-pill: 50px;
      
      --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, Tahoma;
      
      /* Blur Values */
      --blur-light: blur(12px) saturate(180%);
      --blur-heavy: blur(24px) saturate(200%);
    }

    /* ===== BASE ===== */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      min-height: 100vh; /* تغییر از height: 100% به min-height: 100vh تا با محتوا کش بیاید */
      background-color: var(--bg-ambient);
      background-attachment: fixed; /* این خط باعث می‌شود بک‌گراند همیشه ثابت بماند و پایین صفحه سیاه نشود */
      color: var(--text-main);
      font-family: var(--font-main);
      font-size: 15px;
      
      /* تغییر overflow برای فعال‌سازی اسکرول */
      overflow-y: auto; 
      overflow-x: hidden; 
      
      -webkit-font-smoothing: antialiased;
      user-select: none; /* جلوگیری از انتخاب متن در کل صفحه شبیه نرم افزار */
    }
    /* اجازه انتخاب متن فقط در ورودی ها */
    textarea, input {
      user-select: text;
    }

    .app-wrapper {
      height: 100vh;
      display: flex;
      flex-direction: column;
      background: radial-gradient(circle at 5% 0%, #1b1b1b 0%, #0f0f0f 40%),
                  radial-gradient(circle at 85% 100%, #1f1f1f 0%, #0f0f0f 60%),
                  #000000;
    }

    body.studio-app {
      overflow: hidden;
      height: 100vh;
    }
    body.studio-app .studio-shell {
      display: flex;
      height: 100vh;
      width: 100%;
      min-height: 0;
    }
    body.studio-app .studio-workspace {
      flex: 1;
      min-width: 0;
      min-height: 0;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    body.studio-app .studio-workspace > .app-wrapper {
      flex: 1;
      min-height: 0;
      height: 100%;
      width: 100%;
    }


    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }

    .main-container { display: flex; flex-direction: column; height: 100%; position: relative; }
    .content-constrained {
      width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px;
    }
    
    /* ===== HEADER ===== */
    header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      padding: 15px 25px;
      border-bottom: none;
      transform: translateY(-100%);
      opacity: 0;
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 1001 !important; /* هدر باید از همه چیز بالاتر باشد */
      position: relative; /* مطمئن شویم پوزیشن دارد */
}
    header.visible {
      transform: translateY(0);
      opacity: 1;

}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15); /* رنگ نیمه‌شفاف برای نوار اسکرول */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3); /* روشن‌تر شدن هنگام هاور */
}

/* =========================================
   اصلاح اندازه کادر استایل هنگام جمع شدن
   ========================================= */
   .style-section-wrapper {
    /* سایر استایل‌های قبلی این کلاس سر جایش بماند */
    padding: 20px 30px; 
    transition: all 0.4s ease;
}

/* این کلاس جدید را اضافه کنید تا وقتی کادر جمع می‌شود، ارتفاع آن کمتر شود */
.style-section-wrapper.is-collapsed {
    padding: 10px 30px; /* کاهش فاصله بالا و پایین */
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5); /* کمی تیره‌تر شدن هنگام بسته بودن */
}



    /* ===== BUTTONS ===== */
    button {
      background: var(--glass-bg); color: #fff; border: 1px solid rgb(255 255 255 / 0%); padding: 6px 12px;
      font-size: 14px; font-weight: 500; border-radius: var(--radius-pill); cursor: pointer; transition: all 0.3s;
      backdrop-filter: var(--blur-light); -webkit-backdrop-filter: var(--blur-light);
    }
    button:hover { background: var(--glass-bg-hover); border-color: var(--glass-border-hover); box-shadow: 0 4px 15px rgba(0,0,0,0.3); transform: scale(1.02); }
    button.secondary { background: transparent; color: var(--text-main); }
    button.secondary:hover { background: rgba(255,255,255,0.05); }
    
    /* ===== AI WORKSPACE ===== */
    .workspace-container { width: 100%; max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; text-align: left; }
    .workspace-title { font-size: 32px; font-weight: 600; color: #fff; text-align: center; margin-bottom: 10px; letter-spacing: 1px; }
    
    .anim-item { opacity: 0; transform: translateY(20px); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
    .anim-item.show-anim { opacity: 1; transform: translateY(0); }

    textarea[dir="rtl"],
    input[dir="rtl"] {
      direction: rtl !important;
      text-align: right !important;
      unicode-bidi: isolate;
    }
    textarea[dir="ltr"],
    input[dir="ltr"] {
      direction: ltr;
      text-align: left;
      unicode-bidi: isolate;
    }

    /* Masked text, not type=password, so installed Chrome does not
       offer "Fill Password" on every navigation. */
    input.secret-input {
      -webkit-text-security: disc;
      text-security: disc;
    }