.sms-screen {
    
    &__viewport {
        display: flex;
        flex-direction: column;
        height: 100%; 
        position: relative; 
        background-color: #f5f5f5; 
    }
    
    &__content-area {
        flex-grow: 1;
        overflow-y: auto;
        padding-top: 30px; 
    }

    &__header-sticky {
        padding: 10px; 
        border-bottom: 1px solid #e0e0e0; 
        display: flex; 
        align-items: center; 
        gap: 10px;
        position: sticky; 
        top: 0; 
        background: white; 
        z-index: 10;
    }
    
    &__avatar {
        width: 25px; 
        height: 25px; 
        border-radius: 50%; 
        background: #9DCCDC; 
        color: #fff; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        font-size: 10px;
        flex-shrink: 0;
    }

    &__contact-name {
        font-weight: bold;
    }
    
    &__messages-container {
        padding: 10px; 
        padding-top: 10px;
        padding-bottom: 60px; 
    }

    // Séparateur de date
    &__date-separator {
        text-align: center; 
        margin: 15px 0; 
        font-size: 12px; 
        color: #94a3b8;
    }

    &__message-sent-wrapper {
        max-width: 80%; 
        margin-left: auto;
        margin-bottom: 8px;
    }

    &__input-bar-sticky {
        padding: 10px; 
        border-top: 1px solid #e0e0e0; 
        background: white; 
        display: flex; 
        align-items: center; 
        gap: 10px;         
        position: absolute; 
        bottom: 0; 
        left: 0; 
        right: 0;
        z-index: 10; 
    }

    &__input-field {
        flex-grow: 1; 
        background: #f5f5f5; 
        border-radius: 20px; 
        padding: 8px 12px; 
        font-size: 14px; 
        color: #2c5974; 
    }
    
    &__icon-primary {
        color: #2c5974;
        
        &.sms-screen__icon-large {
            font-size: 24px;
        }

        &:not(.sms-screen__icon-large) {
            font-size: 18px;
        }
    }

}