* {
    transition: 0.5s;
}
:root {
    --primary: rgba(200, 255, 255, 0.7);
    --material: rgb(100, 200, 200);
    --onmaterial: white;
    --dark-bg: rgb(19, 31, 31);
    --light-text: #f1f1f1;
    --dark-primary: rgba(50, 100, 100, 0.7);
    --dark-secondary: rgba(9, 20, 20, 0.7);
}
body {margin: 0px; padding: 0px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #ebfdff;}
.bottom-bar {border-radius: 20px 20px 0px 0px; height: 100px; width: 100vw; position: fixed; bottom: 0px; background-color: var(--primary); backdrop-filter: blur(36px);}
#assistant-btn {border-radius: 20px; height: 60px; width: 60px; border: none; text-align: center; align-items: center; color: var(--onmaterial); position: fixed; bottom: 20px; left: 20px; background-color: var(--material);}
.material-symbols-outlined {font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.chat-container {display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 120px;}
.user-bubble, .response-bubble {padding: 10px 20px; margin: 5px; max-width: 80%;}
.response-bubble {border-radius: 16px 16px 16px 0px;}
.user-bubble {border-radius: 16px 16px 0px 16px;}
.user-bubble {background-color: var(--primary); color: var(--material); align-self: flex-end;}
.response-bubble {background-color: var(--material); color: var(--onmaterial); align-self: flex-start;}
.textBar{height: 60px; left: 100px; bottom: 20px; width: calc(100vw - 140px); border-radius: 20px; background-color: var(--onmaterial); position: fixed; padding-left: 20px; display: flex; align-items: center;}
#transcript {margin: 0; padding: 0;}
.fade-in {
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s;
    -moz-animation: fadeIn ease 1s;
    -o-animation: fadeIn ease 1s;
    -ms-animation: fadeIn ease 1s;
}
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-o-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
  
  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
    body {
        background-color: var(--dark-bg);
        color: var(--light-text);
    }
    .bottom-bar {
        background-color: var(--dark-primary);
        user-select: none;
    }
    .user-bubble {
        background-color: var(--dark-primary);
        color: var(--light-text);
    }
    .response-bubble {
        background-color: var(--dark-secondary);
        color: var(--light-text);
    }
    .textBar {
        background-color: var(--dark-secondary);
        backdrop-filter: blur(8px);
        color: var(--light-text);
    }
}
.location {
    font-weight: bold;
}