/*
	This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
	The file remains available at all times for demonstration purposes,
	but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/


/* ========= NEW Hero Visualization Styles ========= */

.hero-visualization-v2 {
    position: relative;
    width: 400px; /* Zvětšeno pro lepší efekt */
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
}

.hero-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--mud-palette-primary-lighten) 0%, transparent 70%);
    opacity: 0.15;
    animation: slow-pulse 5s ease-in-out infinite;
}

.hero-brain {
    font-size: 5rem; /* Velikost ikony mozku */
    color: var(--mud-palette-primary);
    animation: slow-pulse 5s ease-in-out infinite;
    z-index: 10;
    filter: drop-shadow(0 0 15px var(--mud-palette-primary-lighten));
}

.orbit {
    position: absolute;
    border: 2px dashed var(--mud-palette-primary-lighten);
    border-radius: 50%;
    animation: spin linear infinite;
}

.orbit-icon-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.hero-doc-icon {
    position: absolute;
    top: -16px; /* Pozice ikony na orbitě */
    left: calc(50% - 16px);
    font-size: 2rem; /* Velikost ikon dokumentů */
    background-color: var(--mud-palette-background);
    border-radius: 50%;
    padding: 8px;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 11;
}

    .hero-doc-icon:hover {
        transform: scale(1.3); /* Zvětšení při najetí myší */
        box-shadow: 0 6px 20px rgba(0,0,0,0.2);
        z-index: 12;
    }


/* --- Keyframe animace --- */

@@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@@keyframes slow-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Typing animation for cursor */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: currentColor;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Thinking animation */

.thinking-animation::after {
    content: '.';
    animation: thinking 1.5s infinite;
    display: inline-block;
    width: 20px;
    text-align: left;
}

@keyframes thinking {
    0% {
        content: '.';
    }

    33% {
        content: '..';
    }

    66% {
        content: '...';
    }

    100% {
        content: '.';
    }
}

/* MudBlazor CSS */

code {
    background-color: #eee;
    border: 1px solid #999;
    display: block;
    padding: 10px;
}

.page-header .mud-typography-gutterbottom{
    margin-bottom: 0px !important
}

.rag-response ol{
    padding:0px 2rem;
}

.rag-response li {
    padding: 0px 2rem;
}

.w-50 {
    width: 50% !important;
    max-width: 50% !important;
}

.mud-drawer:not(.mud-drawer-fixed) {
    position: fixed !important;
}

.notification-list {
    height: 83%;
    align-items: baseline;
    overflow-y: auto;
}

.mud-input.mud-input-underline:after {
    border-bottom: 2px solid var(--mud-palette-secondary) !important;
}

.mud-input.mud-input-underline:hover {
    border-bottom: 1px solid var(--mud-palette-secondary) !important;
}

.mud-input.mud-input-underline:before {
    border-bottom: 1px solid var(--mud-palette-secondary) !important;
}

.mud-table-cell {
    padding: 7px !important;
}

.mud-table-row .mud-table-cell button:first-child {
    margin-left: 1px;
}

.mud-table-root{
    margin: 2px 0 8px 0 !important;
}

.top-row label.mud-input-label-margin-dense.mud-input-label-text {
    color: white !important;
}

.localize-select.mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    margin-top: 0 !important;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(89, 74, 226, 1);
}

.top-row div.mud-input-slot.mud-select-input {
    color: white !important;
}

label.mud-input-label-margin-dense.mud-input-label-text {
    color: black !important;
}

div.mud-input-slot.mud-select-input {
    color: black !important;
}

svg.mud-icon-root.mud-icon-default.mud-svg-icon.mud-icon-size-medium {
    color: white !important;
}

h1:focus{
    outline:none;
}

.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(25%);
    }
}

.mud-wasm {
    animation: slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg,#594AE2 50%, #FF1F69 50%);
    bottom: 0;
    left: -50%;
    opacity: .75;
    position: fixed;
    right: -50%;
    top: 0;
    z-index: -1;
}

.mud-wasm-cont {
    left: 50%;
    padding: 10vmin;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%,-50%)
}

.hero-icon-container {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.floating-dots {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
}

.dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: var(--mud-palette-secondary);
    border-radius: 50%;
    animation: float-dot 2s ease-in-out infinite;
}

    .dot:nth-child(1) {
        animation-delay: 0s;
        top: 0;
        left: 0;
    }

    .dot:nth-child(2) {
        animation-delay: 0.5s;
        top: 0;
        right: 0;
    }

    .dot:nth-child(3) {
        animation-delay: 1s;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

.feature-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

    .feature-icon-wrapper.primary {
        background: linear-gradient(135deg, var(--mud-palette-primary-lighten) 0%, var(--mud-palette-primary) 100%);
        color: white;
    }

    .feature-icon-wrapper.secondary {
        background: linear-gradient(135deg, var(--mud-palette-secondary-lighten) 0%, var(--mud-palette-secondary) 100%);
        color: white;
    }

    .feature-icon-wrapper.warning {
        background: linear-gradient(135deg, var(--mud-palette-warning-lighten) 0%, var(--mud-palette-warning) 100%);
        color: white;
    }

.hover-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

    .hover-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        border-color: var(--mud-palette-primary-lighten);
    }

        .hover-card:hover .feature-icon-wrapper {
            transform: scale(1.1);
        }

.assistant-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

    .assistant-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        border-color: var(--mud-palette-primary);
    }

.workflow-template-card {
    transition: all 0.3s ease;
}

    .workflow-template-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

@keyframes float-dot {
    0%, 100% {
        transform: translateY(0px);
        opacity: 1;
    }

    50% {
        transform: translateY(-10px);
        opacity: 0.7;
    }
}

/* Přidejte tyto styly do vašeho CSS souboru nebo do komponenty */

.rag-response {
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
}

    /* Nadpisy s lepším spacingem */
    .rag-response h1 {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--mud-palette-primary);
        margin: 1.5rem 0 1rem 0;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--mud-palette-primary);
        line-height: 1.3;
    }

        .rag-response h1:first-child {
            margin-top: 0;
        }

    .rag-response h2 {
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
        margin: 1.5rem 0 0.8rem 0;
        padding: 0.6rem 0 0.6rem 1rem;
        border-left: 4px solid var(--mud-palette-primary);
        background-color: var(--mud-palette-background-grey);
        border-radius: 0 4px 4px 0;
    }

    .rag-response h3 {
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
        margin: 1.3rem 0 0.7rem 0;
        position: relative;
        padding-left: 1.2rem;
    }

        .rag-response h3:before {
            content: "▶";
            color: var(--mud-palette-primary);
            position: absolute;
            left: 0;
            font-size: 0.8em;
            top: 0.1em;
        }

    .rag-response h4 {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--mud-palette-text-primary);
        margin: 1.2rem 0 0.6rem 0;
        padding-bottom: 0.2rem;
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    /* Odstavce s lepším spacingem */
    .rag-response p {
        margin: 0.8rem 0;
        text-align: left;
        line-height: 1.6;
    }

        .rag-response p:first-child {
            margin-top: 0;
        }

        .rag-response p:last-child {
            margin-bottom: 0;
        }

        /* Prázdné odstavce pro spacing */
        .rag-response p:empty {
            margin: 1rem 0;
            height: 0.5rem;
        }

    /* Seznamy s lepším stylingem */
    .rag-response ul, .rag-response ol {
        margin: 1rem 0;
        padding-left: 0;
    }

    .rag-response ul {
        list-style: none;
    }

        .rag-response ul li {
            position: relative;
            margin: 0.6rem 0;
            padding-left: 1.5rem;
            line-height: 1.5;
        }

            .rag-response ul li:before {
                content: "•";
                color: var(--mud-palette-primary);
                font-weight: bold;
                position: absolute;
                left: 0;
                font-size: 1.2em;
                top: -0.1em;
            }

    .rag-response ol {
        counter-reset: custom-counter;
        list-style: none;
    }

        .rag-response ol li {
            position: relative;
            margin: 0.6rem 0;
            padding-left: 2rem;
            line-height: 1.5;
            counter-increment: custom-counter;
        }

            .rag-response ol li:before {
                content: counter(custom-counter) ".";
                color: var(--mud-palette-primary);
                font-weight: bold;
                position: absolute;
                left: 0;
                min-width: 1.5rem;
                top: 0;
            }

    /* Zvýraznění textu */
    .rag-response strong, .rag-response b {
        font-weight: 600;
        color: var(--mud-palette-text-primary);
    }

    .rag-response em, .rag-response i {
        font-style: italic;
        color: var(--mud-palette-text-secondary);
    }

    /* Odkazy */
    .rag-response a {
        color: var(--mud-palette-primary);
        text-decoration: none;
        border-bottom: 1px solid var(--mud-palette-primary);
        transition: all 0.2s ease;
        padding: 1px 2px;
        border-radius: 2px;
    }

        .rag-response a:hover {
            background-color: var(--mud-palette-primary-lighten);
            color: var(--mud-palette-primary-darken);
        }

    /* Kód */
    .rag-response code {
        background-color: var(--mud-palette-background-grey);
        color: var(--mud-palette-error);
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
        font-size: 0.9em;
        border: 1px solid var(--mud-palette-divider);
    }

    .rag-response pre {
        background-color: var(--mud-palette-dark);
        color: var(--mud-palette-white);
        padding: 1rem;
        border-radius: 6px;
        overflow-x: auto;
        margin: 1rem 0;
        border: 1px solid var(--mud-palette-divider);
    }

        .rag-response pre code {
            background: none;
            border: none;
            padding: 0;
            color: inherit;
            font-size: 0.85rem;
        }

/* Dark mode podpora */
.mud-theme-dark .rag-response {
    color: var(--mud-palette-text-primary);
}

    .mud-theme-dark .rag-response h1 {
        border-bottom-color: var(--mud-palette-primary-lighten);
    }

    .mud-theme-dark .rag-response h2 {
        background-color: var(--mud-palette-surface);
        border-left-color: var(--mud-palette-primary-lighten);
    }

    .mud-theme-dark .rag-response h3:before {
        color: var(--mud-palette-primary-lighten);
    }

    .mud-theme-dark .rag-response ul li:before,
    .mud-theme-dark .rag-response ol li:before {
        color: var(--mud-palette-primary-lighten);
    }

/* Responsive design */
@media (max-width: 600px) {
    .rag-response {
        font-size: 0.9rem;
    }

        .rag-response h1 {
            font-size: 1.3rem;
        }

        .rag-response h2 {
            font-size: 1.2rem;
            padding-left: 0.8rem;
        }

        .rag-response h3 {
            font-size: 1.1rem;
            padding-left: 1rem;
        }

        .rag-response ul li,
        .rag-response ol li {
            padding-left: 1.2rem;
        }
}