/* ============================================================
   AL MOUTMAG — layout.css
   Dual-panel workspace grid (Sidebar | Agent+Composer | Canvas)
   Collapse states · responsive · mobile drawers · safe areas
   ============================================================ */

.alm-app{position:relative;z-index:1;height:100dvh;display:flex;flex-direction:column;overflow:hidden;animation:almFadeIn .5s both}

.alm-body{flex:1;display:flex;min-height:0;overflow:hidden}

.alm-stage{flex:1;display:flex;gap:12px;min-width:0;min-height:0;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));position:relative}

/* Collapse states (desktop) */
body[data-canvas="off"] .alm-canvascol{display:none}
body[data-canvas="off"] .alm-chatcol{flex:1 1 auto}
@media (min-width:941px){
  body[data-canvas="off"] .alm-canvas-restore{display:inline-flex}
  body[data-agent="off"] .alm-agent-restore{display:inline-flex}
}

/* Desktop-only / mobile-only helpers */
.alm-only-mobile{display:none!important}

/* ============================================================
   ≤ 1280px — tighter columns
   ============================================================ */
@media (max-width:1280px){
  .alm-chatcol{flex-basis:clamp(330px,38vw,470px)}
  .alm-logo__tag{display:none}
}

/* ============================================================
   ≤ 940px — mobile: drawers + view switcher
   ============================================================ */
@media (max-width:940px){
  .alm-only-mobile{display:inline-flex!important}
  .alm-only-desktop{display:none!important}
  .alm-canvas-restore,.alm-agent-restore{display:none!important}

  .alm-header{flex-wrap:wrap;height:auto;min-height:0;padding:8px 10px 6px;row-gap:8px}
  .alm-model-tabs{order:5;flex:1 1 100%;max-width:none;overflow-x:auto;scrollbar-width:none}
  .alm-model-tabs::-webkit-scrollbar{display:none}
  .alm-tab{padding:6px 12px}
  .alm-tab__hint{display:none}

  .alm-stage{padding:0 10px calc(74px + env(safe-area-inset-bottom,0px))}
  .alm-chatcol{flex:1 1 auto;overflow:visible}
  body[data-agent="off"] .alm-chatcol{flex-basis:auto;opacity:1;pointer-events:auto}

  /* sidebar → right drawer (RTL inline-start) */
  .alm-sidebar{position:fixed;z-index:40;top:0;bottom:0;inset-inline-start:0;width:min(320px,86vw);
    border-radius:0;background:rgba(6,10,20,.96);transform:translateX(105%);
    transition:transform .35s cubic-bezier(.4,0,.2,1)}
  body[data-sidebar="off"] .alm-sidebar{width:min(320px,86vw);padding:14px 12px;opacity:1;pointer-events:auto;border-inline-end-width:1px}
  body[data-nav="open"] .alm-sidebar{transform:translateX(0)}

  /* canvas → full-height sheet (RTL inline-end = left side) */
  .alm-canvascol{position:fixed;z-index:40;top:0;bottom:0;inset-inline-end:0;width:min(620px,100%);
    padding:10px;background:rgba(5,8,16,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    transform:translateX(-105%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
  body[data-mobile-view="canvas"] .alm-canvascol{transform:translateX(0)}

  .alm-mobile-viewbar{display:flex}
  .alm-chatcol__head{margin:8px 0}
}

@media (min-width:941px){
  .alm-only-mobile{display:none!important}
  .alm-mobile-viewbar{display:none!important}
}

/* ============================================================
   Small phones
   ============================================================ */
@media (max-width:420px){
  .alm-hero__stats{flex-wrap:wrap;row-gap:10px}
  .alm-stat{flex:1 1 40%}
  .alm-stat + .alm-stat::before{display:none}
  .alm-hero__cards{grid-template-columns:1fr}
  .alm-tree{width:132px}
  .alm-composer__hint{display:none}
}

/* ============================================================
   Phase 2 · GitHub Engine — responsive
   ============================================================ */
@media (max-width:940px){
  .alm-modal__panel--wide{width:100%;max-height:92vh}
  .alm-ghresults{grid-template-columns:1fr;max-height:46vh}
  .alm-ghtree{max-height:38vh}
  .alm-ratebadge{padding:4px 9px;font-size:9px}
}
@media (max-width:420px){
  .alm-ghsearch .alm-select{flex:1 1 40%}
  .alm-repocard{width:100%}
  .alm-repocard__info small{max-width:150px}
  .gh-file__meta{display:none}
}