app-message-chat {
    ion-header {
        ion-icon {
            margin-right: 5px !important;
        }

        ion-accordion-group {
            width: auto;
            margin: auto;

            ion-accordion {
                background: none;
                text-align: right;

                ion-item {
                    --background: none;
                    margin: var(--ion-margin-0);
                    padding: var(--ion-padding-0);
                    width: auto;
                    --min-height: auto;

                    ion-label {
                        margin: var(--ion-margin-0);
                        padding: 6px 10px;
                        font-size: var(--ion-font-size-14) !important;
                    }

                    .ion-accordion-toggle-icon {
                        display: none;
                    }
                }

                >ion-item {
                    width: 25px;
                    padding: var(--ion-padding-0);
                    margin: var(--ion-margin-0);
                    display: inline-block;

                    ion-icon {
                        color: #fff;
                    }
                }
            }
        }

        ion-toolbar {
            ion-title {
                &.back-btn {
                    padding-right: 35px;
                }
            }
        }
    }

    ion-content {

        .left-right-p {
            display: flex;
            padding: 6px 8px;
            background: #e7f7fe;
            border-radius: 4px;
            width: fit-content;
        }


        .msg-content {
            color: var(--ion-content-color);
            font-size: 10px;
            font-weight: 400;
            margin: 5px 0 0 10px;
            display: flex;
            white-space: nowrap;
            align-items: flex-end;
        }

        .chat-data {
            margin: 0;
            font-size: var(--ion-font-size-14) !important;
            color: #000 !important;
            display: flex;
            word-break: break-word;
            white-space: normal;
            padding-bottom: 5px;
        }


        .left-data {
            display: flex;
            margin-top: var(--ion-margin-10);

            .icons {
                width: 30px;
                height: 30px;
                padding: var(--ion-padding-0);
                background: var(--ion-background-content);
                border-radius: var(--ion-border-radius-100);
                color: var(--ion-color);
                margin-right: var(--ion-margin-10);
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .content {
                width: calc(100% - 40px);

                p {
                    margin: var(--ion-margin-0);
                    justify-content: flex-start;
                }
            }
        }

        .right-data {
            display: flex;
            justify-content: flex-end;

            p {
                margin: var(--ion-margin-10) var(--ion-margin-0) var(--ion-margin-0) var(--ion-margin-0);
                justify-content: flex-end;
            }
        }

        ion-list {
            background: transparent !important;

            .separator {
                span {
                    font-size: var(--ion-font-size-12);
                    margin-top: 10px;
                    display: inline-block;
                    background: #ececec;
                    padding: 5px 10px;
                    border-radius: 10px;
                }
            }
        }
    }

    ion-footer {
        position: relative;
        margin-bottom: 10px;

        ion-textarea {
            background: #e7f7fe !important;
            padding: 10px;
            margin: var(--ion-margin-0) !important;

            &.has-focus {
                --highlight-color-focused: none;
                --highlight-color-valid: none;
            }

            .textarea-wrapper {
                min-height: 30px !important;
                max-height: 120px !important;
            }

            textarea {
                padding: 10px 40px 10px 10px !important;
                border: 1px solid #aeb6bf !important;
                border-radius: 5px !important;
            }
        }

        ion-icon {
            position: absolute;
            right: 18px;
            bottom: 18px;
            z-index: 9;
            font-size: 27px;
            color: var(--ion-color);
        }
    }
}