/* Shared plan display pieces: status pills, faces and chat links used by
 * Work and Track. The retired Plan drawer has no styles or markup. */

.plan-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sv-surface-sunken);
  color: var(--sv-ink-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.plan-pill .icon { width: 12px; height: 12px; vertical-align: 0; }
.plan-pill[data-tone="good"] { background: color-mix(in srgb, var(--ws-working) 14%, transparent); color: var(--ws-working-ink); }
.plan-pill[data-tone="bad"] { background: color-mix(in srgb, var(--sv-danger) 12%, transparent); color: var(--sv-danger); }
.plan-pill[data-tone="review"] { background: color-mix(in srgb, var(--sv-attention) 14%, transparent); color: var(--sv-attention); }
.plan-pill:is([data-tone="done"], [data-tone="off"]) { background: none; box-shadow: inset 0 0 0 1px var(--sv-hairline); color: var(--sv-ink-tertiary); }

.plan-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sv-hairline-strong); }
[data-tone="good"] > .plan-dot { background: var(--ws-working); }
[data-tone="bad"] > .plan-dot { background: var(--sv-danger); }
[data-tone="review"] > .plan-dot { background: var(--sv-attention); }
[data-tone="off"] > .plan-dot { background: none; box-shadow: inset 0 0 0 1px var(--sv-hairline-strong); }

.plan-face { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--sv-ink-secondary); }
.plan-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in srgb, hsl(var(--hue, 0) 55% 50%) 22%, var(--sv-surface-raised));
  color: var(--sv-ink);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}
.plan-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.plan-chats { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.plan-chat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 18rem;
  min-height: 26px;
  padding: 2px 8px;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 999px;
  background: var(--sv-surface);
  color: var(--sv-ink-secondary);
  font-size: var(--ui-meta);
  text-decoration: none;
  white-space: nowrap;
}
.plan-chat > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plan-chat .icon { width: 12px; height: 12px; vertical-align: 0; }
.plan-chat:hover { background: var(--ws-hover); color: var(--sv-ink); }
.plan-chat.suggested { border-style: dashed; border-color: var(--sv-attention); }
.plan-chat-tag { flex: none; color: var(--sv-attention); }