/* OpenProf AI - Starry Night Background Effect */

/* Starry night background - use !important to override other styles */
body {
  background-color: #0a0a1a !important;
  background-image: none !important;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-color: #000 !important;
  background-image: 
    /* Chaotic tiny stars - randomized positions */
    radial-gradient(1px 1px at 7px 143px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 53px 27px, rgba(255, 255, 255, 0.72), transparent),
    radial-gradient(1px 1px at 119px 389px, rgba(255, 255, 255, 0.91), transparent),
    radial-gradient(1px 1px at 178px 67px, rgba(255, 255, 255, 0.63), transparent),
    radial-gradient(1px 1px at 243px 512px, rgba(255, 255, 255, 0.78), transparent),
    radial-gradient(1px 1px at 312px 183px, rgba(255, 255, 255, 0.69), transparent),
    radial-gradient(1px 1px at 389px 441px, rgba(255, 255, 255, 0.94), transparent),
    radial-gradient(1px 1px at 467px 89px, rgba(255, 255, 255, 0.57), transparent),
    radial-gradient(1px 1px at 521px 367px, rgba(255, 255, 255, 0.83), transparent),
    radial-gradient(1px 1px at 598px 214px, rgba(255, 255, 255, 0.66), transparent),
    radial-gradient(1px 1px at 673px 578px, rgba(255, 255, 255, 0.89), transparent),
    radial-gradient(1px 1px at 741px 31px, rgba(255, 255, 255, 0.74), transparent),
    radial-gradient(1px 1px at 819px 456px, rgba(255, 255, 255, 0.61), transparent),
    radial-gradient(1px 1px at 887px 127px, rgba(255, 255, 255, 0.87), transparent),
    radial-gradient(1px 1px at 963px 623px, rgba(255, 255, 255, 0.71), transparent),
    radial-gradient(1px 1px at 34px 298px, rgba(255, 255, 255, 0.93), transparent),
    radial-gradient(1px 1px at 98px 534px, rgba(255, 255, 255, 0.58), transparent),
    radial-gradient(1px 1px at 156px 412px, rgba(255, 255, 255, 0.82), transparent),
    radial-gradient(1px 1px at 227px 156px, rgba(255, 255, 255, 0.67), transparent),
    radial-gradient(1px 1px at 289px 589px, rgba(255, 255, 255, 0.96), transparent),
    radial-gradient(1px 1px at 356px 78px, rgba(255, 255, 255, 0.54), transparent),
    radial-gradient(1px 1px at 423px 321px, rgba(255, 255, 255, 0.79), transparent),
    radial-gradient(1px 1px at 491px 467px, rgba(255, 255, 255, 0.88), transparent),
    radial-gradient(1px 1px at 567px 12px, rgba(255, 255, 255, 0.64), transparent),
    radial-gradient(1px 1px at 634px 245px, rgba(255, 255, 255, 0.76), transparent),
    radial-gradient(1px 1px at 712px 398px, rgba(255, 255, 255, 0.92), transparent),
    radial-gradient(1px 1px at 778px 167px, rgba(255, 255, 255, 0.59), transparent),
    radial-gradient(1px 1px at 856px 543px, rgba(255, 255, 255, 0.84), transparent),
    radial-gradient(1px 1px at 923px 289px, rgba(255, 255, 255, 0.68), transparent),
    radial-gradient(1px 1px at 989px 478px, rgba(255, 255, 255, 0.95), transparent),
    /* Medium stars - scattered chaotically */
    radial-gradient(1.5px 1.5px at 67px 234px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1.5px 1.5px at 189px 523px, rgba(255, 255, 255, 0.88), transparent),
    radial-gradient(1.5px 1.5px at 278px 67px, rgba(255, 255, 255, 0.92), transparent),
    radial-gradient(1.5px 1.5px at 412px 189px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 534px 456px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1.5px 1.5px at 623px 312px, rgba(255, 255, 255, 0.87), transparent),
    radial-gradient(1.5px 1.5px at 767px 567px, rgba(255, 255, 255, 0.94), transparent),
    radial-gradient(1.5px 1.5px at 845px 78px, rgba(255, 255, 255, 0.89), transparent),
    radial-gradient(1.5px 1.5px at 934px 378px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1.5px 1.5px at 123px 612px, rgba(255, 255, 255, 0.91), transparent),
    radial-gradient(1.5px 1.5px at 367px 423px, rgba(255, 255, 255, 0.86), transparent),
    radial-gradient(1.5px 1.5px at 489px 134px, rgba(255, 255, 255, 0.93), transparent),
    /* Bright prominent stars - random placement */
    radial-gradient(2px 2px at 89px 378px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2px 2px at 234px 589px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2px 2px at 423px 267px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2px 2px at 612px 478px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2px 2px at 789px 123px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2px 2px at 912px 534px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2px 2px at 156px 45px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2px 2px at 567px 612px, rgba(255, 255, 255, 1), transparent),
    /* Extra tiny dim stars for depth */
    radial-gradient(0.8px 0.8px at 23px 456px, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(0.8px 0.8px at 145px 234px, rgba(255, 255, 255, 0.52), transparent),
    radial-gradient(0.8px 0.8px at 267px 378px, rgba(255, 255, 255, 0.38), transparent),
    radial-gradient(0.8px 0.8px at 389px 567px, rgba(255, 255, 255, 0.48), transparent),
    radial-gradient(0.8px 0.8px at 512px 189px, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(0.8px 0.8px at 634px 423px, rgba(255, 255, 255, 0.42), transparent),
    radial-gradient(0.8px 0.8px at 756px 289px, rgba(255, 255, 255, 0.49), transparent),
    radial-gradient(0.8px 0.8px at 878px 512px, rgba(255, 255, 255, 0.56), transparent),
    radial-gradient(0.8px 0.8px at 945px 67px, rgba(255, 255, 255, 0.41), transparent) !important;
  background-size: 1100px 750px !important;
  background-repeat: repeat !important;
}

/* Blinking stars layer - only a few stars with subtle blink */
.starry-blink-layer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-color: transparent !important;
  background-image: 
    /* Only a few select stars that will blink */
    radial-gradient(1.5px 1.5px at 123px 267px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 456px 134px, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 789px 456px, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(1.5px 1.5px at 234px 534px, rgba(255, 255, 255, 0.88), transparent),
    radial-gradient(1.5px 1.5px at 612px 312px, rgba(255, 255, 255, 0.92), transparent),
    radial-gradient(1.5px 1.5px at 867px 89px, rgba(255, 255, 255, 0.87), transparent),
    radial-gradient(1.5px 1.5px at 345px 389px, rgba(255, 255, 255, 0.91), transparent),
    radial-gradient(1.5px 1.5px at 934px 234px, rgba(255, 255, 255, 0.86), transparent);
  background-size: 1200px 700px !important;
  background-repeat: repeat !important;
  animation: gentle-blink 4s ease-in-out infinite !important;
}

body::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-color: transparent !important;
  background-image: 
    /* Chaotic scattered stars - second layer with different positions */
    radial-gradient(1px 1px at 41px 523px, rgba(255, 255, 255, 0.73), transparent),
    radial-gradient(1px 1px at 112px 67px, rgba(255, 255, 255, 0.86), transparent),
    radial-gradient(1px 1px at 178px 312px, rgba(255, 255, 255, 0.59), transparent),
    radial-gradient(1px 1px at 256px 478px, rgba(255, 255, 255, 0.91), transparent),
    radial-gradient(1px 1px at 334px 134px, rgba(255, 255, 255, 0.67), transparent),
    radial-gradient(1px 1px at 401px 389px, rgba(255, 255, 255, 0.82), transparent),
    radial-gradient(1px 1px at 478px 234px, rgba(255, 255, 255, 0.94), transparent),
    radial-gradient(1px 1px at 556px 512px, rgba(255, 255, 255, 0.61), transparent),
    radial-gradient(1px 1px at 623px 78px, rgba(255, 255, 255, 0.77), transparent),
    radial-gradient(1px 1px at 701px 367px, rgba(255, 255, 255, 0.88), transparent),
    radial-gradient(1px 1px at 789px 189px, rgba(255, 255, 255, 0.54), transparent),
    radial-gradient(1px 1px at 867px 456px, rgba(255, 255, 255, 0.79), transparent),
    radial-gradient(1px 1px at 934px 23px, rgba(255, 255, 255, 0.92), transparent),
    radial-gradient(1px 1px at 78px 267px, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1px 1px at 167px 489px, rgba(255, 255, 255, 0.84), transparent),
    radial-gradient(1px 1px at 245px 156px, rgba(255, 255, 255, 0.58), transparent),
    radial-gradient(1px 1px at 312px 534px, rgba(255, 255, 255, 0.96), transparent),
    radial-gradient(1px 1px at 389px 45px, rgba(255, 255, 255, 0.71), transparent),
    radial-gradient(1px 1px at 467px 345px, rgba(255, 255, 255, 0.87), transparent),
    radial-gradient(1px 1px at 534px 178px, rgba(255, 255, 255, 0.62), transparent),
    radial-gradient(1px 1px at 612px 423px, rgba(255, 255, 255, 0.93), transparent),
    radial-gradient(1px 1px at 689px 89px, rgba(255, 255, 255, 0.56), transparent),
    radial-gradient(1px 1px at 767px 512px, rgba(255, 255, 255, 0.81), transparent),
    radial-gradient(1px 1px at 834px 267px, rgba(255, 255, 255, 0.68), transparent),
    radial-gradient(1px 1px at 912px 378px, rgba(255, 255, 255, 0.89), transparent),
    /* Medium brightness stars - chaotic */
    radial-gradient(1.5px 1.5px at 34px 178px, rgba(255, 255, 255, 0.95), transparent),
    radial-gradient(1.5px 1.5px at 156px 423px, rgba(255, 255, 255, 0.87), transparent),
    radial-gradient(1.5px 1.5px at 289px 312px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1.5px 1.5px at 434px 89px, rgba(255, 255, 255, 0.91), transparent),
    radial-gradient(1.5px 1.5px at 578px 489px, rgba(255, 255, 255, 0.84), transparent),
    radial-gradient(1.5px 1.5px at 712px 234px, rgba(255, 255, 255, 0.96), transparent),
    radial-gradient(1.5px 1.5px at 856px 367px, rgba(255, 255, 255, 0.88), transparent),
    radial-gradient(1.5px 1.5px at 945px 123px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(1.5px 1.5px at 89px 534px, rgba(255, 255, 255, 0.92), transparent),
    radial-gradient(1.5px 1.5px at 512px 345px, rgba(255, 255, 255, 0.86), transparent),
    /* Bright stars - scattered randomly */
    radial-gradient(2.5px 2.5px at 134px 289px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2.5px 2.5px at 356px 512px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2.5px 2.5px at 534px 67px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2.5px 2.5px at 723px 423px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2.5px 2.5px at 901px 189px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2.5px 2.5px at 67px 456px, rgba(255, 255, 255, 1), transparent),
    radial-gradient(2.5px 2.5px at 445px 234px, rgba(255, 255, 255, 1), transparent),
    /* Dim distant stars */
    radial-gradient(0.8px 0.8px at 56px 345px, rgba(255, 255, 255, 0.43), transparent),
    radial-gradient(0.8px 0.8px at 189px 178px, rgba(255, 255, 255, 0.51), transparent),
    radial-gradient(0.8px 0.8px at 312px 489px, rgba(255, 255, 255, 0.39), transparent),
    radial-gradient(0.8px 0.8px at 445px 312px, rgba(255, 255, 255, 0.47), transparent),
    radial-gradient(0.8px 0.8px at 578px 134px, rgba(255, 255, 255, 0.54), transparent),
    radial-gradient(0.8px 0.8px at 701px 467px, rgba(255, 255, 255, 0.44), transparent),
    radial-gradient(0.8px 0.8px at 834px 234px, rgba(255, 255, 255, 0.52), transparent),
    radial-gradient(0.8px 0.8px at 956px 389px, rgba(255, 255, 255, 0.46), transparent) !important;
  background-size: 1050px 650px !important;
  background-repeat: repeat !important;
  animation: starry-twinkle 6s ease-in-out infinite alternate-reverse !important;
}

@keyframes starry-twinkle {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}

/* Ensure the root element and all content is above the star background */
#root,
body > *:not(script):not(style) {
  position: relative;
  z-index: 1;
}