/**
 * File:          public/css/composer_c2.css
 * Version:       0.1.0
 * Last Modified: 2026-11-01 08:05 PM EST
 * Changes:       New. Chat 2.0 step 5 (composer), plan C1–C4. Linked after chat2_tokens.css so it wins.
 *                (1) Pill when idle: [ + ] [ Message… ] [ mic ] [ send ] in one capsule row.
 *                (2) Card when the text wraps / has a new line / has attachments (composer_shape.js sets
 *                    #input-row.c2-card): thumbnail strip, then the text, then + · mic · send underneath.
 *                    The drag-to-expand corner (resizable_textareas) shows on the card only.
 *                (3) Send while a reply runs names its action ("Steer" / "Queue", app.js paintMidRunSend).
 *                (4) + menu = native list with plain outline icons (no tiles); (5) Skills picker sheet;
 *                (6) Settings "While a reply is running, Send does" segmented row.
 *                Colours come from the step 1 tokens (--c2-*); gold accent, no blue.
 */

/* ── The chat bar area ── */
#input-area { background: var(--c2-bg) !important; border-top: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ── (1) Pill: one capsule row ── */
#input-row {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "plus input mic send";
  align-items: center;
  column-gap: 4px; row-gap: 6px;
  min-height: 52px; box-sizing: border-box;
  margin: 0 !important; padding: 6px !important;
  background: var(--c2-surface) !important;
  border: 1px solid var(--c2-line) !important;
  border-radius: 28px !important;
  box-shadow: none !important;
  transition: border-color .15s ease;
}
#input-row:focus-within { border-color: var(--c2-line-2) !important; box-shadow: none !important; }
#input-row.drag-over { border-color: var(--c2-accent) !important; background: var(--c2-surface-2) !important; }

#input-row > #mobilePlusBtn { grid-area: plus; }
#input-row > #promptInput { grid-area: input; }
#input-row > #voiceNoteBtn { grid-area: mic; }
#input-row > #sendBtn { grid-area: send; margin: 0 !important; }
#input-row > #pending-files-bar { grid-area: files; }
/* Not on the bar: Stop (status strip ■ / ⋯ Stop turn) and the hidden style picker anchors. */
#input-row > #stopBtn { display: none !important; }

#promptInput {
  width: 100% !important; min-width: 0 !important; box-sizing: border-box;
  margin: 0 !important; padding: 9px 6px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none;
  border-radius: 0 !important;
  color: var(--c2-text) !important;
  font-family: var(--c2-font) !important; font-size: 16px !important; font-weight: 300 !important;
  line-height: 1.4 !important; letter-spacing: -.1px;
}
#promptInput::placeholder { color: var(--c2-muted); font-weight: 300; }
#promptInput:focus { box-shadow: none !important; }
@media (max-width: 768px) { #promptInput { font-size: 17px !important; } }
/* The pill is one line (rows="1"): no drag corner, no scrollbar. Wrapped text overflows it and
   composer_shape.js turns the bar into the card, where the auto-grow / dragged height applies again. */
#input-row:not(.c2-card) > #promptInput { height: auto !important; min-height: 0 !important; resize: none !important; overflow-y: hidden !important; }

/* + and mic: plain round icon buttons inside the capsule. */
#input-row > #mobilePlusBtn,
#input-row > #voiceNoteBtn:not(.vn-recording) {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  border: 0 !important; border-radius: 50% !important;
  background: transparent !important; box-shadow: none !important;
}
#input-row > #mobilePlusBtn { color: var(--c2-text) !important; }
#input-row > #voiceNoteBtn:not(.vn-recording) { color: var(--c2-text-2) !important; }
#input-row > #mobilePlusBtn:hover, #input-row > #voiceNoteBtn:not(.vn-recording):hover { background: var(--c2-surface-3) !important; }
#input-row > #mobilePlusBtn.active { background: var(--c2-surface-3) !important; color: var(--c2-text) !important; }

/* Send: gold circle with the ink-coloured arrow. */
#sendBtn { background: var(--c2-accent) !important; color: var(--c2-accent-ink) !important; }
#sendBtn::after { background: var(--c2-accent-ink) !important; }
#sendBtn:hover { background: var(--c2-accent) !important; filter: brightness(1.06); transform: none !important; }

/* ── (2) Card: text on top, + · mic · send underneath ── */
#input-row.c2-card {
  grid-template-areas: "files files files files" "input input input input" "plus . mic send";
  align-items: end;
  border-radius: 24px !important;
  padding: 8px !important;
}
#input-row.c2-card > #promptInput { padding: 6px 8px !important; }

/* ── (3) While a reply runs, Send names its action ── */
#sendBtn[data-mid-run] {
  width: auto !important; min-width: 40px !important; padding: 0 14px !important;
  border-radius: 20px !important; gap: 6px !important;
  font: 600 14px/1 var(--c2-font) !important; white-space: nowrap;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
#sendBtn[data-mid-run] > * { display: inline-block !important; }
#sendBtn[data-mid-run] > svg { margin-right: 0 !important; }
#sendBtn[data-mid-run]::after { display: none !important; }
#sendBtn.c2-holding { filter: brightness(.9); transform: scale(.96) !important; }
/* Hold / right-click on Send while a reply runs: one-item menu with the other action. */
#send-hold-menu {
  position: fixed; z-index: 702; min-width: 170px; padding: 6px 0;
  background: var(--c2-sheet); border: 1px solid var(--c2-line-2); border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6); font-family: var(--c2-font);
}
#send-hold-menu .shm-item {
  display: flex; align-items: center; gap: 13px; width: 100%; height: 44px; padding: 0 16px;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--c2-text) !important; font: 400 15.5px var(--c2-font); text-align: left; cursor: pointer;
}
#send-hold-menu .shm-item svg { flex: none; color: var(--c2-text-2); }
#send-hold-menu .shm-item:hover, #send-hold-menu .shm-item:focus-visible { background: var(--c2-surface-2) !important; outline: none; }

/* ── Thumbnail strip (above the text, every chat type) ── */
#input-row > #pending-files-bar {
  flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto; overflow-y: hidden;
  margin: 0 !important; padding: 2px 2px 4px !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  scrollbar-width: none;
}
#input-row > #pending-files-bar::-webkit-scrollbar { display: none; }
#pending-files-bar .pending-file-chip {
  position: relative; flex: 0 0 auto;
  display: inline-flex !important; align-items: center; gap: 8px;
  height: 56px; max-width: 220px; box-sizing: border-box; padding: 0 30px 0 10px !important;
  background: var(--c2-surface-2) !important; border: 1px solid var(--c2-line-2) !important; border-radius: 14px !important;
  color: var(--c2-text-2) !important; font-size: 13px;
}
#pending-files-bar .pending-file-chip.has-thumb { width: 56px; padding: 0 !important; overflow: hidden; }
#pending-files-bar .pending-file-chip.has-thumb img { width: 56px !important; height: 56px !important; border-radius: 0 !important; display: block; }
#pending-files-bar .pending-file-chip.has-thumb .pending-file-name { display: none; }
#pending-files-bar .pending-file-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pending-files-bar .pending-file-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; min-width: 22px; padding: 0 !important; margin: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .62) !important; color: #fff !important;
  font-size: 15px; line-height: 1; cursor: pointer;
}
#pending-files-bar .pending-file-remove:hover { background: rgba(0, 0, 0, .8) !important; }

/* ── (4) + menu: native list, plain outline icons, no tiles ── */
#mobile-plus-sheet { background: var(--c2-sheet) !important; border-color: var(--c2-line) !important; padding-top: 6px; }
#mobile-plus-sheet h3 { font-size: 15px; font-weight: 600; color: var(--c2-text); }
#mobile-plus-sheet .plus-sheet-list { padding: 2px 0 4px; }
#mobile-plus-sheet .plus-row {
  min-height: 46px; gap: 14px; padding: 0 18px; border-radius: 0;
  color: var(--c2-text); font-size: 15.5px;
}
#mobile-plus-sheet .plus-row:hover, #mobile-plus-sheet .plus-row:focus-visible { background: var(--c2-surface-2); outline: none; }
#mobile-plus-sheet .plus-row:active { background: var(--c2-surface-3); }
#mobile-plus-sheet .plus-row-icon { width: 20px; height: 20px; border-radius: 0; background: transparent; color: var(--c2-text-2); }
#mobile-plus-sheet .plus-row-icon svg { width: 20px; height: 20px; }
#mobile-plus-sheet .plus-row-label { font-size: 15.5px; font-weight: 400; }
#mobile-plus-sheet .plus-row-chev { color: var(--c2-dim); font-size: 20px; margin-left: auto; }
#mobile-plus-sheet .plus-sep { height: 1px; margin: 5px 0; background: var(--c2-line); }
#mobile-plus-sheet [hidden] { display: none !important; }
@media (min-width: 769px) {
  #mobile-plus-sheet { width: 300px; bottom: 88px; border-radius: 20px !important; padding-bottom: 6px; }
  #mobile-plus-sheet h3 { display: none; }
}

/* ── (5) Skills picker: searchable list of conversation styles ── */
#skills-picker-backdrop { position: fixed; inset: 0; z-index: 240; background: rgba(0, 0, 0, .45); }
#skills-picker {
  position: fixed; z-index: 245; left: 0; right: 0; bottom: 0;
  max-height: 78vh; display: flex; flex-direction: column; box-sizing: border-box;
  padding: 8px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--c2-sheet); border: 1px solid var(--c2-line); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .55); color: var(--c2-text); font-family: var(--c2-font);
}
#skills-picker .sp-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 18px; }
#skills-picker .sp-head strong { flex: 1; font-size: 16px; font-weight: 600; }
#skills-picker .sp-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--c2-muted); font-size: 22px; cursor: pointer; }
#skills-picker .sp-close:hover { background: var(--c2-surface-2); color: var(--c2-text); }
#skills-picker .sp-search {
  margin: 4px 14px 8px; padding: 10px 14px; border: 1px solid var(--c2-line-2); border-radius: 14px;
  background: var(--c2-surface); color: var(--c2-text); font: 400 15px var(--c2-font); outline: none;
}
#skills-picker .sp-search:focus { border-color: var(--c2-muted); }
#skills-picker .sp-list { overflow-y: auto; padding: 0 0 4px; }
#skills-picker .sp-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: 10px 18px; border: 0; background: transparent; color: var(--c2-text);
  font: inherit; text-align: left; cursor: pointer;
}
#skills-picker .sp-row:hover, #skills-picker .sp-row:focus-visible { background: var(--c2-surface-2); outline: none; }
#skills-picker .sp-label { font-size: 15.5px; font-weight: 500; }
#skills-picker .sp-desc { font-size: 13px; color: var(--c2-muted); line-height: 1.35; }
#skills-picker .sp-empty, #skills-picker .sp-error { padding: 14px 18px; font-size: 14px; color: var(--c2-muted); }
#skills-picker .sp-error { color: var(--c2-failed); }
@media (min-width: 769px) {
  #skills-picker { left: 24px; right: auto; bottom: 88px; width: 340px; max-height: 60vh; border: 1px solid var(--c2-line); border-radius: 20px; }
  #skills-picker-backdrop { background: rgba(0, 0, 0, .25); }
}

/* ── (6) Settings: "While a reply is running, Send does" ── */
.c2-seg { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--c2-line-2); border-radius: 20px; background: var(--c2-surface); }
.c2-seg-btn {
  min-height: 36px; padding: 0 16px; border: 0; border-radius: 17px;
  background: transparent; color: var(--c2-muted); font: 500 14px var(--c2-font); cursor: pointer; white-space: nowrap;
}
.c2-seg-btn[aria-checked="true"] { background: var(--c2-accent); color: var(--c2-accent-ink); }
.c2-seg-btn:focus-visible { outline: 2px solid var(--c2-text); outline-offset: 2px; }

/* === END OF FILE (FILENAME: public/css/composer_c2.css) === */