/* ==========================================================================
   task-tags.css — Orcheum composer task-tag row
   --------------------------------------------------------------------------
   Locked visual source: Figma 892:9475 (Home 887:8194), the row of six under
   the composer: Research · Architecture · Design · Code · Create · Learn.

     Row        gap 21 · centred · wraps
     Tag        padding 4 10 · gap 3.381 · radius 8 · min-width 54.096
                1px #d9d1cb · white @ 68% · blur 42
                shadow 0 2 5 -2 rgba(0,0,0,.12)
     Selected   white @ 90% · 2px rgba(240,88,34,.8) — the approved selected
                state of the canonical chip (Button 874:6020), sized to this row
     Icon       18 × 18
     Label      12 / 1.35 Geist Medium #24252d · 3.381 side padding

   The pills LOOK like the Studio chip row they replaced because they are the
   same visual component in the same place. They no longer BEHAVE like it: these
   are request tags, and nothing here navigates.
   ========================================================================== */

.oc-task-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 21px;
  row-gap: 10px;
}

.oc-task-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 54px;
  margin: 0;
  /* Figma's 1px stroke is drawn INSIDE the pill, so the border comes out of the
     padding and the outer box does not grow when the border does. */
  padding: 3px 7px;
  overflow: clip;
  color: var(--ws-figma-ink, #24252d);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--ws-figma-border, #d9d1cb);
  border-radius: 8px;
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(42px);
  backdrop-filter: blur(42px);
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.oc-task-tag__icon {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* The row's own live region. A screen reader hears "Design added" when a tag is
   held, because `aria-pressed` alone announces the button the reader just
   operated and not the fact that the request now carries that framing. */
.oc-task-tags__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.oc-task-tag__label {
  display: block;
  padding: 0 3px;
  font-family: Geist, Inter, var(--font-sans, system-ui), sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

.oc-task-tag:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.86);
}

.oc-task-tag:focus-visible {
  outline: 2px solid var(--ws-figma-orange, #f05822);
  outline-offset: 3px;
}

.oc-task-tag:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Held. Restrained on purpose: the reader is choosing a lean, not configuring a
   run, so the state is a warmer plate and the accent border — never a filled
   button, a checkbox, or a count. The 2px stroke is drawn inside the same box,
   so a tag does not move its neighbours when it is chosen. */
.oc-task-tag[aria-pressed="true"] {
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.9);
  border-width: 2px;
  border-color: rgba(240, 88, 34, 0.8);
}

/* ---- The tag as a composer token -----------------------------------------
   Choosing a tag puts an `@` token in the composer, exactly as naming a Studio
   does — the reader can see what the request carries, and remove it, in the
   place they are writing it. It borrows `.oc-composer__studio` wholesale and
   only asserts the accent that says "tag, not Studio". */
.oc-composer__tag {
  border-color: rgba(240, 88, 34, 0.55);
}

.oc-composer__tag .oc-composer__chip-label {
  color: var(--ws-figma-ink, #24252d);
}

.oc-composer__tag .oc-composer__studio-mark {
  opacity: 0.9;
}

/* ---- The tags, attached to a submitted turn ------------------------------
   After sending, the tags stay with the reader's message the way an attachment
   does: this request was made with this framing. They are STATIC here — spans,
   not buttons — because there is no designed secondary interaction, and a tag
   that looked clickable would be promising navigation this row exists to refuse.
   They sit on the reader's side, above their words. */
.oc-turn-tags {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-end;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  max-width: min(78%, 560px);
  margin: 0 0 -8px;
}

.oc-turn-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border: 1px solid var(--ws-figma-border, #d9d1cb);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ws-figma-muted, #7c746f);
  font-family: Geist, Inter, var(--font-sans, system-ui), sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}

.oc-turn-tag__icon {
  display: block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  opacity: 0.85;
}

/* ---- Responsive ---------------------------------------------------------
   The row is secondary to the composer at every width: it tightens, it wraps,
   and it never grows a control large enough to compete with the send button. */
@media (max-width: 900px) {
  .oc-task-tags { gap: 10px; row-gap: 8px; }
}

@media (max-width: 480px) {
  .oc-task-tags { gap: 8px; row-gap: 6px; }
  .oc-task-tag { min-width: 0; padding: 3px 6px; }
  .oc-task-tag[aria-pressed="true"] { padding: 2px 5px; }
  .oc-task-tag__label { font-size: 11px; }
  .oc-task-tag__icon { width: 16px; height: 16px; }
  .oc-turn-tags { max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-task-tag { transition: none; }
}