@import "tailwindcss";

/* Blinking cursor animation for chat input */
@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

@keyframes blinkLightGreen {

    0% {
        box-shadow: 0px 0px 3px 0.5px #32ff6f67;
    }

    25%,
    75% {
        box-shadow: revert;
    }

    100% {
        box-shadow: 0px 0px 3px 0.5px #32ff6f67;
    }
}

@keyframes blinkLightYellow {

    0% {
        box-shadow: 0px 0px 3px 0.5px #ffef3c6c;
    }

    25%,
    75% {
        box-shadow: revert;
    }

    100% {
        box-shadow: 0px 0px 3px 0.5px #ffef3c6c;
    }
}

@keyframes blinkLightBlue {

    0% {
        box-shadow: 0px 0px 3px 0.5px #39a2f362;
    }

    25%,
    75% {
        box-shadow: revert;
    }

    100% {
        box-shadow: 0px 0px 3px 0.5px #39a2f362;
    }
}

div:has(>button.bg-\[--Brand-Orange\]:disabled) {
    background: transparent !important;
    ;
}

@keyframes blinkLightRed {

    0% {
        box-shadow: 0px 0px 3px 0.5px #ff2d5e63;
    }

    25%,
    75% {
        box-shadow: revert;
    }

    100% {
        box-shadow: 0px 0px 3px 0.5px #ff2d5e63;
    }
}

div.bg-gradient-to-b {
    background: var(--button-border-primary);
}

.blinkLightBlue,
.blinkLightGreen,
.blinkLightRed,
.blinkLightYellow {
    animation-duration       : 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.blinkLightBlue {
    animation-name: blinkLightBlue;
    box-shadow    : 0px 0px 3px 0.5px #39a2f32d;
    border        : solid 1px #39a2f362;
}

.blinkLightGreen {
    animation-name: blinkLightGreen;
    box-shadow    : 0px 0px 3px 0.5px #a5ffc075;
    border        : solid 1px rgba(187, 248, 185, 0.31);
}

.blinkLightRed {
    animation-name: blinkLightRed;
    box-shadow    : 0px 0px 3px 0.5px #f63d6875;
    border        : solid 1px #e4547656;
}

.blinkLightYellow {
    animation-name: blinkLightYellow;
    box-shadow    : 0px 0px 3px 0.5px #f7f3c275;
    border        : solid 1px #e4e25456;
}

.blinkLightActive {
    animation: none !important;
}

.blinkLightEmpty {
    box-shadow: inset 1px 0px 3px 0px rgba(255, 255, 255, 0.1),
        inset -1px 0px 3px 0px rgba(78, 78, 78, 0.1);
    animation       : none !important;
    border          : none !important;
    background-color: var(--Neutrals-NeutralSlate400)
}

div:has(>input[type="text"]:focus:not(.focus\:ring-2)):not(:has(>label)),
div:has(>input[type="email"]:focus):not(:has(>label)),
div:has(>input[type="password"]:focus):not(:has(>label)),
div:has(>textarea:focus) {
    animation         : blinkLightBlue 2s ease infinite;
    box-shadow        : 0px 0px 3px 0.5px #39a2f32d;
    border            : 1px solid;
    mask-border-outset: 1px;
    margin            : -1px;
    outline           : none;
    outline-offset    : none;
}

div:has(>input[type="text"]:focus:not(.focus\:ring-2)):not(:has(>label))>input[type="text"]:focus,
div:has(>input[type="email"]:focus):not(:has(>label))>input[type="email"]:focus,
div:has(>input[type="password"]:focus):not(:has(>label))>input[type="password"]:focus {
    outline: none;
    border : none;
}

.Outline {
    background: linear-gradient(180deg, #66B2FF 0%, #0073E5 100%);
}

:root {
    --Brand-Orange: #3399FF;

    --Neutrals-NeutralSlate950: #0A0D12;
    --Neutrals-NeutralSlate900: #181D27;
    --Neutrals-NeutralSlate800: #252B37;
    --Neutrals-NeutralSlate700: #414651;
    --Neutrals-NeutralSlate600: #535862;
    --Neutrals-NeutralSlate500: #7A7680;
    --Neutrals-NeutralSlate400: #A4A7AE;
    --Neutrals-NeutralSlate300: #D5D7DA;
    --Neutrals-NeutralSlate200: #E9EAEB;
    --Neutrals-NeutralSlate100: #F5F5F5;
    --Neutrals-NeutralSlate50 : #FAFAFA;
    --Neutrals-NeutralSlate0  : #FDFDFD;

    --background-primary  : var(--Brand-Orange);
    --background-secondary: var(--Neutrals-NeutralSlate0);
    --background-tertiary : var(--Neutrals-NeutralSlate50);

    --text-primary        : var(--Neutrals-NeutralSlate950);
    --text-secondary      : #717680;
    --text-tertiary       : var(--Neutrals-NeutralSlate400);
    --Light-Grays-l-gray08: #FFFFFF;

    --accent      : #5E48FC;
    --accent-hover: #4C3CF0;
    --accent-text : #FFFFFF;

    --border-color: var(--Neutrals-NeutralSlate200);
    --border-light: var(--Neutrals-NeutralSlate100);

    --Text-White-00: var(--Neutrals-NeutralSlate200);

    --Text-Gray-0  : var(--Neutrals-NeutralSlate200);
    --Text-Gray-50 : var(--Neutrals-NeutralSlate50);
    --Text-Gray-100: var(--Neutrals-NeutralSlate100);
    --Text-Gray-200: var(--Neutrals-NeutralSlate200);
    --Text-Gray-300: var(--Neutrals-NeutralSlate300);
    --Text-Gray-400: var(--Neutrals-NeutralSlate400);
    --Text-Gray-500: var(--Neutrals-NeutralSlate500);
    --Text-Gray-600: var(--Neutrals-NeutralSlate600);
    --Text-Gray-700: var(--Neutrals-NeutralSlate700);
    --Text-Gray-800: var(--Neutrals-NeutralSlate800);
    --Text-Gray-900: var(--Neutrals-NeutralSlate900);
    --Text-Gray-950: var(--Neutrals-NeutralSlate950);
    --Text-Dark-950: var(--Neutrals-NeutralSlate950);

    --Outline-Outline-Gray-200: var(--Neutrals-NeutralSlate200);
    --Button-Secondary        : var(--Neutrals-NeutralSlate100);
    --Main-BG-Gray-100        : var(--Neutrals-NeutralSlate100);
    --red-200                 : #FFC0C5;

    --sidebar-bg         : var(--Neutrals-NeutralSlate200);
    --sidebar-text       : #717680;
    --sidebar-active-bg  : #5E48FC;
    --sidebar-active-text: #FFFFFF;

    --input-bg         : var(--Neutrals-NeutralSlate100);
    --input-border     : var(--Neutrals-NeutralSlate200);
    --input-placeholder: #717680;

    --button-secondary-bg   : var(--Neutrals-NeutralSlate100);
    --button-secondary-hover: var(--Neutrals-NeutralSlate200);
    --button-bg-primary     : var(--Brand-Orange);
    --button-border-primary : linear-gradient(180deg, #66B2FF 0%, #0073E5 100%);

    --color-red         : #FB3748;
    --color-green       : #1FC16B;
    --color-orange      : #5E48FC;
    --color-light-orange: #F38744;
    --color-yellow      : #FEEE95;

    --Other-Red  : #FB3748;
    --Other-Green: #1FC16B;
    --Other-White: #FFFFFF;


    --white: #FFFFFF;

    div:has(>input[type="text"]:focus):not(:has(>label)),
    div:has(>input[type="email"]:focus):not(:has(>label)),
    div:has(>input[type="password"]:focus):not(:has(>label)),
    div:has(>textarea:focus) {
        border-color: color-mix(in srgb, var(--Brand-Orange), white 20%);
    }
}

.dark {
    /* Dark theme variables - using new Figma color palette */
    --background-primary    : #0A0D12;
    /* Dark 7 */
    --background-secondary  : #181D27;
    /* Dark 6 */
    --background-tertiary   : #252B37;
    /* Dark 5 */
    --text-primary          : #FDFDFD;
    /* Gray 6 */
    --text-secondary        : #D5D7DA;
    /* Gray 2 */
    --text-tertiary         : #A4A7AE;
    /* Gray 1 */
    --accent                : #5E48FC;
    /* Brand Main */
    --accent-hover          : #6B56FF;
    /* Slightly lighter brand */
    --accent-text           : #FFFFFF;
    /* Base White */
    --border-color          : #535862;
    /* Dark 3 */
    --border-light          : #414651;
    /* Dark 4 */
    --sidebar-bg            : #181D27;
    /* Dark 6 */
    --sidebar-text          : #D5D7DA;
    /* Gray 2 */
    --sidebar-active-bg     : #5E48FC;
    /* Brand Main */
    --sidebar-active-text   : #FFFFFF;
    /* Base White */
    --input-bg              : #252B37;
    /* Dark 5 */
    --input-border          : #414651;
    /* Dark 4 */
    --input-placeholder     : #717680;
    /* Dark 2 */
    --button-secondary-bg   : #414651;
    /* Dark 4 */
    --button-secondary-hover: #535862;

    --Neutrals-NeutralSlate950: #FDFDFD;
    --Neutrals-NeutralSlate900: #FAFAFA;
    --Neutrals-NeutralSlate800: #F5F5F5;
    --Neutrals-NeutralSlate700: #E9EAEB;
    --Neutrals-NeutralSlate600: #D5D7DA;
    --Neutrals-NeutralSlate500: #A4A7AE;
    --Neutrals-NeutralSlate400: #7A7680;
    --Neutrals-NeutralSlate300: #535862;
    --Neutrals-NeutralSlate200: #414651;
    --Neutrals-NeutralSlate100: #252B37;
    --Neutrals-NeutralSlate50 : #181D27;
    --Neutrals-NeutralSlate0  : #0A0D12;

    --Light-Grays-l-gray08: #0F0F0F;

    div:has(>input[type="text"]:focus):not(:has(>label)),
    div:has(>input[type="email"]:focus):not(:has(>label)),
    div:has(>input[type="password"]:focus):not(:has(>label)),
    div:has(>textarea:focus) {
        border-color: color-mix(in srgb, var(--Brand-Orange), black 20%);
    }

}

* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Neue Montreal';
    src        : url('/fonts/NeueMontreal-Regular.woff2') format('woff2'),
        url('/fonts/NeueMontreal-Regular.woff') format('woff');
    font-weight : normal;
    font-style  : normal;
    font-display: swap;
}



body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color       : var(--background-primary);
    color                  : var(--text-primary);
}

#root {
    height: 100vh;
}

/* Custom slider styling */
.slider {
    -webkit-appearance: none;
    appearance        : none;
    background        : var(--border-color);
    outline           : none;
    border-radius     : 8px;
    transition        : all 0.2s ease;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance        : none;
    width             : 20px;
    height            : 20px;
    border-radius     : 50%;
    background        : var(--accent);
    cursor            : pointer;
    border            : 2px solid white;
    box-shadow        : 0 2px 4px rgba(0, 0, 0, 0.2);
    transition        : all 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
    background: var(--accent-hover);
    transform : scale(1.1);
}

.slider::-moz-range-thumb {
    width        : 20px;
    height       : 20px;
    border-radius: 50%;
    background   : var(--accent);
    cursor       : pointer;
    border       : 2px solid white;
    box-shadow   : 0 2px 4px rgba(0, 0, 0, 0.2);
    transition   : all 0.2s ease;
}

.slider::-moz-range-thumb:hover {
    background: var(--accent-hover);
    transform : scale(1.1);
}

/* Radio button styling */
input[type="radio"] {
    accent-color: var(--accent);
}

/* Focus states */
.slider:focus {
    box-shadow: 0 0 0 3px rgba(94, 72, 252, 0.3);
}

input[type="radio"]:focus {
    box-shadow: 0 0 0 3px rgba(94, 72, 252, 0.3);
}

/* Markdown Content Styling */
.markdown-content {
    line-height: 1.6;
    color      : var(--Neutrals-NeutralSlate950);
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    font-weight  : 600;
    line-height  : 1.3;
    margin-top   : 1em;
    margin-bottom: 0.5em;
}

.markdown-content h1:first-child,
.markdown-content h2:first-child,
.markdown-content h3:first-child,
.markdown-content h4:first-child,
.markdown-content h5:first-child,
.markdown-content h6:first-child {
    margin-top: 0;
}

.markdown-content p {
    margin-bottom: 1em;
}

.markdown-content p:last-child {
    margin-bottom: 0;
}

.markdown-content ul,
.markdown-content ol {
    margin-bottom: 1em;
    padding-left : 1.5em;
}

.markdown-content li {
    margin-bottom: 0.25em;
}

.markdown-content li:last-child {
    margin-bottom: 0;
}

.markdown-content strong {
    font-weight: 600;
    color      : var(--Neutrals-NeutralSlate950);
}

.markdown-content code {
    font-family     : 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size       : 0.875em;
    padding         : 0.2em 0.4em;
    background-color: var(--Neutrals-NeutralSlate100);
    border-radius   : 4px;
    color           : var(--Neutrals-NeutralSlate800);
}

.markdown-content pre {
    font-family     : 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size       : 0.875em;
    line-height     : 1.5;
    background-color: var(--Neutrals-NeutralSlate100);
    border-radius   : 8px;
    padding         : 1rem;
    overflow-x      : auto;
    margin-bottom   : 1em;
}

.markdown-content pre code {
    background   : none;
    padding      : 0;
    border-radius: 0;
    color        : inherit;
}

.markdown-content blockquote {
    border-left : 4px solid var(--Neutrals-NeutralSlate300);
    padding-left: 1rem;
    margin      : 1em 0;
    color       : var(--Neutrals-NeutralSlate700);
    font-style  : italic;
}

.markdown-content a {
    color          : var(--Brand-Orange);
    text-decoration: underline;
    transition     : color 0.2s;
}

.markdown-content a:hover {
    color  : var(--Brand-Orange);
    opacity: 0.8;
}

.markdown-content table {
    width          : 100%;
    border-collapse: collapse;
    margin-bottom  : 1em;
    border         : 1px solid var(--Neutrals-NeutralSlate200);
    border-radius  : 8px;
    overflow       : hidden;
}

.markdown-content th,
.markdown-content td {
    padding      : 0.75rem 1rem;
    text-align   : left;
    border-bottom: 1px solid var(--Neutrals-NeutralSlate200);
}

.markdown-content th {
    background-color: var(--Neutrals-NeutralSlate100);
    font-weight     : 600;
    color           : var(--Neutrals-NeutralSlate950);
}

.markdown-content tr:last-child td {
    border-bottom: none;
}

.markdown-content hr {
    border    : none;
    border-top: 1px solid var(--Neutrals-NeutralSlate200);
    margin    : 1.5em 0;
}