/* viewer.phucthienlang.vn — khung meri bọc app React (dist/). Chỉ chồng lên CSS của app, không đụng logic. */
.vw-content { max-width: none !important; padding: 0 !important; margin: 0; width: 100%; position: relative; overflow: hidden; height: calc(100vh - var(--ptl-meridian-header-h)); }
.vw-content #root { height: 100%; }
.vw-content .app-container { height: 100%; width: 100%; }

/* Logo/tiêu đề của app trùng với logo header meri; khối "Thông tin thêm" trùng với sidebar meri. */
.vw-content .header-title-group { display: none; }
.vw-content .app-header .header-actions { margin-left: auto; }
.vw-content .info-more-section { display: none; }

/* Desktop: chỉ 1 trong 2 cột — sidebar meri mở rộng thì ẩn cột Danh sách NC của app; thu gọn (thanh icon) thì hiện cột đó. */
@media (min-width: 769px) {
  html:not(.ptl-bare) .ptl-meridian-app:not(.sidebar-collapsed) .vw-content .app-body > .sidebar:first-child,
  html:not(.ptl-bare) .ptl-meridian-app:not(.sidebar-collapsed) .vw-content .app-body > .resizer-h:nth-child(2) { display: none; }

  /* Cột Danh sách NC kéo lên ngang hàng thanh công cụ của app (khỏi để khoảng trống bên trái); thanh công cụ dời sang phải theo bề rộng cột (--vw-left, script đo). */
  html:not(.ptl-bare) .vw-content .app-body > .sidebar:first-child,
  html:not(.ptl-bare) .vw-content .app-body > .resizer-h:nth-child(2) { margin-top: -50px; }
  html:not(.ptl-bare) .vw-content .app-body > .sidebar:first-child { z-index: 11; }
  html:not(.ptl-bare) .vw-content .app-header { padding-left: calc(var(--vw-left, 0px) + 16px); }
}

/* Tài khoản + nút nền sáng/tối của app bị thay bằng widget/nút chuẩn meri ở header. */
html:not(.ptl-bare) .vw-content .app-header .header-actions > .theme-selector,
html:not(.ptl-bare) .vw-content .app-header .header-actions > div:not([class]),
html:not(.ptl-bare) .vw-content .app-header .header-actions > .hdivider { display: none; }

/* FAB nằm góc phải dưới, có thể che vài dòng cuối bảng G-code -> chừa thêm chỗ cuối bảng để cuộn dòng cuối lên khỏi FAB. */
html:not(.ptl-bare) .vw-content .gcode-list-view,
html:not(.ptl-bare) .vw-content .gcode-textarea { padding-bottom: 210px; }

/* FAB nằm trên thanh tab dưới của app trên mobile */
@media (max-width: 768px) {
  html:not(.ptl-bare) .vw-content .ptl-meridian-fab-stack { bottom: 70px; right: 12px; }
  /* Công tắc 2D/3D ở góc phải-dưới khung chính bị FAB đè -> dời sang góc trái-dưới. */
  html:not(.ptl-bare) .vw-content .iso-3d-controls { right: auto !important; left: 8px; }
}

/* Trong RenameNC: khỏi mời tải RenameNC (đang chạy trong chính app đó rồi). */
html.ptl-webview .ptl-meridian-comm-dl a[data-folder="aspire.phucthienlang.vn"] { display: none; }
/* Trong RenameNC không lộ tên trang web ("Xem Gcode trực tuyến") ở header: chỉ giữ biểu tượng, tên cửa sổ đã có ở thanh tiêu đề của app. */
html.ptl-webview .ptl-meridian-logo span { display: none; }
/* App desktop tự đăng nhập bằng token (token_login) sau khi trang nạp xong -> widget tài khoản của web (đã đọc phiên từ trước) sẽ hiện sai "chưa đăng nhập"; ẩn luôn, y như bản cũ ẩn nút tài khoản khi nhúng. */
html.ptl-webview .ptl-meridian-topbar-right #ptlAccountDropdown { display: none; }

/* Chế độ trần: ?demo=1 (khung mockup trên trang chủ) hoặc ?bare=1 (xem thử) — bỏ khung,
   app tràn màn hình, giữ đúng bố cục cũ (mọi luật bố cục ở trên đều chỉ áp dụng khi KHÔNG bare; chỉ còn màu/font meri). */
html.ptl-bare .ptl-meridian-header,
html.ptl-bare .ptl-meridian-sidebar,
html.ptl-bare .ptl-meridian-backdrop,
html.ptl-bare .ptl-meridian-fab-stack { display: none !important; }
html.ptl-bare .vw-content { height: 100vh; }
html.ptl-bare .vw-content .header-title-group { display: flex; }
html.ptl-bare .vw-content .info-more-section { display: block; }
html.ptl-bare .vw-content .app-container { height: 100vh; }

/* ───────── Style meri cho app: chỉ đổi biến màu/font, giữ nguyên bố cục + logic ─────────
   App dùng biến --bg-xxx, --text-xxx, --accent-xxx (index.css) -> trỏ sang token meri, tự đúng cả sáng/tối. Màu ngữ nghĩa của
   đường chạy dao (--color-rapid/feed/arc/drill) giữ nguyên. */
.vw-content {
  --bg-main: var(--ptl-meridian-bg-root);
  --bg-panel: var(--ptl-meridian-bg-surface);
  --bg-header: var(--ptl-meridian-bg-surface);
  --border-color: var(--ptl-meridian-border-subtle);
  --text-primary: var(--ptl-meridian-text-primary);
  --text-secondary: var(--ptl-meridian-text-secondary);
  --text-muted: var(--ptl-meridian-text-disabled);
  --accent-color: var(--ptl-meridian-brand);
  --accent-hover: var(--ptl-meridian-brand-hover);
  font-family: var(--ptl-meridian-font-body);
  color: var(--ptl-meridian-text-primary);
}
.vw-content button, .vw-content input, .vw-content select, .vw-content textarea { font-family: inherit; }
.vw-content .gcode-list-view { background-color: var(--ptl-meridian-bg-surface); }
.vw-content .gcode-textarea { background: var(--ptl-meridian-bg-surface); color: var(--ptl-meridian-text-primary); }
/* Các màu xanh viết cứng (rgba) -> tông cam-nhạt của meri */
.vw-content .file-item.active { background-color: var(--ptl-meridian-brand-subtle); }
.vw-content .checkbox-btn.checked { background-color: var(--ptl-meridian-brand-subtle); }
.vw-content .gcode-line:hover { background-color: var(--ptl-meridian-bg-hover); }
.vw-content .gcode-line.active { background-color: var(--ptl-meridian-brand-subtle); }
.vw-content .startup-dropzone:hover { background: var(--ptl-meridian-brand-bg-subtle); }
.vw-content .btn-primary { background: var(--ptl-meridian-brand); box-shadow: none; }
.vw-content .btn-primary:hover { background: var(--ptl-meridian-brand-hover); box-shadow: none; }

/* Thanh kéo chia cột: bản gốc dày 4px màu nền -> lộ thành "khe hở" giữa các panel. Đổi thành đường kẻ 1px (vùng bấm kéo vẫn rộng 9px nhờ ::before). */
.vw-content .resizer-h { width: 1px; position: relative; background-color: var(--border-color); flex-shrink: 0; }
.vw-content .resizer-h::before { content: ''; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px; }
.vw-content .resizer-h:hover, .vw-content .resizer-h.dragging { background-color: var(--ptl-meridian-brand); }

/* Dark: nền vùng chứa/canvas dùng tông surface (slate-900) thay vì root (slate-950, gần đen). */
html[data-theme="dark"] .vw-content { --bg-main: var(--ptl-meridian-bg-surface); }

/* Sidebar không cuộn, nên màn hình thấp thì bỏ bớt khối cuối thay vì để bị cắt: <=820px cao ẩn hàng Tham gia/Cafe, <=680px ẩn cả khối Tải về. */
@media (min-width: 641px) and (max-height: 820px) { .ptl-meridian-sidebar .ptl-meridian-comm .ptl-meridian-comm-col { display: none; } }
@media (min-width: 641px) and (max-height: 680px) { .ptl-meridian-sidebar .ptl-meridian-comm { display: none; } }

/* Màn hình chờ (thẻ tiêu đề + 3 khung thiết bị mockup): có header meri 60px nên vùng thấp hơn bản cũ -> bản cũ căn giữa dọc rồi cắt mất phần trên/dưới.
   Đổi sang căn từ trên xuống (phần thừa chia đều 2 đầu bằng margin auto, không bị cắt), thu gọn thẻ, và co khung mockup theo chiều cao màn hình. */
html:not(.ptl-bare) .vw-content .startup-overlay { justify-content: flex-start; gap: 20px; padding: 14px 12px; }
html:not(.ptl-bare) .vw-content .startup-overlay > :first-child { margin-top: auto; }
html:not(.ptl-bare) .vw-content .startup-overlay > :last-child { margin-bottom: auto; }
html:not(.ptl-bare) .vw-content .startup-card { padding: 26px 30px; }
html:not(.ptl-bare) .vw-content .startup-logo-container { margin-bottom: 10px; }
html:not(.ptl-bare) .vw-content .startup-logo { width: 84px; height: 84px; }
@media (max-height: 1000px) { html:not(.ptl-bare) .vw-content .device-showcase { zoom: .86; } }
@media (max-height: 880px) { html:not(.ptl-bare) .vw-content .device-showcase { zoom: .7; } html:not(.ptl-bare) .vw-content .startup-overlay { gap: 12px; } }
@media (max-height: 830px) { html:not(.ptl-bare) .vw-content .device-showcase { display: none; } }

/* Thanh chuyển khung nhìn (4 View / Top / Iso / Front / Left / Fit): luôn là cột dọc bên phải, canh giữa theo chiều dọc — cả lúc chờ (đã có sẵn kiểu
   này ở app) lẫn khi đã có file (app để nằm ngang lệch trái ở đáy). Áp dụng cả chế độ trần ?demo=1: 3 khung mockup thiết bị ở màn hình chờ là
   iframe của chế độ này, phải giống bản thật. Điện thoại (<=768px) app đã tự dùng cột dọc. Nút "4 View" hiện dạng biểu tượng ⊞ để còn quay lại 4 khung. */
@media (min-width: 769px) {
  .vw-content .view-toolbar:not(.view-toolbar-showcase) { left: auto; right: 12px; bottom: auto; top: 50%; transform: translateY(-50%); flex-direction: column; max-width: none; width: auto; }
  .vw-content .view-toolbar:not(.view-toolbar-showcase) .hdivider { width: 20px; height: 1px; margin: 2px auto; }
  .vw-content .view-toolbar:not(.view-toolbar-showcase) .view-btn-full { display: none; }
  .vw-content .view-toolbar:not(.view-toolbar-showcase) .view-btn-short { display: block; }
  .vw-content .view-toolbar:not(.view-toolbar-showcase) .view-toolbar-btn { text-align: center; min-width: 40px; }
  .vw-content .view-toolbar:not(.view-toolbar-showcase) .view-toolbar-fit { margin-left: 0; }
}

/* Cửa sổ vừa/hẹp (641–1100px): ưu tiên vùng xem -> sidebar meri thành ngăn kéo ẩn (nút ≡ ở header mở ra), không chiếm chỗ cạnh vùng vẽ.
   (Dưới 640px template meri đã tự làm; dải này template để sidebar cố định 260px, khiến vùng vẽ chỉ còn ~250px.) */
@media (min-width: 641px) and (max-width: 1100px) {
  html:not(.ptl-bare) .ptl-meridian-app .ptl-meridian-sidebar { position: fixed; left: 0; top: var(--ptl-meridian-header-h); bottom: 0; height: auto; width: 250px !important; transform: translateX(-100%); box-shadow: 0 8px 30px rgba(0,0,0,.35); z-index: 950; transition: transform var(--ptl-meridian-duration-normal) var(--ptl-meridian-ease-out); }
  html:not(.ptl-bare) .ptl-meridian-app .ptl-meridian-sidebar.mobile-open { transform: translateX(0); }
  html:not(.ptl-bare) .ptl-meridian-sidebar.mobile-open .ptl-meridian-nav-label,
  html:not(.ptl-bare) .ptl-meridian-sidebar.mobile-open .ptl-meridian-nav-group-label { display: inline; }
  html:not(.ptl-bare) .ptl-meridian-sidebar.mobile-open .ptl-meridian-nav-item { justify-content: flex-start; }
  html:not(.ptl-bare) .ptl-meridian-app.sidebar-collapsed .ptl-meridian-sidebar.mobile-open .ptl-meridian-comm { display: flex; }
  html:not(.ptl-bare) .ptl-meridian-sidebar-collapse { display: none; }
  html:not(.ptl-bare) .ptl-meridian-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 900; display: none; }
  html:not(.ptl-bare) .ptl-meridian-backdrop.show { display: block; }
  html:not(.ptl-bare) .ptl-meridian-hamburger { display: flex !important; }
  html:not(.ptl-bare) .ptl-meridian-logo { min-width: 0; flex: 0 1 auto; border-right: none; padding: 0 12px; }
}

/* Cửa sổ vừa/hẹp: bóp cột Danh sách NC và cột G-code lại (không bỏ được) để vùng vẽ còn chỗ; khi vùng vẽ < 620px app tự trượt 3 khung phụ xuống dưới khung chính. */
@media (min-width: 769px) and (max-width: 1100px) {
  html:not(.ptl-bare) .vw-content .app-body > .sidebar:first-child { width: clamp(190px, 21vw, 220px) !important; }
  html:not(.ptl-bare) .vw-content .app-body > .sidebar-right { width: clamp(220px, 27vw, 360px) !important; }
}

/* Danh sách NC: tên file bản gốc cho gãy dòng từng ký tự (break-all) nên cột hẹp thì vỡ thành "00/7_KES1/0103T_/Z.nc" rất xấu.
   Đổi sang 1 dòng + dấu "…" (tên đầy đủ vẫn xem được khi rê chuột: app đã gắn title=tên file). */
.vw-content .file-item > span:first-child { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; word-break: normal !important; }

/* Thụt lề theo cấp thư mục của bản gốc (20/34/48/62px) quá rộng cho cột hẹp -> thu còn 8/16/24/32px, tên file có thêm chỗ. */
.vw-content .file-item[style*="padding-left: 20px"] { padding-left: 8px !important; }
.vw-content .file-item[style*="padding-left: 34px"] { padding-left: 16px !important; }
.vw-content .file-item[style*="padding-left: 48px"] { padding-left: 24px !important; }
.vw-content .file-item[style*="padding-left: 62px"] { padding-left: 32px !important; }