.light {
    &.session-list-wrapper {
        background-color: var(--td-brand-color-1);
    }

    &.session-window-wrapper {
        background-color: var(--td-font-white-1);
    }
}

.dark {
    &.session-list-wrapper {
        background-color: var(--td-bg-color-page);
    }

    &.session-window-wrapper {
        background-color: var(--td-bg-color-page);
    }
}

.session-window-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: 100%;
    position: relative;
}

.session-header {
    position: relative;
    padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl);
    border-bottom: 1px solid var(--td-component-border);

    .welcome {
        font-size: var(--td-font-size-title-large);
        font-weight: 700;
    }

    .sub-title {
        font-size: var(--td-font-size-body-small);
        font-weight: 400;
    }
}

.session-container {
    min-height: 100vh;
}

// session list start 
.session-list-wrapper {
    min-height: 100vh;
    padding: var(--td-size-6);
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: 100%;
    position: relative;
}

.session-title {
    position: relative;
    padding-top: var(--td-size-7);
    padding-bottom: var(--td-size-7);

    .welcome {
        font-size: var(--td-font-size-title-large);
        font-weight: 700;
    }

    .sub-title {
        font-size: var(--td-font-size-body-small);
        font-weight: 400;
    }
}

.kf-session-list-card {
    & .msg-ellipsis {
        text-overflow: ellipsis;
        overflow: hidden;
        color: var(--td-gray-color-6)
    }
    & .msg-time {
        color: var(--td-gray-color-6)
    }
}

.kf-selected-session {
    & .t-card--bordered {
        border: 2px solid var(--td-brand-color-5);
    }
}

// session list end

// session window start
.session-body {
    flex: 1 1;
    padding: 20px;
    overflow: auto;

    & .message-card {
        & .session-avatar {
            margin-top: var(--td-comp-margin-s);
        }

        & .session-content {
            margin-top: var(--td-comp-margin-s);
            max-width: 60%;
            width: fit-content;
            padding: var(--td-comp-paddingLR-s) var(--td-comp-paddingTB-l);
            border: 1px solid var(--td-component-border);
            border-radius: var(--td-radius-large);

            & .session-content-text {}
        }
    }
}

.send {
    align-items: flex-end;
    display: flex;
    flex-direction: column;

    & .session-content {
        background-color: var(--td-brand-color-1);
    }
}

.recv {
    & .session-content {
        background-color: var(--td-gray-color-1);
    }
}

.session-input {
    border-top: 1px solid var(--td-component-border);
    width: 100%;
    padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l);
    position: relative;

    & .tools {
        margin-bottom: var(--td-comp-margin-s);        
    }

    & .inner {
        & .t-textarea__inner {
            height: 10vh;
        }

        & .send-button {
            border-radius: var(--td-radius-large);
            position: absolute;
            right: var(--td-comp-size-s);
            bottom: var(--td-comp-size-xxxs);
        }
    }
}

// session window end