/* Section "Two" of the platform page, under the four guardrails: one agent, limited (platform-limits.js; Sam, October 24). */
.pl-box { margin: 48px 0 0; }
.pl-label { margin: 0 0 14px; font-size: 16.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turquoise); }
.pl-card { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.5fr); border-radius: 18px; border: 1px solid var(--line-strong); background: var(--panel); overflow: hidden; }
.pl-perms { padding: 20px; border-right: 1px solid var(--line); background: rgba(241, 238, 231, 0.02); }
.pl-who { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; color: var(--ink); }
.pl-who svg { width: 18px; height: 18px; color: var(--turquoise); }
.pl-set { margin: 4px 0 16px; font-size: 13.5px; color: var(--faint); }
.pl-h { margin: 14px 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pl-perms ul { list-style: none; margin: 0; padding: 0; }
.pl-perms li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: 15px; color: var(--ink); }
.pl-perms li svg { flex: none; width: 16px; height: 16px; }
.pl-yes svg { color: var(--turquoise); }
.pl-no { color: var(--muted) !important; }
.pl-no svg { color: #d98b7a; }
.pl-use { animation: pl-use 1.4s ease; }
@keyframes pl-use { 0%, 60% { background: var(--accent-soft); } 100% { background: transparent; } }
.pl-stop { animation: pl-stop 1.8s ease; }
@keyframes pl-stop { 0%, 15%, 45% { background: rgba(217, 139, 122, 0.22); transform: translateX(0); } 8%, 30% { transform: translateX(3px); } 100% { background: transparent; } }

.pl-work { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.pl-mail { padding: 12px 14px; border-radius: 12px; background: rgba(241, 238, 231, 0.05); }
.pl-from { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 4px; font-size: 14px; }
.pl-from b { color: var(--ink); }
.pl-from span { color: var(--faint); }
.pl-msg { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.pl-field { display: block; }
.pl-field > span:first-child { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13.5px; color: var(--muted); }
.pl-tag { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.pl-ai { color: var(--turquoise); background: var(--accent-soft); }
.pl-reply { width: 100%; box-sizing: border-box; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.5; }
.pl-reply:disabled, .pl-amount:disabled { opacity: 0.85; cursor: default; }
.pl-reply:focus, .pl-amount:focus { outline: 2px solid var(--turquoise); outline-offset: 1px; }
.pl-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pl-money { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--raised); font-size: 17px; font-weight: 600; color: var(--ink); }
.pl-amount { width: 76px; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; }
.pl-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-wait { display: inline-flex; visibility: hidden; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--turquoise); }
.pl-wait svg { width: 15px; height: 15px; }
.pl-ready .pl-wait { visibility: visible; animation: pl-pulse 1.6s ease-in-out infinite; }
.pl-all .pl-wait { animation: none; }
@keyframes pl-pulse { 50% { opacity: 0.45; } }
.pl-btn { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--faint); cursor: not-allowed; }
.pl-ready .pl-btn { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); cursor: pointer; }
.pl-ready .pl-btn:hover { background: var(--primary-hover); }
.pl-btn:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.pl-ready .pl-btn.done { background: none; border-color: var(--turquoise); color: var(--turquoise); cursor: default; }
.pl-blocked:not(.pl-ready) .pl-btn { animation: pl-stop 1.2s ease; }
.pl-log { list-style: none; margin: 2px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); min-height: 9.6em; }
.pl-log li { display: grid; grid-template-columns: 42px 66px 1fr; gap: 6px; padding: 3px 0; font-size: 13.5px; line-height: 1.4; animation: pl-in 0.35s ease both; }
.pl-log time { color: var(--faint); font-variant-numeric: tabular-nums; }
.pl-log b { font-weight: 600; color: var(--muted); }
.pl-log span { color: var(--muted); }
.pl-log .pl-log-ai b { color: var(--turquoise); }
.pl-log .pl-log-stop b, .pl-log .pl-log-stop span { color: #d98b7a; animation: none; }
.pl-log .pl-log-you b, .pl-log .pl-log-you span { color: var(--ink); }
@keyframes pl-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pl-again { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--faint); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pl-again:hover { color: var(--ink); }
@media (max-width: 1100px) { .pl-card { grid-template-columns: 1fr; } .pl-perms { border-right: 0; border-bottom: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { .pl-box *, .pl-box { animation: none !important; } }

/* Send reply under the reply, Give refund beside the amount (Sam, October 25). */
.pl-acts-reply { justify-content: flex-end; margin-top: -4px; }
.pl-row { justify-content: flex-start; align-items: flex-end; }
.pl-row .pl-amt { flex: 0 0 auto; width: auto; } .pl-row { gap: 12px; }
.pl-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px; } .pl-row .pl-amt { display: contents; } .pl-row .pl-amt > span:first-child { grid-column: 1 / -1; margin-bottom: 0; } .pl-row .pl-give { justify-self: start; }

/* Phones (640px and below): the whole example fits on about one screen, so the agent's attempts, the buttons a person
   taps and the activity log they add to are visible together. "It can" and "It cannot" sit side by side, the reply box
   is three lines tall, and the log keeps its newest three entries. */
@media (max-width: 640px) {
  .pl-box { margin-top: 36px; }
  .pl-label { margin-bottom: 10px; }
  .pl-perms { padding: 12px 12px 10px; }
  .pl-who { font-size: 15.5px; }
  .pl-set { margin: 2px 0 6px; font-size: 14px; }
  .pl-lists { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content); justify-content: space-between; gap: 0 12px; }
  .pl-h { margin: 6px 0 2px; font-size: 13px; }
  .pl-perms li { align-items: flex-start; gap: 6px; padding: 3px 5px; margin: 0 -5px; font-size: 14px; line-height: 1.3; }
  .pl-perms li svg { width: 14px; height: 14px; margin-top: 2px; }
  .pl-work { padding: 12px; gap: 8px; }
  .pl-mail { padding: 9px 11px; }
  .pl-from { margin-bottom: 2px; }
  .pl-msg { font-size: 14.5px; line-height: 1.4; }
  .pl-field > span:first-child { margin-bottom: 4px; font-size: 14px; }
  .pl-reply { height: calc(3 * 1.45em + 16px); padding: 8px 10px; font-size: 14px; line-height: 1.45; resize: none; }
  .pl-acts-reply { margin-top: 0; }
  .pl-btn { min-height: 44px; padding: 8px 16px; font-size: 14.5px; }
  .pl-money { min-height: 44px; box-sizing: border-box; }
  .pl-row { gap: 4px 10px; }
  .pl-log { min-height: 0; padding-top: 6px; }
  .pl-log li { grid-template-columns: 40px 58px minmax(0, 1fr); gap: 4px; padding: 2px 0; font-size: 14px; line-height: 1.35; }
  .pl-log li:nth-last-child(n+4) { display: none; }
  .pl-again { min-height: 32px; font-size: 14px; }
}