.control-coming-soon{position:relative;opacity:.58!important;cursor:not-allowed!important}
.control-coming-soon-badge{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 5px;border:1px solid #d7dce6;border-radius:999px;background:#f6f7f9;color:#7a8497;white-space:nowrap;writing-mode:horizontal-tb;line-height:1.1}
.sidebar .nav-item.control-coming-soon{grid-template-columns:26px minmax(0,1fr) auto;column-gap:7px}
.sidebar .nav-item.control-coming-soon .control-coming-soon-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:0;min-width:max-content;padding:3px 5px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#8f9aaf;font-size:8px;letter-spacing:0;line-height:1;white-space:nowrap;writing-mode:horizontal-tb}
.quick-actions .control-coming-soon-badge{margin-left:6px}
.quick-actions span[role="button"]{cursor:pointer;outline:none;border-radius:8px;padding:3px 5px;margin-left:-5px}
.quick-actions span[role="button"]:focus-visible{box-shadow:0 0 0 2px #315efb33}
.control-info-chip{cursor:default!important;user-select:text}
.control-integrity-toast{position:fixed;left:50%;bottom:92px;z-index:1000;transform:translate(-50%,12px);max-width:min(520px,calc(100vw - 32px));padding:10px 14px;border:1px solid #dfe4ec;border-radius:12px;background:rgba(17,31,58,.96);color:#fff;font-size:13px;line-height:1.45;box-shadow:0 14px 36px rgba(15,23,42,.18);opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.control-integrity-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.control-integrity-toast{bottom:112px}}

/*
 * P0 mobile visual integrity invariant.
 *
 * main.css already owns the <=700px product contract: the legacy sidebar
 * collapses and the work surface becomes a single full-width column. The
 * later-loaded site-commander shell currently re-introduces a resident icon
 * rail and offsets the header/main/context/command surfaces. Because this
 * integrity stylesheet is intentionally loaded before the presentation shell,
 * these narrow !important guards are required to keep the mobile safety
 * contract from being re-opened by later normal-cascade presentation rules.
 * They do not alter desktop/tablet geometry or runtime state ownership.
 */
@media(max-width:700px){
  :root{--icon-rail:0px!important}

  body.visual-v1 .app-shell,
  body.visual-v1 .app-shell[data-workspace-mode]{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:64px minmax(0,1fr)!important;
  }

  body.visual-v1 .app-shell>.left-icon-rail,
  body.visual-v1 .app-shell[data-workspace-mode]>.left-icon-rail{
    display:none!important;
  }

  body.visual-v1 .app-shell>.main-area,
  body.visual-v1 .app-shell[data-workspace-mode]>.main-area{
    grid-column:1!important;
    grid-row:2!important;
    min-width:0!important;
    width:100%!important;
  }

  body.visual-v1 .app-header,
  body.visual-v1 .app-header.workspace-mode-ready{
    grid-column:1!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  body.visual-v1 .app-header.workspace-mode-ready .workspace-mode-switcher,
  body.visual-v1 .app-shell[data-workspace-mode] .mobile-core-entry,
  body.visual-v1 .app-shell[data-workspace-mode] .command-dock,
  body.visual-v1 .app-shell[data-workspace-mode] .context-panel,
  .mobile-core-entry,
  .command-dock,
  .context-panel{
    left:10px!important;
    right:10px!important;
  }

  .context-panel{
    top:70px!important;
    bottom:138px!important;
    width:auto!important;
    max-width:none!important;
    padding:14px!important;
    border-radius:18px!important;
  }

  .context-panel .chip-row{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:6px!important;
  }
  .context-panel .chip-row button{
    flex:0 1 auto!important;
    min-width:0!important;
    padding:7px 9px!important;
  }

  .command-dock{bottom:10px!important}

  .site-commander-panel,
  body.visual-v1 .app-shell[data-workspace-mode]>.site-commander-panel{
    left:0!important;
    width:min(var(--site-commander-panel-width),calc(100vw - 12px))!important;
  }

  .left-rail-settings-panel{
    left:10px!important;
    width:min(350px,calc(100vw - 20px))!important;
  }

  body.visual-v1 .context-navigation-panel{
    left:0!important;
    width:min(var(--sidebar),calc(100vw - 8px))!important;
  }
}