/* Shared responsive boundaries. Native editors keep their own scrolling and controls. */
:root[data-theme] #shell.unified-shell .composer-area {box-sizing:border-box;min-width:0}
:root[data-theme] #shell.unified-shell .composer-area > :is(#composer,.task-monitor,.disclaimer,.activity) {max-width:960px;margin-inline:auto}
:root[data-theme] #shell.unified-shell #composer:is([data-presence=writing],[data-presence=inspection]) {width:100%}
:root[data-theme] #shell.unified-shell #composer[data-presence=running] {width:min(520px,100%)!important;margin-left:0!important;margin-right:auto!important}
:root[data-theme] #shell.unified-shell #composer[data-presence=ready] {margin-left:auto!important;margin-right:0!important}
/* The same bottom anchor as Chat, with real measured clearance for the Visual editor. */
:root[data-theme] #shell.unified-shell[data-view-mode=visual] #main #visual-view .composer-area {
 position:fixed!important;left:var(--composer-screen-left,0px)!important;right:var(--composer-screen-right,0px)!important;
 bottom:var(--composer-keyboard-bottom,0px)!important;width:auto!important;max-width:none!important;
 padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;margin:0!important;z-index:85;pointer-events:none;
}
:root[data-theme] #shell.unified-shell[data-view-mode=visual] #visual-view .composer-area > * {pointer-events:auto}
:root[data-theme] #shell.unified-shell[data-view-mode=visual] #visual-view.director-enabled {
 padding-bottom:calc(var(--composer-reserved-height,240px) + 16px)!important;
 scroll-padding-bottom:calc(var(--composer-reserved-height,240px) + 16px);
}
:root[data-theme] #shell.unified-shell[data-view-mode=visual] #visual-view #composer #prompt {
 height:var(--prompt-height,80px)!important;min-height:0!important;max-height:none!important;padding:10px 2px!important;
}
/* Compact side-by-side work keeps all controls: input/context first, actions second. */
@media(min-width:701px) {
 :root[data-theme] #shell.unified-shell #composer.dock-compact[data-presence=writing]:not(.dock-growing):not(.expanded) {
  display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:5px 8px!important;
 }
 :root[data-theme] #shell.unified-shell #composer.dock-compact[data-presence=writing]:not(.dock-growing):not(.expanded) #prompt {grid-row:1;grid-column:1;padding:6px!important}
 :root[data-theme] #shell.unified-shell #composer.dock-compact[data-presence=writing]:not(.dock-growing):not(.expanded) .composer-context-bar {grid-row:1;grid-column:2;width:auto}
 :root[data-theme] #shell.unified-shell #composer.dock-compact[data-presence=writing]:not(.dock-growing):not(.expanded) .composer-toolbar {grid-row:2;grid-column:1/-1}
}
/* Text, controls, and panels reflow without shrinking the document or code canvas. */
:root[data-theme] #shell.unified-shell :is(.professional-workspace,.pw-native-host,.code-studio,.director-studio,.arena-view) {min-width:0;max-width:100%;box-sizing:border-box}
:root[data-theme] #shell.unified-shell :is(.pw-header,.pw-actions,.cs-heading,.cs-heading-actions,.cs-toolbar) {flex-wrap:wrap;min-width:0}
:root[data-theme] #shell.unified-shell :is(.pw-card,.pw-grid>*,.cs-workspace>*) {min-width:0}
:root[data-theme] #shell.unified-shell :is(.pw-card,.ds-status,.cs-message) {overflow-wrap:anywhere}
:root[data-theme] #shell.unified-shell :is(.pw-card,.ds-toolbar,.cs-toolbar) :is(input,select,textarea) {max-width:100%;box-sizing:border-box}
:root[data-theme] #shell.unified-shell :is(.professional-workspace,.code-studio,.director-studio) :is(button,summary,input,select,textarea,a):focus-visible {outline:2px solid var(--b1x-focus,var(--b1x-accent));outline-offset:2px}
@media(min-width:801px) {
 :root[data-theme] #shell.unified-shell #visual-view .director-studio {height:auto;min-height:0}
 :root[data-theme] #shell.unified-shell #visual-view .director-studio .ds-body {height:clamp(220px,calc(var(--workspace-available-height,800px) - var(--composer-reserved-height,240px) - 240px),650px)!important;flex:auto;min-height:220px;max-height:none}
}
@media(max-width:800px) {
 :root[data-theme] #shell.unified-shell #visual-view .director-studio .ds-center {min-height:220px}
 :root[data-theme] #shell.unified-shell #visual-view .director-studio .ds-empty {min-height:180px;height:auto}
 :root[data-theme] #shell.unified-shell #visual-view .director-studio :is(.ds-library,.ds-inspector) {top:80px;bottom:calc(var(--composer-reserved-height,240px) + 12px);max-height:calc(100dvh - 100px);z-index:86}
 :root[data-theme] #shell.unified-shell #visual-view .director-studio .ds-toolbar>button {z-index:87}
 :root[data-theme] #shell.unified-shell :is(.professional-workspace,.code-studio,.director-studio) :is(button,select,summary) {min-height:44px}
 :root[data-theme] #shell.unified-shell :is(.professional-workspace,.director-studio) :is(input:not([type=checkbox]):not([type=radio]),textarea) {font-size:16px}
}
@media(max-width:700px) {
 :root[data-theme] #shell.unified-shell #composer {--composer-control-size:36px;--composer-corner-size:32px}
 :root[data-theme] #shell.unified-shell #composer[data-presence=running] {width:100%!important;margin-inline:auto!important}
 :root[data-theme] #shell.unified-shell[data-view-mode=visual] #visual-view .composer-area {padding-inline:10px!important}
 :root[data-theme] #shell.unified-shell .professional-workspace {padding:16px 12px 28px}
}
@media(max-height:550px) {
 :root[data-theme] #shell.unified-shell .composer-area > :is(.activity,.disclaimer) {display:none!important}
 :root[data-theme] #shell.unified-shell .launch-home {padding-top:16px}
}

/* Closed native details must not expose their absolutely positioned controls. */
#composer .composer-secondary:not([open]) > .composer-secondary-content {display:none!important}


@media(max-width:700px) {
 :root[data-theme] #shell.unified-shell #composer.dock-compact .composer-toolbar {gap:6px!important}
}

/* One-row resting pill: [context icons] [text box] [tool icons] in a single row.
   It grows into a full-width text row while the text box is being edited (.is-editing,
   set by composer-controller.js) or holds text; icon clicks from rest never expand it. Running
   and ready presence states keep their own layouts. */
:root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) {
 display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
 column-gap:6px;row-gap:4px;min-height:0!important;padding:4px 6px!important;border-radius:999px!important;
}
:root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) .composer-context-bar {grid-row:1;grid-column:1;width:auto!important;gap:2px!important}
:root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) .composer-context-bar .composer-access {margin-left:0!important}
:root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) #prompt {
 grid-row:1;grid-column:2;height:36px!important;min-height:36px!important;max-height:36px!important;
 padding:6px 4px!important;overflow:hidden!important;
}
:root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) .composer-toolbar {grid-row:1;grid-column:3;flex-wrap:nowrap!important;gap:2px!important;width:auto}
:root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) .composer-toolbar .composer-model-control {margin-left:0!important}
:root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) .composer-toolbar :is(#send,#stop) {margin-left:4px!important}
:root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) .composer-activity {grid-row:2;grid-column:1/-1}
@media(max-width:700px) {
 :root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) {
  --composer-control-size:26px;--composer-corner-size:26px;--composer-icon-size:15px;column-gap:2px;padding:4px!important;
 }
 :root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) :is(.composer-context-bar,.composer-toolbar) {gap:0!important}
 :root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) .composer-toolbar :is(#send,#stop) {margin-left:2px!important}
 :root[data-theme] #shell.unified-shell #composer:not(.expanded):not(.has-content):not(.is-editing):not([data-presence=running]):not([data-presence=ready]) :is(.composer-context-bar button,.composer-toolbar :is(.composer-btn,.composer-model-control,.composer-secondary>summary,#send)) {padding:5px!important}
}

/* Quiet top bar — every control kept; only presentation changes.
   Ghost (borderless, transparent) icon buttons, one control height, and
   Sign in as the single outlined control. */
:root[data-theme] #shell.unified-shell header.topbar :is(#workspace-mode, #workspace-open, .mobile-model-cortex) {
  background: transparent !important;
  box-shadow: none !important;
}
:root[data-theme] #shell.unified-shell header.topbar #workspace-mode {
  background: var(--b1x-control) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
:root[data-theme] #shell.unified-shell header.topbar #workspace-mode:hover,
:root[data-theme] #shell.unified-shell header.topbar #workspace-open:hover {
  background: var(--hover) !important;
}
:root[data-theme] #shell.unified-shell header.topbar .launch-signin {
  background: transparent !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
}
@media (max-width: 700px) {
  :root[data-theme] #shell.unified-shell header.topbar {
    align-items: center !important;
  }
  :root[data-theme] #shell.unified-shell header.topbar :is(#sidebar-toggle, #inspector-toggle, #workspace-open, .workspace-robot-button, .mobile-model-cortex) {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
  }
  :root[data-theme] #shell.unified-shell header.topbar .mobile-model-cortex img,
  :root[data-theme] #shell.unified-shell header.topbar .workspace-robot-button img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
  }
  :root[data-theme] #shell.unified-shell header.topbar #workspace-mode {
    height: 36px !important;
    min-height: 36px !important;
    padding-inline: 8px 22px !important;
  }
  :root[data-theme] #shell.unified-shell header.topbar .launch-signin {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
}