:root {
  --app-primary: #4f46e5;
  --app-primary-dark: #3730a3;
  --app-sidebar: #111827;
  --app-muted: #6b7280;
  --app-bg: #f5f7fb;
}

body {
  background:
    radial-gradient(circle at 92% -12%, rgba(129, 140, 248, .14), transparent 26rem),
    var(--app-bg);
  color: #1f2937;
  min-height: 100vh;
}

.app-shell { min-height: 100vh; }

.sidebar {
  background: linear-gradient(180deg, #111827 0%, #172554 100%);
  color: #d1d5db;
  width: 252px;
  min-height: 100vh;
  box-shadow: 12px 0 32px rgba(15, 23, 42, .08);
}

.brand-mark {
  align-items: center;
  background: linear-gradient(135deg, #818cf8, #4f46e5);
  border-radius: .7rem;
  color: #fff;
  display: inline-flex;
  font-size: 1.1rem;
  height: 2.4rem;
  justify-content: center;
  width: 2.4rem;
}

.sidebar .nav-link {
  border-radius: .6rem;
  color: #cbd5e1;
  font-weight: 500;
  margin: .2rem .75rem;
  padding: .72rem .85rem;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background: rgba(129, 140, 248, .18);
  color: #fff;
}
.sidebar .nav-link:hover { transform: translateX(3px); }

.sidebar .nav-link i { width: 1.35rem; }

.page-content { min-width: 0; }
.topbar { backdrop-filter: blur(14px); background: rgba(255,255,255,.84); border-bottom: 1px solid rgba(226,232,240,.9); }

.metric-card,
.panel-card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .055);
  overflow: hidden;
}
.metric-card { transition: transform .2s ease, box-shadow .2s ease; }
.metric-card:hover { box-shadow: 0 14px 32px rgba(79,70,229,.12); transform: translateY(-3px); }

.metric-icon {
  align-items: center;
  background: #eef2ff;
  border-radius: .75rem;
  color: var(--app-primary);
  display: inline-flex;
  font-size: 1.25rem;
  height: 2.8rem;
  justify-content: center;
  width: 2.8rem;
}
.metric-icon.green { background: #ecfdf3; color: #059669; }
.metric-icon.orange { background: #fff7ed; color: #ea580c; }
.metric-icon.pink { background: #fdf2f8; color: #db2777; }

.status-dot {
  border-radius: 50%;
  display: inline-block;
  height: .55rem;
  margin-right: .35rem;
  width: .55rem;
}
.status-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.status-dot.off { background: #94a3b8; }

.conversation-list { max-height: calc(100vh - 13rem); overflow-y: auto; }
.conversation-item { border-left: 3px solid transparent; color: inherit; display: block; text-decoration: none; }
.conversation-item { transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.conversation-item:hover, .conversation-item.active { background: #eef2ff; border-left-color: var(--app-primary); color: inherit; }
.conversation-item:hover { transform: translateX(2px); }

.thread {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  min-height: 430px;
  max-height: calc(100vh - 19rem);
  overflow-y: auto;
}
.message-row { display: flex; margin-bottom: 1rem; }
.message-row.outbound { justify-content: flex-end; }
.message-bubble { border-radius: 1rem; max-width: min(78%, 35rem); padding: .7rem .85rem; white-space: pre-wrap; }
.message-row.inbound .message-bubble { background: #fff; border-bottom-left-radius: .2rem; box-shadow: 0 1px 5px rgba(15,23,42,.08); }
.message-row.outbound .message-bubble { background: var(--app-primary); border-bottom-right-radius: .2rem; color: #fff; }
.message-meta { font-size: .72rem; opacity: .72; margin-top: .35rem; }

.empty-state { color: var(--app-muted); padding: 3rem 1rem; text-align: center; }
.avatar { align-items: center; background: #e0e7ff; border-radius: 50%; color: #4338ca; display: inline-flex; flex: 0 0 auto; font-size: .85rem; font-weight: 700; height: 2.35rem; justify-content: center; width: 2.35rem; }

.table > :not(caption) > * > * { vertical-align: middle; }
.required::after { color: #dc3545; content: ' *'; }

.page-hero { align-items: end; display: flex; gap: 1rem; justify-content: space-between; }
.section-kicker { color: var(--app-primary); font-size: .7rem; font-weight: 800; letter-spacing: .11em; }
.sidebar-help { background: rgba(255,255,255,.07); line-height: 1.45; }
.sidebar-mobile { background: var(--app-sidebar); color: #fff; }
.sidebar-mobile .nav-link { margin: .2rem .75rem; }
.channel-status { color: #475569; }
.search-control { max-width: 31rem; }
.search-control .input-group-text { border-right: 0; color: #94a3b8; }
.search-control .form-control { border-left: 0; }
.search-control .form-control:focus { box-shadow: none; }
.type-filter { max-width: 13rem; }
.people-table thead th { background: #f8fafc; color: #64748b; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.people-table tbody td { padding-bottom: 1rem; padding-top: 1rem; }
.type-chip { border-radius: 999px; display: inline-flex; font-size: .78rem; font-weight: 650; padding: .3rem .65rem; }
.type-purple { background: #ede9fe; color: #6d28d9; }
.type-blue { background: #dbeafe; color: #1d4ed8; }
.type-green { background: #dcfce7; color: #15803d; }
.type-orange { background: #ffedd5; color: #c2410c; }
.type-pink { background: #fce7f3; color: #be185d; }
.status-label { font-size: .84rem; font-weight: 600; }
.status-label.active { color: #059669; }
.status-label.inactive { color: #94a3b8; }
.empty-table { color: var(--app-muted); padding: 3.5rem !important; text-align: center; }
.type-list-item { align-items: center; background: #f8fafc; border-radius: .65rem; display: flex; justify-content: space-between; padding: .65rem .75rem; }
.form-control:focus, .form-select:focus { border-color: #a5b4fc; box-shadow: 0 0 0 .25rem rgba(79,70,229,.12); }
.btn { transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, #5b52e9, #4338ca); border-color: var(--app-primary); box-shadow: 0 4px 12px rgba(79,70,229,.18); }
.btn-primary:hover, .btn-primary:focus { background: var(--app-primary-dark); border-color: var(--app-primary-dark); }
.login-card { max-width: 28rem; }
.settings-hero { background: linear-gradient(135deg, rgba(79,70,229,.1), rgba(129,140,248,.05)); border: 1px solid rgba(129,140,248,.18); border-radius: 1rem; }
.profile-avatar { align-items: center; background: linear-gradient(135deg, #818cf8, #4f46e5); border-radius: 1rem; color: #fff; display: inline-flex; font-size: 1.5rem; font-weight: 800; height: 4.25rem; justify-content: center; width: 4.25rem; }
.settings-card-title { align-items: center; display: flex; gap: .6rem; }
.settings-card-title i { align-items: center; background: #eef2ff; border-radius: .55rem; color: var(--app-primary); display: inline-flex; height: 2rem; justify-content: center; width: 2rem; }
.config-status-row { align-items: center; background: rgba(248,250,252,.8); border: 1px solid #eef2f7; border-radius: .75rem; display: flex; justify-content: space-between; padding: .78rem .9rem; }
.form-control, .form-select { border-color: #dbe2ea; }

@media (max-width: 991.98px) {
  .sidebar { min-height: auto; width: 100%; }
  .sidebar .nav { display: flex; flex-wrap: wrap; }
  .sidebar .nav-link { margin: .15rem; }
  .conversation-list { max-height: 21rem; }
  .thread { max-height: 32rem; }
}

@media (max-width: 575.98px) {
  .page-hero { align-items: stretch; flex-direction: column; }
  .page-hero .btn { width: 100%; }
  .type-filter { max-width: none; }
  .people-table th:nth-child(2), .people-table td:nth-child(2) { display: none; }
}