/* AskSary standard composer — the same input bar on every surface.
   Mirrors the main chat composer's shell: a soft rounded box, a growing
   textarea, round buttons, purple send. Class selectors are two deep so the
   host panels' own `.panel textarea` / `.panel button` rules do not restyle it. */
.asksary-composer {
  --composer-bg: rgba(14, 16, 24, .92);
  --composer-border: rgba(255, 255, 255, .14);
  --composer-text: #eef1f8;
  --composer-muted: #9aa4b6;
  --composer-accent: #7c3aed;
  --composer-accent-2: #a78bfa;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 8px 8px 8px 10px; box-sizing: border-box;
  border: 1px solid var(--composer-border); border-radius: 14px;
  background: var(--composer-bg); color: var(--composer-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.asksary-composer:focus-within { border-color: rgba(167, 139, 250, .55); box-shadow: 0 0 0 3px rgba(124, 58, 237, .14); }
.asksary-composer.is-dragover { border-color: var(--composer-accent-2); border-style: dashed; }
html.light-mode .asksary-composer {
  --composer-bg: #fff; --composer-border: #d6d6e0; --composer-text: #1d1d24; --composer-muted: #6b6b78;
}

.asksary-composer .asksary-composer-aux { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.asksary-composer .asksary-composer-aux:empty { display: none; }
.asksary-composer .asksary-composer-files { display: flex; flex-wrap: wrap; gap: 6px; }
.asksary-composer .asksary-composer-files:empty, .asksary-composer .asksary-composer-files.hidden { display: none; }

.asksary-composer .asksary-composer-row { display: flex; align-items: flex-end; gap: 6px; min-width: 0; }
/* The tools row under the box: attach and effort on the left, send on the right. */
.asksary-composer .asksary-composer-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.asksary-composer .asksary-composer-spacer { flex: 1 1 auto; }
.asksary-composer .asksary-composer-input {
  flex: 1 1 auto; width: 100%; min-width: 0; min-height: 58px; max-height: none; margin: 0;
  padding: 8px 6px; box-sizing: border-box; resize: none;
  border: 0; border-radius: 8px; background: transparent; color: var(--composer-text);
  font: 500 13.5px/1.45 inherit; font-family: inherit; outline: none;
  -webkit-text-fill-color: currentColor; caret-color: var(--composer-accent-2);
}
.asksary-composer .asksary-composer-input::placeholder { color: var(--composer-muted); }
.asksary-composer[data-surface="livebuild"] .asksary-composer-input,
.asksary-composer[data-surface="project"] .asksary-composer-input { resize: vertical; }

.asksary-composer .asksary-composer-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 34px; height: 34px; padding: 0 10px; margin: 0; box-sizing: border-box;
  border: 1px solid var(--composer-border); border-radius: 10px;
  background: rgba(255, 255, 255, .05); color: var(--composer-text);
  font: 700 12.5px/1 inherit; font-family: inherit; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.asksary-composer .asksary-composer-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(167, 139, 250, .5); }
.asksary-composer .asksary-composer-btn:active { transform: scale(.97); }
.asksary-composer .asksary-composer-btn.hidden, .asksary-composer .asksary-composer-btn[hidden] { display: none; }
.asksary-composer .asksary-composer-btn:disabled { opacity: .45; cursor: default; }
html.light-mode .asksary-composer .asksary-composer-btn { background: #f4f4f8; }
.asksary-composer .asksary-composer-attach { color: var(--composer-muted); }
.asksary-composer .asksary-composer-attach:hover { color: var(--composer-text); }
.asksary-composer .asksary-composer-send {
  background: linear-gradient(135deg, #6d28d9, #7c3aed); border-color: rgba(167, 139, 250, .7); color: #fff;
}
.asksary-composer .asksary-composer-send:hover { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.asksary-composer .asksary-composer-stop {
  background: rgba(255, 80, 80, .12); border-color: rgba(255, 120, 120, .45); color: #ffb4b4;
}
.asksary-composer .asksary-composer-stop:hover { background: rgba(255, 80, 80, .22); color: #fff; }

.asksary-composer .asksary-composer-effort { position: relative; flex: 0 0 auto; }
.asksary-composer .asksary-composer-effort-btn { gap: 7px; padding: 0 10px; color: var(--composer-muted); font: 800 10px/1 inherit; font-family: inherit; letter-spacing: .04em; text-transform: uppercase; }
.asksary-composer .asksary-composer-effort-btn strong { color: var(--composer-text); font: 800 12px/1 inherit; font-family: inherit; text-transform: none; letter-spacing: 0; }
.asksary-composer .asksary-composer-effort-btn i { font-size: 9px; opacity: .7; transition: transform .15s ease; }
.asksary-composer .asksary-composer-effort.is-open .asksary-composer-effort-btn i { transform: rotate(180deg); }
.asksary-composer .asksary-composer-effort-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; min-width: 190px; padding: 6px; display: grid; gap: 2px;
  border: 1px solid var(--composer-border); border-radius: 12px; background: rgba(14, 16, 24, .98); box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.asksary-composer .asksary-composer-effort-menu[hidden] { display: none; }
.asksary-composer .asksary-composer-effort-menu button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding: 8px 10px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--composer-text); font: 700 12.5px/1.2 inherit; font-family: inherit; text-align: left; cursor: pointer;
}
.asksary-composer .asksary-composer-effort-menu button span { color: var(--composer-muted); font: 600 10.5px/1 inherit; font-family: inherit; }
.asksary-composer .asksary-composer-effort-menu button:hover { background: rgba(255, 255, 255, .07); }
.asksary-composer .asksary-composer-effort-menu button[aria-checked="true"] { background: rgba(124, 58, 237, .2); border-color: rgba(167, 139, 250, .5); }
html.light-mode .asksary-composer .asksary-composer-effort-menu { background: #fff; }
.asksary-composer .asksary-composer-note { color: var(--composer-muted); font: 500 11px/1.4 inherit; font-family: inherit; }

/* The chips rows keep their surface styles; only the spacing is shared. */
.asksary-composer .asksary-composer-chips { display: flex; flex-wrap: wrap; gap: 4px; }

@media (max-width: 640px) {
  .asksary-composer .asksary-composer-effort-btn > span { display: none; }
  .asksary-composer .asksary-composer-send span, .asksary-composer .asksary-composer-stop span { display: none; }
}

/* Project Lab's agent aside is a flex column of fixed height: the composer
   must never push its send row out of view. It yields to the output above
   only down to its send row: the model chips are what scroll when the
   panel is short. The box starts at two rows and grows with the text. */
#cl-ai .asksary-composer { flex: 0 1 auto; min-height: 0; overflow: hidden; }
#cl-ai .asksary-composer .asksary-composer-aux { flex: 0 1 auto; min-height: 0; overflow: auto; }
#cl-ai .asksary-composer .asksary-composer-files { flex: 0 0 auto; }
#cl-ai .asksary-composer .asksary-composer-row { flex: 0 0 auto; }
#cl-ai .asksary-composer .asksary-composer-tools { flex: 0 0 auto; }
#cl-ai .asksary-composer .asksary-composer-input { min-height: 48px; }
#cl-ai .asksary-composer .asksary-composer-chips .cl-chip { min-height: 26px; padding: 4px 7px; font-size: 10px; }
#cl-ai .cl-ai-output { min-height: 60px; }

/* Code Lab's model: one button beside Effort, the models as its menu. */
.asksary-composer .coding-lab-model { position: relative; flex: 0 1 auto; min-width: 0; }
.asksary-composer .coding-lab-model-btn { gap: 7px; padding: 0 10px; max-width: 220px; color: var(--composer-muted); }
.asksary-composer .coding-lab-model-btn strong { color: var(--composer-text); font: 800 12px/1 inherit; font-family: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.asksary-composer .coding-lab-model-btn i:last-child { font-size: 9px; opacity: .7; transition: transform .15s ease; }
.asksary-composer .coding-lab-model.is-open .coding-lab-model-btn i:last-child { transform: rotate(180deg); }
:root .asksary-composer .coding-lab-modes.coding-lab-model-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; min-width: 210px; margin: 0; padding: 6px; display: none; flex-direction: column; flex-wrap: nowrap; gap: 2px;
  border: 1px solid var(--composer-border); border-radius: 12px; background: rgba(14, 16, 24, .98); box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
:root .asksary-composer .coding-lab-model.is-open .coding-lab-modes.coding-lab-model-menu { display: flex; }
:root .asksary-composer .coding-lab-model-menu button {
  flex: 0 0 auto !important; display: flex; align-items: center; width: 100%; min-height: 36px; margin: 0; padding: 8px 10px !important;
  border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; text-align: left; cursor: pointer;
}
:root .asksary-composer .coding-lab-model-menu button strong { color: var(--composer-text) !important; font: 700 12.5px/1.2 inherit !important; font-family: inherit !important; }
:root .asksary-composer .coding-lab-model-menu button:hover { background: rgba(255, 255, 255, .07) !important; }
:root .asksary-composer .coding-lab-model-menu button[aria-pressed="true"] { background: rgba(124, 58, 237, .2) !important; border-color: rgba(167, 139, 250, .5) !important; }
html.light-mode .asksary-composer .coding-lab-modes.coding-lab-model-menu { background: #fff; }
html.light-mode .asksary-composer .coding-lab-model-menu button:hover { background: rgba(0, 0, 0, .05) !important; }
.asksary-composer .asksary-composer-aux:not(:has(*)) { display: none; }

/* The Code Lab model menu while open: lifted to the top of the page (script.js, the model picker),
   so nothing in the workspace can draw over it or cut it off. Placed by script against its button. */
.coding-lab-modes.coding-lab-model-menu-floating {
  position: fixed !important; z-index: 2147483000 !important; display: flex !important; flex-direction: column; gap: 2px; min-width: 210px; margin: 0 !important; padding: 6px !important;
  overflow-y: auto; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(14, 16, 24, .98) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #e9f1ff;
}
.coding-lab-model-menu-floating button {
  flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 36px !important; height: auto !important; margin: 0 !important; padding: 8px 10px !important;
  border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; text-align: left !important; cursor: pointer; color: inherit !important;
}
.coding-lab-model-menu-floating button strong { color: #e9f1ff !important; font: 700 12.5px/1.2 Inter, ui-sans-serif, system-ui, sans-serif !important; }
.coding-lab-model-menu-floating button:hover { background: rgba(255, 255, 255, .07) !important; }
.coding-lab-model-menu-floating button[aria-pressed="true"] { background: rgba(124, 58, 237, .2) !important; border-color: rgba(167, 139, 250, .5) !important; }
.coding-lab-model-menu-floating button:disabled { opacity: .45; cursor: default; }
html.light-mode .coding-lab-modes.coding-lab-model-menu-floating { background: #fff !important; color: #14131b; border-color: rgba(20, 19, 27, .14); }
html.light-mode .coding-lab-model-menu-floating button strong { color: #14131b !important; }
html.light-mode .coding-lab-model-menu-floating button:hover { background: rgba(0, 0, 0, .05) !important; }