.sb-wrap { display: grid; gap: 10px; max-width: 800px; }
.sb-card { padding: 0; overflow: hidden; }
.sb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.sb-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-weight: 800; }
.sb-av--admin { background: var(--sun); color: var(--ink); }
.sb-name { display: grid; margin-right: auto; }
.sb-name b { font-size: 1.0625rem; }
.sb-tabs { display: flex; gap: 6px; }
.sb-tabs .d-btn { white-space: normal; }
.sb-thread { display: grid; gap: 12px; align-content: start; height: 440px; overflow-y: auto; padding: 16px; background: var(--paper); }
.sb-m { display: grid; gap: 4px; max-width: 82%; }
.sb-m--me { justify-self: end; justify-items: end; }
.sb-b { padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--paper-2); line-height: 1.55; overflow-wrap: anywhere; }
.sb-m--me .sb-b { border-radius: 16px 4px 16px 16px; background: var(--ink); color: var(--on-ink); }
.sb-m--admin .sb-b { background: var(--sun-soft); }
.sb-meta { color: var(--ink-2); font-size: var(--t-s); }
.sb-sys { justify-self: center; padding: 4px 12px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: var(--t-s); text-align: center; }
.sb-foot { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.sb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-chip { min-height: 44px; padding: 6px 14px; border: 1px solid var(--control); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .9375rem; cursor: pointer; text-align: left; }
.sb-chip:hover { background: var(--paper-2); }
.sb-chip:disabled { color: var(--ink-2); cursor: not-allowed; }
.sb-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sb-admin { display: grid; gap: 12px; padding: 16px; background: var(--paper); }
.sb-ticket { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.sb-ticket--open { border-color: var(--ink); }
.sb-q { font-weight: 700; overflow-wrap: anywhere; }
.sb-h { font-size: var(--t-s); font-weight: 750; color: var(--ink-2); }
@media (max-width: 480px) { .sb-m { max-width: 94%; } .sb-thread { height: 400px; } }
.sb-m .d-badge { justify-self: start; } .sb-m--me .d-badge { justify-self: end; }