@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
    --primary-color: rgb(102, 117, 116);
  }

body {
    background-color: var(--primary-color);
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    font-family: "Lato", sans-serif;
}

.chat-container {
    position: absolute;
    right: 0; /* Setzt den Container an den rechten Rand */
    width: 87vw;
    height: 87vh;
    top: 0;
    background: transparent;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: #11111185;

    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* Farbe der Scrollbar */
}

.chat-box {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    position: relative; /* Damit es in den Container passt */
    z-index: 1; /* Sicherstellen, dass die Nachrichtenboxen über dem Unschärfe-Effekt liegen */
}

/* Nachrichten-Styling */
.message {
    max-width: 75%;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    word-wrap: break-word;
    display: inline-block;
}

/* Benutzer-Nachrichten (Links) */
.user-message {
    background-color: var(--primary-color);
    color: white;
    align-self: flex-start;
    border-radius: 10px 10px 10px 0;
    cursor: pointer;
}

/* KI-Nachrichten (Rechts) */
.bot-message {
    background-color: #e5e5e5;
    color: black;
    align-self: flex-end;
    border-radius: 10px 10px 0 10px;
    cursor: pointer;
}


.input-container {
    position: absolute;
    top: 94vh; /* Platziert das Eingabefeld und den Button unter der Chatbox */
    left: 35%;
    display: flex;
    gap: 10px;
    width: 25vw;
    font-family: "Lato", sans-serif;
}

.line-under-chatbox {
    position: absolute;
    top: 92vh; /* Direkt unterhalb der verkleinerten Chatbox */
    left: 0;
    width: 12%; /* Soll mit den linken Einstellungen übereinstimmen */
    height: 2px;
    background-color: white;
    z-index: -2;
}

/* Fokus-Zustand */
.Input-Main:focus {
    outline: 2px solid transparent; /* Oder ein durchsichtiger Rahmen als Trick */
    box-shadow: none; /* Kein leuchtender Effekt */
}

.btn-send {
    border: none;
    background-color: #353535;
    color: white;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.2em;
    font-family: "Lato", sans-serif;}

.btn-send:hover {
    background-color: #111111;
}







.left-container {
    position: absolute;
    bottom: 5%;
    width: 200px;
    text-align: left;
}

.slider-container, .dropdown, .input-Focus, .Emj-btn, #output {
    position: absolute;
    left: 3vw;
    width: 80%;
    max-width: 180px;
    text-align: left;
}

#output {
    position: absolute;
    top: 90px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    left: 0vw;
}

.input-container-focus {
    position: absolute;
    top: 130px; /* Direkt unter #output */
    display: flex;
    flex-direction: column; /* Stellt sicher, dass die Elemente untereinander angezeigt werden */
    align-items: flex-start;
    gap: 5px;
    width: max-content; /* Passt die Breite an den Inhalt an */
    left: -2vw;
}

.input-Focus {
    padding: 6px;
    font-size: 14px;
    border: 2px solid #ffffff;
    border-radius: 5px;
    width: 160px;
    outline: none;
}

.btn-Send {
    background-color: transparent;
    height: 35px;
    color: white;
    border: 1px solid #ffffff;
    border-radius: 5px;
    cursor: pointer;
    padding: 0 15px;
    text-align: center;
    margin-top: 38px; /* Abstand zwischen dem Eingabefeld und dem Button */
    width: 80px;
    position: absolute; /* Damit der Button unabhängig vom Container positioniert wird */
    left: 5.5vw;
}


.btn-Send:hover{
background-color: white;
color: var(--primary-color);
}

.input-container {
    top: 91vh; /* Weiter nach oben verschoben */
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-start;
    background-color: rgba(59, 59, 59, 0.8); /* Hintergrund hinzugefügt */
    padding: 15px 45px 15px; /* Mehr Padding für größere Fläche */
    border-radius: 30px; /* Mehr Abrundung */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.342);
}

.Input-Main {
    padding: 6px;
    font-size: 14px;
    border-radius: 5px;
    width: 80vw;
    min-height: 1vh; /* Kleinere Mindesthöhe */
    max-height: 6vh; /* Begrenzte maximale Höhe */
    border: 1.5px solid #ffffff;
    border-radius: 10px;
    background-color: #b1b1b1;
    color: rgb(41, 41, 41);
    resize: none; /* Verhindert manuelle Größenänderung */
    overflow-y: auto; /* Scrollbar nur wenn nötig */
    font-family: "Lato", sans-serif;
    flex-grow: 1;

    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* Farbe der Scrollbar */
}

.btn-send {
    font-size: 1em;
    background-color: transparent;
    height: 35px;
    color: white;
    border: 1px solid #ffffff;
    border-radius: 5px;
    cursor: pointer;
    width: auto;
    padding: 0 15px;
    text-align: center;
    margin-left: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}

.Emj-btn {
    top: 135px;
    background-color: transparent;
    height: 35px;
    color: white;
    border: 1px solid #ffffff;
    border-radius: 5px;
    cursor: pointer;
    width: 80%;
    max-width: 160px;
    left: 10vw;

}

.Emj-btn:hover{
    background-color: var(--primary-color);

}

.slider-container {
    top: 230px;
}

input[type="range"] {
    accent-color: white; /* Deine gewünschte Farbe */
  }

#sliderValue {
    background: white;
    color: var(--primary-color);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    width: 50px;
    height: auto;
}

.slider-under-text {
    color: white;
    margin-top: 5px;
}

.dropdown {
    position: relative;
    width: 80%;
    max-width: 160px;
    margin-bottom: 25px;
    display: block; /* Stellt sicher, dass sie untereinander stehen */
}

.dropdown-container {
    display: flex;
    flex-direction: column; /* Sorgt dafür, dass sie vertikal angeordnet sind */
    align-items: flex-start; /* Falls nötig */
    position: absolute;
    left: 1.5%;
    top: 345px;
}


.dropdown-btn {
    background-color: var(--primary-color);
    color: black;
    padding: 8px 12px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: transparent;
    min-width: 160px; /* Breite fixieren */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow: hidden;
    right: -72.5%; /* Menü rechts vom Button anzeigen */
    top: 100%;
    white-space: nowrap; /* Text nicht umbrechen */
    border: 1px solid rgb(255, 255, 255);
}

.dropdown-content a {
    color: rgb(233, 233, 233);
    padding: 8px 12px;
    text-decoration: none;
    display: block;
}

.dropdown-content a.active {
    background-color: #777777; /* Helles Dunkelgrau für den aktiven Zustand */
    color: rgb(0, 0, 0); /* Textfarbe ändern, wenn aktiv */
}

.dropdown-content a:hover {
    background-color: #c2c2c2;
    color: #111111;
}

.show {
    display: block;
}

.left-side-content{
    min-height: 100vh; /* Mindestens die volle Höhe des Viewports */
    width: 80px; /* Setzt die Breite des Containers auf 80px */
    margin-right: 92%; /* Keine negative Verschiebung, falls der Container zentriert ist */
    box-sizing: border-box; /* Damit die Border innerhalb der Gesamtbreite gezählt wird */
}

.line-under-focus, 
.line-under-Emj, 
.line-under-Slider, 
.line-under-Txt-kind {
    position: absolute;
    left: 0%;
    width: 12vw; /* Verwendet % basierend auf der Bildschirmbreite */
    height: 2px;
    background-color: white; /* Oder eine andere Farbe */
    z-index: -2;
}

/* Anpassungen für spezifische Positionen basierend auf der Höhe */
.line-under-focus {
    top: 22.5vh; /* 5% der Viewport-Höhe */
}

.line-under-Emj {
    top: 10vh; /* 10% der Viewport-Höhe */
}

.line-under-Slider {
    top: 31.5vh; /* 20% der Viewport-Höhe */
}

.line-under-Txt-kind {
    top: 38vh; /* 25% der Viewport-Höhe */
}

.Txt-Kind-btn{
    display: flex;
    justify-content: center;  /* Horizontale Zentrierung */
    align-items: center;      /* Vertikale Zentrierung */

    flex-direction: column; /* Entfernen, falls nicht nötig */
    position: absolute;
    left: 1.5vw;
    top: 315px;

    background-color: transparent;
    height: 35px;
    color: white;
    border: 1px solid #ffffff;
    border-radius: 5px;
    cursor: pointer;
    width: 80%;
    max-width: 160px;
    text-align: center;
}

.Txt-Kind-btn:hover{
    background-color: white;
    color: var(--primary-color);

}

.Home-btn{
    font-family: Arial, sans-serif;
    color: white;
    font-size: 1.5em;
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 5; /* Sicherstellen, dass es vor dem Footer ist */
}

.Home-btn:hover{
cursor: pointer;
}

.open-window{
    position: absolute;
left: 12%;
top: 10px;
height: 40px;
width: 40px;
background-color: transparent;
border: 1px solid #ffffff;
border-radius: 5px;
line-height: 0px;
color: white;
z-index: 1;
}

.open-window:hover{
    background-color: rgba(0, 0, 0, 0.37);
cursor: pointer;
}


.clear-chat-btn {
    background-color: transparent;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    position: absolute;
    left: 10vw;
    border: 1px solid #ffffff;
    top: 0;
}

.clear-chat-btn:hover {
    background-color: #a84242;
}

.confirm-box {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 25px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); /* Weicherer Schatten */
    border-radius: 10px;
    text-align: center;
    z-index: 1000;  
    backdrop-filter: blur(15px); /* Stärkerer Blur-Effekt */
    -webkit-backdrop-filter: blur(15px);
    background-color: rgba(0, 0, 0, 0.5); /* Etwas weniger transparent */
    color: #fff;
    font-family: 'Roboto', sans-serif; /* Modernere Schrift */
    font-size: 16px;
    max-width: 400px;
    width: 100%;
    padding: 30px 20px; /* Etwas mehr Polsterung für bessere Lesbarkeit */
}

.confirm-btn {
    margin: 10px;
    padding: 5px 10px;
    border: 1px solid #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    background-color: transparent;
    color: #fff;
    outline: none;
}

#confirmYes {
    background-color: transparent;
    color: white;
}

#confirmNo {
    background-color: transparent;
    color: white;
}

#confirmNo:hover{
    background-color: rgb(77, 158, 70);
    border-radius: 5px;
}

#confirmYes:hover{
background-color: #a84242;
border-radius: 5px;
}

@media (max-width: 768px) {
    .chat-container {
        width: 65vw;
        height: 65vh;
    }

    .input-container {
        flex-direction: column; /* Button & Input untereinander */
        align-items: center;
    }

    .Input-Main {
        width: 100%; /* Volle Breite auf kleineren Bildschirmen */
    }

    .btn-send {
        width: 100%; /* Nimmt gesamte Breite ein */
    }

    .message {
        max-width: 80%; /* Etwas schmaler für bessere Lesbarkeit */
    }
}

@media (min-width: 1024px) {

}

@media (max-width: 480px) {
    .chat-container{
        width: 65vw;
        height: 85vh;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
}