/* ---------------------------------------------------------------------
                           HTML / CSS
 --------------------------------------------------------------------- */

/* Your custom styles */

@font-face {
    font-family: 'Sohne-Leicht';
    src: url('fonts/Sohne/Sohne-Leicht.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sohne-Kraftig';
    src: url('fonts/Sohne/Sohne-Kraftig.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RightGrotesk-CompactBlack';
    src: url('fonts/RightGrotesk/RightGrotesk-CompactBlack.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SohneMono-Leicht';
    src: url('fonts/Sohne/SohneMono-Leicht.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

strong {
    font-family: 'Sohne-Kraftig', sans-serif; /* Fallback to sans-serif in case the font doesn't load */
    font-size: 17px; /* your desired font size here */; /* Example: 16px */
    /*line-height: calc(1em - 4px); /* Leading = Font size - 4px */
    /*letter-spacing: -0.02em; /* Tracking: -20 (in CSS, this is usually represented in em units) */
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Sohne-Kraftig', sans-serif;
    font-size: 17px!important; /* No space before !important */
}


.custom-header {
    font-family: 'Sohne-Kraftig', sans-serif;
    font-size: 50px!important; /* No space before !important */
    line-height: calc(1em - 4px); /* Leading = Font size - 4px */
    letter-spacing: -0.02em; /* Tracking: -20 (in CSS, this is usually represented in em units) */
}


/* h4 {
    font-family: 'SohneMono-Leicht', sans-serif;
    font-size: 17px!important; 
} */



body, html {
    /* Other styles remain the same */
    margin: 0;
    padding: 0;
    /* Set the minimum height to be at least the full viewport height */
    min-height: 100vh;
    /* Use background image */
    background-image: url('/static/images/web_gradient_7680x4320px.png');
    /* Ensure the image covers the entire element and is centered */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Changed from 'fixed' to 'scroll' */

    font-family: 'Sohne-Leicht', sans-serif;
    font-size: 17px; /* This is already defined in your existing CSS for html */
   /* line-height: calc(1em + 1px); /* Leading = Font size + 1px */
    /*letter-spacing: 0; /* Tracking = 0 */
}

/* Ensure HTML element covers the whole page too */
html {
    height: -webkit-fill-available;
}

/* Extend content behind the notch/Dynamic Island */
@supports(padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Use a fallback for browsers that do not support env() */
@supports not (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: constant(safe-area-inset-top);
    }
}

.chat-message-left, .chat-message-right {
    font-family: 'Sohne-Leicht', sans-serif;
    font-size: 17;
   /* line-height: calc(1em + 1px); /* Leading = Font size + 1px */
  /*  letter-spacing: 0; /* Tracking = 0 */

    background-color: transparent;
    padding: 10px;
    color: #000000;  /* Set font color to white */
}


/* Vision: */
.chat-message-left {
    text-align: left;
}

/* You / User */
.chat-message-right {
    text-align: left;
}


/* Adjustments for Bootstrap */
.chat-box {
    flex-grow: 1;
    overflow-y: auto;
    /* margin-bottom: 10px; /* Adjust as needed for spacing between chat UI and forms */
    border: none; /* Existing rule */
    /* background-color: #000; */
    background-color: transparent;}



/* Additional responsive styles -- for smartphones and tablets  */
@media (max-width: 768px) {
    body {
        font-family: 'Sohne-Leicht', sans-serif;
        font-size: 17px; 
      /*  line-height: calc(1em + 1px); /* Leading = Font size + 1px */
       /* letter-spacing: 0; /* Tracking = 0 */
    }
}

#question, #nightscoutURL {

    font-family: 'Sohne-Leicht', sans-serif;
    font-size: 17px; 
  /*  line-height: calc(1em + 1px); /* Leading = Font size + 1px */
   /* letter-spacing: 0; /* Tracking = 0 */

    width: calc(100% -5 px); /* Adjust width to be full width minus 5px padding */
    background-color: #ffffff;
    border: none; /* Remove the border */
    border-radius: 15px; /* This value is arbitrary, adjust as needed for rounded corners */
    /* Keep other existing styles, and add below properties if not already present */
    box-sizing: border-box; /* Include padding in the width calculation */
    padding-left: 15px; /* Example padding on the left, adjust as needed */
    padding-top: 10px; /* Example padding on the top, adjust as needed */
    padding-bottom: 10px; /* Example padding on the bottom, adjust as needed */
    padding-right: 25px; /* Set padding from the right edge */
    padding-right: 50px; /* Make room for the button - so text doesn't overlap it */

}

input[type="text"] {
    width: 100%; /* Ensure the textbox takes up the full width of its container */
    max-width: 100%; /* Prevent the textbox from expanding beyond its container */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    word-wrap: break-word; /* Ensure long words or URLs wrap to the next line */
    white-space: pre-wrap; /* Allow text to wrap to the next line */
    border-color: #aaa; /* Assuming the text color is grey (#aaa) */
}


.flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-item {
    flex: 1;
}

.button-container {
    margin-left: 10px;  /* optional: for some spacing between the textbox and the button */
    background-color: #000;
}


#forms-container {
    background-color: transparent;
    flex-shrink: 0;
    padding-bottom: 10px;
}

main-container {
    display: flex;
    flex-direction: column;
    height: 100vh;  /* Changed from 100% to 100vh */
    background-color: transparent;
}

#conversation {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 10px; /* Adjust as needed for spacing between chat UI and forms */
    background-color: transparent;
    border: none;

}

input, button {
    border-color: #fff; /* If you want white borders */
    background-color: transparent;
}

/*Ask a question & Nightscout URL text*/
label {
    color: #ffffff; /* or simply color: white; */
}

.container {
    /* background-color: black !important;*/
    background-color: transparent;
    

}

.card {
    /* background-color: black !important;*/
    background-color: transparent;

}


/* Make sure content doesn't overlap the Dynamic Island */
.main-container, .container {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}


#questionForm .form-control {
    border-radius: 15px 0 0 15px; /* Rounded corners on the left side, square on the right */
    color: #ffffff;
    border: none;
}

#questionForm .input-group-append .btn.btn-primary.circle-button {
    background-color: #ffffff;
    border: none !important;
    color:#000 !important;
    border-radius: 0 15px 15px 0; /* Square on the left side, rounded corners on the right */

}
#questionForm .input-group {
    flex-wrap: nowrap;
}


.circle-button {
    /* background-color: #DFDFDF;*/
    /*background-color: transparent;*/
    background-color: #ffffff;
    border: none;
    /*color: rgb(72, 72, 72)*/
    color:#000;
    border-radius: 15px;
}

.settings-btn {
    background-color: transparent;
    border: none;
    color: black;
}


#settingsModal .modal-title {
    font-family: 'Sohne-Kraftig';
    font-size: 20px;
    line-height: calc(1em - 4px); /* Leading = Font size - 4px */
    letter-spacing: -0.02em; /* Tracking: -20 (in CSS, this is usually represented in em units) */
}

#settingsModal .modal-content {
    background-color: rgb(225, 241, 229);
    font-family: 'Sohne-Leicht', sans-serif;
    font-size: 17px; 
   /* line-height: calc(1em + 1px); /* Leading = Font size + 1px */
   /* letter-spacing: 0; /* Tracking = 0 */
}



/*for email and password labels in login.html; also the font color for the text labels in settings modal*/
.label-color, label {
    color: black; /* Or any color that contrasts well with your background */
}


/* Set the background color of the input field with reduced opacity */
input#question {
    background-color: rgba(255, 255, 255, 0.35); /* Adjust the RGB values to match your desired color */
    border: none; /* Optional: removes the border */
    color: black; /* Text color */
}

/* Placeholder color with full opacity */
input#question::placeholder {
    color: grey;
    opacity: 1; /* Full opacity for placeholder */
}

/* Styles for input text */
input#question:not(:placeholder-shown) {
    color: black;
    opacity: 1; /* Full opacity for input text */
}

/* Changing the text color when the user types or the input is focused */
input#question:focus, input#question:not(:placeholder-shown) {
    color: black;
}

/* Thinking animation */
@keyframes pulse {
    0% {
        transform: scale(0.88);
        opacity: 0.7;
    }
    70% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.88);
        opacity: 0.7;
    }
}

/* Thinking dot with glow effect */

.thinking-dot {
    height: 15px;
    width: 15px;
    background-color: #000;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 1.5s infinite ease-in-out;
    margin-right: 15px;
}


ol {
    list-style: none; /* Hide default list markers */
    counter-reset: list-counter; /* Reset the counter */
    font-family: 'Sohne-Leicht', sans-serif; /* Set the font for the list content */
    font-size: 17px;
    padding-left: 20px; /* Add padding to the left of the list to accommodate the number */
}


ol li {
    display: block; /* Change from flex to block */
    counter-increment: list-counter; /* Increment the counter for each list item */
    margin-bottom: 10px; /* Add some space between list items */
    position: relative; /* Enable positioning for ::before */
    padding-left: 30px; /* Add left padding to create space for the numbers */
}

ol li:before {
    content: counter(list-counter) ". "; /* Display the counter value followed by a period */
    font-family: 'Sohne-Leicht', sans-serif; /* Set the font for the counter (marker) */
    margin-right: 10px; /* Add some space between the number and the list content */
    position: absolute; /* Position the number absolutely */
    top: 0; /* Align the top of the number with the top of the list item */
    left: 0; /* Align the left of the number with the left of the list item */
}

/* Style the link */
.reset-link {
    color: black; /* Change the link color to black */
    text-decoration: none; /* Remove underline from the link */
    font-weight: bold; /* Make the link text bold */
    font-family: 'Sohne-Kraftig', sans-serif; /* Apply the custom font */
}

.reset-link:hover {
    text-decoration: underline; 
    color: black; 
}