:root {
  --xp-red: #d6112b;
  --xp-red-dark: #a50c20;
  --xp-red-light: #fdecee;
  --xp-ink: #1f2430;
  --xp-muted: #6b7280;
  --xp-bg: #f5f6f8;
  --xp-border: #e6e8ec;
}

body {
  background: var(--xp-bg);
  color: var(--xp-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--xp-red); }
a:hover { color: var(--xp-red-dark); }

/* Sidebar */
.xp-sidebar {
  width: 240px;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--xp-red) 0%, var(--xp-red-dark) 100%);
  color: #fff;
  position: fixed;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
}
.xp-sidebar .brand {
  font-weight: 800;
  font-size: 1.15rem;
  padding: 1.25rem 1.25rem 1rem;
  letter-spacing: .3px;
}
.xp-sidebar .brand small { display:block; font-weight:400; opacity:.8; font-size:.72rem; }
.xp-sidebar a.nav-link {
  color: rgba(255,255,255,.85);
  padding: .7rem 1.25rem;
  border-left: 3px solid transparent;
  display: flex; align-items: center; gap: .6rem;
  font-size: .95rem;
}
.xp-sidebar a.nav-link:hover { background: rgba(0,0,0,.12); color:#fff; }
.xp-sidebar a.nav-link.active {
  background: rgba(0,0,0,.18);
  border-left-color: #fff;
  color:#fff; font-weight:600;
}
.xp-sidebar .nav-foot { margin-top:auto; padding:1rem 1.25rem; font-size:.8rem; opacity:.8; }

/* Main area */
.xp-main { margin-left: 240px; padding: 1.5rem 2rem; }
.xp-topbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 1.5rem;
}
.xp-topbar h1 { font-size: 1.5rem; font-weight: 700; margin:0; }

/* Cards & stats */
.card { border: 1px solid var(--xp-border); border-radius: .7rem; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.stat-card { border-left: 4px solid var(--xp-red); }
.stat-card .num { font-size: 1.9rem; font-weight: 800; line-height:1; }
.stat-card .lbl { color: var(--xp-muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.4px; }

.btn-primary { background: var(--xp-red); border-color: var(--xp-red); }
.btn-primary:hover { background: var(--xp-red-dark); border-color: var(--xp-red-dark); }
.btn-outline-primary { color: var(--xp-red); border-color: var(--xp-red); }
.btn-outline-primary:hover { background: var(--xp-red); border-color: var(--xp-red); }
.text-red { color: var(--xp-red) !important; }

.table thead th { font-size:.78rem; text-transform:uppercase; letter-spacing:.4px; color:var(--xp-muted); }

/* Login */
.xp-login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--xp-red) 0%, var(--xp-red-dark) 100%);
}
.xp-login-card { width: 100%; max-width: 380px; }

/* Chat view */
.chat-list { max-height: 70vh; overflow-y:auto; }
.chat-thread { max-height: 62vh; overflow-y:auto; background:#fff; border-radius:.7rem; padding:1rem; }
.bubble { max-width: 78%; padding:.5rem .8rem; border-radius: 1rem; margin-bottom:.5rem; font-size:.92rem; }
.bubble.in  { background:#fff; border:1px solid var(--xp-border); }
.bubble.out { background: var(--xp-red-light); border:1px solid #f6c9cf; margin-left:auto; }
.bubble .time { display:block; font-size:.68rem; color:var(--xp-muted); margin-top:.2rem; }

.badge-stage { font-weight:600; }