/* src/public/css/sales-reps-team-chat.css — the team space (js/sales-reps-team-chat.js), after sales-reps.css.
 *
 * Playground v0.4's teamSpace: two columns (the area's .sr-split). "The team" card: the box to write in at
 * the top, posts newest first, "Show earlier posts" at the bottom. "Who reads it" on the right.
 * Avatars are app-shell's .avatar .av-N; buttons are .btn; colours are the design tokens only.
 * Every rule is under .srt, so nothing outside the team space moves.
 */

.srt .srt-card { overflow: hidden; }
.srt .srt-more[hidden], .srt .srt-empty[hidden], .srt .srt-thread[hidden] { display: none; }
.srt .srt-empty { padding: 40px 20px; }

/* The box to write in, at the top of the card. */
.srt .srt-compose { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.srt .srt-compose .srt-input { width: 100%; min-height: 70px; max-height: 240px; resize: vertical; font-size: 14px; }
.srt .srt-compose-row { display: flex; justify-content: flex-end; }

/* A post: the face, then the name and when, the words, and Reply or Delete. */
.srt .srt-msg { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; min-width: 0; border-top: 1px solid var(--border-soft); }
.srt .srt-list > .srt-msg:first-child { border-top: 0; }
.srt .srt-av { flex: 0 0 34px; width: 34px; height: 34px; overflow: hidden; }
.srt .srt-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.srt .srt-main { flex: 1 1 auto; min-width: 0; }
.srt .srt-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.srt .srt-name { font-size: 14px; font-weight: 700; color: var(--text); }
.srt .srt-meta .badge { align-self: center; }
.srt .srt-when { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.srt .srt-text { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.srt .srt-text a { color: var(--accent-deep); text-decoration: underline; }
.srt .srt-win { background: color-mix(in srgb, var(--good-soft) 55%, var(--surface)); }
.srt .srt-win .srt-name { font-size: 11.5px; font-weight: 600; }
.srt .srt-wintext b { font-weight: 700; }

/* Reply and Delete: quiet text buttons under the message, always visible (a phone has no hover). */
.srt .srt-acts { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.srt .srt-act, .srt .srt-link { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-deep); text-decoration: underline; cursor: pointer; min-height: 24px; }
.srt .srt-act:hover, .srt .srt-act:focus-visible, .srt .srt-link:hover, .srt .srt-link:focus-visible { color: var(--accent); }
.srt .srt-act.srt-del { color: var(--text-3); }
.srt .srt-act.srt-del:hover, .srt .srt-act.srt-del:focus-visible { color: var(--danger); }

/* A thread: under its message, indented by a rule. */
.srt .srt-thread { margin-top: 8px; border-left: 2px solid var(--border); padding-left: 12px; }
.srt .srt-reply { padding: 8px 0; border-top: 0; }
.srt .srt-reply .srt-av { flex-basis: 26px; width: 26px; height: 26px; font-size: 10px; }
.srt .srt-loading { font-size: 12.5px; color: var(--text-3); padding: 6px 0; }
.srt .srt-compose-reply { flex-direction: row; align-items: flex-end; padding: 8px 0 2px; border-bottom: 0; }
.srt .srt-compose-reply .srt-input { flex: 1 1 auto; min-width: 0; min-height: 36px; }
.srt .srt-compose-reply .btn { flex: 0 0 auto; min-height: 36px; }

/* Show earlier posts, at the bottom of the card. */
.srt .srt-more { padding: 12px 20px 16px; border-top: 1px solid var(--border-soft); }

/* Who reads it. */
.srt .srt-who { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.srt .srt-who p { margin: 0; }
.srt .srt-muted { color: var(--text-3); }

.srt .srt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@container sr-area (max-width: 560px) {
  .srt .srt-msg { padding: 12px 14px; gap: 10px; }
  .srt .srt-compose { padding: 12px 14px; }
  .srt .srt-more { padding: 10px 14px 14px; }
}