body { font-size: 14px; }
.chat-wrap { height: 92vh; }
.chat-body { height: 66vh; overflow: auto; background: #fafafa; }
.card-header > div:first-child { flex: 1; min-width: 0; }
#chatTitle { display: block; white-space: pre-line; word-break: break-word; line-height: 1.3; }
.msg-row { display: flex; align-items: flex-end; gap: 6px; margin: 12px 16px; }
.msg-row.outgoing { justify-content: flex-end; }
.msg-row.incoming { justify-content: flex-start; }
.msg-row.compact { margin-top: 4px; }
.msg { max-width: 75%; padding: 10px 12px; border-radius: 10px; word-break: break-word; white-space: pre-wrap; }
.msg.outgoing { background: #E6F7FF; color: #000; }
.msg.incoming { background: #F5F5F5; color: #333; }
.meta { font-size: 12px; color: #999; line-height: 1; white-space: nowrap; }
.read-status { margin-left: 4px; font-weight: 500; }
.read-status.unread { color: #8c8c8c; }
.read-status.read { color: #18a058; }
.session-read-status { writing-mode: horizontal-tb; text-orientation: mixed; white-space: nowrap; display: inline-block; }
.meta-hidden { display: none; }
.drawer { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); display: none; z-index: 2050; }
.drawer.show { display: block; }
.drawer-content { position: absolute; left: 0; right: 0; bottom: 0; height: 88vh; background: #fff; border-radius: 14px 14px 0 0; overflow: auto; }
.modal-backdrop.show { z-index: 3990; }
.modal { z-index: 4000; }
.proj-item { border: 1px solid #eee; border-radius: 8px; padding: 8px; margin-bottom: 8px; cursor: pointer; }
.unread-dot { width: 8px; height: 8px; background: #dc3545; border-radius: 50%; display: inline-block; margin-left: 6px; }
.pay-channel-btn { min-width: 88px; }
@media (max-width: 576px) {
  .pay-channel-btn { flex: 1 1 30%; min-width: 0; }
}