/* Agents page: the concierge demo (an ivory phone on the dark table) and its ledger. */
.demo { margin: 0; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 1.4rem; align-items: stretch; }
.phone { background: var(--paper); color: var(--ink); border-radius: 18px; padding: 1rem; display: flex; flex-direction: column; gap: .8rem; min-height: 23rem; box-shadow: var(--object-shadow); }
.phone-top { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.phone-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--lacquer); display: grid; place-items: center; }
.phone-avatar svg { width: 1.05rem; height: .65rem; fill: var(--brass); }
.phone-name { font-weight: 600; font-size: .92rem; line-height: 1.2; }
.phone-name small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .76rem; }
.phone-time { font-size: .74rem; color: var(--ink-soft); }
.msgs { display: flex; flex-direction: column; gap: .55rem; flex: 1; font-size: .9rem; }
.caret { display: none; width: 1px; height: 1em; background: currentColor; margin-left: 2px; vertical-align: -2px; }
.is-typing .caret { display: inline-block; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.phone-ledger { list-style: none; margin: 0; padding: .6rem 0 0; border-top: 1px solid var(--line); display: flex; gap: .4rem; flex-wrap: wrap; font-size: .76rem; color: var(--ink-soft); }
.phone-ledger .ledger-row { padding: .2rem .5rem; border-radius: 99px; background: var(--paper-2); opacity: .45; transition: opacity .3s; }
.phone-ledger .ledger-row.is-done { opacity: 1; }
.phone-ledger .tool { font-weight: 600; margin-right: .25rem; color: var(--ink); }

.ledger { border-top: 1px solid var(--line-dark); padding-top: 1rem; display: flex; flex-direction: column; }
.ledger > .label { color: var(--ivory-faint); margin-bottom: .4rem; }
.ledger-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.ledger-list .ledger-row { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--line-dark); color: var(--ivory-faint); transition: color .4s; font-size: .95rem; }
.ledger-list .ledger-row.is-done { color: var(--ivory); }
.ledger-list .tool { font: var(--label-font); letter-spacing: var(--label-track); line-height: 1.9; text-transform: uppercase; color: var(--brass); }
.ledger-list .ledger-row--quiet { grid-template-columns: 1fr; font-style: italic; font-family: var(--serif); font-size: 1.1rem; color: var(--ivory-soft); border-bottom: 0; }
.ledger-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .8rem; font-size: .8rem; color: var(--ivory-faint); }

.float-cta { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 10; box-shadow: 0 10px 30px -10px rgba(0,0,0,.7); }

@media (max-width: 560px) {
  .demo { grid-template-columns: 1fr; }
  .ledger { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .is-typing .caret { animation: none; }
  .phone-ledger .ledger-row, .ledger-list .ledger-row { transition: none; }
}