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

#chat-interface {
    height: 100%;
    background: linear-gradient(135deg, $color-dark-background 0%, $color-dark-surface-container 70%, rgba($color-dark-primary-container, 0.3) 100%);
    position: relative;
    
    &::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 20% 80%, rgba($color-dark-primary, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba($color-dark-tertiary, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba($color-dark-secondary, 0.1) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }

    .chat-container {
        display: flex;
        width: 100%;
        flex-direction: column;
        overflow: hidden;

        .chat-main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
    }
}

// Panel chat styles
// контейнер чата и панели с чатами
.all-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}