/* Spec 35 PR B: the pinned queue strip.
   A sibling between the agent status line and the composer, on the session
   surface and the dock. It never scrolls with the transcript: agent activity
   flows above it, and its own list scrolls once it holds more than a few
   rows, so the composer stays in reach.

   Compact round (operator, 13 Oct: "those icons are huge and take way too
   much space; not the icon itself but all that padding around"): each row is
   one line, the text takes the width, and the actions are borderless quiet
   icons in the dock column's grammar. The phone 44px floor for icon buttons
   still comes from app-shell/tap-targets.css (one owner); here it is only
   kept from adding visual height, so it is a hit area, not padding. */
.queue-strip {
  position:relative;
  flex:0 0 auto;
  margin:0 0 6px;
  padding:3px 6px;
  border:1px solid var(--ui-line);
  border-radius:10px;
  background:var(--ui-raised);
}
.queue-strip[hidden] { display:none; }
/* The rows scroll inside; the strip itself stays put, so its counter chip
   can sit on the top edge. */
.queue-strip-rows {
  display:flex;
  flex-direction:column;
  max-height:min(40vh, 196px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* Counter when more than one message waits: a small chip on the strip's top
   edge, clear of every row. Decorative (empty alternative text); each row is
   its own list item for assistive technology. */
.queue-strip.has-count { margin-top:8px; }
.queue-strip.has-count::before {
  content:attr(data-count) / "";
  position:absolute;
  top:-8px;
  right:10px;
  min-width:16px;
  height:16px;
  padding:0 5px;
  border-radius:999px;
  /* The primary button's pair: --ui-panel can be a translucent glass inside a
     dock column, which made the count invisible there. */
  background:var(--blue);
  color:var(--primary-ink);
  font-size:.6875rem;
  font-weight:600;
  line-height:16px;
  text-align:center;
}

.queue-strip-row {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  min-height:28px;
  padding:0 2px 0 6px;
  border-radius:6px;
}
.queue-strip-row + .queue-strip-row { border-top:1px solid var(--ui-line); border-radius:0; }
.queue-strip-row[data-editing="true"] { box-shadow:inset 2px 0 0 var(--ui-accent); }
.queue-strip-row[data-status="delivered"] { opacity:.7; }

/* One line: the text takes what is left after the status word and actions. */
.queue-strip-body {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.queue-strip-text { flex:1 1 auto; min-width:0; }
.queue-strip-text > summary {
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--ui-text);
  font-size:.875rem;
  line-height:1.4;
  cursor:pointer;
  list-style:none;
}
.queue-strip-text > summary::-webkit-details-marker { display:none; }
/* Expanded: the summary line gives way to the whole text. */
.queue-strip-text[open] > summary { display:none; }
.queue-strip-text > p {
  margin:2px 0;
  max-height:120px;
  overflow-y:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:var(--ui-text);
  font-size:.875rem;
}
.queue-strip-status {
  flex:0 0 auto;
  white-space:nowrap;
  font-size:.75rem;
  color:var(--ui-muted);
}
.queue-strip-row[data-status="uncertain"] .queue-strip-status { color:var(--ui-danger); }

.queue-strip-actions {
  flex:0 0 auto;
  display:flex;
  align-items:center;
}
.queue-strip-actions:empty { display:none; }

/* Quiet, borderless icons: the glyph is the control (dock grammar). */
.queue-strip .button.icon-button {
  border-color:transparent;
  background:transparent;
  color:var(--ui-muted);
}
.queue-strip .button.icon-button:hover,
.queue-strip .button.icon-button:focus-visible {
  background:var(--ui-hover);
  color:var(--ui-text);
}
.queue-strip .button.icon-button .ui-icon { width:16px; height:16px; }

@media (min-width: 821px) {
  .queue-strip .button.icon-button {
    width:28px;
    height:28px;
    min-width:28px;
    min-height:28px;
    border-radius:6px;
  }
}

/* Touch: tap-targets.css keeps each button 44px square, and each row is at
   least that tall, so a button's hit area lies wholly inside its own row.
   Review of #2254: pulling 44px buttons into 30px rows with negative margins
   made adjacent rows' hit areas overlap, and a tap at the bottom of one
   row's Cancel cancelled the next row's message. The look stays compact: no
   borders or fills, only the height a finger needs. */
@media (max-width: 820px) and (pointer: coarse) {
  .queue-strip-row { min-height:44px; }
  .queue-strip .button.icon-button { border-radius:8px; }
}