/* mobile.css */

@keyframes bottomSheet{
  from{transform:translateY(100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width:1200px){
  :root{
    --panel-width:400px;
    --workspace-gap:12px;
  }
  .help-body{grid-template-columns:1fr}
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:900px){
  :root{
    --app-padding-x:6px;
    --app-padding-y:0;
    --workspace-gap:6px;
    --panel-width:100%;
    --sidebar-gap:0;
    --canvas-gap:6px;
    --workspace-cols:1fr;
    --workspace-areas:"canvas";
    --editor-cols:1fr;
    --editor-areas:"preview";
  }

  html{height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}
  body{height:auto;min-height:100dvh;max-height:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y pan-x;-webkit-tap-highlight-color:transparent}
  body.panel-open{overflow:hidden;touch-action:none}

  input,textarea,select{font-size:16px !important}
  .highlight-layer{font-size:16px !important;line-height:1.5 !important}

  .app-header{padding:10px 16px 8px;gap:14px;justify-content:center}
  .header-line{display:block;flex:0 0 40px;max-width:40px}
  h1{font-size:18px}
  .status-badge{display:none}

  .app-workspace{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px));flex:none;height:auto;min-height:0;overflow:visible}
  .canvas-col{min-height:0;height:auto;overflow:visible}

  .main-toolbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:0;padding:6px 8px;border-radius:var(--radius-md);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .main-toolbar::-webkit-scrollbar{display:none}
  .main-toolbar .toolbar-group.desktop-only{display:none !important}
  .main-toolbar .toolbar-zoom-group{display:none !important}
  .main-toolbar .toolbar-spacer{display:block !important;flex:1 1 0 !important;min-width:4px}
  .main-toolbar .toolbar-sep{display:none}
  .toolbar-group{flex-shrink:0;padding:0 6px;gap:3px}
  .toolbar-group:first-child{padding-left:0}
  .toolbar-group:last-child{padding-right:0}
  .toolbar-group+.toolbar-group::before{height:16px}
  .tb-btn{height:34px;min-width:34px;padding:0 8px;font-size:11px}
  .tb-btn.tb-icon{width:34px;padding:0}
  .tb-btn.zoom-display{min-width:50px;font-size:11px}
  .tb-btn#zoomOut,.tb-btn#zoomIn{font-size:17px}

  .snap-btn-wrap{ height:34px; }
  .snap-btn-wrap #btnSnap{ height:34px; padding:0 8px; min-width:38px; font-size:11px; }
  .snap-btn-wrap .snap-caret{ width:22px; }
  .snap-btn-wrap .snap-caret::before{
    border-left-width:4px;
    border-right-width:4px;
    border-top-width:5px;
  }

  .canvas-extras{display:none !important}

  .tool-menus{overflow-x:auto;flex-wrap:nowrap;gap:4px;padding:5px 6px;border-radius:var(--radius-md);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tool-menus::-webkit-scrollbar{display:none}
  .tool-menu-btn{height:32px;padding:0 10px;font-size:11px;flex-shrink:0}
  .tool-menu-btn span:not(.tm-caret){display:none}
  .tool-menu-btn .tm-caret{display:none}

  .preview-wrap{width:100%;height:50vh;min-height:240px;max-height:420px;margin-bottom:6px}
  .glass-preview{width:100%;height:100%;border-radius:var(--radius-lg);touch-action:none}
  .svg-viewport{inset:0}

  /* ============================================================
     ZOOM PERFORMANCE
     ============================================================ */
  .glass-preview.zoomed{
    animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .selection-toolbar{
    top:6px; right:6px;
    padding:3px;
    gap:3px;
  }
  .selection-toolbar button{
    width:34px; height:34px;
  }
  .selection-toolbar button svg{ width:16px; height:16px; }

  .canvas-bottom-left{bottom:8px;left:8px;max-width:calc(100% - 240px)}
  .hint-content-wrap{padding:6px 8px}
  .hint-content{font-size:9.5px;gap:3px 10px}
  .hint-content b{font-size:9px;padding:0 4px}

  .shape-sidebar{
    position:fixed;bottom:calc(56px + env(safe-area-inset-bottom,0px));left:0;right:0;z-index:150;
    flex-direction:row;align-items:center;gap:6px;padding:6px 10px;max-height:none;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    border-left:none;border-right:none;border-bottom:none;
    background:rgba(13,15,23,.98);
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    align-self:auto;
  }
  .shape-sidebar::-webkit-scrollbar{display:none}
  .sidebar-tools,.sidebar-shapes,.sidebar-extra,.sidebar-colors{flex-direction:row;align-items:center;gap:6px;flex-shrink:0}
  .sidebar-colors{margin-top:0;padding-top:0;border-top:none;border-left:1px solid rgba(255,255,255,.08);padding-left:8px;margin-left:4px;position:static;background:transparent;box-shadow:none}
  .shape-side-btn{width:44px;height:44px;flex-shrink:0;border-radius:10px}
  .shape-side-btn svg{width:20px;height:20px}
  .split-btn{width:44px;height:44px;flex-shrink:0}
  .split-btn .split-main{width:44px;height:44px;border-radius:10px}
  .split-btn .split-main svg{width:20px;height:20px}
  .split-caret{width:16px;height:16px}
  .split-caret::before{border-left-width:4px;border-bottom-width:4px}
  .draw-color-stack{width:24px;height:24px}
  .draw-color-swatch{width:16px;height:16px}
  .shape-side-sep{width:1px;height:26px;margin:0 3px;flex-shrink:0}

  .mobile-panel-tabs{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    position:fixed;bottom:0;left:0;right:0;
    z-index:401;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    background:rgba(13,15,23,.98);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .mpt-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;background:transparent;border:none;color:var(--text-muted);font-family:inherit;font-size:9px;font-weight:600;cursor:pointer;transition:.15s;-webkit-tap-highlight-color:transparent;border-radius:var(--radius-sm)}
  .mpt-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .mpt-btn:active{background:rgba(var(--neon-rgb),.15);color:var(--neon)}
  .mpt-btn.active{color:var(--neon)}

  .panel-col:not(.mobile-open){display:none !important}

  .panel-mobile-backdrop{
    position:fixed;inset:0;z-index:399;
    background:rgba(0,0,0,.62);
    transition:opacity .2s ease;
    touch-action:none;
  }
  .panel-mobile-backdrop[hidden]{display:none !important}

  .panel-col.mobile-open{
    display:flex !important;
    flex-direction:column !important;
    position:fixed !important;
    left:0 !important;right:0 !important;
    bottom:calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    top:auto !important;
    height:70vh;max-height:70vh;
    z-index:400 !important;
    border-radius:18px 18px 0 0 !important;
    border:none !important;
    border-top:1px solid rgba(255,255,255,.1) !important;
    overflow:hidden !important;
    box-shadow:0 -10px 40px rgba(0,0,0,.65),0 0 0 1px rgba(var(--neon-rgb),.06);
    animation:bottomSheet .25s cubic-bezier(.16,1,.3,1) both;
    touch-action:auto;
    will-change:transform;
  }
  .panel-col.mobile-open.closing{
    animation:none;
  }
  .panel-col.mobile-open::before{
    content:'';
    position:absolute;
    top:8px;left:50%;
    transform:translateX(-50%);
    width:36px;height:4px;
    background:rgba(255,255,255,.3);
    border-radius:2px;
    pointer-events:none;
    z-index:2;
  }
  .panel-col.mobile-open .panel-tabs{ display: none !important; }

  .panel-mobile-head{
    display:flex;align-items:center;gap:10px;
    padding:22px 12px 10px;
    border-bottom:1px solid rgba(255,255,255,.06);
    background:rgba(0,0,0,.4);flex-shrink:0;
    position:relative;touch-action:none;
  }
  .panel-mobile-close{display:flex;align-items:center;gap:4px;padding:6px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--text-main);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
  .panel-mobile-close:active{background:rgba(var(--neon-rgb),.25)}
  .panel-mobile-title{font-size:12px;font-weight:700;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase}
  .panel-col .panel-body{flex:1;min-height:0;touch-action:pan-y}
  .panel-col .layers-body,.panel-col .props-scroll,.panel-col .cheat-body{max-height:none;touch-action:pan-y}
  .panel-col .editor-scroll{touch-action:auto}
  .panel-col textarea,.panel-col input{touch-action:auto}

  .toast{top:6px;font-size:10px;padding:5px 10px;max-width:92%}

  .tool-popover,.dropdown-menu,.color-popover,.split-menu,.draw-colors-popover,.snap-menu,.zoom-menu{
    position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
    width:100% !important;max-width:100% !important;min-width:0 !important;
    border-radius:18px 18px 0 0 !important;
    max-height:85vh;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom,0px)) !important;
    animation:bottomSheet .25s cubic-bezier(.16,1,.3,1) both;
    overflow-y:auto;
  }

  /* Point menu на мобилке — компактнее, но удобно пальцем */
  .point-menu{
    height:40px;
    padding:0 8px;
    gap:3px;
    border-radius:100px;
  }
  .point-menu .pm-badge{
    width:18px;
    height:18px;
    font-size:10px;
    margin-right:2px;
  }
  .point-menu .pm-xy{
    gap:4px;
  }
  .point-menu .pm-xy label{
    font-size:10.5px;
    padding:0 2px;
  }
  .point-menu .pm-xy input{
    width:72px;
    height:28px;
    font-size:12px;
    border-radius:14px;
    padding:0 8px;
  }
  .point-menu .pm-sep{
    height:18px;
    margin:0 3px;
  }
  .point-menu .pm-btn{
    width:32px;
    height:32px;
  }
  .point-menu .pm-btn svg{
    width:16px;
    height:16px;
  }

  .tool-popover .tp-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .tool-popover .tp-grid-5{grid-template-columns:repeat(5,1fr)}
  .tp-btn{padding:10px 4px;font-size:9.5px;gap:4px}
  .tp-btn svg{width:18px;height:18px}
  .split-item{padding:12px 10px;font-size:13px}
  .split-item svg{width:20px;height:20px}

  .help-content{width:100vw;max-height:92vh;border-radius:18px 18px 0 0;position:fixed;bottom:0;left:0;right:0}
  .help-modal{align-items:flex-end}
  .help-body{grid-template-columns:1fr;padding:16px}
  .help-row{font-size:11px}

  .custom-tooltip{display:none !important}

  .app-footer{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}

  .canvas-bottom-left{
    bottom:8px;
    left:8px;
    max-width:calc(100% - 60px);
  }
  .canvas-bottom-left .hint-toggle-fab{
    width:26px;
    height:26px;
  }

  .canvas-bottom-right{
    display:flex;
    bottom:8px;
    right:8px;
    height:32px;
    padding:0 4px;
    gap:1px;
  }
  .canvas-bottom-right .capsule-btn{
    font-size:11px;
    padding:0 4px;
    min-width:32px;
    height:32px;
  }
  .canvas-bottom-right .capsule-btn svg{ width:16px; height:16px; }
  .canvas-bottom-right .capsule-gap{
    width:6px;
  }
  .canvas-bottom-right .capsule-sep{
    height:14px;
    margin:0 2px;
  }
  .canvas-bottom-right .capsule-zoom-btn{
    min-width:42px;
  }
  .canvas-bottom-right .capsule-zoom-step{ display: none !important; }
  .canvas-bottom-left .hint-toggle-fab svg{
    width:12px;
    height:12px;
  }
  .canvas-bottom-left .sel-indicator{
    height:26px;
    padding:0 10px 0 8px;
    font-size:9.5px;
    max-width:200px;
  }
}

@media (max-width:480px){
  .app-header{padding:8px 10px 6px}
  h1{font-size:16px}
  .header-line{flex:0 0 30px;max-width:30px}
  .preview-wrap{height:48vh;min-height:220px}
  .shape-side-btn{width:44px;height:44px}
  .split-btn{width:44px;height:44px}
  .split-btn .split-main{width:44px;height:44px}
  .canvas-bottom-left{ max-width:calc(100% - 220px); }
}