/* Default (Desktop) Styles */
/* REMOVED #note-scene-elements definition to inherit from Scene.css */

/* The wrapper contains the text and the form */
#note-content-wrapper {
  /* Position this wrapper within the parent #note-scene-elements */
  position: absolute; /* Position relative to the Scene.css container */
  bottom: 14%; /* NEW: Position from bottom */
  left: 50%; /* NEW: Center horizontally */
  transform: translateX(-50%); /* NEW: Adjust for centering */
  /* Keep flex properties for internal layout */
  display: flex;
  flex-direction: column; /* Stack text above form by default */
  align-items: center; /* Force children to fill width */
  pointer-events: auto; /* Enable pointer events for children */
  max-width: 600px; /* Restored max width */
  /* width: 90%; -- Removed, let it size naturally or use max-width */
  padding: 0; /* No padding for the wrapper itself */
  box-sizing: border-box;
}

/* Style direct children of the wrapper (text and form container) */
#note-content-wrapper > * {
  width: 100%; /* Allow elements like the form to fill the wrapper */
  margin-bottom: 1em; /* Space between text and form */
  text-align: center; /* Center text by default */
  transform: none; /* Override */
  display: block; /* Ensure block behavior */
  width: 100%; /* Use full wrapper width */
  max-width: none; /* Force smaller max width for text */
  color: black; /* Specific color */
  line-height: 1.4; /* Added for better readability */
  margin-bottom: 1em; /* Ensure space below text */
  /* font-family and font-size will come from .scene-text-line if applied */
  font-family: "DM Serif Text", serif; /* Explicitly set for now */
  font-size: 1.2rem; /* Explicitly set for now, matching scene.css */
  pointer-events: auto; /* Text itself isn't interactive, but allow selection */
}

/* Note Text Above - Inherits from .scene-text-line */
#note-scene-elements #note-text-above {
  /* Inherit styles from .scene-text-line (position, transform, font, base size, etc.) */
  /* These styles are applied via adding the class in JS if needed,
       or we assume the base styles from Scene.css apply adequately
       based on structure. Let's redefine only what's needed. */

  /* --- Overrides/Specifics for Note Scene --- */
  position: relative; /* Override absolute positioning from .scene-text-line */
  top: auto;
  left: auto; /* Override */
  transform: none; /* Override */
  display: block; /* Ensure block behavior */
  width: 100%; /* Use full wrapper width */
  max-width: 300px; /* Force smaller max width for text */
  color: black; /* Specific color */
  text-align: center; /* Explicitly center text */
  line-height: 1.4; /* Added for better readability */
  margin-bottom: 1em; /* Ensure space below text */
  /* font-family and font-size will come from .scene-text-line if applied */
  font-family: "DM Serif Text", serif; /* Explicitly set for now */
  font-size: 1.2rem; /* Explicitly set for now, matching scene.css */
  letter-spacing: 0.01em; /* Adjust kerning to match BoxScene */
  pointer-events: auto; /* Text itself isn't interactive, but allow selection */
}

#note-form-container {
  /* Desktop: Centered by the wrapper */
  position: relative; /* For positioning the close button */
  max-width: 350px; /* Max width for the form itself */
  width: 100%; /* Ensure it takes available space within its max-width */
  /* align-self: center; -- Not needed with align-items: stretch on parent */
  margin-bottom: 0; /* No extra margin below the form */
  /* Center the button *inside* the container */
  display: flex;
  justify-content: center;
  align-items: center; /* Add cross-axis alignment */
  padding: 0; /* Remove any internal padding */
  cursor: pointer;
}

.note-scene-form-close-button {
  position: absolute;
  top: -15px;
  right: -15px;
  background: none;
  border: none;
  color: #aaa;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
}

.note-scene-form-close-button:hover {
  color: #333;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Mobile Styles */
@media (max-width: 768px) {
  /* #note-scene-elements inherits responsive behavior from Scene.css if any, or its base styles */

  /* Adjust wrapper positioning for mobile top-left */
  #note-content-wrapper {
    top: 75%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 400px; /* Restored max width */
    width: 90%; /* Slightly reduced width */
    /* Keep other mobile styles */
    flex-direction: column;
    align-items: center; /* Align items left */
    justify-content: flex-start;
    overflow: hidden; /* Prevent text overflow */
  }

  /* Reset text styles for stacked layout */
  #note-content-wrapper > * {
    margin-bottom: 1em; /* Restore vertical margin */
    text-align: center; /* Align children left */
  }

  #note-text-above {
    flex-basis: auto;
    margin-right: 0;
    width: 100%; /* Take width of wrapper */
    text-align: center; /* Explicitly align text left */
    /* align-self: center; -- Already handled by wrapper */
    max-width: none; /* Force smaller max width for text on mobile */
  }

  /* Position form container fixed at the bottom on mobile */
  #note-form-container {
    position: relative;
    bottom: auto; /* Increase bottom spacing further */
    left: auto;
    transform: none;
    width: 90%; /* Use most of screen width */
    max-width: 350px; /* Keep max width */
    z-index: auto; /* Ensure it's above other elements */
    /* Reset flex item properties */
    flex-basis: auto;
    align-self: auto;
    /* Centering handled by button's auto margins now */
    padding: 0; /* Remove any internal padding */
  }

  /* Make the form elements stack vertically on mobile */
  #note-form-container .pubhub-form {
    width: 100%; /* Ensure form fills its container */
    display: flex;
    flex-direction: column;
  }

  /* Hide other text elements that might clutter mobile view */
  #note-text-below,
  #note-hint-text {
    display: none;
  }
}