/* UI-43 · "+" in the message box (public/composer-plus.js), and one message
   box for phone and desktop (Tray: unified, nothing small).
   The box is one row everywhere: +, the message, the mic and send. Everything
   else waits behind +, in one menu of labelled rows (icon, one or two words,
   the current value): a sheet over the box on a phone, a popover at + on a
   wide screen. The settings it lists keep their own menus as the second step.
   Loaded after mobile.css and phone-ui.css. */

.composer { position: relative; }
/* While + or a setting's menu is open, the box (and its menu) sits above the page around it. */
.composer:is(.cplus-open, :has(.approval-chip.open, .effort-chip.open, .model-pick.open, .agent-pick.open)) { z-index: 60; }

/* ---- + ---- */
:root .composer .composer-more {
  display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
:root .composer .composer-more:hover { background: var(--hover); color: var(--ink); }
:root .composer .composer-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
:root .composer .composer-more svg { width: 19px; height: 19px; transition: transform .15s ease; }
:root .composer .composer-more[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
:root .composer .composer-more[aria-expanded="true"] svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { :root .composer .composer-more svg { transition: none; } }

/* ---- Behind + on every width ---- */
/* (Class selectors only: an id in this :is() would outrank the open-menu rules below.) */
:root .composer .composer-tools > :is(.agent-pick, .composer-approval-slot, .composer-effort-slot, .composer-new-topic, .composer-agents-slot, .composer-model-slot),
:root .composer .composer-tools > [id="thread-model"],
:root .composer .composer-tools :is(.composer-clip, .composer-context-slot, .composer-plan-slot, .composer-hint) { display: none !important; }

/* ---- Wide screens: the phone's one-row box (phone-ui.css has the phone's) ---- */
@media (min-width: 601px) {
  :root .composer, :root .composer.big, :root .composer-dock .composer {
    flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0; min-height: 0; padding: 6px; border-radius: 28px; }
  :root .composer > .composer-tools, :root .composer .composer-tools-right { display: contents !important; }
  :root .composer > :not(.composer-input, .composer-tools, .cplus-menu) { order: -1; flex: 1 0 100%; }
  :root .composer .composer-more { order: 0; width: 44px; height: 44px; align-self: flex-end; }
  :root .composer > .composer-input, :root .composer.big > .composer-input, :root .composer-dock .composer > .composer-input {
    order: 1; flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; padding: 11px 6px 10px; line-height: 1.4; align-self: center; font-size: 16px; }
  :root .composer .composer-mic { order: 30; width: 44px; height: 44px; min-width: 44px; margin: 0; align-self: flex-end; }
  :root .composer .composer-send { order: 31; width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 4px; border: 0; border-radius: 50%; background-clip: content-box; align-self: flex-end; }
}

/* ---- The second step: a setting's own menu, over the box ----
   Its slot shows only while the menu is open; the chip itself stays tucked
   away (still focusable, so the menu can hand focus back to +). */
/* The open setting's slot lies over the box (out of the row's layout, clicks
   pass through); its menu hangs from the box's edge. */
:root .composer .composer-tools > :is(.composer-approval-slot, .composer-effort-slot):has(.open),
:root .composer .composer-tools > :is(#thread-model, #composer-model-slot):has(.model-pick.open), /* ids: outranks phone-ui.css */
:root .composer .composer-tools > .agent-pick.open {
  display: block !important; position: absolute !important; inset: 0; width: auto; min-width: 0; max-width: none; margin: 0 !important; overflow: visible !important; pointer-events: none; z-index: 45; }
:root .composer .composer-tools > * :is(.approval-menu, .model-pick-menu, .agent-pick-menu),
:root .composer .composer-tools > .agent-pick.open .agent-pick-menu { pointer-events: auto; }
:root .composer .composer-tools > :is(.composer-approval-slot, .composer-effort-slot) :is(.approval-chip, .effort-chip),
:root .composer :is(#thread-model, #composer-model-slot) .model-pick.open { position: static; }
:root .composer .composer-tools > :is(.composer-approval-slot, .composer-effort-slot) .approval-menu,
:root .composer :is(#thread-model, #composer-model-slot) .model-pick.open .model-pick-menu:not(.cascade),
:root .composer .composer-tools > .agent-pick.open .agent-pick-menu { left: 0; right: auto; width: min(360px, 100%); max-width: 100%; }
/* Side by side, the menu keeps one height whichever company is open: it hangs
   from the box, so a shorter list would pull the rows out from under the pointer. */
:root .composer :is(#thread-model, #composer-model-slot) .model-pick.open .model-pick-menu.cascade { left: 0; right: auto; height: min(330px, 70vh); }
:root .composer .composer-tools > :is(.composer-approval-slot, .composer-effort-slot) .approval-chip-btn,
:root .composer :is(#thread-model, #composer-model-slot) .model-pick.open .model-pick-btn,
:root .composer :is(#thread-model, #composer-model-slot):has(.model-pick.open) .composer-model-admin,
:root .composer .composer-tools > .agent-pick.open .agent-pick-btn {
  position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }
/* The second step's rows at the first step's size (Rule zero). */
.composer :is(.approval-item, .model-menu-item, .model-co, .model-co-back, .apm-item) { min-height: 44px; }
.composer :is(.approval-item-name, .model-menu-name, .model-co-name, .apm-name) { font-size: 15px; }
.composer :is(.approval-item-detail, .apm-role) { font-size: 13px; }

/* ---- The menu ---- */
.cplus-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 46; box-sizing: border-box;
  width: 300px; max-width: calc(100vw - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; background: var(--menu); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow-pop); }
.composer.cplus-down > .cplus-menu { bottom: auto; top: calc(100% + 8px); }
.cplus-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; box-sizing: border-box;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: var(--text-lg, 15px); font-weight: 500;
  line-height: 1.25; text-align: left; cursor: pointer; }
.cplus-item:hover, .cplus-item:focus-visible { background: var(--hover); outline: none; }
.cplus-item.cplus-info { cursor: default; }
.cplus-item.cplus-info:hover { background: transparent; }
.cplus-icon { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.cplus-icon svg { width: 20px; height: 20px; }
.cplus-label { flex: none; white-space: nowrap; }
.cplus-value { flex: 1 1 auto; min-width: 0; margin-left: auto; text-align: right; color: var(--ink-3); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cplus-mark { display: inline-flex; flex: none; color: var(--ink-3); }
.cplus-mark .funding-mark, .cplus-mark svg { width: 14px; height: 14px; }
.cplus-warn :is(.cplus-icon, .cplus-value) { color: var(--amber); }
.cplus-chevron { display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--ink-3); }
.cplus-label + .cplus-chevron { margin-left: auto; }
.cplus-chevron svg { width: 16px; height: 16px; }
.cplus-empty { margin: 0; padding: 12px; color: var(--ink-3); font-size: var(--text-md, 14px); }

/* ---- Phones: a sheet the width of the box, large type ---- */
@media (max-width: 600px) {
  .cplus-menu { left: 0; right: 0; width: auto; max-width: none; padding: 8px; border-radius: 24px; }
  .cplus-item { min-height: 52px; gap: 14px; padding: 0 14px; font-size: 17px; border-radius: 16px; }
  .cplus-icon, .cplus-icon svg { width: 22px; height: 22px; }
  .cplus-chevron, .cplus-chevron svg { width: 18px; height: 18px; }
  :root .composer .composer-tools > :is(.composer-approval-slot, .composer-effort-slot) .approval-menu,
  :root .composer :is(#thread-model, #composer-model-slot) .model-pick.open .model-pick-menu:not(.cascade),
  :root .composer .composer-tools > .agent-pick.open .agent-pick-menu { left: 0; right: 0; width: auto; max-width: none; }
  .composer :is(.approval-item, .model-menu-item, .model-co, .model-co-back, .apm-item) { min-height: 48px; }
  .composer :is(.approval-item-name, .model-menu-name, .model-co-name, .apm-name) { font-size: 16px; }
  .composer :is(.approval-item-detail, .apm-role) { font-size: 14px; }
  .composer :is(.approval-menu-head, .model-pick-head, .apm-head) { font-size: 14px; }
}