/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require solution_accordion
 */

 .text-transparent {
  color: transparent;
 }

.gradient-text-study-path-title {
  background: linear-gradient(165deg,rgba(255, 179, 0, 1) 0%, rgba(248, 60, 255, 1) 50%, rgba(0, 140, 255, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-snapshot-title {
  background:  linear-gradient(253.73deg, #FFB300 42.01%, #FF3C7D 61.47%, #008CFF 80.94%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-authentication-background {
  background: 
    url("/assets/auth-iphone-f1a9ad6a.png"),
    url("/assets/auth-star-68e24fa8.svg"),
    url("/assets/auth-star-68e24fa8.svg"),
    linear-gradient(98.53deg, #FFFAF4 0.55%, #F9F1FF 100%);
  background-size: 95%, 130%, 75%, cover;
  background-position: bottom, center 140px, bottom, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

.mobile-authentication-background {
  background: 
    url("/assets/auth-star-7-0c7af0d2.svg"),
    url("/assets/auth-star-6-d18f0707.svg"),
    linear-gradient(98.53deg, #FFFAF4 0.55%, #DDF0FF 100%);
  background-size: 100%, 100%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.carousel-second-slide-background {
  background: 
    url("/assets/personal-study-path-28abe66a.svg"),
    url("/assets/carousel-stars-slide-second-77976a4b.svg"),
    linear-gradient(160.96deg, #FFFFFF 1.56%, #CFE7FE 100%);
  background-size: 100%, 74%, 100%;
  background-position: center, bottom right;
  background-repeat: no-repeat, no-repeat;
}

.carousel {
  &::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }
}

body {
  &:has(dialog[open]) {
    overflow: hidden;
  }

    dialog::backdrop {
        cursor: pointer;
        background-color: #00000085;
    }
}

dialog {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  @media (max-width: 768px) {
    max-width: 100%;
    max-height: 100%;
    inset-block-start: unset;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

html[data-theme="dark"] body dialog::backdrop {
    cursor: pointer;
}


html[data-theme="dark"] .only-light {
    display: none;
}
html[data-theme="light"] .only-dark {
    display: none;
}

@media print {
  body {
    color: black !important;
  }
}

.chat-message:empty::after {
  display: inline-block;
  content: '\\2008\\2008\\2008';
  animation: dotty steps(1,end) 1s infinite;
  color: rgb(107 114 128);
  font-size: 2rem;
}

@media (max-width: 768px) {
  .chat_container {
    direction: rtl;
  }
  
  .chat_content, .sidebar {
    direction: ltr;
  }
}

.turbo-mount-content {
  opacity: 0;
  transition: all 0.4s ease;
}

.turbo-mount-content:not(:empty) {
  opacity: 1;
}

.katex-display {
  overflow: hidden;
  overflow-x: scroll;
  padding: 1em 0;
}

.study-layout {
  background-image: url("/assets/star1-43296f18.svg"), url("/assets/star2-6f86a2cc.svg");
  background-position: top center, top center;
  background-repeat: no-repeat, no-repeat;
}

.animated-text {
  background-image:
    linear-gradient(to right, red, #FFB300 25% ,#FF3C7D 45%, #008CFF 65%, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow-animation 500s linear infinite;
}

@keyframes rainbow-animation {
  to {
      background-position: 4500vh;
  }
}

.overflow-inline-initial { overflow-inline: initial }