@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.monochrome-sns {
    margin: 20px auto 0;
    width: 300px;
    height: auto;
    background: #fff;
    font-family: 'montserrat';
    border: 1px solid rgb(232, 232, 232);
}

.monochrome-sns__header {
    background: rgb(215, 214, 214);
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-family: 'montserrat';
}

.monochrome-sns_right .monochrome-sns__header {
    flex-direction: row;
    justify-content: right;
    text-align: right;
}

.monochrome-sns_left .monochrome-sns__header {
    flex-direction: row-reverse;
    justify-content: left;
}

.monochrome-sns__header_username {
    text-transform: uppercase;
    font-size: 14px;
    color: rgb(60, 60, 60);
    font-weight: 700;
}

.monochrome-sns__header_status {
    font-size: 9px;
    font-style: italic;
    color: rgb(92, 92, 92);
    font-weight: 600;
}

.monochrome-sns__header_icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 10px;
    border: 2px solid rgb(235, 235, 235);
}

.monochrome-sns__header_icon img {
    max-width: 35px;
    min-height: 35px;
    object-fit: cover;
}

.monochrome-sns__dialog {
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.monochrome-sns_right .monochrome-sns__dialog {
    justify-content: end;
}

.monochrome-sns__dialog_time {
    width: 100%;
    font-size: 8px;
    color: rgb(203 203 203);
    letter-spacing: 2px;
    font-weight: 600;
}

.monochrome-sns_right .monochrome-sns__dialog_time {
    text-align: right;
}

.monochrome-sns__dialog_message {
    margin: 2px 0;
    color: rgb(57, 57, 57);
    padding: 5px;
    font-size: 11px;
    font-weight: 500;
    max-width: 85%;
    border-radius: 0 7px 7px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.monochrome-sns_right .monochrome-sns__dialog_message {
    border-radius: 7px 0 7px 7px;
    text-align: right;
}

.monochrome-sns__dialog_message img {
    margin: 0 3px;
}

.monochrome-sns__dialog_message_img {
    max-width: 100%;
    margin: 3px 0 !important;
}

.monochrome-sns__dialog_missed-call {
    width: 100%;
    text-align: center;
    margin: 10px 0;
    font-size: 8px;
    color: rgb(181, 64, 64);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}