:root {
  --nav-h: 56px;
}

html[lang="bn"] body,
html[lang="bn"] .form-control,
html[lang="bn"] .form-select,
html[lang="bn"] .btn {
  font-family: "Nirmala UI", "Noto Sans Bengali", "SolaimanLipi", "Segoe UI", system-ui, sans-serif;
}

html, body {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;         /* ফোনে ঠিকানার বার লুকালেও মাপ ঠিক থাকে */
  overflow: hidden;           /* only the two panes scroll */
}

/**
 * আঙুলের চাপ সাথে সাথেই ধরুক | no 300ms wait on a phone.
 * দুবার চাপ দিলে ব্রাউজার জুম করবে কি না তার অপেক্ষায় ক্রোম প্রতিটি চাপ
 * একটু দেরি করে ধরত — বোতাম টিপে মনে হতো কিছু হচ্ছে না।
 */
button, a, .btn, .nav-link, .pick-card, .photo-drop, summary, label {
  touch-action: manipulation;
}

/* খুব চওড়া মনিটরে যেন ফাঁকা না থাকে | never leave the viewport unused */
.container-fluid,
.app-shell {
  width: 100%;
  max-width: 100%;
}

.navbar-app {
  height: var(--nav-h);
  z-index: 1035;
}

.brand-mark {
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
  background: var(--bs-primary);
  color: #fff; font-weight: 700; font-size: .85rem;
}

/* দুই পাশ আলাদা স্ক্রল | independent scroll for both panes */
.app-shell {
  height: calc(100vh - var(--nav-h));
  /* ফোনে ঠিকানার বার ওঠানামা করলে 100vh বেশি হয়ে যায়, তখন পাতার নিচের
     অংশ ব্রাউজারের বারের পিছনে ঢাকা পড়ত | dvh follows the real viewport */
  height: calc(100dvh - var(--nav-h));
}

.pane {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

.pane::-webkit-scrollbar { width: 8px; }
.pane::-webkit-scrollbar-thumb {
  background: rgba(128,128,128,.45); border-radius: 4px;
}

.sidebar {
  min-height: 100%;           /* পুরো উচ্চতা জুড়ে রং থাকুক */
  border-right: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
}

.sidebar .nav-link {
  border-radius: .5rem;
  padding: .4rem .6rem;
  color: var(--bs-body-color);
  display: flex; align-items: center; gap: .5rem;
}
.sidebar .nav-link:hover { background: var(--bs-secondary-bg); }
.sidebar .nav-link.active {
  background: var(--bs-primary);
  color: #fff;
}
.sidebar .book-head {
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .65;
}

.content { padding: 1rem 1.25rem 4rem; }

.stat-card {
  position: relative;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  padding: .75rem .9rem;
  background: var(--bs-body-bg);
  height: 100%;
}
.stat-card .stat-label {
  font-size: .78rem; opacity: .7; margin-bottom: .15rem;
}

/**
 * বড় সংখ্যা বাক্সের বাইরে যাবে না | a long number never spills out of its box.
 * ১,৬৭,০০০.০০ ৳ ধরনের অঙ্ক ভেঙে পরের লাইনে চলে যেত আর বাক্স ছাপিয়ে যেত।
 * তাই এক লাইনেই থাকে, না ধরলে শেষে … বসে। চেপে ধরলে পুরোটা ভেসে ওঠে।
 */
.stat-card .stat-value {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* চেপে ধরলে পুরো সংখ্যাটা বাক্সের বাইরে ভেসে ওঠে | held down, it floats out */
.stat-card.is-peek .stat-value {
  position: absolute;
  left: 0;
  top: 1.55rem;
  z-index: 5;
  overflow: visible;
  width: max-content;
  max-width: 90vw;
  padding: .3rem .6rem;
  margin-left: .55rem;
  border-radius: .45rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-primary);
  box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .35);
}

/* যে সংখ্যা এমনিতেই ধরে যায় তাতে হাত দেওয়ার দরকার নেই | only clipped ones react */
.stat-card.is-clipped { cursor: zoom-in; }
.stat-card.is-clipped .stat-value { -webkit-user-select: none; user-select: none; }

.empty-box {
  border: 1px dashed var(--bs-border-color);
  border-radius: .75rem;
  padding: 2.5rem 1rem;
  text-align: center;
}

.table-wrap { overflow-x: auto; }
.table td, .table th { white-space: nowrap; vertical-align: middle; }

/* হেডার ডার্ক ও লাইট দুই মোডেই মানানসই | header follows the active theme */
.table > thead th {
  background: var(--bs-tertiary-bg);
  font-weight: 600;
}

.auth-wrap {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 1.5rem;
  overflow-y: auto;
}
.auth-card { width: 100%; max-width: 420px; }

/* ছোট স্ক্রিনে বাম পাশ অফক্যানভাস | offcanvas sidebar on small screens */
@media (max-width: 991.98px) {
  .sidebar-static { display: none !important; }
  .content { padding: .75rem .75rem 4rem; }
}

/**
 * মেনুর ড্রয়ার যেন পুরো পর্দা ঢেকে না ফেলে | the drawer must look like a drawer.
 *
 * বুটস্ট্র্যাপের মাপ ৪০০px — ফোনের পর্দা তার চেয়েও সরু, তাই মেনু খুললে পুরো
 * পাতা ঢাকা পড়ে যেত, পাশে ফাঁকা জায়গা থাকত না। কোথায় চাপ দিলে বন্ধ হবে
 * সেটাই বোঝা যেত না, মনে হতো নতুন একটা পাতা খুলে গেছে।
 * Capped so the page still shows at the edge — that strip is how you close it.
 */
.offcanvas.offcanvas-start {
  width: min(320px, 85vw);
  height: 100dvh;             /* ঠিকানার বার ওঠানামা করলেও পুরো উচ্চতা জুড়ে */
}

/* আঙুলের জন্য মেনুর বোতামটা একটু বড় | a thumb-sized menu button */
@media (max-width: 575.98px) {
  .btn-offcanvas { padding: .35rem .6rem; font-size: 1.05rem; }
}
@media (min-width: 992px) {
  .btn-offcanvas { display: none !important; }
}

/* ১৪০০px-এর বেশি চওড়া পর্দায় বাম পাশ আর বাড়ে না — বাড়তি জায়গা পুরোটাই ডান পাশের
   তালিকা ও হিসাব পায়। ৯৯২–১৩৯৯px-এ আগের মতোই col-3 / col-9 থাকে।
   On very wide screens the menu stops growing and the content takes the rest. */
@media (min-width: 1400px) {
  .app-shell > aside.sidebar-static {
    flex: 0 0 340px;
    width: 340px;
    max-width: 340px;
  }
  .app-shell > main.pane {
    flex: 1 1 0%;             /* বাকি পুরো জায়গা নেবে, নিচে নামবে না */
    width: auto;
    min-width: 0;
    max-width: none;
  }
  .content { padding: 1.25rem 1.75rem 4rem; }
}

.offcanvas .sidebar {
  border-right: 0;
  background: transparent;
}

/* ছবি তোলার ঘর | photo picker at the top of the upload form */
.entry-card { max-width: 780px; }

.photo-drop {
  display: inline-grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border: 2px dashed var(--bs-border-color);
  border-radius: 1rem;
  background: var(--bs-tertiary-bg);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .12s;
}
.photo-drop:hover { border-color: var(--bs-primary); }

.photo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-placeholder {
  color: var(--bs-secondary-color);
  text-align: center;
  padding: .5rem;
}

.photo-drop-sm { width: 140px; height: 140px; }

/* ছবি দেখে বাছার কার্ড | picker cards in the chooser dialogs */
.pick-card {
  display: grid;
  justify-items: center;
  gap: .25rem;
  padding: .6rem .4rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-body-bg);
  cursor: pointer;
  height: 100%;
  transition: border-color .12s, background-color .12s;
}
.pick-card:hover { border-color: var(--bs-primary); background: var(--bs-tertiary-bg); }

.pick-img {
  width: 76px; height: 76px;
  object-fit: cover;
  border-radius: .6rem;
  border: 1px solid var(--bs-border-color);
  display: inline-grid; place-items: center;
}
.pick-img-blank { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }

.pick-name {
  font-size: .82rem; font-weight: 600; text-align: center;
  line-height: 1.2; color: var(--bs-body-color);
  overflow-wrap: anywhere;
}
.pick-sub { font-size: .75rem; color: var(--bs-secondary-color); }

/* ক্রেতার ছবি | customer avatar */
.cust-avatar {
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--bs-border-color);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
}
.cust-avatar-lg { width: 84px; height: 84px; }
.cust-avatar-blank {
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
}

/* তালিকায় ছোট ছবি | thumbnail inside the list */
.cell-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: .35rem;
  border: 1px solid var(--bs-border-color);
}

/* রেডিমেড মেনুর কার্ড | template picker cards */
.tpl-btn {
  border: 1px solid var(--bs-border-color) !important;
  cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.tpl-btn:hover {
  border-color: var(--bs-primary) !important;
  background: var(--bs-tertiary-bg);
}
.min-w-0 { min-width: 0; }

.key-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  padding: .1rem .4rem;
  border-radius: .3rem;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
}

/* ---------- মেনুর সারি = কার্ড | one menu row as a card ---------- */
.row-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bs-border-color);
  border-radius: .6rem;
  background: var(--bs-body-bg);
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.row-card:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .08);
}

.row-card-top {
  position: relative;
  background: var(--bs-tertiary-bg);
}
.row-card-img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.row-card-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--bs-secondary-color);
}

/* মানুষের ছবি সবসময় গোল | a face is always round */
.row-card-face img,
.row-card-face-solo img { object-fit: cover; border-radius: 50%; }
.row-card-face {
  position: absolute;
  left: .5rem;
  bottom: .5rem;
}
.row-card-face img {
  width: 84px;
  height: 84px;
  border: 3px solid var(--bs-body-bg);
  box-shadow: 0 .15rem .4rem rgba(0, 0, 0, .35);
}
.row-card-face-solo {
  display: block;
  padding: .75rem 0;
  text-align: center;
}
.row-card-face-solo img {
  width: 150px;
  height: 150px;
  border: 1px solid var(--bs-border-color);
}

.row-card-no {
  position: absolute;
  top: .4rem;
  right: .4rem;
  min-width: 1.4rem;
  padding: 0 .35rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: .72rem;
  line-height: 1.4rem;
  text-align: center;
}

.row-card-body { padding: .6rem .7rem; flex: 1 1 auto; }
.row-card-title { font-weight: 600; margin-bottom: .3rem; }
.row-card-line {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .85rem;
  padding: .1rem 0;
}
.row-card-label { color: var(--bs-secondary-color); }
.row-card-val { white-space: nowrap; }

.row-card-foot {
  display: flex;
  gap: .35rem;
  padding: .5rem .7rem .7rem;
}

/* ছোট পর্দায় ছবি একটু ছোট | trim the photo on a phone */
@media (max-width: 575.98px) {
  .row-card-img { height: 120px; }
}

/* ---------- কর্মচারীর মুখ | the staff faces ---------- */
.face-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bs-border-color);
  border-radius: .6rem;
  overflow: hidden;
  background: var(--bs-body-bg);
}
.face-btn {
  border: 0;
  padding: 0;
  background: var(--bs-tertiary-bg);
  cursor: pointer;
  display: block;
  width: 100%;
}
.face-btn img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.face-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
}
.face-name {
  padding: .4rem .6rem;
  font-weight: 600;
  font-size: .9rem;
  border-top: 1px solid var(--bs-border-color);
}
.face-info { padding: .6rem .7rem; border-top: 1px solid var(--bs-border-color); }

.att-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.att-thumb-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-weight: 600;
}

/* ---------- হাজিরার খাতা | the attendance page ---------- */
.att-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  position: sticky;
  top: 0;
  z-index: 3;
  padding: .5rem 0;
  background: var(--bs-body-bg);
}

.att-card { text-align: center; }
.att-face {
  position: relative;
  border: 3px solid transparent;
  border-radius: .6rem;
  padding: 0;
  background: var(--bs-tertiary-bg);
  cursor: pointer;
  width: 100%;
  overflow: hidden;
}
.att-face img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.att-face:disabled { cursor: default; }

.att-badge {
  position: absolute;
  right: .25rem;
  bottom: .25rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .85rem;
}
.att-card.is-present .att-face  { border-color: var(--bs-success); }
.att-card.is-present .att-badge { background: var(--bs-success); }
.att-card.is-present .att-badge .bi::before { content: "\F633"; }   /* check-lg */

.att-card.is-absent .att-face  { border-color: var(--bs-danger); opacity: .65; }
.att-card.is-absent .att-badge { background: var(--bs-danger); }
.att-card.is-absent .att-badge .bi::before { content: "\F62A"; }    /* x-lg */

.att-name { font-size: .82rem; margin-top: .25rem; }

/* ---------- পুরো পর্দায় পণ্যের সোয়াইপার | the full-screen product swiper ---------- */
.swipe-modal .modal-content {
  background: #000;
  color: #fff;
  border: 0;
  border-radius: 0;
  height: 100%;
}

.swipe-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.swipe-head-name { font-size: 1.05rem; font-weight: 600; }
.swipe-head-sub  { font-size: .8rem; color: rgba(255, 255, 255, .6); }

/* একটা পণ্য = পুরো এক পাতা | one product fills one page */
.swipe-full {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.swipe-full::-webkit-scrollbar { display: none; }

.swipe-page {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 1rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.swipe-page-img {
  /* ছবিটা যেন নাম ও টাকার জায়গা খেয়ে না ফেলে | never crowd out the two lines below */
  width: min(74vw, 46vh);
  height: min(74vw, 46vh);
  flex: 0 1 auto;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .6);
}
.swipe-page-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #151515;
  color: #555;
  font-size: 4rem;
}
.swipe-page-name {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  max-width: 90%;
}
/* কতটা মাল, কত দামে | how much, at what price */
.swipe-page-qty {
  font-size: 1rem;
  color: rgba(255, 255, 255, .75);
}
.swipe-page-rate { color: rgba(255, 255, 255, .45); }

.swipe-page-amt {
  font-size: 1.75rem;
  font-weight: 700;
  color: #4ade80;
  white-space: nowrap;
}

.swipe-full-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .6);
}

/* কয়টা পাতা, কোনটায় আছি | the page dots */
.swipe-dots {
  display: flex;
  justify-content: center;
  gap: .4rem;
  padding: .75rem 0;
}
.swipe-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  transition: background-color .15s, transform .15s;
}
.swipe-dot.is-on {
  background: #fff;
  transform: scale(1.25);
}

.swipe-foot { padding: .75rem 1rem 1.1rem; }

/* দুপাশের তীর ও টেনে নেওয়া | the arrows, and click-drag */
.swipe-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .12s;
}
.swipe-arrow:hover { background: rgba(255, 255, 255, .3); }
.swipe-prev { left: .6rem; }
.swipe-next { right: .6rem; }

.swipe-full { cursor: grab; }
.swipe-full.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;      /* টানার সময় আটকে গেলে ঝাঁকি লাগে */
}
.swipe-full.is-dragging img { pointer-events: none; }

/* ছোট পর্দায় তীর ছোট, আঙুলেই তো চলে | phones swipe, so the arrows shrink */
@media (max-width: 575.98px) {
  .swipe-arrow { width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
}

/* ডান পাশের বাক্স হলে সংখ্যাটা বাঁ দিকে ছড়াবে | right-hand boxes open leftwards */
.stat-card.is-peek.is-peek-left .stat-value {
  left: auto;
  right: 0;
  margin-left: 0;
  margin-right: .55rem;
  text-align: right;
}

/* মজুদের সীমা ছুঁয়ে ফেললে ঘরটা একবার লাল হয় | the box flashes at the shelf limit */
.line-qty.is-capped {
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .25);
}
.line-qty::placeholder { color: var(--bs-secondary-color); opacity: .8; }

/**
 * ফেরতের ফর্মে ছবি পুরোটাই দেখা যায় | the whole picture, never a crop.
 *
 * cover দিলে ছবির মাঝখানটা ভরে যায় আর ধারগুলো কেটে বাদ পড়ে — মুখের ছবি
 * গোল করে কাটলে অর্ধেকটাই হারিয়ে যেত, মালের ছবিতেও গায়ের লেখা কেটে যেত।
 * contain-এ ছবিটা পুরো ঢুকে যায়, চারপাশে দরকারমতো একটু ফাঁকা থাকে।
 * The picture fits inside the box whole; nothing is cut away.
 */
.photo-fit, .pick-img-fit {
  object-fit: contain;
  background: var(--bs-tertiary-bg);
}

/**
 * ঘরের মাপেই ছবিটা বসবে | the picture obeys the box, not the other way round.
 * place-items:center থাকায় ছবিটা নিজের মাপে বড় হয়ে ঘর ছাপিয়ে যেত, আর
 * উপর-নিচ কেটে যেত — ঠিক যেটা এড়াতে চাই। stretch দিলে ঘরটাই মাপ ঠিক করে।
 */
.photo-drop > .photo-fit {
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
}

/* প্রোফাইল না বাছা থাকলে পণ্যের ঘরটা ঝিমিয়ে থাকে | the goods box waits its turn */
.photo-drop:disabled { opacity: .45; cursor: not-allowed; }
.photo-drop:disabled:hover { border-color: var(--bs-border-color); }

/* যে পণ্য ফেরতের তালিকায় উঠে গেছে | already on the return list */
.pick-card.is-on {
  border-color: var(--bs-success);
  background: color-mix(in srgb, var(--bs-success) 10%, transparent);
}

/* ---------- ভয়েস সহকারী | the voice assistant ---------- */

/**
 * ভাসমান বোতাম | the floating orb.
 * পাতার সাথে গড়ায় না, পর্দার উপরেই ভাসে — তাই যেকোনো মেনুতে হাতের নাগালে।
 * জায়গাটা জাভাস্ক্রিপ্ট বসায়, কারণ দোকানদার টেনে যেখানে খুশি রাখতে পারেন।
 */
.voice-dock {
  position: fixed;
  z-index: 1040;   /* নেভবারের উপরে, কিন্তু মডালের ছায়ার নিচে */
  touch-action: none;         /* টানার সময় পাতা যেন না গড়ায় */
}
.voice-dock.is-dragging { opacity: .85; }

.voice-orb {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
  font-size: 1.4rem;
  cursor: grab;
  box-shadow: 0 .4rem 1rem rgba(0,0,0,.35);
  transition: background-color .15s, color .15s, transform .12s;
}
.voice-orb:active { cursor: grabbing; }
.voice-dock.is-on .voice-orb { background: var(--bs-primary); color: #fff; }

/* কান খোলা আছে — দেখেই বোঝা যাক | you can see when the ear is open */
.voice-orb.is-live {
  background: var(--bs-danger); color: #fff;
  animation: voice-pulse 1.4s ease-out infinite;
}
@keyframes voice-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, .5); }
  100% { box-shadow: 0 0 0 18px rgba(220, 53, 69, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-orb.is-live { animation: none; }
}

/* ছোট ঘরটা | the panel that opens beside the orb */
.voice-pop {
  position: absolute;
  top: 66px; left: 0;
  width: min(290px, 82vw);
  padding: .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-body-bg);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.4);
}
/* পর্দার ডান পাশে থাকলে ঘরটা বাঁয়ে খোলে, নিচে থাকলে উপরে — বাইরে যায় না */
.voice-dock.is-right .voice-pop { left: auto; right: 0; }
.voice-dock.is-low   .voice-pop { top: auto; bottom: 66px; }

/* সহকারী যে ঘরটা ভরল সেটা চোখে পড়ুক | the box it just filled */
.voice-touched {
  border-color: var(--bs-success) !important;
  box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .25);
}