/* Alpha 7.9.15 TEST14 — sliding side panels layout fix.
   This module deliberately overrides legacy tablet rules from editor-visual-prototype.css.
   On tablets/desktops both panels participate in one 3-column grid; hiding a panel gives its width back to the canvas. */
#editorApp.app{
  --ccs-left-panel-width:250px;
  --ccs-right-panel-width:330px;
  position:relative;
  width:100vw!important;
  max-width:100vw!important;
  height:100dvh!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:var(--ccs-left-panel-width) minmax(0,1fr) var(--ccs-right-panel-width)!important;
  grid-template-areas:"leftPanel workspace rightPanel"!important;
  grid-template-rows:minmax(0,1fr)!important;
  overflow:hidden!important;
  background:#090c11;
  transition:grid-template-columns .22s cubic-bezier(.2,.75,.25,1);
}
#editorApp.panelDragging{transition:none!important;cursor:ew-resize;user-select:none}

/* Explicit reset: older <=900px CSS turned the inspector into a fixed off-canvas drawer.
   That rule was the source of the TEST13 panel dropping out of the grid on tablets. */
@media(min-width:721px){
  #editorApp.app>.rail,
  #editorApp.app>.side,
  #editorApp.app>.workspace{
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    transform:none!important;
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
  }
  #editorApp.app>.rail{
    grid-area:leftPanel!important;
    width:100%!important;
    max-width:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    border-right:1px solid var(--line)!important;
    border-left:0!important;
    opacity:1;
    z-index:2!important;
    transition:opacity .14s ease;
  }
  #editorApp.app>.side{
    grid-area:rightPanel!important;
    width:100%!important;
    max-width:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    border-left:1px solid var(--line)!important;
    border-right:0!important;
    box-shadow:-12px 0 30px #0002!important;
    opacity:1;
    z-index:2!important;
    transition:opacity .14s ease;
  }
  #editorApp.app>.workspace{
    grid-area:workspace!important;
    width:100%!important;
    max-width:none!important;
    overflow:hidden!important;
    z-index:1!important;
  }
  #editorApp .stageWrap{min-width:0!important;min-height:0!important;width:100%!important;height:100%!important}
  #editorApp .stageGrid{min-width:0!important;min-height:100%!important;width:100%!important}
}

#editorApp.leftPanelCollapsed>.rail,
#editorApp.rightPanelCollapsed>.side{opacity:0;pointer-events:none}

/* Panel widths follow the editor's existing responsive design. */
@media(max-width:1180px) and (min-width:901px){#editorApp.app{--ccs-left-panel-width:190px;--ccs-right-panel-width:300px}}
@media(max-width:900px) and (min-width:861px){#editorApp.app{--ccs-left-panel-width:78px;--ccs-right-panel-width:300px}}
@media(max-width:860px) and (min-width:721px){#editorApp.app{--ccs-left-panel-width:78px;--ccs-right-panel-width:280px}}

/* Edge handles remain available even when a panel is completely hidden. */
#editorApp .panelEdgeHandle{
  position:absolute;
  top:50%;
  z-index:45;
  width:27px;height:66px;min-width:27px;
  padding:0;display:grid;place-items:center;
  transform:translateY(-50%);
  border:1px solid #394250;
  background:#111720f5;color:#c6ced9;
  box-shadow:0 10px 28px #0008;
  backdrop-filter:blur(10px);
  font:800 22px/1 system-ui,sans-serif;
  cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  transition:left .22s cubic-bezier(.2,.75,.25,1),right .22s cubic-bezier(.2,.75,.25,1),border-color .14s ease,color .14s ease,background .14s ease;
}
#editorApp.panelDragging .panelEdgeHandle{transition:none!important}
#editorApp .panelEdgeHandle:hover,#editorApp .panelEdgeHandle:focus-visible{color:var(--gold);border-color:#80663a;background:#1c1812f7;outline:none}
#editorApp .leftPanelHandle{left:calc(var(--ccs-left-panel-width) + 5px);border-radius:0 12px 12px 0}
#editorApp .rightPanelHandle{right:calc(var(--ccs-right-panel-width) + 5px);border-radius:12px 0 0 12px}
#editorApp.leftPanelCollapsed .leftPanelHandle{left:5px}
#editorApp.rightPanelCollapsed .rightPanelHandle{right:5px}
#editorApp .panelEdgeHandle::after{content:attr(data-hint);position:absolute;top:50%;opacity:0;pointer-events:none;white-space:nowrap;padding:6px 8px;border:1px solid #313946;border-radius:8px;background:#0c1118;color:#b9c2ce;box-shadow:0 8px 22px #0008;font:600 10px/1.1 system-ui,sans-serif;transform:translateY(-50%);transition:opacity .12s ease}
#editorApp .leftPanelHandle::after{left:34px}#editorApp .rightPanelHandle::after{right:34px}#editorApp .panelEdgeHandle:hover::after{opacity:1}

/* Remove every pixel of a hidden panel from the grid. */
#editorApp.leftPanelCollapsed>.rail{width:0!important;padding-left:0!important;padding-right:0!important;border-right:0!important;overflow:hidden!important}
#editorApp.rightPanelCollapsed>.side{width:0!important;padding-left:0!important;padding-right:0!important;border-left:0!important;box-shadow:none!important;overflow:hidden!important}

/* Phone editor is intentionally disabled by Mobile Encyclopedia Mode. */
@media(max-width:720px), (max-height:520px) and (pointer:coarse){#editorApp .panelEdgeHandle{display:none!important}}
@media(prefers-reduced-motion:reduce){#editorApp.app,#editorApp .panelEdgeHandle,#editorApp>.rail,#editorApp>.side{transition:none!important}}

/* TEST16: editor panel handles stay behind/hidden while any modal is open. */
#editorApp.editorModalOpen .panelEdgeHandle{display:none!important}