/* ═══════════════════════════════════════════════
   APP SHELL — NAV RAIL + MAIN
═══════════════════════════════════════════════ */
#appShell{display:flex;height:100vh;overflow:hidden}

/* ── ICON RAIL (48px — spec §4.1) ── */
#icon-rail{
  width:48px;flex-shrink:0;
  background:var(--s1);border-right:1px solid var(--b1);
  display:flex;flex-direction:column;align-items:center;
  padding:8px 0;gap:2px;z-index:50;
}
.ir-ws-btn{
  width:32px;height:32px;border-radius:var(--radius-md);
  background:var(--accent);color:#fff;border:none;
  font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;transition:var(--transition-base);flex-shrink:0;
}
.ir-ws-btn:hover{opacity:.85}
.ir-btn{
  width:36px;height:36px;border-radius:var(--radius-md);
  background:none;border:none;color:var(--t3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--transition-base);opacity:.7;
}
.ir-btn:hover{background:var(--s3);color:var(--tx);opacity:1}
.ir-btn.on{background:var(--s3);color:var(--tx);opacity:1}
.ir-btn.on svg{stroke:var(--accent)}
.ir-spacer{flex:1}
.ir-create-btn{
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:var(--accent);color:#fff;border:none;
  font-size:18px;font-weight:400;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition-base);margin-bottom:4px;
}
.ir-create-btn:hover{background:var(--accent-hover)}
.ir-divider{width:24px;height:1px;background:var(--b1);margin:4px 0;flex-shrink:0}
.ir-user-btn{
  width:32px;height:32px;border-radius:var(--radius-full);
  background:var(--accent);color:#fff;border:none;
  font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition-base);margin-top:4px;
}
.ir-user-btn:hover{opacity:.85}

/* ── SIDEBAR (260px — spec §4.2) ── */
#sidebar{
  width:260px;flex-shrink:0;
  background:var(--s1);border-right:1px solid var(--b1);
  display:flex;flex-direction:column;overflow:hidden;
  transition:width .22s cubic-bezier(.4,0,.2,1);
}
#sidebar.collapsed{width:64px}
/* Hide all text labels when collapsed */
#sidebar.collapsed .sb-title,
#sidebar.collapsed .sb-sub,
#sidebar.collapsed .sb-new-label,
#sidebar.collapsed .nav-label,
#sidebar.collapsed .nav-badge,
#sidebar.collapsed .nav-sec,
#sidebar.collapsed .sb-name,
#sidebar.collapsed .sb-email,
#sidebar.collapsed .theme-toggle-label,
#sidebar.collapsed .theme-toggle-track,
#sidebar.collapsed .signout-label{display:none!important}
/* Also hide filter-only items that have no icon */
#sidebar.collapsed .nav-btn:not([id]){display:none!important}
/* Layout fixes */
#sidebar.collapsed .sb-top{padding:12px 8px}
#sidebar.collapsed .sb-brand{justify-content:center}
#sidebar.collapsed .sb-new{width:40px;height:40px;padding:0;min-width:0;justify-content:center;border-radius:10px;margin:0 auto}
#sidebar.collapsed .sb-nav{padding:4px 8px;gap:2px}
#sidebar.collapsed .nav-btn{width:40px;height:40px;padding:0;justify-content:center;gap:0;border-radius:10px;margin:0 auto;box-shadow:none}
#sidebar.collapsed .nav-btn.on{box-shadow:inset 3px 0 0 var(--accent);background:var(--s3)}
#sidebar.collapsed .nav-ic{width:20px;height:20px}
#sidebar.collapsed .sb-foot{padding:8px}
#sidebar.collapsed .sb-user{justify-content:center;padding:6px 0}
#sidebar.collapsed .sb-avi{margin:0 auto}
#sidebar.collapsed .theme-toggle{justify-content:center;padding:6px 0;border:none;background:none}
#sidebar.collapsed .sb-signout-full{justify-content:center;padding:6px 0;border:none;background:none;font-size:11px;color:var(--t3)}

.sb-collapse-btn{
  position:absolute;right:-13px;top:24px;
  width:26px;height:26px;border-radius:50%;
  background:var(--s2);border:1px solid var(--b1);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--t3);cursor:pointer;transition:.15s;z-index:10;
}
.sb-collapse-btn:hover{background:var(--s3);color:var(--tx)}
#sidebar{position:relative}

.sb-top{padding:16px 14px 12px}
.sb-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sb-icon{display:none}
.sb-title{font-size:16px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;color:var(--tx)}
.sb-sub{font-size:11px;color:var(--t3);white-space:nowrap;letter-spacing:.1px}

.sb-new{
  width:100%;padding:10px 14px;
  background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius-sm);font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:var(--transition-base);white-space:nowrap;letter-spacing:-.1px;
}
.sb-new:hover{opacity:.88}
.sb-new-label{white-space:nowrap}

.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 10px;display:flex;flex-direction:column;gap:1px}

/* Section headers — clearly legible */
.nav-sec{
  font-size:10px;font-weight:700;color:var(--t3);
  padding:14px 8px 4px;letter-spacing:1px;white-space:nowrap;
  text-transform:uppercase;
}
.nav-sec:first-child{padding-top:4px}

/* Nav buttons — clean left-border active indicator */
.nav-btn{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;background:none;border:none;
  border-radius:8px;color:var(--t2);
  font-size:13px;font-weight:500;text-align:left;transition:.12s;
  white-space:nowrap;overflow:hidden;position:relative;
}
.nav-btn:hover{background:var(--s3);color:var(--tx)}

/* Active: left accent bar (indigo) + subtle bg */
.nav-btn.on{
  background:var(--s3);color:var(--tx);font-weight:600;
  box-shadow:inset 3px 0 0 var(--accent);
}
.nav-btn.on .nav-ic svg{stroke:var(--accent)}

/* Icon container */
.nav-ic{
  width:20px;min-width:20px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;opacity:.7;
}
.nav-btn.on .nav-ic{opacity:1}
.nav-btn:hover .nav-ic{opacity:1}

/* Stage filter dots — bigger and more visible */
.nav-dot{
  width:10px;height:10px;min-width:10px;border-radius:50%;
  display:inline-block;flex-shrink:0;
  box-shadow:0 0 0 2px var(--s1);
}

.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}

/* Badge — right-aligned count pill */
.nav-badge{
  margin-left:auto;font-size:11px;font-weight:600;
  background:var(--s4);color:var(--t2);
  padding:1px 7px;border-radius:10px;flex-shrink:0;
  min-width:22px;text-align:center;
}
.nav-btn.on .nav-badge{background:var(--accent);color:#fff}
.nav-btn:hover .nav-badge{background:var(--b1)}

.sb-foot{padding:10px 8px}
.sb-user{
  display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:8px;
  border-radius:50px;overflow:hidden;cursor:default;
}
.sb-avi{
  width:32px;height:32px;min-width:32px;border-radius:var(--radius-full);background:var(--accent);color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sb-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.sb-email{font-family:var(--mono);font-size:10px;color:var(--t4);white-space:nowrap;overflow:hidden}
.sb-signout{display:none}
.sb-signout:hover{color:var(--red)}

/* Theme toggle */
.theme-toggle{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;background:none;border:1px solid var(--b1);
  border-radius:50px;color:var(--t2);font-size:13px;font-weight:500;
  transition:.2s;margin-bottom:8px;
}
.theme-toggle:hover{border-color:var(--b2);color:var(--tx);background:var(--s3)}
.theme-toggle-track{
  width:36px;height:20px;border-radius:10px;background:var(--b2);
  position:relative;transition:.25s;flex-shrink:0;margin-left:auto;
}
.theme-toggle-track.on{background:var(--amber)}
.theme-toggle-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;
  position:absolute;top:2px;left:2px;transition:.25s;
}
.theme-toggle-track.on .theme-toggle-thumb{left:18px}

/* Sign out */
.sb-signout-full{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;background:none;border:1px solid var(--b1);
  border-radius:50px;color:var(--t3);font-size:13px;font-weight:500;transition:.2s;
}
.sb-signout-full:hover{border-color:var(--red);color:var(--red);background:var(--red-d)}

/* ═══════════════════════════════════════════════
   MAIN AREA
═══════════════════════════════════════════════ */
#mainArea{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

.topbar{
  height:52px;flex-shrink:0;
  background:var(--s1);border-bottom:1px solid var(--b1);
  display:flex;align-items:center;padding:0 20px;gap:12px;
}
.topbar-title{font-size:15px;font-weight:700;color:var(--tx);letter-spacing:-.3px;white-space:nowrap}
.topbar-chips{display:flex;gap:6px;align-items:center}
.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.topbar-search{
  display:flex;align-items:center;gap:7px;
  padding:7px 14px;background:var(--s3);border:1px solid var(--b1);
  border-radius:var(--radius-sm);transition:var(--transition-base);width:220px;
}
.topbar-search:focus-within{border-color:var(--accent);background:var(--s2);width:280px}
.topbar-search input{
  background:none;border:none;outline:none;color:var(--tx);
  font-size:13px;width:100%;font-family:inherit;
}
.topbar-search input::placeholder{color:var(--t3)}
.topbar-search svg{color:var(--t3);flex-shrink:0}
.topbar-screenshot-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;background:none;border:1px solid var(--b1);
  border-radius:var(--radius-sm);color:var(--t2);font-size:12px;font-weight:500;
  transition:var(--transition-base);white-space:nowrap;
}
.topbar-screenshot-btn:hover{border-color:var(--b2);color:var(--tx);background:var(--s3)}
.topbar-new-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 18px;background:var(--accent);
  border:none;border-radius:var(--radius-sm);color:#fff;
  font-size:13px;font-weight:600;transition:var(--transition-base);white-space:nowrap;
}
.topbar-new-btn:hover{background:var(--accent-hover)}
.tc{
  font-family:var(--mono);font-size:11px;color:var(--t3);
  padding:0;border:none;background:none;
}
.tc::before{content:'·';margin-right:5px;color:var(--t4)}
.tc:first-child::before{display:none}
.tc.g{color:var(--green)}
.demo-pill{
  font-family:var(--mono);font-size:10px;font-weight:500;
  background:var(--amber-d);color:var(--amber);
  border:1px solid var(--amber-g);border-radius:6px;padding:2px 8px;
}

/* ── VIEW CONTAINER ── */
.view{flex:1;overflow-y:auto;overflow-x:hidden;display:none;min-height:0}
.view.active{display:flex;flex-direction:column}
#view-editor.active{overflow:hidden}

/* ── RIGHT PANEL (340px — spec §4.4) ── */
#right-panel{
  width:340px;flex-shrink:0;
  background:var(--s1);border-left:1px solid var(--b1);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(100%);transition:transform var(--transition-slow);
  position:fixed;right:0;top:0;bottom:0;z-index:100;
}
#right-panel.open{transform:translateX(0);box-shadow:var(--shadow-lg)}
.rp-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--b1);flex-shrink:0;
}
.rp-title{font-size:15px;font-weight:700;color:var(--tx)}
.rp-close-btn{
  width:28px;height:28px;border-radius:var(--radius-md);
  background:none;border:1px solid var(--b1);color:var(--t3);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:14px;transition:var(--transition-base);
}
.rp-close-btn:hover{background:var(--s3);color:var(--tx)}
.rp-content{flex:1;overflow-y:auto;padding:16px 20px}

/* ── CREATE MENU (glass dropdown — spec §9) ── */
#create-menu{
  position:fixed;left:52px;bottom:80px;
  width:260px;border-radius:var(--radius-lg);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);
  z-index:9000;display:none;flex-direction:column;padding:8px;
}
#create-menu.open{display:flex}
.cm-title{
  font-size:11px;font-weight:600;color:var(--t3);
  text-transform:uppercase;letter-spacing:.6px;
  padding:6px 10px 4px;
}
.cm-item{
  display:flex;align-items:flex-start;gap:10px;padding:9px 10px;
  border-radius:var(--radius-md);background:none;border:none;
  color:var(--tx);font-size:13px;cursor:pointer;text-align:left;
  width:100%;transition:var(--transition-fast);
}
.cm-item:hover{background:var(--s3)}
.cm-item-icon{font-size:15px;width:20px;flex-shrink:0;margin-top:1px}
.cm-item-info{}
.cm-item-label{font-weight:500;color:var(--tx);display:block}
.cm-item-sub{font-size:11px;color:var(--t3);display:block;margin-top:1px}
.cm-sep{height:1px;background:var(--glass-border);margin:4px 0}

/* ── PROFILE POPUP (glass — spec §8) ── */
#profile-popup{
  position:fixed;left:52px;bottom:8px;
  width:240px;border-radius:var(--radius-lg);
  background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);
  z-index:9000;display:none;flex-direction:column;padding:8px;
}
#profile-popup.open{display:flex}
.pp-head{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:4px}
.pp-avi{
  width:40px;height:40px;border-radius:var(--radius-full);
  background:var(--accent);color:#fff;
  font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pp-name{font-size:14px;font-weight:600;color:var(--tx)}
.pp-status{font-size:12px;color:var(--success);margin-top:1px}
.pp-sep{height:1px;background:var(--glass-border);margin:4px 0}
.pp-item{
  display:flex;align-items:center;gap:8px;padding:9px 10px;
  border-radius:var(--radius-md);background:none;border:none;
  color:var(--t2);font-size:13px;cursor:pointer;text-align:left;width:100%;
  transition:var(--transition-fast);
}
.pp-item:hover{background:var(--s3);color:var(--tx)}
.pp-item.danger:hover{color:var(--error);background:var(--error-bg)}