/*
 * Conversation chrome owned by the composer: the session header, the composer and what sits above it (running line,
 * todo bar, suggestion, side question), the command palette, attachment chips and the new-session advanced section.
 * Follows docs/DESIGN.md. Colors, type, radii and shadows come from the tokens in app.css; this file defines none.
 */

/* Hidden elements stay hidden even where a display rule below sets one. */
.session-header [hidden],
.composer [hidden] {
  display: none !important;
}

/* ---- Session header (52 px) --------------------------------------------------------------------------------------- */

.session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-sizing: border-box;
  min-height: var(--header-h);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  min-width: 0;
}

.hdr-left,
.hdr-right,
.hdr-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.hdr-left {
  flex: 1 1 auto;
}

.hdr-right {
  flex: 0 0 auto;
}

.hdr-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hdr-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.hdr-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}

.hdr-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdr-agent {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: 16px;
}

.hdr-cwd {
  min-width: 0;
}

.hdr-cwd-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 16px;
}

/* Header pills: native selects, buttons and the context ring share one 32 px height. */
.hdr-select,
.hdr-fast,
.hdr-tasks,
.state-badge {
  box-sizing: border-box;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}

.hdr-select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 11rem;
  padding: 0 26px 0 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg);
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.hdr-select:disabled {
  color: var(--fg-subtle);
  cursor: default;
}

.hdr-select:hover:not(:disabled) {
  border-color: var(--border-strong);
}

.hdr-fast {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  cursor: pointer;
}

.hdr-fast .icon {
  width: 13px;
  height: 13px;
}

.hdr-fast[aria-pressed="true"] {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

.hdr-fast:disabled {
  color: var(--fg-subtle);
  cursor: default;
}

.hdr-fast-note {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.hdr-tasks {
  padding: 0 12px;
  cursor: pointer;
}

/* Unattended mode is on: a pill in the attention tone, as tall as the other header controls. */
.hdr-unattended {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--attention-soft);
  color: var(--attention);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.hdr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}

.hdr-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

.hdr-icon-btn .icon {
  width: 16px;
  height: 16px;
}

/* The context ring (LiveInfo.context): 18 px, filled to --ctx-pct. The property is registered so the fill eases between
   values (400 ms, reduced motion makes it instant), which shows the drop after a compaction. The exact figures live in
   the tooltip. The tone colors the fill; the tick marks where automatic compaction starts. */
@property --ctx-pct {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.ctx-meter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}

.ctx-ring {
  --ctx-fill: var(--fg-muted);
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(var(--ctx-fill) calc(var(--ctx-pct, 0) * 1%), var(--border) 0);
  -webkit-mask: radial-gradient(circle, transparent 5.5px, black 6px);
  mask: radial-gradient(circle, transparent 5.5px, black 6px);
  transition: --ctx-pct 400ms var(--ease);
}

.ctx-meter:hover .ctx-ring {
  --ctx-fill: var(--accent);
}

.ctx-meter[data-tone="attention"] .ctx-ring {
  --ctx-fill: var(--attention);
}

.ctx-meter[data-tone="danger"] .ctx-ring {
  --ctx-fill: var(--danger);
}

/* Where automatic compaction starts: a short mark just outside the ring's edge, turned by --tick (0 deg is 12 o'clock). */
.ctx-tick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 3px;
  margin: -1.5px 0 0 -1px;
  border-radius: 1px;
  background: var(--fg-muted);
  pointer-events: none;
  transform: rotate(var(--tick, 0deg)) translateY(-11px);
}

/* A compaction in progress: an indeterminate arc sweeps around the ring. Reduced motion keeps a static partial ring. */
.ctx-meter.is-compacting .ctx-ring {
  --ctx-fill: var(--accent);
  background: conic-gradient(var(--accent) 0 30%, var(--border) 30% 100%);
  animation: ctx-sweep 1100ms linear infinite;
}

@keyframes ctx-sweep {
  to {
    transform: rotate(360deg);
  }
}

/* State badge: the same words and glyphs as the sidebar. */
.state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: var(--fs-xs);
  background: var(--bg-sunken);
  border-color: transparent;
}

.state-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.state-spinner {
  display: none;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
}

.state-badge[data-state="running"],
.state-badge[data-state="starting"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.state-badge[data-state="running"] .state-spinner,
.state-badge[data-state="starting"] .state-spinner {
  display: inline-block;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hdr-spin 900ms linear infinite;
}

.state-badge[data-state="requires_action"] {
  background: var(--attention-soft);
  color: var(--attention);
}

.state-badge[data-state="requires_action"] .state-spinner {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px var(--attention-soft);
}

.state-badge[data-state="error"] {
  color: var(--danger);
}

.state-badge[data-state="error"] .state-spinner {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

@keyframes hdr-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 767px) {
  /* Phones keep the header short: model, mode and effort move into the overflow menu. */
  .hdr-controls,
  .hdr-tasks,
  .hdr-cwd {
    display: none;
  }

  /* The pill keeps its icon on phones; the composer's footer names the mode in words. */
  .hdr-unattended {
    width: 32px;
    padding: 0;
    justify-content: center;
  }

  .hdr-unattended-text {
    display: none;
  }
}

/* ---- Composer ----------------------------------------------------------------------------------------------------- */

.composer {
  /* The text edge inside the box: its 1 px border plus the 16 px textarea padding. The lines above the box use it too. */
  --composer-indent: 17px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-4);
}

.composer-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.composer-box {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.composer-box:focus-within {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.composer-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  max-height: 40vh;
  margin: 0;
  padding: 14px 16px 4px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-prose);
  line-height: 26px;
}

.composer-input::placeholder {
  color: var(--fg-subtle);
}

.composer-input:disabled {
  color: var(--fg-subtle);
  cursor: not-allowed;
}

.composer-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 4px 8px 8px 8px;
}

.composer-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.composer-icon-btn,
.composer-send,
.composer-stop,
.composer-stop-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg-muted);
  font: inherit;
  cursor: pointer;
}

.composer-icon-btn:hover,
.composer-stop:hover,
.composer-stop-more:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

.composer-icon-btn .icon,
.composer-stop .icon,
.composer-send .icon {
  width: 16px;
  height: 16px;
}

/* The send and stop buttons are icon-only; their names stay for screen readers. */
.composer .btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.composer-stop-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px 0 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
}

.composer-stop {
  color: var(--fg);
}

.composer-stop-more {
  width: 22px;
  height: 28px;
}

.composer-stop-more .icon {
  width: 12px;
  height: 12px;
}

.composer-send {
  background: var(--accent);
  color: var(--accent-fg);
}

.composer-send:hover {
  background: var(--accent);
  opacity: 0.9;
  color: var(--accent-fg);
}

.composer-send:disabled {
  background: var(--bg-hover);
  color: var(--fg-subtle);
  cursor: default;
  opacity: 1;
}

/* The permission mode as quiet text; Shift+Tab cycles it and flashes the new word for two seconds. */
.composer-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}

.composer-mode:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

/* Desktop shows the full word; the short name stays hidden until the phone layout swaps the two. The tooltip and the
   menu always carry the full word. */
.composer-mode-text,
.composer-mode-short {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-mode-short {
  display: none;
}

@media (max-width: 767px) {
  .composer-mode-text {
    display: none;
  }

  .composer-mode-short {
    display: block;
  }
}

.composer-footer.is-flash .composer-mode {
  background: var(--accent-soft);
  color: var(--accent);
}

.composer-drop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 500;
  pointer-events: none;
}

.composer-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-2);
}

.composer-empty-text {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.composer-notice,
.composer-usage,
.composer-queued {
  padding: 0 var(--composer-indent);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: 16px;
}

.composer-notice.is-error {
  color: var(--danger);
}

.composer-notice.is-warning {
  color: var(--attention);
}

.composer-queued {
  color: var(--fg-subtle);
}

/* The prompt suggestion is one quiet line above the composer: no border or fill, its text on the composer's text edge.
   The whole line is one button, so it stays clickable and keyboard reachable; focus shows the shared focus ring. */
.composer-suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 32px;
  padding: 0 var(--space-2) 0 var(--composer-indent);
  font-size: var(--fs-sm);
}

.composer-suggestion-use {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: start;
  cursor: pointer;
  transition: color 140ms var(--ease);
}

.composer-suggestion-use:hover {
  color: var(--fg);
}

.composer-suggestion-use > .icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.composer-suggestion-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Running line (the activity bar) and the todo bar ------------------------------------------------------------- */

.composer-activity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 28px;
  padding: 0 var(--composer-indent);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.activity-glyph {
  display: inline-flex;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
}

.activity-arc {
  display: block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: activity-spin 900ms linear infinite;
}

/* A request waits for the user: the arc becomes the waiting dot, a filled dot with a ring, in the attention color. */
.composer-activity.is-waiting .activity-arc {
  width: 7px;
  height: 7px;
  margin: 2.5px;
  border: 0;
  background: var(--attention);
  box-shadow: 0 0 0 2px var(--attention-soft);
  animation: none;
}

.composer-activity.is-waiting .activity-text {
  color: var(--attention);
}

.activity-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}

.activity-time,
.activity-tokens {
  flex: 0 0 auto;
  color: var(--fg-subtle);
  white-space: nowrap;
}

.activity-hint {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--fg-subtle);
  white-space: nowrap;
}

@keyframes activity-spin {
  to {
    transform: rotate(360deg);
  }
}

.composer-todos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 0 var(--composer-indent);
  font-size: var(--fs-sm);
}

.todo-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg-muted);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: start;
  cursor: pointer;
}

.todo-toggle:hover {
  color: var(--fg);
}

.todo-toggle .icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  transition: transform 140ms var(--ease);
}

.todo-toggle[aria-expanded="true"] .icon {
  transform: rotate(90deg);
}

.todo-count {
  flex: 0 0 auto;
  color: var(--fg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.todo-active {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
  margin: 0;
  max-height: 30vh;
  padding: 4px 0 4px 8px;
  border-left: 2px solid var(--border);
  overflow-y: auto;
  list-style: none;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 24px;
  color: var(--fg-muted);
}

.todo-item.is-in_progress {
  color: var(--fg);
}

.todo-item.is-completed {
  color: var(--fg-subtle);
}

.todo-mark {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
}

.todo-item.is-in_progress .todo-mark {
  border-color: var(--accent);
  border-right-color: transparent;
  animation: activity-spin 900ms linear infinite;
}

.todo-item.is-completed .icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  color: var(--success);
}

.todo-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .activity-arc,
  .todo-item.is-in_progress .todo-mark,
  .ctx-meter.is-compacting .ctx-ring,
  .state-badge[data-state="running"] .state-spinner,
  .state-badge[data-state="starting"] .state-spinner {
    animation: none;
  }

  .activity-arc,
  .state-badge[data-state="running"] .state-spinner,
  .state-badge[data-state="starting"] .state-spinner {
    border-right-color: currentColor;
  }

  .todo-toggle .icon,
  .composer-box,
  .composer-mode {
    transition: none;
  }
}

/* ---- Side question overlay (above the composer; nothing enters the transcript) ----------------------------------- */

.composer-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-sizing: border-box;
  max-height: 50vh;
  padding: var(--space-3) var(--space-4);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-md);
}

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 28px;
}

.side-title {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.side-question {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.side-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.side-input {
  flex: 1 1 auto;
  box-sizing: border-box;
  min-width: 0;
  min-height: 40px;
  max-height: 30vh;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-md);
  resize: vertical;
}

.side-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.side-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.side-loading .activity-arc {
  width: 12px;
  height: 12px;
}

.side-answer {
  color: var(--fg);
  font-size: var(--fs-prose);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.side-answer > :first-child {
  margin-top: 0;
}

.side-answer > :last-child {
  margin-bottom: 0;
}

.side-note {
  margin: 0;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
}

.side-error {
  margin: 0;
  color: var(--danger);
  font-size: var(--fs-sm);
}

.side-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.side-close,
.side-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.side-copy .icon {
  width: 13px;
  height: 13px;
}

/* ---- Command palette (/ commands, @ files), opened above the composer ---------------------------------------------- */

.palette {
  --palette-row: 36px;
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  left: 0;
  z-index: 20;
  box-sizing: border-box;
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-md);
}

.palette-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(8 * var(--palette-row) + 14px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.palette-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--palette-row);
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.palette-option.is-active {
  background: var(--accent-soft);
}

.palette-option .icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--fg-muted);
}

.palette-main {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-width: 0;
}

.palette-name {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.palette-args {
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.palette-desc {
  flex: 1 1 12rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}

.palette-path {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.palette-badge {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: 18px;
}

.palette-match {
  color: var(--accent);
  font-weight: 600;
}

.palette-empty {
  margin: 0;
  padding: 8px var(--space-2);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.palette-hint {
  margin: 0;
  padding: 6px var(--space-2) 4px;
  border-top: 1px solid var(--border);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
}

.palette :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---- Attachment chips (files waiting to be sent) ------------------------------------------------------------------- */

.composer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-2);
}

.chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  max-width: 260px;
  min-width: 0;
  padding: 4px 4px 4px 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  font-size: var(--fs-sm);
}

.chip.is-error {
  border-color: var(--danger);
}

.chip-thumb {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--bg-hover);
  color: var(--fg-muted);
  object-fit: cover;
}

.chip-thumb-file .icon {
  width: 16px;
  height: 16px;
}

.chip-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg);
}

.chip-meta {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: 16px;
}

.chip.is-error .chip-meta {
  color: var(--danger);
}

.chip-track {
  height: 3px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.chip-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 140ms var(--ease);
}

.chip-action {
  flex: 0 0 auto;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}

.chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}

.chip-remove:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

.chip-remove .icon {
  width: 12px;
  height: 12px;
}

/* ---- New session: the Advanced disclosure and additional directories ----------------------------------------------- */

.newsession-advanced {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.newsession-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.newsession-advanced-toggle::-webkit-details-marker {
  display: none;
}

.newsession-advanced-toggle .icon {
  width: 12px;
  height: 12px;
  transition: transform 140ms var(--ease);
}

.newsession-advanced[open] > .newsession-advanced-toggle .icon {
  transform: rotate(90deg);
}

.dir-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-2);
}

.dir-chips:empty {
  display: none;
}

.dir-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 28px;
  padding: 0 2px 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--fg);
  font-size: var(--fs-sm);
}

.dir-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.dir-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
}

.dir-chip-remove:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

.dir-chip-remove .icon {
  width: 12px;
  height: 12px;
}

.dir-browser-extra {
  margin-top: var(--space-2);
}

/* The path of the additional-directory browser (the session folder's own path is .dir-path, from app.css). */
.dir-extra-path {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

@media (pointer: coarse) {
  /* Every frequent target is at least 44 px on touch screens. */
  .composer-icon-btn,
  .composer-send,
  .composer-stop,
  .composer-stop-more,
  .composer-mode,
  .composer-suggestion-use,
  .hdr-icon-btn,
  .ctx-meter,
  .hdr-select,
  .hdr-fast,
  .hdr-unattended,
  .palette-option,
  .todo-toggle,
  .chip-remove,
  .dir-chip-remove,
  .newsession-advanced-toggle {
    min-height: 44px;
  }

  .composer-icon-btn,
  .composer-send,
  .composer-stop,
  .hdr-icon-btn,
  .hdr-unattended {
    min-width: 44px;
  }

  /* The mode control and the stop-menu trigger are 44 px wide as well as tall. */
  .composer-mode,
  .composer-stop-more {
    min-width: 44px;
  }

  .composer-mode {
    justify-content: center;
  }

  .palette-hint {
    display: none;
  }
}