:root {
  --ink: #14201b;
  --muted: #68766f;
  --brand: #087f5b;
  --brand-light: #d8f5e8;
  --canvas: #f4f7f5;
}

* { box-sizing: border-box; }
body { min-height: 100vh; color: var(--ink); background: var(--canvas); font-family: Inter, sans-serif; }
.topbar { min-height: 78px; background: linear-gradient(110deg, #063f34, #087f5b); }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #063f34; background: #35e487; font-size: 23px; }
.navbar-brand small { color: rgba(255,255,255,.65); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.refresh-indicator { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 20px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); font-size: 12px; }
.notification-banner .btn { font-size: 12px; font-weight: 600; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #35e487; box-shadow: 0 0 0 5px rgba(53,228,135,.15); }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-top: 10px; }
.hero h1 { margin-bottom: 7px; font-weight: 700; letter-spacing: -.035em; }
.eyebrow { color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.metric-card, .panel-card { border: 0; border-radius: 16px; box-shadow: 0 8px 30px rgba(31,58,47,.06); }
.metric-card .card-body { display: flex; align-items: center; gap: 15px; }
.metric-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; color: var(--brand); background: var(--brand-light); font-size: 18px; }
.metric-value { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -.03em; }
.metric-label { margin: 0; color: var(--muted); font-size: 12px; }
.panel-card .card-header { padding: 20px 22px; border-bottom: 1px solid #edf1ef; }
.metric-card { transition: transform .2s ease, box-shadow .2s ease; }
.metric-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(31,58,47,.12); }
.account-tip { color: var(--muted); font-size: 11px; }
.dashboard-view-tabs { gap: 8px; }
.dashboard-view-tabs .nav-link { border-radius: 12px; color: var(--muted); font-weight: 700; }
.dashboard-view-tabs .nav-link.active { color: #fff; background: var(--brand); }
.consent-badge { display:inline-flex; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:800; text-transform:uppercase; }
.consent-badge.granted { color:#087f5b; background:#dff7ec; }
.consent-badge.revoked { color:#a43d50; background:#fde8ed; }
.nickname-gate { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:24px; background:rgba(6,31,25,.78); backdrop-filter:blur(5px); }
.nickname-gate-card { width:min(460px,100%); padding:32px; border-radius:20px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.35); }
.nickname-gate-icon { display:grid; place-items:center; width:52px; height:52px; margin-bottom:18px; border-radius:16px; color:#087f5b; background:#dff7ec; font-size:22px; }
.nickname-account { padding:12px 14px; border:1px solid #dfe7e3; border-radius:11px; color:#42534c; background:#f6faf8; font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.maintenance-status { margin:0 22px 20px; padding:11px 14px; border-radius:10px; color:#315e50; background:#e7f6ef; font-size:12px; font-weight:700; }
.maintenance-status.error { color:#96394b; background:#fde8ed; }
.account-tabs {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 10px;
  min-height: 148px;
  padding: 20px 22px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c4d4cd transparent;
}
.recent-account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 20px 22px;
}
.recent-account-grid .nav-item { display: flex; min-width: 0; }
.recent-account-grid .account-tab-link { width: 100%; min-width: 0; }
.connections-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 22px;
}
.connections-search { width: min(340px, 100%); }
.connections-load-more { height: 1px; }
.connection-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 22px;
  border: 1px solid #dfe7e3;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #f7fbf9);
  box-shadow: 0 8px 24px rgba(31,58,47,.06);
}
.connection-card h3 { margin: 14px 0 4px; font-size: 17px; font-weight: 750; overflow-wrap: anywhere; }
.connection-phone { max-width: 100%; margin: 0 0 16px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.connection-metrics { display: grid; gap: 7px; width: 100%; margin-bottom: 18px; color: #42534c; font-size: 12px; }
.connection-card .btn { margin-top: auto; }
div.dt-container { padding: 14px 20px 20px; }
div.dt-container .dt-search input { border: 1px solid #dfe7e3; border-radius: 9px; padding: 7px 10px; }
div.dt-container .dt-paging .dt-paging-button { border-radius: 9px !important; }
.account-tabs::-webkit-scrollbar { height: 8px; }
.account-tabs::-webkit-scrollbar-thumb { border-radius: 8px; background: #c4d4cd; }
.account-tabs .nav-item { display: flex; margin-bottom: 0; flex: 0 0 auto; }
.account-tab-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  min-width: 245px;
  min-height: 108px;
  padding: 20px 42px 20px 20px !important;
  border: 1px solid #dfe7e3 !important;
  border-radius: 14px !important;
  color: var(--ink) !important;
  background: #fff !important;
  transition: .18s ease;
  white-space: nowrap;
}
.account-tab-link:hover { background: #f0faf5 !important; border-color: var(--brand) !important; }
.account-tab-link.active {
  color: var(--brand) !important;
  background: #f0faf5 !important;
  border-color: var(--brand) !important;
  box-shadow: 0 -3px 10px rgba(8,127,91,.07);
}
.account-tab-link .account-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.account-tab-link .account-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
.account-tab-link .account-meta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.account-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.account-status::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #9ba9a2; }
.account-status.online { color: #087f5b; }
.account-status.online::before { background: #25d366; box-shadow: 0 0 0 4px rgba(37,211,102,.14); }
.carbon-number-indicator { display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.carbon-number-indicator.carbon { color:#087f5b; }
.carbon-number-indicator.external { color:#dc2626; }
.account-tab-edit {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  opacity: 0;
  transition: .15s ease;
}
.account-tab-link:hover .account-tab-edit, .account-tab-edit:focus { opacity: 1; }
.account-tab-edit:hover { color: var(--brand); background: var(--brand-light); }
.account-rename-input {
  width: 150px;
  padding: 4px 8px;
  border: 2px solid var(--brand);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.search-box { width: min(290px, 100%); border-radius: 10px; background: #f4f7f5; }
thead th { padding: 13px 22px !important; color: var(--muted); background: #fafcfb !important; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
tbody td { padding: 16px 22px !important; border-color: #edf1ef; }
.contact-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--brand); background: var(--brand-light); font-weight: 700; }
.contact-number { font-weight: 600; }
.contact-title { color: var(--muted); font-size: 11px; }
.recent-badge { color: #075e54; background: #d8f5e8; }
.empty-state { padding: 65px 20px; text-align: center; color: var(--muted); }
.empty-state i { margin-bottom: 15px; color: #aebbb4; font-size: 38px; }
.empty-state h3 { color: var(--ink); font-size: 18px; }
.chart-card { min-height: 390px; }
#message-chart { height: 310px; }
.message-stream { display: grid; gap: 11px; padding: 18px; border-radius: 14px; background: #efeae2; }
.message {
  max-width: 78%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 45, 36, .08);
}
.message.in,
.message.client {
  justify-self: start;
  background: #fff1f5;
  border-color: #f6d8e2;
  border-bottom-left-radius: 4px;
}
.message.out,
.message.operator {
  justify-self: end;
  background: #eaf6ff;
  border-color: #cfe6f7;
  border-bottom-right-radius: 4px;
}
.message.system {
  justify-self:center;
  max-width:90%;
  background:#fff8d9;
  border-color:#efe2a7;
}
.message-author { margin-bottom:5px; color:#52615b; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.message-author.operator { color:#087f5b; text-align:right; }
.message-author.client { color:#315eaa; }
.message-author.system { color:#8a6710; text-align:center; }
.message-links { display:grid; gap:4px; margin-top:7px; }
.message-links a { max-width:100%; overflow:hidden; color:#05705a; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.message-media { display:grid; gap:8px; margin-top:8px; }
.message-media img, .message-media video { display:block; width:min(420px,100%); max-height:420px; border-radius:9px; object-fit:contain; background:#0b1713; }
.message-media audio { display:block; width:min(360px,100%); }
.audio-player-card { display:grid; gap:7px; min-width:min(360px,100%); padding:10px 12px; border:1px solid rgba(8,127,91,.15); border-radius:11px; background:rgba(255,255,255,.62); }
.audio-player-card span { color:#3e5149; font-size:11px; font-weight:700; }
.audio-player-card audio { width:100%; }
.attachment-unavailable { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px dashed #c7d4ce; border-radius:10px; color:#68766f; background:rgba(255,255,255,.45); font-size:11px; }
.attachment-file { display:flex; align-items:center; gap:10px; padding:10px; color:#075e54; border:1px solid rgba(7,94,84,.18); border-radius:9px; background:rgba(255,255,255,.6); font-size:12px; font-weight:600; }
.media-manager-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.media-manager-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(7,94,84,.12); border-radius:16px; background:#fff; box-shadow:0 10px 28px rgba(15,45,35,.08); }
.media-manager-preview { display:flex; align-items:center; justify-content:center; min-height:220px; padding:12px; background:#0b1713; }
.media-manager-preview img,.media-manager-preview video { width:100%; height:240px; object-fit:contain; }
.media-manager-preview audio { width:100%; }
.media-manager-unavailable { display:grid; place-items:center; gap:8px; min-height:220px; padding:24px; color:#68766f; text-align:center; background:#eef3f1; }
.media-manager-body { display:grid; gap:9px; padding:16px; }
.media-manager-badge { width:max-content; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:700; color:#58645f; background:#edf1ef; }
.media-manager-badge.sent { color:#075e54; background:#dff5eb; }
.media-manager-badge.received { color:#1d4ed8; background:#e5edff; }
.media-manager-route { display:grid; gap:3px; color:#33443d; font-size:13px; }
.media-manager-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.media-table-card { overflow:hidden; }
.media-table-card .table-responsive { padding:0 6px 6px; }
#media-table tbody tr { vertical-align:middle; }
#media-table tbody td { padding-top:14px; padding-bottom:14px; }
.media-table-thumbnail { display:block; width:84px; height:58px; border-radius:9px; object-fit:cover; background:#0b1713; box-shadow:0 4px 14px rgba(15,45,35,.12); transition:transform .2s ease,filter .2s ease; }
.media-table-video { display:block; width:112px; height:76px; border-radius:10px; object-fit:cover; background:#0b1713; box-shadow:0 4px 14px rgba(15,45,35,.12); }
.media-lightbox { position:relative; display:block; width:max-content; overflow:hidden; border-radius:9px; cursor:zoom-in; }
.media-lightbox:hover .media-table-thumbnail { transform:scale(1.06); filter:brightness(.72); }
.media-zoom-hint { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.18); font-size:17px; opacity:0; transition:opacity .2s ease; }
.media-lightbox:hover .media-zoom-hint,.media-lightbox:focus .media-zoom-hint { opacity:1; }
.goverlay { background:rgba(0,0,0,.96) !important; }
.glightbox-clean .gslide-description { background:rgba(10,10,10,.92); }
.glightbox-clean .gdesc-inner { padding:14px 18px; }
.glightbox-clean .gslide-title { margin:0; color:#fff; font-family:Inter,sans-serif; font-size:14px; }
.glightbox-clean .gclose { top:18px; right:18px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14); }
.media-table-audio { display:block; width:220px; max-width:24vw; height:42px; }
.media-table-missing { display:flex; align-items:center; justify-content:center; gap:7px; width:112px; height:76px; border:1px dashed #c8d4cf; border-radius:10px; color:#7a8882; background:#f2f5f4; font-size:11px; }
.media-file-cell { display:flex; align-items:center; gap:11px; min-width:180px; }
.media-file-cell>i { display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:9px; color:var(--brand); background:var(--brand-light); }
.media-file-cell strong,.media-file-cell small { display:block; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-file-cell small { margin-top:3px; color:var(--muted); font-size:11px; }
.media-people-cell { display:grid; gap:7px; min-width:180px; }
.media-people-cell span { display:grid; grid-template-columns:18px 1fr; align-items:center; column-gap:6px; }
.media-people-cell i { grid-row:1 / span 2; color:var(--brand); font-size:11px; }
.media-people-cell small { color:var(--muted); font-size:9px; line-height:1; text-transform:uppercase; letter-spacing:.05em; }
.media-people-cell strong { max-width:220px; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.media-row-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:7px; min-width:180px; }
.timeline-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:22px; color:var(--muted); }
.contact-timeline { position:relative; display:grid; gap:18px; padding-left:38px; }
.contact-timeline::before { position:absolute; top:0; bottom:0; left:16px; width:2px; content:""; background:linear-gradient(var(--brand),#b8d9cc); }
.timeline-event { position:relative; }
.timeline-marker { position:absolute; top:20px; left:-38px; z-index:2; display:grid; place-items:center; width:34px; height:34px; border:4px solid var(--canvas); border-radius:50%; color:#fff; background:var(--brand); box-shadow:0 3px 12px rgba(8,127,91,.25); font-size:11px; }
.timeline-event-card { padding:20px; border:1px solid #e1e9e5; border-radius:15px; background:#fff; box-shadow:0 8px 28px rgba(31,58,47,.06); }
.timeline-event-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.timeline-event-header h3 { margin:0 0 5px; font-size:16px; font-weight:750; }
.timeline-event-header p { margin:0; color:var(--muted); font-size:12px; }
.timeline-event-header time { flex:0 0 auto; padding:6px 10px; border-radius:9px; color:#315e50; background:#edf8f3; font-size:11px; font-weight:700; }
.timeline-event-metrics { display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0; color:#52615b; font-size:12px; }
.timeline-conversation { display:flex; flex-direction:column; gap:9px; max-height:620px; margin-top:18px; padding:18px; overflow:auto; border-radius:13px; background:#e8f0ec; }
.timeline-message { width:min(76%,720px); padding:10px 12px; border-radius:12px; background:#fff; box-shadow:0 2px 8px rgba(31,58,47,.07); }
.timeline-message.outgoing { align-self:flex-end; background:#d9fdd3; }
.timeline-message.incoming { align-self:flex-start; }
.timeline-message strong { display:block; margin-bottom:3px; color:#315e50; font-size:11px; }
.timeline-message p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
.timeline-message>small { display:block; margin-top:5px; color:#718079; font-size:9px; text-align:right; }
.timeline-message-attachments { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.timeline-attachment { display:flex; align-items:center; gap:6px; max-width:260px; padding:6px 8px; border-radius:8px; color:var(--brand); background:rgba(255,255,255,.66); font-size:11px; }
.timeline-attachment span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timeline-image-link { position:relative; display:block; overflow:hidden; border:2px solid rgba(255,255,255,.8); border-radius:9px; cursor:zoom-in; }
.timeline-image-link img { display:block; width:92px; height:68px; object-fit:cover; transition:transform .2s ease,filter .2s ease; }
.timeline-image-link::after { position:absolute; inset:0; display:grid; place-items:center; color:#fff; content:"\f00e"; background:rgba(0,0,0,.24); font-family:"Font Awesome 6 Free"; font-weight:900; opacity:0; transition:opacity .2s ease; }
.timeline-image-link:hover img { transform:scale(1.08); filter:brightness(.72); }
.timeline-image-link:hover::after { opacity:1; }
.timeline-media-player { display:grid; gap:6px; min-width:260px; max-width:100%; padding:9px; border-radius:10px; background:rgba(255,255,255,.78); }
.timeline-media-player span { color:#42534c; font-size:10px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timeline-media-player audio { width:300px; max-width:100%; height:38px; }
.timeline-media-player video { width:min(420px,100%); max-height:280px; border-radius:9px; background:#0b1713; }
#timeline-results-table tbody tr { transition:background .18s ease; }
#timeline-results-table tbody tr:hover { background:#f2faf6; }
div.dt-container { color:var(--ink); }
div.dt-container .dt-layout-row { margin:0; padding:14px 16px; }
div.dt-container .dt-layout-table { padding:0; }
div.dt-container .dt-info { color:var(--muted); font-size:12px; }
.message-meta { margin-top: 5px; color: #718079; font-size: 10px; text-align: right; }
.json-details { padding: 14px; border: 1px solid #dfe7e3; border-radius: 10px; }
.json-details summary { cursor: pointer; font-weight: 600; }
.json-details pre { max-height: 420px; margin: 14px 0 0; padding: 15px; overflow: auto; color: #d9fdd3; border-radius: 9px; background: #11241d; font-size: 11px; white-space: pre-wrap; }
@media (max-width: 720px) {
  .refresh-indicator { display: none; }
  .hero { align-items: stretch; flex-direction: column; }
  .hero .btn { width: 100%; }
  thead th:nth-child(3), tbody td:nth-child(3) { display: none; }
  .recent-account-grid, .connections-grid, .media-manager-grid { grid-template-columns: 1fr; }
  .media-table-audio { width:180px; max-width:none; }
  .contact-timeline { padding-left:30px; }
  .timeline-marker { left:-30px; }
  .timeline-event-header { flex-direction:column; }
  .timeline-message { width:92%; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .recent-account-grid, .connections-grid, .media-manager-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}