/* The calm redesign (Oct 16, 2026): Replies (replies/replies.js). Loaded after styles.css, so a rule here wins over the same rule there.
   Docs/Hub design standard.md has the rules (Motion; Calm and focus). Colours only from the tokens in styles.css. */

/* The title and its "?" are the top of the list column: a phone's open conversation (which hides the list) then has the
   whole screen, and a computer's title sits over the list, not over both panes. */
.rp-list > .st { margin-bottom: 2px; }
.rp-list > .st .help-q { margin-left: auto; }
@media screen and (min-width: 900px) { .rp-list > .st { margin-top: 4px; } }

/* The one big thing: how many are waiting for an answer, the oldest first. */
.rp-list > .hero { margin-bottom: 2px; }
.rp-list .hero-v .hero-n { font-variant-numeric: tabular-nums; }
.rp-list .hero-l { font-size: .9375rem; overflow-wrap: anywhere; }
.rp-list .hero-a .btn { min-height: 44px; }
/* One compact band: the number and "unanswered" (with how many are urgent under it) on the left, Open oldest on the right. */
.rp-list > .rp-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 0; padding: 12px 14px 12px 18px; }
.rp-list > .rp-hero .hero-v { grid-column: 1; font-size: 2.25rem; }
.rp-list > .rp-hero .hero-u { font-size: 1.125rem; }
.rp-list > .rp-hero .hero-l { grid-column: 1; font-size: .875rem; line-height: 1.2; }
.rp-list > .rp-hero .hero-a { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.rp-list > .rp-hero .hero-l:empty { display: none; }
body.big-text .rp-list > .rp-hero .hero-v { font-size: 2.5rem; }
@media (max-width: 360px) { .rp-list > .rp-hero { grid-template-columns: 1fr; } .rp-list > .rp-hero .hero-a { grid-column: 1; grid-row: auto; margin-top: 8px; } }
.rp-list > .hero-calm { padding: 12px 16px; }

/* "Updated …" only draws attention when the list is old; otherwise it is a small line at the foot. */
.rp-list .rp-under { margin-top: 0; }
.rp-list .rp-foot { padding: 14px 8px 0; }
.rp-list .rp-foot .fresh { font-size: .75rem; }

/* Paste a message: a quiet pill, not a second hero. */
.rp-tools .btn.small { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.rp-tools .btn.small:hover { background: var(--rt-hover); }
.rp-paste-ready { position: relative; padding-left: 4px; }

/* No data yet: the shape of the screen (a title, the big number, five rows), in the list's own column. */
.rp-loading .rp-list { gap: 0; }
.rp-loading .skel { padding-block: 4px 0; }

/* Icon buttons in a conversation's bar: Edit and the "…" are 52 px circles like the Send pill beside them. */
.rp-pane .ib.rp-edit, .rp-pane .ib.rp-more-b { flex: none; width: 52px; height: 52px; border: 0; background: var(--surface-2); color: var(--text); }
.rp-pane .ib.rp-edit:hover, .rp-pane .ib.rp-more-b:hover { background: var(--rt-hover); }
.rp-pane .ib.rp-edit .ic, .rp-pane .ib.rp-more-b .ic { width: 20px; height: 20px; }
.rp-call-top .ib { background: var(--surface-2); border: 0; }
.ib:disabled { opacity: .5; cursor: default; pointer-events: none; }

/* A handled conversation's bar, the follow-up box: the words buttons and the drawing buttons line up. */
.rp-follow .rp-btns { align-items: center; }
.rp-follow .rp-btns .rp-claude { gap: 8px; }
.rp-follow .rp-btns .rp-claude .ic { width: 18px; height: 18px; }

/* The skipped (Didn't need a reply) list has no line above it now: its first card sits at the top. */
.rp-skipped { padding-top: 2px; }

/* Rows: a quiet touch. */
.rp-row { transition: opacity var(--t-press) ease-out; }
.rp-row:active { opacity: .62; }

/* The filters stay on one row on a phone: while one of More's choices is shown its chip drops the dot before the count. */
.rp-dd-b[data-more] .seg-dot { display: none; }
@media (max-width: 430px) {
  .rp-segs .chip { padding-inline: 9px; }
  .rp-dd .chip.rp-dd-b { padding-inline: 9px 6px; }
}