/* New Chat Message */
.box-chat-message {
    @apply space-y-4;

    .chat-title {
        @apply text-2xl font-bold text-center;
    }

    .chat-input-container {
        @apply max-w-[700px] border border-primary rounded-md;
    }
}

.chat-input-container {
    @apply w-full p-1.5 mx-auto;
}

.message-type-box {
    @apply bg-transparent ring-0 text-dark outline-none border-0 w-full text-sm;
}

/* Chat Message List */
.box-chat-container {
    @apply max-w-screen relative max-h-[660px];

    .box-chat-left {
        @apply w-1/4 shrink-0 border-e border-border hidden lg:block;
    }

    .box-chat-right {
        @apply w-full lg:w-3/4;

        .current-chat-title {
            @apply p-3 border-b border-border flex items-center justify-between ;
        }

        .chat-input-container {
            @apply py-0;
        }
    }
}

.list-chat-history {
    @apply overflow-auto max-h-[624px];

    .list-chat-item {
        @apply hover:bg-lightprimary hover:text-primary px-5 py-3 flex items-start justify-between transition-all duration-300 cursor-pointer;

        &.active-chat {
            @apply bg-lightprimary text-primary;
        }


        a {
            @apply text-sm truncate inline-block overflow-hidden text-ellipsis;
        }
    }
}

.list-chat-message {
    @apply space-y-2 flex flex-col p-3;

    .chat-message-container {
        @apply flex flex-col space-y-2;
    }

    .chat-message {
        @apply py-1.5 px-2 bg-lightgray dark:bg-darkgray rounded-md inline-flex items-center gap-2 text-primary text-sm self-start;

        &.user-message {
            @apply bg-primary text-secondary self-end;
        }

        .markdown-content {
            @apply text-dark dark:text-white;

            p {
                @apply mb-2 last:mb-0;
            }

            ul, ol {
                @apply mb-2 ml-4 last:mb-0;
            }

            li {
                @apply mb-1 last:mb-0;
            }

            ul {
                @apply list-disc;
            }

            ol {
                @apply list-decimal;
            }

            h1, h2, h3, h4, h5, h6 {
                @apply font-bold mb-2 mt-3 first:mt-0;
            }

            h1 { @apply text-2xl; }
            h2 { @apply text-xl; }
            h3 { @apply text-lg; }
            h4 { @apply text-base; }
            h5 { @apply text-sm; }
            h6 { @apply text-xs; }

            code {
                @apply bg-darkgray dark:bg-lightgray px-1 py-0.5 rounded text-xs font-mono;
            }

            pre {
                @apply bg-darkgray dark:bg-lightgray p-2 rounded overflow-x-auto mb-2;
            }

            blockquote {
                @apply border-l-4 border-primary pl-4 italic mb-2;
            }

            a {
                @apply text-primary underline;
            }
        }
    }
}