/* On Easy — Progress card styles (pairs with progress.js).
   One bubble-shaped card per job in the chat thread. Tap targets are at least 44px tall,
   same rule as the rest of app/os. Colors come from the shared tokens in member.css / os.css;
   the three status accents (ok / needs-attention / failed) are plain literals here, same
   pattern as connected-apps.css — no new custom properties declared. */

.oep-card {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 0.55rem;
  width: 100%;
  max-width: 22rem;
  margin: 0.35rem 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--rule, #f4f4f714);
  border-radius: var(--radius, 1.1rem);
  background: var(--panel, #131319);
  color: var(--ink, #f4f4f7);
}

.oep-narration { display: flex; flex-direction: column; gap: 0.2rem; }
.oep-line { margin: 0; font-size: 0.85rem; color: var(--dim, #9a9aa8); }
.oep-line:last-child { color: var(--ink, #f4f4f7); }

.oep-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.oep-next { margin: 0; }
.oep-next .oep-step { display: inline-block; }

.oep-step {
  font-size: 0.72rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: var(--panel-2, #1a1a22);
  border: 1px solid var(--rule, #f4f4f714);
  color: var(--dim, #9a9aa8);
  white-space: nowrap;
}

.oep-step--done { color: #8ee0c0; border-color: #3ddc9744; }
.oep-step--current { color: var(--on-accent, #f6f4ff); background: var(--accent, #8b7cff); border-color: var(--accent, #8b7cff); }
.oep-step--current.oep-step--failed { background: #3a1f22; border-color: #e2596644; color: #f0a8b0; }

.oep-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.oep-btn {
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: var(--radius, 1.1rem);
  border: 1px solid var(--rule, #f4f4f714);
  background: var(--panel-2, #1a1a22);
  color: var(--ink, #f4f4f7);
  font: inherit;
  cursor: pointer;
}

.oep-btn--primary { background: var(--accent, #8b7cff); border-color: var(--accent, #8b7cff); color: var(--on-accent, #f6f4ff); }
.oep-btn--ghost { background: transparent; }
.oep-btn--text { background: transparent; border-color: transparent; color: var(--dim, #9a9aa8); }

.oep-sent { margin: 0; font-size: 0.85rem; color: var(--dim, #9a9aa8); }

.oep-handoff { display: flex; flex-direction: column; gap: 0.6rem; }

.oep-handoff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.oep-handoff-head strong { font-size: 0.95rem; }

.oep-badge {
  font-size: 0.7rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: #2a231a;
  border: 1px solid #e8c48a44;
  color: #f0e0c4;
  white-space: nowrap;
}

.oep-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--dim, #9a9aa8); }

.oep-field input {
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid var(--rule, #f4f4f714);
  background: var(--panel-2, #1a1a22);
  color: var(--ink, #f4f4f7);
  font: inherit;
}

.oep-shot { display: flex; flex-direction: column; gap: 0.4rem; }
.oep-shot img { width: 100%; border-radius: 0.6rem; border: 1px solid var(--rule, #f4f4f714); display: block; }
.oep-hint { margin: 0; font-size: 0.78rem; color: var(--dim, #9a9aa8); }