/* The bar workstream's web rules: the Claude page's colours, its needs-you
   sheet. Loaded after shell.css; a rule here that repeats a selector from
   styles.css or shell.css wins by order. */

/* ---- working is blue, done stays green ----
   The phone's workingOf (components/work/parts.tsx): a colour of its own, so
   a chat at work never reads as one that is done. The light one on a dark page. */
.pane-layout, .needs-sheet { --pane-working: #1F5FBF; --pane-needs: #9c5a0a; }
[data-theme="dark"] .pane-layout, [data-theme="dark"] .needs-sheet { --pane-working: #6AA5FF; --pane-needs: #e0902a; }
.pane-row-preview.working, .pane-head-sub.working { color: var(--pane-working); }
.work-slot.working { color: var(--pane-working); }
.work-slot.working .spin { border-top-color: var(--pane-working); }
.work-sheet-chat-state.working { color: var(--pane-working); }

/* ---- no "Claude" over the home ----
   The head's top row is empty on the home (the menu names the page); it
   takes no room. A business's page still has its way back there. */
.pane-list-top:empty { display: none; }

/* ---- Needs you, as a sheet over the list (a phone-width window) ----
   The card, the backdrop, the rise and the drag are every sheet's (ui.js
   panel(), polish-comms.css); this is what is inside it. */
.needs-sheet.swap > * { animation: needs-swap 150ms ease-out both; }
.needs-sheet-head { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; }
.needs-sheet-main { flex: 1; min-width: 0; }
.needs-sheet-title { font-size: 16px; font-weight: 700; white-space: normal; overflow-wrap: break-word; }
.needs-sheet-more { margin-top: 1px; font-size: 13px; color: var(--ink-muted); }
.needs-sheet-open {
  flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 2px;
  border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.needs-sheet-open svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 48; fill: none; }
.needs-sheet .pane-prompt-card { margin: 0; }
.needs-sheet-words {
  max-height: 240px; overflow-y: auto; padding: 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); font-size: 14.5px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.needs-sheet-reply { display: flex; margin-top: 10px; }
.needs-sheet-reply .pane-field { flex: 1; }
@keyframes needs-swap { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .needs-sheet.swap > * { animation: none; }
}