@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
  font-family: "DM Sans", sans-serif;
  font-variation-settings: "wght" 600;
  box-sizing: border-box;
  margin: 0px;
  color: var(--secondtext-color);
}

:root {
  --bg-color: #fcf6b1;
  --primary-color: ##2d1e2f;
  --accent-color: #f7b32b;
  --accenttext-color: var(--bg-color);
  --second-color: #b8b8d1;
  --secondtext-color: #2d1e2f;
  --h1: var(--secondtext-color);
  --chat: var(--bg-color);
  --chat-border: var(--secondtext-color);

  --keyboard-background: #222; /* background color */
  --keyboard-foreground: #fff; /* key text color */
  --keyboard-accent: #ffcc00; /* accent (like function keys) */
  --keyboard-button-background: #333; /* button background */
  --keyboard-button-foreground: #fff; /* button text color */
}

:root.scheme-1 {
  --bg-colorx: white;
  --bg-color: #fcf6b1;
  --primary-color: #2d1e2f;
  --accent-color: #f7b32b;
  --accenttext-color: var(--bg-color);
  --second-color: #b8b8d1;
  --secondtext-color: #2d1e2f;
  --h1: var(--secondtext-color);
  --chat: var(--bg-color);
  --chat-border: var(--secondtext-color);
}

:root.scheme-2 {
  --xbg-color: #23f0c7;
  --bg-color: #f6b6b8;
  --primary-color: #6457a6;
  --accent-color: #f6b6b8;
  --accenttext-color: var(--bg-color);
  --second-color: #b8b8d1;
  --secondtext-color: #6457a6;
  --h1: var(--primary-color);
  --chat: var(--bg-color);
  --chat-border: var(--secondtext-color);
}

:root.scheme-3 {
  --bg-color: #da3e52;
  --primary-color: ##2d1e2f;
  --accent-color: #96e6b3;
  --accenttext-color: var(--bg-color);
  --second-color: #f2e94e;
  --secondtext-color: #483d51;
  --h1: var(--second-color);
  --chat: hsl(205, 87%, 30%);
  --chat-border: var(--secondtext-color);
}

:root.scheme-4 {
  --bg-color: 3d405b;
  --primary-color: 3d405b;
  --accent-color: #f2cc8f;
  --accenttext-color: var(--bg-color);
  --second-color: #e07a5f;
  --secondtext-color: #2d1e2f;
  --h1: #e07a5f;
  --chat: #3d405b;
  --chat-border: #e07a5f;
}
::-webkit-scrollbar {
  position: absolute;
  top: 0;
  right: 0px;
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--chat-border);
}

::-webkit-scrollbar-thumb {
  background-color: var(--accent-color);
}

::-webkit-scrollbar-thumb:hover {
  background: white;
  width: 90px;
}

body {
  background-color: var(--bg-color);
  text-align: center;
  font-size: 20pt;
  color: var(--accent-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0px 10px 0px 10px;
  transition: all 0.2s ease-in-out;

  --keyboard-background: var(--primary-color);
  --keycap-background: var(--accent-color);
  --keyboard-toolbar-background: var(--accent-color);
  --keycap-secondary-background: var(--accent-color);
}

h1 {
  font-size: 40pt;
  font-variation-settings: "wght" 900;
  margin-top: 10px;
  line-height: 0.9;
  color: var(--h1);
}

h2 {
  font-size: 20pt;
  font-variation-settings: "wght" 300;
  margin-bottom: 10px;
  line-height: 0.9;
  color: var(--h1);
}

select {
  font-size: 15pt;
  background-color: transparent;
  border: 2px solid var(--h1);
  border-radius: 10px;
  width: 100%;
  max-width: 500px;
  overflow-y: auto;
  white-space: normal; /* Prevents text from wrapping */
  text-overflow: ellipsis; /* Adds ellipsis for overflow text */
  color: var(--h1);
  padding: 5px;
  transition: all 0.2s ease-in-out;
}
/*
    .selectContainer i {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; 
        color: #4a90e2;
    }
*/

option {
  font-size: 10pt;
  white-space: normal;
  background-color: var(--bg-color);
}

.headerContainer {
  border-radius: 10px 10px 0px 0px;
  background-color: var(--chat-border);
  color: var(--chat-border);
  width: 100%;
  max-width: 500px;
  margin-bottom: 0;
  font-size: 25px;
  display: flex;
  padding: 5px 10px 5px 10px;
  justify-content: space-between;

  align-items: center;
}

.headerText {
  color: var(--accent-color);
}

.inputContainer {
  height: fit-content;
  padding: 5px 5px 5px 5px;
  max-height: 500px;
  border-radius: 0px 0px 10px 10px;
  display: flex;
  gap: 8px;
  background-color: var(--chat-border);
  width: 100%;
  box-sizing: border-box;
  max-width: 500px;
  margin-top: 0;
  margin-bottom: 15px;
}

.homeContainer {
  display: flex;
  flex-wrap: wrap; /* allow wrapping */
  gap: 3px; /* space between buttons */
  padding: 3px;
  width: 100%;
}
.homeContainer button {
  flex: 1; /* take equal space */
  padding: 10px; /* adjust for touch comfort */

  background-color: var(--accent-color);
  border: 3px solid var(--h1);
  border-radius: 10px;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  margin: 2px 2px;
  font-size: 15pt;
  font-variation-settings: "wght" 400;
}

.inputContainer button {
  flex: 1; /* take equal space */
  padding: 10px; /* adjust for touch comfort */
  font-size: 1rem;

  background-color: var(--accent-color);
  border: none;
  border-radius: 7px;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  margin: 2px 2px;
  font-size: 15pt;
  font-variation-settings: "wght" 300;
}

.chatContainer {
  background-color: var(--chat);
  border: 4px solid var(--chat-border);
  border-bottom: none;
  border-top: none;
  border-right: none;
  min-height: 100px;
  color: var(--h1);

  overflow-y: scroll;
  width: 100%;
  max-width: 500px;
  margin-bottom: 0;
  margin-top: 0px;
  padding-top: 5px;

  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center; /* vertical center */
  flex-direction: column;
  height: 100%;
}

.chatContainer.home {
  align-items: flex-start; /* push content to top */
  justify-content: flex-start; /* align content to top vertically */
  padding-top: 0; /* remove extra spacing */
  height: 100%;
}

.subchapter-divider {
  width: 100vw;
  max-width: 100vw;
  /*margin-left: calc(-50vw + 50%);*/
  height: 55px;
  background: linear-gradient(
    180deg,
    var(--accent-color) 20%,
    #00000000
  );

  border: none;
  border-radius: 10px;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);*/
  margin-top: 25px;
  margin-bottom: 5px;
  opacity: 1;
  text-align: center;

  margin-left: 0;
  margin-right: auto;
}

.material-btn {
  /*float: right*/
  width: 10 px !important;
  background-color: transparent !important;
  color: var(--secondtext-color);
  border: none !important;
  border-radius: 0px;
  font-size: 30pt !important;
  font-variation-settings: "wght" 200 !important;
  padding: 1px 1px !important;
  opacity: 1;
  box-shadow: none;
  margin-top: 0px !important;
  transition: color 0.2s, opacity 0.2s;
}

/*
.material-btn:hover {
    background-color: var(--accent-color);
    color: pink;
    opacity: 1;
}*/

.small-text {
  font-size: 80%;
  font-variation-settings: "wght" 300;
}
/*
    .divider{
        font-size: 15px;
        background-color: var(--second-color);
        color:var(--secondtext-color)
    }

    .msg {
        margin: 5px 10px 10px 5px;
        border-radius: 5px;
        padding: 5px;
        width: fit-content;
        box-shadow: 4px 4px 0px var(--secondtext-color); /* Add drop shadow *
        max-width: 230px;
       /* word-wrap: break-word; *
       white-space: pre-wrap;
    }

    .msgUser {
        background-color: var(--accent-color);
        text-align: right;
        margin-left: auto;
        color: var(--bg-color);
    }

    .msgBot {
        background-color: var(--second-color);
        text-align: left;
        margin-right: auto;
        color: var(--accent-color);
    }

    .msg p {
        font-size: 14pt; /* Reduced font size *
        font-variation-settings: 'wght'500;
        margin : 0px;
    }

    .msgpinned{
        position: sticky;
        top: 5;
        background-color: var(--bg-color);
        /*padding: 5px 0 5px 0; *
    }

    


    .svgline{
        stroke: rgb(0, 0, 0);
        stroke-width: 3px;
        fill: none
    }

    .svgbg{
        fill: white;
    }

    .svgtext{
        /*text-anchor: middle;
        dominant-baseline: middle;*
        fill: black; 
        font-size: 15px;
        }

        */

#inputMsg {
  background-color: white;
  border: none;
  border-color: var(--accent-color);
  border-radius: 8px;
  color: var(--secondtext-color);
  padding: 5px 10px;
  display: inline-block;
  margin: 2px 2px;
  flex-grow: 1;
  font-size: 20px;
}

#ssendMsg {
  background-color: var(--accent-color);
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
  text-align: center;
  display: inline-block;
  margin: 2px 2px;
  font-size: 15pt;
  font-variation-settings: "wght" 300;
}

.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--secondtext-color);
  color: var(--accent-color);
  padding: 10px 20px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  font-size: 15px;
}

.toastshow {
  opacity: 1;
}

math-field {
  --secondtext-color: var(--accent-color);
  background-color: transparent !important; /* Remove white background */
  border: none !important; /* No border */
  box-shadow: none !important; /* Remove shadow if any */
  outline: none !important; /* Remove focus outline */
  color: var(--h1); /* Math text color */
  font-size: 25px; /* Math size */
  padding: 0px; /* No padding */
  margin: 0px;
  --prompt-color: var(--keyboard-accent);
  --placeholder-color: #00ccff; /* Color of \placeholder text */
  --placeholder-opacity: 0.6; /* Make it semi-transparent */
}

math-field::part(menu-toggle) {
  display: none;
}

math-field::part(virtual-keyboard-toggle) {
  display: none;
}