/* "Turn into a proposal" (proposal.js, CRM/PROPOSALS.md). Its own classes
   only, on the demo's tokens; the shared screens keep app.css. */

/* Inbox: the reel or link in this chat, above the reply box */
.pr-strip { margin: 0 20px 12px; display: flex; gap: 10px; align-items: center; background: var(--brand-tint); border: 1px solid var(--brand-line); border-radius: 12px; padding: 10px 12px; font-size: 13px; animation: pop-in .25s ease-out; }
.pr-strip > svg { width: 18px; height: 18px; color: var(--brand-text); flex: none; }
.pr-strip .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-strip .grow > span { color: var(--ink); }
.pr-strip .grow > span, .pr-strip em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-strip em { font-style: normal; font-weight: 600; color: var(--brand-text); }
.pr-strip em.pr-bad { color: var(--crit); }
.pr-strip .btn { flex: none; }
.pr-strip .btn svg, .pr-row .btn svg { width: 12px; height: 12px; margin-right: 4px; }
.pr-busy { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--brand-text); white-space: nowrap; }
.pr-busy i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--brand); border-top-color: transparent; animation: spin .7s linear infinite; }

/* The drawer: what it is doing, as it does it */
.pr-av { background: var(--brand-tint); color: var(--brand-text); display: grid; place-items: center; }
.pr-av svg { width: 16px; height: 16px; }
.pr-clock { font: 600 13px var(--mono); color: var(--brand-text); padding: 0 10px; white-space: nowrap; }
.pr-body { display: flex; flex-direction: column; gap: 16px; }
.pr-link { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.pr-link:hover { background: var(--hover); }
.pr-link > svg { width: 18px; height: 18px; flex: none; color: var(--brand-text); margin-top: 1px; }
.pr-link > span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.pr-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pr-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; animation: pop-in .25s ease-out; }
.pr-steps li > i { width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 1px; display: grid; place-items: center; }
.pr-steps li.doing > i { border: 2px solid var(--brand); border-top-color: transparent; animation: spin .7s linear infinite; }
.pr-steps li.done > i { background: var(--good); }
.pr-steps li.done > i::after { content: ''; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.pr-steps li.bad > i { background: var(--crit); }
.pr-steps li.wait > i { background: var(--accent); }
.pr-steps li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-steps li.doing > div > span { font-weight: 600; }
.pr-steps small { font-size: 13px; color: var(--ink); line-height: 1.45; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pr-done { border-radius: 12px; background: var(--good-bg); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; animation: pop-in .3s ease-out; }
.pr-done.bad { background: var(--crit-bg); }
.pr-done h3 { margin: 0; font-size: 16px; display: flex; gap: 6px; align-items: center; }
.pr-done h3 svg { width: 16px; height: 16px; color: var(--brand-text); }
.pr-done dl { margin: 0; }
.pr-done p { margin: 0; font-size: 13px; line-height: 1.45; }
.pr-where { display: flex; flex-direction: column; gap: 8px; background: var(--accent-tint); border-radius: 12px; padding: 12px; font-size: 13px; }
.pr-where p { margin: 0; }
.pr-where-row { display: flex; gap: 8px; }
.pr-where input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--line-2); border-radius: 8px; padding: 0 10px; font: inherit; background: #fff; }

/* Home: proposals drafted overnight */
.pr-night h2 { display: flex; align-items: center; gap: 6px; }
.pr-night h2 svg { width: 16px; height: 16px; color: var(--brand-text); }
.pr-row { align-items: center; }
.pr-row .num { white-space: nowrap; }
.pr-row .grow > div { white-space: normal; }
.pr-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--brand-tint); color: var(--brand-text); display: grid; place-items: center; flex: none; }
.pr-ic svg { width: 17px; height: 17px; }

/* Settings */
.pr-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; margin-bottom: 12px; cursor: pointer; }
.pr-check input { margin-top: 3px; accent-color: var(--brand); flex: none; }

@media (max-width: 720px) {
  .pr-strip, .pr-row { flex-wrap: wrap; }
  .pr-strip .grow, .pr-row .grow { flex-basis: calc(100% - 50px); }
}