/* Compact composer chrome, shared by desktop, docked, and phone layouts. */
:root[data-theme] #shell.unified-shell #composer {
  --composer-icon-size:16px;--composer-control-size:32px;--composer-corner-size:28px;
  display:flex!important;flex-direction:column;align-items:stretch;gap:0;
  box-sizing:border-box;min-width:0;padding:8px 12px!important;border-radius:18px!important;
  border:1px solid color-mix(in srgb,var(--b1x-text) 42%,var(--b1x-solid))!important;background:var(--b1x-solid)!important;
  box-shadow:none!important;
  outline:none!important;background-clip:padding-box;opacity:1;filter:none;backdrop-filter:none;
}
:root[data-theme] #shell.unified-shell #composer:is(.has-content,.is-active,:focus-within) {--composer-icon-size:18px}
:root[data-theme] #shell.unified-shell #composer:is(:focus-within, .is-active, .has-content, .expanded) {
  border: 1px solid var(--b1x-accent, #10b981) !important;
  box-shadow: none !important;
  outline: none !important;
}
:root[data-theme=light] #shell.unified-shell #composer:is(:focus-within, .is-active, .has-content, .expanded) {
  border: 1px solid var(--b1x-accent, #086753) !important;
  box-shadow: none !important;
  outline: none !important;
}
#shell:has(#composer .composer-secondary[open]) #jump-latest {visibility:hidden}
:root[data-theme] #shell.unified-shell #composer .composer-context-bar {
  display:flex!important;align-items:center;gap:8px;width:100%;min-height:0;
  margin:0;padding:0;flex-shrink:0;
}
:root[data-theme] #shell.unified-shell #composer .composer-context-bar .composer-project-chip {display:none}
:root[data-theme] #shell.unified-shell #composer .composer-context-bar button {
  display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;
  width:var(--composer-corner-size)!important;min-width:var(--composer-corner-size)!important;
  height:var(--composer-corner-size)!important;min-height:var(--composer-corner-size)!important;
  padding:6px!important;flex:0 0 var(--composer-corner-size)!important;margin:0!important;border:0!important;
  background:transparent!important;color:var(--b1x-text)!important;border-radius:8px!important;
}
:root[data-theme] #shell.unified-shell #composer .composer-context-bar .composer-access {margin-left:auto!important}
:root[data-theme] #shell.unified-shell #composer .composer-context-bar .composer-access-info {font:700 15px/1 var(--b1x-font,system-ui)!important}
:root[data-theme] #shell.unified-shell #composer #prompt {
  box-sizing:border-box;min-height:0!important;padding:10px 2px!important;
  line-height:1.5!important;width:100%;resize:none;
}
:root[data-theme] #shell.unified-shell #composer .composer-toolbar {
  display:flex!important;flex-wrap:wrap!important;align-items:center;justify-content:flex-start;
  min-height:0;gap:8px!important;padding:0!important;margin:0!important;
}
:root[data-theme] #shell.unified-shell #composer .composer-toolbar :is(.composer-btn,.composer-model-control,.composer-secondary>summary,#send) {
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  width:var(--composer-control-size)!important;min-width:var(--composer-control-size)!important;
  height:var(--composer-control-size)!important;min-height:var(--composer-control-size)!important;
  flex:0 0 var(--composer-control-size)!important;padding:7px!important;margin:0!important;border-radius:8px!important;
}
:root[data-theme] #shell.unified-shell #composer :is(.composer-context-bar,.composer-toolbar) svg {
  display:block;width:var(--composer-icon-size)!important;height:var(--composer-icon-size)!important;
  flex:0 0 var(--composer-icon-size)!important;
}
:root[data-theme] #shell.unified-shell #composer svg {
  stroke-width:2.2!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  opacity:1!important;filter:none!important;
}
:root[data-theme] #shell.unified-shell #composer .composer-model-control {color:var(--b1x-text)!important}
:root[data-theme] #shell.unified-shell #composer .composer-secondary>summary::after {font-weight:700;color:var(--b1x-text)}
:root[data-theme] #shell.unified-shell #composer .composer-toolbar .composer-btn {color:var(--b1x-text)!important}
/* Keep execution ambience at the viewport edge, away from reading surfaces. */
:root[data-theme]:has(#composer) .cortex-screen-glow {
  background:none!important;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--cortex-accent) 45%,transparent)!important;
}
:root[data-theme] #shell.unified-shell #composer .composer-toolbar :is(.composer-model-control,#send).composer-model-control {margin-left:auto!important}
:root[data-theme] #shell.unified-shell #composer .composer-model-control #profile {min-height:var(--composer-control-size)!important}
:root[data-theme] #shell.unified-shell #composer .composer-toolbar #send,
:root[data-theme] #shell.unified-shell #composer .composer-toolbar #stop {
  order:10;background:var(--b1x-accent)!important;color:var(--b1x-on-accent)!important;
  border:0!important;box-shadow:none!important;transform:none!important;animation:none!important;
}
:root[data-theme] #shell.unified-shell #composer .composer-toolbar :is(#send,#stop):hover:not(:disabled) {background:var(--b1x-accent-hover)!important}
:root[data-theme] #shell.unified-shell #composer .composer-toolbar :is(#send,#stop):active:not(:disabled) {transform:scale(.96)!important}
:root[data-theme] #shell.unified-shell #composer:has(#stop:not([hidden])) #send {display:none!important}
:root[data-theme] #shell.unified-shell #composer [hidden] {display:none!important}
:root[data-theme] #shell.unified-shell #composer :is(button,summary):focus-visible {outline:2px solid var(--b1x-focus)!important;outline-offset:2px!important}
:root[data-theme] #shell.unified-shell #composer .composer-context-bar button:hover {background:var(--b1x-control)!important;color:var(--b1x-text)}
:root[data-theme] #shell.unified-shell #composer .composer-activity {margin:0 0 4px;min-height:18px;font-size:11px;line-height:1.4}
#composer .composer-size-toggle span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#composer .composer-secondary {position:static}
#composer .composer-secondary-content {
  box-sizing:border-box;left:0;right:auto;bottom:calc(100% + 8px);width:min(340px,100%);max-width:100%;
  max-height:45dvh;overflow-y:auto;padding:12px;gap:8px;
}
#composer .composer-output-label {border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
#composer .composer-output-label legend {padding:0 0 8px;font-weight:600}
#composer .composer-output-label label {display:flex;align-items:center;gap:8px;min-height:36px;cursor:pointer}
#composer .composer-output-label input {appearance:auto!important;width:16px!important;height:16px!important;min-height:16px!important;flex:0 0 16px;accent-color:var(--b1x-accent);margin:0}
#composer .composer-output-label .composer-apply-outputs {grid-column:1 / -1;width:100%;min-height:40px;padding:8px;background:var(--b1x-control);color:var(--b1x-text);font:inherit;border-radius:8px}
#composer .composer-apply-outputs:disabled {opacity:.5;cursor:default}
/* Keep context, tools, model/audio and execution controls in stable groups. */
:root[data-theme] #shell.unified-shell #composer .composer-toolbar :is(#send,#stop) {margin-left:6px!important}
:root[data-theme] #shell.unified-shell #composer .composer-presence-toggle {
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;
  box-sizing:border-box;width:36px;min-width:36px;height:36px;min-height:36px;padding:8px;
  border:0;border-radius:8px;background:var(--b1x-control);color:var(--b1x-text);cursor:pointer;
}
#composer .composer-presence-toggle svg {width:18px;height:18px;flex:none}
:root[data-theme] #shell.unified-shell #composer[data-presence=running] {
  display:flex!important;flex-direction:row;align-items:center;gap:10px;
  min-height:48px!important;padding:6px 8px!important;border-radius:14px!important;
}
:root[data-theme] #shell.unified-shell #composer[data-presence=running] > :not(.composer-presence-toggle):not(.composer-activity):not(.composer-toolbar):not(#composer-live-update-bar) {display:none!important}
:root[data-theme] #shell.unified-shell #composer[data-presence=running] .composer-activity {flex:1;min-width:0;margin:0;font-size:12px}
:root[data-theme] #shell.unified-shell #composer[data-presence=running] #composer-activity-text {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-theme] #shell.unified-shell #composer[data-presence=running] .composer-toolbar {flex:0 0 auto;width:auto!important;gap:0!important}
:root[data-theme] #shell.unified-shell #composer[data-presence=running] .composer-toolbar > :not(#stop):not(#composer-studio-action) {display:none!important}
#composer #composer-studio-action[hidden] {display:none!important}
#composer #composer-studio-action {width:auto!important;min-width:70px!important;white-space:nowrap;font-size:12px!important;padding:6px 8px!important}
:root[data-theme] #shell.unified-shell #composer[data-presence=inspection] .composer-presence-toggle {align-self:flex-end}
:root[data-theme] #shell.unified-shell #composer[data-presence=ready] {
  align-self:flex-end;flex:0 0 auto!important;width:48px!important;min-width:48px!important;
  height:48px!important;min-height:48px!important;padding:0!important;border-radius:50%!important;
  margin-left:auto!important;background:var(--b1x-accent)!important;
}
:root[data-theme] #shell.unified-shell #composer[data-presence=ready] > :not(.composer-presence-toggle) {display:none!important}
:root[data-theme] #shell.unified-shell #composer[data-presence=ready] .composer-presence-toggle {
  width:46px;height:46px;min-width:46px;min-height:46px;padding:13px;background:transparent;color:var(--b1x-on-accent);
}
:root[data-theme] #shell.unified-shell .composer-area:has(#composer:is([data-presence=running],[data-presence=ready])) > :is(.task-monitor,.disclaimer,.activity) {display:none!important}
@media(prefers-reduced-motion:reduce) {#composer,#composer * {animation:none!important;transition:none!important}}
/* Anchor within the conversation column; existing split-pane placement stays in charge when docked. */
:root[data-theme] #shell.unified-shell:not(.dock-open):is(:not([data-view-mode]),[data-view-mode=chat]) .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;
  margin:0!important;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;
  z-index:85;pointer-events:none;
}
:root[data-theme] #shell.unified-shell:is(:not([data-view-mode]),[data-view-mode=chat]) .composer-area > * {pointer-events:auto}
:root[data-theme] #shell.unified-shell:is(:not([data-view-mode]),[data-view-mode=chat]) .composer-area > :is(#composer,.task-monitor,.disclaimer,.activity) {max-width:960px;margin-inline:auto}
:root[data-theme] #shell.unified-shell:is(:not([data-view-mode]),[data-view-mode=chat]) #composer:is([data-presence=writing],[data-presence=inspection]) {width:100%;margin-inline:auto!important}
:root[data-theme] #shell.unified-shell:is(:not([data-view-mode]),[data-view-mode=chat]) #composer[data-presence=running] {width:min(520px,100%)!important;margin-left:0!important;margin-right:auto!important}
:root[data-theme] #shell.unified-shell:is(:not([data-view-mode]),[data-view-mode=chat]) #composer[data-presence=ready] {margin-left:auto!important;margin-right:0!important}
:root[data-theme] #shell.unified-shell:not(.dock-open):is(:not([data-view-mode]),[data-view-mode=chat]) #thread {padding-bottom:calc(var(--composer-reserved-height,200px) + 20px)!important;scroll-padding-bottom:calc(var(--composer-reserved-height,200px) + 20px)}
:root[data-theme] #shell.unified-shell:not(.dock-open):is(:not([data-view-mode]),[data-view-mode=chat]) #launch-home {padding-bottom:calc(var(--composer-reserved-height,200px) + 32px)!important}
@media(max-width:700px) {
  :root[data-theme] #shell.unified-shell:not(.dock-open):is(:not([data-view-mode]),[data-view-mode=chat]) .composer-area {padding-inline:10px!important}
  :root[data-theme] #shell.unified-shell:is(:not([data-view-mode]),[data-view-mode=chat]) #composer[data-presence=running] {width:100%!important;margin-inline:auto!important}
}
@media (max-width:700px) {
  :root[data-theme] #shell.unified-shell #composer {--composer-control-size:36px;--composer-corner-size:32px;padding:6px 10px!important}
  :root[data-theme] #shell.unified-shell .composer-area {box-sizing:border-box;padding:6px 10px calc(8px + env(safe-area-inset-bottom,0px))!important}
  :root[data-theme] #shell.unified-shell #composer #prompt {font-size:16px!important}
  :root[data-theme] #shell.unified-shell #thread {padding:8px 10px 16px}
  :root[data-theme] #shell.unified-shell .message-answer-window {padding:14px 12px}
  :root[data-theme] #shell.unified-shell .message-body {min-width:0;overflow-wrap:anywhere}
  :root[data-theme] #shell.unified-shell .code-ide-head {flex-wrap:wrap;gap:8px;padding:10px}
  :root[data-theme] #shell.unified-shell .code-ide-info {min-width:0;flex-wrap:wrap}
  :root[data-theme] #shell.unified-shell .code-ide-actions {flex-wrap:wrap;gap:6px;max-width:100%}
  :root[data-theme] #shell.unified-shell .code-action-btn {flex:0 0 auto;min-height:40px;padding:8px;white-space:nowrap;word-break:normal;overflow-wrap:normal}
  :root[data-theme] #shell.unified-shell .code-lang-tag {white-space:nowrap}
  :root[data-theme] #shell.unified-shell .response-actions-toolbar {flex-wrap:wrap;gap:6px}
}

/* Base styling for composer pills with icons and text — Calm, balanced, no shouting borders */
:root[data-theme] #shell.unified-shell #composer .composer-toolbar :is(.image-mode-pill, .web-mode-pill, .voice-btn) {
  width: auto!important;
  min-width: var(--composer-control-size)!important;
  padding: 5px 10px!important;
  gap: 6px;
  border-radius: 999px!important;
  background: var(--b1x-control, rgba(255, 255, 255, 0.035));
  border: 1px solid color-mix(in srgb, var(--b1x-text) 12%, transparent)!important;
  color: var(--b1x-text);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
:root[data-theme=light] #shell.unified-shell #composer .composer-toolbar :is(.image-mode-pill, .web-mode-pill, .voice-btn) {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.08)!important;
  color: #334155;
}

:root[data-theme] #shell.unified-shell #composer .composer-toolbar .image-mode-pill.active {
  background: color-mix(in srgb, #8b5cf6 12%, var(--b1x-control))!important;
  border: 1px solid color-mix(in srgb, #8b5cf6 28%, transparent)!important;
  color: #a78bfa!important;
}
:root[data-theme=light] #shell.unified-shell #composer .composer-toolbar .image-mode-pill.active {
  background: rgba(139, 92, 246, 0.08)!important;
  border: 1px solid rgba(139, 92, 246, 0.22)!important;
  color: #6d28d9!important;
}

:root[data-theme] #shell.unified-shell #composer .composer-toolbar .web-mode-pill.active {
  background: color-mix(in srgb, #0d9488 12%, var(--b1x-control))!important;
  border: 1px solid color-mix(in srgb, #0d9488 28%, transparent)!important;
  color: #2dd4bf!important;
}
:root[data-theme=light] #shell.unified-shell #composer .composer-toolbar .web-mode-pill.active {
  background: rgba(13, 148, 136, 0.07)!important;
  border: 1px solid rgba(13, 148, 136, 0.2)!important;
  color: #0f766e!important;
}

:root[data-theme] #shell.unified-shell #composer .composer-toolbar .voice-btn.active {
  background: color-mix(in srgb, #10b981 12%, var(--b1x-control))!important;
  border: 1px solid color-mix(in srgb, #10b981 28%, transparent)!important;
  color: #34d399!important;
}
:root[data-theme=light] #shell.unified-shell #composer .composer-toolbar .voice-btn.active {
  background: rgba(16, 185, 129, 0.07)!important;
  border: 1px solid rgba(16, 185, 129, 0.2)!important;
  color: #047857!important;
}

/* Sovereign Ascendant Route Label — Calm harmonious design matching other composer controls */
:root[data-theme] #shell.unified-shell #composer .composer-ascendant-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--b1x-control, rgba(255, 255, 255, 0.035));
  border: 1px solid color-mix(in srgb, var(--b1x-text) 12%, transparent)!important;
  font-size: 11px;
  font-weight: 500;
  color: var(--b1x-text, #cbd5e1);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
:root[data-theme=light] #shell.unified-shell #composer .composer-ascendant-check {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.08)!important;
  color: #334155;
}
:root[data-theme] #shell.unified-shell #composer .composer-ascendant-check:hover {
  background: color-mix(in srgb, var(--b1x-text) 6%, var(--b1x-control));
  border-color: color-mix(in srgb, var(--b1x-text) 20%, transparent)!important;
}
:root[data-theme=light] #shell.unified-shell #composer .composer-ascendant-check:hover {
  background: rgba(0, 0, 0, 0.045);
  border-color: rgba(0, 0, 0, 0.14)!important;
}
:root[data-theme] #shell.unified-shell #composer .composer-ascendant-check.is-checked {
  background: color-mix(in srgb, #10b981 12%, var(--b1x-control))!important;
  border-color: color-mix(in srgb, #10b981 30%, transparent)!important;
  color: #6ee7b7!important;
  box-shadow: none!important;
}
:root[data-theme=light] #shell.unified-shell #composer .composer-ascendant-check.is-checked {
  background: rgba(16, 185, 129, 0.07)!important;
  border-color: rgba(16, 185, 129, 0.25)!important;
  color: #047857!important;
  box-shadow: none!important;
}
:root[data-theme] #shell.unified-shell #composer .composer-ascendant-check input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #059669;
  cursor: pointer;
}
:root[data-theme] #shell.unified-shell #composer .ascendant-gate-pill {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 600;
  background: color-mix(in srgb, var(--b1x-text) 8%, transparent);
  color: var(--b1x-muted, #94a3b8);
  letter-spacing: 0.02em;
}
:root[data-theme=light] #shell.unified-shell #composer .ascendant-gate-pill {
  background: rgba(0, 0, 0, 0.05);
  color: #64748b;
}
:root[data-theme] #shell.unified-shell #composer .composer-ascendant-check.is-checked .ascendant-gate-pill {
  background: rgba(16, 185, 129, 0.18);
  color: #a7f3d0;
}
:root[data-theme=light] #shell.unified-shell #composer .composer-ascendant-check.is-checked .ascendant-gate-pill {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

/* Quiet globe toggle with a readable state in both desktop and mobile layouts. */
:root[data-theme] #shell.unified-shell #composer #composer-web-btn {
  position: relative;
  width: auto!important;
  min-width: 44px!important;
  flex: 0 0 auto!important;
  gap: 4px;
  min-height: 28px;
  padding: 5px!important;
  border: 0!important;
  border-radius: 4px!important;
  background: transparent!important;
  box-shadow: none!important;
  color: var(--b1x-text, #cbd5e1)!important;
}
:root[data-theme] #shell.unified-shell #composer #composer-web-btn span {
  display: inline!important;
  font-size: 10px!important;
  font-weight: 500;
  color: inherit;
}
:root[data-theme] #shell.unified-shell #composer #composer-web-btn svg {
  width: 16px;
  height: 16px;
}
:root[data-theme] #shell.unified-shell #composer #composer-web-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Profile Selector */
:root[data-theme] #shell.unified-shell #composer #profile {
  height: var(--composer-control-size)!important;
  border-radius: 8px!important;
  padding: 0 8px!important;
  font-size: 12px;
  background: var(--b1x-control);
  color: var(--b1x-text);
  border: 1px solid color-mix(in srgb, var(--b1x-text) 15%, transparent);
}

/* Mobile Media Queries (<= 700px and <= 480px) */
@media (max-width: 700px) {
  :root[data-theme] #shell.unified-shell #composer .composer-toolbar {
    display: flex!important;
    align-items: center!important;
    flex-wrap: nowrap!important;
    overflow-x: auto!important;
    overflow-y: hidden!important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px!important;
    padding-bottom: 2px!important;
  }
  :root[data-theme] #shell.unified-shell #composer .composer-toolbar::-webkit-scrollbar {
    display: none;
  }
  :root[data-theme] #shell.unified-shell #composer .composer-hint {
    display: none!important;
  }
  :root[data-theme] #shell.unified-shell #composer #profile {
    max-width: 96px!important;
    font-size: 11px!important;
  }
  :root[data-theme] #shell.unified-shell #composer .composer-ascendant-check span:not(.ascendant-gate-pill) {
    max-width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :root[data-theme] #shell.unified-shell #composer .ascendant-gate-pill {
    display: none!important;
  }
  :root[data-theme] #shell.unified-shell #composer .composer-toolbar #send,
  :root[data-theme] #shell.unified-shell #composer .composer-toolbar #stop {
    margin-left: auto!important;
    position: sticky!important;
    right: 0!important;
    z-index: 2;
    flex-shrink: 0!important;
  }
}

@media (max-width: 480px) {
  :root[data-theme] #shell.unified-shell #composer .composer-toolbar :is(.image-mode-pill, .web-mode-pill, .voice-btn) {
    width: var(--composer-control-size)!important;
    min-width: var(--composer-control-size)!important;
    padding: 7px!important;
  }
  :root[data-theme] #shell.unified-shell #composer .composer-toolbar :is(.image-mode-pill, .web-mode-pill, .voice-btn) span {
    display: none!important;
  }
  :root[data-theme] #shell.unified-shell #composer #composer-float-toggle {
    display: none!important;
  }
  :root[data-theme] #shell.unified-shell #composer #profile {
    max-width: 80px!important;
  }
  :root[data-theme] #shell.unified-shell #composer .composer-ascendant-check {
    padding: 4px 6px!important;
  }
  :root[data-theme] #shell.unified-shell #composer .composer-ascendant-check span {
    display: none!important;
  }
}