/* بوم حرفه‌ای (S2) — سه نما، نمای کد، قاب رسپانسیو، کارت بازنویسی کامل، نوار منقضی‌ها
   قانون جهت: دستگیره‌ها، پریست‌ها و نمای کد همیشه LTR و بی‌mirror‌اند. */

/* ---------- سه نما (segmented) ---------- */
.cv-views{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--border);border-radius:10px;direction:ltr}
.cv-seg{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:600;
  padding:5px 10px;border-radius:8px;border:none;background:transparent;color:var(--muted);transition:color .15s,background .15s;
}
.cv-seg:hover{color:var(--txt)}
.cv-seg.on{color:#DDD6FE;background:rgba(139,92,246,.22)}
/* S8: پنهان‌شدن برچسب‌ها با container query نوار ابزار (s8.css) */

/* ---------- بدنه: [کد] [دستگیره] [پیش‌نمایش] ---------- */
.canvas-body.cv-body{background:#0b0f1c;overflow:hidden;direction:ltr;justify-content:flex-start;min-height:0}
.cv-code-pane{display:none;flex:0 0 var(--cv-split,50%);min-width:0;flex-direction:column;container-type:inline-size}
.cv-prev-pane{display:none;flex:1;min-width:0;position:relative;flex-direction:column}
.cv-divider{display:none;flex:0 0 7px;cursor:col-resize;position:relative;background:var(--border);touch-action:none;outline:none}
.cv-divider::after{content:"";position:absolute;inset-block:calc(50% - 22px);inset-inline:2px;border-radius:99px;background:var(--faint);transition:background .15s}
.cv-divider:hover::after,.cv-divider:focus-visible::after,.cv-body.cv-dragging .cv-divider::after{background:var(--accent)}
.cv-body.cv-dragging{user-select:none;cursor:col-resize}
.cv-body.cv-dragging iframe{pointer-events:none}
.canvas-stage[data-view="code"] .cv-code-pane{display:flex;flex:1}
.canvas-stage[data-view="preview"] .cv-prev-pane{display:flex}
/* S8: «کنار پیش‌نمایش» = [data-view=code][data-split="1"] در s8.css */
.canvas-stage:not([data-view]) .cv-prev-pane{display:flex}

/* ---------- نمای کد ---------- */
.cv-code-pane{background:#0b0f1c;color:#e6edf3}
.cv-tree{display:flex;flex-direction:column;gap:3px;padding:8px;overflow:auto;border-bottom:1px solid var(--border);max-height:34%;flex-shrink:0}
.cv-file{
  display:flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;text-align:left;
  padding:6px 9px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted);
}
.cv-file:hover{background:var(--surface)}
.cv-file.on{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.4);color:#EDE9FE}
.cv-fn{font-family:var(--font-mono);font-size:.76rem;direction:ltr}
.cv-file .cv-fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-ref{font-size:.64rem;color:var(--faint);direction:ltr}
.cv-mark{font-size:.62rem;font-weight:700;padding:1px 7px;border-radius:99px;border:1px solid}
.cv-mark.chg{color:#6EE7B7;border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.12)}
.cv-mark.draft{color:#FCD34D;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.12)}
.cv-codewrap{flex:1;min-height:0;display:flex;flex-direction:column}
.cv-codehead{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:7px 10px;border-bottom:1px solid var(--border);direction:rtl}
.cv-codehead .spacer{flex:1}
.cv-meta{font-size:.7rem;color:var(--faint)}
.badge.amber{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.45);color:#FCD34D}
.cv-codebody{flex:1;min-height:0;display:flex;overflow:auto;position:relative}
.cv-gutter,.cv-src{margin:0;padding:12px 0;font-family:var(--font-mono);font-size:.78rem;line-height:1.7;tab-size:2;direction:ltr;text-align:left}
.cv-gutter{position:sticky;left:0;z-index:1;flex-shrink:0;min-width:3.2em;padding-inline:10px 8px;text-align:right;color:var(--faint);user-select:none;background:#0b0f1c;border-right:1px solid var(--border)}
.cv-src{flex:1 0 auto;padding-inline:12px 18px}
.cv-src code{font-family:inherit;white-space:pre;color:#e6edf3}
.cv-empty{margin:auto;color:var(--faint);font-size:.82rem}
.cv-edit{
  position:absolute;inset:0;width:100%;height:100%;resize:none;border:none;border-radius:0;outline:none;
  background:#0d1224;color:#e6edf3;padding:12px 14px;font-family:var(--font-mono);font-size:.78rem;line-height:1.7;
  tab-size:2;direction:ltr;text-align:left;white-space:pre;overflow:auto;letter-spacing:0;
}
.cv-edit:focus{box-shadow:inset 0 0 0 2px rgba(139,92,246,.45)}
@container (max-width:520px){
  .cv-tree{flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none}
  .cv-file{flex-shrink:0}
}

/* ---------- قاب رسپانسیو ---------- */
/* S8: نوار قاب (cv-framebar) حذف شد — دستگاه/چرخش/ابعاد در منوی نوار ابزار، چیپ پیشنهاد در نوار وضعیت */
.cv-sug{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;border-radius:99px;direction:rtl;
  font-size:.72rem;color:#FDE68A;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.4)}
.cv-viewport{
  flex:1;min-height:0;position:relative;overflow-x:hidden;overflow-y:auto;direction:ltr;
  padding:0 14px 14px 0;display:flex;justify-content:center;align-items:flex-start;
  background:repeating-conic-gradient(rgba(255,255,255,.03) 0% 25%, transparent 0% 50%) 50%/22px 22px,#0b0f1c;
}
.cv-box{position:relative;flex:none}
.cv-device{position:absolute;left:0;top:0;transform-origin:0 0;background:#fff;box-shadow:0 8px 30px -8px rgba(0,0,0,.7)}
.cv-device .canvas-frame{width:100%;height:100%;transition:none}
.cv-h{position:absolute;z-index:3;touch-action:none}
.cv-h-r{top:0;bottom:0;left:100%;width:14px;cursor:ew-resize}
.cv-h-b{left:0;right:0;top:100%;height:14px;cursor:ns-resize}
.cv-h::after{content:"";position:absolute;border-radius:99px;background:var(--faint);transition:background .15s}
.cv-h-r::after{top:calc(50% - 22px);height:44px;left:5px;width:4px}
.cv-h-b::after{left:calc(50% - 22px);width:44px;top:5px;height:4px}
.cv-h:hover::after,.cv-dragging .cv-h::after{background:var(--accent)}
.cv-prev-pane.cv-dragging{user-select:none}
.cv-prev-pane.cv-dragging iframe{pointer-events:none}
.cv-ratio{
  position:absolute;left:10px;bottom:20px;z-index:4;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px;
  color:#FCD34D;background:rgba(15,18,30,.88);border:1px solid rgba(251,191,36,.45);pointer-events:none;direction:rtl;
}

/* ---------- کارت بازنویسی کامل و نوار منقضی‌ها ---------- */
.st-rwwarn{
  display:flex;align-items:flex-start;gap:6px;margin-top:6px;padding:6px 9px;border-radius:8px;font-size:.72rem;line-height:1.8;
  color:#FDE68A;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.4);
}
.st-rwwarn .ic{flex-shrink:0;margin-top:3px}
.ws-exp{margin:0 0 10px;padding:8px 10px;border-radius:10px;background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.3)}
.ws-exp-h{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;color:#FCD34D;margin-bottom:6px}
.ws-exp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:3px 0}
.ws-exp-t{flex:1;min-width:160px;font-size:.72rem;color:var(--muted)}

/* ---------- placeholder فارسی در inputهای مونو/LTR حرف‌حرف نشود ---------- */
input[dir="ltr"]::placeholder,textarea[dir="ltr"]::placeholder,.mono::placeholder{
  font-family:var(--font);letter-spacing:0;word-spacing:normal;unicode-bidi:plaintext;
}