/* Recording screen: keep the original recorder and text-entry flow, but use the shared warm visual language. */
#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) {
  min-height: 100svh !important;
  background-color: #fff8e8 !important;
  background-image:
    linear-gradient(rgba(255, 248, 232, .62), rgba(255, 250, 240, .76)),
    url("/assets/memoir-gallery-room.png") !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
  background-attachment: fixed, fixed !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > header {
  min-height: 5.25rem !important;
  background: rgba(255, 253, 247, .95) !important;
  border-bottom: 1px solid rgba(173, 98, 29, .20) !important;
  box-shadow: 0 3px 12px rgba(112, 70, 29, .10) !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > header h2 {
  color: #783b18 !important;
  font-size: clamp(1.65rem, 2.3vw, 2.25rem) !important;
  font-weight: 900 !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > header > button {
  border: 1px solid #f1d295 !important;
  border-radius: 1.45rem !important;
  background: linear-gradient(180deg, #fff9de, #ffedb8) !important;
  color: #9a4b17 !important;
  box-shadow: 0 .3rem .75rem rgba(129, 81, 27, .12) !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main {
  width: min(100%, 70rem) !important;
  margin: 0 auto !important;
  padding: 2.1rem 1.2rem 2.6rem !important;
  align-items: flex-start !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main > div {
  max-width: 48rem !important;
  padding: clamp(1.5rem, 3vw, 2.5rem) !important;
  border: 2px solid rgba(255, 255, 255, .94) !important;
  border-radius: 1.8rem !important;
  background: rgba(255, 253, 248, .95) !important;
  box-shadow: 0 18px 38px rgba(101, 59, 26, .16) !important;
  align-self: flex-start !important;
  height: fit-content !important;
}

/* Input-mode switch stays a real pair of buttons. */
#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main > div > div > div.flex.rounded-2xl {
  padding: .35rem !important;
  border: 1px solid #f1d8a8 !important;
  background: #fff3d8 !important;
  box-shadow: inset 0 1px 1px rgba(124, 75, 28, .06) !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main > div > div > div.flex.rounded-2xl > button {
  min-height: 3.35rem !important;
  border-radius: 1.15rem !important;
  color: #996127 !important;
  font-size: 1.06rem !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main > div > div > div.flex.rounded-2xl > button[class*="bg-white/20"] {
  background: linear-gradient(135deg, #ffb43e, #ff7b1b) !important;
  color: #fff !important;
  box-shadow: 0 .45rem 1rem rgba(211, 103, 17, .22) !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main p {
  color: #8a5b36 !important;
  font-weight: 650 !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main textarea {
  min-height: 15rem !important;
  border-color: #efd7a4 !important;
  background: #fffdf8 !important;
  color: #633615 !important;
  box-shadow: inset 0 1px 3px rgba(105, 61, 22, .06) !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main textarea::placeholder {
  color: #bb9877 !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main textarea:focus {
  border-color: #f39a29 !important;
  box-shadow: 0 0 0 3px rgba(245, 163, 53, .22) !important;
}

/* Next step and the recorder action retain their click behavior with clear warm emphasis. */
#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main button[class*="bg-blue"] {
  border: 1px solid rgba(222, 113, 17, .12) !important;
  background: linear-gradient(135deg, #ffb43e, #ff741c) !important;
  color: #fff !important;
  box-shadow: 0 .65rem 1.25rem rgba(211, 103, 17, .22) !important;
}

#app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main button:disabled {
  background: #f2c98a !important;
  color: rgba(255,255,255,.86) !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  #app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main {
    padding: 1rem !important;
  }

  #app-root > div > div:has(> main > div > div > div.flex.rounded-2xl) > main > div {
    padding: 1.25rem !important;
  }
}