.phx-disconnected > .chat {
    .disconnected {
        @display block;
    }
}
.phx-error > .chat {
    .phx-errored {
        @display block;
    }
}

.chat {
    @apply h-screen max-h-screen;

    .disconnected, .phx-errored { @apply hidden; }

    .body {
        @apply grid h-3/4 grid-cols-10;

        .log {
            @apply h-full max-w-full col-span-9 h-96 gap-4;

            .time-component {
                @apply inline-block font-mono text-sm flex-none cursor-default;
            }

            li.event {
                .time-component { @apply text-gray-700 dark:text-gray-300; };
                .nick { @apply text-gray-700 dark:text-gray-700; }
            }

        }

        aside {
            @apply px-4 pt-4 bg-gray-100 text-sm;
                .user.dropdown {
                    .content {
                        @apply z-40 origin-top-right absolute right-full mr-4 -mt-4 bg-gray-50 w-80 py-4 px-4 rounded-md shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none;
                    }
                }
        }

    }

}