/* ---------------------------------------------------------------------
                           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) */
    font-weight: normal !important; /* Override the default bold style */

}


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;
    
    /* Changed from 'fixed' to 'scroll' */
    background-attachment: fixed; 
    overflow: hidden;
    
    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;  

}


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

/* You / User */
.chat-message-right {
    text-align: left;
    white-space: pre-wrap;   /* SC - Sept 23 2025 - keep \n as real line breaks */
    overflow-wrap: anywhere; /* SC - Sept 23 2025 - avoid horizontal scroll on long lines/URLs */
}


/* 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 {
    position: fixed;
    /* top: env(safe-area-inset-top, 15px);  */
    top: env(safe-area-inset-top);
    left: env(safe-area-inset-left);
    right: env(safe-area-inset-right);
    bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
    /* height: 100vh;   */
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));  
    background-color: transparent;
    overflow: hidden; 
}


#conversation {
    flex-grow: 1;
    
    overflow-y: auto;
    margin-bottom: 10px; 
    background-color: transparent;
    border: none;
    
    max-height: calc(100vh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); 
    
}

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;

}


.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; 
}

/* SC - July 21 2024 */

.safe-area-padding {
    /*padding-top: calc(env(safe-area-inset-top, 0px)); /* 30px added to safe area */
    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);
}

.settings-button-container {
    position: fixed;
   /* top: calc(env(safe-area-inset-top, 0px) + 30); */
    top: calc(env(safe-area-inset-top, 0px) + 30);
    right: 15px;
    z-index: 1000;
}


/* Safe area bottom padding class */
.safe-area-bottom {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5px);
}



#forms-container {
    background-color: transparent;
    flex-shrink: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5px)!important;
    position: fixed; 
    bottom: 0;
    width: 100%;
    z-index: 1000; 

}

/* Apply additional padding for the modal specifically */
#settingsModal .modal-content {
    padding-top: calc(env(safe-area-inset-top) + 15px); 
}

/* SC - Apr 8 2025 - Style for the optimizeButton7days */
#optimizeButton7Days, #optimizeButton3Days {
    background-color: rgba(255, 255, 255, 0.35);  /* White translucent background */
    color: grey;                 
    border: none;
    font-family: "Sohne-Leicht", sans-serif; 
    font-size: 17px;
    border-radius: 15px;                         

}

/* SC - Apr 8 2025 - Hover effect for the optimizeButton7days */
#optimizeButton7Days:hover, #optimizeButton3Days:hover {
    color: black;
}

/* SC - Apr 8 2025 - Remove default focus outline and box-shadow for the input and button elements */
#question:focus,
#button-addon:focus,
button:focus {
    outline: none !important;
    box-shadow: none !important;
}    

/* SC - Aug 12 2025 - Settings modal: lighter placeholder text only inside the modal */
#settingsModal input::placeholder,
#settingsModal textarea::placeholder {
  color: #9aa3ab;   /* soft gray */
  opacity: 0.85;    /* lighter = more “example-like” */
}

/* SC - Aug 12 2025 -Cross-browser prefixes (safe, minimal) */
#settingsModal input::-webkit-input-placeholder,
#settingsModal textarea::-webkit-input-placeholder { color: #9aa3ab; opacity: 0.55; }
#settingsModal input:-ms-input-placeholder,
#settingsModal textarea:-ms-input-placeholder { color: #9aa3ab; opacity: 1; }   /* old IE/Edge */
#settingsModal input::-ms-input-placeholder,
#settingsModal textarea::-ms-input-placeholder { color: #9aa3ab; opacity: 1; }  /* old IE/Edge */

/* SC - Aug 12 2025 - Keep multiline placeholders readable */
#settingsModal textarea::placeholder {
  white-space: pre-line;
}

/* SC - Aug 13 2025 */
#settingsSaveBtn .spinner-border { margin-left: .5rem; vertical-align: text-bottom; }

/* SC - Aug 18 2025 -- aligns the text with the thinking dot for the end session message */
.thinking-inline {
  display: inline-flex;
  align-items: center;
}

/* SC - Aug 18 2025 - checkmark for ready to logout */
.status-check {
  display: inline-block;
  font-weight: 700;
  margin-right: 12px;
  line-height: 1;  
  vertical-align: middle;
  color: black
}

/* -------------------------------------------- */
/* SC - this area fixes the issue with an extra blank line between the Arq response and the final Arq statement */
/* SC - Aug 18 20205 - remove extra space after the last element inside each chat bubble */
.chat-message-left > :last-child,
.chat-message-right > :last-child {
  margin-bottom: 0 !important;
}

/* SC - Aug 18 20205 - markdown paragraphs: reduce default spacing and remove the trailing one */
.chat-message-left p,
.chat-message-right p {
  margin: 0 0 0.5rem;  /* tighter than the 1rem browser default */
}

/* SC - Aug 18 20205 - */
.chat-message-left p:last-child,
.chat-message-right p:last-child {
  margin-bottom: 0 !important;
}
/* -------------------------------------------- */

/* SC - Aug 25 2025 - make the text for the updating running_summary feedback blue */
.thinking-inline .thinking-msg {
    color: #0F4C81;
    font-family: 'Sohne-Leicht', sans-serif;
    font-size: 17;
}

/* SC - Aug 26 2025 - Make the checkmark align with the first line */
.thinking-inline { 
  display: inline-flex;           
  align-items: center;   
  gap: 0.5rem;
}

/* SC - Aug 26 2025 - Nudge the checkmark down a hair so it visually matches the cap height */
.status-check {
  align-self: flex-start;
  margin-top: 0.25em;             
  flex: 0 0 auto;
}

/* SC - Aug 26 2025 - make the checkmark blue */
.thinking-inline i.status-check { 
    color: #0F4C81
}


#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 { */

/* SC - Sept 6 2025 - rename the send button from circle-button */
#questionForm .input-group-append .btn.btn-primary.send-btn {
    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;
}

/* ----------------------------------------------------------------------------------- */
/* SC - Sept 7 2025 - Let the textarea grow up to 10 lines, no manual resizer handle */

/* This is so that the grey is consistent throughout the UI */
:root {
  --arq-placeholder-grey: #6c757d; /* matches "Share with Arq" placeholder */
}

/* Textarea: translucent, grows up to 10 lines */
#questionForm .form-control {
  background-color: rgba(255, 255, 255, 0.35);
  color: #000;
  border: none;
  border-radius: 15px 0 0 15px;
  line-height: 1.4;                 /* 1 line = 1.4em */
  padding: 8px 12px;
  /* Make the 1-line height based on line-height + padding (not a hard 40px) */
  min-height: calc(1.4em + 16px);   /* 8px top + 8px bottom */
  max-height: calc(1.4em * 10 + 16px);
  resize: none;
  overflow-y: auto;                  /* scroll only after hitting max */
}

/* Keep everything on one row and let children stretch vertically */
#questionForm .input-group.input-grow {
  flex-wrap: nowrap;
  align-items: stretch;              /* makes textarea & button equal height */
}

/* Ensure the append container itself stretches */
#questionForm .input-group-append {
  display: flex;
  align-items: stretch;
}

/* Send button: translucent, fixed width, height matches textarea */
#questionForm .input-group-append .btn.btn-primary.send-btn {
  background-color: rgba(255, 255, 255, 0.35) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 0 15px 15px 0;
  width: 44px;                       /* fixed width */
  height: auto;                      /* let height stretch with textarea */
  min-height: calc(1.4em + 16px);    /* same 1-line minimum as textarea */
  padding: 0;
  display: inline-flex;
  align-items: flex-end;       
  justify-content: center;           /* keep it horizontally centered */
  box-shadow: none;                  /* avoid Bootstrap primary shadows */
}

/* Subtle hover/focus */
#questionForm .input-group-append .btn.btn-primary.send-btn:hover,
#questionForm .input-group-append .btn.btn-primary.send-btn:focus {
    background-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: none !important; /* block Bootstrap's focus/active glow */
}

/* Icon appearance: fixed size + ~35% opacity */
#questionForm .input-group-append .send-btn i {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.35);
  line-height: 1;             /* avoid baseline sag */
  display: block;             /* helps vertical centering in flex */
}

/* Optional: brighten a touch on hover for feedback */
#questionForm .input-group-append .send-btn:hover i,
#questionForm .input-group-append .send-btn:focus i {
  color: black;
}

#questionForm .input-group-append .send-btn i {
    transition: color 120ms ease;
    transform: translateY(-10px);
}

/* SC - Sept 2 2025 - use the same code for the audio mode button */
#micBtn {
    
    background-color: rgba(255, 255, 255, 0.35);    
    color: var(--arq-placeholder-grey);
    border: none;
    font-family: "Sohne-Leicht", sans-serif; 
    font-size: 17px;
    border-radius: 15px;                         

}

/* SC - Sept 7 2025 - make children inherit the button color */
#micBtn .label,
#micBtn i {
  color: inherit;
  transition: color 120ms ease;
}

/* SC - Sept 7 2025 - hover/focus: turn text + icon black, keep bg the same */
#micBtn:hover,
#micBtn:focus {
  color: #000 !important;  /* affects both label and icon via inherit */
  background-color: rgba(255, 255, 255, 0.35) !important; /* prevent Bootstrap hover bg */
  box-shadow: none !important; /* optional: kill focus glow */
}

/* ----------------------------------------------------------------------------------- */

/* SC - Sept 23 2025 - Rotate the chevron when open */
.chev .fa-chevron-down { transition: transform .2s ease; }
.chev[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }

.chev {

  font-family: 'Sohne-Leicht', sans-serif;
  font-size: 17px;
  color: inherit !important;          /* not blue; use body color */
  text-decoration: none !important;   /* no underline */
  background: transparent;
  border: 0;                          /* keep it text-like */
}

.chev:hover { text-decoration: underline; }  /* optional hover cue */
.chev:focus { outline: none; box-shadow: none; }

.chev .fa-chevron-down { transition: transform .2s ease; }
.chev[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }



/* ----------------------------------------------------------------------------------- */