#smsConversationsV2,
#smsComposeV2,
#smsArchiveV2{
  color-scheme:light dark;
}

/* Align message sub-navigation across inbox, new message, spam and blocked */
#smsComposeV2,
#smsArchiveV2{
  grid-template-columns:minmax(320px,370px) minmax(0,1fr)!important;
}

#smsConversationsV2 .v2-nav,
#smsComposeV2 .compose-nav,
#smsArchiveV2 .archive-nav{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  padding:10px 12px!important;
  margin:0!important;
  background:#fff!important;
  border-bottom:1px solid #e5edf6!important;
}

#smsConversationsV2 .v2-tab,
#smsComposeV2 .compose-tab,
#smsArchiveV2 .archive-tab{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-width:0!important;
  min-height:34px!important;
  padding:6px 8px!important;
  border-radius:999px!important;
  border:1px solid #e2e8f0!important;
  background:#f8fafc!important;
  color:#334155!important;
  font-size:11.5px!important;
  font-weight:900!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}

#smsConversationsV2 .v2-tab.is-active,
#smsComposeV2 .compose-tab.is-active,
#smsArchiveV2 .archive-tab.is-active{
  background:#0f172a!important;
  border-color:#0f172a!important;
  color:#fff!important;
}

#smsConversationsV2 .v2-date span{
  background:#fff!important;
  color:#475569!important;
  border:1px solid #e2e8f0!important;
}

#smsConversationsV2 .v2-preview{
  background:transparent!important;
  border:0!important;
}

/* Dark mode base */
body.theme-dark #smsConversationsV2,
body.dark #smsConversationsV2,
body[data-theme="dark"] #smsConversationsV2,
html.dark #smsConversationsV2,
html[data-theme="dark"] #smsConversationsV2,
body.theme-dark #smsComposeV2,
body.dark #smsComposeV2,
body[data-theme="dark"] #smsComposeV2,
html.dark #smsComposeV2,
html[data-theme="dark"] #smsComposeV2,
body.theme-dark #smsArchiveV2,
body.dark #smsArchiveV2,
body[data-theme="dark"] #smsArchiveV2,
html.dark #smsArchiveV2,
html[data-theme="dark"] #smsArchiveV2{
  --bg:#070b14!important;
  --panel:#0f172a!important;
  --soft:#111c31!important;
  --line:#273549!important;
  --text:#f8fafc!important;
  --muted:#cbd5e1!important;
  --primary:#60a5fa!important;
  --danger:#fb7185!important;
  background:#070b14!important;
  color:#f8fafc!important;
}

/* Dark panels */
body.theme-dark #smsConversationsV2 .v2-sidebar,
body.theme-dark #smsConversationsV2 .v2-nav,
body.theme-dark #smsConversationsV2 .v2-filter,
body.theme-dark #smsConversationsV2 .v2-header,
body.theme-dark #smsConversationsV2 .v2-compose,
body.dark #smsConversationsV2 .v2-sidebar,
body.dark #smsConversationsV2 .v2-nav,
body.dark #smsConversationsV2 .v2-filter,
body.dark #smsConversationsV2 .v2-header,
body.dark #smsConversationsV2 .v2-compose,
body[data-theme="dark"] #smsConversationsV2 .v2-sidebar,
body[data-theme="dark"] #smsConversationsV2 .v2-nav,
body[data-theme="dark"] #smsConversationsV2 .v2-filter,
body[data-theme="dark"] #smsConversationsV2 .v2-header,
body[data-theme="dark"] #smsConversationsV2 .v2-compose,
html.dark #smsConversationsV2 .v2-sidebar,
html.dark #smsConversationsV2 .v2-nav,
html.dark #smsConversationsV2 .v2-filter,
html.dark #smsConversationsV2 .v2-header,
html.dark #smsConversationsV2 .v2-compose,
html[data-theme="dark"] #smsConversationsV2 .v2-sidebar,
html[data-theme="dark"] #smsConversationsV2 .v2-nav,
html[data-theme="dark"] #smsConversationsV2 .v2-filter,
html[data-theme="dark"] #smsConversationsV2 .v2-header,
html[data-theme="dark"] #smsConversationsV2 .v2-compose,
body.theme-dark #smsComposeV2 .compose-sidebar,
body.theme-dark #smsComposeV2 .compose-nav,
body.theme-dark #smsComposeV2 .compose-credit,
body.theme-dark #smsComposeV2 .compose-head,
body.theme-dark #smsComposeV2 .compose-card,
body.dark #smsComposeV2 .compose-sidebar,
body.dark #smsComposeV2 .compose-nav,
body.dark #smsComposeV2 .compose-credit,
body.dark #smsComposeV2 .compose-head,
body.dark #smsComposeV2 .compose-card,
body[data-theme="dark"] #smsComposeV2 .compose-sidebar,
body[data-theme="dark"] #smsComposeV2 .compose-nav,
body[data-theme="dark"] #smsComposeV2 .compose-credit,
body[data-theme="dark"] #smsComposeV2 .compose-head,
body[data-theme="dark"] #smsComposeV2 .compose-card,
html.dark #smsComposeV2 .compose-sidebar,
html.dark #smsComposeV2 .compose-nav,
html.dark #smsComposeV2 .compose-credit,
html.dark #smsComposeV2 .compose-head,
html.dark #smsComposeV2 .compose-card,
html[data-theme="dark"] #smsComposeV2 .compose-sidebar,
html[data-theme="dark"] #smsComposeV2 .compose-nav,
html[data-theme="dark"] #smsComposeV2 .compose-credit,
html[data-theme="dark"] #smsComposeV2 .compose-head,
html[data-theme="dark"] #smsComposeV2 .compose-card,
body.theme-dark #smsArchiveV2 .archive-sidebar,
body.theme-dark #smsArchiveV2 .archive-nav,
body.theme-dark #smsArchiveV2 .archive-summary,
body.theme-dark #smsArchiveV2 .archive-head,
body.theme-dark #smsArchiveV2 .archive-card,
body.theme-dark #smsArchiveV2 .archive-empty-card,
body.dark #smsArchiveV2 .archive-sidebar,
body.dark #smsArchiveV2 .archive-nav,
body.dark #smsArchiveV2 .archive-summary,
body.dark #smsArchiveV2 .archive-head,
body.dark #smsArchiveV2 .archive-card,
body.dark #smsArchiveV2 .archive-empty-card,
body[data-theme="dark"] #smsArchiveV2 .archive-sidebar,
body[data-theme="dark"] #smsArchiveV2 .archive-nav,
body[data-theme="dark"] #smsArchiveV2 .archive-summary,
body[data-theme="dark"] #smsArchiveV2 .archive-head,
body[data-theme="dark"] #smsArchiveV2 .archive-card,
body[data-theme="dark"] #smsArchiveV2 .archive-empty-card,
html.dark #smsArchiveV2 .archive-sidebar,
html.dark #smsArchiveV2 .archive-nav,
html.dark #smsArchiveV2 .archive-summary,
html.dark #smsArchiveV2 .archive-head,
html.dark #smsArchiveV2 .archive-card,
html.dark #smsArchiveV2 .archive-empty-card,
html[data-theme="dark"] #smsArchiveV2 .archive-sidebar,
html[data-theme="dark"] #smsArchiveV2 .archive-nav,
html[data-theme="dark"] #smsArchiveV2 .archive-summary,
html[data-theme="dark"] #smsArchiveV2 .archive-head,
html[data-theme="dark"] #smsArchiveV2 .archive-card,
html[data-theme="dark"] #smsArchiveV2 .archive-empty-card{
  background:#0f172a!important;
  border-color:#273549!important;
  color:#f8fafc!important;
}

/* Dark canvas */
body.theme-dark #smsConversationsV2 .v2-list,
body.theme-dark #smsConversationsV2 .v2-chat,
body.theme-dark #smsConversationsV2 .v2-thread,
body.theme-dark #smsComposeV2 .compose-main,
body.theme-dark #smsComposeV2 .compose-body,
body.theme-dark #smsArchiveV2 .archive-main,
body.theme-dark #smsArchiveV2 .archive-body,
body.dark #smsConversationsV2 .v2-list,
body.dark #smsConversationsV2 .v2-chat,
body.dark #smsConversationsV2 .v2-thread,
body.dark #smsComposeV2 .compose-main,
body.dark #smsComposeV2 .compose-body,
body.dark #smsArchiveV2 .archive-main,
body.dark #smsArchiveV2 .archive-body,
body[data-theme="dark"] #smsConversationsV2 .v2-list,
body[data-theme="dark"] #smsConversationsV2 .v2-chat,
body[data-theme="dark"] #smsConversationsV2 .v2-thread,
body[data-theme="dark"] #smsComposeV2 .compose-main,
body[data-theme="dark"] #smsComposeV2 .compose-body,
body[data-theme="dark"] #smsArchiveV2 .archive-main,
body[data-theme="dark"] #smsArchiveV2 .archive-body,
html.dark #smsConversationsV2 .v2-list,
html.dark #smsConversationsV2 .v2-chat,
html.dark #smsConversationsV2 .v2-thread,
html.dark #smsComposeV2 .compose-main,
html.dark #smsComposeV2 .compose-body,
html.dark #smsArchiveV2 .archive-main,
html.dark #smsArchiveV2 .archive-body,
html[data-theme="dark"] #smsConversationsV2 .v2-list,
html[data-theme="dark"] #smsConversationsV2 .v2-chat,
html[data-theme="dark"] #smsConversationsV2 .v2-thread,
html[data-theme="dark"] #smsComposeV2 .compose-main,
html[data-theme="dark"] #smsComposeV2 .compose-body,
html[data-theme="dark"] #smsArchiveV2 .archive-main,
html[data-theme="dark"] #smsArchiveV2 .archive-body{
  background:linear-gradient(180deg,#0b1220,#070b14)!important;
}

/* Dark chat cards and bubbles */
body.theme-dark #smsConversationsV2 .v2-card,
body.theme-dark #smsConversationsV2 .v2-bubble,
body.dark #smsConversationsV2 .v2-card,
body.dark #smsConversationsV2 .v2-bubble,
body[data-theme="dark"] #smsConversationsV2 .v2-card,
body[data-theme="dark"] #smsConversationsV2 .v2-bubble,
html.dark #smsConversationsV2 .v2-card,
html.dark #smsConversationsV2 .v2-bubble,
html[data-theme="dark"] #smsConversationsV2 .v2-card,
html[data-theme="dark"] #smsConversationsV2 .v2-bubble{
  background:#111c31!important;
  border-color:#273549!important;
  color:#f8fafc!important;
  box-shadow:0 12px 28px rgba(0,0,0,.22)!important;
}

body.theme-dark #smsConversationsV2 .v2-card.is-active,
body.dark #smsConversationsV2 .v2-card.is-active,
body[data-theme="dark"] #smsConversationsV2 .v2-card.is-active,
html.dark #smsConversationsV2 .v2-card.is-active,
html[data-theme="dark"] #smsConversationsV2 .v2-card.is-active{
  background:#102a4f!important;
  border-color:#3b82f6!important;
  box-shadow:inset -4px 0 0 #60a5fa,0 12px 28px rgba(37,99,235,.18)!important;
}

/* Dark text hierarchy */
body.theme-dark #smsConversationsV2 .v2-title,
body.theme-dark #smsConversationsV2 .v2-name,
body.theme-dark #smsConversationsV2 .v2-body,
body.dark #smsConversationsV2 .v2-title,
body.dark #smsConversationsV2 .v2-name,
body.dark #smsConversationsV2 .v2-body,
body[data-theme="dark"] #smsConversationsV2 .v2-title,
body[data-theme="dark"] #smsConversationsV2 .v2-name,
body[data-theme="dark"] #smsConversationsV2 .v2-body,
html.dark #smsConversationsV2 .v2-title,
html.dark #smsConversationsV2 .v2-name,
html.dark #smsConversationsV2 .v2-body,
html[data-theme="dark"] #smsConversationsV2 .v2-title,
html[data-theme="dark"] #smsConversationsV2 .v2-name,
html[data-theme="dark"] #smsConversationsV2 .v2-body,
body.theme-dark #smsComposeV2 h1,
body.theme-dark #smsComposeV2 h2,
body.theme-dark #smsComposeV2 strong,
body.dark #smsComposeV2 h1,
body.dark #smsComposeV2 h2,
body.dark #smsComposeV2 strong,
body[data-theme="dark"] #smsComposeV2 h1,
body[data-theme="dark"] #smsComposeV2 h2,
body[data-theme="dark"] #smsComposeV2 strong,
html.dark #smsComposeV2 h1,
html.dark #smsComposeV2 h2,
html.dark #smsComposeV2 strong,
html[data-theme="dark"] #smsComposeV2 h1,
html[data-theme="dark"] #smsComposeV2 h2,
html[data-theme="dark"] #smsComposeV2 strong,
body.theme-dark #smsArchiveV2 h1,
body.theme-dark #smsArchiveV2 h2,
body.theme-dark #smsArchiveV2 strong,
body.dark #smsArchiveV2 h1,
body.dark #smsArchiveV2 h2,
body.dark #smsArchiveV2 strong,
body[data-theme="dark"] #smsArchiveV2 h1,
body[data-theme="dark"] #smsArchiveV2 h2,
body[data-theme="dark"] #smsArchiveV2 strong,
html.dark #smsArchiveV2 h1,
html.dark #smsArchiveV2 h2,
html.dark #smsArchiveV2 strong,
html[data-theme="dark"] #smsArchiveV2 h1,
html[data-theme="dark"] #smsArchiveV2 h2,
html[data-theme="dark"] #smsArchiveV2 strong{
  color:#f8fafc!important;
}

body.theme-dark #smsConversationsV2 .v2-subtitle,
body.theme-dark #smsConversationsV2 .v2-time,
body.theme-dark #smsConversationsV2 .v2-meta,
body.dark #smsConversationsV2 .v2-subtitle,
body.dark #smsConversationsV2 .v2-time,
body.dark #smsConversationsV2 .v2-meta,
body[data-theme="dark"] #smsConversationsV2 .v2-subtitle,
body[data-theme="dark"] #smsConversationsV2 .v2-time,
body[data-theme="dark"] #smsConversationsV2 .v2-meta,
html.dark #smsConversationsV2 .v2-subtitle,
html.dark #smsConversationsV2 .v2-time,
html.dark #smsConversationsV2 .v2-meta,
html[data-theme="dark"] #smsConversationsV2 .v2-subtitle,
html[data-theme="dark"] #smsConversationsV2 .v2-time,
html[data-theme="dark"] #smsConversationsV2 .v2-meta{
  color:#cbd5e1!important;
}

/* Fix last message preview in dark mode */
body.theme-dark #smsConversationsV2 .v2-preview,
body.dark #smsConversationsV2 .v2-preview,
body[data-theme="dark"] #smsConversationsV2 .v2-preview,
html.dark #smsConversationsV2 .v2-preview,
html[data-theme="dark"] #smsConversationsV2 .v2-preview{
  background:transparent!important;
  color:#d7e0ee!important;
  border:0!important;
  box-shadow:none!important;
}

/* Fix date pill in dark mode */
body.theme-dark #smsConversationsV2 .v2-date span,
body.dark #smsConversationsV2 .v2-date span,
body[data-theme="dark"] #smsConversationsV2 .v2-date span,
html.dark #smsConversationsV2 .v2-date span,
html[data-theme="dark"] #smsConversationsV2 .v2-date span{
  background:#111c31!important;
  color:#dbeafe!important;
  border-color:#334155!important;
  box-shadow:0 8px 18px rgba(0,0,0,.18)!important;
}

/* Fix virtual number + message count pills in dark mode */
body.theme-dark #smsConversationsV2 .v2-tags .v2-tag,
body.dark #smsConversationsV2 .v2-tags .v2-tag,
body[data-theme="dark"] #smsConversationsV2 .v2-tags .v2-tag,
html.dark #smsConversationsV2 .v2-tags .v2-tag,
html[data-theme="dark"] #smsConversationsV2 .v2-tags .v2-tag,
body.theme-dark #smsConversationsV2 .v2-number,
body.dark #smsConversationsV2 .v2-number,
body[data-theme="dark"] #smsConversationsV2 .v2-number,
html.dark #smsConversationsV2 .v2-number,
html[data-theme="dark"] #smsConversationsV2 .v2-number{
  background:#0b1220!important;
  color:#dbeafe!important;
  border:1px solid #334155!important;
  box-shadow:none!important;
}

body.theme-dark #smsConversationsV2 .v2-tags .v2-tag b,
body.dark #smsConversationsV2 .v2-tags .v2-tag b,
body[data-theme="dark"] #smsConversationsV2 .v2-tags .v2-tag b,
html.dark #smsConversationsV2 .v2-tags .v2-tag b,
html[data-theme="dark"] #smsConversationsV2 .v2-tags .v2-tag b{
  color:#f8fafc!important;
}

/* Dark form fields */
body.theme-dark #smsConversationsV2 input,
body.theme-dark #smsConversationsV2 select,
body.theme-dark #smsConversationsV2 textarea,
body.theme-dark #smsComposeV2 input,
body.theme-dark #smsComposeV2 select,
body.theme-dark #smsComposeV2 textarea,
body.dark #smsConversationsV2 input,
body.dark #smsConversationsV2 select,
body.dark #smsConversationsV2 textarea,
body.dark #smsComposeV2 input,
body.dark #smsComposeV2 select,
body.dark #smsComposeV2 textarea,
body[data-theme="dark"] #smsConversationsV2 input,
body[data-theme="dark"] #smsConversationsV2 select,
body[data-theme="dark"] #smsConversationsV2 textarea,
body[data-theme="dark"] #smsComposeV2 input,
body[data-theme="dark"] #smsComposeV2 select,
body[data-theme="dark"] #smsComposeV2 textarea,
html.dark #smsConversationsV2 input,
html.dark #smsConversationsV2 select,
html.dark #smsConversationsV2 textarea,
html.dark #smsComposeV2 input,
html.dark #smsComposeV2 select,
html.dark #smsComposeV2 textarea,
html[data-theme="dark"] #smsConversationsV2 input,
html[data-theme="dark"] #smsConversationsV2 select,
html[data-theme="dark"] #smsConversationsV2 textarea,
html[data-theme="dark"] #smsComposeV2 input,
html[data-theme="dark"] #smsComposeV2 select,
html[data-theme="dark"] #smsComposeV2 textarea{
  background:#070b14!important;
  border-color:#3b4a61!important;
  color:#f8fafc!important;
}

/* Dark sub-navigation */
body.theme-dark #smsConversationsV2 .v2-tab,
body.theme-dark #smsComposeV2 .compose-tab,
body.theme-dark #smsArchiveV2 .archive-tab,
body.dark #smsConversationsV2 .v2-tab,
body.dark #smsComposeV2 .compose-tab,
body.dark #smsArchiveV2 .archive-tab,
body[data-theme="dark"] #smsConversationsV2 .v2-tab,
body[data-theme="dark"] #smsComposeV2 .compose-tab,
body[data-theme="dark"] #smsArchiveV2 .archive-tab,
html.dark #smsConversationsV2 .v2-tab,
html.dark #smsComposeV2 .compose-tab,
html.dark #smsArchiveV2 .archive-tab,
html[data-theme="dark"] #smsConversationsV2 .v2-tab,
html[data-theme="dark"] #smsComposeV2 .compose-tab,
html[data-theme="dark"] #smsArchiveV2 .archive-tab{
  background:#111c31!important;
  border-color:#273549!important;
  color:#e2e8f0!important;
}

body.theme-dark #smsConversationsV2 .v2-tab.is-active,
body.theme-dark #smsComposeV2 .compose-tab.is-active,
body.theme-dark #smsArchiveV2 .archive-tab.is-active,
body.dark #smsConversationsV2 .v2-tab.is-active,
body.dark #smsComposeV2 .compose-tab.is-active,
body.dark #smsArchiveV2 .archive-tab.is-active,
body[data-theme="dark"] #smsConversationsV2 .v2-tab.is-active,
body[data-theme="dark"] #smsComposeV2 .compose-tab.is-active,
body[data-theme="dark"] #smsArchiveV2 .archive-tab.is-active,
html.dark #smsConversationsV2 .v2-tab.is-active,
html.dark #smsComposeV2 .compose-tab.is-active,
html.dark #smsArchiveV2 .archive-tab.is-active,
html[data-theme="dark"] #smsConversationsV2 .v2-tab.is-active,
html[data-theme="dark"] #smsComposeV2 .compose-tab.is-active,
html[data-theme="dark"] #smsArchiveV2 .archive-tab.is-active{
  background:#2563eb!important;
  border-color:#3b82f6!important;
  color:#fff!important;
}

@media(max-width:920px){
  #smsConversationsV2 .v2-nav,
  #smsComposeV2 .compose-nav,
  #smsArchiveV2 .archive-nav{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}