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

.chatList {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    width: 40%;
    background-color: $color-dark-surface-container;
    height: 100%;
    z-index: 1000;
    min-height: 0; // allow children to manage their own scrolling
    position: relative; // provide positioning context for absolute children
    overflow: hidden;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;

    .chatHeaderLeft {
        display: flex;
        color: white;
        font-size: 25px;
        background-color: $color-dark-surface-container;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 16px;
        user-select: none;

        .logo {
            $size: 35px;

            width: $size;
            height: $size;
            margin-right: 8px;
        }

        .productName {
            flex-grow: 1;
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(45deg, #9333EA, #6366F1, #3B82F6, #A855F7, #D946EF, #EC4899, #C084FC, #7E22CE);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
        }

        .profile {
            a {
                display: flex;
                align-items: center;
                text-decoration: none;
                transition: transform 0.3s ease;

                &:hover {
                    transform: scale(1.05);
                }

                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    object-fit: cover;
                    border: 2px solid rgba($color-dark-primary, 0.4);
                    box-shadow: 0 0 15px rgba($color-dark-primary, 0.3);
                    transition: all 0.3s ease;

                    &:hover {
                        box-shadow: 0 0 25px rgba($color-dark-primary, 0.5);
                        border-color: rgba($color-dark-primary, 0.6);
                    }
                }
            }
        }
    }

    .unifiedChatsList {
        flex: 1;
        min-height: 0; // allow scroll area to size correctly
        overflow-y: auto;
        margin-top: 10px;
    }

    // Search container
    .searchContainer {
        position: relative;
        flex-shrink: 0;
        height: 48px + 8px;

        .searchLoading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 32px;
            color: $color-dark-on-surface-variant;

            mdui-circular-progress {
                --mdui-circular-progress-color: $color-dark-primary;
            }
        }

        .searchEmpty,
        .searchHint {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px;
            color: $color-dark-on-surface-variant;
            text-align: center;
            overflow: hidden;
        }

        // Custom styling for search result images
        mdui-list-item {
            .searchResultContainer {
                display: flex;

                .searchResult {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin: 8px 12px;
                    box-sizing: border-box;
    
                    .searchResultIcon {
                        position: relative;
                        width: 40px;
                        height: 40px;
                        display: flex;
                        margin-right: 16px;

                        .searchResultIconImg {
                            width: 40px;
                            height: 40px;
                            border-radius: 50%;
                            object-fit: cover;
                        }
                    }
    
                    .searchResultBody {
                        display: flex;
                        flex-direction: column;

                        .searchResultHeadline {
                            display: flex;
                            align-items: center;
                            gap: 6px;
                        }
        
                        .searchResultDescription {
                            display: flex;
                            align-items: center;
                        }
                    }
                }
            }
        }
    }


    mdui-bottom-app-bar {
        position: relative;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        margin-top: auto;
    }
}


// Description styling for list items
.listDescription {
    word-wrap: break-word;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}