/*
.stage-viewport {
  overflow: hidden;
  width: 100%;
}

.stage {
  width: 100%;
  min-height: 300px;
  transition: transform .28s ease, opacity .28s ease;
  transform: translateX(0);
  opacity: 1;
}

// পুরনো কন্টেন্ট বামে সরে যাবে (ডান থেকে বামে ট্যাব সিলেক্ট করলে) 
.stage.slide-out-left  { transform: translateX(-40px); opacity: 0; }
.stage.slide-out-right { transform: translateX(40px);  opacity: 0; }

// নতুন কন্টেন্ট ডান দিক থেকে স্লাইড করে জায়গামতো আসবে 
.stage.exit-left   { transform: translateX(-40px); opacity: 0; }
.stage.exit-right  { transform: translateX(40px);  opacity: 0; }
.stage.enter-left  { transform: translateX(-40px); opacity: 0; }
.stage.enter-right { transform: translateX(40px);  opacity: 0; }
.stage.settled     { transform: translateX(0); opacity: 1; }

.convertMode.activeMode {
  cursor: default;
}
.convertMode {
  cursor: pointer;
} */

.stage-viewport {
  overflow: hidden;
  width: 100%;
}

.stage {
  width: 100%;
  min-height: 300px;
  transition: transform .28s ease, opacity .28s ease;
  transform: translateX(0);
  opacity: 1;
}

/* পুরনো কন্টেন্ট সরে যাওয়ার সময়কার অবস্থা */
.stage.exit-left   { transform: translateX(-40px); opacity: 0; }
.stage.exit-right  { transform: translateX(40px);  opacity: 0; }

/* নতুন কন্টেন্ট বসানোর ঠিক মুহূর্তে (এখনো দেখা যাবে না) এই অবস্থায় থাকে */
.stage.enter-left  { transform: translateX(-40px); opacity: 0; }
.stage.enter-right { transform: translateX(40px);  opacity: 0; }

/* এক ফ্রেম পরে এখানে আনা হয় — তখনই transition ঘটে, স্লাইড দেখা যায় */
.stage.settled { transform: translateX(0); opacity: 1; }

/* ---------- টেক্সটবক্সের উচ্চতা: fixed 350px এর বদলে viewport-ভিত্তিক ----------
   style.css এ .textareaContainer .textarea { height: 350px; } আছে — এটা
   override করা হলো, যাতে নিচের খালি জায়গাটা টেক্সটবক্সেই চলে যায়।
   "260px" সংখ্যাটা হেডার + ট্যাববার + প্যাডিং মিলিয়ে যতটুকু জায়গা লাগে তার
   হিসাব — আপনার স্ক্রিনে কম/বেশি ফাঁকা লাগলে শুধু এই সংখ্যাটা কমান-বাড়ান। */
.textareaContainer .textarea {
  height: calc(90vh - 250px);
  min-height: 300px;   /* ছোট স্ক্রিনে খুব বেশি ছোট না হয়ে যায়, তার জন্য */
  max-height: 400px;   /* বড় মনিটরে অতিরিক্ত লম্বা না হয়ে যায়, তার জন্য (ঐচ্ছিক) */
}

.convertMode.activeMode {
  cursor: default;
}
.convertMode {
  cursor: pointer;
}