/* The composer has one outline and only the space required by its content. */
:root[data-theme] .unified-shell .composer,
:root[data-theme] .unified-shell .composer:is(:focus-within,.expanded,.has-content,.is-active){
  min-height:0!important;
  padding:10px 14px!important;
  border:1px solid var(--line)!important;
  border-radius:16px;
  box-shadow:none!important;
}
:root[data-theme] .unified-shell .composer:focus-within{border-color:var(--cyan)!important}
:root[data-theme] .unified-shell .composer-context-bar{
  border:0;
  padding:0;
  margin:0 0 3px;
  min-height:28px;
}
:root[data-theme] .unified-shell #prompt,
:root[data-theme] .unified-shell.launch-empty #prompt{
  min-height:34px!important;
  height:var(--prompt-height,34px)!important;
  max-height:min(360px,40dvh);
  padding:5px 0!important;
  line-height:1.5!important;
  overflow-y:auto;
}
:root[data-theme] .unified-shell .composer-toolbar{margin-top:5px;gap:8px}
/* Keep controls visually quiet; the composer outline defines the group. */
:root[data-theme] .unified-shell .composer-toolbar :is(button,select){
  border:0!important;
  border-color:transparent!important;
  box-shadow:none!important;
  outline:none;
  appearance:none!important;
}
:root[data-theme] .unified-shell .composer-toolbar .composer-btn:not(.active):not(.stop-btn){background:transparent!important}
:root[data-theme] .unified-shell .composer-toolbar .composer-btn:not(.active):not(.stop-btn):hover{background:var(--hover)!important}
:root[data-theme] .unified-shell .composer-toolbar .composer-btn.active{background:var(--cyan-glow)}
:root[data-theme] .unified-shell .composer-toolbar .image-mode-pill.active{background:var(--cyan)}
:root[data-theme] .unified-shell .composer-toolbar #profile{
  height:32px!important;
  min-height:32px!important;
  padding:5px 30px 5px 10px!important;
  border-radius:999px!important;
  background-color:var(--b1x-control)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23a3b8cb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 8px center!important;
  font-size:12px!important;
}
:root[data-theme] .unified-shell .composer-toolbar .send{background:var(--cyan)!important;color:var(--b1x-on-accent)!important}
:root[data-theme] .unified-shell #prompt,
:root[data-theme] .unified-shell.launch-empty #prompt{
  font-size:11px!important;
  line-height:1.4!important;
}
:root[data-theme] .unified-shell .composer-toolbar :is(button,select):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}
:root[data-theme] .unified-shell .composer.is-active{border-color:var(--cyan)!important}
.composer-activity{display:flex;align-items:center;gap:7px;min-height:20px;margin-top:3px;color:var(--cyan);font:11px/1.5 var(--sans,system-ui,sans-serif);overflow-wrap:anywhere}
.composer-activity[hidden]{display:none!important}
.composer-activity-dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent);animation:composer-activity-pulse 1.8s ease-in-out infinite}
@keyframes composer-activity-pulse{50%{opacity:.55;box-shadow:0 0 0 6px color-mix(in srgb,currentColor 8%,transparent)}}
@media(pointer:coarse),(max-width:768px){
  :root[data-theme] .unified-shell .composer,
  :root[data-theme] .unified-shell .composer:is(:focus-within,.expanded,.has-content,.is-active){padding:10px 12px!important}
}
@media(prefers-reduced-motion:reduce){.composer-activity-dot{animation:none}}