@use "../../../css/colors" as *;
@use "../../../css/material" as *;
@use "sass:color";

.chat-main {
    .chat-header {
        padding: 16px;
        background: rgba($color-dark-surface-container, 0.8);
        backdrop-filter: blur(20px);
        display: flex;
        align-items: center;
        box-shadow: 0 4px 20px rgba($color-dark-primary, 0.1);
        position: relative;
        z-index: 1;

        .chat-header-avatar {
            width: 45px;
            height: 45px;
            border-radius: 20%;
            object-fit: cover;
            margin-right: 1rem;
        }

        .chat-header-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex: 1;

            .info-chat {
                display: flex;
                flex-direction: column;

                h4 {
                    font-size: 1.1rem;
                    margin: 0 0 0.2rem;
                }

                p {
                    margin: 0;
                    font-size: 0.8rem;
                    color: #718096;
                }
            }

            .online-status {
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: $success;
                margin-right: 5px;
            }

            a {
                display: flex;
                flex-direction: row;
                text-decoration: none;
                color: white;
                justify-content: end;
                padding: 0;
                margin: 0;
                position: absolute;
                right: 2%;
                top: 2%;

                &:hover {
                    border: none;
                }
            }
        }
    }

    .chat-messages {
        flex: 1;
        padding: 10px 20px;
        overflow-y: auto;
        position: relative;
        z-index: 1;

        &::-webkit-scrollbar {
            width: 7px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background-color: $color-dark-surface-container-high;
            border-radius: 20px;
        }
    }

    .file-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        background: rgba(0, 0, 0, 0.5);
        
        z-index: 100;
        
        backdrop-filter: blur(20px);

        .file-overlay-wrapper {
            border-radius: 30px;
            outline: 3px dashed $color-dark-primary;
            outline-offset: -20px;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .file-overlay-inner {
                display: flex;
                gap: 12px;
                align-items: center;
                padding: 12px 16px;
                background: rgba(18, 18, 18, 0.8);
                border: 1px solid $color-dark-surface-container-high;
                border-radius: 12px;
                color: $color-dark-on-surface;

                mdui-icon {
                    color: $color-dark-primary;
                }
            }
        }
    }
}