/* Shared Chat/Builder AI controls, and the settings popover that hides them.
   All values are Alyssiun semantic tokens.

   MODEL/EFFORT/THINKING/AUTO-SWITCH/PLANNING used to sit in the composer as
   five visible selects — a control panel most people opening a message box
   never asked for. They still all work exactly as before; they just live
   behind one gear icon now, in a popover styled like the app's other floating
   surfaces (aly-projects.css's .project-menu, aly-space-modal.css's dialog):
   an opaque --surface panel, not the translucent --glass one, because
   anything that floats above the page needs a background that actually reads
   against whatever is under it. */

.aly-settings { position: relative; flex: none; }
.aly-settings-toggle[aria-expanded="true"],
.aly-settings-toggle.is-active { color: var(--text); background: var(--glass-2); }

.aly-settings-panel {
  position: absolute; z-index: 32; bottom: calc(100% + 8px); left: 0;
  min-width: 208px; padding: 12px; display: grid; gap: 10px;
  border: 1px solid var(--surface-line); border-radius: 12px;
  background: var(--surface); color: var(--text);
  box-shadow: var(--card-shadow);
}
.aly-settings-panel[hidden] { display: none; }

/* --- the Project-workspace presentation: a centred modal ------------------
   The dock's gear sits bottom-left with the composer above and the viewport
   edge below — nowhere to anchor a six-control settings screen. So this
   instance is a modal (aly-settings-popover.js `viewport: true`): a dimmed,
   blurred backdrop with the panel centred and sized to the VIEWPORT, not to
   any leftover band around the trigger. LUX/NEO glass, like the Build this and
   Stop confirmations. */
.aly-settings-modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px;
  /* The theme's real scrim — dark in BOTH themes — so the page visibly recedes.
     The old --void-2 mix was pale in light theme and did not dim anything. */
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.aly-settings-modal[hidden] { display: none; }
.aly-settings-modal > .aly-settings-panel {
  position: static; inset: auto; z-index: auto; margin: 0;
  width: min(440px, calc(100vw - 32px)); min-width: 0;
  /* A real, viewport-derived reading area with a hard floor — never a sliver,
     never taller than the screen. The panel scrolls its own overflow so the
     last control is always reachable. */
  max-height: clamp(320px, calc(100vh - 48px), 560px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px;
  border: 1px solid var(--hair-2); border-radius: 14px;
  /* A near-solid surface (WCAG AA for text and labels in both themes over any
     backdrop) that still carries a glass edge — the faint translucency, the
     blur behind it, the hairline border. --glass-2 alone let the page read
     straight through (6% opaque in NEO). */
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--card-shadow);
}
.aly-settings-modal > .aly-settings-panel:focus-visible { outline: none; }
.aly-settings-title { margin: 0; color: var(--text); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* The panel's head: title left, Defaults top right, aligned with it — moved
   here from the panel's foot, where it read as one more setting rather than
   the reset it is. */
.aly-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.aly-ai-controls { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.aly-ai-controls[hidden] { display: none; }

/* Three sections in one panel: Shared, Chat, Build. */
.aly-ai-section { display: flex; flex-direction: column; gap: 8px; }
.aly-ai-section + .aly-ai-section { padding-top: 12px; border-top: 1px solid var(--surface-line); }
.aly-ai-section-title {
  margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text);
}
.aly-ai-section-note { margin: -2px 0 2px; font-size: 11px; color: var(--muted); }

/* Grid, not flex+wrap: label in column 1 (grows/wraps), control in column 2
   (auto-width, always the row's rightmost content) — every control in the
   panel lands in the same right-aligned column regardless of label length. A
   flex row with justify-content:space-between put a long label's control on
   its OWN line once the label wrapped, and a lone wrapped flex item under
   space-between sits at flex-start (left) — the bug this replaced. */
.aly-ai-control-wrap {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px;
}
.aly-ai-control-wrap > span.aly-ai-control-hint {
  grid-column: 1 / -1; margin-top: -4px; font-size: 10.5px; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--muted); white-space: normal;
}
.aly-ai-control-wrap > span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); white-space: normal;
}
.aly-ai-control {
  appearance: none;
  border: 1px solid var(--surface-line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  border-radius: 7px;
  padding: 6px 9px;
  max-width: 132px;
  cursor: pointer;
}
.aly-ai-control:hover { border-color: var(--text); }
.aly-ai-control:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.aly-ai-control:disabled { cursor: wait; opacity: .65; }

/* "Defaults" — one quiet, non-destructive action, top right of the panel
   next to its title. Same bordered/muted treatment as the build-run banner's
   secondary button (aly-workspace-chat.css .workspace-build-run-finish), not
   the panel's own opaque --surface controls, so it doesn't read as another
   select. */
.aly-ai-defaults-btn {
  flex: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--surface-line); border-radius: 7px;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.aly-ai-defaults-btn:hover { border-color: var(--text); color: var(--text); }
.aly-ai-defaults-btn:disabled { cursor: wait; opacity: .65; }

@media (max-width: 620px) {
  .aly-settings-panel { min-width: 0; width: min(260px, calc(100vw - 32px)); }
}