/* ========================================
   ROOT RESET (CONTAIN EVERYTHING)
======================================== */
#hw-assessment-app {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  color: #2b2b2b;
}

/* ========================================
   ALL SCREENS (BASE UI)
======================================== */
#hw-assessment-app .hw-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background: linear-gradient(130deg, #c320ff1f, #20b70930 100%);
  border-radius: 58px;
  min-height: 86vh;
  }

  #hw-assessment-app .hw-screen h2 {
  font-size: 26px;
  margin-bottom: 24px;
}

.hw-screen-steps {
    background: #ffffff;
    border-radius: 58px;
    /* min-height: 70vh; */
    /* width: 100%; */
}

/* ========================================
   ANSWER BUTTONS
======================================== */
#hw-assessment-app .hw-screen button {
  width: 100%;
  max-width: 320px;
  padding: 14px;
  margin: 6px 0;
  background: #66068d;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#hw-assessment-app .hw-screen button:hover {
  background: #3fb762;
  border-color: #3fb762;
}

#hw-assessment-app .hw-screen button:active {
  transform: scale(0.97);
}

#hw-assessment-app .hw-screen button {
  text-align: left;
  padding-left: 16px;
}

/* ========================================
   HERO LAYOUT
======================================== */
#hw-assessment-app .hw-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(130deg, #c320ff1f, #20b70930 100%);
    text-align: center;
    padding: 20px;
    border-radius: 58px;
    min-height: 86vh;
}

#hw-assessment-app .hw-hero-content {
  max-width: 80%;
  width: 100%;
}

#hw-assessment-app .hw-title {
  font-size: 65px;
  font-weight: 700;
  line-height: 1.2;
}

#hw-assessment-app .hw-title span {
  color: #3fb762;
}

#hw-assessment-app .hw-sub {
  margin-top: 12px;
  font-size: 23px;
  opacity: 0.75;
}

#hw-assessment-app .hw-small {
  margin-top: 12px;
  font-size: 16px;
    color: #2c2c2c;
}

/* ========================================
   INPUT CONTAINER
======================================== */
#hw-assessment-app .hw-ai-input {
  margin-top: 24px;
    align-items: stretch; /* 🔥 KEY FIX */
  display: flex;
  align-items: center;
max-width: 420px;
  background: #6e0587;
  border-radius: 14px;

  padding: 6px;
    color: #fff;
    opacity: 0.8 !important;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.2s ease;
}

.hw-hero-content .hw-ai-input {
   margin: 0 auto;
}

#hw-assessment-app input#hw-input::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* 🔥 Firefox */
#hw-assessment-app input#hw-input::-moz-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* 🔥 Edge / older browsers */
#hw-assessment-app input#hw-input:-ms-input-placeholder {
  color: #ffffff !important;
}

/* 🔥 Chrome / Safari */
#hw-assessment-app input#hw-input::-webkit-input-placeholder {
  color: #ffffff !important;
}

/* FOCUS EFFECT (IMPORTANT UX) */
#hw-assessment-app .hw-ai-input:focus-within {
  border-color: #3fb762;
  box-shadow: 0 0 0 2px rgba(63,183,98,0.2);
}

#hw-assessment-app input#hw-input {
  all: unset;
  text-align: justify;
  flex: 1;

  padding: 14px 12px;

  font-size: 15px;
  color: #fff;
    width: 100%;
  display: flex;
  align-items: center;
}

/* placeholder */
#hw-assessment-app input#hw-input::placeholder {
  color: rgba(255,255,255,0.4);
}

#hw-assessment-app .hw-ai-input button {
  all: unset;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #3fb762;
  color: #fff;

  border-radius: 10px;
  cursor: pointer;

  font-size: 16px;
  transition: all 0.2s ease;
}

/* hover */
#hw-assessment-app .hw-ai-input button:hover {
  transform: scale(1.05);
}

@media (max-width: 480px) {
  #hw-assessment-app .hw-title {
    font-size: 28px;
  }

  #hw-assessment-app input#hw-input {
    padding: 0px 5px;
    font-size: 13px;
  }

  #hw-assessment-app .hw-sub {
    font-size: 14px;
    color: #000 !important;
  }

  #hw-assessment-app .hw-hero {
    padding: 8px;
    min-height: 66vh;
  }

  #hw-assessment-app .hw-hero-content {
    max-width: 100%;
  }
}

/* #hw-assessment-app input#hw-input {
  all: unset !important;
}
*/
/* ========================================
   LOADING SCREEN
======================================== */
#hw-assessment-app .hw-loading {
    border-radius: 58px;
  min-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.hw-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* SPINNER */
.hw-loader {
  width: 42px;
  height: 42px;

  border: 3px solid rgba(255,255,255,0.1);
  border-top: 3px solid #3fb762;

  border-radius: 50%;
  animation: hw-spin 1s linear infinite;
}

@keyframes hw-spin {
  to { transform: rotate(360deg); }
}

/* TEXT */
.hw-loading-text {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 600;
}

.hw-loading-sub {
  margin-top: 8px;
  font-size: 13px;
  opacity: 0.6;
}