.sms-inbox {
  --inbox-border: var(--border-color, #dce3eb);
  --inbox-muted: var(--text-secondary, #526174);
  --inbox-surface: var(--surface, #fff);
  --inbox-tint: #f4f7fb;
  display: grid;
  gap: 16px;
  min-width: 0;
}
.sms-inbox *, .sms-inbox *::before, .sms-inbox *::after { box-sizing: border-box; }
.sms-inbox h1, .sms-inbox h2, .sms-inbox h3, .sms-inbox p { margin: 0 0 10px; }
.sms-inbox h1 { font-size: 25px; }
.sms-inbox h2 { font-size: 18px; }
.sms-inbox h3 { font-size: 15px; }
.sms-inbox button, .sms-inbox input, .sms-inbox select, .sms-inbox textarea { max-width: 100%; }
.sms-inbox button { white-space: normal; }
.sms-inbox button:focus-visible, .sms-inbox a:focus-visible, .sms-inbox summary:focus-visible { outline: 3px solid #377bca; outline-offset: 3px; }
.sms-inbox-header, .sms-inbox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sms-inbox-header { justify-content: space-between; align-items: flex-start; }
.sms-inbox-actions { margin: 8px 0; }
.sms-inbox-actions h2 { margin: 0; }
.sms-inbox-help, .sms-inbox-scope, .sms-inbox-message-address { color: var(--inbox-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.sms-inbox-notice { padding: 12px 14px; border: 1px solid #a6ccb8; border-radius: 8px; background: #f1faf5; color: #26573c; }
.sms-inbox-error { padding: 8px 10px; border-left: 3px solid #ad3434; background: #fff5f5; color: #872626; overflow-wrap: anywhere; }
.sms-inbox-warning { color: #77531c; background: #fff4d9; padding: 6px 8px; border-radius: 5px; }
.sms-inbox-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; margin: 0; }
.sms-inbox-counts > div { border: 1px solid var(--inbox-border); background: var(--inbox-surface); border-radius: 8px; padding: 10px 12px; }
.sms-inbox-counts dt { color: var(--inbox-muted); font-size: 12px; }
.sms-inbox-counts dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sms-inbox-filters, .sms-inbox-admin { background: var(--inbox-surface); border: 1px solid var(--inbox-border); border-radius: 10px; padding: 14px; }
.sms-inbox summary { cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.sms-inbox details[open] > summary { margin-bottom: 14px; }
.sms-inbox-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; margin: 10px 0; }
.sms-inbox-field { display: flex; min-width: 0; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; flex: 1 1 180px; }
.sms-inbox-field input, .sms-inbox-field select, .sms-inbox-field textarea {
  width: 100%; min-width: 0; border: 1px solid #bcc8d5; border-radius: 6px; padding: 9px 10px;
  background: var(--inbox-surface); color: inherit; font: inherit; font-weight: 400; font-size: 14px;
}
.sms-inbox-field textarea { resize: vertical; line-height: 1.5; min-height: 105px; }
.sms-inbox-field input:disabled, .sms-inbox-field select:disabled, .sms-inbox-field textarea:read-only { background: #edf1f6; }
.sms-inbox-check { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; font-size: 13px; line-height: 1.5; }
.sms-inbox-check input { flex: 0 0 auto; margin-top: 3px; }
.sms-inbox-panes { display: grid; grid-template-columns: minmax(270px, 0.8fr) minmax(0, 1.6fr); align-items: start; gap: 14px; min-width: 0; }
.sms-inbox-list-pane, .sms-inbox-detail-pane { min-width: 0; background: var(--inbox-surface); border: 1px solid var(--inbox-border); border-radius: 10px; overflow: hidden; }
.sms-inbox-pane-heading, .sms-inbox-pane-footer { padding: 16px; }
.sms-inbox-pane-heading { border-bottom: 1px solid var(--inbox-border); }
.sms-inbox-pane-heading > p { font-size: 12px; }
.sms-inbox-thread-list { max-height: min(75vh, 920px); min-height: 180px; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; }
.sms-inbox-conversation { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--inbox-border); background: transparent; color: inherit; text-align: left; padding: 14px; cursor: pointer; }
.sms-inbox-conversation:hover { background: var(--inbox-tint); }
.sms-inbox-conversation.is-selected { background: #eaf2ff; box-shadow: inset 3px 0 #2c6dc0; }
.sms-inbox-conversation-title { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.sms-inbox-conversation-title time { color: var(--inbox-muted); font-size: 11px; font-weight: 400; }
.sms-inbox-conversation .sms-inbox-scope { display: block; margin-top: 5px; }
.sms-inbox-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; margin: 7px 0; white-space: pre-wrap; }
.sms-inbox-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.sms-inbox-badge { display: inline-block; padding: 3px 7px; border: 1px solid var(--inbox-border); border-radius: 20px; background: #f4f6f9; color: #35465b; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.sms-inbox-badge.sms-inbox-unread { background: #e6eeff; border-color: #b5c9ed; color: #244b89; }
.sms-inbox-badge.sms-inbox-warning { background: #fff4d9; border-color: #e6d5ad; color: #77531c; }
.sms-inbox-workflow { margin-top: 12px; font-size: 13px; }
.sms-inbox-workflow fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sms-inbox-workflow form { padding: 10px 0; }
.sms-inbox-history { height: min(60vh, 670px); min-height: 250px; overflow-y: auto; overflow-x: hidden; overflow-anchor: none; overscroll-behavior: contain; padding: 16px; background: #f7f9fc; }
.sms-inbox-message { width: fit-content; max-width: 92%; padding: 12px; margin: 10px 0; border: 1px solid var(--inbox-border); border-radius: 12px; background: var(--inbox-surface); overflow-wrap: anywhere; }
.sms-inbox-message.is-outbound { margin-left: auto; background: #edf4ff; border-color: #cbdcf4; }
.sms-inbox-message header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 12px; }
.sms-inbox-message time { font-size: 11px; color: var(--inbox-muted); }
.sms-inbox-message-body { margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font: inherit; font-size: 14px; line-height: 1.6; }
.sms-inbox-message footer { font-size: 11px; line-height: 1.6; color: var(--inbox-muted); }
.sms-inbox-reply { border-top: 1px solid var(--inbox-border); padding: 16px; }
.sms-inbox-receipt { border: 1px solid #b8cfbb; border-radius: 8px; padding: 12px; margin-bottom: 12px; background: #f5faf5; }
.sms-inbox-receipt p { font-size: 12px; line-height: 1.6; }
.sms-inbox-empty { padding: 28px 18px; color: var(--inbox-muted); text-align: center; }
.sms-inbox-bindings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 12px; }
.sms-inbox-bindings article { min-width: 0; border: 1px solid var(--inbox-border); padding: 12px; border-radius: 7px; }
.sms-inbox-bindings p { font-size: 12px; overflow-wrap: anywhere; }
.sms-inbox-admin code { overflow-wrap: anywhere; white-space: normal; }
.sms-inbox [data-mobile-back] { display: none; }
@media (max-width: 850px) {
  .sms-inbox-panes { grid-template-columns: minmax(0, 1fr); }
  .sms-inbox-panes:not(.show-thread) .sms-inbox-detail-pane { display: none; }
  .sms-inbox-panes.show-thread .sms-inbox-list-pane { display: none; }
  .sms-inbox [data-mobile-back] { display: inline-flex; margin-bottom: 12px; }
  .sms-inbox-thread-list { max-height: 65vh; }
  .sms-inbox-history { height: 52vh; }
}
@media (max-width: 480px) {
  .sms-inbox { gap: 12px; }
  .sms-inbox-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sms-inbox-fields { grid-template-columns: minmax(0, 1fr); }
  .sms-inbox-pane-heading, .sms-inbox-reply, .sms-inbox-history { padding: 12px; }
  .sms-inbox-message { max-width: 97%; }
  .sms-inbox-actions { gap: 8px; }
  .sms-inbox-actions .sms-inbox-field { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sms-inbox *, .sms-inbox *::before, .sms-inbox *::after { scroll-behavior: auto !important; transition: none !important; }
}
