/* Support & Communication Center — small addendum on top of
   role-portals-v73.css's existing rp-* design system. Adds only the
   status-color modifiers this feature's own status vocabulary needs
   (new/in_review/needs_info/in_progress/answered/closed) plus a thread
   layout for the conversation view. Reuses the same --rp-* tokens
   already defined there - no new palette. */
.rp-status--answered,.rp-status--closed{background:#dff3e8;color:#096541}
.rp-status--needs_info{background:var(--rp-amber-bg);color:var(--rp-amber)}
.rp-status--in_review,.rp-status--in_progress{background:#e7eef7;color:#1c4f8a}

.sc-thread{display:grid;gap:12px;margin:16px 0}
.sc-msg{padding:14px;border-radius:16px;background:#f3f7f5;max-width:88%}
.sc-msg--staff{background:var(--rp-mint);justify-self:start}
.sc-msg--user{background:#eef1ee;justify-self:end}
.sc-msg small{display:block;color:var(--rp-muted);margin-bottom:4px;font-size:10px}
.sc-msg p{margin:0;white-space:pre-wrap;line-height:1.8}
.sc-note{border:1px dashed #c9b26b;background:#fdf7e6}
.sc-note small{color:#8a6d1f}

.sc-category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
@media(max-width:600px){.sc-category-grid{grid-template-columns:1fr}}
.sc-category-card{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--rp-line);border-radius:16px;background:#fff;text-decoration:none;color:var(--rp-ink);font-weight:800;font-size:13px}
.sc-category-card:hover{border-color:var(--rp-green-2)}

.sc-contact-list{display:grid;gap:10px;margin-top:14px}
.sc-contact-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--rp-line);border-radius:14px;background:#fff}
.sc-contact-item a{color:var(--rp-green);font-weight:800;text-decoration:none}

.sc-escalation-banner{margin-top:10px}

.sc-attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sc-attachment{display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;text-decoration:none;background:#fff;border:1px solid var(--rp-line)}
.sc-attachment--image{width:88px;height:88px}
.sc-attachment--image img{width:100%;height:100%;object-fit:cover;display:block}
.sc-attachment--video,.sc-attachment--pdf{padding:10px 14px;font-size:12px;font-weight:800;color:var(--rp-green)}

.sc-metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:600px){.sc-metrics-grid{grid-template-columns:repeat(2,1fr)}}
.sc-metric{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border:1px solid var(--rp-line);border-radius:14px;background:#fff}
.sc-metric strong{font-size:20px}
.sc-metric span{font-size:11px;color:var(--rp-muted)}