/* ═══════════════════════════════════════════════════════════════════════════
   MAX Composer — shared input shell + model menu
   Used by chat (#input-container) and dashboard (#launchpad-input-container)
   ═══════════════════════════════════════════════════════════════════════════ */

.composer-shell {
  position: relative;
  display: grid;
  grid-template-areas:
    "attach attach attach attach"
    "text   text   text   text"
    "slash  left   mid    right";
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #161311 0%, #141210 100%);
  border: 1px solid rgba(232, 155, 90, 0.15);
  border-radius: 20px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Warm ember hairline across the top inside the shell */
.composer-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 155, 90, 0.28) 50%,
    transparent 100%);
  pointer-events: none;
  opacity: 0.7;
}

.composer-shell:focus-within {
  border-color: rgba(232, 155, 90, 0.42);
  box-shadow:
    0 0 0 3px rgba(232, 155, 90, 0.08),
    0 2px 18px rgba(0, 0, 0, 0.4);
}

.composer-shell.drag-over {
  border-color: var(--accent);
  background: linear-gradient(180deg,
    rgba(232, 155, 90, 0.06) 0%,
    rgba(232, 155, 90, 0.02) 100%);
}

/* Row assignments */
.composer-shell > .attachment-bar    { grid-area: attach; }
.composer-shell > .composer-textarea { grid-area: text; }
.composer-shell > .slash-cmd-btn      { grid-area: slash; justify-self: start; align-self: center; }
.composer-shell > .composer-left,
.composer-shell > .file-picker-btn   { grid-area: left;  justify-self: start; align-self: center; }
.composer-shell > .composer-middle   { grid-area: mid;   justify-self: start; }
.composer-shell > .composer-right    { grid-area: right; justify-self: end; }

/* Textarea */
.composer-shell .composer-textarea {
  width: 100%;
  min-height: 52px;
  max-height: 200px;
  padding: 6px 4px;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
  margin: 0 !important;
}

.composer-shell .composer-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
}

/* Composer scrollbar: amber-tinted, subtle */
.composer-shell .composer-textarea::-webkit-scrollbar { width: 6px; }
.composer-shell .composer-textarea::-webkit-scrollbar-thumb {
  background: rgba(232, 155, 90, 0.25);
  border-radius: 3px;
}

/* Toolbar control groups */
.composer-left,
.composer-middle,
.composer-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Icon buttons (slash, file-picker, send, stop) — unified 36px */
.composer-shell .icon-btn,
.composer-shell .slash-cmd-btn,
.composer-shell .file-picker-btn,
.composer-shell #send-btn,
.composer-shell #stop-btn,
.composer-shell #launchpad-send-btn {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Ghost icon buttons (slash, file-picker) */
.composer-shell .slash-cmd-btn,
.composer-shell .file-picker-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  font-weight: 700;
}
.composer-shell .slash-cmd-btn:hover,
.composer-shell .file-picker-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }

/* Slash command menu */
.slash-cmd-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  min-width: 280px; padding: 6px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 12px; z-index: 60;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,155,90,0.08);
  transform: translateY(4px); opacity: 0;
  transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}
.slash-cmd-menu[data-open="true"] { transform: translateY(0); opacity: 1; }
.slash-cmd-item {
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  transition: background 0.12s;
}
.slash-cmd-item:hover, .slash-cmd-item.active { background: var(--bg-tertiary); }
.slash-cmd-row { display: flex; align-items: center; gap: 8px; }
.slash-cmd-name { color: var(--accent); font-weight: 600; font-size: 0.88rem; }
.slash-cmd-args { color: var(--text-muted); font-size: 0.78rem; font-style: italic; }
.slash-cmd-desc { color: var(--text-muted); font-size: 0.78rem; margin-top: 2px; }

/* Send button — amber, with a soft glow */
.composer-shell #send-btn,
.composer-shell #launchpad-send-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(232, 155, 90, 0.28);
}
.composer-shell #send-btn:hover:not(:disabled),
.composer-shell #launchpad-send-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 4px 18px rgba(232, 155, 90, 0.4);
}
.composer-shell #send-btn:disabled,
.composer-shell #launchpad-send-btn:disabled {
  background: rgba(232, 155, 90, 0.28);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  cursor: not-allowed;
}

/* Stop button — keeps red identity */
.composer-shell #stop-btn {
  background: var(--danger);
  color: #fff;
  border: none;
  display: none;
}
.composer-shell #stop-btn:hover { background: #c0392b; }

/* ═══════════════════════════════════════════════════════════════════════════
   Model menu — custom dark dropdown (replaces native <select>)
   ═══════════════════════════════════════════════════════════════════════════ */

.model-menu {
  position: relative;
  display: inline-block;
}

.model-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px 0 14px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 18px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  margin: 0 !important;
}

.model-menu-trigger:hover:not([aria-disabled="true"]) {
  color: var(--text);
  border-color: rgba(232, 155, 90, 0.45);
}

.model-menu-trigger[aria-expanded="true"] {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(232, 155, 90, 0.06);
}

.model-menu[aria-disabled="true"] .model-menu-trigger,
.model-menu-trigger[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.model-menu-chevron {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}

.model-menu-trigger[aria-expanded="true"] .model-menu-chevron {
  transform: rotate(180deg);
}

/* Panel — opens upward (composer sits at bottom of page) */
.model-menu-list {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(232, 155, 90, 0.08);
  z-index: 50;
  text-align: left;
  transform: translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}

.model-menu-list[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.model-menu-list[hidden] { display: none; }

.model-menu-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px 9px 14px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  border-left: 3px solid transparent;
  margin-left: -3px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.model-menu-list li:hover,
.model-menu-list li:focus-visible {
  background: var(--bg-tertiary);
}

.model-menu-list li[aria-selected="true"] {
  background: rgba(232, 155, 90, 0.08);
  border-left-color: var(--accent);
}

.model-menu-name {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.model-menu-caption {
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Page-specific anchors (chat composer lives fixed at bottom of chat area;
   dashboard composer is centered below the greeting)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Chat: the shell wraps the existing #input-container id for backward compat
   with CSS selectors elsewhere. Both classes are applied. */
#input-container.composer-shell {
  padding: 10px 12px;
  border-radius: 20px;
}

/* Dashboard: centered card with a subtle radial halo behind it */
#launchpad-input-container.composer-shell {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Locked composer + submitted banner (request submission / architecture lock)
   ═══════════════════════════════════════════════════════════════════════════ */

#input-container.composer-shell.locked {
  opacity: 0.55;
  pointer-events: none;
}

.submitted-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  margin: 0 12px 10px;
  background: linear-gradient(90deg, rgba(232, 155, 90, 0.08), rgba(232, 155, 90, 0.02));
  border: 1px solid rgba(232, 155, 90, 0.25);
  border-radius: 12px;
  color: var(--text);
  font-size: 0.88rem;
}
.submitted-banner-text { flex: 1; min-width: 0; }
.submitted-banner-title { font-weight: 600; color: var(--accent); }
.submitted-banner-sub { color: var(--text-muted); font-size: 0.78rem; margin-top: 2px; }
.submitted-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.banner-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 14px; border-radius: 8px;
  font-size: 0.83rem; font-family: inherit;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.banner-btn-secondary {
  color: var(--text-muted);
  border-color: var(--border);
  background: transparent;
}
.banner-btn-secondary:hover { color: var(--text); border-color: var(--accent); }
.banner-btn-primary {
  background: var(--accent);
  color: #1a1816;
  border-color: var(--accent);
  font-weight: 600;
}
.banner-btn-primary:hover { background: var(--accent-hover, var(--accent)); }
.banner-btn[disabled] { opacity: 0.6; cursor: default; }
@media (max-width: 640px) {
  .submitted-banner { flex-direction: column; align-items: stretch; }
  .submitted-banner-actions { justify-content: flex-end; }
}