/*
    📐 CSS variables to control the layout of your theme.
*/
.nlux-AiChat-root.nlux-theme-dev {

    /** 👇 Welcome message */
    --nlux-WelcomeMessage-Avatar--Width: 60px;
    --nlux-WelcomeMessage-PersonaName--FontSize: 22px;
    --nlux-WelcomeMessage-PersonaName--FontWeight: 700;
    --nlux-WelcomeMessage-Text--FontSize: 18px;
    --nlux-WelcomeMessage-Text--FontWeight: 400;
    --nlux-WelcomeMessage--Gap: 5px;

    /** 👇 Loader */
    --nlux-ChatRoom-Loader--Width: 25px;

    /** 👇 Exceptions box ( displayed when an error occurs ) */
    --nlux-Exceptions--Padding: 5px;
    --nlux-Exceptions--BorderWidth: 5px;
    --nlux-Exceptions--BorderRadius: 8px;

    /** 👇 Conversation starters */
    --nlux-ConversationStarter--Padding: 0 10px;
    --nlux-ConversationStarter--BorderRadius: 50px;
    --nlux-ConversationStarter--BorderWidth: 5px;
    --nlux-ConversationStarter--Gap: 12px;
    --nlux-ConversationStarter--Width: 160px;
    --nlux-ConversationStarter--Height: 101px;

    /** 👇 Conversation content */
    --nlux-ChatRoom--LineHeight: 1.4;
    --nlux-ChatRoom--FontWeight: 400;
    --nlux-ChatRoom--FontFamily: 'Merienda', cursive;
    --nlux-ChatRoom--FontSize: 16px;

    --nlux-ChatRoom--Padding: 20px;
    --nlux-ChatRoom--BorderRadius: 8px;
    --nlux-ChatRoom--BorderWidth: 5px;

    /** 👇 Chat item */
    --nlux-ChatItem--AlignItems: flex-end;

    /** 👇 Chat item avatar */
    --nlux-ChatItem-Avatar--Width: 30px;
    --nlux-ChatItem-Avatar--BorderRadius: 50%;
    --nlux-ChatItem-Avatar--BorderWidth: 5px;

    /** 👇 Chat item message */
    --nlux-ChatItem-Message--Gap: 12px; /** Gap between elements within message */

    /** 👇 Participant info in chat */
    --nlux-ChatItem-ParticipantInfo--Gap: 12px;
    --nlux-ChatItem-ParticipantInfo--Padding: 0px;
    --nlux-ChatItem-ParticipantName--FontSize: 20px;
    --nlux-ChatItem-ParticipantName--FontWeight: 700;

    /** 👇 Chat item message in bubbles display layout */
    --nlux-ChatItem-Message-BubbleLayout--BorderWidth: 5px;
    --nlux-ChatItem-Message-BubbleLayout--BorderRadius: 8px;
    --nlux-ChatItem-Message-BubbleLayout--PaddingTopBottom: 10px;
    --nlux-ChatItem-Message-BubbleLayout--PaddingLeftRight: 15px;

    /** 👇 Chat item message in list display layout */
    --nlux-ChatItem-Message-ListLayout--BorderWidth: 2px;
    --nlux-ChatItem-Message-ListLayout--BorderRadius: 2px;
    --nlux-ChatItem-Message-ListLayout--PaddingTopBottom: 5px;
    --nlux-ChatItem-Message-ListLayout--PaddingLeftRight: 10px;
    --nlux-ChatItem-Message-ListLayout--MarginTop: 10px;
    --nlux-ChatItem-Message-ListLayout--MarginBottom: 10px;
    --nlux-ChatItem-Message-ListLayout--MarginLeft: 10px;
    --nlux-ChatItem-Message-ListLayout--MarginRight: 10px;

    /** 👇 Divider between conversation and composer */
    --nlux-ChatRoom-Divider--MarginTop: 10px;
    --nlux-ChatRoom-Divider--MarginBottom: 10px;
    --nlux-ChatRoom-Divider--BorderWidth: 8px;

    /** 👇 Composer */
    --nlux-Composer--Gap: 5px;

    /** 👇 Prompt input */
    --nlux-PromptInput--FontFamily: 'Merienda', cursive;
    --nlux-PromptInput--FontSize: 16px;
    --nlux-PromptInput--BorderWidth: 5px;
    --nlux-PromptInput--BorderRadius: 8px;
    --nlux-PromptInput-Focus-Outline--Width: 5px;
    --nlux-PromptInput-Max-Height: 80px;
    --nlux-PromptInput-Height: 60px;

    /** 👇 Submit button */
    --nlux-SubmitButton--Width: 65px;
    --nlux-SubmitButton--BorderWidth: 5px;
    --nlux-SubmitButton--BorderRadius: 8px;
    --nlux-SubmitButton-Focus-Outline--Width: 5px;

    /** 👇 Code block in parsed markdown */
    --nlux-CodeBlock--FontSize: 14px;
    --nlux-CodeBlock--FontFamily: 'Courier New', monospace;
    --nlux-CodeBlock--Padding: 10px;
    --nlux-CodeBlock--BorderWidth: 5px;
    --nlux-CodeBlock--BorderRadius: 8px;

    /** 👇 Code block copy button */
    --nlux-CodeBlock-CopyButton--Width: 28px;
    --nlux-CodeBlock-CopyButton--Height: 28px;
    --nlux-CodeBlock-CopyButton--Padding: 2px;
    --nlux-CodeBlock-CopyButton--BorderRadius: 8px;
    --nlux-CodeBlock-CopyButton--BorderWidth: 5px;

    /** 👇 Inline code in markdown */
    --nlux-InlineCode--BorderRadius: 6px;
    --nlux-InlineCode--BorderWidth: 2px;
    --nlux-InlineCode--Padding: 2px 4px;
    --nlux-InlineCode--FontSize: 18px;
}