:root {
  --rs-primary: #4338CA;
  --rs-primary-soft: #EEEDFB;
  --rs-accent: #EA580C;
  --rs-border: #E3E5EE;
  --rs-bg: #F4F5FA;
  --rs-text-secondary: #6B7080;
}

body { background: var(--rs-bg); font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; }

.rs-app { display: flex; min-height: 100vh; }

.rs-logo-badge {
  width: 30px; height: 30px; border-radius: 8px; background: var(--rs-primary);
  color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

.rs-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--rs-primary-soft);
  color: var(--rs-primary); font-weight: 600; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}

.rs-sidebar {
  width: 230px; background: #fff; border-right: 1px solid var(--rs-border);
}
@media (min-width: 992px) {
  .rs-sidebar { position: sticky; top: 0; height: 100vh; }
}

.rs-nav-link {
  display: flex; align-items: center; padding: 9px 12px; border-radius: 8px;
  color: var(--rs-text-secondary); font-size: 14px; text-decoration: none;
}
.rs-nav-link:hover { background: #F8F8FC; color: var(--rs-primary); }
.rs-nav-link.active { background: var(--rs-primary-soft); color: var(--rs-primary); font-weight: 500; }

.rs-main { flex: 1; min-width: 0; }

.rs-mobile-toggle {
  position: fixed; top: 12px; left: 12px; z-index: 1040; border-radius: 8px;
}
@media (min-width: 992px) { .rs-mobile-toggle { display: none !important; } }

.rs-card { background: #fff; border: 1px solid var(--rs-border); border-radius: 12px; }

.rs-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.rs-ticket-row { border-bottom: 1px solid var(--rs-border); padding: 12px 14px; cursor: pointer; }
.rs-ticket-row:hover { background: #FAFAFD; }
.rs-ticket-row.active { background: var(--rs-primary-soft); border-left: 3px solid var(--rs-primary); }

.rs-msg-bubble { max-width: 72%; border-radius: 11px; padding: 10px 13px; font-size: 14px; }
.rs-msg-agent { background: var(--rs-primary); color: #fff; margin-left: auto; }
.rs-msg-contact { background: #fff; border: 1px solid var(--rs-border); }
.rs-msg-internal { background: #FCF1E0; border: 1px dashed #B45309; margin-left: auto; }

@media (max-width: 767px) {
  .rs-detail-col, .rs-list-col { width: 100% !important; }
}