/* 11. Chat Component */
.c-chat {
    @apply mt-8;

    .c-chat__title {
        @apply text-lg font-medium;
        color: var(--foreground);
    }

    .c-chat__list {
        @apply mt-4 flex flex-col gap-3;

        .c-chat__message {
            @apply overflow-hidden p-4 shadow-sm sm:rounded-lg;
            border: 1px solid var(--border);

            &.c-chat__message--system {
                @apply w-full self-center border-0 bg-transparent p-0 shadow-none;
            }

            &.c-chat__message--own {
                @apply self-end rounded-br-none text-right;
                max-width: 80%;
                background-color: var(--primary);
                border-color: var(--primary);

                .c-chat__message-header {
                    @apply flex-row-reverse;
                }
                .c-chat__message-author {
                    color: var(--primary-foreground);
                }
                .c-chat__message-time {
                    color: var(--primary-foreground);
                    opacity: 0.7;
                }
                .c-chat__message-text {
                    color: var(--primary-foreground);
                }
            }

            &.c-chat__message--other {
                @apply self-start rounded-bl-none;
                max-width: 80%;
                background-color: var(--muted);
                border-color: var(--border);

                .c-chat__message-author {
                    color: var(--foreground);
                }
                .c-chat__message-time {
                    color: var(--muted-foreground);
                }
                .c-chat__message-text {
                    color: var(--foreground);
                }
            }

            .c-chat__system-inner {
                @apply flex items-center gap-2 px-3 py-1.5 text-xs;
                background-color: var(--muted);
                border: 1px solid var(--border);
                border-radius: calc(var(--radius) - 2px);
                color: var(--muted-foreground);

                .c-chat__system-icon {
                    @apply size-3.5 shrink-0;
                    color: var(--muted-foreground);
                }

                .c-chat__system-text {
                    @apply flex-1 font-medium;
                }

                .c-chat__system-time {
                    @apply shrink-0 text-[10px];
                    color: var(--muted-foreground);
                }
            }

            .c-chat__message-header {
                @apply flex justify-between;

                .c-chat__message-author {
                    @apply font-semibold;
                    color: var(--foreground);
                }

                .c-chat__message-time {
                    @apply text-xs;
                    color: var(--muted-foreground);
                }
            }

            .c-chat__message-text {
                @apply mt-2 text-sm;
                color: var(--foreground);
            }

            .c-chat__message-media {
                @apply mt-3 flex flex-wrap gap-2;

                .c-chat__media-item {
                    @apply relative max-w-[240px] overflow-hidden bg-black;
                    border-radius: calc(var(--radius) - 2px);
                    border: 1px solid var(--border);

                    .c-chat__image {
                        @apply h-auto max-h-[180px] w-full object-cover;
                    }

                    .c-chat__video {
                        @apply h-auto max-h-[180px] w-full;
                    }

                    .c-chat__play-overlay {
                        @apply absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white;
                    }
                }
            }
        }
    }

    .c-chat__empty {
        color: var(--muted-foreground);
    }

    .c-chat__form {
        @apply mt-6 space-y-6;

        .c-chat__form-group {
            @apply space-y-2;

            .c-chat__label {
                @apply block text-sm font-medium;
                color: var(--foreground);
            }

            .c-chat__textarea {
                @apply mt-1 block w-full shadow-sm;
                border-radius: var(--radius);
                border: 1px solid var(--border);
                background-color: var(--background);
                color: var(--foreground);
            }

            .c-chat__error {
                @apply text-sm;
                color: var(--destructive);
            }

            .c-chat__attachment-container {
                @apply mt-2 flex items-center;

                .c-chat__attach-btn {
                    @apply inline-flex cursor-pointer items-center gap-1.5 text-xs transition-colors;
                    color: var(--muted-foreground);

                    &:hover {
                        color: var(--foreground);
                    }

                    .c-chat__attach-icon {
                        @apply size-3.5;
                    }
                }
            }

            .c-chat__preview-list {
                @apply mt-2 flex flex-wrap gap-2;

                .c-chat__preview-item {
                    @apply relative inline-flex items-center gap-2 p-1.5 pr-8 text-xs;
                    border-radius: calc(var(--radius) - 2px);
                    border: 1px solid var(--border);
                    background-color: var(--muted);

                    .c-chat__preview-name {
                        @apply max-w-[150px] truncate;
                        color: var(--foreground);
                    }

                    .c-chat__preview-remove {
                        @apply absolute top-1.5 right-1.5 cursor-pointer text-[10px];
                        color: var(--muted-foreground);

                        &:hover {
                            color: var(--destructive);
                        }
                    }
                }
            }
        }

        .c-chat__submit-box {
            @apply flex items-center gap-4;

            .c-chat__button {
                @apply inline-flex items-center border border-transparent px-4 py-2 text-xs font-semibold tracking-widest uppercase transition duration-150 ease-in-out focus:ring-2 focus:outline-none;
                border-radius: var(--radius);
                background-color: var(--primary);
                color: var(--primary-foreground);

                &:hover {
                    opacity: 0.9;
                }
            }
        }
    }
}