/* The website chat's block in the boss's Inbox (public/js/chat-ui.js). */
.sc-box { background: var(--white); border-radius: 10px; margin-bottom: 8px; }
.sc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.sc-head small { margin-left: auto; color: var(--ink-3); }
.sc-count { color: var(--ink-2); font-size: 14px; }
.sc-box[data-open="no"] .sc-body { display: none; }
.sc-body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.sc-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-tabs .chip.on { background: var(--ink); color: var(--sun); }
.sc-view { display: flex; flex-direction: column; gap: 8px; }
.sc-empty { margin: 4px 0; color: var(--ink-3); font-size: 14px; }
.sc-q, .sc-project { background: var(--paper-2); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.sc-q header small { color: var(--ink-3); }
.sc-project header { display: flex; align-items: center; gap: 8px; }
.sc-project header b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sc-switch { display: flex; align-items: center; gap: 4px; font-size: 14px; white-space: nowrap; }
.sc-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.sc-email { margin: 0; color: var(--ink-3); font-size: 13px; overflow-wrap: anywhere; }
.sc-replybox { display: flex; gap: 6px; align-items: flex-end; }
.sc-replybox textarea, .sc-faqrow input, .sc-faqrow textarea { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 7px 8px; border: 1px solid var(--line, #d5cfbf); border-radius: 8px; box-sizing: border-box; width: 100%; }
.sc-row { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; text-align: left; width: 100%; padding: 8px 10px; background: var(--paper-2); border: 0; border-radius: 8px; font: inherit; cursor: pointer; }
.sc-row small { color: var(--ink-3); }
.sc-row span { flex-basis: 100%; color: var(--ink-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-msg { background: var(--paper-2); border-radius: 8px; padding: 7px 10px; display: flex; flex-direction: column; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-msg small { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.sc-msg.boss { background: #f3f7f1; }
.sc-faq { display: flex; flex-direction: column; gap: 6px; }
.sc-faqrow { display: flex; flex-direction: column; gap: 4px; }
.sc-faqrow .btn { align-self: flex-start; }