/* ================================================================
   V239.2 — visible side gutters
   UI/layout only. No Store/workflow/backend/device/evidence changes.

   Root cause fixed:
   .v225-column has overflow:hidden, therefore V239.1 buttons moved
   outside each panel were clipped. V239.2 gives each button its own
   real grid column as a sibling of the left/right panels.
   ================================================================ */

:root{
  --yv239-left-open:320px;
  --yv239-right-open:430px;
  --yv239-handle-col:38px;
  --yv239-gap:6px;
}

/* Centre lower area remains chat-only. */
.v225-action-card{
  display:none!important;
}
.v225-center{
  grid-template-rows:minmax(0,1fr) auto!important;
}

/* ---------- Desktop five-column shell ----------
   LEFT | HANDLE | WORKSPACE | HANDLE | RIGHT
*/
@media (min-width:1181px){
  .v225-shell{
    grid-template-columns:
      var(--yv239-left-open)
      var(--yv239-handle-col)
      minmax(0,1fr)
      var(--yv239-handle-col)
      var(--yv239-right-open)!important;
    column-gap:var(--yv239-gap)!important;
    transition:grid-template-columns .18s ease,gap .18s ease,padding .18s ease;
  }

  .v225-left{
    grid-column:1!important;
    grid-row:1!important;
  }
  #yv239-left-toggle{
    grid-column:2!important;
    grid-row:1!important;
  }
  .v225-center{
    grid-column:3!important;
    grid-row:1!important;
  }
  #yv239-right-toggle{
    grid-column:4!important;
    grid-row:1!important;
  }
  .v225-right{
    grid-column:5!important;
    grid-row:1!important;
  }

  body.yv239-left-collapsed .v225-shell{
    grid-template-columns:
      0
      var(--yv239-handle-col)
      minmax(0,1fr)
      var(--yv239-handle-col)
      var(--yv239-right-open)!important;
  }
  body.yv239-right-collapsed .v225-shell{
    grid-template-columns:
      var(--yv239-left-open)
      var(--yv239-handle-col)
      minmax(0,1fr)
      var(--yv239-handle-col)
      0!important;
  }
  body.yv239-left-collapsed.yv239-right-collapsed:not(.yv239-workspace-focus) .v225-shell{
    grid-template-columns:
      0
      var(--yv239-handle-col)
      minmax(0,1fr)
      var(--yv239-handle-col)
      0!important;
  }

  body.yv239-workspace-focus .v225-shell{
    grid-template-columns:0 0 minmax(0,1fr) 0 0!important;
    gap:0!important;
    padding:6px!important;
  }
}

@media (min-width:1181px) and (max-width:1500px){
  :root{
    --yv239-left-open:280px;
    --yv239-right-open:380px;
    --yv239-handle-col:36px;
    --yv239-gap:5px;
  }
}

/* ---------- Side handles ----------
   Grid items, not absolutely-positioned children of clipped panels.
*/
.yv239-side-toggle{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;

  z-index:40;
  align-self:center!important;
  justify-self:center!important;

  width:34px!important;
  min-width:34px!important;
  height:72px!important;

  border:1px solid #5b478d!important;
  border-radius:13px!important;
  background:#0b1422!important;
  color:#f1edff!important;
  cursor:pointer!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;

  box-shadow:0 8px 24px rgba(0,0,0,.30)!important;
  font-weight:900!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.yv239-side-toggle:hover{
  border-color:#9c7af4!important;
  background:#181039!important;
}
.yv239-arrow{
  font-size:27px!important;
  line-height:1!important;
}
.yv239-rail-label{
  display:none;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:7px;
  letter-spacing:.12em;
  color:#c8b8ff;
}

/* A collapsed panel occupies zero width; the dedicated handle column IS its rail. */
body.yv239-left-collapsed .v225-left,
body.yv239-right-collapsed .v225-right{
  overflow:hidden!important;
  border-width:0!important;
  opacity:0!important;
  pointer-events:none!important;
  min-width:0!important;
}
body.yv239-left-collapsed .v225-left > *,
body.yv239-right-collapsed .v225-right > *{
  visibility:hidden!important;
  pointer-events:none!important;
}
body.yv239-left-collapsed #yv239-left-toggle,
body.yv239-right-collapsed #yv239-right-toggle{
  height:128px!important;
  background:#0d1626!important;
  border-color:#7058ac!important;
}
body.yv239-left-collapsed .yv239-rail-label,
body.yv239-right-collapsed .yv239-rail-label{
  display:block!important;
}

/* ---------- Chat ---------- */
.yv239-chat-toggle{
  margin-left:auto;
  height:36px!important;
  min-width:154px!important;
  border:1px solid #7258b7!important;
  border-radius:8px!important;
  background:#15102b!important;
  color:#e9e1ff!important;
  padding:0 13px!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  cursor:pointer!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  box-shadow:0 5px 18px rgba(0,0,0,.22)!important;
}
.yv239-chat-toggle:hover{
  border-color:#a98bff!important;
  background:#241649!important;
}
.yv239-chat-chevron{
  font-size:11px!important;
  line-height:1!important;
  color:#b89cff!important;
}
body.yv239-chat-collapsed .v225-center{
  grid-template-rows:minmax(0,1fr) 48px!important;
}
body.yv239-chat-collapsed .v225-chat-card{
  min-height:48px!important;
  height:48px!important;
  overflow:hidden!important;
}
body.yv239-chat-collapsed .v225-chat-history,
body.yv239-chat-collapsed .v225-composer{
  display:none!important;
}
body.yv239-chat-collapsed .v225-chat-head{
  height:48px!important;
  min-height:48px!important;
  padding:7px 10px!important;
  border-bottom:0!important;
}
body.yv239-chat-collapsed .v225-chat-sub{
  display:none!important;
}
body.yv239-chat-collapsed #yv239-chat-toggle{
  background:#2b1a55!important;
  border-color:#8f6ae8!important;
  color:#fff!important;
}
.v225-chat-head{
  gap:12px!important;
}

/* ---------- Workspace-only / camera view ---------- */
body.yv239-workspace-focus{
  overflow:hidden!important;
}
body.yv239-workspace-focus .v225-left,
body.yv239-workspace-focus .v225-right{
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.yv239-workspace-focus .v225-center{
  grid-template-rows:minmax(0,1fr)!important;
  gap:0!important;
}
body.yv239-workspace-focus .v225-chat-card{
  display:none!important;
}
body.yv239-workspace-focus .v225-workspace-card{
  border-radius:10px!important;
  height:100%!important;
}
body.yv239-workspace-focus .v225-workspace-head{
  display:none!important;
}
body.yv239-workspace-focus #yv225-stage{
  min-height:0!important;
  height:100%!important;
}
body.yv239-workspace-focus #yv239-left-toggle,
body.yv239-workspace-focus #yv239-right-toggle{
  display:none!important;
}

.yv239-focus-toggle{
  border-color:#5a478b!important;
  color:#d8ccff!important;
}
.yv239-focus-toggle:hover{
  border-color:#9270f5!important;
  background:#17103b!important;
}
.yv239-focus-exit{
  position:absolute;
  z-index:60;
  top:14px;
  right:14px;
  height:36px;
  border:1px solid #8c6af0;
  border-radius:9px;
  background:rgba(10,18,31,.92);
  color:#fff;
  padding:0 12px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.yv239-focus-exit[hidden]{
  display:none!important;
}

/* Keep existing responsive stacking untouched on smaller screens.
   Side rail controls are desktop-only for this safe fix. */
@media (max-width:1180px){
  #yv239-left-toggle,
  #yv239-right-toggle{
    display:none!important;
  }
  body.yv239-workspace-focus .v225-left,
  body.yv239-workspace-focus .v225-right,
  body.yv239-workspace-focus .v225-chat-card{
    display:none!important;
  }
}