/*
Summary
- Layout/visual styles for the customer SMS inbox (issue #782, Wave 4).
- Mirrors the three-pane grid in docs/feat-issue-737/mockups/customer-sms-inbox.html.
- Portal.NS must reference this file: <link href="_content/TIP.App.Sms.UI/sms-inbox.css" rel="stylesheet" />
*/

.sms-inbox-grid {
    position: relative;
    display: grid;
    grid-template-columns: 220px 320px 1fr;
    grid-template-rows: 100%;
    overflow: hidden;
}

/* Issue #1233: docked New Message panel, resize placement (mockup Frame 3, Albert's pick over
   overlay). ThreadView narrows but stays visible and interactive rather than being dimmed. */
.sms-inbox-grid-panel-open {
    grid-template-columns: 220px 320px minmax(220px, 1fr) 380px;
}

.sms-newmsg-panel {
    border-left: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    background-color: var(--mud-palette-surface, #fff);
}

.sms-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
}

.sms-pane:last-child {
    border-right: none;
}

.sms-pane-header {
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    flex-shrink: 0;
}

.sms-pane-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.sms-pane-numbers {
    background-color: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
}

.sms-pane-thread {
    flex: 1 1 auto;
}

.sms-pane-composer {
    border-top: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    flex-shrink: 0;
}

.sms-message-row {
    display: flex;
    margin-bottom: 8px;
}

.sms-message-row.sms-message-inbound {
    justify-content: flex-start;
}

.sms-message-row.sms-message-outbound {
    justify-content: flex-end;
}

.sms-message-bubble {
    max-width: 65%;
    padding: 8px 12px;
    border-radius: 12px;
}

.sms-message-inbound .sms-message-bubble {
    background-color: var(--mud-palette-background-grey, #eef0f2);
}

.sms-message-outbound .sms-message-bubble {
    background-color: var(--mud-palette-primary-lighten, #d6e4ff);
}

.sms-message-media {
    display: block;
    max-width: 260px;
    max-height: 260px;
    border-radius: 8px;
    object-fit: contain;
}

.sms-delivery-status {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
}

.sms-backfill-btn {
    border-style: dashed;
}

@media (max-width: 960px) {
    .sms-inbox-grid,
    .sms-inbox-grid-panel-open {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
    }

    .sms-pane {
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    }

    /* Issue #1233, mockup Frame 4: below the existing collapse point the panel takes the full
       column as a sheet, matching how ThreadView itself already takes over the screen here. */
    .sms-newmsg-panel {
        border-left: none;
        position: absolute;
        inset: 0;
        z-index: 10;
    }
}