@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@layer base {
    /* btn is for buttons */
    .btn {
        @apply inline-block px-4 py-2 text-white font-medium bg-[#3f5168] hover:bg-[#60728a] disabled:bg-[#71839c] rounded-lg;
    }

    /* for fancy boxes in the attacks table */
    .shadow-sm-inner {
        box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.05);
    }
    .rotate-arrow {
        transform: rotate(-90deg);
        transform-origin: 50% 50%; /* Ensure rotation around the center */
        transition: transform 0.1s ease-in-out;
        @apply text-xs;
    }
    details[open] .rotate-arrow {
        transform: rotate(0deg);
    }

    /* discord-btn is for the Discord button */
    .discord-btn {
        color: #ffffff !important;
        background-color: #5865f2 !important;
        border-radius: 40px !important;
        padding: 6px 12px !important;
    }
    .discord-btn:hover {
        background-color: #4654f1 !important;
        transition: background-color 0.3s !important;
    }    

    /* make text un-highlightable for blurring text */
    .unselectable {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    /* extending the typography class */
    .prose-default {
        @apply prose prose-stone;
        /* prose imposes a max-width, but we don't want it */
        max-width: none;
    }

    /* to display user-submitted and LLM-generated text while preserving
     * whitespace but still wrapping */
    .verbatim {
        @apply whitespace-pre-wrap;
        overflow-wrap: anywhere;
    }
    .verbatim::before {
        /* put a ZWS before so that the first line is always full height */
        content: "\200B";
    }

    /* for spinners during htmx events (htmx adds and removes classes from the
     * spinner so we can make it fade in and out) */
    .htmx-indicator {
        opacity:0;
        transition: opacity 600ms ease-in;
        pointer-events: none;
    }
    .htmx-request .htmx-indicator, .htmx-request.htmx-indicator {
        opacity: 1;
        /* This is a crazy hack: I found that htmx was adding the
         * .htmx-request attribute on page load and then removing it shortly
         * after (why??) This transition delay stops the element from showing
         * up, since the class gets removed in under 100ms most of the time. */
        transition-delay: 100ms !important;
    }
    .pseudo-disabled {
        /* Fake class that looks form elements look disabled. */
        pointer-events: none;
        opacity: 0.25;
    }
    .htmx-request .disable-when-in-progress, .htmx-request.disable-when-in-progress {
        @apply pseudo-disabled;
    }

    /* these are for Django's messages */
    .django-messages {
        /* generic styles for warning box */
        @apply px-4 py-2 my-4 border-solid border border-transparent rounded-sm;
    }
    /* the rest control color as appropriate for the message level */
    .django-messages.debug {
        @apply bg-gray-200 text-gray-700 border-gray-300;
    }
    .django-messages.info {
        @apply bg-blue-200 text-blue-700 border-blue-300;
    }
    .django-messages.success {
        @apply bg-green-200 text-green-700 border-green-300;
    }
    .django-messages.warning {
        @apply bg-yellow-200 text-yellow-700 border-yellow-300;
    }
    .django-messages.error {
        @apply bg-red-200 text-red-700 border-red-300;
    }

    /* These are for the messages that appear in our pseudo-"chat" interface */
    .chat-info-message {
        @apply self-center max-w-md rounded-xl mt-3 px-6 py-4 text-sm items-center justify-center text-center font-medium;
    }
    .chat-info-message.debug {
        @apply text-gray-700 bg-gray-100;
    }
    .chat-info-message.info {
        @apply text-blue-700 bg-blue-100;
    }
    .chat-info-message.success {
        @apply text-green-700 bg-green-100;
    }
    .chat-info-message.warning {
        @apply text-yellow-700 bg-yellow-100;
    }
    .chat-info-message.error {
        @apply text-red-700 bg-red-100;
    }
    .chat-info-message.tutorial {
        @apply max-w-xl;
    }

    /******************************/
    /***** Chat bubble styles *****/
    /******************************/

    /* Common styles for use only with @apply */
    .-bubble-container-common {
        @apply relative flex flex-col my-3 px-3 pb-2 pt-1;
    }
    
    .-bubble-container-left {
        @apply ml-4 mr-[5%] md:mr-[5%] rounded-r-xl rounded-tl-xl;
    }
    
    .-bubble-container-right {
        @apply mr-4 ml-[5%] md:ml-[5%] rounded-l-xl rounded-tr-xl;
    }

    .-bubble-badge-common {
        @apply
            /* positioning */
            absolute z-10 h-8 w-8
            /* centering */
            flex items-center justify-center
            /* appearance */
            rounded-full border border-beige;
    }

    .-bubble-badge-left {
        @apply -left-4 -bottom-3;
    }

    .-bubble-badge-right {
        @apply -right-4 -bottom-3;
    }

    .bubble-section-top {
        @apply flex justify-between items-center mt-1 text-xs;
    }
    .bubble-section-textarea {
        @apply flex w-full px-2 py-2 mt-1 border-none rounded-l-xl rounded-tr-xl overflow-y-auto max-h-48 sm:max-h-none;
    }
    .bubble-section-output-verbatim::before {
        content: '\200B';
    }
    .bubble-section-output-verbatim {
        @apply px-2 py-1 mt-1 verbatim;
    }
    .bubble-section-output-hidden-line {
        @apply flex w-full px-2 py-1 mt-1 border-none rounded-xl overflow-y-auto blur-sm unselectable line-clamp-1;
    }

    /* Defense styles */
    .defense-bubble::before {
        @apply -bubble-badge-common -bubble-badge-left bg-sky-200;
        content: '🏦';
    }
    .defense-bubble {
        @apply -bubble-container-common -bubble-container-left bg-sky-200;
    }
    .defense-bubble > .bubble-section-textarea {
        @apply bg-sky-100;
    }

    /* Attack styles */
    .attack-bubble::before {
        @apply -bubble-badge-common -bubble-badge-right bg-red-200;
        content: '😈';
    }
    .attack-bubble {
        @apply -bubble-container-common -bubble-container-right bg-red-200;
    }
    .attack-bubble > .bubble-section-textarea {
        @apply bg-red-100;
    }

    /* Access code styles */
    .access-code-bubble::before {
        @apply -bubble-badge-common -bubble-badge-right bg-emerald-200;
        content: '🔑';
    }
    .access-code-bubble {
        @apply -bubble-container-common -bubble-container-right bg-emerald-200;
    }
    .access-code-bubble > .bubble-section-textarea {
        @apply bg-emerald-100;
    }

    /* LLM response styles */
    .response-bubble::before {
        @apply -bubble-badge-common -bubble-badge-left bg-slate-200;
        content: '🤖';
    }
    .response-bubble {
        @apply -bubble-container-common -bubble-container-left bg-slate-200;
    }
    .response-bubble > .bubble-section-content::before {
        /* To maintain height of the output */
        content: '\200B';
    }

    .landing-cards {
        @apply flex flex-col items-center justify-center lg:flex-row lg:items-stretch;
    }
    .landing-card {
        @apply bg-light-beige rounded-lg shadow-md m-4 p-4 lg:w-full max-w-sm;
    }
    .landing-card-explanation {
        @apply mt-8;
    }
    .landing-card-example {
        @apply text-left;
        transform: scale(0.9);
        transform-origin: center center;
    }
    .landing-inline-pill {
        /* make sure this doesn't wrap and cut off the "pill" shape */
        @apply rounded-lg py-[0.1rem] px-1 whitespace-nowrap;
    }
    .landing-access-granted {
        @apply font-semibold text-green-600;
        text-shadow: 0 0 1.2rem #ffd700;
        /* also underline, but make it a dashed underline that's gold */
        text-decoration: underline wavy #ffd700;
    }

    /* Styles for the "Restrictions" box on the attack page. */
    .warning-container {
        position: relative;
        padding: 1rem;
        padding-top: calc(1rem + 10px);  /* Add the height of the stripe to the top padding */
        border-radius: 0.5rem;
        overflow: hidden;
        @apply rounded shadow-sm text-slate-900 text-center bg-white my-5;
    }

    .warning-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 10px;
        background-image: repeating-linear-gradient(
            -45deg, 
            #aaaaaa,
            #b0b0b0 20px, 
            #fffe91 20px,
            #f8f861 40px
        );
        border-radius: 0.1rem 0.1rem 0 0;
    }

    /* Tailwind seems to hide the arrow next to <summary> in FF and Chrome, but
     * not in Webkit. We add this for consistent styling across browsers. I'm
     * not sure why the default reset doesn't do this. */
    summary::-webkit-details-marker {
        display: none;
    }

    /* Pagination styles */
    nav.pages {
        @apply text-center;
    }

    nav.pages ul {
        @apply inline-flex -space-x-px text-sm;
    }

    nav.pages ul li a {
        /* Common styles shared across all <a>s */
        @apply px-2 py-2 leading-tight bg-white border border-gray-300;
    }

    nav.pages ul li a.page-active {
        /* Style for clickable pages */
        @apply text-gray-600 hover:text-gray-900 hover:bg-gray-100 cursor-pointer;
    }

    nav.pages ul li a.page-inactive {
        /* Style for unclickable pages (toned down, no hover) */
        @apply text-gray-600;
    }

    nav.pages ul li:first-child a {
        @apply ml-0 rounded-l-lg;
    }

    nav.pages ul li:last-child a {
        @apply mr-0 rounded-r-lg;
    }

    .htmx-request .auth-attempt-inner-table, .htmx-request nav {
        @apply opacity-70;
    }
}