:root{
  --sms-bg:#f4f6fb;
  --sms-panel:#ffffff;
  --sms-panel-soft:#f8fafc;
  --sms-border:#e5e7eb;
  --sms-border-strong:#d0d5dd;
  --sms-text:#101828;
  --sms-muted:#667085;
  --sms-faint:#98a2b3;
  --sms-primary:#2563eb;
  --sms-primary-soft:#eff6ff;
  --sms-primary-border:#bfdbfe;
  --sms-danger:#b42318;
  --sms-danger-soft:#fee4e2;
  --sms-ok:#067647;
  --sms-radius:16px;
  --sms-shadow:0 10px 35px rgba(15,23,42,.08);
}

.container:has(.messages-page){
  width:100%!important;
  max-width:none!important;
  padding:0!important;
  background:var(--sms-bg)!important;
}

.messages-page.sms-console{
  height:calc(100dvh - 58px)!important;
  min-height:640px!important;
  display:grid!important;
  grid-template-columns:minmax(345px,390px) minmax(0,1fr)!important;
  gap:0!important;
  background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%)!important;
  border-top:1px solid rgba(255,255,255,.65)!important;
  overflow:hidden!important;
  color:var(--sms-text)!important;
}

.sms-console-sidebar{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  background:rgba(255,255,255,.94)!important;
  border-left:1px solid var(--sms-border)!important;
  box-shadow:-1px 0 0 rgba(255,255,255,.8) inset!important;
  overflow:hidden!important;
}

.sms-console-header{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:18px 18px 14px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  border-bottom:1px solid var(--sms-border)!important;
}

.sms-console-header .eyebrow{
  display:block!important;
  margin:0 0 5px!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  color:var(--sms-primary)!important;
}

.sms-console-header h1{
  margin:0!important;
  font-size:24px!important;
  font-weight:950!important;
  line-height:1.05!important;
  color:var(--sms-text)!important;
  letter-spacing:-.03em!important;
}

.sms-console-header p{
  display:block!important;
  margin:7px 0 0!important;
  max-width:235px!important;
  font-size:12px!important;
  line-height:1.35!important;
  color:var(--sms-muted)!important;
}

.sms-console-header .button{
  flex:0 0 auto!important;
  min-height:38px!important;
  padding:8px 13px!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:850!important;
  box-shadow:none!important;
}

.message-quick-stats{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
  padding:12px 14px!important;
  background:#fff!important;
  border-bottom:1px solid var(--sms-border)!important;
}

.message-quick-stats div{
  min-width:0!important;
  border:1px solid #edf2f7!important;
  border-radius:13px!important;
  background:#fbfcfe!important;
  padding:10px 8px!important;
  text-align:center!important;
  box-shadow:none!important;
}

.message-quick-stats strong{
  display:block!important;
  font-size:18px!important;
  line-height:1!important;
  color:var(--sms-text)!important;
}

.message-quick-stats span{
  display:block!important;
  margin-top:5px!important;
  font-size:10.5px!important;
  color:var(--sms-muted)!important;
  font-weight:750!important;
  white-space:nowrap!important;
}

.mailbox-nav{
  display:flex!important;
  gap:7px!important;
  padding:11px 14px!important;
  background:#fff!important;
  border-bottom:1px solid var(--sms-border)!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
.mailbox-nav::-webkit-scrollbar{display:none!important}

.mailbox-nav .button{
  width:auto!important;
  min-width:max-content!important;
  min-height:34px!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:850!important;
  box-shadow:none!important;
  background:#f9fafb!important;
  color:#344054!important;
  border:1px solid var(--sms-border)!important;
}

.mailbox-nav .primary,
.mailbox-nav .button[aria-current="page"]{
  background:#111827!important;
  color:#fff!important;
  border-color:#111827!important;
}

.sms-console-filters{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
  padding:12px 14px!important;
  background:#fff!important;
  border-bottom:1px solid var(--sms-border)!important;
}

.sms-console-filters label{
  display:grid!important;
  gap:5px!important;
  margin:0!important;
  font-size:11px!important;
  font-weight:850!important;
  color:#475467!important;
}

.sms-console-filters select,
.sms-console-filters input{
  width:100%!important;
  min-height:38px!important;
  border-radius:12px!important;
  border:1px solid var(--sms-border)!important;
  background:#fff!important;
  color:var(--sms-text)!important;
  font-size:13px!important;
  padding:8px 11px!important;
  outline:none!important;
  box-shadow:none!important;
}

.sms-console-filters select:focus,
.sms-console-filters input:focus{
  border-color:#93c5fd!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)!important;
}

.messages-search{position:relative!important;display:block!important}
.messages-search a{
  position:absolute!important;
  left:8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;
  height:24px!important;
  border-radius:999px!important;
  background:#f2f4f7!important;
  color:#667085!important;
  text-decoration:none!important;
  font-weight:900!important;
}

.sms-console-filters .button{
  justify-self:start!important;
  min-height:34px!important;
  border-radius:999px!important;
  font-size:12px!important;
  padding:6px 11px!important;
  background:#f9fafb!important;
  border:1px solid var(--sms-border)!important;
  color:#344054!important;
}

.sms-console-list{
  flex:1!important;
  min-height:0!important;
  overflow:auto!important;
  padding:9px!important;
  background:#f7f8fb!important;
}

.sms-console-item{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  gap:11px!important;
  margin:0 0 8px!important;
  padding:11px!important;
  border:1px solid transparent!important;
  border-radius:16px!important;
  background:#fff!important;
  color:var(--sms-text)!important;
  text-decoration:none!important;
  box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
  transition:background .15s,border-color .15s,box-shadow .15s!important;
}

.sms-console-item:hover{
  background:#fbfdff!important;
  border-color:#dbeafe!important;
  box-shadow:0 6px 16px rgba(15,23,42,.06)!important;
  transform:none!important;
}

.sms-console-item.active{
  background:var(--sms-primary-soft)!important;
  border-color:var(--sms-primary-border)!important;
  box-shadow:inset -3px 0 0 var(--sms-primary),0 6px 16px rgba(37,99,235,.10)!important;
}

.sms-console-item.is-unread .conversation-line-new strong{color:#0f172a!important}
.sms-console-item.is-unread{border-color:#dbeafe!important;background:#fff!important}

.conversation-avatar-new{
  width:44px!important;
  height:44px!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#eef2ff,#dbeafe)!important;
  border:1px solid #dbeafe!important;
  box-shadow:none!important;
  overflow:hidden!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#1d4ed8!important;
  font-weight:950!important;
}
.conversation-avatar-new img{width:100%!important;height:100%!important;object-fit:cover!important}
.conversation-avatar-new.large{width:48px!important;height:48px!important;border-radius:16px!important}

.conversation-line-new{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  justify-content:space-between!important;
  min-width:0!important;
}

.conversation-line-new strong{
  min-width:0!important;
  font-size:14px!important;
  font-weight:900!important;
  color:var(--sms-text)!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.conversation-line-side{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  flex:0 0 auto!important;
}

.conversation-line-new time{
  font-size:10.5px!important;
  color:var(--sms-faint)!important;
  white-space:nowrap!important;
}

.conversation-tags-new{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  margin-top:5px!important;
  overflow:hidden!important;
}

.conversation-tags-new span{
  font-size:10.5px!important;
  color:#475467!important;
  background:#f2f4f7!important;
  border:0!important;
  border-radius:999px!important;
  padding:3px 7px!important;
  max-width:116px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.conversation-content-new p{
  margin:6px 0 0!important;
  color:var(--sms-muted)!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.unread-badge{
  min-width:19px!important;
  height:19px!important;
  border-radius:999px!important;
  background:var(--sms-primary)!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:950!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.sms-console-panel{
  background:#eef2f7!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  overflow:hidden!important;
}

.sms-thread-header{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px 18px!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--sms-border)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9)!important;
  min-height:70px!important;
}

.mobile-back-to-list{display:none!important}

.chat-header-text h2{
  margin:0!important;
  font-size:18px!important;
  line-height:1.15!important;
  color:var(--sms-text)!important;
  font-weight:950!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.chat-header-text p{
  margin:4px 0 0!important;
  font-size:12px!important;
  color:var(--sms-muted)!important;
}

.sms-thread-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  max-width:470px!important;
  flex-wrap:wrap!important;
}

.sms-thread-actions form{margin:0!important;display:flex!important;gap:7px!important;flex-wrap:wrap!important}

.sms-thread-actions .button,
.sms-thread-actions button{
  min-height:34px!important;
  border-radius:999px!important;
  padding:6px 11px!important;
  font-size:12px!important;
  font-weight:850!important;
  box-shadow:none!important;
  background:#fff!important;
  border:1px solid var(--sms-border)!important;
  color:#344054!important;
}

.sms-thread-actions .danger{
  background:var(--sms-danger-soft)!important;
  color:var(--sms-danger)!important;
  border-color:#fecdca!important;
}

.chat-thread-new{
  flex:1!important;
  min-height:0!important;
  overflow:auto!important;
  padding:22px clamp(18px,3.5vw,46px) 32px!important;
  background:
    radial-gradient(circle at top right,rgba(37,99,235,.07),transparent 30%),
    linear-gradient(180deg,#f7f9fc 0%,#eef2f7 100%)!important;
}

.chat-date-new{text-align:center!important;margin:10px 0 14px!important}
.chat-date-new span{
  display:inline-flex!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid var(--sms-border)!important;
  border-radius:999px!important;
  color:#667085!important;
  padding:4px 12px!important;
  font-size:11px!important;
  font-weight:800!important;
  box-shadow:0 1px 3px rgba(15,23,42,.04)!important;
}

.sms-message-new{
  display:flex!important;
  justify-content:flex-start!important;
  margin-bottom:10px!important;
}

.sms-bubble-new{
  max-width:min(720px,78%)!important;
  background:#fff!important;
  border:1px solid rgba(208,213,221,.9)!important;
  border-radius:18px 18px 5px 18px!important;
  padding:12px 13px 10px!important;
  box-shadow:0 8px 22px rgba(15,23,42,.06)!important;
}

.sms-bubble-new p{
  margin:0!important;
  font-size:14.5px!important;
  line-height:1.62!important;
  color:var(--sms-text)!important;
  word-break:break-word!important;
  white-space:pre-wrap!important;
}

.sms-meta-row-new{
  margin-top:7px!important;
  color:var(--sms-faint)!important;
  font-size:10.5px!important;
  text-align:left!important;
}

.sms-actions-new{
  margin-top:9px!important;
  padding-top:8px!important;
  border-top:1px solid #f2f4f7!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}

.sms-actions-new button{
  width:auto!important;
  min-height:28px!important;
  border-radius:999px!important;
  padding:4px 8px!important;
  font-size:11px!important;
  font-weight:850!important;
  background:#f9fafb!important;
  border:1px solid var(--sms-border)!important;
  color:#344054!important;
}

.sms-actions-new button:hover{background:#eff6ff!important;border-color:#bfdbfe!important;color:#1d4ed8!important}

.message-empty-main{
  min-height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:38px!important;
  background:linear-gradient(180deg,#f8fafc,#eef2f7)!important;
  color:var(--sms-muted)!important;
}

.message-empty-main h2{font-size:22px!important;color:var(--sms-text)!important;margin:8px 0!important}
.message-empty-main p{max-width:440px!important;margin:4px 0!important;color:var(--sms-muted)!important}
.empty-phone{font-size:52px!important;line-height:1!important}
.messages-empty-side{padding:32px 16px!important;text-align:center!important;color:var(--sms-muted)!important}
.messages-empty-side div{font-size:36px!important;margin-bottom:8px!important}
.messages-empty-side strong{display:block!important;color:var(--sms-text)!important;margin-bottom:5px!important}

.docs-customer-page,.public-dev-docs{background:#fff!important;color:#111827!important}
.docs-card{background:#fff!important;color:#111827!important;border:1px solid #e5e7eb!important;border-radius:12px!important;box-shadow:none!important}
.docs-card p,.public-dev-docs .muted{color:#4b5563!important}
.developer-docs pre{position:relative!important;background:#0f172a!important;color:#e5e7eb!important;border:1px solid #334155!important;border-radius:12px!important;padding:16px 14px!important;overflow:auto!important}
.developer-docs code{background:transparent!important;color:inherit!important;border:0!important}
.copy-code-btn{position:absolute!important;top:8px!important;left:8px!important;z-index:2!important;background:#1f2937!important;color:#fff!important;border:1px solid #374151!important;border-radius:8px!important;min-height:28px!important;padding:4px 10px!important;font-size:11px!important;font-weight:800!important}
.copy-code-btn.is-copied{background:var(--sms-ok)!important;border-color:var(--sms-ok)!important}

@media(max-width:1180px){
  .messages-page.sms-console{grid-template-columns:350px minmax(0,1fr)!important}
  .sms-console-header{padding:15px!important}
  .sms-thread-header{grid-template-columns:auto minmax(0,1fr)!important}
  .sms-thread-actions{grid-column:1/-1!important;max-width:none!important;justify-content:flex-start!important}
  .sms-bubble-new{max-width:88%!important}
}

@media(max-width:760px){
  .messages-page.sms-console{display:block!important;height:auto!important;min-height:calc(100dvh - 58px)!important;overflow:visible!important;background:#f7f8fb!important}
  .sms-console.mobile-list-open .message-chat-panel{display:none!important}
  .sms-console.mobile-conversation-open .messages-sidebar{display:none!important}
  .sms-console-sidebar{min-height:calc(100dvh - 58px)!important;border-left:0!important;box-shadow:none!important}
  .sms-console-header{position:sticky!important;top:0!important;z-index:4!important;padding:14px!important}
  .sms-console-header h1{font-size:22px!important}
  .sms-console-header p{display:none!important}
  .message-quick-stats{padding:10px 12px!important;gap:7px!important}
  .mailbox-nav{padding:10px 12px!important}
  .sms-console-filters{padding:10px 12px!important}
  .sms-console-list{padding:8px!important;background:#f7f8fb!important}
  .sms-console-item{grid-template-columns:42px minmax(0,1fr)!important;border-radius:15px!important}
  .conversation-avatar-new{width:42px!important;height:42px!important;border-radius:14px!important}
  .sms-thread-header{position:sticky!important;top:0!important;z-index:5!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;padding:10px 12px!important;min-height:auto!important}
  .mobile-back-to-list{display:inline-flex!important;grid-column:1/-1!important;width:max-content!important;min-height:30px!important;align-items:center!important;border-radius:999px!important;text-decoration:none!important;color:#2563eb!important;font-weight:850!important;font-size:13px!important}
  .sms-thread-actions,.sms-thread-actions form{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;max-width:none!important;grid-column:1/-1!important}
  .sms-thread-actions .button,.sms-thread-actions button{width:100%!important;justify-content:center!important}
  .chat-thread-new{padding:14px 10px 26px!important;min-height:calc(100dvh - 122px)!important}
  .sms-bubble-new{max-width:94%!important;border-radius:17px 17px 5px 17px!important}
  .mailbox-nav{display:grid!important;grid-template-columns:1fr 1fr!important;overflow:visible!important}
  .mailbox-nav .button{min-width:0!important;justify-content:center!important}
}

@media(max-width:420px){
  .sms-console-header{align-items:center!important}
  .sms-console-header .button{padding-inline:11px!important;font-size:12px!important}
  .message-quick-stats strong{font-size:16px!important}
  .message-quick-stats span{font-size:10px!important}
  .conversation-tags-new span{max-width:94px!important}
  .sms-thread-actions,.sms-thread-actions form{grid-template-columns:1fr!important}
  .sms-bubble-new{max-width:100%!important}
}