/* =====================================================================
   داک — ویرایشگر و ترمینالی که داخل خودِ صفحه‌ی درس باز می‌شود
   تا دانش‌آموز برای اجرای یک مثال مجبور نشود صفحه را ترک کند.
   صفحه RTL است، پس «سمت چپ» یعنی inline-end.
   ===================================================================== */

:root { --dock-w: 470px; --dock-h: 58vh; }

/* ---------- دکمه‌ی شناور وقتی داک بسته است ---------- */
.dock-fab {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 45;
  display: flex; align-items: center; gap: 9px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  background: var(--brand-500); color: #fff;
  font-weight: 800; font-size: var(--fs-sm);
  box-shadow: var(--sh-brand), var(--sh-lg);
  border: none;
  transition: transform .15s, background .15s;
}
.dock-fab:hover { background: var(--brand-600); transform: translateY(-2px); }
.dock-fab[hidden] { display: none; }

/* ---------- خود داک ---------- */
.dock {
  position: fixed;
  inset-block-start: var(--header-h);
  inset-block-end: 0;
  inset-inline-end: 0;
  width: var(--dock-w);
  z-index: 44;
  display: flex;
  flex-direction: column;
  background: var(--code-bg);
  border-inline-start: 1px solid var(--border);
  box-shadow: -18px 0 40px rgba(10, 12, 25, .18);
}
.dock[hidden] { display: none; }

body.dock-open { padding-inline-end: var(--dock-w); }

/* دسته‌ی تغییر عرض */
.dock-grip {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -3px;
  width: 7px;
  cursor: col-resize;
  z-index: 2;
}
.dock-grip:hover, .dock-grip.dragging { background: var(--brand-400); }

/* ---------- سربرگ ---------- */
.dock-head {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 11px;
  background: var(--code-bg-2);
  border-block-end: 1px solid var(--code-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.dock-title {
  font-size: var(--fs-xs); font-weight: 800; color: #cfd6ef;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; flex: 1; min-width: 90px;
}
.dock-title small { display: block; color: #79829f; font-weight: 600; font-size: .68rem; }

.dock-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 700;
  color: #c3cae6; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.11);
  padding: 5px 12px; border-radius: var(--r-full);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.dock-btn:hover:not(:disabled) { background: rgba(255,255,255,.17); color: #fff; }
.dock-btn:disabled { opacity: .4; cursor: not-allowed; }
.dock-btn.primary { background: var(--brand-500); border-color: var(--brand-400); color: #fff; }
.dock-btn.primary:hover:not(:disabled) { background: var(--brand-600); }
.dock-btn.icon { padding: 5px 9px; }

/* ---------- ویرایشگر ---------- */
.dock-editor {
  flex: 1 1 auto;
  min-height: 90px;
  overflow: hidden;
  position: relative;
}
.dock-editor .CodeMirror {
  height: 100%;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  background: var(--code-bg);
  color: var(--code-text);
  direction: ltr; text-align: left;
}

/* دسته‌ی تغییر ارتفاع بین ویرایشگر و ترمینال */
.dock-hsplit {
  height: 7px; flex-shrink: 0;
  background: var(--code-bg-2);
  border-block: 1px solid var(--code-border);
  cursor: row-resize;
  position: relative;
}
.dock-hsplit::after {
  content: ''; position: absolute; inset-inline: 50% auto;
  inset-block-start: 2px; width: 34px; height: 3px;
  border-radius: 2px; background: rgba(255,255,255,.22);
  transform: translateX(50%);
}
.dock-hsplit:hover { background: var(--brand-500); }

/* ---------- ترمینال ---------- */
.dock-term-wrap {
  flex: 0 0 var(--dock-term-h, 38%);
  display: flex; flex-direction: column;
  min-height: 74px;
}
.dock-term-head {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  font-size: var(--fs-xs); font-weight: 700; color: #8a93b4;
  background: var(--code-bg-2);
  border-block-end: 1px solid var(--code-border);
  flex-shrink: 0;
}
.dock-term-head .spacer { flex: 1; }
.dock-term-head button {
  font-size: .7rem; color: #8a93b4;
  background: none; border: none; padding: 2px 6px;
}
.dock-term-head button:hover { color: #fff; }

.dock .terminal { font-size: 12.8px; padding: 10px 12px; }

/* ---------- نتیجه‌ی تست داخل داک ---------- */
.dock-tests {
  border-block-start: 1px solid var(--code-border);
  background: rgba(255,255,255,.03);
  padding: 8px 12px;
  max-height: 40%;
  overflow: auto;
  font-family: var(--font-fa);
  direction: rtl;
  flex-shrink: 0;
}
.dock-tests[hidden] { display: none; }
.dock-tests .t-head { font-size: var(--fs-xs); font-weight: 800; color: #cfd6ef; margin-bottom: 5px; }
.dock-tests .t-row {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: #b6bedd; padding: 3px 0;
}
.dock-tests .t-row .io { font-family: var(--font-mono); direction: ltr; color: #79829f; font-size: .72rem; }
.dock-tests .t-detail {
  margin: 4px 0 7px; padding: 7px 10px; border-radius: var(--r-sm);
  background: rgba(244,63,94,.14); border: 1px solid rgba(244,63,94,.3);
  font-family: var(--font-mono); font-size: .72rem; color: #ffc9d2;
  direction: ltr; text-align: left; white-space: pre-wrap;
  max-height: 120px; overflow: auto;
}
.dock-tests .t-all-pass { color: #6ee7a8; font-weight: 800; }

/* ---------- ریسپانسیو: روی موبایل به شکل کشوی پایینی ---------- */
@media (max-width: 940px) {
  .dock {
    inset-block-start: auto;
    inset-inline: 0;
    width: auto;
    height: var(--dock-h);
    border-inline-start: none;
    border-block-start: 1px solid var(--border);
    box-shadow: 0 -14px 34px rgba(10, 12, 25, .28);
  }
  body.dock-open { padding-inline-end: 0; padding-block-end: var(--dock-h); }
  .dock-grip { display: none; }
  .dock-fab { inset-block-end: 16px; inset-inline-end: 16px; padding: 11px 18px; }
}

@media (max-width: 560px) {
  :root { --dock-h: 66vh; }
  .dock-head { padding: 7px 9px; gap: 5px; }
  .dock-btn { padding: 5px 10px; }
  .dock-btn .lbl { display: none; }
  .dock-btn.primary .lbl { display: inline; }
}

/* ---------- دکمه‌های داخل بلوک کد ---------- */
.code-actions .run-here {
  background: rgba(16,185,129,.24);
  border-color: rgba(52,211,153,.45);
  color: #a7f3d0;
}
.code-actions .run-here:hover { background: rgba(16,185,129,.45); color: #fff; }