:root{
  --icon-rail:58px;
  --site-commander-panel-width:360px;
}

.left-icon-rail{
  grid-column:1;
  grid-row:2;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:14px 8px;
  background:#090f1b;
  border-right:1px solid rgba(255,255,255,.06);
  z-index:48;
}
.left-icon-rail__brand{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,#6475ff,#4351d5);
  color:#fff;
  font-size:14px;
  font-weight:900;
  box-shadow:0 8px 22px rgba(83,99,242,.26);
}
.left-icon-rail__spacer{flex:1}
.rail-icon-btn{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid transparent;
  border-radius:13px;
  background:transparent;
  color:#cbd4e7;
  cursor:pointer;
  font-size:19px;
  transition:.16s ease;
}
.rail-icon-btn:hover,
.rail-icon-btn[aria-expanded="true"]{
  background:rgba(113,128,255,.16);
  border-color:rgba(144,156,255,.24);
  color:#fff;
}
.rail-icon-btn[aria-expanded="true"]{
  box-shadow:inset 2px 0 0 #7180ff;
}

.site-commander-panel{
  position:fixed;
  top:72px;
  bottom:0;
  left:var(--icon-rail);
  width:min(var(--site-commander-panel-width),calc(100vw - var(--icon-rail) - 18px));
  z-index:75;
  display:flex;
  flex-direction:column;
  background:rgba(15,23,42,.98);
  color:#edf2ff;
  border-right:1px solid rgba(255,255,255,.10);
  box-shadow:18px 0 48px rgba(8,15,29,.24);
  transform:translateX(calc(-100% - 8px));
  opacity:0;
  pointer-events:none;
  transition:transform .2s ease,opacity .16s ease;
}
.site-commander-panel.is-open{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}
.site-commander-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.site-commander-panel__title{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.site-commander-panel__avatar{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(113,128,255,.16);
  font-size:19px;
}
.site-commander-panel__title strong{display:block;font-size:15px}
.site-commander-panel__title span{display:block;margin-top:3px;color:#8f9ab0;font-size:10px;letter-spacing:.08em;font-weight:800}
.site-commander-panel__actions{display:flex;gap:6px}
.panel-icon-btn{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  color:#dbe4f6;
  cursor:pointer;
}
.panel-icon-btn:hover,
.panel-icon-btn[aria-pressed="true"]{background:rgba(113,128,255,.18);border-color:rgba(144,156,255,.28)}
.site-commander-panel__body{
  min-height:0;
  overflow:auto;
  padding:16px;
  display:grid;
  align-content:start;
  gap:12px;
}
.commander-shell-card{
  padding:14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.commander-shell-card small{display:block;color:#8793aa;font-size:9px;letter-spacing:.12em;font-weight:900;margin-bottom:7px}
.commander-shell-card strong{display:block;font-size:14px;line-height:1.45}
.commander-shell-card p{margin:6px 0 0;color:#aeb9cc;font-size:12px;line-height:1.55}
.site-commander-panel__footer{
  margin-top:auto;
  padding:14px 16px 18px;
  border-top:1px solid rgba(255,255,255,.08);
}
.commander-open-full{
  width:100%;
  border:1px solid rgba(144,156,255,.22);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(83,99,242,.86),rgba(63,79,215,.94));
  color:#fff;
  padding:11px 13px;
  font-weight:800;
  cursor:pointer;
}

.app-shell{
  grid-template-columns:var(--icon-rail) var(--sidebar) minmax(0,1fr) var(--timeline);
}
.app-header{
  grid-template-columns:calc(var(--icon-rail) + var(--sidebar)) minmax(0,1fr) auto;
}
.sidebar{grid-column:2}
.main-area{grid-column:3}
.timeline{grid-column:4}


/* #427 integration reconcile: workspace-mode remains the state owner while
   this shell only reserves geometry for the resident Left Rail. */
body.visual-v1 .app-shell[data-workspace-mode]{
  grid-template-columns:var(--icon-rail) var(--sidebar) minmax(0,1fr) var(--timeline);
  grid-template-rows:56px minmax(0,1fr);
}
body.visual-v1 .app-shell[data-workspace-mode]>.sidebar{grid-column:2}
body.visual-v1 .app-shell[data-workspace-mode]>.main-area{grid-column:3}
body.visual-v1 .app-shell[data-workspace-mode]>.timeline{grid-column:4}
body.visual-v1 .app-shell[data-workspace-mode]>.site-commander-panel{top:56px}

body.visual-v1 .app-header.workspace-mode-ready{
  grid-template-columns:calc(var(--icon-rail) + var(--sidebar)) minmax(210px,1fr) auto auto auto;
}

body.visual-v1 .app-shell[data-workspace-mode="C"] .command-dock{left:calc(var(--icon-rail) + var(--sidebar) + 22px)}
body.visual-v1 .app-shell[data-workspace-mode="D"] .command-dock{left:calc(var(--icon-rail) + var(--sidebar) + 16px)}
body.visual-v1 .app-shell[data-workspace-mode="A"] .command-dock{left:calc(var(--icon-rail) + var(--sidebar) + 28px)}
body.visual-v1 .app-shell[data-workspace-mode="B"] .command-dock{left:calc(var(--icon-rail) + var(--sidebar) + 24px)}

@media (max-width:1280px){
  .app-shell{grid-template-columns:var(--icon-rail) var(--sidebar) minmax(0,1fr)}
  .main-area{grid-column:3}
  body.visual-v1 .app-header.workspace-mode-ready{grid-template-columns:calc(var(--icon-rail) + var(--sidebar)) minmax(120px,1fr) auto auto}
}

@media (max-width:1000px){
  body.visual-v1 .app-header.workspace-mode-ready{grid-template-columns:calc(var(--icon-rail) + var(--sidebar)) minmax(0,1fr) auto}
}

@media (max-width:880px){
  :root{--icon-rail:54px}
  .app-header{grid-template-columns:calc(var(--icon-rail) + 74px) minmax(0,1fr) auto}
  body.visual-v1 .app-header.workspace-mode-ready{grid-template-columns:calc(var(--icon-rail) + 74px) minmax(0,1fr) auto}
  .left-icon-rail{padding-left:6px;padding-right:6px}
  .rail-icon-btn{width:40px;height:40px}
}

@media (max-width:700px){
  :root{--icon-rail:54px}
  .app-shell{grid-template-columns:var(--icon-rail) minmax(0,1fr);grid-template-rows:64px minmax(0,1fr)}
  .app-header{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr) auto;padding-left:64px}
  .left-icon-rail{grid-column:1;grid-row:2}
  .main-area{grid-column:2;grid-row:2}
  .mobile-core-entry{left:64px}
  .command-dock{left:64px}
  .site-commander-panel{top:64px}

  body.visual-v1 .app-shell[data-workspace-mode]{
    grid-template-columns:var(--icon-rail) minmax(0,1fr);
    grid-template-rows:64px minmax(0,1fr);
  }
  body.visual-v1 .app-shell[data-workspace-mode]>.left-icon-rail{grid-column:1;grid-row:2}
  body.visual-v1 .app-shell[data-workspace-mode]>.main-area{grid-column:2;grid-row:2}
  body.visual-v1 .app-shell[data-workspace-mode]>.site-commander-panel{top:64px}
  body.visual-v1 .app-header.workspace-mode-ready{
    grid-column:1/-1;
    grid-template-columns:auto minmax(0,1fr) auto;
    padding-left:calc(var(--icon-rail) + 10px);
  }
  body.visual-v1 .app-header.workspace-mode-ready .workspace-mode-switcher{left:calc(var(--icon-rail) + 10px)}
  body.visual-v1 .app-shell[data-workspace-mode] .mobile-core-entry{left:calc(var(--icon-rail) + 10px)}
  body.visual-v1 .app-shell[data-workspace-mode] .command-dock{left:calc(var(--icon-rail) + 10px);right:10px}
  body.visual-v1 .app-shell[data-workspace-mode] .context-panel{left:calc(var(--icon-rail) + 10px);right:10px}
}

@media (prefers-reduced-motion:reduce){
  .site-commander-panel{transition:none}
}


/* Left Rail customization: presentation-only preferences. */
.left-icon-rail__items{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
}
.rail-icon-btn[data-rail-generated="true"]{
  position:relative;
}
.rail-icon-btn[data-rail-pinned="true"]::after{
  content:"";
  position:absolute;
  right:4px;
  top:4px;
  width:5px;
  height:5px;
  border-radius:999px;
  background:currentColor;
  opacity:.9;
}
.rail-settings-trigger{
  margin-top:auto;
  font-size:18px;
  letter-spacing:.08em;
  line-height:1;
}
.left-rail-settings-panel{
  position:fixed;
  left:calc(var(--icon-rail) + 8px);
  bottom:14px;
  width:min(360px,calc(100vw - var(--icon-rail) - 24px));
  max-height:min(620px,calc(100dvh - 84px));
  z-index:82;
  display:flex;
  flex-direction:column;
  background:rgba(15,23,42,.99);
  color:#edf2ff;
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(3,8,18,.42);
  transform:translateY(8px) scale(.985);
  transform-origin:left bottom;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease,transform .18s ease;
}
.left-rail-settings-panel.is-open{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.left-rail-settings-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.left-rail-settings-panel__head strong{
  display:block;
  margin-top:4px;
}
.left-rail-settings-panel__hint{
  margin:0;
  padding:11px 16px;
  color:#9eabc1;
  font-size:12px;
  line-height:1.5;
}
.left-rail-settings-list{
  min-height:0;
  overflow:auto;
  padding:0 10px 10px;
  display:grid;
  gap:7px;
}
.left-rail-setting-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.left-rail-setting-row.is-dragging{opacity:.55}
.left-rail-setting-row.is-drop-target{outline:2px solid rgba(113,128,255,.6)}
.left-rail-setting-main{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-width:0;
}
.left-rail-setting-main input{margin:0}
.left-rail-setting-label{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.left-rail-setting-label strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.left-rail-setting-label span{
  color:#8e9ab0;
  font-size:10px;
}
.left-rail-setting-actions{
  display:flex;
  align-items:center;
  gap:5px;
}
.left-rail-setting-actions button{
  min-width:32px;
  height:30px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:9px;
  background:rgba(255,255,255,.04);
  color:#dbe4f6;
  cursor:pointer;
}
.left-rail-setting-actions button[aria-pressed="true"]{
  background:rgba(113,128,255,.18);
  border-color:rgba(144,156,255,.32);
}
.left-rail-setting-row[data-available="false"]{
  opacity:.58;
}
.left-rail-setting-row[data-available="false"] .left-rail-setting-main input,
.left-rail-setting-row[data-available="false"] .left-rail-setting-actions button{
  pointer-events:none;
}
.left-rail-settings-panel__footer{
  padding:12px 16px 14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.left-rail-settings-panel__footer button{width:100%}

@media (max-width:700px){
  .left-rail-settings-panel{
    left:calc(var(--icon-rail) + 6px);
    top:70px;
    bottom:10px;
    width:min(350px,calc(100vw - var(--icon-rail) - 16px));
    max-height:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .left-rail-settings-panel{transition:none}
}


/* #423 contract correction: resident Left Rail remains an app-shell column.
   Keep owners/events unchanged while aligning geometry with current product contract. */
body.visual-v1 .app-shell{
  grid-template-columns:var(--icon-rail) var(--sidebar) minmax(0,1fr) var(--timeline);
}
body.visual-v1 .app-shell>.left-icon-rail{grid-column:1;grid-row:2}
body.visual-v1 .app-shell>.sidebar{grid-column:2;grid-row:1/-1}
body.visual-v1 .app-shell>.main-area{grid-column:3}
body.visual-v1 .app-shell>.timeline{grid-column:4}
body.visual-v1 .app-header{
  grid-column:2/-1;
  grid-template-columns:calc(var(--icon-rail) + var(--sidebar)) minmax(0,1fr) auto;
}

@media (max-width:1280px){
  body.visual-v1 .app-shell{grid-template-columns:var(--icon-rail) var(--sidebar) minmax(0,1fr)}
  body.visual-v1 .app-shell>.main-area{grid-column:3}
  body.visual-v1 .app-header.workspace-mode-ready{grid-template-columns:calc(var(--icon-rail) + var(--sidebar)) minmax(120px,1fr) auto auto}
  body.visual-v1 .app-shell[data-workspace-mode]{grid-template-columns:var(--icon-rail) var(--sidebar) minmax(0,1fr)}
  body.visual-v1 .app-shell[data-workspace-mode]>.main-area{grid-column:3}
}

@media (max-width:1000px){
  body.visual-v1 .app-header.workspace-mode-ready{grid-template-columns:calc(var(--icon-rail) + var(--sidebar)) minmax(0,1fr) auto}
}

@media (max-width:700px){
  body.visual-v1 .app-shell,
  body.visual-v1 .app-shell[data-workspace-mode]{
    grid-template-columns:var(--icon-rail) minmax(0,1fr);
    grid-template-rows:64px minmax(0,1fr);
  }
  body.visual-v1 .app-header,
  body.visual-v1 .app-header.workspace-mode-ready{
    grid-column:1/-1;
    grid-template-columns:auto minmax(0,1fr) auto;
    padding-left:calc(var(--icon-rail) + 10px);
  }
  body.visual-v1 .app-shell>.main-area,
  body.visual-v1 .app-shell[data-workspace-mode]>.main-area{
    grid-column:2;
    grid-row:2;
  }
  .site-commander-panel,
  body.visual-v1 .app-shell[data-workspace-mode]>.site-commander-panel{
    top:64px;
    left:var(--icon-rail);
    width:min(var(--site-commander-panel-width),calc(100vw - var(--icon-rail) - 12px));
  }
  .left-rail-settings-panel{
    left:calc(var(--icon-rail) + 6px);
    top:70px;
    bottom:10px;
    width:min(350px,calc(100vw - var(--icon-rail) - 16px));
    max-height:none;
  }
  body.visual-v1 .app-header.workspace-mode-ready .workspace-mode-switcher{left:calc(var(--icon-rail) + 10px)}
  body.visual-v1 .app-shell[data-workspace-mode] .mobile-core-entry{left:calc(var(--icon-rail) + 10px)}
  body.visual-v1 .app-shell[data-workspace-mode] .command-dock{left:calc(var(--icon-rail) + 10px);right:10px}
  body.visual-v1 .app-shell[data-workspace-mode] .context-panel{left:calc(var(--icon-rail) + 10px);right:10px}
}


/* P9 Live Voice · browser capability adapter only */
.site-commander-live-voice{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(113,128,255,.10);
  color:inherit;
  border-radius:10px;
  padding:9px 11px;
  font-weight:800;
  cursor:pointer;
}
.site-commander-live-voice[data-voice-state="LISTENING"]{
  border-color:rgba(255,110,110,.5);
  box-shadow:0 0 0 3px rgba(255,110,110,.08);
}
.site-commander-live-voice[data-voice-state="ERROR"]{border-color:rgba(255,187,85,.45)}
.site-commander-live-voice:disabled{opacity:.55;cursor:not-allowed}
.site-commander-panel__footer{display:flex;gap:8px;align-items:center}
.site-commander-panel__footer .commander-open-full{flex:1}
@media (max-width:700px){
  .site-commander-panel__footer{align-items:stretch;flex-direction:column}
  .site-commander-live-voice{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .site-commander-live-voice{transition:none!important}
}


/* ARISE-PORTAL-LEFT-NAV-UNIFICATION-001
   Single fixed rail + selection-only contextual navigation.
   The legacy sidebar keeps its routes/state ownership, but no longer consumes a permanent grid column. */
body.visual-v1 .app-shell,
body.visual-v1 .app-shell[data-workspace-mode]{
  grid-template-columns:var(--icon-rail) minmax(0,1fr) var(--timeline);
}
body.visual-v1 .app-shell>.left-icon-rail{
  grid-column:1;
  grid-row:2;
  z-index:150;
}
body.visual-v1 .app-shell>.main-area,
body.visual-v1 .app-shell[data-workspace-mode]>.main-area{
  grid-column:2;
}
body.visual-v1 .app-shell>.timeline{grid-column:3}
body.visual-v1 .app-header,
body.visual-v1 .app-header.workspace-mode-ready{
  grid-column:2/-1;
  grid-template-columns:minmax(180px,260px) minmax(0,1fr) auto;
}

body.visual-v1 .context-navigation-panel{
  position:fixed;
  z-index:140;
  left:var(--icon-rail);
  top:64px;
  bottom:0;
  width:var(--sidebar);
  display:flex;
  flex-direction:column;
  grid-column:auto;
  grid-row:auto;
  transform:translateX(calc(-100% - 12px));
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  box-shadow:18px 0 40px rgba(0,0,0,.28);
  transition:transform .18s ease,opacity .18s ease,visibility 0s linear .18s;
}
body.visual-v1 .context-navigation-panel.is-open{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
  visibility:visible;
  transition-delay:0s;
}
.context-navigation-panel__head{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px 8px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.context-navigation-panel__head>div{display:grid;gap:2px}
.context-navigation-panel__head strong{font-size:14px}
body.visual-v1 .context-navigation-panel nav{
  min-height:0;
  overflow:auto;
  flex:1;
}
body.visual-v1 .rail-icon-btn[aria-current="page"]{
  outline:2px solid rgba(144,156,255,.55);
  outline-offset:-2px;
}

@media (max-width:1280px){
  body.visual-v1 .app-shell,
  body.visual-v1 .app-shell[data-workspace-mode]{
    grid-template-columns:var(--icon-rail) minmax(0,1fr);
  }
  body.visual-v1 .app-shell>.main-area,
  body.visual-v1 .app-shell[data-workspace-mode]>.main-area{grid-column:2}
  body.visual-v1 .app-header.workspace-mode-ready{
    grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto auto;
  }
}
@media (max-width:1000px){
  body.visual-v1 .app-header.workspace-mode-ready{
    grid-template-columns:minmax(120px,190px) minmax(0,1fr) auto;
  }
}
@media (max-width:700px){
  body.visual-v1 .app-shell,
  body.visual-v1 .app-shell[data-workspace-mode]{
    grid-template-columns:var(--icon-rail) minmax(0,1fr);
    grid-template-rows:64px minmax(0,1fr);
  }
  body.visual-v1 .app-header,
  body.visual-v1 .app-header.workspace-mode-ready{
    grid-column:1/-1;
    grid-template-columns:auto minmax(0,1fr) auto;
    padding-left:calc(var(--icon-rail) + 10px);
  }
  body.visual-v1 .context-navigation-panel{
    display:flex;
    left:var(--icon-rail);
    top:64px;
    width:min(var(--sidebar),calc(100vw - var(--icon-rail) - 8px));
  }
}
@media (prefers-reduced-motion:reduce){
  body.visual-v1 .context-navigation-panel{transition:none}
}