/* Working pill. Phone and desktop share the same show/hide mechanic:
   hidden while idle, visible above the composer while a reply or job is in flight.
   Layout: phone (<900px) uses the full compose width.
   Desktop (>=900px) caps the pill at 34rem, the same column as in-chat cards.
   Reduced motion keeps the mark visible and skips the spin. */
.oe-working {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  max-width: 100%;
  margin: 0 0.15rem 0.4rem;
  padding: 0.38rem 0.8rem 0.38rem 0.55rem;
  border-radius: 999px;
  background: var(--panel-2, #1c1c24);
  border: 1px solid rgba(244, 244, 247, 0.16);
  color: var(--dim, #b9b9c6);
  font-size: 0.88rem;
  line-height: 1.2;
}
.oe-working[hidden] { display: none !important; }
.oe-working-mark {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  flex: none;
  box-sizing: border-box;
}
.oe-working-text { display: flex; flex-direction: column; min-width: 0; }
.oe-working-label { color: var(--ink, #f4f4f7); font-weight: 600; }
.oe-working-detail {
  color: var(--dim, #b9b9c6);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
}
.oe-working-detail[hidden] { display: none !important; }
.oe-task-controls { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.oe-task-controls[hidden] { display: none !important; }
.oe-task-controls button { min-height: 36px; border: 1px solid var(--line, #34343d); border-radius: 999px; background: transparent; color: var(--ink, #f4f4f7); padding: 0 0.75rem; font: inherit; cursor: pointer; }
.oe-task-controls button:hover { background: color-mix(in srgb, var(--ink, #fff) 8%, transparent); }
.oe-working[data-phase="paused"] .oe-working-mark,
.oe-working[data-phase="attention"] .oe-working-mark { animation: none; border-right-color: currentColor; opacity: 0.7; }
@media (min-width: 900px) {
  .oe-working { max-width: 34rem; }
  .oe-working-detail { max-width: 28rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .oe-working-mark { animation: oe-working-spin 0.9s linear infinite; }
  .oe-working[data-phase="working"] .oe-working-label,
  .oe-working[data-phase="working"] .oe-working-detail {
    color: transparent;
    background: linear-gradient(100deg, #8f8f99 10%, #f4f4f7 42%, #8f8f99 74%);
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: oe-working-sheen 1.65s ease-in-out infinite;
  }
  @keyframes oe-working-spin { to { transform: rotate(360deg); } }
  @keyframes oe-working-sheen {
    0% { background-position: 110% 0; }
    100% { background-position: -110% 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .oe-working-mark { animation: none; border-right-color: currentColor; opacity: 0.85; }
}