/* Adaptação a tablet e telemóvel.
   > 1000px : barra de ferramentas horizontal (como sempre).
   561–1000 : barra lateral de ícones à esquerda; o hambúrguer expande-a com rótulos.
   <= 560   : o menu é uma gaveta lateral aberta pelo hambúrguer. */
.mobonly,.phoneonly{display:none}

@media (max-width:1000px){
  .main{grid-template-columns:minmax(0,1fr)}
  .panel{display:none}
  .panel.open{display:flex;position:fixed;left:0;right:0;bottom:0;max-height:72%;z-index:40;border-radius:14px 14px 0 0;padding-bottom:max(14px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-shadow:var(--shadow)}
  .mobonly{display:inline-flex}
  .brand small{display:none}

  /* menu lateral: layout vertical com rótulos */
  .side{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:4px;overflow-y:auto;overflow-x:hidden;padding:8px}
  .side .tool{flex-direction:row;justify-content:flex-start;gap:12px;font-size:14px;padding:10px 12px;width:100%}
  .side .sep{width:auto;height:1px;margin:6px 0;align-self:stretch}
  .side .inkrow{flex-wrap:wrap;padding:4px 12px}
  .side .zoom{margin:0;padding:4px 12px;flex-wrap:wrap}
  .side-title{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:4px 12px}
  .scrim.on{display:block;position:fixed;inset:0;background:rgba(8,14,20,.45);z-index:25}
}

@media (min-width:561px) and (max-width:1000px){
  .workspace{padding-left:80px}
  .side{position:absolute;left:0;top:0;bottom:0;width:68px;z-index:30}
  .side.open{width:228px;box-shadow:var(--shadow)}
  .side-title{display:none}
  .side:not(.open) .tool{flex-direction:column;justify-content:center;padding:10px 0;gap:0}
  .side:not(.open) .tl,.side:not(.open) .inkrow .note,.side:not(.open) .zoom .btn{display:none}
  .side:not(.open) .inkrow,.side:not(.open) .zoom{flex-direction:column;justify-content:center;padding:4px 0}
  .side:not(.open) .zoom .val{min-width:0;font-size:11px}
}

@media (max-width:560px){
  .side{position:fixed;top:0;bottom:0;left:0;width:min(300px,86vw);z-index:70;border-radius:0 14px 14px 0;transform:translateX(-105%);visibility:hidden;padding-top:max(14px,env(safe-area-inset-top,0px));padding-bottom:max(14px,env(safe-area-inset-bottom,0px));padding-left:max(8px,env(safe-area-inset-left,0px))}
  .side.open{transform:none;visibility:visible;box-shadow:var(--shadow)}
  .scrim.on{z-index:65}
  .phoneonly{display:inline-flex}
  .nophone{display:none!important}
  .btn{padding:8px 10px}
}

@media (prefers-reduced-motion:no-preference){
  .tool,.btn{transition:background .12s,border-color .12s}
  .side{transition:transform .2s ease,visibility .2s,width .15s ease}
}