/* Temporary Area panels keep their acrylic material when content is moved out
   of a dock. Scope the sheet and its controls; document previews retain their
   own opaque content, and application windows keep their ABS material. */
.ai-quick-panel{--area-popover-accent:var(--role-ai)}
.project-shelf-popup{--area-popover-accent:var(--project-accent,var(--role-projects))}
.system-rail-flyout{--area-popover-accent:var(--role-systems)}
.background-app-popup{--area-popover-accent:var(--role-apps)}
.workspace-notification-popup{--area-popover-accent:var(--notification-workspace-accent)}

body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup).material-surface-glass{
  --area-header-accent:var(--area-popover-accent,var(--workspace-accent));
  --control-accent:var(--area-header-accent);
  border:1px solid var(--sd-glass-edge)!important;
  border-radius:0!important;
  corner-shape:square!important;
  color:var(--sd-glass-text)!important;
  background:
    linear-gradient(128deg,rgba(255,255,255,.075),transparent 19% 76%,rgba(255,255,255,.025)),
    color-mix(in srgb,var(--sd-glass-face) 96%,var(--area-popover-accent,var(--workspace-accent)) 4%)!important;
  box-shadow:
    0 14px 40px rgba(0,0,0,.24),
    inset 0 1px var(--sd-glass-highlight),
    inset 1px 0 var(--sd-glass-edge-soft),
    inset 0 -1px var(--sd-glass-groove-low),
    inset -1px 0 rgba(0,0,0,.15)!important;
  -webkit-backdrop-filter:blur(23px) saturate(1.08)!important;
  backdrop-filter:blur(23px) saturate(1.08)!important;
}
body[data-theme="light"] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup).material-surface-glass{
  background:
    linear-gradient(128deg,rgba(255,255,255,.16),transparent 19% 76%,rgba(255,255,255,.05)),
    color-mix(in srgb,var(--sd-glass-face) 96%,var(--area-popover-accent,var(--workspace-accent)) 4%)!important;
}
/* A foreign Workspace keeps its coloured identity edge above the neutral cut. */
body[data-theme] .workspace-notification-popup.material-surface-glass{
  border-top:3px solid var(--notification-workspace-accent)!important;
}
body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup)>header{
  background:var(--sd-glass-face-deep);
  border-bottom-color:var(--sd-glass-groove);
}

/* Moving the real composer or Stash into a popup must not expose the old
   ABS fallback. Text fields are shallow engraved wells in the same sheet. */
body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea,select).material-glass-field{
  color:var(--sd-glass-text)!important;
  border:1px solid var(--sd-glass-groove)!important;
  border-radius:0!important;
  background:var(--sd-glass-face-deep)!important;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.035)!important;
}
body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea,select).material-glass-field:focus{
  border-color:var(--sd-glass-groove)!important;
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.19),
    inset 0 -1px color-mix(in srgb,var(--control-accent) 86%,white 14%),
    0 1px 3px color-mix(in srgb,var(--control-accent) 28%,transparent)!important;
  outline:0!important;
}
/* Native option menus need an opaque reading surface of their own. */
:is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup) select option{
  color:var(--text);
  background:var(--shell);
}

/* Buttons follow the host sheet after a portal move as well. Ordinary rows
   remain flush; explicit push and toggle controls own a fine etched boundary. */
body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup) button.material-glass-button{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup) button.material-glass-button:hover{
  background:var(--sd-glass-hover)!important;
}
body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup) button.material-glass-button:active{
  background:var(--sd-glass-down)!important;
}
body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup) button.material-glass-button:is(.control-push,.control-toggle){
  border:1px solid var(--sd-glass-groove)!important;
  background:rgba(255,255,255,.018)!important;
  box-shadow:inset 0 1px var(--sd-glass-highlight),inset 0 -1px rgba(0,0,0,.18)!important;
  transition:background 36ms linear,border-color 36ms linear,box-shadow 16ms linear!important;
}
body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup) button.material-glass-button:is(.control-push,.control-toggle):hover{
  border-color:color-mix(in srgb,var(--control-accent) 17%,var(--sd-glass-groove))!important;
  background:color-mix(in srgb,var(--control-accent) 4%,var(--sd-glass-hover))!important;
}
body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup) button.material-glass-button:is(.control-push,.control-toggle):active,
body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup) button.material-glass-button.control-toggle:is(.is-active,[aria-pressed="true"],[aria-selected="true"]){
  border-color:color-mix(in srgb,var(--control-accent) 20%,var(--sd-glass-groove))!important;
  background:color-mix(in srgb,var(--control-accent) 5%,var(--sd-glass-down))!important;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.25),inset 0 -1px rgba(255,255,255,.055)!important;
  transition-duration:8ms!important;
}

@media(prefers-reduced-transparency:reduce){
  body[data-theme] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup).material-surface-glass{
    background:#142332!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  body[data-theme="light"] :is(.ai-quick-panel,.project-shelf-popup,.system-rail-flyout,.background-app-popup,.workspace-notification-popup).material-surface-glass{
    background:#eff5fa!important;
  }
}