/* Tablet/mobile: Library và Inspector là Bootstrap Offcanvas; Canvas luôn ưu tiên. */
@media (max-width:1199.98px) {
  .toantin-tool-3d .tt-header-row { grid-template-columns:minmax(0,1fr) auto; }
  .toantin-tool-3d .tt-current-model { display:none !important; }
  .toantin-tool-3d .tt-responsive-panel { width:min(92vw,360px); }
  .toantin-tool-3d .tt-responsive-panel .offcanvas-body { min-height:0; background:var(--tt-bg); padding:.65rem; }
  .toantin-tool-3d .tt-responsive-panel .tt-side-panel { min-height:100%; }
  .toantin-tool-3d .tt-model-list { overflow:visible; }
}

/* Desktop: ba vùng cố định theo viewport; chỉ hai panel bên cuộn độc lập. */
@media (min-width:1200px) {
  .toantin-tool-3d .tt-shell-grid { grid-template-columns:minmax(240px,270px) minmax(0,1fr) minmax(285px,320px); gap:.7rem; }
  .toantin-tool-3d .tt-responsive-panel.offcanvas { position:static; visibility:visible !important; transform:none !important; width:auto; height:100%; min-height:0; max-height:none; border:0; background:transparent; z-index:auto; display:block; }
  .toantin-tool-3d .tt-responsive-panel .offcanvas-body { display:block; height:100%; min-height:0; overflow:hidden; padding:0; }
  .toantin-tool-3d .tt-panel-mobile-header { display:none; }
  .toantin-tool-3d .tt-library-panel,.toantin-tool-3d .tt-inspector-panel { align-self:stretch; min-height:0; }
}

@media (max-width:991.98px) {
  .toantin-tool-3d .tt-app-main { padding-left:.55rem !important; padding-right:.55rem !important; }
  .toantin-tool-3d .tt-tool-btn span,.toantin-tool-3d .tt-mode-btn span { display:none; }
  .toantin-tool-3d .tt-tool-btn,.toantin-tool-3d .tt-mode-btn { min-width:40px; }
  .toantin-tool-3d .tt-toolbar-divider { display:none; }
}

@media (max-width:767.98px) {
  .toantin-tool-3d { --tt-header-height:60px; }
  .toantin-tool-3d .tt-brand-logo { width:58px; height:40px; flex-basis:58px; }
  .toantin-tool-3d .tt-brand-copy strong { font-size:.9rem; }
  .toantin-tool-3d .tt-brand-copy small { font-size:.67rem; }
  .toantin-tool-3d .tt-header-actions { gap:.3rem; }
  .toantin-tool-3d .tt-header-actions .btn { min-height:40px; padding-left:.55rem; padding-right:.55rem; }
  .toantin-tool-3d .tt-app-main { padding:.45rem !important; }
  .toantin-tool-3d .tt-workspace-toolbar { gap:.3rem; padding:.35rem .4rem; }
  .toantin-tool-3d .tt-toolbar-zone { gap:.28rem; }
  .toantin-tool-3d .tt-canvas-hint span:nth-child(3) { display:none; }
  .toantin-tool-3d .tt-stage-status-row { padding-left:.42rem; padding-right:.42rem; }
}

@media (max-width:575.98px) {
  .toantin-tool-3d .tt-brand-copy small { display:none !important; }
  .toantin-tool-3d .tt-tool-btn,.toantin-tool-3d .tt-mode-btn,.toantin-tool-3d .tt-toggle-btn { min-height:44px; min-width:44px; }
  .toantin-tool-3d .tt-canvas-hint { bottom:.4rem; }
  .toantin-tool-3d .tt-canvas-hint span { font-size:.63rem; }
  .toantin-tool-3d .tt-size-readout { display:none !important; }
  .toantin-tool-3d .tt-status-text { font-size:.7rem; }
}

@media (max-height:520px) and (orientation:landscape) {
  .toantin-tool-3d { --tt-header-height:54px; }
  .toantin-tool-3d .tt-brand-logo { width:50px; height:34px; flex-basis:50px; }
  .toantin-tool-3d .tt-canvas-hint { display:none; }
  .toantin-tool-3d .tt-stage-status-row { min-height:30px; }
}

@media (max-width:991.98px) {
  .toantin-tool-3d .tt-fullscreen-teaching-toolbar { top:.45rem; left:.45rem; right:.45rem; gap:.28rem; padding:.34rem; }
  .toantin-tool-3d .tt-fs-btn { min-width:44px; min-height:44px; }
  .toantin-tool-3d .tt-fs-text-btn span { display:none; }
  .toantin-tool-3d .tt-fs-field .form-select { min-width:94px; min-height:44px; }
  .toantin-tool-3d .tt-fullscreen-formula { top:4.25rem; right:.55rem; }
}

@media (max-width:575.98px) {
  .toantin-tool-3d .tt-fs-divider { display:none; }
  .toantin-tool-3d .tt-fullscreen-teaching-toolbar { border-radius:10px; }
  .toantin-tool-3d .tt-annotation-count { display:none; }
  .toantin-tool-3d .tt-pen-field .form-select { min-width:84px; }
  .toantin-tool-3d .tt-fullscreen-formula { left:.55rem; right:.55rem; width:auto; max-height:58%; }
}

/* v3 — giữ scaling của công thức theo chính kích thước floating panel. */
@media (max-width:991.98px) {
  .toantin-tool-3d .tt-fullscreen-formula .tt-formula-expression { font-size:calc(1.9rem * var(--tt-formula-scale,1)); }
}
@media (max-width:575.98px) {
  .toantin-tool-3d .tt-fullscreen-formula .tt-formula-expression { font-size:calc(1.9rem * var(--tt-formula-scale,1)); }
  .toantin-tool-3d .tt-fullscreen-formula .tt-formula-label { font-size:calc(.95rem * var(--tt-formula-scale,1)); }
  .toantin-tool-3d .tt-fullscreen-formula .tt-formula-note { font-size:calc(.95rem * var(--tt-formula-scale,1)); }
  .toantin-tool-3d .tt-fullscreen-formula .tt-formula-variables { font-size:calc(1rem * var(--tt-formula-scale,1)); }
}