/* SMS Inbox — page-specific additions on top of the shared vx design system.
   Loaded globally via app.js alongside vx-design-system.css (see rationale there). */

.sms-shell { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; height: calc(100vh - 260px); min-height: 480px; max-height: 780px; align-items: stretch; }
@media (max-width: 900px) {
    .sms-shell { grid-template-columns: 1fr; }
    .sms-shell .sms-thread-pane { display: none; }
    .sms-shell.sms-mobile-open .sms-list-pane { display: none; }
    .sms-shell.sms-mobile-open .sms-thread-pane { display: flex; }
}

/* <turbo-frame> is an unstyled custom element (defaults to display:inline),
   so without this it won't stretch to fill its grid cell. */
.sms-shell > turbo-frame { display: flex; flex-direction: column; min-height: 0; }

.sms-list-pane { display: flex; flex-direction: column; border-right: 1px solid #EEF1F6; min-width: 0; min-height: 0; }
.sms-list-search { padding: 14px 16px; border-bottom: 1px solid #EEF1F6; }
.sms-list-body { flex: 1; overflow-y: auto; min-height: 0; }

.sms-thread-row { display: flex; gap: 12px; padding: 13px 16px; cursor: pointer; border-left: 3px solid transparent; text-decoration: none; color: inherit; }
.sms-thread-row:hover { background: #F7F9FC; text-decoration: none; color: inherit; }
.sms-thread-row.active { border-left-color: #3B6EF6; background: #F5F8FF; }
.sms-thread-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex-shrink: 0; }
.sms-thread-body { min-width: 0; flex: 1; }
.sms-thread-top { display: flex; align-items: center; gap: 8px; }
.sms-thread-name { font-size: 14px; font-weight: 600; color: #1C2540; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-thread-row.unread .sms-thread-name { font-weight: 800; }
.sms-thread-time { margin-left: auto; font-size: 11.5px; color: #94A0B8; flex-shrink: 0; }
.sms-thread-bottom { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.sms-thread-last { font-size: 12.5px; color: #94A0B8; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sms-thread-row.unread .sms-thread-last { color: #3D486A; font-weight: 600; }
.sms-thread-unread-badge { margin-left: auto; flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #3B6EF6; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.sms-thread-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #FBFCFE; }
.sms-thread-header { display: flex; align-items: center; gap: 13px; padding: 14px 22px; border-bottom: 1px solid #EEF1F6; background: #fff; flex-shrink: 0; }
.sms-thread-header-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; flex-shrink: 0; }
.sms-thread-header-name { font-size: 15px; font-weight: 800; color: #1C2540; }
.sms-thread-header-phone { font-size: 12.5px; color: #8892A8; }
.sms-thread-header-units { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.sms-unit-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: #fff; border: 1px solid #E7ECF4; border-radius: 10px; font-size: 12px; color: #6b7280; text-decoration: none; }

.sms-messages { flex: 1; overflow-y: auto; min-height: 0; padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.sms-date-divider { text-align: center; font-size: 12px; color: #A9B4C8; margin: 4px 0; }
.sms-bubble-row { display: flex; }
.sms-bubble-row.outbound { justify-content: flex-end; }
.sms-bubble-row.inbound { justify-content: flex-start; }
.sms-bubble-wrap { max-width: 70%; }
.sms-bubble { padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; word-wrap: break-word; }
.sms-bubble-row.outbound .sms-bubble { background: #3B6EF6; color: #fff; border-bottom-right-radius: 5px; }
.sms-bubble-row.inbound .sms-bubble { background: #F1F4F9; color: #1C2540; border-bottom-left-radius: 5px; }
.sms-bubble-time { font-size: 11px; color: #A9B4C8; margin-top: 5px; }
.sms-bubble-row.outbound .sms-bubble-time { text-align: right; }
.sms-bubble-row.inbound .sms-bubble-time { text-align: left; }

.sms-reply-bar { padding: 14px 22px; border-top: 1px solid #EEF1F6; background: #fff; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sms-reply-input { flex: 1; height: 42px; padding: 0 16px; border: 1px solid #D9E0EC; border-radius: 21px; font-size: 14px; font-family: inherit; background: #F7F9FC; outline: none; color: #1C2540; resize: none; }
.sms-reply-input:focus { border-color: #3B6EF6; background: #fff; }
.sms-reply-send { width: 42px; height: 42px; border-radius: 50%; background: #3B6EF6; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; border: none; }
.sms-reply-send:hover:not(:disabled) { background: #2F5BD8; }
.sms-reply-send:disabled { background: #C4CFE4; cursor: not-allowed; }

.sms-compose-chip { padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid #D8E0F0; color: #59647E; background: #fff; }
.sms-compose-chip.active { background: #3B6EF6; border-color: #3B6EF6; color: #fff; }
.sms-compose-result { display: flex; align-items: center; gap: 11px; padding: 10px 13px; cursor: pointer; border-bottom: 1px solid #F3F5FA; }
.sms-compose-result:hover { background: #F7F9FC; }